@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

:root {
    --poppins: 'Poppins', sans-serif;
    --light: #f9f9f9;
    --primary-red: #D21f26;
    --hover-red: #E63E3E;
    --grey: #eeeeee;
    --middle-grey: #cccccc;
    --dark-grey: #AAAAAA;
    --dark: #342E37;
    --red: #D21f26;
    --yellow: #FFCE26;
    --orange: #FD7238;
    --primary-green: #4b7d4d;
    --primary-hover-green: #7dd181da;
    --secondary-green: #083D77;
    --white: #ffffff;
    --lighter: #f9f9f94a;
    --light-primary-red: #D21f264a;
    --light-hover-red: #D21f264a;
    --light-grey: #eeeeee4a;
    --light-middle-grey: #cccccc4a;
    --light-dark-grey: #AAAAAA4a;
    --light-dark: #342E374a;
    --light-yellow: #FFCE264a;
    --light-orange: #d21f264a;
    --light-red: #D21f264a;
    --light-secondary-red: #D21f264a;
    --light-yellow: #FFCE264a;
    --light-primary-green: #4b7d4d4a;
    --light-secondary-green: #083D774a;
    --light-white: #ffffff4a;
    --admin-icon-purple: #AC92EC;
    --admin-icon-purple-solid: #967ADC;
    --admin-icon-blue: #8067B7;
    --admin-icon-blue-solid: #6A50A7;
    --admin-icon-aqua: #4FC1E9;
    --admin-icon-aqua-solid: #3BAFDA;
    --admin-icon-mint: #48CFAD;
    --admin-icon-mint-solid: #37BC9B;
    --admin-icon-grass: #A0D468;
    --admin-icon-grass-solid: #8CC152;
    --admin-icon-sunflower: #FFCE54;
    --admin-icon-bittersweet-solid: #E9573F;
    --admin-icon-grapefruit: #ED5565;
    --admin-icon-grapefruit-solid: #DA4453;
}

html {
    overflow-x: hidden !important;
}

body.dark {
    --light: #1E1E1E !important;
    --grey: #121212 !important;
    --dark: #FBFBFB !important;
    --dark-font: #F8F8F8AA !important;
}

body {
    background: var(--grey) !important;
    overflow-x: hidden !important;
    color: var(--dark-font) !important;
}

a {
    text-decoration: none !important;
}

li {
    list-style: none !important;
}

.btn-xxs {
    width: fit-content;
    padding: .1rem .35rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .15rem;
    margin-left: auto;
}

.app-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100%;
    background: var(--light);
    z-index: 2000;
    font-family: var(--poppins);
    border-right: 1px solid #00000019;
    transition: .3s ease;
    overflow-x: hidden;
    scrollbar-width: none;
}

    #sidebar.hide {
        width: 52px;
    }

    #sidebar .brand {
        font-size: 24px;
        font-weight: 700;
        height: 90px;
        display: flex;
        align-items: center;
        color: var(--primary-red);
        position: sticky;
        top: 0;
        left: 0;
        background: var(--light);
        z-index: 500;
        padding: 20px 0;
        margin-top: 15px;
        box-sizing: content-box;
    }

    #sidebar.hide .brand {
        display: none;
    }

    #sidebar .brand .bx {
        min-width: 60px;
        display: flex;
        justify-content: center;
    }

    #sidebar .side-menu {
        width: 100%;
        margin-top: 15px;
        padding-left: 0rem;
    }

        #sidebar .side-menu li {
            height: 48px;
            background: transparent;
            margin-left: 6px;
        }

            #sidebar .side-menu li.active {
                position: relative;
            }

            #sidebar .side-menu li a {
                width: 100%;
                height: 100%;
                background: var(--light);
                display: flex;
                align-items: center;
                font-size: 14px;
                color: var(--dark-font);
                /*white-space: nowrap;*/
                overflow: hidden;
            }

        #sidebar .side-menu.top li.active a {
            color: var(--primary-red);
        }

    #sidebar.hide .side-menu li a {
        width: 48px;
        transition: 0.2s;
    }

    #sidebar .side-menu li a.logout {
        background: var(--red);
        color: var(--white);
    }

    #sidebar .side-menu li a:hover {
        color: var(--primary-red);
        background: #00000006;
        transition: 0.2s;
    }

    #sidebar .side-menu li a .bx {
        font-size: 26px;
        margin-right: 5px;
        min-width: calc(60px - ((4px + 6px) * 2));
        display: flex;
        justify-content: center;
    }

.cukoadmin-content {
    position: relative;
    width: calc(100% - 280px);
    left: 280px;
    top: -23px;
    transition: .3s ease;
}

#sidebar.hide ~ .cukoadmin-content {
    width: calc(100% - 52px);
    left: 52px;
}

