/* *main */



    script {

        display: none !important;

    }



    :root {

        --red: rgba(255, 0, 0, 0.7);

        --redFull: rgba(255, 0, 0);

        --redBad: rgba(99, 62, 62, 0.7);

        --redDark: rgba(170, 0, 0, 0.7);

        --green: rgba(30, 255, 0, 0.7);

        --greenFull: rgba(30, 255, 0);

        --greenBad: rgba(77, 107, 73, 0.7);

        --yellow: rgba(255, 255, 0, 0.7);

        --black: rgba(0, 0, 0, 0.7);

        --white: rgb(247, 247, 247);

        --whitesmoke: rgb(226, 226, 226);

        --blue: rgb(0, 217, 255, 0.7);

        --blueDark: rgba(0, 191, 224, 0.9);

        --blueDarker: rgb(32, 156, 179);

        --html_back: rgb(234, 251, 255);

        --blacksmoke: rgb(37, 37, 37);

        --loaderpart: 0;

        --numofparts: 12;

    }



    *,

    *::before,

    *::after {

        border: 0;

        margin: 0;

        padding: 0;

        font-family: 'Helvetica Neue LT',sans-serif;

    }



    html {

        height: 100%;

        min-height: 100%;

        /*cursor: none;*/

        color: #000;

        background-color: rgb(186, 245, 238);

    }



    body {

        height: 100%;

        overflow: hidden;

    }



    body.manager {

        overflow: auto;

    }

    

    /*html::after {

        content: "";

        filter: blur(1.1rem);

        background: rgb(222, 223, 169) no-repeat center center fixed;

        background-size: contain;

        opacity: 0.2;

        top: 0;

        left: 0;

        bottom: 0;

        right: 0;

        position: absolute;

        z-index: -1;

    }*/



    body * {

        display: block;

        -webkit-user-select: none;

        -khtml-user-select: none;

        -moz-user-select: none;

        -o-user-select: none;

        -ms-user-select: none;

        user-select: none;

        -webkit-user-drag: none;

        -khtml-user-drag: none;

        -moz-user-drag: none;

        -o-user-drag: none;

        user-drag: none;

        -webkit-touch-callout: none;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

    }



    img {

        -webkit-user-drag: none;

        -khtml-user-drag: none;

        -moz-user-drag: none;

        -o-user-drag: none;

        user-drag: none;

        -webkit-touch-callout: none;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        /* pointer-events: none; */

    }



    table * {

        -webkit-user-select: text;

        -khtml-user-select: text;

        -moz-user-select: text;

        -o-user-select: text;

        -ms-user-select: text;

        user-select: text;

    }



    /*::-webkit-scrollbar {

        cursor: none;

        width: 10px;

    }



    ::-webkit-scrollbar-track {

        background: var(--white);

        border-radius: 15px;

    }

    

    ::-webkit-scrollbar-thumb {

        background: var(--black);

        border-radius: 15px;

        transition: 0.25s;

    }

    

    ::-webkit-scrollbar-thumb:hover {

        background: var(--blue);

        

    }*/



    cursor {

        display: none;

        z-index: 9999999999 !important;

        position: absolute;

        width: 30px;

        height: 30px;

        border-radius: 50%;

        top: var(--y, 0);

        left: var(--x, 0);

        transform: translate(-50%, -50%);

        z-index: 2;

        transition: transform .2s, height .2s ease-in, width .2s ease-in-out, -webkit-box-shadow .2s, box-shadow .2s;

        pointer-events: none;

        -webkit-box-shadow: inset 0px 0px 0px 4px var(--blueDark);

        box-shadow: inset 0px 0px 0px 4px var(--blueDark);

    }



    cursor::after {

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        position: absolute;

        content: '';

        height: 35px;

        width: 35px;

        border-radius: 50%;

        border: var(--blue) solid 2px;

        transition: .2s;

    }



    cursor.badhover_cursor {

        -webkit-box-shadow: inset 0px 0px 0px 4px var(--redDark);

        box-shadow: inset 0px 0px 0px 4px var(--redDark);

    }



    cursor.badhover_cursor::after {

        border: var(--red) solid 2px;

    }



    /*.hover {

        width: 50px;

        height: 50px;

        -webkit-box-shadow: inset 0px 0px 0px 4px var(--blueDark); 

        box-shadow: inset 0px 0px 0px 4px var(--blueDark);

    }*/



    a {

        width: min-content;

    }



    b {

        display: inline;

    }



    span {

        display: inline;

    }



    manager-room {

        right: 0;

        position: fixed;

        width: 10px;

        height: 10px;

        border-radius: 50%;

        background-color: burlywood;

        border: #000 dashed 1px;

    }



    manager-room img {

        width: 10px;

    }



    buffer-box {

        display: none;

    }



    input.disabled, select[disabled] {

        cursor: not-allowed;

    }



    install-btn {

        position: fixed;

        top: 0;

        left: 50%;

        transform: translate(-50%, 0);

    }



