@charset "UTF-8";

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
}

    *:focus {
        outline: none;
    }

html,
body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: "Helvetica";
    font-weight: 400;
    font-style: normal;
    min-height: 100vh;
}

.wrapper-bg {
    width: 100%;
    max-width: 1170px;
    background-color: #eeeeee;
    margin: 0 auto;
    padding-left: 40px;
    padding-bottom: 18px;
}

.wrapper-bg-admin {
    width: 100%;
    height: auto;
    max-width: 1170px;
    background-color: #eeeeee;
    margin: 0 auto 50px auto;
    padding-left: 40px;
    padding-bottom: 18px;
}

.wrapper-bg-permission {
    width: 100%;
    max-width: 1170px;
    background-color: #eeeeee;
    margin: 0 auto;
    padding-left: 40px;
    padding-bottom: 18px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-100 {
    margin-bottom: 100px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}

/*
@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/Helvetica-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("./assets/fonts/Helvetica.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/
a {
    text-decoration: none !important;
    font-size: 16px;
}

header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
}

    header .container {
        display: flex;
        width: 100%;
        align-items: center;
        /*max-width:1170px;*/
    }

    header .home-logo {
        width: 220px;
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        header .home-logo img {
            width: 210px;
        }

    header nav {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
    }

.navbar {
    padding: 0
}

header nav ul {
    display: flex;
    margin-bottom: 0 !important;
    margin-left: auto;
}

    header nav ul li {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
    }

        header nav ul li a {
            color: #3E2661;
            text-decoration: none !important;
        }

            header nav ul li a:hover {
                /*color: #fff;*/
            }

        header nav ul li ul {
            /*text-align: left;
    display: none;
    color: #fff;
    background: #000;
    left: 0;
    position: absolute;
    top: 50px;
    width: 240px;
    z-index: 9999999;
    cursor: pointer;*/
        }

            header nav ul li ul a {
                /*cursor: pointer;*/
            }

    header nav ul .active {
        /*background: #000000;*/
        /*width: 147px;*/
        height: 50px;
        /*color: #fff;*/
        cursor: pointer;
    }

header nav .user-login {
    color: #fff;
    margin-left: auto;
    display: flex;
    align-items: center;
}

    header nav .user-login .login {
        display: flex;
        align-items: center;
        outline: none;
        color: #fff;
        background-color: transparent;
        cursor: pointer;
    }

        header nav .user-login .login b {
            font-size: 16px;
            margin-left: 10px;
            padding-right: 15px;
            border-right: 1px solid #595959;
            display: flex;
            align-items: center;
            line-height: 18px;
        }

        header nav .user-login .login svg {
            display: flex;
            align-self: center;
        }

    header nav .user-login .logout {
        font-size: 13px;
        margin-left: 14px;
        outline: none;
        color: #fff;
        background-color: transparent;
        line-height: 15px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

        header nav .user-login .logout svg {
            margin-left: 7px;
            display: flex;
            align-self: center;
        }

.hero .container {
    padding-top: 40px;
}

.hero h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
}

.hero h3 {
    font-weight: 400;
    font-size: 21px;
    line-height: 24px;
    margin-top: 2px;
    margin-bottom: 20px;
}

.hero .user-bio {
    display: flex;
}

    .hero .user-bio P {
        padding: 0px;
        margin: 0px;
    }

        .hero .user-bio P span {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
        }

            .hero .user-bio P span:not(:last-child) {
                border-right: 1px solid #c6c6c6;
                padding-right: 15px;
            }

            .hero .user-bio P span:not(:first-child) {
                padding-left: 15px;
            }

            .hero .user-bio P span b {
                font-size: 16px;
                line-height: 18px;
            }

.hero .user-shift {
    display: flex;
    flex-wrap: wrap;
    max-width: 1170px;
    margin: 40px auto 25px;
    padding: 0px;
}

    .hero .user-shift .box {
        width: 350px;
        height: 169px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 18px;
        background-color: #fff;
    }

    .hero .user-shift h4 {
        font-size: 17px;
        line-height: 20px;
        font-weight: 700;
        color: black;
    }

    .hero .user-shift span {
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        color: #22a272;
    }

    .hero .user-shift .shift-plus {
        position: relative;
        box-shadow: 0px 5px 0px #dee2e6;
        border-radius: 4px;
    }

        .hero .user-shift .shift-plus h4 {
            margin-top: 12px;
        }

        .hero .user-shift .shift-plus span {
            margin-top: 7px;
        }

    .hero .user-shift .shift-add {
        background: #3e2661;
        box-shadow: 0px 5px 0px #311d4e;
        border-radius: 4px;
        color: white;
    }

        .hero .user-shift .shift-add button {
            border: none;
            outline: none;
            cursor: pointer;
            padding: 0;
            background-color: transparent;
            margin-bottom: 12px;
        }

        .hero .user-shift .shift-add h4 {
            margin-bottom: 13px;
            color: white;
        }

    .hero .user-shift .shift-out {
        position:relative;
        background: #22a172;
        box-shadow: 0px 5px 0px #158d61;
        border-radius: 4px;
    }

        .hero .user-shift .shift-out.red {
            background: #D91313;
            box-shadow: 0px 5px 0px #BA1010;
        }
        test
        .hero .user-shift .shift-out span {
            color: white;
            font-weight: 400;
            font-size: 17px;
            line-height: 20px;
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .hero .user-shift .shift-out h4 {
            font-weight: 700;
            font-size: 24px;
            line-height: 28px;
            color: #ffffff;
        }

        .hero .user-shift .shift-out button {
            border: none;
            outline: none;
            padding: 0;
            cursor: pointer;
            background-color: transparent;
        }

.hero .info-shift {
    width: 259px;
    display: flex;
    justify-content: center;
}

    .hero .info-shift .info {
        position: absolute;
        right: 17px;
        top: 17px;
        cursor: pointer;
    }

.hero-admin .container {
    padding-top: 40px;
    padding-left: 0px;
}

.hero-admin h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
}

.hero-admin h3 {
    font-weight: 400;
    font-size: 21px;
    line-height: 24px;
    margin-top: 2px;
    margin-bottom: 20px;
}

.hero-admin .add-employee {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 45px;
    /*float: right;*/
    /*margin-right: 40px;*/
    font-weight: 700;
    font-size: 16.6712px;
    line-height: 19px;
    font-family: "Helvetica", sans-serif;
    background-color: #fff;
    cursor: pointer;
}

    .hero-admin .add-employee svg {
        margin-right: 11px;
    }

    .hero-admin .add-employee:hover {
        /*background-color: #4c4949;*/
        color: #22A172;
    }

.hero-admin .user-bio {
    display: flex;
}

    .hero-admin .user-bio P {
        padding: 0px;
        margin: 0px;
    }

        .hero-admin .user-bio P span {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
        }

            .hero-admin .user-bio P span:not(:last-child) {
                border-right: 1px solid #c6c6c6;
                padding-right: 15px;
            }

            .hero-admin .user-bio P span:not(:first-child) {
                padding-left: 15px;
            }

            .hero-admin .user-bio P span b {
                font-size: 16px;
                line-height: 18px;
            }

.hero-admin .my-team {
    position: relative;
    left: -40px;
    padding: 8px 26px 8px 40px;
    background-color: #fff;
    display: inline-block;
    border-radius: 0px 25px 25px 0px;
}

    .hero-admin .my-team span {
        font-weight: 700;
        font-size: 21px;
        line-height: 24px;
    }

.hero-permission .container {
    padding-top: 40px;
}

.hero-permission h1 {
    font-weight: 700;
    font-size: 30px;
    line-height: 34px;
}

.hero-permission h3 {
    font-weight: 400;
    font-size: 21px;
    line-height: 24px;
    margin-top: 2px;
    margin-bottom: 20px;
}

.hero-permission .user-bio {
    display: flex;
}

    .hero-permission .user-bio P {
        padding: 0px;
        margin: 0px;
    }

        .hero-permission .user-bio P span {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
        }

            .hero-permission .user-bio P span:not(:last-child) {
                border-right: 1px solid #c6c6c6;
                padding-right: 15px;
            }

            .hero-permission .user-bio P span:not(:first-child) {
                padding-left: 15px;
            }

            .hero-permission .user-bio P span b {
                font-size: 16px;
                line-height: 18px;
            }

.hero-permission .user-shift {
    display: flex;
    flex-wrap: wrap;
    max-width: 1170px;
    margin: 40px auto 25px;
}

    .hero-permission .user-shift .box {
        width: 259px;
        height: 169px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 18px;
        background-color: #fff;
    }

    .hero-permission .user-shift h4 {
        font-size: 17px;
        line-height: 20px;
        font-weight: 700;
        color: black;
    }

    .hero-permission .user-shift span {
        font-weight: 700;
        font-size: 24px;
        line-height: 28px;
        color: #22a272;
    }

    .hero-permission .user-shift .shift-plus {
        position: relative;
    }

        .hero-permission .user-shift .shift-plus h4 {
            margin-top: 12px;
        }

        .hero-permission .user-shift .shift-plus span {
            margin-top: 7px;
        }

    .hero-permission .user-shift .shift-add {
        background: #3e2661;
        box-shadow: 0px 5px 0px #311d4e;
        border-radius: 4px;
        color: white;
    }

        .hero-permission .user-shift .shift-add button {
            border: none;
            outline: none;
            cursor: pointer;
            padding: 0;
            background-color: transparent;
            margin-bottom: 12px;
        }

        .hero-permission .user-shift .shift-add h4 {
            margin-bottom: 13px;
            color: white;
        }

    .hero-permission .user-shift .shift-out {
        background: #22a172;
        box-shadow: 0px 5px 0px #158d61;
        border-radius: 4px;
    }

        .hero-permission .user-shift .shift-out span {
            color: white;
            font-weight: 400;
            font-size: 17px;
            line-height: 20px;
            margin-top: 12px;
            margin-bottom: 8px;
        }

        .hero-permission .user-shift .shift-out h4 {
            font-weight: 700;
            font-size: 24px;
            line-height: 28px;
            color: #ffffff;
        }

        .hero-permission .user-shift .shift-out button {
            border: none;
            outline: none;
            padding: 0;
            cursor: pointer;
            background-color: transparent;
        }

.hero-permission .info-shift {
    width: 259px;
    display: flex;
    justify-content: center;
}

    .hero-permission .info-shift .info {
        position: absolute;
        right: 17px;
        top: 17px;
        cursor: pointer;
    }

.user-shift .mesai-box h4 span {
    display: block;
    font-size: 13px;
    margin-top: -3px !important;
    color: #585858;
    font-weight: 400;
}

.user-shift .mesai-box h4 {
    text-align: center;
    margin-bottom: 0px;
}

.user-shift .resmi-mesai-box h4 span {
    display: block;
    font-size: 13px;
    margin-top: -3px !important;
    color: #FF7F00;
    font-weight: 400;
}

.user-shift .resmi-mesai-box h4 {
    text-align: center;
    margin-bottom: 0px;
}

.out-start-work {
    /*display: none;*/
    text-align: center;
}

#shift-start-time h5 {
    color: white;
    cursor: pointer;
}


    .out-start-work button {
        margin-top: 10px;
    }

    .out-start-work.active,
    .out-end-work.active {
        display: block;
    }