.cukoadmin-content nav {
    height: 55px;
    background: var(--light);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    font-family: var(--poppins);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom: 1px solid #00000019;
}

    /* .cukoadmin-content nav::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: -40px;
	left: 0;
	border-radius: 50%;
	box-shadow: -20px -20px 0 var(--light);
} */

    .cukoadmin-content nav a {
        color: var(--dark);
    }

    .cukoadmin-content nav .bx.bx-menu {
        cursor: pointer;
        color: var(--dark);
    }

    .cukoadmin-content nav .nav-link {
        font-size: 14px;
        transition: .3s ease;
    }

        .cukoadmin-content nav .nav-link:hover {
            color: var(--primary-red);
        }

    .cukoadmin-content nav form {
        max-width: 400px;
        width: 100%;
        margin-right: auto;
    }

        .cukoadmin-content nav form .form-input {
            display: flex;
            align-items: center;
            height: 36px;
        }

            .cukoadmin-content nav form .form-input input {
                flex-grow: 1;
                padding: 0 16px;
                height: 100%;
                background: var(--light);
                border-radius: 36px 0 0 36px;
                width: 100%;
                color: var(--dark);
                font-size: 12px !important;
            }

                .cukoadmin-content nav form .form-input input[type="search"] {
                    margin-bottom: 0;
                }

                .cukoadmin-content nav form .form-input input:hover {
                    background: var(--grey);
                }

                .cukoadmin-content nav form .form-input input:focus {
                    outline: 1px solid var(--dark-grey);
                    background: var(--grey);
                    font-size: 12px !important;
                }

                    .cukoadmin-content nav form .form-input input:focus + .search-btn {
                        outline: none;
                    }

            .cukoadmin-content nav form .form-input button {
                width: 70px;
                height: 100%;
                display: flex;
                justify-content: center;
                justify-items: center;
                align-items: center;
                background: var(--primary-red);
                color: var(--light);
                font-size: 18px;
                border: none;
                outline: none;
                border-radius: 0 36px 36px 0;
                cursor: pointer;
            }

                .cukoadmin-content nav form .form-input button:hover {
                    background: var(--hover-red);
                }

    .cukoadmin-content nav .notification {
        font-size: 1em;
        position: relative;
        background: white;
        border-radius: 500px;
        padding: 3px;
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .cukoadmin-content nav .notification i {
            font-size: 1.8em;
            color: #d21f26;
        }

        .cukoadmin-content nav .notification .num {
            position: absolute;
            top: -6px;
            right: -6px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid var(--light);
            background: var(--red);
            color: var(--light);
            font-weight: 700;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .cukoadmin-content nav .profile img {
        width: 36px;
        height: 36px;
        object-fit: cover;
        border-radius: 50%;
    }

    .cukoadmin-content nav .switch-mode {
        display: block;
        min-width: 50px;
        height: 25px;
        border-radius: 25px;
        background: var(--grey);
        cursor: pointer;
        position: relative;
    }

        .cukoadmin-content nav .switch-mode::before {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            bottom: 2px;
            width: calc(25px - 4px);
            background: var(--primary-red);
            border-radius: 50%;
            transition: all .3s ease;
        }

    .cukoadmin-content nav #switch-mode:checked + .switch-mode::before {
        left: calc(100% - (25px - 4px) - 2px);
    }


.dropdown-menu {
    position: absolute;
    top: 54px;
    right: 85px;
    background-color: #fff;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1;
    padding: 0;
}

    .dropdown-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .dropdown-menu li {
        width: 250px
    }

        .dropdown-menu li a {
            display: flex;
            align-items: center;
            gap: 15px;
            width: 100%;
            padding: 5px 20px 5px 10px;
            border-bottom: 1px solid #ddd !important;
            font-size: 13px;
            cursor: pointer;
        }

            .dropdown-menu li a:last-child {
                border-bottom: none;
            }

            .dropdown-menu li a:hover {
                background-color: #f1f1f1;
            }

@keyframes dropdown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-menu.show {
    display: block;
    animation: dropdown 0.3s ease;
}

.read-message {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23000' d='M12.943 4.165a2.25 2.25 0 0 1 2.118 0l8.249 4.4q.26.139.469.334l-9.78 5.008L4.225 8.9q.21-.196.471-.335zm-9.416 6.064l10.13 5.189c.216.11.47.11.685 0l10.135-5.192q.023.16.023.324v8.7a2.25 2.25 0 0 1-2.25 2.25H5.755a2.25 2.25 0 0 1-2.25-2.25v-8.7q0-.163.023-.322m12.24-7.388a3.75 3.75 0 0 0-3.53 0L3.99 7.24a3.75 3.75 0 0 0-1.985 3.309v8.7A3.75 3.75 0 0 0 5.754 23H22.25A3.75 3.75 0 0 0 26 19.25v-8.7a3.75 3.75 0 0 0-1.985-3.309z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.unread-message {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath fill='%23000' d='M47.88 21.941c4.422 0 8.12-3.674 8.12-8.12S52.303 5.7 47.88 5.7c-4.447 0-8.12 3.673-8.12 8.12c0 4.446 3.673 8.12 8.12 8.12M7.348 50.351h37.676c4.213 0 6.647-2.434 6.647-7.255V24.47c-1.1.42-2.317.631-3.58.655v18.299L34.727 30.225l7.02-6.903a10.262 10.262 0 0 1-2.527-2.294L28.714 31.372c-1.006 1.006-1.896 1.45-2.832 1.45c-.936 0-1.825-.444-2.832-1.45L5.383 13.938c.515-.21 1.124-.328 1.85-.328h29.345c.023-1.263.234-2.48.655-3.58H6.646C2.457 10.03 0 12.44 0 17.26v25.836c0 4.844 2.48 7.255 7.348 7.255M3.58 43.096V17.027l13.456 13.198L3.604 43.494c-.024-.117-.024-.258-.024-.398m22.302-6.67c1.638 0 3.23-.678 4.868-2.293l1.52-1.497l13.972 13.807c-.515.234-1.1.327-1.779.327H7.231c-.679 0-1.24-.093-1.732-.304l13.995-13.83l1.52 1.497c1.639 1.615 3.207 2.294 4.868 2.294'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.notification-message {
    font-weight: 600;
    width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read .notification-message {
    font-weight: 400;
    font-size: 1em;
}

.unread {
    background: #fafafa;
}

.read-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d21f26;
    border: 1px solid #d21f26;
    padding: 5px;
    border-radius: 50px;
}

.notification-time {
    font-size: .73em;
    color: #aaa;
}

.cukoadmin-content main {
    width: 100%;
    padding: 36px 0px;
    font-family: var(--poppins);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}

    .cukoadmin-content main .cukoadmin-head-title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px 40px;
    }

        .cukoadmin-content main .cukoadmin-head-title .left h1 {
            //display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--dark);
        }

        .cukoadmin-content main .cukoadmin-head-title .left .breadcrumb {
            display: flex;
            align-items: center;
            gap: 0px;
            font-size: 15px;
        }

            .cukoadmin-content main .cukoadmin-head-title .left .breadcrumb li {
                color: var(--dark);
                display: flex;
                align-items: center;
                justify-content: center;
            }

                .cukoadmin-content main .cukoadmin-head-title .left .breadcrumb li a {
                    color: var(--dark);
                    pointer-events: unset;
                }

                    .cukoadmin-content main .cukoadmin-head-title .left .breadcrumb li a.active {
                        color: var(--primary-red);
                        pointer-events: unset;
                    }

        .cukoadmin-content main .cukoadmin-head-title .btn-download {
            height: 36px;
            padding: 0 16px;
            border-radius: 36px;
            background: var(--primary-red);
            color: var(--light);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            font-weight: 500;
        }

    .cukoadmin-content main .cukoadmin-welcome {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 600px;
        width: 100%;
    }

        .cukoadmin-content main .cukoadmin-welcome .cukoadmin-welcome-banner {
            width: auto;
            height: auto;
        }

            .cukoadmin-content main .cukoadmin-welcome .cukoadmin-welcome-banner img {
                width: 100%;
                height: 100%;
            }

    .cukoadmin-content main .box-info {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
        margin-top: 36px;
    }

        .cukoadmin-content main .box-info li {
            padding: 24px;
            background: var(--light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 24px;
        }

            .cukoadmin-content main .box-info li .bx {
                width: 80px;
                height: 80px;
                border-radius: 10px;
                font-size: 36px;
                display: flex;
                justify-content: center;
                align-items: center;
            }


.bg-purple {
    background: var(--admin-icon-purple-solid) !important;
}

.bg-blue {
    background: var(--admin-icon-blue-solid) !important;
}

.bg-aqua {
    background: var(--admin-icon-aqua-solid) !important;
}

.bg-mint {
    background: var(--admin-icon-mint-solid) !important;
}

.bg-grass {
    background: var(--admin-icon-grass-solid) !important;
}

.bg-sunflower {
    background: var(--admin-icon-sunflower) !important;
}

.bg-bittersweet {
    background: var(--admin-icon-bittersweet-solid) !important;
}

.bg-grapefruit {
    background: var(--admin-icon-grapefruit-solid) !important;
}


/*.cukoadmin-content main .box-info li:nth-child(1) .bx {
                background: var(--admin-icon-grass);
                color: var(--primary-red);
            }

            .cukoadmin-content main .box-info li:nth-child(2) .bx {
                background: var(--admin-icon-mint);
                color: var(--admin-icon-mint-solid);
            }

            .cukoadmin-content main .box-info li:nth-child(3) .bx {
                background: var(--admin-icon-purple);
                color: var(--admin-icon-purple-solid);
            }

            .cukoadmin-content main .box-info li.second:nth-child(1) .bx {
                background: var(--admin-icon-grapefruit);
                color: var(--primary-red);
            }

            .cukoadmin-content main .box-info li.second:nth-child(2) .bx {
                background: var(--admin-icon-sunflower);
                color: var(--admin-icon-mint-solid);
            }*/

.cukoadmin-content main .box-info li .text h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.cukoadmin-content main .box-info li .text a {
    display: block;
    width: fit-content;
}

.cukoadmin-content main .box-info li .text p {
    color: var(--dark);
    width: fit-content;
    padding: 3px 7px;
    font-size: 12px;
    margin-left: -7px;
    border-radius: 5px;
    transition: 0.1s;
    margin-bottom: 0;
}

    .cukoadmin-content main .box-info li .text p:hover {
        background: var(--grey);
    }

.cukoadmin-content main .table-data {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
    color: var(--dark);
}

    .cukoadmin-content main .table-data > div {
        border-radius: 20px;
        background: var(--light);
        padding: 24px;
        overflow-x: auto;
    }

    .cukoadmin-content main .table-data .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 16px;
        margin-bottom: 24px;
    }

        .cukoadmin-content main .table-data .head h3 {
            margin-right: auto;
            font-size: 24px;
            font-weight: 600;
        }

        .cukoadmin-content main .table-data .head .firm-btn {
            padding: 5px 10px;
            background: #d21f26;
            border-radius: 5px;
            font-size: .9em;
            color: white;
            border: none;
            outline: none;
            transition: .2s;
        }

            .cukoadmin-content main .table-data .head .firm-btn:hover {
                background: #ff4545;
            }

        .cukoadmin-content main .table-data .head .bx {
            cursor: pointer;
        }

    .cukoadmin-content main .table-data .order {
        flex-grow: 1;
        flex-basis: 500px;
    }

        .cukoadmin-content main .table-data .order table {
            width: 100%;
            border-collapse: collapse;
        }

            .cukoadmin-content main .table-data .order table th {
                padding-bottom: 12px;
                font-size: 13px;
                text-align: left;
                border-bottom: 1px solid var(--grey);
            }

            .cukoadmin-content main .table-data .order table td {
                padding: 16px 0;
            }

            .cukoadmin-content main .table-data .order table tr td:first-child {
                display: flex;
                align-items: center;
                gap: 12px;
                padding-left: 6px;
            }

            .cukoadmin-content main .table-data .order table td img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                object-fit: cover;
            }

            .cukoadmin-content main .table-data .order table tbody tr:hover {
                background: var(--grey);
            }

            .cukoadmin-content main .table-data .order table tr td .status {
                font-size: 10px;
                padding: 6px 16px;
                color: var(--light);
                border-radius: 20px;
                font-weight: 700;
            }

                .cukoadmin-content main .table-data .order table tr td .status.canceled {
                    background: var(--primary-green);
                }

                .cukoadmin-content main .table-data .order table tr td .status.completed {
                    background: var(--primary-red);
                }

                .cukoadmin-content main .table-data .order table tr td .status.process {
                    background: var(--yellow);
                }

                .cukoadmin-content main .table-data .order table tr td .status.pending {
                    background: var(--dark);
                }

                .cukoadmin-content main .table-data .order table tr td .status.used {
                    background: var(--dark);
                }

    .cukoadmin-content main .table-data .todo {
        flex-grow: 1;
        flex-basis: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: start;
    }

        .cukoadmin-content main .table-data .todo .all-view {
            display: block;
            text-align: center;
            width: 100%;
            font-size: 14px;
            transition: 0.2s;
            color: #1E1E1E;
        }

            .cukoadmin-content main .table-data .todo .all-view:hover {
                text-decoration: underline !important;
            }

        .cukoadmin-content main .table-data .todo .todo-list {
            width: 100%;
            padding-left: 0rem;
            margin-bottom: 0;
        }

            .cukoadmin-content main .table-data .todo .todo-list li {
                width: 100%;
                margin-bottom: 16px;
                background: var(--grey);
                border-radius: 10px;
                padding: 10px 20px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
            }

                .cukoadmin-content main .table-data .todo .todo-list li .bx {
                    cursor: pointer;
                }

                .cukoadmin-content main .table-data .todo .todo-list li.canceled {
                    border-left: 10px solid var(--primary-red);
                }

                .cukoadmin-content main .table-data .todo .todo-list li.pending {
                    border-left: 10px solid var(--dark);
                }


                .cukoadmin-content main .table-data .todo .todo-list li.used {
                    border-left: 10px solid var(--dark);
                }

                .cukoadmin-content main .table-data .todo .todo-list li.completed {
                    border-left: 10px solid var(--primary-green);
                }

                .cukoadmin-content main .table-data .todo .todo-list li.not-completed {
                    border-left: 10px solid var(--orange);
                }

                .cukoadmin-content main .table-data .todo .todo-list li.canceled p,
                .cukoadmin-content main .table-data .todo .todo-list li.pending p,
                .cukoadmin-content main .table-data .todo .todo-list li.completed p,
                .cukoadmin-content main .table-data .todo .todo-list li.used p {
                    margin-bottom: 0;
                    font-size: 14px;
                }

                    .cukoadmin-content main .table-data .todo .todo-list li.canceled p a,
                    .cukoadmin-content main .table-data .todo .todo-list li.pending p a,
                    .cukoadmin-content main .table-data .todo .todo-list li.completed p a,
                    .cukoadmin-content main .table-data .todo .todo-list li.used p a {
                        color: #212121;
                        padding: 3px 7px;
                        border-radius: 5px;
                        font-size: 14px;
                        transition: 0.1s;
                    }

                        .cukoadmin-content main .table-data .todo .todo-list li.canceled p a:hover,
                        .cukoadmin-content main .table-data .todo .todo-list li.pending p a:hover,
                        .cukoadmin-content main .table-data .todo .todo-list li.completed p a:hover,
                        .cukoadmin-content main .table-data .todo .todo-list li.used p a:hover {
                            background: white;
                        }

                .cukoadmin-content main .table-data .todo .todo-list li:last-child {
                    margin-bottom: 0;
                }

.login-page {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.left-box {
    height: auto;
    width: 100%;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

    .left-box img {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

.login-page .top-box .right-box .login-form .login-btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
}

    .login-page .top-box .right-box .login-form .login-btn-box .forgot-password {
        font-size: 12px;
        color: #444;
    }

        .login-page .top-box .right-box .login-form .login-btn-box .forgot-password:hover {
            text-decoration: underline !important;
        }

    .login-page .top-box .right-box .login-form .login-btn-box .login-btn {
        outline: none;
        border: none;
        padding: 5px 10px;
        font-size: 14px;
        background: #D21f26;
        color: white;
    }

        .login-page .top-box .right-box .login-form .login-btn-box .login-btn:hover {
            background: #D21f26D8;
        }

.login-page .go-to-home {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

    .login-page .go-to-home .go-to-home-btn {
        font-size: 14px;
        color: #444;
        padding: 5px 10px;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .login-page .go-to-home .go-to-home-btn:hover {
            text-decoration: underline !important;
        }

.btn-primary-red {
    color: #ffffff;
    background-color: var(--primary-red);
    border-color: #D21f26;
    border-radius: 10px;
    font-size: 14px;
    padding: 0.275rem 0.75rem;
}

    .btn-primary-red:hover,
    .btn-primary-red:focus,
    .btn-primary-red:active,
    .btn-primary-red.active,
    .open .dropdown-toggle.btn-primary-red {
        color: #ffffff;
        background-color: var(--hover-red);
        border-color: #D21f26
    }

    .btn-primary-red:active,
    .btn-primary-red.active,
    .open .dropdown-toggle.btn-primary-red {
        background-image: none;
    }

    .btn-primary-red.disabled,
    .btn-primary-red[disabled],
    fieldset[disabled] .btn-primary-red,
    .btn-primary-red.disabled:hover,
    .btn-primary-red[disabled]:hover,
    fieldset[disabled] .btn-primary-red:hover,
    .btn-primary-red.disabled:focus,
    .btn-primary-red[disabled]:focus,
    fieldset[disabled] .btn-primary-red:focus,
    .btn-primary-red.disabled:active,
    .btn-primary-red[disabled]:active,
    fieldset[disabled] .btn-primary-red:active,
    .btn-primary-red.disabled.active,
    .btn-primary-red[disabled].active,
    fieldset[disabled] .btn-primary-red.active {
        background-color: #D21f26;
        border-color: #D21f26
    }

    .btn-primary-red .badge {
        color: #D21f26;
        background-color: #ffffff;
    }

.table-data .todo .todo-list .todo-list-edit {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

    /* .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
	display: none;
	position: absolute;
	background: transparent;
	right: 15px;
	border-radius: 60px;
} */

    .table-data .todo .todo-list .todo-list-edit:hover .todo-list-edit-table {
        display: block !important;
        transition: display 0.2s ease all;
    }

    .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul {
        background: white;
        display: flex;
        grid-gap: 5px;
        padding: 5px;
        border-radius: 60px;
    }

        .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li a {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li a:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.cukoadmin-content .cukoadmin-head-title .left.navigation {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

    .cukoadmin-content .cukoadmin-head-title .left.navigation .back-button {
        color: #D21f26;
        font-size: 34px;
    }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="color"]:focus,
textarea:focus {
    outline: none;
    border-color: #D21f26 !important;
}

textarea:focus {
    box-shadow: none !important;
}


.form-check-input:checked {
    background-color: #D21f26 !important;
    border-color: #D21f26 !important;
}

.form-check-input:focus {
    border-color: #D21f26a8 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(217, 31, 38, .25) !important;
}

#perApron1:checked {
    background-color: #0FFF50 !important;
    border-color: #0FFF50 !important;
}

#perApron1:focus {
    border-color: #D21f26a8 !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(164, 216, 23, .50) !important;
}

.right-box {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 767px) {
    .top-box {
        flex-direction: column;
    }

    .left-box,
    .left-box img {
        border-bottom-left-radius: 0;
        border-top-right-radius: 10px;
    }

    .cukoadmin-content main {
        padding: 36px 10px;
    }

        .cukoadmin-content main .box-info {
            margin-top: 0;
            padding: 0;
        }
}

.form-group {
    margin-bottom: 20px;
}

    .form-group.pass {
        margin-bottom: 5px;
    }

label {
    display: block;
    font-weight: 400;
    margin-bottom: 5px;
    font-size: 14px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="file"],
input[type="url"],
input[type="color"],
textarea {
    width: 100%;
    padding: 10px 15px;
    font-size: 10px;
    border-radius: 5px;
    border: 1px solid #88888844;
    transition: 0.3s ease;
    font-size: 13px;
    margin-bottom: 5px
}

    input[type="text"]:hover,
    input[type="password"]:hover,
    input[type="email"]:hover,
    input[type="tel"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="file"]:hover,
    input[type="url"]:hover,
    input[type="color"]:hover,
    textarea:hover {
        border-color: #d21f26;
    }

        input[type="text"]:hover::placeholder,
        input[type="password"]:hover::placeholder,
        input[type="email"]:hover::placeholder,
        input[type="tel"]:hover::placeholder,
        input[type="number"]:hover::placeholder,
        input[type="search"]:hover::placeholder,
        input[type="file"]:hover::placeholder,
        input[type="url"]:hover::placeholder,
        input[type="color"]:hover::placeholder,
        textarea:hover::placeholder {
            color: #d21f26;
        }

    input[type="text"]::placeholder,
    input[type="password"]::placeholder,
    input[type="email"]::placeholder,
    input[type="tel"]::placeholder,
    input[type="number"]::placeholder,
    input[type="date"]::placeholder,
    input[type="time"]::placeholder,
    input[type="search"]::placeholder,
    input[type="file"]::placeholder,
    input[type="url"]::placeholder,
    input[type="color"]::placeholder,
    textarea::placeholder {
        color: #999;
        font-size: 13px;
        transition: 0.3s;
    }


    input[type="text"]:focus::placeholder,
    input[type="password"]:focus::placeholder,
    input[type="email"]:focus::placeholder,
    input[type="tel"]:focus::placeholder,
    input[type="number"]:focus::placeholder,
    input[type="date"]:focus::placeholder,
    input[type="time"]:focus::placeholder,
    input[type="search"]:focus::placeholder,
    input[type="file"]:focus::placeholder,
    input[type="url"]:focus::placeholder,
    input[type="color"]:focus::placeholder,
    textarea:focus::placeholder {
        color: #555;
        font-size: 14px;
    }

input[type="file"] {
    display: none;
}

.file-upload {
    width: 100%;
    position: relative;
}

.file-upload-text {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    background: white;
    border: 1px solid #ccc;
    color: #999;
    cursor: pointer;
    margin-bottom: 0;
    transition: 0.3s;
    margin-bottom: 5px;
}

    .file-upload-text:hover {
        border-color: #D21f26;
        background: white !important;
    }

.file-upload input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    margin-bottom: 5px;
}

    .file-upload input[type="file"]:hover + .file-upload-text {
        background-color: #f5f5f5;
    }

.selected-file-name {
    display: block;
    margin-top: 5px;
}

input[type="file"] {
    background: white;
}

select {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: border-color 0.3s ease;
}

    select:focus {
        outline: none;
        border-color: #D21f26 !important;
    }


.password-container {
    position: relative;
}

.password-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    cursor: pointer;
}

.cukurova-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml;utf8, <svg id='cukurova_kule' data-name='cukurova_kule' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 103.13 187.07'><path class='cls-1' d='M.5 14.09a248.97 248.97 0 0 1 50.48-5.28c20.31-.05 37.84 2.39 51.65 5.28v6.26c-13.41-3.02-30.77-5.67-51.07-5.67S13.91 17.33.5 20.35v-6.26ZM9.7 36.59a151.488 151.488 0 0 1 83.54 0v3.13a156.569 156.569 0 0 0-42.46-5.67c-16.85.07-30.9 2.85-41.09 5.67v-3.13ZM10.49 18.33l4.33 16.89M90.76 18.33l-2.64 16.89M.5 20.35l11.54 4.03M102.63 20.35 89.94 23.6'/><path class='cls-1' d='M11.07 39.72v5.15c3.73 3.76 8.89 9.64 13.5 17.74 6.66 11.71 10.52 25.2 11.35 55.57.46 16.84 0 39.61-3.72 66.65 5.65-.99 12.33-1.77 19.86-1.89 7.34-.12 13.9.41 19.47 1.17-4-26.63-4.32-48.95-3.72-65.15 1.19-31.97 6.2-45.52 10.57-54.39 4.59-9.32 9.86-16.25 13.7-20.74V39.4'/><path class='cls-1' d='M19.07 37.43v4.66C25 53.2 30.92 66.79 35.32 82.74c11.7 42.4 6.56 79.37 1.57 100.97'/><path class='cls-1' d='M39.75 34.48v4.87c2.06 10.79 3.83 22.12 5.22 33.95 4.81 40.98 3.8 78.16.26 110.02M65.28 34.65v3.66a503.553 503.553 0 0 0-5.17 33.44c-4.97 41.32-4.32 78.98-1.09 111.57'/><path class='cls-1' d='M86 37.43v4.66a198.273 198.273 0 0 0-16.25 40.65c-11.7 42.4-6.56 79.37-1.57 100.97'/><path class='cls-1' d='M19.07 54.18c7.35-2.27 17.44-4.55 29.56-4.88 15.05-.42 27.39 2.33 35.67 4.88M11.07 44.87a140.2 140.2 0 0 1 41.28-6.52c16.51-.11 30.15 2.72 39.72 5.48M19.07 10.93V0M84.3 0v10.93M35.16 155.89a95.065 95.065 0 0 1-5.8 18.04c-2.09 4.8-4.36 8.95-6.55 12.46 3.13-.52 6.26-1.04 9.39-1.57l2.96-28.93ZM68.41 155.08c1.32 5.33 3.23 11.43 6.05 17.97 2.02 4.7 4.18 8.87 6.3 12.52-3.13-.52-6.26-1.04-9.39-1.57l-2.96-28.93Z'/></svg>");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.dashboard-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.5 9V4H20v5zM4 12V4h6.5v8zm9.5 8v-8H20v8zM4 20v-5h6.5v5zm1-9h4.5V5H5zm9.5 8H19v-6h-4.5zm0-11H19V5h-4.5zM5 19h4.5v-3H5zm4.5-3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.employee-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23000' d='M16.43 16.69a7 7 0 1 1 7-7a7 7 0 0 1-7 7m0-11.92a5 5 0 1 0 5 5a5 5 0 0 0-5-5M22 17.9a25.41 25.41 0 0 0-16.12 1.67a4.06 4.06 0 0 0-2.31 3.68v5.95a1 1 0 1 0 2 0v-5.95a2 2 0 0 1 1.16-1.86a22.91 22.91 0 0 1 9.7-2.11a23.58 23.58 0 0 1 5.57.66Zm.14 9.51h6.14v1.4h-6.14z'/%3E%3Cpath fill='%23000' d='M33.17 21.47H28v2h4.17v8.37H18v-8.37h6.3v.42a1 1 0 0 0 2 0V20a1 1 0 0 0-2 0v1.47H17a1 1 0 0 0-1 1v10.37a1 1 0 0 0 1 1h16.17a1 1 0 0 0 1-1V22.47a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.authorized-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M24.393 26.472L29.01 41.21l-.732 1.29l-5-2.515l-4.047-14.158'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M24.393 26.472c-6.605.37-12.467-3.46-11.261-11.166'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M9.675 19.277a7.41 7.41 0 1 1 11.133-5.334'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m29.337 19.411l12.554 11.947l.05 2.497l-5.634.03l-10.95-10.738m-.013.005a7.112 7.112 0 0 1-9.601-6.661h0a7.11 7.11 0 0 1 7.11-7.111h0a7.11 7.11 0 0 1 7.112 7.11h0a7.1 7.1 0 0 1-.623 2.91'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.supervisor-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.885 13.616q-.82 0-1.41-.591t-.59-1.41t.59-1.41t1.41-.59q.819 0 1.41.59q.59.591.59 1.41q0 .82-.59 1.41q-.591.59-1.41.59m-4.5 5v-.9q0-.465.232-.843q.232-.379.66-.545q.845-.356 1.748-.534q.904-.177 1.86-.177q.916 0 1.821.177q.905.178 1.786.534q.428.166.66.545q.232.378.232.844v.9zm-2.77-7.23q-1.237 0-2.118-.882t-.881-2.118t.88-2.12t2.12-.88t2.118.88t.882 2.12t-.882 2.118t-2.118.882m-7 7.23V16.97q0-.648.357-1.192q.358-.544.973-.804q1.327-.673 2.756-1.015t2.914-.342q.605 0 1.211.063t1.212.167l-.427.446l-.427.447q-.393-.077-.785-.1t-.784-.023q-1.354 0-2.675.292t-2.518.942q-.327.183-.567.456t-.24.663v.646h6v1zm7-8.23q.825 0 1.412-.588t.588-1.412t-.588-1.413t-1.412-.587t-1.413.587t-.587 1.413t.587 1.412t1.413.588'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.accounting-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.308 15.692v1.558q0 .19.126.316t.316.126t.316-.126t.126-.316v-1.558h1.558q.19 0 .316-.126q.126-.125.126-.316t-.126-.316t-.316-.126H9.192V13.25q0-.19-.126-.316t-.316-.126t-.316.126t-.126.316v1.558H6.75q-.19 0-.316.126q-.126.125-.126.316t.126.316q.125.126.316.126zm5.442 1.25h3.5q.19 0 .316-.126q.126-.125.126-.316t-.126-.316q-.125-.126-.316-.126h-3.5q-.19 0-.316.126t-.126.316t.126.316t.316.126m0-2.5h3.5q.19 0 .316-.126q.126-.125.126-.316t-.126-.316q-.125-.126-.316-.126h-3.5q-.19 0-.316.126t-.126.316t.126.316t.316.126M15.5 9.09l1.087 1.086q.129.129.304.139q.175.009.323-.139q.142-.142.145-.31q.002-.169-.14-.317L16.127 8.45l1.087-1.086q.128-.13.138-.304q.01-.175-.138-.323t-.314-.148t-.313.148L15.5 7.823l-1.086-1.086q-.13-.13-.305-.139t-.323.139t-.147.313t.148.314l1.086 1.086l-1.092 1.098q-.123.129-.133.304t.139.323t.313.148t.314-.148zM7 8.892h3.5q.19 0 .316-.126q.126-.125.126-.316t-.126-.316t-.316-.126H7q-.19 0-.316.126t-.126.316t.126.316t.316.126M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h12.769q.69 0 1.153.463T20 5.616v12.769q0 .69-.462 1.153T18.384 20zm0-1h12.769q.23 0 .423-.192t.192-.424V5.616q0-.231-.192-.424T18.384 5H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192M5 5v14z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.accounting-icon_2 {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23000' d='M41 1H9C6.8 1 5 2.8 5 5v40c0 2.2 1.8 4 4 4h32c2.2 0 4-1.8 4-4V5c0-2.2-1.8-4-4-4M17 41c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm12 16c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm12 16c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-8c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-1c0-1.1.9-2 2-2h4c1.1 0 2 .9 2 2zm0-9c0 1.1-.9 2-2 2H11c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h28c1.1 0 2 .9 2 2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.corporate-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3.77 20.154q-.441 0-.74-.3t-.3-.738V4.192q0-.44.3-.739q.299-.3.74-.3h6.922q.44 0 .74.3q.299.299.299.74v2.96h8.5q.44 0 .74.3q.298.299.298.74v10.923q0 .44-.299.739t-.74.299zm-.04-1h7v-3h-7zm0-4h7v-3h-7zm0-4h7v-3h-7zm0-4h7v-3h-7zm8 12h8.54v-11h-8.54zm2.886-7q-.213 0-.357-.144q-.143-.144-.143-.357t.143-.356t.357-.143H17q.213 0 .356.144t.144.357t-.144.356t-.356.143zm0 4q-.213 0-.357-.144q-.143-.144-.143-.357t.143-.356t.357-.143H17q.213 0 .356.144t.144.357t-.144.356t-.356.143z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.documents-icon {
    display: inline-block;
    width: 1.07em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 32'%3E%3Cg fill='%23000'%3E%3Cpath d='M1.512 28H19.5c.827 0 1.5-.673 1.5-1.5v-19c0-.023-.01-.043-.013-.065a.426.426 0 0 0-.013-.062a.488.488 0 0 0-.122-.227L13.853.147a.507.507 0 0 0-.289-.135C13.543.01 13.523 0 13.5 0H1.506C.676 0 0 .673 0 1.5v25c0 .827.678 1.5 1.512 1.5M14 1.707L19.293 7H14.5a.5.5 0 0 1-.5-.5zM1 1.5c0-.276.227-.5.506-.5H13v5.5c0 .827.673 1.5 1.5 1.5H20v18.5a.5.5 0 0 1-.5.5H1.512A.506.506 0 0 1 1 26.5z'/%3E%3Cpath d='M4.5 12h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1m0 4h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1m0-8h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1m0 12h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1m0 4h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1'/%3E%3Cpath d='M21.5 5H26v5.5c0 .827.673 1.5 1.5 1.5H33v18.5a.5.5 0 0 1-.5.5H14.512a.506.506 0 0 1-.512-.5v-1a.5.5 0 0 0-1 0v1c0 .827.678 1.5 1.512 1.5H32.5c.827 0 1.5-.673 1.5-1.5v-19c0-.023-.01-.043-.013-.065a.426.426 0 0 0-.013-.062a.488.488 0 0 0-.122-.227l-6.999-6.999a.491.491 0 0 0-.289-.134C26.543 4.01 26.523 4 26.5 4h-5a.5.5 0 0 0 0 1m6 6a.5.5 0 0 1-.5-.5V5.707L32.293 11z'/%3E%3Cpath d='M23.5 16h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0 0 1m0 4h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0 0 1m0 4h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0 0 1m0 4h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0 0 1'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.user-settings-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='9.1' r='2.5'/%3E%3Cpath d='M17 19.2c-.317-6.187-9.683-6.187-10 0'/%3E%3Cpath d='M9.713 3.64c.581-.495.872-.743 1.176-.888a2.577 2.577 0 0 1 2.222 0c.304.145.595.393 1.176.888c.599.51 1.207.768 2.007.831c.761.061 1.142.092 1.46.204c.734.26 1.312.837 1.571 1.572c.112.317.143.698.204 1.46c.063.8.32 1.407.83 2.006c.496.581.744.872.889 1.176c.336.703.336 1.52 0 2.222c-.145.304-.393.595-.888 1.176a3.306 3.306 0 0 0-.831 2.007c-.061.761-.092 1.142-.204 1.46a2.577 2.577 0 0 1-1.572 1.571c-.317.112-.698.143-1.46.204c-.8.063-1.407.32-2.006.83c-.581.496-.872.744-1.176.889a2.577 2.577 0 0 1-2.222 0c-.304-.145-.595-.393-1.176-.888a3.306 3.306 0 0 0-2.007-.831c-.761-.061-1.142-.092-1.46-.204a2.577 2.577 0 0 1-1.571-1.572c-.112-.317-.143-.698-.204-1.46a3.305 3.305 0 0 0-.83-2.006c-.496-.581-.744-.872-.89-1.176a2.577 2.577 0 0 1 .001-2.222c.145-.304.393-.595.888-1.176c.52-.611.769-1.223.831-2.007c.061-.761.092-1.142.204-1.46a2.577 2.577 0 0 1 1.572-1.571c.317-.112.698-.143 1.46-.204a3.305 3.305 0 0 0 2.006-.83'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.logout-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='M19.285 12h-8.012m5.237 3.636L20 12l-3.49-3.636M13.455 7V4H4v16h9.455v-3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.add-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 10h3m3 0h-3m0 0V7m0 3v3M1 20v-1a7 7 0 0 1 7-7v0a7 7 0 0 1 7 7v1m-7-8a4 4 0 1 0 0-8a4 4 0 0 0 0 8'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.list-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath fill='%23000' d='M768 256h1280v128H768zm0 768V896h1280v128zm0 640v-128h1280v128zM256 768q53 0 99 20t82 55t55 81t20 100q0 53-20 99t-55 82t-81 55t-100 20q-53 0-99-20t-82-55t-55-81t-20-100q0-53 20-99t55-82t81-55t100-20m0 400q30 0 56-11t45-31t31-46t12-56t-11-56t-31-45t-46-31t-56-12t-56 11t-45 31t-31 46t-12 56t11 56t31 45t46 31t56 12m0 240q53 0 99 20t82 55t55 81t20 100q0 53-20 99t-55 82t-81 55t-100 20q-53 0-99-20t-82-55t-55-81t-20-100q0-53 20-99t55-82t81-55t100-20m0 400q30 0 56-11t45-31t31-46t12-56t-11-56t-31-45t-46-31t-56-12t-56 11t-45 31t-31 46t-12 56t11 56t31 45t46 31t56 12M192 358L467 83l90 90l-365 365L19 365l90-90z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.expected-documents-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M2.5 5.5v-4h4v1h-3v3zm18 0v-3h-3v-1h4v4zm-18 17v-4h1v3h3v1zm15 0v-1h3v-3h1v4zm-11-4.616q0 .231.192.424t.423.192h9.77q.23 0 .423-.192t.192-.424V6.116q0-.231-.192-.424t-.424-.192H7.116q-.231 0-.424.192t-.192.424zm.616 1.616q-.691 0-1.153-.462T5.5 17.884V6.116q0-.691.463-1.153T7.116 4.5h9.769q.69 0 1.153.463t.462 1.153v11.769q0 .69-.462 1.153t-1.154.462zM9.5 9.5h5v-1h-5zm0 3h5v-1h-5zm0 3h5v-1h-5zm-3 2.385V5.5v13z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.incompleted-incorrect-documents-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M6 2a2 2 0 0 0-2 2v5.207a5.5 5.5 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.5 5.5 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.rejected-document-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11m-2.476 3.024a.5.5 0 0 0 0 .707l1.769 1.77l-1.767 1.766a.5.5 0 1 0 .707.708l1.767-1.767l1.77 1.769a.5.5 0 1 0 .707-.707l-1.769-1.77l1.771-1.77a.5.5 0 0 0-.707-.707l-1.771 1.77l-1.77-1.77a.5.5 0 0 0-.707 0M11.019 17H2.75l-.102.007A.75.75 0 0 0 2.75 18.5h8.326a6.6 6.6 0 0 1-.057-1.5m.713-2.5H2.75a.75.75 0 0 1-.102-1.493L2.75 13h10.06a6.5 6.5 0 0 0-1.078 1.5M21.25 9H2.75l-.102.007A.75.75 0 0 0 2.75 10.5h18.5l.102-.007A.75.75 0 0 0 21.25 9m0-4H2.75l-.102.007A.75.75 0 0 0 2.75 6.5h18.5l.102-.007A.75.75 0 0 0 21.25 5'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.active-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M12 5C13.66 5 15 6.34 15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M12 14C16 14 19 16 19 17V19H5V17C5 16 8 14 12 14z' opacity='0'%3E%3Cset attributeName='opacity' begin='0.5s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='36;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.passive-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M10 5C11.66 5 13 6.34 13 8C13 9.65685 11.6569 11 10 11C8.3431 11 7 9.65685 7 8C7 6.34315 8.3431 5 10 5z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M10 15C14 15 17 17 17 18V19H3V18C3 17 6 15 10 15z' opacity='0'%3E%3Cset attributeName='opacity' begin='0.5s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='36;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='6' stroke-dashoffset='6' d='M18 11h4' opacity='0'%3E%3Cset attributeName='opacity' begin='0.9s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.9s' dur='0.2s' values='6;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.rejected-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='lineMdPersonOffFilledLoop0'%3E%3Cg fill='%23fff' fill-opacity='0' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M12 5C13.66 5 15 6.34 15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M12 14C16 14 19 16 19 17V19H5V17C5 16 8 14 12 14z' opacity='0'%3E%3Cset attributeName='opacity' begin='0.5s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='36;0'/%3E%3C/path%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.9s' dur='0.5s' values='0;1'/%3E%3C/g%3E%3Cg fill='none' stroke-dasharray='26' stroke-dashoffset='26' stroke-linecap='round' stroke-width='2' transform='rotate(45 12 12)'%3E%3Cpath stroke='%23000' d='M0 11h24'/%3E%3Cpath stroke='%23fff' d='M0 13h22'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0 13h22;M2 13h22;M0 13h22'/%3E%3C/path%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.4s' dur='0.2s' values='26;0'/%3E%3C/g%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23lineMdPersonOffFilledLoop0)'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.cancelled-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='lineMdPersonOffLoop0'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M12 5C13.66 5 15 6.34 15 8C15 9.65685 13.6569 11 12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M12 14C16 14 19 16 19 17V19H5V17C5 16 8 14 12 14z' opacity='0'%3E%3Cset attributeName='opacity' begin='0.5s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='36;0'/%3E%3C/path%3E%3C/g%3E%3Cg fill='none' stroke-dasharray='26' stroke-dashoffset='26' stroke-linecap='round' stroke-width='2' transform='rotate(45 12 12)'%3E%3Cpath stroke='%23000' d='M0 11h24'/%3E%3Cpath stroke='%23fff' d='M0 13h22'%3E%3Canimate attributeName='d' dur='6s' repeatCount='indefinite' values='M0 13h22;M2 13h22;M0 13h22'/%3E%3C/path%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='1.0s' dur='0.2s' values='26;0'/%3E%3C/g%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23lineMdPersonOffLoop0)'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.suspended-staff-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='lineMdPersonSearch0'%3E%3Cg stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cg fill='none' stroke='%23fff'%3E%3Cpath stroke-dasharray='20' stroke-dashoffset='20' d='M10 5C11.66 5 13 6.34 13 8C13 9.65685 11.6569 11 10 11C8.3431 11 7 9.65685 7 8C7 6.34315 8.3431 5 10 5z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.4s' values='20;0'/%3E%3C/path%3E%3Cpath stroke-dasharray='36' stroke-dashoffset='36' d='M10 15C14 15 17 17 17 18V19H3V18C3 17 6 15 10 15z' opacity='0'%3E%3Cset attributeName='opacity' begin='0.5s' to='1'/%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.5s' dur='0.4s' values='36;0'/%3E%3C/path%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='6' fill-opacity='0'%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.9s' dur='0.15s' values='0;1'/%3E%3C/circle%3E%3Cpath fill='none' stroke='%23fff' stroke-dasharray='26' stroke-dashoffset='26' d='M16 19C14.34 19 13 17.66 13 16C13 14.34 14.34 13 16 13C 17.66 13 19 14.34 19 16C19 17.66 17.66 19 16 19v4' transform='rotate(-45 16 16)'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.9s' dur='0.4s' values='26;0'/%3E%3C/path%3E%3C/g%3E%3C/mask%3E%3Crect width='24' height='24' fill='%23000' mask='url(%23lineMdPersonSearch0)'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.footer-content {
    height: 20px;
    width: 100%;
    background: #00000022;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    z-index: 1;
}

    .footer-content .footer-text {
        padding: 5px;
    }

    .footer-content .footer-text,
    .footer-content .footer-link {
        color: #121212;
        font-size: 12px;
        padding: 0;
        margin: 0;
    }

        .footer-content .footer-link:hover {
            text-decoration: underline !important;
        }

.form .divider {
    width: 100%;
    height: 1px;
    background: #00000019;
    margin-bottom: 15px;
}

.form .form-info {
    background-color: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important;
    /*overflow: auto !important;*/
    box-sizing: border-box !important;
}

.form .top-list {
    display: flex;
    gap: 0px;
    background: none;
    margin: 0;
}

    .form .top-list .top-list-item {
        padding: 20px;
    }

        .form .top-list .top-list-item a {
            color: #212121;
            font-weight: 600;
        }

            .form .top-list .top-list-item a small {
                font-weight: 400;
            }

        .form .top-list .top-list-item.active a {
            position: relative;
            color: #D21f26;
            transition: 0.3s;
        }

            .form .top-list .top-list-item.active a::before {
                content: "";
                position: absolute;
                height: 3px;
                width: 100%;
                background: #D21f26;
                bottom: -10px;
                left: 0;
            }

#smartwizard {
    margin-top: -1px !important;
    background: none !important;
    box-shadow: none !important;
}

    #smartwizard ul.step-anchor {
        margin-bottom: 10px !important;
        border: none !important;
        box-shadow: none !important;
    }

        #smartwizard ul.step-anchor li a {
            color: #333 !important;
            font-weight: bold !important;
            font-size: 16px !important;
        }

            #smartwizard ul.step-anchor li a small {
                font-weight: normal !important;
            }

        #smartwizard ul.step-anchor li.active a {
            color: #D21f26 !important;
        }

