tuix_core 0.2.0

* {
    color: black;
}

row {
    width: auto;
    height: auto;
}

column {
    width: auto;
    height: auto;
}

button {
    color: black;
    background-color: #dfdfdf;
    child-space: 1s;
}

button:hover {
    background-color: #ebebeb;
}

button:active {
    background-color: #d0d0d0;
}

/* .menu_bar {
    background-color: #646464;
} */


panel>.container1>.container2>row {
    align-items: center;
    width: 1s;
}

panel>.container1 {
    background-color: #ffffff;
}

panel>.header {
    layout-type: row;
    child-left: 0px;
    child-right: 1s;
    background-color: #ff5e1a;
    height: 30px;
    color: white;
}

panel>.header:focus {
    border-width: 1px;
    border-color: black;
}

panel>.header>.icon {
    color: white;
}

panel>.header>.label {
    color: white;
    child-space: 1s;
    child-left: 0px;
}

panel .container2>row>label {
    height: 30px;
    width: 120px;
    color: black;
    child-left: 5px;
    top: 1s;
    bottom: 1s;
}

checkbox {
    width: 20px;
    height: 20px;
    background-color: white;
    border-width: 1px;
    border-color: #757575;
    color: black;
}

list {
    border-width: 1px;
    border-color: #999999;
    height: auto;
    /* width: auto; */
    /* padding: 5px; */
}

check_button {
    color: black;
    background-color:white;
}

check_button:checked {
    background-color: #d0d0d0;
}

/* check_button:hover {
    background-color: #999999;
} */

check_button:focus {
    border-color: black;
    border-width: 1px;
}

dropdown {
    color: black;
    background-color: #d2d2d2;
}

/* dropdown>.header>label { */
    /* child-top: 1s; */
    /* child-bottom: 1s; */
    /* child-left: 5px; */
/* } */

dropdown:focus {
    border-width: 1px;
    border-color: black;
}

dropdown>.header>label {
    color: red;
    child-top: 1s;
    child-bottom: 1s;
    child-left: 5px;
}

/* dropdown label {
    color: black;
    child-top: 1s;
    child-bottom: 1s;
    child-left: 5px;
} */

dropdown .icon {
    color: #ff5e1a;
    width: 30px;
    height: 30px;
}

dropdown>.container {
    top: 100%;
    width: 100%;
    background-color: white;
    /* margin-top: 5px;
    background-color: white;
    border-color: black;
    border-width: 1px; */
    outer-shadow: 2px 2px 5px #80000000;
}

check_item:focus {
    border-width: 1px;
    border-color: black;
}

textbox {
    /* height: 30px; */
    color: black;
    border-width: 1px;
    border-color: #757575;
    child-left: 1s;
    child-right: 1s;
    child-top: 1s;
    child-bottom: 1s;
}

spinbox .increment {
    color: #ff5e1a;
    text-justify: center;
}

spinbox .decrement {
    color: #ff5e1a;
    text-justify: center;
}

spinbox>textbox {
    color: black;
    border-width: 1px;
    border-color: #757575;
    right: -1px;
    text-align: center;
    text-justify: center;
}

spinbox>.arrow_container {
    border-width: 1px;
    border-color: #757575;
}

slider {
    height: 20px;
}

slider>.track {
    background-color: #dfdfdf;
    border-radius: 2px;
}

slider>.track>.active {
    background-color: #f74c00;
    border-radius: 2px;
}

slider>.thumb {
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 9.5px;
    border-color: #757575;
    border-width: 1px;
}


/* dropdown>.container>.item {
    height: 30px;
    color: black;
    child-left: 10px;
    background-color: white;
    transition: background-color 0.1 0.0;
}

dropdown>.container>.item:hover {
    height: 30px;
    color: white;
    background-color: #ff5e1a;
    transition: background-color 0.1 0.0;
} */

switch {
    width: 40px;
    height: 20px;
    background-color: #646464;
    layout-type: row;
    child-space: 2px;
    transition: background-color 0.1 0.0;
    border-radius: 9.5px;
}

switch>.front {
    left: 1px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 9px;
    /* border-color: #757575;
    border-width: 1px; */
    transition: left 0.1 0.0;
}


switch:checked>.front {
    left: 21px;
    transition: left 0.1 0.0;
}

switch:checked {
    background-color: #ff5e1a;
    transition: background-color 0.1 0.0;
}

scroll_container {
    height: 1s;
    /* background-color: #262626; */
}

scroll_container>.container {
    width: 1s;
    left: 12px;
    right: 0px;
}

scroll_container>.scrollbar {
    background-color: #dfdfdf;
    border-color: #757575;
    border-width: 1px;
    /* background-color: #6a57be; */
    width: 10px;
    border-radius: 4.5px;
}

scroll_container:enabled>.scrollbar {
    width: 10px;
    transition: width 0.1 0.0;
}

scroll_container:enabled>.container {
    left: 10px;
    transition: left 0.1 0.0;
}

scroll_container:disabled>.scrollbar {
    width: 0px;
    transition: width 0.1 0.0;
}

scroll_container:disabled>.container {
    left: 0px;
    transition: left 0.1 0.0;
}

/*
textbox {
    flex-grow: 1.0;
    height: 30px;
    color: black;
    border-width: 1px;
    border-color: black;
    border-radius: 3;
    text-justify: center;
}



radio {
    border-color: black;
    border-width: 1px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
}

radio>.marker {
    background-color: #ff5e1a;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

radio>.marker {
    visibility: hidden;
    display: none;
}

radio:checked {
    border-color: #ff5e1a;
}

radio:checked>.marker {
    visibility: visible;
    display: flex;
}

check_button {
    background-color: #646464;
    height: 30px;
    color: white;
    border-width: 0px;
    border-radius: 0px;
    flex-grow: 1.0;
    text-justify: center;
    margin-right: 1px;
}

check_button:checked {
    background-color: #ff5e1a;
    color: white;
}

check_button.first {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

check_button.last {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-right: 0px;
}

tooltip {
    left: 105%;
    width: 100px;
    height: 20px;
    color: black;
    background-color: white;
    border-color: black;
    child-left: 5px;
    border-width: 1px;
    opacity: 0.0;
}

button:hover>tooltip {
    opacity: 1.0;
    transition: opacity 0.1 0.5;
}

progress_bar {
    height: 30px;
    border-width: 1px;
    border-radius: 3px;
    border-color: black;
}

progress_bar>.front {
    background-color: #ff5e1a;
    border-radius: 3px;
} */