.out-end-work {
    /*display: none;*/
    text-align: center;
}

    .out-end-work span {
        display: block;
    }

.table-wrapper .table-sortable {
    max-width: 1090px;
    background-color: #fff;
}

.table-wrapper table {
    border-collapse: collapse;
    width: 100%;
    padding-left: 19px;
    box-sizing: border-box;
}

.table-wrapper .table-filter {
    display: flex;
    min-width: 1090px;
}

    .table-wrapper .table-filter .filter-system {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 15px;
        margin-right: 65px;
        background-color: #f8f8f8;
        margin-bottom: 25px;
        min-width: 903px;
        height: 53px;
    }

        .table-wrapper .table-filter .filter-system button {
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .table-wrapper .table-filter .filter-system .filtered {
            color: black;
            font-style: normal;
            font-weight: 700;
            font-size: 15px;
            line-height: 17px;
        }

            .table-wrapper .table-filter .filter-system .filtered span {
                margin-left: 4px;
            }

        .table-wrapper .table-filter .filter-system .form-control {
            font-weight: 400;
            font-size: 13.4px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            text-align: center;
        }

    .table-wrapper .table-filter span {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: black;
    }

    .table-wrapper .table-filter .mini-box {
        position: relative;
        top: 4px;
    }

    .table-wrapper .table-filter select {
        background-color: transparent;
    }

    .table-wrapper .table-filter .result {
        display: inline-flex;
        margin-bottom: 20px;
        margin-left: -50px;
    }

        .table-wrapper .table-filter .result button {
            background: #ffffff;
            box-shadow: 0px 3px 0px #e0e0e0;
            border-radius: 4px;
            width: 172px;
            height: 51px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .table-wrapper .table-filter .result button svg {
                margin-right: 8px;
            }

.table-wrapper .offdayuse {
    position: relative;
}

    .table-wrapper .offdayuse::before {
        position: absolute;
        content: "--:--:--";
        background-color: #0d743f;
        color: #fff;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0.3;
        display: block;
    }

    .table-wrapper .offdayuse::after {
        position: absolute;
        content: "--:--:--";
        background-color: #0d743f;
        color: #fff;
        top: 40%;
        left: 0;
        z-index: -1;
        display: block;
    }

.table-wrapper .table-sortable {
    padding-bottom: 13px;
}

    .table-wrapper .table-sortable th {
        background: #333333;
        color: #fff;
        padding: 10px 0px;
        text-align: left;
        cursor: pointer;
        padding-left: 19px;
    }

        .table-wrapper .table-sortable th:first-of-type {
            border-top-left-radius: 4px;
        }

        .table-wrapper .table-sortable th:last-of-type {
            border-top-right-radius: 4px;
        }

    .table-wrapper .table-sortable .sort-number {
        font-size: 12px;
        font-weight: 12px;
        line-height: 101.49%;
        display: flex;
        align-items: center;
    }

        .table-wrapper .table-sortable .sort-number select {
            background-color: rgba(255, 255, 255, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            padding: 4px 8px;
            max-width: 62px;
            height: 25px;
            font-weight: 700;
            font-size: 15px;
            line-height: 17px;
            margin-right: 8px;
            color: #fff;
            font-family: "Helvetica", sans-serif;
        }

            .table-wrapper .table-sortable .sort-number select option {
                color: black;
            }

    .table-wrapper .table-sortable tbody .off {
        background: rgba(34, 161, 114, 0.1);
        border-left: 5px #c1dbac;
    }

        .table-wrapper .table-sortable tbody .off td {
            height: 53px !important;
            position: relative;
        }

            .table-wrapper .table-sortable tbody .off td:first-child::before {
                content: "";
                position: absolute; /*or absolute*/
                z-index: 100000; /*a number that's more than the modal box*/
                left: 0px;
                top: 0px;
                width: 5px;
                height: 53px;
                background: rgba(34, 161, 114, 0.4);
            }

            .table-wrapper .table-sortable tbody .off td:not(:first-child) {
                opacity: 0.15;
            }

    .table-wrapper .table-sortable tbody .off1 {
        background-color: rgba(38, 125, 255, 0.1);
        position: relative;
    }

        .table-wrapper .table-sortable tbody .off1 td {
            height: 53px;
        }

            .table-wrapper .table-sortable tbody .off1 td:first-child::before {
                content: "";
                position: absolute;
                z-index: 99;
                left: 0px;
                top: 0px;
                width: 5px;
                height: 53px;
                background: #267DFF;
            }

    .table-wrapper .table-sortable tbody .free {
        background: rgba(249, 151, 5, 0.09);
        position: relative;
    }

        .table-wrapper .table-sortable tbody .free td {
            height: 53px;
        }

            .table-wrapper .table-sortable tbody .free td:first-child::before {
                content: "";
                position: absolute;
                z-index: 99;
                left: 0px;
                top: 0px;
                width: 5px;
                height: 53px;
                background: #F99705;
            }

    .table-wrapper .table-sortable tbody .custom {
        position: relative;
    }

        .table-wrapper .table-sortable tbody .custom td {
            height: 53px;
        }

            .table-wrapper .table-sortable tbody .custom td:first-child::before {
                content: "";
                position: absolute;
                z-index: 99;
                left: 0px;
                top: 0px;
                width: 5px;
                height: 53px;
                background: rgba(0, 0, 0, 0.2);
            }

    .table-wrapper .table-sortable tbody td {
        padding-left: 19px;
        padding-top: 11px;
        padding-bottom: 11px;
        font-weight: 400;
        font-size: 15px;
        line-height: 17px;
        padding-right: 10px;
    }

        .table-wrapper .table-sortable tbody td input[type=checkbox] {
            position: relative;
            cursor: pointer;
            margin-right: 9px;
        }

            .table-wrapper .table-sortable tbody td input[type=checkbox]::before {
                content: "";
                display: block;
                position: absolute;
                width: 16px;
                height: 16px;
                top: 0;
                left: 0;
                border: 2px solid #dfdfdf;
                border-radius: 3px;
                padding: 4px;
                background-color: white;
            }

            .table-wrapper .table-sortable tbody td input[type=checkbox]:checked::after {
                content: "";
                display: block;
                width: 5px;
                height: 10px;
                border: solid #9c9c9c;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
                position: absolute;
                top: 2px;
                left: 6px;
            }

        .table-wrapper .table-sortable tbody td img {
            margin-right: 11px;
        }

    .table-wrapper .table-sortable tbody .year-off {
        color: #fff;
    }

        .table-wrapper .table-sortable tbody .year-off td {
            position: relative;
        }

            .table-wrapper .table-sortable tbody .year-off td:first-of-type {
                position: relative;
            }

                .table-wrapper .table-sortable tbody .year-off td:first-of-type::after {
                    display: block;
                    content: "";
                    position: absolute;
                    left: 100px;
                    top: 0px;
                    width: 100px;
                    height: 40px;
                    border-right: 1px dashed #fff;
                }

    .table-wrapper .table-sortable tbody .th-sort-asc::after {
        content: "▴";
    }

    .table-wrapper .table-sortable tbody .th-sort-desc::after {
        content: "▾";
    }

.table-wrapper td {
    height: 53px !important;
}

.table-wrapper .annual-leave-used {
    position: relative;
    background-color: #22a172;
    opacity: 0.85;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

    .table-wrapper .annual-leave-used td:not(:first-child) {
        opacity: 0.15;
    }

    .table-wrapper .annual-leave-used .leave-days {
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        width: 91%;
    }

        .table-wrapper .annual-leave-used .leave-days td {
            font-weight: 700;
            opacity: 1;
        }

        .table-wrapper .annual-leave-used .leave-days .lday {
            position: relative;
            right: 4%;
        }

.table-wrapper .add-permission {
    background: #f8f8f8;
    width: 100%;
}

    .table-wrapper .add-permission .add {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 147px;
    }

        .table-wrapper .add-permission .add span {
            font-style: normal;
            font-weight: 700;
            font-size: 13px;
            line-height: 15px;
            text-align: center;
            color: #000000;
            opacity: 0.4;
        }

    .table-wrapper .add-permission button {
        background: #ffffff;
        box-shadow: 0px 2px 0px #ececec;
        border-radius: 4px;
        padding: 7px 12.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 12px;
        line-height: 14px;
        cursor: pointer;
    }

        .table-wrapper .add-permission button svg {
            margin-right: 7px;
        }

.table-wrapper-admin {
    width: 1090px;
    margin-top: 28px;
}

    .table-wrapper-admin .form-control {
        width: unset;
    }

    .table-wrapper-admin table {
        border-collapse: collapse;
        margin-right: 40px;
    }

        .table-wrapper-admin table thead {
            height: 38px;
            color: #fff;
            text-align: left;
        }

        .table-wrapper-admin table th {
            background: #333333;
            padding-left: 19px;
        }

            .table-wrapper-admin table th:first-of-type {
                border-top-left-radius: 4px;
            }

            .table-wrapper-admin table th:last-of-type {
                border-top-right-radius: 4px;
            }

        .table-wrapper-admin table .record-show {
            height: 38px;
            display: flex;
            align-items: center;
        }

            .table-wrapper-admin table .record-show select {
                margin-right: 8px;
                padding: 4px 8px;
                background-color: rgba(255, 255, 255, 0.3);
                color: #fff;
                border-radius: 4px;
            }

                .table-wrapper-admin table .record-show select option {
                    background-color: #333333;
                    color: #fff;
                }

        .table-wrapper-admin table tbody {
            padding-left: 19px;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }

            .table-wrapper-admin table tbody tr {
                height: 38px;
                background-color: rgba(255, 255, 255, 0.7);
            }

                .table-wrapper-admin table tbody tr:not(:last-child) {
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                }

                .table-wrapper-admin table tbody tr:last-of-type {
                    border-bottom: none;
                    border-bottom-left-radius: 14px;
                    border-bottom-right-radius: 14px;
                }

                .table-wrapper-admin table tbody tr td {
                    font-weight: 400;
                    font-size: 15px;
                    padding-left: 19px;
                    line-height: 17px;
                }

                    .table-wrapper-admin table tbody tr td:last-child {
                        text-align: right;
                        cursor: pointer;
                    }

                        .table-wrapper-admin table tbody tr td:last-child .dropdown-container {
                            position: relative;
                        }

                            .table-wrapper-admin table tbody tr td:last-child .dropdown-container button {
                                border: none;
                                outline: none;
                                background-color: transparent;
                                font-family: "Helvetica";
                                font-weight: 400;
                                font-size: 13px;
                                line-height: 15px;
                                color: rgba(0, 0, 0, 0.3);
                                cursor: pointer;
                            }

                                .table-wrapper-admin table tbody tr td:last-child .dropdown-container button:focus-within + nav {
                                    opacity: 1;
                                    visibility: visible;
                                    background-color: #fff;
                                    z-index: 2;
                                    transform: translateY(5px);
                                }

                                .table-wrapper-admin table tbody tr td:last-child .dropdown-container button:focus-within span {
                                    background-color: #fff !important;
                                    width: 20px;
                                    padding: 10px;
                                    z-index: 2;
                                    pointer-events: all;
                                }

                            .table-wrapper-admin table tbody tr td:last-child .dropdown-container svg {
                                margin-left: 8px;
                                margin-right: 12px;
                            }

                            .table-wrapper-admin table tbody tr td:last-child .dropdown-container nav {
                                position: absolute;
                                top: 100%;
                                left: 41.5%;
                                background-color: #fff;
                                width: 108px;
                                box-shadow: 2px 4px 17px rgba(0, 0, 0, 0.12);
                                opacity: 0;
                                visibility: hidden;
                                transition: 200ms all;
                            }

                                .table-wrapper-admin table tbody tr td:last-child .dropdown-container nav ul {
                                    list-style: none;
                                }

                                    .table-wrapper-admin table tbody tr td:last-child .dropdown-container nav ul li {
                                        overflow: hidden;
                                        display: flex;
                                        justify-content: center;
                                    }

                                        .table-wrapper-admin table tbody tr td:last-child .dropdown-container nav ul li a {
                                            display: block;
                                            padding: 10px 20px;
                                            font-weight: 700;
                                            font-size: 13px;
                                            line-height: 15px;
                                            border-bottom: 1px solid #c6c6c6;
                                            text-decoration: none;
                                            color: #000000;
                                            display: inline-flex;
                                            justify-content: center;
                                            pointer-events: all;
                                        }

                                        .table-wrapper-admin table tbody tr td:last-child .dropdown-container nav ul li:last-child a {
                                            border-bottom: unset;
                                            border-bottom: unset;
                                        }

            .table-wrapper-admin table tbody .spacer {
                padding-left: 19px;
            }

.table-wrapper-permission .table-sortable {
    max-width: 1090px;
    background-color: #fff;
}

.table-wrapper-permission table {
    border-collapse: collapse;
    width: 100%;
    padding-left: 19px;
    box-sizing: border-box;
}

.table-wrapper-permission .table-filter {
    display: flex;
    min-width: 1090px;
}

    .table-wrapper-permission .table-filter .filter-system {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 15px;
        margin-right: 65px;
        background-color: #f8f8f8;
        margin-bottom: 25px;
        min-width: 903px;
        height: 53px;
    }

        .table-wrapper-permission .table-filter .filter-system button {
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .table-wrapper-permission .table-filter .filter-system .filtered {
            color: black;
            font-style: normal;
            font-weight: 700;
            font-size: 15px;
            line-height: 17px;
        }

            .table-wrapper-permission .table-filter .filter-system .filtered span {
                margin-left: 4px;
            }

        .table-wrapper-permission .table-filter .filter-system .form-control {
            font-weight: 400;
            font-size: 13px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            text-align: center;
        }

    .table-wrapper-permission .table-filter span {
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: black;
    }

    .table-wrapper-permission .table-filter .mini-box {
        position: relative;
        top: 4px;
    }

    .table-wrapper-permission .table-filter select {
        background-color: transparent;
    }

    .table-wrapper-permission .table-filter .result {
        display: inline-flex;
        margin-bottom: 20px;
        margin-left: -50px;
    }

        .table-wrapper-permission .table-filter .result button {
            background: #ffffff;
            box-shadow: 0px 3px 0px #e0e0e0;
            border-radius: 4px;
            width: 172px;
            height: 51px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .table-wrapper-permission .table-filter .result button svg {
                margin-right: 8px;
            }

.table-wrapper-permission .table-sortable {
    padding-bottom: 13px;
}

    .table-wrapper-permission .table-sortable th {
        background: #333333;
        color: #fff;
        padding: 10px 0px;
        text-align: left;
        cursor: pointer;
        padding-left: 19px;
    }

        .table-wrapper-permission .table-sortable th:first-of-type {
            border-top-left-radius: 4px;
        }

        .table-wrapper-permission .table-sortable th:last-of-type {
            border-top-right-radius: 4px;
        }

    .table-wrapper-permission .table-sortable .sort-number {
        font-size: 12px;
        font-weight: 12px;
        line-height: 101.49%;
        display: flex;
        align-items: center;
    }

        .table-wrapper-permission .table-sortable .sort-number select {
            background-color: rgba(255, 255, 255, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            padding: 4px 8px;
            max-width: 62px;
            height: 25px;
            font-weight: 700;
            font-size: 15px;
            line-height: 17px;
            margin-right: 8px;
            color: #fff;
            font-family: "Helvetica", sans-serif;
        }

            .table-wrapper-permission .table-sortable .sort-number select option {
                color: black;
            }

    .table-wrapper-permission .table-sortable tbody .off {
        background: rgba(34, 161, 114, 0.1);
        border-left: 5px #c1dbac;
    }

        .table-wrapper-permission .table-sortable tbody .off td:not(:first-child) {
            opacity: 0.15;
        }

    .table-wrapper-permission .table-sortable tbody .off1 {
        background-color: rgba(38, 125, 255, 0.1);
    }

    .table-wrapper-permission .table-sortable tbody .free {
        background: rgba(249, 151, 5, 0.09);
    }

    .table-wrapper-permission .table-sortable tbody td {
        padding-left: 19px;
        padding-top: 11px;
        padding-bottom: 11px;
        font-weight: 400;
        font-size: 15px;
        line-height: 17px;
        padding-right: 10px;
    }

        .table-wrapper-permission .table-sortable tbody td input[type=checkbox] {
            position: relative;
            cursor: pointer;
            margin-right: 9px;
        }

            .table-wrapper-permission .table-sortable tbody td input[type=checkbox]::before {
                content: "";
                display: block;
                position: absolute;
                width: 16px;
                height: 16px;
                top: 0;
                left: 0;
                border: 2px solid #dfdfdf;
                border-radius: 3px;
                padding: 4px;
                background-color: white;
            }

            .table-wrapper-permission .table-sortable tbody td input[type=checkbox]:checked::after {
                content: "";
                display: block;
                width: 5px;
                height: 10px;
                border: solid #9c9c9c;
                border-width: 0 2px 2px 0;
                transform: rotate(45deg);
                position: absolute;
                top: 2px;
                left: 6px;
            }

        .table-wrapper-permission .table-sortable tbody td img {
            margin-right: 11px;
        }

    .table-wrapper-permission .table-sortable tbody .year-off {
        color: #fff;
    }

        .table-wrapper-permission .table-sortable tbody .year-off td {
            position: relative;
        }

            .table-wrapper-permission .table-sortable tbody .year-off td:first-of-type {
                position: relative;
            }

                .table-wrapper-permission .table-sortable tbody .year-off td:first-of-type::after {
                    display: block;
                    content: "";
                    position: absolute;
                    left: 100px;
                    top: 0px;
                    width: 100px;
                    height: 40px;
                    border-right: 1px dashed #fff;
                }

    .table-wrapper-permission .table-sortable tbody .th-sort-asc::after {
        content: "▴";
    }

    .table-wrapper-permission .table-sortable tbody .th-sort-desc::after {
        content: "▾";
    }

.table-wrapper-permission .annual-leave-used {
    position: relative;
    background-color: #22a172;
    opacity: 0.85;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

    .table-wrapper-permission .annual-leave-used td:not(:first-child) {
        opacity: 0.15;
    }

    .table-wrapper-permission .annual-leave-used .leave-days {
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        color: #fff;
        display: flex;
        justify-content: space-between;
        font-weight: 700;
        width: 91%;
    }

        .table-wrapper-permission .annual-leave-used .leave-days td {
            font-weight: 700;
            opacity: 1;
        }

        .table-wrapper-permission .annual-leave-used .leave-days .lday {
            position: relative;
            right: 4%;
        }

.table-wrapper-permission .add-permission {
    background: #f8f8f8;
    width: 100%;
}

    .table-wrapper-permission .add-permission .add {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 147px;
    }

        .table-wrapper-permission .add-permission .add span {
            font-style: normal;
            font-weight: 700;
            font-size: 13px;
            line-height: 15px;
            text-align: center;
            color: #000000;
            opacity: 0.4;
        }

    .table-wrapper-permission .add-permission button {
        background: #ffffff;
        box-shadow: 0px 2px 0px #ececec;
        border-radius: 4px;
        padding: 7px 12.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 12px;
        line-height: 14px;
        cursor: pointer;
    }

body .desktop-only {
    display: block;
}

@media (max-width: 768px) {
    body .desktop-only {
        display: none;
    }
}
.table-wrapper-permission .add-permission button svg {
    margin-right: 7px;
}

.permissions {
    position: relative;
    display: flex;
}

.result-showers {
    display: flex;
    margin-left: auto;
    margin-right: 140px;
    margin-top: 15px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

    .result-showers span {
        font-family: "Helvetica";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 101.49%;
    }

        .result-showers span select {
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
            line-height: 17px;
            background-color: black;
            text-align: center;
            border-radius: 4px;
            width: 49px;
            height: 25px;
            margin: 0 9px;
            font-family: inherit;
        }

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    transition: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    visibility: hidden;
    z-index: -10;
}

.open-modal {
    visibility: visible;
    z-index: 10;
}

.popup-main {
    display: grid;
    position: relative;
    align-self: center;
    justify-self: center;
    background: #ececec;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05);
    border-radius: 2.72072px;
    justify-content: center;
    width: 485px;
    height: 195px;
    padding: 20px 20px 30px;
}

    .popup-main .popup-header {
        display: flex;
        width: 100%;
    }

        .popup-main .popup-header h2 {
            display: flex;
            justify-content: left;
            font-weight: 700;
            font-size: 17px;
            line-height: 20px;
            font-family: "Helvetica", sans-serif;
        }

        .popup-main .popup-header #close-btn {
            display: inline-flex;
            margin-left: auto;
            background-color: transparent;
            font-size: 15px;
            cursor: pointer;
        }

            .popup-main .popup-header #close-btn:hover svg path {
                fill: #ec55dd !important;
                opacity: 1;
            }

    .popup-main .popup-content {
        display: flex;
    }

        .popup-main .popup-content .add-status {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            justify-content: space-between;
            width: 135px;
            background: #f89705;
            box-shadow: 0px 3px 0px #de8500;
            border-radius: 4px;
            padding: 15px;
            height: 120px;
            margin-top: 15px;
            transition: all 0.1s;
        }

            .popup-main .popup-content .add-status:not(:first-child) {
                margin-left: 20px;
            }

            .popup-main .popup-content .add-status:active {
                margin-top: 0.1rem;
                border-bottom-width: 0px;
            }

            .popup-main .popup-content .add-status .add-status-image {
                display: flex;
                justify-content: space-between;
            }

            .popup-main .popup-content .add-status h3 {
                font-family: sans-serif;
                font-weight: 700;
                font-size: 15px;
                line-height: 17px;
                color: #fff;
            }

    .popup-main .add-day-main {
        display: none;
        background-color: #eee;
        width: 498px;
        height: auto;
        z-index: 3;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 4px;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        padding: 20px;
    }

        .popup-main .add-day-main .add-day-header {
            display: flex;
            justify-content: space-between;
            width: auto;
            align-items: center;
            margin-bottom: 16px;
        }

            .popup-main .add-day-main .add-day-header h2 {
                display: flex;
                padding: 5px;
                font-weight: 700;
                font-size: 17px;
            }

            .popup-main .add-day-main .add-day-header #close-system-btn {
                display: flex;
                justify-content: right;
                border: none;
                outline: none;
                background-color: transparent;
                cursor: pointer;
            }

                .popup-main .add-day-main .add-day-header #close-system-btn:hover svg path {
                    fill: #ec55dd !important;
                    opacity: 1;
                }

        .popup-main .add-day-main .day-select {
            display: flex;
            justify-content: center;
            text-align: center;
        }

            .popup-main .add-day-main .day-select #add-day-select {
                width: 302px;
                height: 45px;
                display: flex;
                background: #ffffff;
                border-radius: 4px;
                border: hidden;
                padding: 14px;
                font-size: 14px;
                cursor: pointer;
            }

    .popup-main .open-system-modal {
        display: block !important;
    }

.info-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    transition: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    visibility: hidden;
    z-index: -10;
}

.open-detay-popup {
    visibility: visible;
    z-index: 10;
}

.detaypopup-main {
    border-radius: 4px;
    /*width: 342px;
    background: #eeeeee;
    box-shadow: 0px 3px 3px #b3b2b2;*/
}

    .detaypopup-main .detaypopup-content {
        display: flex;
        /*padding: 20px;*/
        flex-direction: column;
    }

        .detaypopup-main .detaypopup-content .detaypopup-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }

            .detaypopup-main .detaypopup-content .detaypopup-title h2 {
                font-weight: 700;
                font-size: 17px;
                line-height: 20px;
            }

            .detaypopup-main .detaypopup-content .detaypopup-title .close-btn {
                justify-content: right;
                background-color: transparent;
                border: hidden;
                height: -webkit-fit-content;
                height: -moz-fit-content;
                height: fit-content;
                position: absolute;
                right: 0;
                cursor: pointer;
            }

        .detaypopup-main .detaypopup-content .detaypopup-tablecontent {
            display: flex;
            width: auto;
            height: auto;
            /*max-width: 302px;*/
            min-height: 270px;
            background: #ffffff;
            border-radius: 4px;
            /*box-shadow: 0px 2px 3px #c1c1c1;*/
            flex-direction: column;
        }

            .detaypopup-main .detaypopup-content .detaypopup-tablecontent ul {
                padding: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin: 0;
            }

                .detaypopup-main .detaypopup-content .detaypopup-tablecontent ul li {
                    display: inline-flex;
                    justify-content: space-between;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 16px;
                    border-bottom: 1px solid #e4e3e3;
                    list-style: none;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 16px;
                }

                    .detaypopup-main .detaypopup-content .detaypopup-tablecontent ul li:last-child {
                        border: none;
                    }

                    .detaypopup-main .detaypopup-content .detaypopup-tablecontent ul li .time-value {
                        font-weight: 700;
                        margin-left: 20px;
                    }

                    .detaypopup-main .detaypopup-content .detaypopup-tablecontent ul li span {
                        margin: 15px 5px;
                    }

    .detaypopup-main.active {
        display: block !important;
    }

.permissions {
    position: relative;
    display: flex;
}

.checked {
    cursor: pointer;
    position: relative;
    display: inline-block;
    left: -23px;
}

    .checked input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16.7px;
    width: 16.71px;
    /*background-color: #f89705;*/
    border-radius: 4px;
    border: 1px solid #bbb;
}
    /*
.checked:hover input ~ .checkmark {
    background-color: #f89705;
}

.checked input:checked ~ .checkmark {
    background-color: #f89705;
}*/

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