.sw-theme-default > ul.step-anchor > li > a::after {
    background: #D21f26 !important;
}

.sw-theme-default > ul.step-anchor > li.done > a::after {
    background: #D21f2677 !important;
}

#smartwizard .step-content {
    background-color: #f5f5f5 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important;
    overflow: auto !important;
    box-sizing: border-box !important;
}

#smartwizard .step-title {
    font-size: 24px !important;
    margin-bottom: 10px !important;
    color: #333 !important;
}

#smartwizard .step-content p {
    font-size: 18px !important;
    color: #555 !important;
}

#smartwizard .btn {
    background-color: #D21f26 !important;
    color: #fff !important;
    border-radius: 5px !important;
    padding: 5px 20px !important;
    font-size: 13px !important;
    border: none !important;
}

    #smartwizard .btn:hover {
        background-color: #3a7ea2 !important;
    }

    #smartwizard .btn:active,
    #smartwizard .btn:focus {
        box-shadow: none !important;
        background-color: #3a7ea2 !important;
    }

.sw-theme-default .sw-toolbar-bottom {
    background: transparent !important;
}

#smartwizard .btn-group,
.btn-group-vertical {
    gap: 10px !important;
}

.form-checkbox-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

    .form-checkbox-group .checkbox-group {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .form-checkbox-group .checkbox-group label {
            font-size: 11px;
            margin-bottom: 0;
        }

h4.form-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #d21f26;
    margin: 25px 0;
}

    h4.form-title:first-child {
        margin-top: 0;
    }

    h4.form-title small {
        font-weight: 400;
    }