/* !main */



/* *control-box */



    control-box {

        position: fixed;

        bottom: 2vh;

        width: 100vw;

        height: 15vh;

    }



    control-box arrow-box {

        position: fixed;

        height: 10%;

        bottom: 0;

        width: 3vw;

        transform: translate(0, -50%);

        border-radius: 7px;

        transition: 0.25s background-color, 0.25s box-shadow, 0.25s -webkit-box-shadow;

    }



    control-box arrow-box:hover::after {

        background-color: var(--blacksmoke);

    }



    control-box arrow-box:hover::before {

        background-color: var(--blacksmoke);

    }



    control-box arrow-box::after {

        position: absolute;

        width: 10%;

        height: 30%;

        background-color: var(--whitesmoke);

        /*position: absolute;*/

        content: '';

        transition: 0.25s;

        border-radius: 5px;

        top: 23%;

    }



    control-box arrow-box::before {

        position: absolute;

        width: 10%;

        height: 30%;

        background-color: var(--whitesmoke);

        /*position: absolute;*/

        content: '';

        transition: 0.25s;

        border-radius: 5px;

        bottom: 23%;

    }



    control-box arrow-box#next {

        display: flex;

        align-items: center;

        justify-content: center;

        right: 1%;

        background-color: var(--green);

    }



    control-box arrow-box#next::after {

        -webkit-transform: rotate(-20deg);

        transform: rotate(-20deg);

    }



    control-box arrow-box#next::before {

        -webkit-transform: rotate(20deg);

        transform: rotate(20deg);

    }



    control-box arrow-box#back {

        display: flex;

        align-items: center;

        justify-content: center;

        left: 1%;

        background-color: var(--red);

    }



    control-box arrow-box#back::after {

        -webkit-transform: rotate(20deg);

        transform: rotate(20deg);

    }



    control-box arrow-box#back::before {

        -webkit-transform: rotate(-20deg);

        transform: rotate(-20deg);

    }



    select-box {

        position: absolute;

        height: 15vh;

        background-color: var(--whitesmoke);

        width: 90%;

        margin-left: 50%;

        transform: translate(-50%);

        border-radius: 15px;

        transition: 0.25s;

        /*display: -ms-inline-grid;

        display: inline-grid;

        grid-auto-flow: column;

        column-gap: 8px;

        align-items: center;*/

        /*display: inline-flex;

        align-items: center;

        flex-direction: row;*/

    }



    sub-select-box {

        height: 100%;

        width: 100%;

        display: flex;

        justify-content: center;

    }



    sub-sub-select-box {

        /* display: flex; */

        /* justify-content: center; */

        display: flex;

        flex-wrap: nowrap;

        overflow-x:auto;

        overflow-y: hidden;

        height: 100%;

        width: 100%;

        align-items: center;

    }



    select-box:hover {

        /*-webkit-box-shadow: 0px 0px 12px 5px var(--black);

        box-shadow: 0px 0px 12px 5px var(--black);

        background-color: transparent;*/

    }



    select-box:hover > sub-select-box sub-sub-select-box index-box img-box {

        /*background-color: var(--white);*/

    }



/* !control-box */