.checked input:checked ~ .checkmark:after {
    display: block;
}

.checked .checkmark:after {
    left: 5px;
    width: 4.8px;
    height: 11.6px;
    top: 0px;
    border: solid #343a40;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.popup_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 500px;
    background: #f2f2f2;
    text-align: center;
    align-items: center;
    padding: 40px;
    border: 1px solid #b3b3b3;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}

    .popup_box i {
        font-size: 60px;
        color: #eb9447;
        border: 5px solid #eb9447;
        padding: 20px 40px;
        border-radius: 50%;
        margin: -10px 0 20px 0;
    }

    .popup_box h1 {
        font-size: 30px;
        color: #1b2631;
        margin-bottom: 5px;
    }

    .popup_box label {
        font-size: 23px;
        color: #404040;
    }

    .popup_box .btns {
        margin: 40px 0 0 0;
    }

        .popup_box .btns .confirm-btn,
        .popup_box .btns .reject-btn {
            background: #999999;
            color: white;
            font-size: 18px;
            padding: 10px 13px;
            border: 1px solid #808080;
        }

        .popup_box .btns .reject-btn {
            background: #ff3333;
            margin-left: 20px;
            border: 1px solid #cc0000;
        }

            .popup_box .btns .reject-btn:hover {
                transition: 0.5s;
                background: #e60000;
            }

        .popup_box .btns .confirm-btn {
            background-color: #10c366;
        }

            .popup_box .btns .confirm-btn:hover {
                transition: 0.5s;
                background: #0d743f;
            }

.click {
    background: #2981bc;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-align: center;
    padding: 10px 15px;
    border: 1px solid #0059b3;
}


.dropdown-container {
    position: relative;
    display: flex;
    float: right;
    align-items: center;
}
@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }

        .navbar-collapse.collapsing {
            height: auto;
            -webkit-transition: left 0.3s ease;
            -o-transition: left 0.3s ease;
            -moz-transition: left 0.3s ease;
            transition: left 0.3s ease;
            left: -100%;
        }

        .navbar-collapse.show {
            left: 0;
            -webkit-transition: left 0.3s ease-in;
            -o-transition: left 0.3s ease-in;
            -moz-transition: left 0.3s ease-in;
            transition: left 0.3s ease-in;
        }
}
    .dropdown-container button {
        border: none;
        outline: none;
        background-color: transparent;
        font-family: "Helvetica";
        font-weight: 400;
        font-size: 13px;
        line-height: 15px;
        color: rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

        .dropdown-container button:focus-within + nav {
            opacity: 1;
            visibility: visible;
            background-color: #fff;
            z-index: 2;
            transform: translateY(5px);
        }

        .dropdown-container button:focus-within span {
            background-color: #fff !important;
            width: 20px;
            padding: 10px;
            z-index: 2;
            pointer-events: all;
        }

    .dropdown-container svg {
        margin-left: 8px;
        margin-right: 12px;
    }

    .dropdown-container nav {
        position: absolute;
        top: 100%;
        left: -50%;
        background-color: #fff;
        width: 108px;
        box-shadow: 2px 4px 17px rgba(0, 0, 0, 0.12);
        opacity: 0;
        visibility: hidden;
        transition: 200ms all;
    }

        .dropdown-container nav ul {
            list-style: none;
        }

            .dropdown-container nav ul li {
                overflow: hidden;
                display: flex;
                justify-content: center;
            }

                .dropdown-container nav ul li a {
                    display: block;
                    padding: 10px 20px;
                    font-weight: 700;
                    font-size: 13px;
                    line-height: 15px;
                    border-bottom: 1px solid #c6c6c6;
                    text-decoration: none;
                    color: #000000;
                    display: inline-flex;
                    justify-content: center;
                    pointer-events: all;
                }

                .dropdown-container nav ul li:last-child a {
                    border-bottom: unset;
                    border-bottom: unset;
                }

.per-desc {
    height: 200px !important;
}

.swal2-checkbox,
.swal2-file,
.swal2-input,
.swal2-radio,
.swal2-select,
.swal2-textarea {
    margin: 0.5em 0em 0.5em !important;
}

.edit-user-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

    .edit-user-popup-overlay form {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-attachment: fixed;
        background-color: #fff;
        padding: 40px;
        border-radius: 4px;
        position: relative;
    }

    .edit-user-popup-overlay .form-group {max-width: 150px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 300px;
    }

        .edit-user-popup-overlay .form-group label {
            margin-left: 30px;
        }

        .edit-user-popup-overlay .form-group .form-control {
            width: 200px;
        }

    .edit-user-popup-overlay .edit-user-popup-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .edit-user-popup-overlay .edit-user-popup-close-btn svg {
            width: 15px;
            height: 15px;
            fill: #000000;
        }

        .edit-user-popup-overlay .edit-user-popup-close-btn:hover {
            background-color: #f89705;
        }

        .edit-user-popup-overlay .edit-user-popup-close-btn:active {
            background-color: #f89705;
        }

        .edit-user-popup-overlay .edit-user-popup-close-btn:focus {
            outline: none;
        }

.open-edit-user-popup {
    display: flex !important;
}

.modal-body #datarangeAll {
    justify-content: center;
}