.no-result p {
    margin-bottom: 0;
}

.item-list-input {
    border-radius: 20px !important;
    border: none !important;
    outline: none !important;
    margin-bottom: 25px !important;
}

.theme-select-menu {
    position: relative;
    display: inline-block;
    width: 100%;
    font-weight: 400;
    margin: 0px 0px 20px;
}

.theme-select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    border-radius: 4px;
    padding: 5px 15px;
    border: 1px solid #88888844;
    background: #fff;
    color: inherit;
    font-weight: 300;
    font-size: .8em;
    cursor: pointer;
    transition: 0.3s;
    height: 41.5px;
    margin-bottom: 3px;
}

    .theme-select option {
        color: black;
    }

    .theme-select span {
        color: #999;
        font-size: 14px;
        font-weight: 300;
    }

    .theme-select i {
        font-size: 16px;
        color: #333333bb;
    }

    .theme-select:hover {
        transition: box-shadow 0.2s linear;
        border: 1px solid #D21f26;
    }

.theme-option-list {
    position: absolute;
    width: 100%;
    background: #fff;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 9999;
    text-align: start;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

    .theme-option-list.active {
        max-height: 180px;
        border: 1px solid #ccc;
        border-top: none;
    }

    .theme-option-list::-webkit-scrollbar {
        width: 5px;
    }

    .theme-option-list::-webkit-scrollbar-track {
        background: none;
    }

    .theme-option-list::-webkit-scrollbar-thumb {
        background: #888;
    }

        .theme-option-list::-webkit-scrollbar-thumb:hover {
            background: #C70013;
        }

.theme-option {
    padding: 10px 20px;
    cursor: pointer;
    color: #333;
    font-weight: 300;
    font-size: 14px;
}

    .theme-option.selected {
        background: #C70013;
        color: #fff;
        transition: background 0.2s linear;
    }

    .theme-option:hover {
        background: #f1f1f1;
        transition: background 0.2s linear;
    }

    .theme-option.selected:hover {
        background: #b30011 !important;
        transition: background 0.2s linear;
    }

.bx-chevron-down,
.fa-angle-up {
    transition: opacity 0.4s ease;
}

.custom-date-input {
    position: relative;
}

.error-text,
.error-message {
    font-size: 12px;
    padding: 3px 7px;
    background: #D21F2619;
    border-radius: 5px;
}

.input-date {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
}

    .input-date:focus {
        border-color: #007bff;
    }

.custom-date-input i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #aaa;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em !important;
    line-height: 1.8em !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    padding: 5px 10px !important;
    width: 50% !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #3a7ea2 !important;
    background: #D21f26 !important;
    color: #fbe9e9 !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #D21f26 !important;
    background: #fbe9e9 !important;
    font-weight: normal !important;
    color: #232323 !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 5px !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker .ui-datepicker-buttonpane button {
    font-size: 13px !important;
}