/* *index-box */



    index-box {

        position: relative;

        display: inline;

        float: left;

        height: 70%;

        /*height: 50%;*/

        width: 100%;

        min-width: 9%;

        border-radius: 10px;

        transition: 0.1s;

        margin-left: 20px;

        margin-right: 20px;

        margin: 1em;

        background-color: var(--white);

    }



    touch-box {

        text-align: center;

        vertical-align: middle;

        line-height: 20px;

        height: 20px;

        padding: 5px;

        position: absolute;

        left: 1%;

        top: 1%;

        z-index: 2;

        color: var(--black);

        background-color: rgba(226, 226, 226, 0.8);

        border-radius: 15px;

        border: 2px solid var(--black);

    }



    subindex-box {

        height: 100%;

        width: 100%;

    }



    sub-sub-select-box:has(index-box name-box) {

        align-items: baseline;

    }



    index-box:has(name-box) {

        height: 50%;

    }



    index-box:has(selected) {

        outline: var(--blueDark) solid 5px;

    }



    index-box selected {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%) rotate(45deg);

        aspect-ratio : 1 / 1;

        height:50%;

        /*padding-right: 50%;*/

        /*padding-left: 15%;*/

        background-color: var(--blueDark);

        border-radius: 50%;

    }



    index-box selected::after {

        content: '';

        position: absolute;

        display: inline-block;

        height: 40%;

        width: 15%;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        border-bottom: 6px solid var(--black);

        border-right: 6px solid var(--black);

        border-radius: 5px;

    }



    index-box:hover:not(:has(selected)) {

        outline: var(--blacksmoke) solid 5px;

    }



    /*index-box:hover > name-box {

        opacity: 1;

        bottom: 50px;

    }*/



    index-box name-box {

        position: relative;

        bottom: -15%;

        /*bottom: 150%;*/

        z-index: 5;

        /*bottom: 20px;

        transition: 0.25s ease-in-out;

        opacity: 0;*/

        left: 50%;

        width: 120%;

        transform: translate(-50%);

    }



    index-box name-box sub-name-box {

        font-weight: bold;

        text-align: center;

        font-size: 20px;

        /*text-transform: uppercase;*/

        color: black;

        border-radius: 5px;

        background-color: var(--white);

        padding: 5px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }



    index-box img-box {

        position:relative;

        height: 100%;

        width: 100%;

        display: inline-block;

        overflow: hidden;

        border-radius: 15px;

        transition: 0.25s;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    index-box img-box p {

        position: relative;

        font-size: 2vw;

        font-weight: bold;

        /*margin-top: 25%;

        transform: translate(0, -50%);*/

        text-align: center;

    }



    index-box img-box img {

        height: 100%;

        width: 100%;

        transition: 0.25s;

        object-fit: contain;

        margin-left: auto;

        margin-right: auto;

    }



/* !index-box */



/* *main-box */



    main-box {

        display: flex;

        height: 80vh;

        width: 100vw;

        align-items: center;

        justify-content: center;

    }



    main-box hover-product-box delete-box {

        display: none !important;

    }



    main-box hover-cable-box delete-box {

        display: none !important;

    }



    /*main-box product-box delete-box {

        display: none;

    }*/



    main-box socket-unit-box {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }



    main-box socket-unit-box slot-box {

        border: #000 solid 5px;

        aspect-ratio: 1 / 1;

        width: 7vw;

        margin: 6px;

        border-radius: 15px;

        background-color: rgba(0, 0, 0, 0.363);

        position: relative;

    }



    main-box socket-unit-box inslot-box {

        display: table-row;

    }



    main-box socket-unit-box slot-box[type="taken"] {

        border-color: var(--redFull);

    }



    main-box socket-unit-box slot-box > sub-box {

        display: table;

        table-layout: fixed;

        height: 100%;

        width: 100%;

    }



    main-box socket-unit-box slot-box helper {

        position: absolute;

        display: block;

        width: 100%;

        top: -35%;

        text-align: center;

        font-size: 1vw;

    }



    main-box socket-unit-box slot-box[type="taken"] helper::after {

        position: absolute;

        height: 150%;

        width: 30%;

        background-color: var(--redFull);

        content: "";

        left: 0; 

        right: 0; 

        margin-left: auto; 

        margin-right: auto;

        bottom: 150%;

        border-radius: 5px;

    }



    main-box socket-unit-box slot-box[type="taken"] helper::before {

        position: absolute;

        height: 170%;

        width: 16%;

        content: "";

        left: 0; 

        right: 0; 

        margin-left: auto; 

        margin-right: auto;

        bottom: 180%;

        border-radius: 15px;

        border: var(--redFull) solid 3px;

    }



    main-box socket-unit-box inslot-box sub-box {

        display: flex;

        align-items: center;

        justify-content: center;

        height: 100%;

        width: 100%;

        text-align: center;

        -webkit-border-radius: 15px;

        -moz-border-radius: 15px;

        border-radius: 15px;

        border: none;

        position: relative;

        transition: 0.25s;

    }



    main-box socket-unit-box inslot-box sub-box:hover {

        transform: scale(1.5);

        z-index: 1;

    }



    main-box socket-unit-box inslot-box sub-box:hover > delete-box {

        opacity: 1;

        z-index: 3;

    }



    main-box socket-unit-box inslot-box delete-box {

        position: absolute;

        height: 20px;

        width: 20px;

        border-radius: 50%;

        z-index: 0;

        top: 0;

        left: 0;

        opacity: 0;

        transition: 0.25s;

        border: #333 solid 2px;

        background-color: var(--red);

        display: flex;

        justify-content: center;

        align-content: center;

        align-items: center;

    }



    main-box socket-unit-box inslot-box delete-box:hover ~ img-box {

        opacity: 0.3;

    }



    main-box socket-unit-box inslot-box delete-box::before, main-box socket-unit-box inslot-box delete-box::after {

        position: absolute;

        content: ' ';

        height: 15px;

        width: 2px;

        background-color: #333;

        border-radius: 15px;

    }



    main-box socket-unit-box inslot-box delete-box::before {

        transform: rotate(45deg);

    }



    main-box socket-unit-box inslot-box delete-box::after {

        transform: rotate(-45deg);

    }



    main-box socket-unit-box inslot-box img-box {

        display: inline-block;

        overflow: hidden;

        transition: 0.25s;

        position: absolute;

        height: 100%;

        width: auto;

        border-radius: 15px;

    }

    

    main-box socket-unit-box inslot-box img-box img {

        /*object-fit: contain;

        vertical-align: middle;

        border-radius: 15px;

        display: inline-block;

        overflow: hidden;

        transition: 0.25s;

        position: absolute;

        height: 100%;

        width: auto;*/

        transition: 0.25s;

        height: 100%;

        width: 100%;

        object-fit: cover;

        vertical-align: middle;

        border-radius: 15px;

    }



    main-box socket-unit-box slot-box[type="keystone"] {

        border-color: var(--greenFull);

    }



    main-box socket-unit-box slot-box:not([outside="-1"]) {

        opacity: 0.5;

    }



    main-box socket-unit-box slot-box:not([outside]) {

        opacity: 1;

    }



    main-box socket-unit-box slot-box[outside="0"]:before {

        content: "";

        position: absolute;

        height: 100%;

        margin-left: -13px;

        width: 5px;

        border-left: #000 dashed 5px;

    }



    main-box socket-unit-box slot-box[type="keystone"] helper::after {

        position: absolute;

        height: 150%;

        width: 30%;

        background-color: var(--greenFull);

        content: "";

        left: 0; 

        right: 0; 

        margin-left: auto; 

        margin-right: auto;

        bottom: 150%;

        border-radius: 5px;

    }



    main-box socket-unit-box slot-box[type="keystone"] helper::before {

        position: absolute;

        height: 170%;

        width: 16%;

        content: "";

        left: 0; 

        right: 0; 

        margin-left: auto; 

        margin-right: auto;

        bottom: 180%;

        border-radius: 15px;

        border: var(--greenFull) solid 3px;

    }



    main-box [main_type="cable"] li {

        margin-left: 2vh;

        /* display: list-item; */

        padding: 0.5vh;

    }



    main-box [main_type="cable"] cable {

        display: flex;

        transition: 0.2s;

        background-color: var(--whitesmoke);

        z-index: 1;

        border-radius: 15px;

        padding: 5px;

        position: relative;

    }



    main-box [main_type="cable"] cable:hover {

        transform: scale(1.1);

        z-index: 2;

    }



    main-box [main_type="cable"] cable:hover > delete-box {

        left: -7%;

        opacity: 1;

    }



    /*main-box [main_type="cable"] cable delete-box:hover > in-delete-box {

        transform: rotate(225deg);

    }*/



    main-box [main_type="cable"] cable delete-box {

        top: 50%;

        transform: translate(0, -50%);

        left: 0;

        opacity: 0;

        margin-left: 5px;

        display: inline;

        width: 22px;

        height: 22px;

        position: absolute;

        z-index: 0;

        padding: auto;

        transition: 0.25s;

        float: left;

    }



    main-box [main_type="cable"] cable delete-box in-delete-box {

        z-index: 0;

        position: absolute;

        width: 22px;

        height: 22px;

        background-color: red;

        border-radius: 50%;

        left: 0;

        top: 0;

        transform: rotate(45deg);

        transition: 0.25s;

    }



    main-box [main_type="cable"] cable delete-box in-delete-box::before, main-box [main_type="cable"] cable delete-box in-delete-box::after {

        content:'';

        position: absolute;

        background-color: var(--black);

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        border-radius: 15px;

    }



    main-box [main_type="cable"] cable delete-box in-delete-box::before {

        z-index: 1;

        width: 3px;

        height: 13px;

    }



    main-box [main_type="cable"] cable delete-box in-delete-box::after {

        width: 13px;

        height: 3px;

    }



    /*main-box [main_type="cable"] cable delete-box:hover {

        z-index: 1;

        transform: scale(1.5);

    }*/



    main-box table-box table {

        display: table;

        font-size: 1vw;

    }



    main-box table-box table tr {

        display: table-row;

    }



    main-box table-box table tbody {

        display: table-row-group;

    }



    main-box table-box table thead {

        display: table-header-group;

    }



    main-box table-box table tr td {

        display: table-cell;

        border: #000 1px solid;

    }



    main-box table-box table tr th {

        display: table-cell;

        border: #000 1px solid;

    }



    main-box cable-box {

        border-radius: 15px;

        background-color: var(--white);

        padding: 10px;

    }



    main-box hover-cable-box {

        border-radius: 15px;

        background-color: var(--white);

        padding: 10px;

    }



    main-box text-box {

        border-radius: 6px;

        background-color: var(--white);

        padding: 10px;

    }



    main-box hover-text-box {

        border-radius: 15px;

        background-color: var(--white);

        padding: 10px;

    }



    .inTableIMG {

        height: 60px;

        cursor: pointer;

    }



    sub-table-box {

        overflow: auto;

        height: 60vh;

    }



    sub-table-box th {

        position: -webkit-sticky;

        position: sticky;

        top: 0;

        background-color: var(--whitesmoke);

        padding: 5px;

    }



    table-box td {

        text-align: center;

    }



    table-box td > * {

        margin: auto 0;

        width: 100%;

        object-fit:contain;

        /*width: 100%;

        align-items: center;*/

    }



    sub-button-table {

        font-size: 100%;

        font-weight: bold;

        text-transform: uppercase;

        width: 100%;

        margin: 0 auto;

        display: flex;

        justify-content: center;

    }



    button-table#reset {

        background: var(--red);

    }



    button-table#reset:hover {

        cursor: pointer;

        border-radius: 15px;

    }



    button-table#print {

        background: var(--blacksmoke);

    }



    button-table#print:hover {

        cursor: pointer;

        border-radius: 15px;

    }



    button-table {

        display: inline-block;

        width: min-content;

        margin: 0 auto;

        margin-top: 50px;

        padding: 5px;

        transition: 0.25s;

        border-radius: 5px;

        color: white;

        border: transparent solid 2px;

    }



    main-box hover-image-box {

        justify-content: center;

        display: flex;

    }



    main-box hover-image-box img {

        border-radius: 20px;

        height: auto;

        object-fit: unset;

        vertical-align: middle;

        max-width: 70%;

        max-height: 40vh;

        width: 100%;

    }