.modal-body .form-horizontal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    .modal-body .form-horizontal .form-group {
        position: relative !important;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

        .modal-body .form-horizontal .form-group .col-md-2 {
            position: absolute !important;
            top: 5px !important;
            left: 57px !important;
            z-index: 3 !important;
            font-size: 12px !important;
        }

            .modal-body .form-horizontal .form-group .col-md-2.bgww {
                max-width: 73%;
                background-color: #fff;
                top: 1px !important;
                border-radius: 5px;
                padding-top: 5px;
            }

            .modal-body .form-horizontal .form-group .col-md-2.bgww1000 {
                left: 97px !important;
            }

        .modal-body .form-horizontal .form-group .col-md-10 {
            display: flex;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        }

        .modal-body .form-horizontal .form-group select.form-control {
            height: calc(1.8em + 0.75rem + 20px) !important;
            padding: 1.5rem 1rem 1rem 0.8rem !important;
            font-weight: 600;
        }

        .modal-body .form-horizontal .form-group input.form-control {
            height: calc(1.5em + 0.75rem + 20px) !important;
            padding: 1.6rem 1rem 0.8rem 1rem !important;
            font-weight: 600;
        }

        .modal-body .form-horizontal .form-group textarea.form-control {
            scroll-padding: 30px 0px 0px;
            padding: 1.6rem 1rem 0.8rem 1rem !important;
            font-weight: 600;
        }

        .modal-body .form-horizontal .form-group .btn-primary {
            width: 100%;
            background-color: #3e2661;
        }

#username {
    display: none;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
        margin: 0 auto;
    }

    #username {
        display: unset;
    }
}