.paginationjs .paginationjs-pages li.active > a {
    background: #D21f26;
}

.paginationjs .paginationjs-pages li {
    border: 1px solid #D21f26;
}

    .paginationjs .paginationjs-pages li > a:hover {
        background: #D21f2619;
    }

    .paginationjs .paginationjs-pages li.active > a:hover {
        background: #D21f26;
    }

    .paginationjs .paginationjs-pages li:last-child {
        border-right: 1px solid #D21f26;
        border-left: none;
    }

    .paginationjs .paginationjs-pages li:first-child {
        border-right: none;
    }

.cukoadmin-content > main > .container > div > div > ul.todo-list.item-list > li.pending > .corporate-head.personel-header > p > a {
    /*pointer-events: none !important;*/
    width: fit-content;
    background: none !important;
}

    .cukoadmin-content > main > .container > div > div > ul.todo-list.item-list > li.pending > .corporate-head.personel-header > p > a:hover {
        background: white !important;
    }

.personel-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    align-items: start;
}

    .personel-header small {
        background: white;
        color: #D21f26;
        font-size: 12px;
        padding: 1px 5px;
        border-radius: 5px;
        margin-left: 0px;
    }

.table-data .todo .todo-list.item-list .todo-list-edit .action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

    .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .tooltip {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: -40px;
        left: -5px;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        width: max-content;
    }

    .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .act-btn {
        outline: none;
        border: none;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        transition: 0.2s ease;
    }

        .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .act-btn i {
            font-size: 20px;
            display: flex;
            background-color: white;
            padding: 5px;
            border-radius: 5px;
            transition: 0.2s ease;
        }

            .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .act-btn i:hover {
                background: #ddd;
            }

        .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .act-btn:hover {
            cursor: pointer;
        }

            .table-data .todo .todo-list.item-list .todo-list-edit .action-buttons .act-btn:hover .tooltip {
                visibility: visible;
                opacity: 1;
                z-index: 9999;
            }