/* !main-box */



/* *info-box */



    info-box {

        border-radius: 10px;

        position: fixed;

        margin: 10px;

        width: 25%;

        background-color: var(--white);

        /*-webkit-box-shadow: 0px 0px 12px 5px var(--black);

        box-shadow: 0px 0px 12px 5px var(--black);*/

        display: none;

        padding: 5px;

    }



    info-box namer {

        font-weight: bold;

    }



    info-box namer, info-box datar {

        display: inline;

        word-wrap: break-word;

    }



    info-p {

        margin-top: 20px;

    }



    info-box info-line datar {

        padding-left: 1vw;

    }



    info-box info-name {

        font-size: larger;

        text-align: center;



    }



    info-box info-name namer {

        text-align: center;

    }



/* !info-box */



/* *warning-box */



    warning-box {

        width: 100%;

        height: auto;

        position: fixed;

        top: 0;

        display: none;

    }



    warning-box warning-text {

        text-align: center;

        background-color: var(--red);

        border-radius: 15px;

        padding: 5px;

        margin: 5px;

        font-size: large;

        box-sizing: border-box;

    }



/* !warning-box */



/* *panel-box */



    panel-box {

        position: fixed;

        height: 100%;

        width: 100%;

        z-index: 99999999;

        display: none;

    }



    loading-box {

        position: fixed;

        height: 100%;

        width: 100%;

        z-index: 99999999;

        display: none;

    }



    backpanel-box {

        background-color: rgba(0, 0, 0, 0.562);

        height: 100%;

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        flex-direction: column;

    }



    mainpanel-box {

        text-align: center;

        width: 40%;

        background-color: rgba(226, 226, 226, 0.664);

        -webkit-backdrop-filter: blur(8px);

        backdrop-filter: blur(8px);

        height: 60%;

        border-radius: 10px;

        display: flex;

        justify-content: center;

        align-items: center;

        padding: 50px;

    }



    mainpanel-box img {

        /*width: 90%;

        height: 90%;

        object-fit: contain;

        vertical-align: middle;

        border-radius: 15px;*/

        border-radius: 14px;

        max-width: 100%;

        max-height: 100%;

    }



    templatepanel-box {

        background-color: rgba(173, 173, 173, 0.5);

        -webkit-backdrop-filter: blur(8px);

        backdrop-filter: blur(8px);

        width: 45%;

        display: block;

        margin-top: 20px;

        display: flex;

        justify-content: center;

        border-radius: 50vh;

        padding: 1vh;

    }



    templatepanel-box button {

        display: inline-block;

        border-radius: 10px;

        width: 40%;

        margin: 0 auto;

        height: 50px;

        border: attr(tempcol) solid 2px;

        transition: 0.2s;

        font-size: 100%;

        font-weight: bold;

        text-transform: uppercase;

        border-radius: 30px;

    }



    templatepanel-box button#no {

        background-color: rgba(255, 255, 255, 0.747);

        color: red;

    }



    templatepanel-box button#yes {

        background-color: rgba(255, 255, 255, 0.747);

        color: green;

    }



    templatepanel-box button#cancel {

        background-color: rgba(255, 255, 255, 0.747);

        color: gray;

    }



    templatepanel-box button#no:hover {

        box-shadow: 25px 0 0px -4px rgba(255, 0, 0, 0.6), -25px 0 0px -4px rgba(255, 0, 0, 0.6);

        cursor: pointer;

    }



    templatepanel-box button#yes:hover {

        box-shadow: 25px 0 0px -4px rgba(0, 128, 0, 0.6), -25px 0 0px -4px rgba(0, 128, 0, 0.6);

        cursor: pointer;

    }



    templatepanel-box button#cancel:hover {

        box-shadow: 25px 0 0px -4px rgba(128, 128, 128, 0.6), -25px 0 0px -4px rgba(128, 128, 128, 0.6);

        cursor: pointer;

    }