.swal2-container.swal2-center > .swal2-popup {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: 432px;
}

.swal2-html-container {
    z-index: 1;
    justify-content: flex-start;
    margin: 1em 1.6em 0.3em;
    padding: 0;
    overflow: auto;
    color: inherit;
    font-size: 1em;
    font-weight: 400;
    line-height: normal;
    text-align: left !important;
    word-wrap: break-word;
    width: auto;
    word-break: break-word;
}

.swal2-actions {
    z-index: 1;
    box-sizing: border-box;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    margin: 0.5em auto 0 !important;
    padding: 0;
    text-align: left !important;
    justify-content: flex-start;
    width: 90% !important;
}

textarea#swal-input2 {
    width: 344px;
    padding: 10px;
}

.swal2-file,
.swal2-input,
.swal2-textarea {
    box-sizing: border-box;
    /* width: 354px; */
    transition: border-color 0.1s, box-shadow 0.1s;
    border: 1px solid #d9d9d9;
    border-radius: 0.1875em;
    background: 0 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 3px transparent;
    color: inherit;
    font-size: 1em;
}

.swal2-title {
    text-align: left !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: unset !important;
    border: unset !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: pointer !important;
}

.dataTables_wrapper {
    background: linear-gradient(to bottom, #E3E3E3 0px, #E3E3E3 48px,transparent 49px, transparent 100%) no-repeat;
}

table.dataTable tbody tr:hover {
    background-color: #f8f9e1 !important
}

.wssection {
    padding: 0px;
}

.btn-primary {
    background-color: #3e2661 !important;
    border-color: #3e2661 !important;
}


ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
}