.table-data .todo .todo-list .todo-list-edit .corporate-link {
    font-size: 12px;
    color: #342E37;
}

    .table-data .todo .todo-list .todo-list-edit .corporate-link:hover {
        color: #D21f26;
        text-decoration: underline !important;
    }

.table-data .todo .todo-list.item-list .todo-list-edit .accounting-input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

    .table-data .todo .todo-list.item-list .todo-list-edit .accounting-input label {
        margin: 0px !important;
    }

    .table-data .todo .todo-list.item-list .todo-list-edit .accounting-input .form-check-input {
        margin-top: 0px !important;
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.35em;
        transition: 0.2s;
    }

        .table-data .todo .todo-list.item-list .todo-list-edit .accounting-input .form-check-input:focus {
            box-shadow: 0 0 0.15rem 0.25rem rgba(217, 31, 38, .25) !important;
        }

.table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 10px;
}

.confirm-cancel-list {
    background: white;
    display: flex;
    gap: 10px;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #342E3724;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
}

    .confirm-cancel-list .confirm-cancel-list-item {
        margin: 0;
        padding: 0;
        background: transparent;
    }

        .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
            font-size: 14px;
            color: #342E37;
            background: #342E3739;
            padding: 6px 16px;
            border-radius: 5px;
            transition: 0.2s ease;
            color: var(--white) !important;
            display: flex;
        }

            .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link.confirm:hover {
                background: var(--primary-hover-green);
            }

            .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link.cancel:hover {
                background: var(--hover-red);
            }