/* !panel-box */



/* *login-box */



    login-box {

        text-align: center;

        width: 90%;

    }



    login-box loginHead {

        font-size: x-large;

        margin-bottom: 10%;

    }



    login-box > * {

        margin-top: 5%;



    }



    login-box .group {

        position:relative;

        margin-bottom:10%;

        margin-left: 0;

        margin-right: 0;

        width: 100%;

    }



    login-box .group input {

        font-size:18px;

        display: block;

        width:100%;

        border: none;

        border-bottom: 2px solid var(--black);

        background-color: transparent;

        padding: 10px 0px 10px 0px;

    }



    login-box .group input:focus {

        outline:none;

    }



    label {

        color:var(--gray);

        font-size:20px;

        font-weight:normal;

        position:absolute;

        pointer-events:none;

        left:5px;

        top:10px;

        -moz-transition:0.2s ease all;

        -webkit-transition:0.2s ease all;

        transition: 0.2s ease all;

    }

    

      /* active state */

    login-box .group input:focus ~ label, login-box .group input:valid ~ label {

        top:-20px;

        font-size:14px;

        font-weight:bold;

        color: var(--blueDarker);

    }



    /*login-box username-box > * {

        display: inline;

        font-size: large;

    }



    login-box password-box > * {

        display: inline;

        font-size: large;

    }*/



    login-box warning-login-text {

        /* margin-top: 10%; */

        color: var(--red);

        visibility: hidden;

        font-weight: bold;

    }



    login-box timeout-login-text {

        visibility: hidden;

    }



    login-box timeout-login-text > * {

        display: inline;

    }