.table-wrapper .table-sortable tbody .off2 {
    background-color: #22a172;
    color: #FFF;
}

.cred {
    color: red !important;
}


.ymw-warning {

    max-width: 1170px;
    margin: 20px auto 0px auto;
}

    .ymw-warning .ymw-small {
        width: 46px;
        height: 46px;
        background: #F89705;
        box-shadow: 0px 2px 14px rgba(105, 105, 105, 0.4);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .ymw-warning.active .ymw-small {
        display: none;
    }

    .ymw-warning .ymw-big {
        width: Calc(100%);
        background: #FFF4CE;
        border: 2px solid #FFFFFF;
        box-shadow: 0px 4px 14px rgb(233 150 25 / 25%);
        border-radius: 4px;
        font-weight: bold;
        /* justify-content: center; */
        position: relative;
        padding: 0 20px;
    }

    .ymw-warning.active .ymw-big {
        display: flex;
        flex-direction: column;
    }

    .ymw-warning .ymw-big .ymw-x {
        position: absolute;
        top: Calc(50% - 23px);
        right: 0px;
        color: #F89705;
        opacity: 1;
        width: 46px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        cursor: pointer;
    }

    .ymw-warning .ymw-bigc {
        display: inline-flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .ymw-warning .ymw-bigw {
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

.ymw-bigwl {
    display: inline-flex;
    column-gap: 14px;
    align-items: center;
}

.ymw-warning .ymw-bigw a {
    background: #F85C05;
    box-shadow: 0px 3px 0px #E15100;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    padding: 1px 13px;
}

.toprigtmenu {
    height: 45px;
    float: right;
    margin-right: 25px;
}

.ldk-select {
    background-color: aquamarine;
    height: inherit;
    position: relative;
}

    .ldk-select:hover::after {
        border-color: white;
        /*transform: rotate(45deg);*/
    }

    .ldk-select:focus {
        pointer-events: none;
    }

        .ldk-select:focus::after {
            border-color: black;
            transform: rotate(225deg);
            top: 20px;
        }

        .ldk-select:focus .ldks-list {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

    .ldk-select .ldks-list {
        background-color: #b73838;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        position: absolute;
        z-index: 99;
        width: 100%;
        border: 1px solid #ddd;
        border-top: none;
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.5s;
    }

        .ldk-select .ldks-list .add-employee {
            border-radius: 0px;
            height: 35px;
        }

    .ldk-select .ldks-title {
        width: 100%;
        justify-content: flex-start;
        border-radius: 0px;
        border: 1px solid #ddd;
    }

    .ldk-select .ldks-click {
        display: none;
        position: absolute;
        width: 100%;
        height: inherit;
        top: 0;
        left: 0;
    }

    .ldk-select::after {
        content: '';
        border: solid black;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        position: absolute;
        top: 16px;
        right: 15px;
        transition: all 0.3s;
    }


.table-admin .dropdown-menu {
    padding: 0px;
}

    .table-admin .dropdown-menu .dropdown-item {
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9ecef;
    }

        .table-admin .dropdown-menu .dropdown-item svg {
            margin-right: 5px;
        }


.ticket5Head {
    display: flex;
    flex-direction: row;
}

    .ticket5Head > div {
        background-color: #fff;
        margin: 10px;
        display: flex;
        flex-direction: column;
        flex: 1 1 0px;
        align-items: center;
        justify-content: center;
        padding-top: 30px;
        padding-bottom: 30px
    }

        .ticket5Head > div > h3 {
            font-size: 14px;
        }

        .ticket5Head > div > p {
            font-size: 16px;
            margin-bottom: 0;
            font-weight: bold;
        }


    .ticket5Head .status1 p {
        color: #ffc107;
    }

    .ticket5Head .status2 p {
        color: #000;
    }

    .ticket5Head .status3 p {
        color: #37baf9;
    }

    .ticket5Head .status4 p {
        color: #87ad4a;
    }

    .ticket5Head .status5 p {
        color: #28a745;
    }

    .ticket5Head .status6 p {
        color: #dc3545;
    }

    .ticket5Head .priority1 p {
        color: #28a745;
    }

    .ticket5Head .priority2 p {
        color: #37baf9;
    }

    .ticket5Head .priority3 p {
        color: #dc3545;
    }





.commentForm:after {
    content: '';
    display: block;
    clear: both;
}

.commentTextarea {
    border: none;
    margin-bottom: 20px;
    outline: none;
    font-size: 14px;
    resize: none;
}

.commentbuttonarea {
    font-size: 14px;
    float: right;
}

.ticketcommentsarea .card {
    min-width: 300px;
    max-width: 900px;
}

.talepdetaybaslik {
    font-weight: 600;
    font-size: 20px;
}

    .talepdetaybaslik span {
        font-weight: 400;
    }


hr.hr-text {
    position: relative;
    border: none;
    height: 1px;
    background: #0000001a;
}

    hr.hr-text::before {
        content: attr(data-content);
        display: inline-block;
        background: #eee;
        font-weight: 400;
        font-size: 0.85rem;
        color: #212529;
        border-radius: 30rem;
        padding: 0.2rem 1rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }



.cardme {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: #FFF8F4;
    border-radius: 15px;
}

    .cardme .card-body {
        padding-left: 0px;
        padding-right: 15px;
    }

        .cardme .card-body p {
            border-left: solid 3px #F85C05;
            padding-left: 9px;
        }

    .cardme .card-footer {
        background-color: #FFF8F4;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }

        .cardme .card-footer p {
            font-size: 14px;
            font-weight: bold;
        }

        .cardme .card-footer span {
            color: #D69672;
        }




.cardyou {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 15px;
}

    .cardyou .card-body {
        padding-left: 0px;
        padding-right: 15px;
    }

        .cardyou .card-body p {
            border-left: solid 3px #dee2e6;
            padding-left: 9px;
        }

    .cardyou .card-footer {
        background-color: #fff;
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 5px;
    }

        .cardyou .card-footer p {
            font-size: 14px;
            font-weight: bold;
        }

        .cardyou .card-footer span {
            color: #6c757d;
        }


.tablecolors .tc-red {
    background-color: rgb(217 19 19 / 10%);
    position: relative;
}

    .tablecolors .tc-red td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #D91313;
    }

.tablecolors .tc-gray {
    background-color: #f8f8f8;
    position: relative;
}

    .tablecolors .tc-gray td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #6c757d;
    }



.tablecolors td {
    position: relative
}

.tablecolors .status1 {
    position: relative;
}

    .tablecolors .status1 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #ffc107;
    }

.tablecolors .status2 {
    position: relative;
}

    .tablecolors .status2 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #000;
    }

.tablecolors .status3 {
    position: relative;
}

    .tablecolors .status3 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #37baf9;
    }