.list-item-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.success {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23000' fill-opacity='0' stroke-dasharray='60' stroke-dashoffset='60' d='M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='60;0'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.15s' values='0;0.3'/%3E%3C/path%3E%3Cpath fill='none' stroke-dasharray='14' stroke-dashoffset='14' d='M8 12L11 15L16 10'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='14;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.cancel {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-width='2'%3E%3Cpath fill='%23000' fill-opacity='0' stroke-dasharray='60' stroke-dashoffset='60' d='M5.63604 5.63603C9.15076 2.12131 14.8492 2.12131 18.364 5.63603C21.8787 9.15075 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C2.12132 14.8492 2.12132 9.15075 5.63604 5.63603Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='60;0'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.15s' values='0;0.3'/%3E%3C/path%3E%3Cpath fill='none' stroke-dasharray='18' stroke-dashoffset='18' d='M6 6L18 18'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='18;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.success-per {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath fill='%23000' fill-opacity='0' stroke-dasharray='60' stroke-dashoffset='60' d='M3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='60;0'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.15s' values='0;0.3'/%3E%3C/path%3E%3Cpath fill='none' stroke-dasharray='14' stroke-dashoffset='14' d='M8 12L11 15L16 10'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='14;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.cancel-per {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='%23000' stroke-linecap='round' stroke-width='2'%3E%3Cpath fill='%23000' fill-opacity='0' stroke-dasharray='60' stroke-dashoffset='60' d='M5.63604 5.63603C9.15076 2.12131 14.8492 2.12131 18.364 5.63603C21.8787 9.15075 21.8787 14.8492 18.364 18.364C14.8492 21.8787 9.15076 21.8787 5.63604 18.364C2.12132 14.8492 2.12132 9.15075 5.63604 5.63603Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.5s' values='60;0'/%3E%3Canimate fill='freeze' attributeName='fill-opacity' begin='0.8s' dur='0.15s' values='0;0.3'/%3E%3C/path%3E%3Cpath fill='none' stroke-dasharray='18' stroke-dashoffset='18' d='M6 6L18 18'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' begin='0.6s' dur='0.2s' values='18;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

.table-data .todo .todo-list .corporate-head {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .table-data .todo .todo-list .corporate-head .corporate-logo {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        overflow: hidden;
        object-fit: cover;
    }

    .table-data .todo .todo-list .corporate-head .corporate-name {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

.p-5-10 {
    padding: 5px 10px !important;
}

@keyframes error-bar {
    0% {
        background-color: var(--red);
    }

    50% {
        background-color: var(--hover-red);
    }

    100% {
        background-color: var(--red);
    }
}

@keyframes success-bar {
    0% {
        background-color: var(--primary-green);
    }

    50% {
        background-color: var(--primary-hover-green);
    }

    100% {
        background-color: var(--primary-green);
    }
}

.personal-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.error-bar {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    animation: error-bar 1s infinite;
    padding: 0px 7px;
    font-size: 12px;
}

.success-bar {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    animation: success-bar 1s infinite;
    padding: 0px 7px;
    font-size: 12px;
}

.notification-bar {
    color: #342E37;
    border-radius: 10px;
    width: 100%;
    padding: 20px 15px;
    font-size: 12px;
    margin-bottom: 24px;
}

    .notification-bar.no-documents {
        display: none;
        height: 0;
        overflow: hidden;
        transition: height 0.4s ease;
    }

        .notification-bar.no-documents.closed {
            height: 0;
        }

        .notification-bar.no-documents.open {
            display: block;
            height: auto;
            margin-bottom: 0px !important;
        }

.table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 60px;
}

    .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list {
        background: white;
        display: flex;
        gap: 10px;
        padding: 7px 5px;
        border-radius: 60px;
    }

        .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.table-data .todo .notification-bar p {
    margin-bottom: 0;
}

.g-5 {
    gap: 5px;
}

.g-10 {
    gap: 10px;
}

.g-15 {
    gap: 15px;
}

.g-20 {
    gap: 20px;
}

.g-25 {
    gap: 25px;
}

.pastel-blue {
    background: #D3EEFF;
}

.pastel-yellow {
    background-color: var(--light-yellow);
}

.pastel-orange {
    background-color: var(--light-orange);
}

.pastel-red {
    background-color: var(--light-red);
}

.pastel-green {
    background-color: var(--light-primary-green);
}

.pastel-grey {
    background-color: var(--grey);
}

.title-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: white;
    width: 100%;
    padding: 10px 20px;
    background: white;
    border-radius: 15px;
    margin-bottom: 20px;
}

    .title-head .user-head {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

        .title-head .user-head a {
            font-size: 12px;
            color: #212121;
            padding: 5px 10px;
            border-radius: 10px;
            background: #eee;
        }

        .title-head .user-head h4.form-title {
            margin-bottom: 0;
        }

    .title-head span {
        font-size: 14px;
    }

    .title-head .list-icon a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 20px;
        color: #212121;
        transition: 0.2s;
        border-radius: 10px;
        padding: 5px 10px;
    }

        .title-head .list-icon a:hover {
            background: #EEEEEE;
        }

.todo .profile-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.todo .all-profile .profile-box {
    height: 100%;
    min-width: 250px;
    border: 2px dashed #eee;
    border-radius: 15px;
    padding: 15px;
}

.todo .profile-box .profile-image {
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

    .todo .profile-box .profile-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.todo .profile-box .user-profile-id,
.todo .profile-box .user-profile-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: fit-content;
    text-align: center !important;
    padding: 10px 20px;
    background: #eee;
    border-radius: 10px;
}

.todo .profile-box .user-profile-contact {
    text-align: start;
}

    .todo .profile-box .user-profile-id .name,
    .todo .profile-box .user-profile-contact .name {
        margin: 0;
        font-weight: 600;
        font-size: 13px;
    }

    .todo .profile-box .user-profile-id .birthday,
    .todo .profile-box .user-profile-id .nation,
    .todo .profile-box .user-profile-contact .address,
    .todo .profile-box .user-profile-contact .phone {
        margin-bottom: 0;
        font-size: 11px;
    }

.todo .profile-info-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #eee;
    padding: 30px;
    border-radius: 10px;
    width: fit-content;
}

.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

    .modal-content .title {
        margin-bottom: 20px;
    }

        .modal-content .title h3 {
            margin: 0;
        }

@media (max-width: 768px) {
    .modal-content {
        width: 90%;
    }

        .modal-content .title {
            background: #eee;
            border-left: 5px solid #D21f26;
            border-radius: 5px;
            padding: 5px 20px;
            width: 100%;
        }

    .title-head {
        flex-direction: column;
    }

        .title-head .user-head {
            flex-direction: column;
            gap: 10px;
        }

    .todo .profile-box .user-profile-id {
        margin-bottom: 10px;
    }

    .todo .profile-info-box .info-label,
    .profile-info-box.profile .info-label {
        width: 100% !important;
    }

    .todo .profile-info-box {
        padding: 15px 0px;
    }

    .todo .all-documents .documents {
        flex-direction: column;
        gap: 10px;
    }

    .todo .all-documents .required-documents,
    .todo .all-documents .mis-inc-doc {
        width: 100%;
    }
}

@media (min-width: 600px) {
    .todo .profile-info-box {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.todo .profile-info-box .info-label,
.todo .profile-info-box.corporate .info-label:last-child {
    width: 45%;
}

    .todo .profile-info-box .info-label:last-child {
        width: 45%;
    }

.todo .profile-info-box.profile .info-label:last-child {
    width: 30%;
}

.todo .profile-info-box .info-label .label {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 13px;
}

.todo .profile-info-box .info-label .info {
    font-size: 11px;
    word-break: break-all;
}

.profile-info-box.profile {
    background: none;
    padding: 15px 0px;
}

    .profile-info-box.profile .info-label {
        /*padding: 5px;*/
        border-radius: 10px;
        background: #eee;
        width: 30%; /*30*/
        height: 90px; /*100*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    }

        .profile-info-box.profile .info-label.address {
            padding: 0px 15px;
            text-align: center;
        }

        .profile-info-box.profile .info-label.card-type {
            background-color: var(--light-primary-green);
        }

        .profile-info-box.profile .info-label p.label {
            font-size: 14px;
        }

        .profile-info-box.profile .info-label p.info {
            margin-bottom: 0;
            font-size: 12px;
        }

.muhasebe .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 60px;
}

    .muhasebe .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list {
        background: white;
        display: flex;
        gap: 10px;
        padding: 7px 5px;
        border-radius: 60px;
    }

        .muhasebe .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .muhasebe .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .muhasebe .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.firma-corporate .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 60px;
}

    .firma-corporate .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list {
        background: white;
        display: flex;
        gap: 10px;
        padding: 7px 5px;
        border-radius: 60px;
    }

        .firma-corporate .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .firma-corporate .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .firma-corporate .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.cukurova-page .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 60px;
}

    .cukurova-page .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list {
        background: white;
        display: flex;
        gap: 10px;
        padding: 7px 5px;
        border-radius: 60px;
    }

        .cukurova-page .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .cukurova-page .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .cukurova-page .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.personel .table-data .todo .todo-list .todo-list-edit {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

    .personel .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
        display: none;
        position: absolute;
        background: transparent;
        right: 15px;
        border-radius: 60px;
    }

    .personel .table-data .todo .todo-list .todo-list-edit:hover .todo-list-edit-table {
        display: block !important;
        transition: display 0.2s ease all;
    }

    .personel .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul {
        background: white;
        display: flex;
        grid-gap: 5px;
        padding: 5px;
        border-radius: 60px;
    }

        .personel .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .personel .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li a {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .personel .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table ul li a:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.mulki-amir .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table {
    display: block !important;
    position: absolute;
    background: transparent;
    right: 15px;
    border-radius: 60px;
}

    .mulki-amir .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list {
        background: white;
        display: flex;
        gap: 10px;
        padding: 7px 5px;
        border-radius: 60px;
    }

        .mulki-amir .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item {
            margin: 0;
            padding: 0;
            background: transparent;
        }

            .mulki-amir .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link {
                font-size: 14px;
                color: #342E37;
                background: #F5F5F5;
                padding: 6px 16px;
                border-radius: 60px;
            }

                .mulki-amir .table-data .todo .todo-list .todo-list-edit .todo-list-edit-table .confirm-cancel-list .confirm-cancel-list-item .confirm-cancel-list-item-link:hover {
                    background: #EAEAEA;
                    color: #342E37;
                }

.todo .all-documents {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 20px;
    height: 100%;
    width: 100%;
}

    .todo .all-documents .title {
        background: #eee;
        border-left: 5px solid #D21f26;
        border-radius: 5px;
        padding: 5px 20px;
        width: 100%;
    }

        .todo .all-documents .title h3 {
            margin-bottom: 0;
            font-size: 20px;
        }


    .todo .all-documents .notes-detail {
        background: #eee;
        border-radius: 10px;
        padding: 20px;
        font-size: 12px;
    }

        .todo .all-documents .notes-detail p {
            margin-bottom: 0;
        }

    .todo .all-documents .documents {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    .todo .all-documents .required-documents,
    .todo .all-documents .mis-inc-doc {
        background: #eee;
        border-radius: 10px;
        padding: 20px;
        width: 48%;
    }

    .todo .all-documents .mis-inc-doc {
        background: var(--light-hover-red);
        border: 2px dashed var(--primary-red);
    }

    .todo .all-documents .doc-title h4,
    .todo .all-documents .doc-title h4 {
        font-size: 13px;
        font-weight: 600;
    }

    .todo .all-documents .required-documents-box {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: 0;
    }

    .todo .all-documents .doc .doc-list {
        padding-left: 0;
    }

        .todo .all-documents .doc .doc-list .doc-list-item {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 10px;
            font-size: 11px;
        }

    .todo .all-documents .doc-list-item .form-check-input {
        margin-top: 0;
        margin-right: 5px;
        width: 1.3em;
        height: 1.3em;
        background: var(--primary-green);
    }

    .todo .all-documents .doc {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

        .todo .all-documents .doc .doc-list.incorrect {
            margin: 0;
        }

        .todo .all-documents .doc .doc-notes {
            margin-bottom: 0;
            font-size: 12px;
        }

        /* .todo .all-documents .doc .doc-list .doc-list-item::before {
	position: absolute;
	content: "";
	background: #342E37;
	width: 4px;
	height: 4px;
	border-radius: 3px;
	left: -15px;
} */

        .todo .all-documents .doc .doc-list .doc-list-item a {
            color: #342E37;
        }

.personel-confirm-cancel {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

    .personel-confirm-cancel p {
        margin-bottom: 0;
        font-size: 15px;
    }

    .personel-confirm-cancel .confirm-cancel-list {
        border: none;
        box-shadow: none;
    }


@media screen and (max-width: 768px) {
    #sidebar {
        width: 240px;
    }

    .cukoadmin-content {
        width: calc(100% - 60px);
        left: 240px;
    }

        .cukoadmin-content nav .nav-link {
            display: none;
        }

        .cukoadmin-content main .cukoadmin-head-title {
            padding: 10px;
            padding-bottom: 20px;
        }

            .cukoadmin-content main .cukoadmin-head-title .left h1 {
                font-size: 16px;
            }

            .cukoadmin-content main .cukoadmin-head-title .left h1 {
                width: max-content;
            }

            .cukoadmin-content main .cukoadmin-head-title .left .breadcrumb li a {
                font-size: 13px;
            }

        .cukoadmin-content main .table-data .todo {
            align-items: start;
        }

    .personel-confirm-cancel {
        flex-direction: column;
        gap: 10px;
        margin-top: 40px;
    }
}

@media screen and (max-width: 576px) {
    .cukoadmin-content nav form .form-input input {
        display: none;
    }

    .cukoadmin-content nav form .form-input button {
        width: auto;
        height: auto;
        background: transparent;
        border-radius: none;
        color: var(--dark);
    }

    .cukoadmin-content nav form.show .form-input input {
        display: block;
        width: 100%;
    }

    .cukoadmin-content nav form.show .form-input button {
        width: 36px;
        height: 100%;
        border-radius: 0 36px 36px 0;
        color: var(--light);
        background: var(--red);
    }

    .cukoadmin-content nav form.show ~ .notification,
    .cukoadmin-content nav form.show ~ .profile {
        display: none;
    }

    .cukoadmin-content main .box-info {
        grid-template-columns: 1fr;
    }

    .cukoadmin-content main .table-data .head {
        min-width: 420px;
    }

    .cukoadmin-content main .table-data .order table {
        min-width: 420px;
    }

    .cukoadmin-content main .table-data .todo .todo-list {
        min-width: 420px;
    }
}

.profile-box {
    padding: 3px 7px;
    border: 1px solid var(--bs-border-color);
    border-radius: 35px;
    gap: 10px;
    background: #f1f1f1;
}

.profile-name {
    display: none;
    position: absolute;
    content: "";
    top: 60px;
    right: 35px;
    background: white;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    font-size: .8em;
    transition: .2s;
}

.profile:hover .profile-name {
    display: flex;
}

.all-profile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 15px;
    height: 100%;
    width: 100%;
}

.cardTypeModal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.cardTypeModal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    animation: zoomIn 0.3s ease-in-out;
    cursor: grab;
}

@keyframes zoomIn {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
    }

.cardTypeModal-header,
.cardTypeModal-footer {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.cardTypeModal-footer {
    text-align: right;
}

.modal-btn {
    padding: 3px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin-top: 5px;
}

    .modal-btn:hover {
        background-color: #45a049;
    }

.incorrect-files {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    background: var(--light-primary-red);
    padding: 3px 7px;
    width: fit-content;
    border-radius: 5px;
}

    .incorrect-files .incorrect-files-name {
        margin: 0;
        font-size: 12px;
    }

    .incorrect-files .incorrect-files-address {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        color: #121212;
    }

        .incorrect-files .incorrect-files-address i {
            margin: 0;
        }

.error-body {
    position: fixed;
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(91.2deg, rgba(136, 80, 226, 1) 4%, rgba(16, 13, 91, 1) 96.5%);
    font-family: 'Poppins', sans-serif;
    color: white;
    letter-spacing: -5px;
}

    .error-body .image-container {
        position: relative;
        width: fit-content;
        min-height: 600px;
        overflow: hidden;
        background: #291844;
        border: 10px solid #9462e5;
        border-radius: 50px;
        padding: 0;
        margin: 0;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    }

    .error-body .background-image {
        position: absolute;
        content: "";
        right: -40px;
        bottom: -40px;
        height: 415px;
        width: 415px;
    }

    .error-body .topground-image {
        display: flex;
        flex-direction: row;
        -ms-flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 5px 15px;
        margin-top: 10px;
    }

        .error-body .topground-image img {
            max-width: 350px;
        }

    .error-body .text-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .error-body .text-container .title {
            display: flex;
            justify-content: center;
            align-items: start;
        }

            .error-body .text-container .title h2 {
                font-weight: 800;
                font-size: 5.7rem;
                margin-top: auto;
            }

    .error-body .header-text {
        display: flex;
        flex-direction: column;
        -ms-flex-direction: column;
        column-gap: 30px;
    }

        .error-body .header-text h4 {
            font-size: 6rem;
            line-height: 6.5rem;
            font-weight: 600;
        }

        .error-body .header-text p {
            font-size: 1rem;
            color: #f3eefc;
            letter-spacing: 0px;
        }

    .error-body .header-text-button {
        margin-top: 20px;
    }


        .error-body .header-text-button a {
            letter-spacing: 2px;
            text-transform: uppercase;
            text-decoration: none;
            color: white;
            font-weight: 500;
            font-size: .8rem;
            background: #9462e5;
            padding: 10px 25px;
            border-radius: 10px;
        }

            .error-body .header-text-button a:hover {
                background: #a073e8;
            }

.personal-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.personal-card {
    text-align: center;
    background: var(--admin-icon-mint-solid);
    height: 100px;
    width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 15px;
    overflow: hidden;
    box-sizing: border-box;
}

.personal-card-body {
    width: 100%;
    height: 40%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 12px;
    color: white;
}

    .personal-card-body p {
        margin: 0;
    }

.personal-card-footer {
    background: white;
    width: 100%;
    height: 60%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

    .personal-card-footer.price {
        flex-direction: column;
        line-height: 1.2;
    }

        .personal-card-footer.price .inner {
            font-size: 14px;
        }

.success-status-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
}

.success-status-button {
    width: 60px;
    height: 40px;
    padding: 0;
    margin: 0;
}

    .success-status-button button {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--grey);
        outline: none;
        width: 60px;
        height: 40px;
        margin: 0;
        border-radius: 10px;
        background: #342E3739;
        transition: 0.2s ease;
    }

        .success-status-button button .success,
        .success-status-button button .cancel {
            background: white;
        }

            .success-status-button button.success:hover {
                background: var(--admin-icon-mint-solid);
                padding: 3px;
            }

            .success-status-button button.cancel:hover {
                background: var(--admin-icon-grapefruit-solid);
            }


        .success-status-button button .success-per,
        .success-status-button button .cancel-per {
            background: white;
        }

            .success-status-button button.success-per:hover {
                background: var(--admin-icon-mint-solid);
                padding: 3px;
            }

            .success-status-button button.cancel-per:hover {
                background: var(--admin-icon-grapefruit-solid);
            }


.check-footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0;
    margin: 0;
}

    .check-footer .form-check-label {
        margin: 0;
    }

    .check-footer .form-check-input {
        margin: 0;
    }

        .check-footer .form-check-input:checked {
            background-color: var(--admin-icon-mint-solid) !important;
            border-color: var(--admin-icon-mint-solid) !important;
        }

        .check-footer .form-check-input:focus {
            border-color: rgba(55, 188, 155, .25) !important;
            box-shadow: 0 0 0 0.25rem rgba(55, 188, 155, .25) !important;
        }

.success[disabled], .cancel[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.success-per[disabled], .cancel-per[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.profile-picture-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: white;
    border: 1px solid #00000019;
    border-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
}

    .profile-picture-box span {
        text-align: center;
        font-size: 10px;
    }

    .profile-picture-box img {
        padding: 5px;
        /*margin-top: -23px;*/
    }



.corporate-head {
    display: flex;
    align-items: center;
}

    .corporate-head .select-person {
        margin-right: 10px;
    }

.table-data .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .table-data .head button {
        margin: 0 5px;
    }

.head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .head h3 {
        margin: 0;
    }

    .head .buttons {
        display: flex;
        gap: 10px;
    }

.styled-button {
    background-color: #007bff; /* Primary color */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.styled-success {
    background-color: #198754;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.styled-warning {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.styled-button:hover {
    background-color: #0056b3; /* Darker shade of primary color */
    transform: translateY(-2px);
}

.styled-success:hover {
    background-color: #146c43; /* Darker shade of primary color */
    transform: translateY(-2px);
}

.styled-warning:hover {
    background-color: #b02a37; /* Darker shade of primary color */
    transform: translateY(-2px);
}

.styled-button:active {
    background-color: #004080; /* Even darker shade of primary color */
    transform: translateY(0);
}



.password-box {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.toggle-password {
    position: absolute;
    content: "";
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #00000077;
    cursor: pointer;
    transition: .2s ease;
}

.toast-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex !important;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    display: none;
}

.toast {
    position: absolute;
    max-width: 350px;
    height: 35px;
    bottom: 180px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    font-size: 13px;
}

.n-title {
    display: block;
    font-size: 1.5em;
    margin: 15px auto;
    width: fit-content;
}

.i-taahhut:hover, i-taahhut .form-check-label.firma-label:hover {
    cursor: pointer;
}

.i-taahhut .firma-check .firma-label {
    font-size: 1.2em;
}

    .i-taahhut .firma-check .firma-label:hover {
        cursor: pointer;
    }

    .i-taahhut .firma-check .form-check-input.firma-check-input {
        height: 15px;
        width: 15px;
    }

.i-paragraph {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}


.i-done {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    padding: 5px;
    background: #d21f26;
    border: 1px solid #ff4545;
    color: white;
    border-radius: 3px;
    height: 12px;
    width: 12px;
}

    .i-done::before {
        font-family: "Font Awesome 6 Free";
        content: "\f00c";
        display: inline-block;
        padding-right: 3px;
        vertical-align: middle;
        font-weight: 900;
    }

    @media (max-width: 768px) {
        .i-paragraph {
            display: block;
        }

        .i-done {
            display: inline-flex;
        }
            .i-done::before {
                font-size: 8px;
                width: 15px;
            }

    }

.app-password {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 17a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2m6 3V10H6v10zm0-12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

    .checkbox-item:hover {
        background-color: #d21f264a;
        border-color: #d21f26;
        box-shadow: 0 4px 8px rgba(210, 31, 38, 0.2);
        cursor: pointer;
    }

    .checkbox-item label {
        margin: 0;
    }

    .checkbox-item:hover label {
        cursor: pointer;
    }

.form-check-input {
    margin-right: 10px;
    accent-color: #007bff;
}

.form-title {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}


.cond-button {
    display: flex;
}

#password-requirements {
    width: 100%;
}

    #password-requirements li {
        font-size: .75em;
    }

.tdesign--money {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 12.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7M10.5 16a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0'/%3E%3Cpath fill='%23000' d='M17.526 5.116L14.347.659L2.658 9.997L2.01 9.99V10H1.5v12h21V10h-.962l-1.914-5.599zM19.425 10H9.397l7.469-2.546l1.522-.487zM15.55 5.79L7.84 8.418l6.106-4.878zM3.5 18.169v-4.34A3 3 0 0 0 5.33 12h13.34a3 3 0 0 0 1.83 1.83v4.34A3 3 0 0 0 18.67 20H5.332A3.01 3.01 0 0 0 3.5 18.169'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}



.form-file-display {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    max-width: 500px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.file-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.file-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-right: 10px;
    word-break: break-word;
}

.file-actions {
    display: flex;
    align-items: center;
}

.file-link {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #007bff;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

    .file-link i {
        margin-right: 5px;
        font-size: 16px;
    }

    .file-link:hover {
        color: #0056b3;
        text-decoration: underline;
    }

.btn-danger {
    display: flex;
    align-items: center;
    background-color: #dc3545;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn-danger i {
        margin-right: 5px;
        font-size: 16px;
    }

    .btn-danger:hover {
        background-color: #c82333;
    }

.form-file-display-fns {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}



.app-office-update {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.111 13.255c.185-.17.277-.255.389-.255s.204.085.389.255l.713.657c.086.079.129.119.182.138c.054.02.112.018.23.013l.962-.038c.248-.01.372-.014.457.057s.102.194.135.44l.132.986c.016.114.023.17.051.22c.028.048.073.083.163.154l.776.61c.192.152.288.227.307.335s-.046.212-.175.42l-.525.847c-.06.097-.09.146-.1.2s.002.111.026.223l.208.978c.052.24.077.36.022.456s-.172.134-.405.21l-.926.301c-.11.036-.165.054-.209.09c-.043.037-.07.089-.123.192l-.452.871c-.115.223-.173.334-.278.372s-.22-.01-.452-.106l-.888-.368c-.109-.045-.163-.068-.22-.068s-.111.023-.22.068l-.888.368c-.232.096-.347.144-.452.106s-.163-.15-.278-.372l-.452-.871c-.054-.103-.08-.155-.123-.191s-.099-.055-.209-.09l-.926-.302c-.233-.076-.35-.114-.405-.21s-.03-.215.022-.456l.208-.978c.024-.112.036-.168.026-.222a.6.6 0 0 0-.1-.2l-.526-.848c-.128-.208-.193-.312-.174-.42s.115-.183.307-.334l.776-.61c.09-.072.135-.107.163-.156s.035-.105.05-.22l.133-.985c.033-.245.05-.369.135-.44s.209-.067.457-.057l.963.038c.117.005.175.007.229-.013c.053-.02.096-.059.182-.138zM6.5 9h-1m5 0h-1m-3-3h-1m5 0h-1m9 9h-1m1-4h-1M14 8v14h4c1.886 0 2.828 0 3.414-.586S22 19.886 22 18v-6c0-1.886 0-2.828-.586-3.414S19.886 8 18 8zm0 0c0-2.828 0-4.243-.879-5.121C12.243 2 10.828 2 8 2s-4.243 0-5.121.879C2 3.757 2 5.172 2 8v3' color='%23000'/%3E%3C/svg%3E");
    /*background-color: currentColor;*/
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.app-office-psv {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' d='m4 6.5l3 3l3-3m-3-6v9m-3.5 4h7'/%3E%3C/svg%3E");
    /*background-color: currentColor;*/
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.firma-check {
    background: white;
    height: 42px;
    border-radius: 5px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
    font-size: .8em;
    gap: 10px;
    margin: 0;
    border: 1px solid #ccc;
}

    .firma-check .firma-label {
        font-size: 1em;
        margin: 0;
        color: #888;
    }

    .firma-check .form-check-input.firma-check-input {
        margin: 0;
        transition: 0.2s;
        border-color: #d21f26;
        border-width: 2px;
    }

.thName {
    text-align: end;
    font-weight: 700;
}