/* !login-box */



/* *navbar */



    navbar {

        height: 50px;

        width: 100%;

        background-color: var(--white);

        /*display: table;*/

        list-style-type: none;

        margin: 0;

        padding: 0;

        overflow: hidden;

        background-color: #333;

        position: relative;

        display: none;

    }



    navbar > * {

        float: left;

        display: block;

        color: black;

        text-decoration: none;

        background-color: var(--whitesmoke);

        position: relative;

        border-radius: 15px;

        width: auto;

        height: 30px;

        top: 50%;

        transform: translate(0, -50%);

        right: 0;

        margin-left: 10px;

        margin-right: 10px;

        padding: 5px;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: .25s;

        font-weight: bold;

    }



    navbar logout-btn {

        float: right;

        right: 0;

        margin-right: 10px;

        cursor: pointer;

    }



    navbar > *:hover {

        -webkit-box-shadow: 0px 0px 12px 5px var(--blueDarker);

        box-shadow: 0px 0px 12px 5px var(--blueDarker);

    }



    navbar .return-btn {

        right: 0;

        float: right;

    }



    navbar excel-btn {

        float: left;

        right: 0;

        margin-right: 10px;

        cursor: pointer;

        background-color: rgb(29, 111, 66);

        margin: auto;

    }



    navbar excel-btn:hover {

        -webkit-box-shadow: 0px 0px 12px 5px rgb(2, 150, 66);

        box-shadow: 0px 0px 12px 5px rgb(2, 150, 66);

    }



    navbar select {

        max-width: 10%;

    }