.tablecolors .status4 {
    position: relative;
}

    .tablecolors .status4 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #87ad4a;
    }

.tablecolors .status5 {
    position: relative;
}

    .tablecolors .status5 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #28a745;
    }

.tablecolors .status6 {
    position: relative;
}

    .tablecolors .status6 td:first-child::before {
        content: "";
        position: absolute;
        z-index: 99;
        left: 0px;
        top: 0px;
        width: 5px;
        height: 102%;
        background: #dc3545;
    }


/*
.buttonAload{
    animation: ld-spin-fast 1s infinite linear;
}
*/
.waitButtonA {
    transition: width .5s;
}

    .waitButtonA svg {
        background-color: white;
        border-radius: 50%;
        padding: 5px;
        box-sizing: content-box;
    }

    .waitButtonA:hover .buttonAload {
        border: 4px solid #22ba82;
        border-top: 4px solid #d3d3d3;
    }


.buttonAload {
    margin-left: 12px;
    border: 4px solid #22ba82;
    border-radius: 50%;
    border-top: 4px solid #3e2661;
    width: 24px;
    height: 24px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

button > .buttonAload {
    width: 20px;
    height: 20px;
    vertical-align: sub;
    display: inline-block;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*departman*/
#editor-container {
    height: 350px;
}


#iApprove {
    padding-right: 27px;
    border-radius: 6px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    background-image: url(https://www.haberler.com/mstatic/assets/img/arrow-down-black.png);
    background-repeat: no-repeat;
    background-position: right 4% center;
    background-size: 11px;
}

.modal-content select {
    background-color: #fff;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    background-image: url(https://www.haberler.com/mstatic/assets/img/arrow-down-black.png);
    background-repeat: no-repeat;
    background-position: right 4% center;
    background-size: 15px;
}

.dataTables_length select {
    padding: 6px;
    padding-right: 28px;
    border-radius: 6px;
    background-color: #fff;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    background-image: url(https://www.haberler.com/mstatic/assets/img/arrow-down-black.png);
    background-repeat: no-repeat;
    background-position: right 15% center;
    background-size: 11px;
}

.dataTables_empty {
    text-align: center !important;
}

.dataTables_length select {
    /*padding: 8px;
    border-radius: 6px;*/
}

.dataTables_length {
    padding: 7px 0px 12px 7px;
}

.dataTables_filter {
    padding: 7px 7px 0px 0px;
}

    .dataTables_filter input[type="search"] {
        padding: 5px;
        border-radius: 6px;
    }

    .dataTables_filter label {
        margin-right: 15px;
    }

    .dataTables_filter > *:last-child {
        margin-right: 0px;
    }