:root {
    --wrn-abg: #cc3a3d;
    --wrn-ijo: #2AA146;
}

.bg-abg {
    background-color: var(--wrn-abg);
}

.bg-bir {
    background-color: var(--wrn-utm);
}

body {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(80, 80, 80);
    background-color: rgb(150, 150, 150);
}

.kpl-app {
    position: absolute;
    top: 0;
    width: 100%;
    display: block;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
    height: 56px;
    width: 170px;
    background-color: #202124;
    color: #bdc1c6;
}

.kpl-app a {
    font-size: 19px;
    line-height: 20px;
    display: inline-block;
    padding: 7.5px 0;
    border-bottom: 1px solid rgb(156, 163, 175);
}

.kon-app {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 170px;
    overflow-y: auto;
    background-color: rgb(250, 250, 250);
}

button,
.tmb {
    background-color: rgb(100, 100, 100);
    color: rgb(250, 250, 250);
    overflow: hidden;
}

button:not(:disabled):hover,
.tmb:not(:disabled):hover {
    color: var(--wrn-grs);
}

button:focus,
.tmb:focus {
    color: var(--wrn-grs);
}

@media only screen and (min-width: 1366px) {
    .wdh-mnu {
        position: absolute;
        bottom: 0;
        top: 56px;
        box-sizing: border-box;
        width: 170px;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background-color: rgb(200, 200, 200);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(140, 140, 140);
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(100, 100, 100);
    }
}

@media only screen and (min-width: 768px) and (max-width: 1365px) {
    .kpl-app {
        height: 50px;
        width: 100%;
    }

    .kpl-app a {
        height: 50px;
        line-height: 50px;
        padding: 0;
        border-bottom: none;
    }

    .kpl-app .mob {
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        line-height: 50px;
        font-size: 40px;
        padding: 0 5px;
    }

    .kon-app {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }
}

@media only screen and (min-width: 768px) and (max-height: 500px) {
    body {
        min-height: 500px;
    }
}

@media only screen and (max-width: 767px) {
    body {
        font-size: 3.4vw;
        overflow: hidden;
    }

    .kpl-app {
        height: 10vw;
        width: 100vw;
    }

    .kpl-app a {
        font-size: 5vw;
        height: 10vw;
        line-height: 10vw;
        padding: 0;
        border-bottom: none;
    }

    .kpl-app .mob {
        position: absolute;
        right: 0;
        line-height: 10vw;
        font-size: 8vw;
        padding: 0 1vw;
    }

    .kon-app {
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        top: 10vw;
        left: 0;
        right: 0;
        bottom: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }
}