/* !navbar */



/* *loading */



    loader {

        position: absolute;

        /*border: 5px solid var(--whitesmoke);

        border-top: 5px solid var(--blueDarker);*/

        width: 70px;

        height: 70px;

    }



    loader-part {

        left: 50%;

        transform-origin: 50% 35px;

        width: 5px;

        position: fixed;

        animation: loading 2s ease-in-out infinite;

    }



    loader-part::after {

        content: "";

        border-radius: 15px;

        position: absolute;

        background-color: rgb(0, 114, calc(114 - var(--loaderpart) / var(--numofparts) * 114));

        height: calc(var(--loaderpart) / var(--numofparts) * 17.5px);

        width: 100%;

    }



    @keyframes loading {

        0% {

            transform: rotate(0deg);

        }

        65% {

            transform: rotate(calc(var(--loaderpart) / var(--numofparts) * 360deg));

            background-color: rgb(0, 114, calc(var(--loaderpart) / var(--numofparts) * 114));

        }

        100% {

            transform: rotate(360deg);

        }

    }



    /*loader-part:nth-child(1) {

        animation-duration: 2s;

        animation-delay: 0s;

    }

    loader-part:nth-child(2) {

        animation-duration: 2s;

        animation-delay: 0.3s;

    }

    loader-part:nth-child(3) {

        animation-duration: 2s;

        animation-delay: 0.6s;

    }

    loader-part:nth-child(4) {

        animation-duration: 2s;

        animation-delay: 0.9s;

    }

    loader-part:nth-child(5) {

        animation-duration: 2s;

        animation-delay: 1.2s;

    }

    loader-part:nth-child(6) {

        animation-duration: 2s;

        animation-delay: 1.5s;

    }

    

    @keyframes spin {

        0% {

            transform: rotate(0deg);

        }

        100% {

            transform: rotate(360deg);

        }

    }*/



/* !loading */



/* *big-table-box */



    upTable-box {

        overflow: auto;

        height: calc(70% - 50px);

    }



    #big-table-box {

        display: none;

        min-width: 100%;

    }



    /*.big-table-box {



    }*/



    .big-table-box tbody {

        display: table-row-group;

    }



    .big-table-box thead {

        display: table-header-group;

    }



    .big-table-box tr {

        display: table-row;

        transition: 0.25s;

    }



    .big-table-box tr td {

        display: table-cell;

        border: #000 1px solid;

        white-space: nowrap;

        text-align: center;

        /*white-space: nowrap;

        text-align: center;

        position: relative;

        position: relative;*/

    }



    .big-table-box tr[hide="true"] {

        display: none;

    }



    .big-table-box tr th {

        z-index:1;

        display: table-cell;

        border: #000 1px solid;

        position: -webkit-sticky;

        position: sticky;

        top: 0;

        background-color: var(--whitesmoke);

        padding: 5px;

    }



    .big-table-box tr th > p {

        opacity: 1;

        transition: 0.25s;

    }



    .big-table-box tr th[filter='true']:hover > p {

        opacity: 0;

    }



    .big-table-box tr th[filter='true']:hover > filter-box {

        opacity: 1;

    }



    .big-table-box tr th filter-box {

        transition: 0.25s;

        position: absolute;

        opacity: 0;

        /*height: 100%;

        width: 100%;*/

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        font-weight: bolder;

    }



    .big-table-box select {

        /*width: 100%;

        height: 100%;

        

        /*left: 0;

        top: 0;*/

        /* position: absolute; */

    }



    .big-table-box img {

        max-width: 50px;

        max-height: 50px;

        margin: auto;

        cursor: pointer;

    }



    .big-table-box input {

        width: 100%;

        height: 100%;

        /*left: 0;

        top: 0;

        position: absolute;

        width: 100%;

        height: 100%;

        display: inline-block;*/

    }



    /*.big-table-box input[type='checkbox'] {

        margin-left: 50%;



        width: 20px;

        height: 20px;

        transform: scale(1) translate(-50%, 0);

    }*/



    .big-table-box select {

        margin: auto;

        /*width: max-content;*/

    }



    .big-table-box tbody tr RowActionBTN {

        border-radius: 5px;

        padding: 5px;

        transition: 0.1s ease-out;

        margin: 5px;

        cursor: pointer;

        /*width: 70px;*/

        max-width: min-content;

        display: block;

        margin-left: auto;

        margin-right: auto;

    }



    .big-table-box tbody tr td.RowAction {

        padding: 5px;

    }



    .big-table-box tbody tr RowActionBTN.delete {

        background-color: var(--red);

    }



    .big-table-box tbody tr RowActionBTN.change {

        background-color: var(--green);

    }



    .big-table-box tbody tr RowActionBTN.add {

        background-color: var(--green);

    }



    .big-table-box tbody tr RowActionBTN:hover {

        z-index: 1;

        transform: scale(1.2);

    }



    .S_U-uses tr td {

        background-color: transparent;

        padding: 0 2px;

        border: none !important;

        border-collapse: separate;

    }



/* !big-table-box */



/* *search-box */



    search-box {

        width: 90%;

        text-align: center;

    }



    search-box > * {

        position:relative;

        margin-bottom:10%;

        margin-left: 0;

        margin-right: 0;

        width: 100%;

    }



    search-box input {

        display: block;

        color: black;

        text-decoration: none;

        background-color: var(--white);

        position: relative;

        border-radius: 15px;

        width: auto;

        height: 30px;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        margin-left: 0;

        margin-right: 0;

        padding: 5px;

        display: flex;

        align-items: center;

        justify-content: center;

        transition: .25s;

        font-weight: bold;

    }



    search-box reset-btn {

        border-radius: 50px;

        width: 40%;

        margin: 0 auto;

        height: 50px;

        border: var(--red) solid 2px;

        transition: 0.1s;

        background-color: var(--white);

        display: flex;

        justify-content: center;

        align-items: center;

    }



    search-box reset-btn:hover {

        -webkit-box-shadow: 0px 0px 12px 5px rgba(255,0,0,0.61);

        box-shadow: 0px 0px 12px 5px rgba(255,0,0,0.61);

    }



/* !search-box */



/* *row-info-box */



    row-info-box {

        position: relative;

        height: 30%;

        margin-top: 0;

    }



    row-info-box navigation-box {

        width: 100%;

        height: 40px;

        position: absolute;

        top: 0;

    }



    row-info-box navigation-box > * {

        float: left;

        display: block;

        position: relative;

        top: 50%;

        transform: translate(0, -50%);

        margin-left: 10px;

        margin-right: 10px;

        padding: 5px;

        transition: .25s;

        font-weight: bold;

    }



    row-info-box navigation-box status-box > * {

        display: inline;

    }



    row-info-box navigation-box > row-info-submit-box {

        float: right;

        background: var(--white);

        border-radius: 5px;

        cursor: pointer;

    }



    row-info-box navigation-box > row-info-submit-box:hover {

        -webkit-box-shadow: 0px 0px 12px 5px var(--black);

        box-shadow: 0px 0px 12px 5px var(--black);

    }



    row-info-box data-changer-box {

        top: 40px;

        position: relative;

        width: 100%;

        height: calc(100% - 40px);

        overflow: auto;

        /*display: flex;

        justify-content: center;*/

    }



    .editing-box {

        /* width: -moz-fit-content; */

        /* width: fit-content; */

        /* margin: 0 auto; */

        /* overflow: auto; */

    }



    .editing-box input {

        position: relative;

        min-width: max-content;

    }



    .editing-box > tbody > tr > td {

        padding: 5px;

    }



    .editing-box td, .editing-box th {

        /*border-right: 1px solid black;

        border-top: none !important;

        border-bottom: none !important;

        border-left: 1px solid black;*/

    }



    /*.editing-box thead {

        -webkit-box-shadow: 0px 0px 12px 5px var(--black);

        box-shadow: 0px 0px 12px 5px var(--black);

    }*/



    .editing-box select-reset {

        margin: auto;

        border: #000 solid 1px;

        padding: 1vh;

        cursor: pointer;

        transition: 0.1s;

        margin-top: 5px;

    }



    .editing-box select-reset:hover {

        background-color: var(--red);

    }



/* !row-info-box*/