:root {
    --black: #000000;
    --white: #ffffff;
    --yellow: #FFD000;
    --light-blue: #7F9BFF;
    --dark-orange: #FF7C25;
    --light-orange: #FFDDB4;
    --text-green: #589327;
    --heading-color: #344767;
    --bg-icons: #2c47db;
    --bg-grey: linear-gradient(310deg,#e9ecef,#e9ecef);
    --bg-green: #EDFFDF;
    --bg-light-yellow: #FFFAE2;
    --bg-light-grey: #f5f5f5;
    --border-light-grey: #E7E7E7;
    --body-background: #F6F6F7;
    --dark-blue: #022293;
    --sea-blue: #0FFFDB;
    --blue: #3240FF;
    --font-color: #000047;
    --gradient-diamond: radial-gradient(circle, #F2F2F7, #B3C4FF);
    --super-light-grey: #F8F8F8;
    --dark-grey: #9D9D9D;
    --bg-light-green: #D6FFB4;
    --bg-light-blue: #E7ECFF;
    --bg-light-red: #FFE5E5;
    --text-light-red: #FF5070;
}

@font-face {
    font-family: 'Manrope';
    src: url(../../fonts/Manrope/Manrope-VariableFont_wght.ttf) format('truetype');
}

body {
    min-height: 100%;
    background-color: var(--body-background);
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--font-color);
}


.dropzone .dz-preview .dz-image img {
    display: block;
    height: 120px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

html{
    -ms-overflow-style: -ms-autohiding-scrollbar;
    overflow: scroll;
    overflow-x: hidden;
}

.row>* {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}


a {
    transition: background 0.2s, color 0.2s;
}
a:hover,
a:focus {
    text-decoration: none;
}

h1 {
    color: var(--black);
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
}

button:focus {
    outline:0 !important;
}

label{
    font-size: 12px;
    font-weight: 400;
    color: #3d465a;
}

input{
    font-weight: 300;
    width: 100%;
    padding: 5px 10px;
    /*color: var(--light-blue);*/
    color: var(--black);
    height: 46px;
    border-radius: 30px;
    border: 1px solid var(--border-light-grey);
    /*border: 0.7px solid transparent;*/
    /*background:*/
    /*        linear-gradient(white, white) padding-box,*/
    /*        var(--gradient-diamond) border-box;*/
    /*background-origin: border-box;*/
    /*background-clip: padding-box, border-box;*/
}
input::placeholder {
    /*color: var(--light-blue);*/
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}

.btn-secondary {
    display: flex;
    align-items: center;
    padding: 10px;
    border: none;
    border-radius: 30px;
    background-color: var(--white);
    color: var(--light-blue);
}

.pageBreadCrumb .right {
    display: flex;
    gap: 8px;
}

.pageBreadCrumb .search {
    position: relative;
}
.pageBreadCrumb .search input {
    min-width: 300px;
    padding-left: 36px;
}
.pageBreadCrumb .search img {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #888;
    pointer-events: none; /* allows clicking through */
}
.pageBreadCrumb .global-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 40px);
    max-height: 420px;
    overflow-y: auto;
    background: var(--white);
    border: 1px solid var(--border-light-grey);
    border-radius: 12px;
    box-shadow: 0 16px 35px rgba(61, 70, 90, 0.12);
    padding: 8px 0;
    z-index: 30;
}
.pageBreadCrumb .global-search-module {
    padding: 10px 16px 6px;
    color: #929eb8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.pageBreadCrumb .global-search-item,
.pageBreadCrumb .global-search-empty {
    display: block;
    padding: 9px 16px;
    color: #3d465a;
    font-size: 14px;
}
.pageBreadCrumb .global-search-item:hover {
    background: #f7f9fc;
    color: var(--light-blue);
}

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

.pageBreadCrumb .avatar {
    height: 46px;
    width: 46px;
    border-radius: 50%;
    background-color: var(--yellow);
}
.pageBreadCrumb .avatar img {
    height: 46px;
    width: 46px;
    border-radius: 50%;
    background-color: var(--yellow);
}
.pageBreadCrumb .avatar span {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}

.pageBreadCrumb .bell, .pageBreadCrumb .logout {
    display: flex;
    padding: 10px;
    height: 46px;
    width: 46px;
    border-radius: 50%;
    border: 0.7px solid transparent;
    background:
            linear-gradient(white, white) padding-box,
            var(--gradient-diamond) border-box;
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.pageBreadCrumb .bell.unread {
    background: var(--text-light-red);
    border-color: var(--text-light-red);
}

.pageBreadCrumb .bell img, .pageBreadCrumb .logout img {
    height: 25px;
    width: 25px;
}

hr{
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #eeeeee73;
}


select{
    background-color: var(--light-blue);
    color: var(--white);
    border-radius: 30px;
    border: solid 1px var(--light-blue);
    width: 100%;
    height: 46px;
    text-align: center;
    padding: 0 30px;
}


textarea{
    resize: none;
    width: 100%;
    min-height: 125px;
    border: solid 1px var(--border-light-grey);
    padding: 15px;
    border-radius: 30px;
}




/* CUSTOM SELECT2 */

.select2{
    width: 100% !Important;
}

.select2-container{
    z-index: 100;
}


.select2-container--default .select2-selection--single{
    border-radius: 2px !Important;
    height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 42px !Important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 42px !important;
}


.missingData{
    background-color: #f1847629 !Important;
    transition: .3s;
}


.tableID{
    width: 20px;
    text-align: center;
}

.tableAction{
    width: 30px;
}

.width-fill {
    width: -webkit-fill-available;
}


/* BUTTONS */

.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yellow);
    color: var(--black);
    height: 46px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 30px;
    min-width: 200px;
}

.btn-primary img {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

.btn-primary:hover {
    background-color: var(--yellow);
    color: var(--white);
}

.btn-third {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DCDCDC;
    color: var(--black);
    height: 46px;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 30px;
    min-width: 200px;
}

.btn-third img {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

.btn-third:hover {
    background-color: var(--dark-grey);
    color: var(--white);
}

.btn-reject {
    background-color: var(--white);
    border: 1px solid var(--black);
}

.btn-reject:hover {
    background-color: var(--dark-grey);
    border: 1px solid var(--black);
}

.btn-up {
    margin-top: -12px;
}

.card-blue-bg {
    background-image: url(../../images/admin/blue_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 140px;
    border: none !important;
}

.profile-banner {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.profile-banner .data {
    margin-left: 210px;
}

.profile-banner .data .job {
    color: var(--black);
    font-size: 24px;
    margin-bottom: 35px;
    margin-top: -10px;
}

.profile-banner .profile-picture {
    position: absolute;
    overflow: hidden;
    top: 75px;
    display: flex;
    margin-left: 50px;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    border: var(--body-background) solid 8px;
}

.profile-banner .profile-picture img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.extra-up{
    margin-top: 20px;
}

.btn-outline-primary{
    width: 192px;
    height: 42px;
    border: none;
    background-color: #ffffff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: .3s all;
    color: #00448d;
    text-transform: uppercase;
    border: 1px solid var(--bg-icons);
}

.btn-outline-primary:is(:hover, :active){
    border: 1px solid var(--black) !important;
    color: var(--black) !important;
    background-color: #fff !important;
}

.btn-new{
    width: 120px;
    height: 42px;
}

.btn-back{
    width: 120px;
    height: 42px;
}



/* ------- */


#wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
    position: relative;
}

/* NAVIGATION */


.tab-content > .active {
}

#sidebar-wrapper {
    z-index: 1000;
    position: absolute;
    left: 230px;
    width: 0;
    height: 97%;
    margin-left: -205px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--white);
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
    /*background-image: linear-gradient(to bottom, #012953, #0086b2);*/
    transition: all 0.5s ease;
    border-radius: 35px;
    border: solid 1px var(--border-light-grey);
}

#wrapper.toggled #sidebar-wrapper {
    width: 230px;
}

.sidebar-brand {
    position: absolute;
    /*top: 0;*/
    top: 55px;
    width: 230px;
    text-align: center;
    /*padding: 20px 0;*/
    /*margin-top: 20px;*/
}
.sidebar-brand img{
    width: auto;
    max-width: 70%;
}

.sidebar-brand div{
    font-size: 13px;
    font-weight: 500;
    color: var(--heading-color);
    margin-top: 10px;
}

.sidebar-brand input{
    border: none;
    width: 202px;
    height: 28px;
    padding-left: 25px;
    border-radius: 14px;
    background-color: #ffffff30;
    margin-top: 30px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
}

.sidebar-brand input::placeholder{
    color: #ffffff4a;
}

.settings_nav{
    position: absolute;
    top: 90%;
    width: 230px;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-bottom: 30px;
    /* overflow: scroll; */
    display: block;
    text-decoration: none;
    color: #f0f1f6;
    font-weight: 500;
    font-size: 13px;
	background-color: white;
}

.settings_nav:before {
	content: '';
	width: 100%;
	height: 100px;
	background: linear-gradient(to bottom, #ffffff00, #ffffff);;
	display: block;
	position: absolute;
	transform: translateY(-100%);
	top: 1px;
	pointer-events: none;
}

.settings_nav div {
    width: 220px;
    line-height: 44px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 5px;
    margin-left: 10px;
}

.settings_nav i {
    float: left;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: block;
    font-size: 20px;
    margin-top: 5px;
    color: var(--black);
}

.settings_nav span {
    transition: .3s;
    margin-left: 8px;
    color: var(--heading-color);
}

.settings_nav:hover{
    color: #ffffff;
}

.settings_nav:hover span{
    margin-left: 12px;
}

.sidebar-nav {
    position: absolute;
    /*top: 230px;*/
    width: 230px;
    margin: 0;
    padding: 0;
    list-style: none;
    padding-bottom: 110px;
    height: 100%;
    overflow: scroll;
    padding-top: 30px;
}



.sidebar-nav .title_box{
    width: 220px;
    line-height: 44px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-left: 5px;
    margin-left: 10px;
}

.sidebar-nav div.open ul{
    display: block;
}

.sidebar-nav div.open ul li {
    line-height: 27px;
}

.sidebar-nav div.open ul li a{
    font-size: 12px;
}


:is(.sidebar-nav, .settings_nav) i{
    float: left;
    border-radius: 30%;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    display: block;
    font-size: 20px;
    margin-top: 5px;
    background-color: var(--bg-icons);
    background-image: var(--bg-grey);
    color: var(--font-color);
    box-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12);
}


.sidebar-nav, .active i, .settings_nav.active i{
    background-image: var(--bg-icons);
    color: var(--white);
}

.sidebar-nav > li{
    /*margin-bottom: 13px;*/
}

.sidebar-nav > li a {
    font-family: Manrope, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
}

.sidebar-nav > li .menu-item:hover {
    background-color: var(--bg-light-grey);
}

.sidebar-nav > li.active .menu-item {
    background-color: var(--bg-light-yellow);
}

.sidebar-nav > li.active .menu-item .title {
    color: var(--yellow);
}

/* LEFT ACCENT */
.sidebar-nav > li.active .menu-item::before {
    background-color: var(--yellow);
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 48px;
    width: 5px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.menu-item {
    display: flex;
    position: relative;
    align-items: center;
    padding: 12px 20px;
    width: 90%;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.menu-item img {
    height: 24px;
    width: 24px;
    margin-right: 8px;
}
.menu-item .title {
    color: var(--black);
}
.menu-item .title.dashboard {
    color: var(--dark-blue);
}


.sidebar-nav > li.settings_list{
    position: fixed;
    bottom: 20px;
}

.sidebar-nav > .active{
    text-decoration: none;
    color: var(--black);
}

.sidebar-nav > .active a{
    color: var(--black);
}


.sidebar-nav > .active .dropdown-custom-menu a{
    color: var(--heading-color);
    text-decoration: none;
    font-size: 12px;
}
.sidebar-nav > .active .dropdown-custom-menu a:hover{
    text-decoration: none !important;
}

.sidebar-nav > .active .dropdown-custom-menu li {
    line-height: 27px;
}


.sidebar-nav .active a span {
    color: var(--dark-blue);
}

.sidebar-nav .active .title_box{
    /*position: relative;*/
}

.sidebar-nav .active .title_box::before {
    /*    content: "";
        position: absolute;
        background-color: transparent;
        bottom: 100%;
        right: 0;
        height: 150%;
        width: 20px;
        border-bottom-right-radius: 25px;
        box-shadow: 0 20px 0 0 #f0f1f6;*/
}

.sidebar-nav .active .title_box::after {
    /*    content: "";
        position: absolute;
        background-color: transparent;
        top: 100%;
        right: 0;
        height: 150%;
        width: 20px;
        border-top-right-radius: 25px;
        box-shadow: 0 -20px 0 0 #f0f1f6;*/
}



/*.sidebar-nav .listMarker:hover{
    text-decoration: none;
    background: #f0f1f6;
}*/

.sidebar-nav a span{
    transition: .3s;
    margin-left: 8px;
    color: var(--font-color);
    font-size: 14px;
}

.sidebar-nav .listMarker:hover a span{
    margin-left: 12px;
}

.sidebar-nav li .dropdown-custom-menu li:hover{
    text-decoration: underline;

}


/*.sidebar-nav > li:hover,

.sidebar-nav > .active{
    text-decoration: none;
    color: #3d465a;
    background: #f0f1f6;
}*/

/*.sidebar-nav > li:hover a,
.sidebar-nav > .active a{
    color: #3d465a;
}*/


/*.sidebar-nav > li.active::before{
    content: "";
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 50px, #f0f1f5 52px);
}*/



#navbar-wrapper {
    width: 100%;
    position: absolute;
    z-index: 2;
}
#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -250px;
}
#navbar-wrapper .navbar {
    border-width: 0 0 0 0;
    background-color: #f0f1f6;
    font-size: 24px;
    margin-bottom: 0;
    border-radius: 0;
}
#navbar-wrapper .navbar a {
    color: #757575;
}
#navbar-wrapper .navbar a:hover {
    color: #F8BE12;
}

.sidebar-bottom{
    padding: 0px 10px;
    position: absolute;
    bottom: 20px;
    width: 100%;
}

.sidebar-bottom img{
    width: 18px;
}

.sidebar-bottom a{
    color: #f0f1f6;
    font-weight: 500;
    font-size: 13px;
    padding: 0px 20px;
}

/* END OF NAVIGATION */


#content-wrapper {
    width: 100%;
    position: absolute;
    padding-right: 25px;
    top: 100px;
}
#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -230px;
}

#wrapper {
    padding-left: 275px;
}

#wrapper.toggled {
    padding-left: 60px;
}

#sidebar-wrapper {
    width: 230px;
}

#wrapper.toggled #sidebar-wrapper {
    width: 60px;
}

#wrapper.toggled #navbar-wrapper {
    position: absolute;
    margin-right: -190px;
}

#wrapper.toggled #content-wrapper {
    position: absolute;
    margin-right: -190px;
}

#navbar-wrapper {
    position: relative;
}

#wrapper.toggled {
    padding-left: 60px;
}

#content-wrapper {
    position: relative;
    top: 0;
}

#wrapper.toggled #navbar-wrapper,
#wrapper.toggled #content-wrapper {
    position: relative;
    margin-right: 60px;
}

@media (min-width: 768px) and (max-width: 991px) {
    #wrapper {
        /*padding-left: 60px;*/
        padding-left: 0px;
    }

    #sidebar-wrapper {
        width: 0;
        border: none;
    }

    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }

    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }

    #navbar-wrapper {
        position: relative;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #content-wrapper {
        position: relative;
        top: 0;
    }

    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}

@media (max-width: 767px) {
    #wrapper {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 0;
        border: none;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }
    #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
    }

    #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
    }

    #navbar-wrapper {
        position: relative;
    }

    #wrapper.toggled {
        padding-left: 250px;
    }

    #content-wrapper {
        position: relative;
        top: 0;
    }

    #wrapper.toggled #navbar-wrapper,
    #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
    }
}

/* END OF BASIC STRUCTURE */
.pageBackground{
    position: absolute;
    top: 0px;
    right: 0px;
}
.pageBreadCrumb{
    height: 78px;
    background-color: var(--white);
    margin: 25px 25px 15px 25px;
    border-radius: 50px;
    padding: 15px 18px 15px 36px;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--border-light-grey);
    /*padding: 17px;*/
    /*border-radius: 14px;*/
    /*color: #929eb8;*/
    /*font-size: 10px;*/
    /*font-weight: 500;*/
    /*margin-bottom: 30px;*/
    /*text-transform: uppercase;*/
    /*box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);*/
}
.pageBreadCrumb a{
    color: #929eb8;
}
.pageTitle{
    font-size: 24px;
    font-weight: 500;
    color: #3d465a;
    margin-bottom: 25px;
	min-height: 45px;
}


.nav.nav-pills{
    border-radius: 22px;
    background-color: var(--white);
    width: fit-content;
    /*text-transform: uppercase;*/
}

.nav-pills>li.nav-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-grey);
    padding: 10px 20px;
    transition: .3s;
    cursor: pointer;
    border-radius: 25px;
    display: flex;
    vertical-align: middle;
}

.nav-pills>li.nav-link img {
    display: flex;
    align-self: center;
    width: 18px;
    height: 18px;
    margin-right: 4px;
}

.nav-pills>li.nav-link.active, .nav-pills>li.nav-link.active:focus, .nav-pills>li.nav-link.active:hover{
    /*box-shadow: 0 1px 16px 0 rgba(197, 197, 197, 0.5);*/
    background-color: var(--dark-grey);
    color: var(--white);

}

.table.dataTable thead .sorting {
    background-image: url(../../images/admin/icons/caret-up-down-grey.svg);
    background-repeat: no-repeat;
    background-position: right 16.5px;
    background-size: 18px;
}

.table.dataTable thead .sorting_asc {
    background-image: url(../../images/admin/icons/caret-up-grey.svg);
    background-repeat: no-repeat;
    background-position: right 17.5px;
    background-size: 14px;
}

.table.dataTable thead .sorting_desc {
    background-image: url(../../images/admin/icons/caret-down-grey.svg);
    background-repeat: no-repeat;
    background-position: right 17.5px;
    background-size: 14px;
}

div.dataTables_wrapper div.dataTables_length select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 80%;
    padding-right: 1.5rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 30% !important;
    height: 30px !important;
    padding: 5px 8px !important;
    width: 30px !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 8px !Important;
}


.dataTables_wrapper .dataTables_length > label > select {
    border-radius: 8px !important;
    padding-left: 8px !important;
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0;
    border-radius: 20px;
    border: none;
    background-color: var(--bg-light-blue);
    color: var(--light-blue);
}

.dataTables_wrapper .dataTables_filter {
    margin-left: 0 !important;
}

div.dataTables_wrapper div.dataTables_length select {
    border: none;
    border-radius: 20px !important;
    background-color: var(--bg-light-blue);
    color: var(--light-blue);
    margin-left: 0;
}

div.dataTables_wrapper div.dataTables_length::after {
    content: "";
    position: absolute;

    right: 10px;
    top: 50%;
    transform: translateY(-50%);

    width: 10px;
    height: 10px;

    background: url(../../images/admin/icons/down-arrow-blue.svg) no-repeat center;
    background-size: contain;

    pointer-events: none;
}

.tableHeader {

}

.tableHeaderTitle{
    font-size: 18px;
    font-weight: 500;
    color: #3d465a;
    float: left;
}



.tableheaderButton{
    cursor: pointer;
    background-color: var(--bg-icons);
    color: var(--white);
    border-radius: 8px;
    padding: 0 25px;
    height: 42px;
    line-height: 42px;
    font-weight: 500;
    transition: .3s all;
    max-width: fit-content;
	font-size: 14px;
}

.tableheaderButton:hover {
    filter: brightness(0.8);
}

.tableheaderButton span {
    transition: .3s all;
}

.tableheaderButton label {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    position: relative;
    right: 8px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition:  transform .8s ease-in-out;
    font-weight: 500;
    cursor: pointer;
}

.tableheaderButton:not(.no-animation):hover label {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}


.tableheaderButton img{
    margin-top: -4px;
    margin-right: 10px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition:  transform .8s ease-in-out;
}


.tableheaderButton:hover img{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.tablefooterButton{
    cursor: pointer;
    background-color: var(--bg-icons);
    color: var(--white);
    border-radius: 8px;
    padding: 11px 25px;
    font-weight: 500;
    transition: .3s all;
}

.tablefooterButton:hover img{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.tablefooterButton img{
    margin-top: -4px;
    margin-right: 10px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition:  transform .8s ease-in-out;
}

.tableBody {
}

.table{
    margin-bottom: 0px;
}

.table>thead>tr>th{
    border-bottom: solid 0.5px #e6e6ed;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
    border-bottom: solid 0.5px #e6e6ed;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
    font-size: 14px;
    padding: 15px;
    padding-left: 25px;
}

.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
    color: var(--dark-grey);
    border: none;
    /* B4_CAPSLOCK semibold */
    font-family: Manrope;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    text-transform: uppercase;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: none;
    border-radius: 50% !important;
    background-color: var(--bg-light-blue);
    color: var(--light-blue) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    border-radius: 50% !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-light-blue);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    background: transparent;
    color: var(--dark-grey) !important;
}

table.dataTable tbody>tr>td {
    border: none;
}

.table-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.table-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-light-blue);
    flex: 0 0 36px;
}

.table-user-initials {
    background-color: var(--yellow);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
}

.user-initials {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--yellow);
    color: var(--white);
    font-size: 36px;
    font-weight: 700;
}

.customMargin1{
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: -51px;
    z-index: 1;
    position: relative;
}

.tableFooter{
    padding: 18px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: var(--white);
}

.nav-pills-more {
    display: -webkit-box;
    overflow-y: scroll;
    max-width: 100%;
}

.nav-pills-more li {
    float: none;
}


.checkboxContainer {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: 400;
    padding-top: 11px;
}
.checkboxContainer .text{
    padding-top: 10px;
}

/* Hide the browser's default checkbox */
.checkboxContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 10px;
    left: 0;
    height: 21px;
    width: 21px;
    border-radius: 2px;
    border: 1px solid #929eb8;
}

.checkboxContainer.reservationCheckbox{
    padding-top: 10px;
}

/* On mouse-over, add a grey background color */
.checkboxContainer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
/*.checkboxContainer input:checked ~ .checkmark {
    background-color: #3b6a8d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
    left: 7px;
    top: 1px;
    width: 6px;
    height: 14px;
    border: solid #3b6a8d;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.tablePersonStands div {
    height: 38px;
    background-repeat: no-repeat;
    color: #ffffff;
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    margin-right: 10px;
}

.tableEditIcon {
    display: flex;
    justify-content: center;
    width: 35px;
    height: 35px;
	padding: 8px;
    transition: .3s;
    border: solid 1px var(--dark-grey);
    border-radius: 50%;
    margin-left: 10px;
    background-color: transparent;
    font-size: 16px;
}

.tableEditIcon:hover{
    /*background-color: #f0f1f6;*/
    cursor: pointer;
}

.tableEditIcon img{
    width: 18px;
    height: 18px;
}

.table-actions {
    display: flex;
    justify-content: flex-end;
}

.taskUserRectangle{
    color: #ffffff;
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    font-size: 10px;
    font-weight: 500;
    padding: 6px;
    float: right;
    margin-top: -25px;
}


.card{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    /*box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.01);*/
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
    border: none;
    margin-bottom: 1.5rem;
}

.card-header {
    display: flex;

    color: var(--black, #000);

    /* Subheading/SBH1_semibold */
    font-family: Manrope;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px; /* 116.667% */

    margin-bottom: 24px;
}

.card-header img {
    margin-right: 8px;
}

.card-block{
    flex: 1 1 auto;
    padding: 1.25rem;
}


.navigationContainer{
    margin-bottom: 20px;
}



/* JODIT CUSTOM */

.jodit_toolbar {
    position: relative;
    left: 0;
    top: 0;
    margin: 0!important;
    padding: 10px 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    list-style: none!important;
    font-size: 0;
    background: rgba(216,216,216,0.15) !Important;
    box-shadow: none !Important;
    z-index: 5;
    min-height: 15px !important;
    border: none !important;
}

.jodit .jodit_workflow{
    margin-top: 15px;
}

.jodit_statusbar{
    display: none !Important;
}

.jodit_toolbar {
    padding: 10px !important;
}


.jodit_container:not(.jodit_inline) .jodit_workplace{
    border: none !Important;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    margin-top: 20px;
}

.dropdown-custom-menu {
    list-style: none;
    width: 100%;
    display: none;
    padding-left: 60px;
}

.display-dropdown{
    display: block;
}

.card-header h4{
    font-weight: 400;
    color: #2c304d;
    font-size: 16px;
}


.newEmployeesEquipment{
    position: absolute;
    right: 20px;
    top: 10px;
}

.daterangepicker.dropdown-menu {
    z-index: 10000;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #328bc4;
    border-color: #14549a;
    color: #fff;
}

.singleEmployedHeader{
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    color: #3d465a;
    background: #f0f1f6;
}

.singleEmployedCard{
    padding: 5px;
    border-bottom: 1px solid #f0f1f6;
    transition: .3s;
}

.singleEmployedCard:hover{
    background-color: #f0f1f6;
    cursor: pointer;
}

.dropzone {
    min-height: 150px;
    border: dotted 2px #f4f3f7;
    background: white;
    border-radius: 4px;
    padding: 20px 20px;
}

.dropzone.dz-clickable .dz-message{
    cursor: pointer;
    background-image: url(../../images/icons/dashboard/upload.svg) !Important;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 122px;
    margin-top: -45px;
    padding-bottom: 27px;
    background-size: 60px;
}


.employedCard{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 15px 1px rgba(52, 40, 104, 0.01);
    border: none;
    margin-bottom: 1.5rem;
}

.card-user .image {
    height: 130px;
}

.employedCard .image {
    overflow: hidden;
    height: 115px;
    position: relative;
    background-color: #fbfbfd;
}

.card-user .card-body {
    min-height: 240px;
}

.employedCard .card-body {
    padding: 15px 15px 10px;
}

.card-user .author {
    text-align: center;
    text-transform: none;
    margin-top: -77px;
}

.card-user .avatar {
    width: 124px;
    height: 124px;
    border: 1px solid #fff;
    position: relative;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    left: 50%;
    margin-left: -62px;
    background-repeat: no-repeat;
}


.card-user .author a+p.description {
    margin-top: -7px;
}


.card-user h5{
    font-size: 24px;
    font-weight: 500;
    color: #3d465a;
}

.employedCardSignature{
    width: 100px;
}


.button-delete{
    margin-right: 20px;
}


/*
 * Presentational Styles
 */


/*
 * Switcher Styles
 */



.switcher {
    display: inline-block;
    height: 30px;
    margin-top:3px;
    padding: 4px;
    background: #fff;
    border-radius: 2px;
    width: 200px;
    border-radius: 30px;
    border: solid 1px #ddd;
    position: relative;
}

.switcher__input {
    display: none;
}

.switcher__label {
    float: left;
    width: 50%;
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    position: inherit;
    z-index: 10;
    transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.switcher__toggle {
    position: absolute;
    float: left;
    height: 30px;
    width: 50%;
    font-size: 12px;
    line-height: 30px;
    cursor: pointer;
    background-image: linear-gradient(to bottom, #00448d, #00a2d7);
    border-radius: 30px;
    left: 0px;
    top: 0px;
    transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
    color: #ffffff;
}

.switcher__input:checked + .switcher__label {
    color: #fff;
}

.switcher__input--yang:checked ~ .switcher__toggle {
    left: 100px;
}


.btn-access{
    width: auto;
    margin-top: 25px;
}

#about-Manu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    color: white;
    cursor: default;
    background-color: rgba(0, 0, 0, 0.9);
    transition: all .8s;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px inset;
    pointer-events: none;
}
#about-Manu:hover {
    background-color: black;
}
#about-Manu.active {
    opacity: 1;
    pointer-events: all;
}
#about-Manu .manu {
    font-size: 14px;
}
#about-Manu .manu .fa-heart {
    color: red;
    animation: pulse .8s infinite alternate ease-in;
}
#about-Manu:hover .fa-heart {
    animation: pulse .2s infinite alternate ease-out;
}
#about-Manu a {
    padding: 5px;
    color: silver;
    text-decoration: none;
}
#about-Manu a:nth-child(1) {
    margin-left: auto;
}
#about-Manu a:nth-last-child(1) {
    margin-left: auto;
}
#about-Manu a:nth-last-child(1):hover {
    color: red;
}
#about-Manu a:nth-last-child(n+2):hover {
    background-color: rgba(255, 255, 255, 0.2);
}
#about-Manu *,
#about-Manu *:after,
#about-Manu *::before {
    outline: 0;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1.2);
    }
}
.fa-caret-right {
    transition: all 0.4s ease;
    float: right;
}

.active .fa-caret-right {
    transform: rotate(90deg);
}

.panel-title{
    color: #2c304d;
}

.panel-title a {
    text-decoration: none;
}

.active .panel-heading {
    background-color: white;
    border-bottom: 0;
}
.active .panel-body {
    border: 0 !important;
}

.panel-heading {
    margin-top: 20px;
}

.panel-group {
    margin-top: 20px;
    margin-bottom: 5px;
}

.panel-hr {
    margin-top: 40px;
}

.panel-hr-header {
    margin-top: 38px;
}

#products-form .card-block {
    padding-bottom: 0;
}

#products-form hr {
    position: absolute;
    width: 100%;
    background-color: #f0f1f6;
    height: 8px;
    left: 0;
    z-index: 1;
}

#properties-view hr {
    position: absolute;
    width: 100%;
    background-color: #f0f1f6;
    height: 8px;
    left: 0;
    z-index: 1;
}

.mt-3 {
    margin-top: 7px;
}

#add-video p {
    font-size: 12px;
    color: black;
    margin-bottom: 5px;
    padding: 6px;
}

.panel {
    border-width:0;
    box-shadow:none;
}

.panel-body {
    border-top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    content: '';
    background: url(../../images/admin/icons/down-arrow.svg);
    height: 10px !important;
    width: 10px !important;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    top: 3px;
    border: none !important;
    transform: translate(-50%,-50%);
    margin: 0 !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: translate(-50%,-50%) rotate(180deg);
}

.select2-container--default .select2-selection--single {
    border: 1px solid #ebecf4 !Important;
    border-radius: 4px;
}

.select2-container--default .select2-selection--multiple{
    border: solid #e9eaf3 1px !Important;
    outline: 0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: solid #e9eaf3 1px !Important;
    outline: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #f0f1f6 !important;
    padding: 5px 10px !Important;
    border: none !Important;
}


.admin-top-home{
    position: absolute;
    right: 80px;
    top: 30px;
    z-index: 10;
    transition: .3s;
}

.admin-top-home i{
    color: #3d465a;
    font-size: 20px;
}

.admin-top-home:hover{
    transform: scale(1.1);
}

.admin-top-logout{
    position: absolute;
    right: 45px;
    top: 30px;
    z-index: 10;
    transition: .3s;
}
.admin-top-logout i{
    color: #3d465a;
    font-size: 20px;
}

.admin-top-logout:hover{
    transform: scale(1.1);


}


/* DASHBOARD  */

.dashboardCard{
    height: 165px;
    border-radius: 8px;
    background-image: linear-gradient(to bottom, #00448d, #00a2d7);
    color: #ffffff;
    box-shadow: 0 10px 39px 0 #929eb8;
}


.dashboardCard .topSection{
    height: 75px;
    border-bottom: solid 0.5px #dde1ee8f;
    padding: 20px;
}

.dashboardCard .topSection img{
    float: left;
    width: 33px;
}

.dashboardCard .topSection .title{
    margin-left: 50px;
    margin-top: 11px;
    font-weight: 700;
    font-size: 13px;
}

.dashboardCard .bottomSection{
    padding: 20px;
}

.dashboardCard .bottomSection .title{
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
}

.dashboardCard .bottomSection .subtitle{
    line-height: 1.5;
    font-size: 16px;
}

.pageBackgroundImage {
    position: absolute;
    right: 10%;
    opacity: 0.9;
}

/* END OF DASHBOARD */


#sortable-images {
    list-style: none;
    padding-left: 0px;
}

#sortable-images li{
    margin-bottom: 20px;
    background: #f0f1f6;
    border-radius: 5px;
    padding: 10px;
}

#sortable-images li .image-box{
    height: 100px;
    text-align: center;
    background-color: #000000;
    border-radius: 5px;
    padding: 10px;
}

#sortable-images li .image-box img{
    height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

#sortable-images li:hover{
    cursor: grab;
}

#sortable-images li .text-box{
    padding: 10px;
    padding-top: 30px;
}

#sortable-images2 {
    list-style: none;
    padding-left: 0px;
}

#sortable-images2 li{
    margin-bottom: 20px;
    background: #f0f1f6;
    border-radius: 5px;
    padding: 10px;
}

#sortable-images2 li .image-box{
    height: 100px;
    text-align: center;
    background-color: #000000;
    border-radius: 5px;
    padding: 10px;
}

#sortable-images2 li .image-box img{
    height: 100%;
    max-width: 100%;
    width: auto;
    margin: 0 auto;
}

#sortable-images2 li:hover{
    cursor: grab;
}

#sortable-images2 li .text-box{
    padding: 10px;
    padding-top: 30px;
}


.timepicker {
    background-color: #F2F2F2;
    color: #8C8C8C;
    border: 1px solid #B5B5B5;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
    z-index: 2147483647;
}
.timepicker .clock {
    width: 200px;
    height: 200px;
    position: relative;
    padding: 5px;
}
.timepicker .done {
    cursor: pointer;
    text-align: center;
    text-wrap: nowrap;
    line-height: 34px;
    font-size: 14px;
    display: block;
    border-top: 1px solid #DEDEDE;
}
.timepicker .done:hover {
    background-color: #DEDEDE;
    color: #848484;
}
.timepicker .meridiem {
    position: absolute;
    bottom: 5px;
    width: 32px;
    height: 32px;
    background-color: white;
    line-height: 32px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}
.timepicker .meridiem.selected {
    background-color: #D6F0F9;
    color: #6D828C;
}
.timepicker .meridiem.am {
    left: 5px;
}
.timepicker .meridiem.pm {
    right: 5px;
}
.timepicker .bubble {
    position: absolute;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}
.timepicker .bubble:hover {
    background-color: #D6F0F9;
    color: #6D828C;
}
.timepicker .bubble.selected {
    color: #D6F0F9;
    background-color: #33B4E4;
}
.timepicker .unit {
    top: 5px;
    background-color: white;
}
.timepicker .unit.hour {
    left: 5px;
}
.timepicker .unit.minute {
    right: 5px;
}
.timepicker .face {
    width: 100%;
    height: 100%;
    background-color: white;
    border: none;
    border-radius: 50%;
    position: relative;
}
.timepicker .face:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    background-color: #33B4E4;
    border-radius: 50%;
    content: "";
    display: block;
}
.timepicker .hand {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    pointer-events: none;
    background-color: #8C8C8C;
}
.timepicker .hand.minute {
    margin: -30% 0 0 -1px;
    padding: 30% 1px 0;
    border-radius: 1px 1px 0 0;
}
.timepicker .hand.hour {
    margin: -23% 0 0 -2px;
    padding: 23% 2px 0;
    border-radius: 2px 2px 0 0;
}
.timepicker .hand.selected {
    background-color: #33B4E4;
}
.timepicker .time {
    background-color: #F2F2F2;
}


.fc-event, .fc-event:hover {
    color: #fff;
    text-decoration: none;
}

tr:first-child>td>.fc-day-grid-event {
    border: none;
    margin-top: 2px;
    padding: 7px;
    border-radius: 22px;
    padding-left: 35px;
    padding-right: 10px;
    color: #3d465a !Important;
    background-color: #ffffff !Important;
    box-shadow: 0 1px 16px 0 rgba(197, 197, 197, 0.5) !important;
    cursor: pointer;
}

.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end{
    border: none;
    margin-top: 2px;
    padding: 7px;
    border-radius: 22px;
    padding-left: 35px;
    padding-right: 10px;
    color: #3d465a !Important;
    background-color: #ffffff !Important;
    box-shadow: 0 1px 16px 0 rgba(197, 197, 197, 0.5) !important;
    cursor: pointer;
}


.activeTeacher:before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    background-color: #5db75c;
    border-radius: 50%;
    margin-left: -24px;
    margin-top: 0px !Important;
}

.busyTeacher:before{
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    background-color: #fe185e;
    border-radius: 50%;
    margin-left: -24px;
    margin-top: 0px !Important;
}

.confirmedTeacher:before{
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    background-color: #e2ce3d;
    border-radius: 50%;
    margin-left: -24px;
    margin-top: 0px !Important;
}

.canceledTeacher:before{
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    background-color: #c9cec9;
    border-radius: 50%;
    margin-left: -24px;
    margin-top: 0px !Important;
}

.fc-day-header.fc-widget-header{
    background: #fbfbfd;
}

.select2{
    width: 100%;
}

/* MAP */

.leaflet-right .leaflet-control{
    display: none;
}

.leaflet-draw-draw-circlemarker{
    display: none !important;
}

.leaflet-draw-draw-marker{
    display: none !important;
}

.reservationTextarea{
    width: 46px;
    height: 31px;
    min-height: 20px;
    position: relative;
    padding: 0px;
    text-align: center;
    padding-top: 11px;
    border: none;
    border-bottom: 1px solid black;
    border-radius: 0px;
}

.checkboxText{
    display: inline-block;
    margin-left: 30px;
    margin-top: -20px;
}

.termTitle{
    margin-bottom: 20px;
}

#ReservationInput{
    background: #fbfbfd;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
}

.userWaitingCircle{
    background: #bf2626;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    float: left;
    margin-right: 4px;
    margin-top: 5px;
}

.course-image{
    height: 200px;
    text-align: center;
}

.course-image img{
    height: 100%;
    width: auto;
    max-width: 100%;
}

.areaBtn{
    width: auto;
    position: absolute;
    z-index: 10000;
    right: 100px;
    margin-top: 13px
}

.navigationMenuImg{
    display: none;
}
.navigationMobileMenuClose {
    display: none;
}

.orderStatus:before{
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    background: #e9eaf3;
    margin-right: 20px;
    border-radius: 50%;
    margin-left: -20px;
    margin-top: 4px;
}

.orderStatus.paidOrder:before{
    background-color: #62b162;
}

.orderStatus.waitingOrder:before{
    background-color: #8db5d2;
}

.orderStatus.canceledOrder:before{
    background-color: #f83900;
}


.orderStatus.posponedOrder:before{
    background-color: #ec9b20;
}

.orderStatus.shippedOrder:before{
    background-color: #d261df;
}

.orderStatus.acceptedOrder:before{
    background-color: #e89c5a;
}

.orderStatus.returnedOrder:before{
    background-color: #8db5d2;
}

.orderStatus.orderStatusView{
    padding-left: 20px;
}

.orderStatus.orderStatusView:before{
    margin-left: -17px;
}

.choosen{
    box-shadow: 0 0px 10px rgb(1, 92, 135);
}

@media screen and (max-width: 991px) {
    .pageBackgroundImage{
        display: none;
    }

    .pageBackground{
        z-index: -1;
    }

    .navigationMobileMenuClose {
        width: 34px;
        height: 34px;
        position: absolute;
        right: 0;
        margin: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
    }

    .navigationMenuImg{
        display: block;
        /*background-color: #3e475b;*/
        background-color: #d8d8d8;
        width: 34px;
        height: 34px;
        text-align: center;
        position: absolute;
        z-index: 1008;
        /*top: 8px;*/
        /*left: 20px;*/
        top: 23px;
        left: 17px;
        border-radius: 50%;
        cursor: pointer;
    }

    .navigationMenuImg img{
        width: 19px;
        margin-top: 10px;
    }

    .openMobileNav{
        width: 250px !Important;
    }

    .pageBreadCrumb {
        margin-left: 50px;
    }
}


.usersNotesCard{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f1f6;
}

.usersNotesCard .timestamp, .usersNotesCard .userId{
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
}

.usersNotesCard .text{
    margin-top: 10px;
}

.orders_view_list{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.orders_view_list .single_status{
    display: inline-block;
    margin-left: 30px;
}

.orders_view_list li{
    padding: 5px;
    border-bottom: 1px solid #f0f1f6;
}

.orders_view_list a{
    float: right;
    margin-right: 10px;
}

.customButton1{
    width: 100%;
    border: none;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    color: #00448d;
    height: 35px;
    margin-bottom: 10px;
}

.downloadInvoicesButton{
    width: 192px;
    height: 42px;
    border: none;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    color: #00448d;
}

.downloadInvoicesButton:hover{
    box-shadow: 0 2px 27px 1px rgba(0, 0, 0, 0.12);
}

.terms-container [type="checkbox"]:not(:checked),.terms-container [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}
.terms-container [type="checkbox"]:not(:checked) + label,.terms-container [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 1.95em;
    cursor: pointer;
}
.terms-container [type="checkbox"]:not(:checked) + label:before,.terms-container [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.3em;
    height: 1.3em;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
.terms-container [type="checkbox"]:not(:checked) + label:after,.terms-container [type="checkbox"]:checked + label:after {
    content: '\2713\0020';
    position: absolute;
    top: 0.25em;
    left: .3em;
    font-size: 1em;
    line-height: 1;
    color: #000000;
    transition: all .2s;
}
.terms-container [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
.terms-container [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}
.terms-container [type="checkbox"]:disabled:not(:checked) + label:before,.terms-container [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}
.terms-container [type="checkbox"]:disabled:checked + label:after {
    color: #999;
}
.terms-container [type="checkbox"]:disabled + label {
    color: #aaa;
}
.terms-container [type="checkbox"]:checked:focus + label:before,.terms-container [type="checkbox"]:not(:checked):focus + label:before {
    border: 1px solid #000000;
}

.secondHeaderButton{
    margin-right: 20px;
    margin-top: 10px;
}

.sortableProducts{
    list-style: none;
    padding: 0px;
    margin: 0px;
    max-height: 60vh;
    overflow: scroll;
}

.sortableProducts li{
    background-color: #f0f1f6;
    margin-bottom: 3px;
    padding: 5px;
    padding-left: 15px;
    cursor: grab;
}

.sortableProducts li span{
    margin-right: 20px;
    width: 90px;
    border-right: 1px solid;
    display: inline-block;
}

.courses_images_box{
    height: 80px;
    width: 80px;
    background-position: center;
    background-size: cover;
}

#sortableQuestions {
    list-style: none;
    padding-left: 0px;
}

#sortableQuestions li section {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #fbfbfd;
    border-radius: 5px;
    margin-bottom: 10px;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
    padding: 15px 15px;
    cursor: pointer;
    border-bottom: 1px solid #e9ebf3;
    font-size: 14px;
    cursor: grab;
}

.phaseSingleBoxContent {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    display: none;
    padding: 10px;
}


.sortableActivities {
    list-style: none;
    padding-left: 0px;
}

.sortableActivities li {
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    margin-top: 5px;
    border: solid 1px #eeeeee;
    padding: 15px;
}

.add_answer_button{
    font-size: 14px;
    display: inline-block;
    margin-right: 20px;
}

.add_answer_button img{
    width: 27px;
    margin-right: 10px;
}

.customList1 {
    list-style: none;
    padding-left: 0px;
}

.customList1 li section {
    position: relative;
    width: 100%;
    height: auto;
    background-color: #fbfbfd;
    border-radius: 5px;
    margin-bottom: 10px;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
    padding: 15px 15px;
    cursor: pointer;
    border-bottom: 1px solid #e9ebf3;
    font-size: 14px;
    cursor: grab;
}

/* CUSTOM FOR TOOLTIPS */

.action_table div{
    display: inline-block;
    margin-right: 5px;
}

.action_table div a{
    color: #3d465a;
}

.dashboard-card{
    border-radius: 14px;
    background-color: #ffffff;
    padding: 8px 20px;
    margin-bottom: 20px;
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

.dashboard-card p.final-price {
    font-size: 20px;
    color: var(--heading-color);
    margin: 0;
}

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

.img-box {
    background-color: var(--bg-icons);
    padding: 10px;
    border-radius: 30%;
    box-shadow: 0 0.3125rem 0.625rem 0 rgb(0 0 0 / 12%);
}

.img-box i {
    font-size: 26px;
    color: var(--white);
}

.dashboard-card label{
    font-size: 12px;
    color: #616161;
    font-weight: 700;
}

.dashboard-card p{
    font-size: 32px;
    color: #000000;
}

.dashboard-card p .img_box{
    display: inline-block;
    margin-top: 8px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-image: linear-gradient(to bottom, #00448d, #00a2d7);
    vertical-align: top;
    margin-right: 15px;
    position: relative;
}

.dashboard-card p .img_box i{
    font-size: 20px;
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sidebar-brand img{
    width: 35%;
    margin-top: 30px;
}

.dashboard_first_card{
    background-color: var(--white);
}

.dashboard_first_card ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}

.dashboard_first_card ul li{
    font-size: 12px;
    color: var(--heading-color);
    font-weight: 700;
    margin-bottom: 5px;
}

.dashboard_first_card ul li a{
    font-size: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

.content_video_box{
    width: 100%;
    height: 300px;
}

.post_img_box{
    height: 300px;
    margin: 0 auto;
    text-align: center;
}

.post_img_box img{
    height: 100%;
    width: auto;
    max-width: 100%;
}

.unseen_questions{
    font-size: 9px;
    position: absolute;
    color: #ffffff;
    background: #034c76;
    min-width: 13px;
    height: 13px;
    border-radius: 50%;
    line-height: 13px;
}

.card_header_button{
    top: 20px;
    position: absolute;
    right: 10px;
    font-size: 15px;
}

.card_header_button img{
    width: 24px;
    margin-top: -2px;
    vertical-align: top;
}

.btn-custom1{
    margin-right: 0px;
    position: absolute;
    right: 0px;
    top: 10px;
    width: auto;
}

.btn-custom2{
    margin-right: 0px;
    width: auto;
    margin-top: 24px;
}

.gift_box{
    display: none;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
    background: #94b3d1;
    border: 1px solid #92b4d1;
    color: #fff;
}

.btn-success {
    color: #fff;
    background-color: #02416b;
    border-color: #00507b;
}

.settings_posts .author {
    padding: 10px;
    font-size: 12px;
    margin-bottom: 30px;
}

.settings_posts .author p{
    font-weight: 700;
    margin: 0px;
}

.settings_posts .content_video_box {
    width: 100%;
    height: 290px;
}

.settings_posts .cta1{
    width: 100%;
    height: 42px;
    border: none;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 12%);
    font-size: 14px;
    font-weight: 500;
    transition: .3s;
    color: #00448d;
    display: block;
    text-align: center;
    margin-top: 10px;
    line-height: 42px;
}

.settings_posts .cta1:hover{
    box-shadow: 0 2px 27px 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
}


ul.custom-legends{
    border: 1px solid #f0f1f6;
    list-style-type: none;
    padding-left: 0px;
    font-size: 12px;
    width: 40%;
    float: right;
}

ul.custom-legends li{
    border: 1px solid #f0f1f6;
    list-style-type: none;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: left;
}

ul.custom-legends li span{
    display: block;
    width: 100%;
}

ul.custom-legends li div{
    display: inline-block;
    width: 100%;
}


ul.custom-legends li .first{
    width: 60%;
}

ul.custom-legends li .second{
    width: 6%;
    position: absolute;
    right: 10%;
}

ul.custom-legends li .third{
    width: 6%;
    position: absolute;
    right: 10px;
}

ul.custom-legends .dot{
    border-radius: 50px;
    height: 15px;
    width: 15px;
    position: absolute;
    right: 18px;
    margin-top: 2px;
}


.language_input{
    width: 90%;
}

.change_lan{
    width: 50px;
    background-color: white;
    float: right;
    margin-right: 110px;
    margin-top: 5px;
    z-index: 1;
    position: relative;
    text-align: center;
    padding-left: 10px;
}

.export_cta{
    font-weight: 500;
    cursor: pointer;
    font-size: 12px;
}

.export_cta img {
    width: 16px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.export_cta .export_img{
    width: 35px;
    height: 35px;
    background-color: #3d4658;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-top: -10px;
    margin-right: 10px;
}

/*#do_legend{
   height:62px;
}

#do_legend{
    width:100%;     
}

#do_legend> ul{
    padding: 0;
    text-align: center;
}
 

#do_legend {   
  width:100%;
  bottom:10%;
}
#do_legend li {
    cursor: pointer;
    margin: 4px 3px;
    display: inline-table;
}
#do_legend li span {
    position: relative;
    padding: 3px 10px;
    border-radius: 13px;
    color: white;
    z-index: 2;
    font-size: 11px;
}

#do_legend{
    height: 62px;
    overflow-y: auto;
}

.donut-area{
    height:calc(100% - 62px)
}*/

.cancel_users_searct_cta{
    float: left;
    position: absolute;
    margin-top: 9px;
    margin-left: 10px;
}

.cancel_users_searct_cta img{
    width: 15px;
}


.ltv_list{
    padding: 20px;
    padding-top: 0px;
    margin-top: 0px;
}

.change_ltv{
    width: 12px;
    height: 12px;
    background-color: #c4c4c9;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: top;
    margin-top: 4px;
}


.change_ltv_green{
    background-color: #62b162;
}



.loader{

}


.big-circle {
    width: 60px;
    height: 60px;
    border: 5px solid #ffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-color: #02517c #eff0f5 #007ca7 #012b55;
    animation: bigcircle 1.2s linear infinite;
}

.small-circle {
    position: relative;
    width: 30px;
    height: 30px;
    border: 5px solid #ffff;
    border-radius: 50%;
    border-color: #fff #fff transparent #fff;
}

@keyframes bigcircle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


.marketing_img{
    height: auto;
    margin: 30px;
    max-width: 100%;
    max-height: 130px;
}

.settings_page{

}

.second_nav{
    border-radius: 8px;
    background-color: #ffffff;
    padding: 0px;
    margin-bottom: 25px;
    list-style: none;
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

.second_nav li{
    color: #3d465a;
    padding: 10px 22px;
    border-bottom: 1px solid #e9eaf3;
}

.second_nav li:last-child {
    border-bottom: none;
    border-bottom-left-radius: 7px;
}

.second_nav li:first-child {
    border-top-left-radius: 7px;
}

.second_nav li a{
    color: #3d465a;
    font-size: 13px;
}

.second_nav li a i{
    font-size: 22px;
    vertical-align: top;
    margin-top: -2px;
    margin-right: 5px;
}

.second_nav li a img{
    width: 20px;
    vertical-align: top;
    margin-right: 8px;
}


.second_nav .active_nav{
    border-left: 3px solid var(--bg-icons);
}

.second_nav li.active_nav a{
    color: var(--bg-icons);
    font-weight: 500;
}

.caret {
    border: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.caret:after {
    content: '';
    background-image: url(../../images/admin/icons/down-arrow.svg);
    height: 10px;
    width: 10px;
    display: inline-block;
    background-repeat: no-repeat;
    position: absolute;
    right: -10px;
    top: -3px;
}

.rotateIcon:after {
    transform: rotate(180deg);
    top: -8px;
    right: -78px;
}

.third_nav{
    background-color: #ffffff;
    padding: 0px;
    margin: 0px;
    list-style: none;
    margin-top: 20px;
}

.third_nav li{
    color: #3d465a;
}

.generated_btn{
    margin-top: 25px;
    width: auto;
}


.settings_page .tableHeader{
    margin-top: 0px;
}

.label_body{
    padding: 20px;
}

.extra_text{
    font-size: 10px;
    margin-top: -5px;
    margin-bottom: 10px;
    display: inline-block;
}

.label_body .nav-pills{
    margin-bottom: 30px;
}

.text_box{
    padding: 10px 0px;
}

.text_box .title{
    font-weight: 700;
    margin-bottom: 20px;
}

.product_images_box{
    height: 100px;
    margin-top: 20px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
}

.btn{
    line-height: 42px;
    padding: 0 12px;
}

.display_list{
    font-size: 12px;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.display_list li i{
    font-size: 18px;
    margin-right: 5px;
    margin-top: 2px;
    vertical-align: text-bottom;
}

.display_list li i.la-check-circle{
    color: green;
}


.table-secondary-data{
    font-size: 12px;
}

.table-secondary-data span{
    font-weight: 700;
}

.table_title{
    font-size: 13px;
    margin-bottom: 5px;
}

.roles_box{
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: solid 1px #eeeeee;
}

.roles_box h3{
    font-size: 18px;
    margin: 0px;
    margin-bottom: 10px;
    font-weight: 700;
}

.share{
    width: 10px;
}


.second_nav li a:hover{
    color: var(--bg-icons);
}

.dashboard-card p.final_price{
    font-size: 28px;
    margin-top: 3px;
}

.dashboard-card p.final_price .img_box{
    vertical-align: top;
    margin-top: 5px;
}


.nav-tabs>li>a{
    color: #3d465a;
}

.nav-tabs{
    margin-bottom: 10px;
}

.payment_type_list{
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
}

.payment_type_list li{
    display: inline-block;
}

.payment_type_list [type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment_type_list .img {
    cursor: pointer;
    background-size: 80px;
    width: 128px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    transition: .3s;
    border-radius: 25px;
}

/*.payment_type_list [type=radio]:checked + .img {
    cursor: pointer;
    box-shadow: 0 1px 16px 0 rgb(197 197 197 / 50%);
}*/

.payment_type_list li.active .img{
    cursor: pointer;
    box-shadow: 0 1px 16px 0 rgb(197 197 197 / 50%);
}


.multi-block{
    background-color: #ffffff;
    margin-top: -8px;
}


:is(input, textarea)[disabled]{
    background-color: #f0f1f6;
    cursor: not-allowed !important;
}

.tag_img{
    margin-right: 5px;
    width: 16px;
}

.label-img{
    vertical-align: top;
    margin-top: -5px;
    margin-right: 5px;
    height: 30px;
    width: 30px;
}

.tag_img_single{
    vertical-align: top;
    margin-top: 4px;
    margin-right: 7px;
    width: 24px;
}

.select2_img{
    width: 20px;
    vertical-align: top;
    margin-left: 5px;
    height: 20px;
}

.ingridients_btn{
    margin-top: 20px;
    cursor: pointer;
}

.ingridients_btn img {
    margin-top: -4px;
    margin-right: 10px;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.ingridients_btn:hover img{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

.recipe_box{
    background-color: #fbfbfd;
    padding: 10px 20px;
    border-radius: 11px;
    margin-top: 20px;
}

.custom_list_2{
    margin: 20px;
    margin-top: 30px;
    padding: 0px;
}


.subcategories{
    margin-left: 30px;
}

.product_box{

}

.product_box .img_box{
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #ffffff;
}

.product_box .content{
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    margin-top: 3px;
}

.edit_package_quantity{
    margin-bottom: 10px;
}

.edit_package_quantity label{

}

.edit_package_quantity input{

}

.edit_package_quantity span{
    display: block;
    font-size: 16px;
    margin-top: 6px;
}

.custom_package_button{
    border: 1px solid#f0f1f6;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.btn-in-line{
    vertical-align: top;
}

.btn-back.btn-in-line{
    margin-right: 5px;
}


#ProductDiscountData{
    min-height: 150px;
}

.newsletters_img{
    height: 200px;
    max-width: 100%;
    width: auto;
}

.order_list{
    list-style: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f1f6;
    padding-bottom: 10px;
}

.flagged_show_label{
    margin-top: 22px;
}


.products_categories_wrap .checkboxContainer{
    font-size: 12px;
    margin-bottom: 5px;
}


.order_status_list{
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.order_status_list li{
    padding: 10px;
}

.order_status_list li .title{
    font-weight: 700;
}



.order_status_list .active_status{
    background-color: #f0f1f6;
    border-radius: 4px;
}

.order_status_list > li:not(.active_status) {
	background-color: #f9f9f9;
	border-radius: 4px;
}


.order_status_list li a{
    display: block;
    width: max-content;
    height: 35px;
    border: none;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 12%);
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    color: #00448d;
    text-transform: uppercase;
    margin-left: auto;
    padding: 0 20px;
    line-height: 35px;
}

.order_status_list li a:hover{
    box-shadow: 0 2px 27px 1px rgba(0, 0, 0, 0.12);
}


.dataTables_wrapper{
    overflow: scroll !Important;
}

.la-slider:before {
    content: '';
    background: url(../../images/admin/slider.svg);
}

.sliderIcon {
    margin-right: 0 !important;
}

.sidebar-nav .active .sliderIcon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(344deg) brightness(112%) contrast(101%);
}

.tree-category{
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 0 22px;
    margin-bottom: 3px;
}

.preview-structure {
    padding: 10px 0 0 22px;
    font-size: 12px;
    color: black;
}

.tree-subcategory{
    font-size: 14px;
    padding: 0 24px;
    padding-bottom: 11px;
}

.tree-subcategory li::before {
    content: '';
    background-image: url(../../images/admin/dark-blue-circle.svg);
    height: 11px;
    width: 11px;
    display: inline-block;
    margin: 0 5px;
}

#subcategories-title:before {
    content: '';
    background-image: url(../../images/admin/dark-blue-circle.svg);
    height: 11px;
    width: 11px;
    display: inline-block;
}

.properties-list {
    padding: 0 16px;
}

.properties-list:before {
    content: '';
    background-image: url(../../images/admin/light-blue-circle.svg);
    height: 11px;
    width: 11px;
    display: inline-block;
    margin: 0 5px;
}

.tree-filter {
    font-size: 14px;
    padding: 0px 121px;
    position: relative;
    bottom: 36px;
}

.tree-filter div {
    position: relative;
    left: 19px;
    bottom: 1px;
}

.tree-filter:before {
    content: "";
    background-image: url(../../images/admin/down-right-arrow.svg);
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
    left: 14px;
    top: 16px;
}



#custom-select .select2-container--default .select2-selection--multiple {
    background-color: #EEEEEE;
    pointer-events: none;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f0f1f6 !important;
    padding: 5px 10px ! Important;
    border: none ! Important;
}

/* PANEL */

.switch {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 53px;
    height: 26px;
    border-radius: 30px;
    bottom: 6px;
    left: 2px;
    margin: 0;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch input:checked + .slider {
    background-color: var(--light-blue);
}

.switch input:checked + .slider:before {
    background: white;
    transform: translateX(27px);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}

.switch .label {
    position: absolute;
    white-space: nowrap;
}

.switch .label.right {
    left: 40px;
    margin-left: 10px;
    color: black;
    font-size: 14px;
    font-weight: 400;
    top: 1px;
}

.label_box p {
    margin: 6px 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    border-radius: 30px;
    background-color: #d8d8d8;
}

.switch .slider:before:hover {
    background-color: white;
}

.btn.active, .btn:active {
    box-shadow: none;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}

.label-box {
    width: 65%;
    max-height: 35px;
    margin-left: 16px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(213, 213, 213, 0.5);
}

.default-label {
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-grey);
}

.panel-default {
    padding: 0;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.panel-group .panel {
    border-radius: 0;
}

/*.panel-group button {
    pointer-events: none;
}*/

.panel-body {
    padding: 0;
}

.panel-heading {
    position: relative;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-heading .default-label {
    margin: 0;
}

/* BTN-TOGGLE */

.btn-toggle {
    margin: 0 4rem;
    padding: 0;
    position: relative;
    border: none;
    height: 1.5rem;
    width: 3rem;
    border-radius: 1.5rem;
    color: #6b7381;
    background: #d8d8d8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
    outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
    line-height: 1.5rem;
    width: 4rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    transition: opacity 0.25s;
}

.btn-toggle > .handle {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 1.125rem;
    background: #fff;
    transition: left 0.25s;
}
.btn-toggle.active {
    transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
    left: 1.6875rem;
    transition: left 0.25s;
}
.btn-toggle.active:before {
    opacity: 0.5;
}
.btn-toggle.active:after {
    opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
    line-height: -0.5rem;
    color: #fff;
    left: 0.4125rem;
    width: 2.325rem;
}
.btn-toggle.btn-sm:before {
    text-align: right;
}
.btn-toggle.btn-sm:after {
    text-align: left;
    opacity: 0;
}
.btn-toggle.btn-sm.active:before {
    opacity: 0;
}
.btn-toggle.btn-sm.active:after {
    opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
    display: none;
}
.btn-toggle:before,
.btn-toggle:after {
    color: #6b7381;
}
.btn-toggle.active {
    background-color: var(--sea-blue);
}
.btn-toggle.btn-lg {
    margin: 0 5rem;
    padding: 0;
    position: relative;
    border: none;
    width: 44px;
    height: 22px;
    border-radius: 34px;
    margin: 0 8px;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
    outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
    line-height: 2.5rem;
    width: 5rem;
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    transition: opacity 0.25s;
}
.btn-toggle.btn-lg > .handle {
    position: absolute;
    left: 4px;
    top: 3px;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #fff;
    transition: left 0.25s;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}
.btn-toggle.btn-lg.active {
    transition: background-color 0.25s;
    box-shadow: none;
    margin: 0 8px;
}
.btn-toggle.btn-lg.active > .handle {
    left: 23px;
    transition: left 0.25s;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.19);
}
.btn-toggle.btn-lg.active:before {
    opacity: 0.5;
}
.btn-toggle.btn-lg.active:after {
    opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
    line-height: 0.5rem;
    color: #fff;
    left: 0.6875rem;
    width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
    text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
    text-align: left;
    opacity: 0;
}

/* BTN-TOGGLE */

.active .switch .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.panel-group .panel-default a[aria-expanded="false"] .panel-heading:after {
    transform: rotate(0deg);
}

/* END OF PANEL */


#custom-dialog.in .modal-dialog {
    visibility: visible;
}

#custom-dialog .modal-dialog {
    width: 100%;
    margin: 0;
}

#custom-dialog .modal-content {
    width: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background-color: #022b55;
}

.modal-content {
    border-radius: 35px;
    border: none;
}

.modal-header {
    justify-content: flex-end;
    padding: 20px;
    background-color: transparent;
}

.modal-footer {
    justify-content: space-around;
}

.modal-close img {
    height: 16px;
    width: 16px;
}

.warning-wrapper {
    display: flex;
    align-items: center;
    height: 73px;
}

.unsaved-changes {
    margin-right: auto;
    margin-left: 285px;
    font-size: 14px;
    color: #ffffff;
}

.btn-dismiss {
    height: 34px;
    background: none;
    border-radius: 5px;
    border: 0.5px solid #fff;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    padding: 0 42px;
    transition: .3s all;
}

.btn-dismiss:hover {
    background-color: #fff;
    color: #000000;
    border: 0.5px solid transparent;
}

.btn-save {
    height: 34px;
    background-color: #008060;
    border-radius: 5px;
    border: 0.5px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    padding: 0 42px;
    transition: .3s all;
    margin-right: 70px;
    margin-left: 20px;
}

.btn-save:before {
    content: '';
    background-image: url(../../images/admin/icons/diskette.svg);
    height: 12px;
    width: 12px;
    display: inline-block;
    position: relative;
    right: 6px;
    top: 1px;
}

.btn-save:hover {
    background-color: #000000;
    border: 0.5px solid transparent;
    color: #fff;
}

.btn-back {
    border-radius: 8px;
    color: var(--bg-icons);
    font-weight: 500;
    text-transform: capitalize;
}

.btn-new {
    border-radius: 8px;
    text-transform: capitalize;
    transition: .3s all;
    background-color: var(--bg-icons);
}

.btn-new:before {
    content: '';
    background-image: url(../../images/admin/icons/diskette.svg);
    height: 12px;
    width: 12px;
    display: inline-block;
    position: relative;
    right: 4px;
    top: 1px;
}

.switch-wrapper {
    display: flex;
}

.feeding-guide-wrapper {
    display: flex;
    margin: 8px;
    align-items: center;
}

.feeding-guide-wrapper img {
    width: 30px;
    height: 48px;
}

.feeding-guide-wrapper input {
    width: 114px;
    margin: 0 15px;
    align-self: center;
    border: solid 1px #d8d8d8;
}

.feeding-guide-wrapper label {
    font-size: 14px;
    align-self: flex-end;
    color: black;
}

.sizes-wrapper {
    display: flex;
    margin: 8px;
    align-items: center;
}

.sizes-wrapper img {
    height: 70px;
}

.sizes-wrapper input {
    width: 100%;
    align-self: center;
    border: solid 1px #d8d8d8;
}

.sizes-wrapper label {
    font-size: 14px;
    align-self: flex-end;
    color: black;
}

.panel-body p {
    font-size: 12px;
    padding: 6px;
}

#products-form .nav-tabs {
    border: none;
}

#products-form .nav-tabs > li {
    margin: 10px;
}

#products-form .nav-tabs > li a{
    border: 1px solid #979797;
    color: black;
}

#products-form .nav-tabs>li>.active>a {
    border: 1px solid transparent;
}

#products-form .nav-tabs>li>a {
    border-radius: 0;
    margin: 0;
}

/* #products-form .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    background-color: #d8d8d8;
    border: 1px solid transparent;
    margin: 0;
} */

.touchscreen {
    transition: .1s all;
}

.active_nav .touchscreen:before {
    filter: invert(24%) sepia(89%) saturate(6228%) hue-rotate(235deg) brightness(91%) contrast(88%);
}

.touchscreen:before {
    content: "";
    background: url(../../images/admin/touchscreen.svg);
    height: 22px;
    width: 22px;
    background-repeat: no-repeat;
    position: absolute;
    left: 41px;
    transition: .1s all;
}


.touchscreen:hover:before {
    filter: invert(24%) sepia(89%) saturate(6228%) hue-rotate(235deg) brightness(91%) contrast(88%);
}

.touchscreen span {
    margin-left: 30px;
}

.add-property {
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(213, 213, 213, 0.5);
    transition: .3s all;
    padding: 10px 40px;
    background-color: white;
}

.add-property:hover {
    opacity: 0.8;
}

#properties-tab.nav-tabs li {
    margin-left: 0;
}

#more-properties p:before {
    content: '';
    background-image: url(../../images/admin/warning.svg);
    display: inline-block;
    height: 14px;
    width: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 6px;
    position: relative;
    top: 2px;
}

#more-properties img {
    height: 35px;
}

#more-properties p {
    margin-top: 20px;
}

.btn-adding {
    border-radius: 8px;
    text-transform: inherit;
    transition: .3s all;
    margin-top: 10px;
    display: inline-block;
    line-height: 42px;
    padding: 0 25px;
    background-color: var(--bg-icons);
}

#card-properties {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#card-properties i {
    background-color: #f0f1f6;
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    padding: 3px;
}

.cancelModal {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

.cancelModal.btn-back {
    margin: 0;
    text-transform: capitalize;
}

.properties-label {
    margin-top: 35px;
}

#one-property {
    margin-top: 10px;
}

.checkmark.disabled {
    background-color: #EEEEEE;
}

.checkboxContainer:hover input ~ .checkmark.disabled {
    background: #EEEEEE;
}

.tag_img_single.img-placeholder {
    margin-top: 6px;
    width: 25px;
}

#custom-table-category {
    padding-top: 0px !important;
}

#custom-table-category .table_title {
    padding-top: 10px;
}

.add-filter-link {
    font-size: 11px;
    text-decoration: underline;
}

.cannot-press {
    pointer-events: none;
}


.placeholder-style{
    background-color: grey;
}

.hidden-td{
    display: none;
}

#drag-cursor {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    vertical-align: middle;
	position: relative;
}

#drag-cursor:before {
    content: '';
    background-image: url(../../images/admin/icons/drag-and-drop.svg);
    display: inline-block;
    height: 16px;
    width: 10px;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 5px;
	top: 16px;
}

#drag-cursor:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.btn-ajax {
    margin-left: -7px;
    margin-top: 4px;
    display: block;
}

#size {
    display: none;
}

#package {
    display: none;
}

#color {
    display: none;
}

.panel-heading.panel-gallery {
    font-weight: 400;
    color: #2c304d;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px #eeeeee;
    background: none;
    padding: 17px;
    margin-bottom: 0;
    height: 55px;
    top: 0;
    bottom: 0;
    margin-top: -4px;
}

.panel-heading.panel-gallery label {
    font-size: 16px;
    color: #2c304d;
}

.card-header.card-gallery {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-ajax.btn-new:before {
    display: none;
}

.btn-confirm {
    margin: 0 auto;
    margin-bottom: 14px;
}

.btn-popup {
    display: unset;
}

.btn-popup:before {
    display: none;
}

.btn-add:before {
    display: none;
}

.card {
    border-radius: 8px;
}

.padding-l-r {
    padding: 0 30px;
}

.switchContainer {
    max-height: 35px;
    max-width: 175px;
    background-color: #fff;
    border-radius: 8px;
    /*box-shadow: 0 2px 4px 0 rgba(213, 213, 213, 0.5);*/
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}

.custom-textarea {
    min-height: 86px;
    padding: 4px;
}

.custom-textarea-wrapper {
    margin: 0 15px;
}

.collars .feeding-guide-wrapper input {
    width: 100%;
    margin: 4px 0;
}

.feeding-guide-wrapper img.collarXXXL {
    height: 60px;
}

.feeding-guide-wrapper img.collarXXL {
    height: 55px;
}

.feeding-guide-wrapper img.collarXL {
    height: 50px;
}

.feeding-guide-wrapper img.collarL {
    height: 45px;
}

.feeding-guide-wrapper img.collarM {
    height: 40px;
}

.feeding-guide-wrapper img.collarS {
    height: 35px;
}

.feeding-guide-wrapper img.collarXS {
    height: 30px;
}

.feeding-guide-wrapper img.collarXXS {
    height: 25px;
}

.btn-wrapper {
    text-align: center;
}

.btn-filters:before {
    display: none;
}

.btn-filters {
    height: 40px;
    margin-right: 15px;
}

@media screen and (min-width: 1700px){
    .label-box {
        width: 35%;
    }
}
@media screen and (min-width: 1900px){
    .label-box {
        width: 25%;
    }
}
@media screen and (min-width: 2300px){
    .label-box {
        width: 18%;
    }
}

.select2-container--default .select2-results>.select2-results__options {
    background-color: lightgrey;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.delete-image-admin{
    text-decoration: underline;
    cursor: pointer;
}

.markdown pre code{
    color: #432dc3;
}

/*.select2-container--default .select2-selection--multiple .select2-selection__choice,*/
/*.select2-container .select2-search--inline .select2-search__field {*/
/*    margin-top: 0 !important;*/
/*}*/

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    margin-bottom: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 0 !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple {
    padding-bottom: 0 !important;
}

.select2-container--default .select2-selection--multiple {
    border-radius: 8px !important;
}

.row_position > tr > td > div {
    display: inline-block;
}

#TableLayout {
	border-radius: 8px;
	width: 100%;
}

.layout-button {
	display: inline-block;
}

.labeled-input {
	display: inline;
}

.labeled-input input {
	width: auto;
	max-width: 2em;
	text-align: center;
	margin: 0 2px;
	padding: 2px;
	height: 2em;
	color: #344767;
	position: relative;
	top: 1px;
}

.controls-wrapper {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.color-red {
	background-color: #ff5858;
}

.color-red.active {
	background-color: #cf2222;
}

.color-green {
	background-color: #2d9540;
}

.color-green.active {
	background-color: #228033;
}

.controls-wrapper i {
	font-size: 20px;
	vertical-align: text-bottom;
}

.controls-wrapper span {
	position: relative;
	top: -1px;
}

.product-info {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.product-info .product-thumbnail {
	height: 75px;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	border-radius: 3px;
	background-color: #fff;
}

.product-info .product-data {
	padding: 5px 0;
}

.product-info .product-data .secondary-data {
	font-size: 12px;
}

.extra-text {
	font-size: 10px;
	margin-top: -5px;
	margin-bottom: 10px;
	display: inline-block;
}

.panel-group button {
	pointer-events: none;
}

hr {
	margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #eeeeee73;
}

.dropzone {
	border: dotted 2px #f4f3f7 !important;
}

.second_nav li a {
	position: relative;
	top: -1px;
}

.second_nav li a i {
	position: relative;
	top: 2px;
}

.empty-table {
	text-align: center;
}

.table-secondary {
	font-size: 13px;
}

/*.drag-and-drop {*/
/*    font-size: 12px;*/
/*    color: black;*/
/*    padding: 10px;*/
/*    position: absolute;*/
/*    bottom: 90px;*/
/*}*/

.daterangepicker .daterangepicker_input i {
	left: 9px !important;
	top: 8px !important;
}

.nav-tabs.padded {
	margin-top: 30px;
}

.pageBody .nav.nav-tabs.table-nav {
	background-color: white;
	margin-bottom: 5px;
	padding-top: 10px;
	padding-left: 15px;
	margin-top: -5px;
}

.tooltip {
    font-family: 'Red Hat Display', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

.card-wrapper {
    border-radius: 35px;
    border: 1px solid var(--border-light-grey);
    background-color: var(--white);
    padding: 26px;
    margin-bottom: 15px;
    color: var(--black);
    /*height: calc(100% - 15px);*/
    position: relative;
}

.card-wrapper h2 {
    font-size: 28px;
    font-weight: 700;
}

.card-wrapper h5 {
    font-size: 20px;
    font-weight: 700;
}

.card-wrapper p {
    font-size: 16px;
    margin: 0;
}

.card-wrapper small {
    font-size: 12px;
}

.card-wrapper.blue-bg {
    color: var(--white);
    background-image: url(../../images/admin/blue_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    border: none !important;
}

.card-wrapper.blue-bg .card-header {
    color: var(--white);
}

.welcome-card.horizontal {
    justify-content: space-between;
}

.welcome-card img {
    height: 150px;
    width: auto;
    margin-top: 30px;
}

.welcome-card .chart-wrapper {
    width: 60%;
}

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

.vertical {
    display: flex;
    flex-direction: column;
}

:is(.browsers-card, .countries-card, .activity-card).vertical {
    gap: 20px;
}

:is(.browsers-card, .countries-card, .activity-card) .vertical {
    flex: 1;
    justify-content: space-between;
    gap: 10px;
}

.stat {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.stat p {
    margin-bottom: 4px;
    padding-left: 4px;
}

.stat > div:last-child {
    flex: 1;
}

.stat .logo {
    width: 18px;
    height: 18px;
    margin-top: 4px;
}

.stat div.logo {
    border-radius: 50px;
    background-color: #2c47db;
}

.stat .progress-bar {
    background-color: #f5f7fd;
    width: 100%;
    height: 18px;
    border-radius: 9px;
    box-shadow: inset 0 1px 3px 0 #dddee1;
    padding: 2px;
    position: relative;
    overflow: initial;
}

.stat .progress-bar .bar {
    border-radius: 7px;
    opacity: 0.75;
    width: 100%;
    height: 100%;
    min-width: 14px;
    position: relative;
}

.stat .progress-bar .bar:after {
    content: '';
    display: block;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 8px;
    height: 8px;
    background-color: inherit;
    border-radius: 50%;
    border: 1px solid #fff;
}

.stat:nth-child(1) .progress-bar .bar {
    background-color: #5d73e3;
}

.stat:nth-child(2) .progress-bar .bar {
    background-color: #b9acf0;
}

.stat:nth-child(3) .progress-bar .bar {
    background-color: #fd8b43;
}

.stat:nth-child(4) .progress-bar .bar {
    background-color: #a8c6f3;
}

.stat:nth-child(1) .progress-bar .bar:after {
    background-color: #2c47db;
}

.stat:nth-child(2) .progress-bar .bar:after {
    background-color: #a693ec;
}

.stat:nth-child(3) .progress-bar .bar:after {
    background-color: #ff6707;
}

.stat:nth-child(4) .progress-bar .bar:after {
    background-color: #8fb6ef;
}

.stat .progress-bar:after {
    content: attr(data-progress) "%";
    color: #afb0b5;
    font-size: 12px;
    display: block;
    top: -18px;
    right: 15px;
    position: absolute;
}

.platforms-card.vertical {
    justify-content: space-between;
    gap: 40px;
}

.platforms-card .chart-wrapper {
    width: 100%;
}

/* DASHBOARD ACTIVITIES */

.activities {
    max-height: 400px;
    overflow: scroll;
}

.activity {
    padding: 10px 0;
}

.activity .date-time {
    color: var(--light-blue);
}

.activity .model {
    display: flex;
    gap: 10px;
    font-size: 16px;
    color: var(--dark-grey);
}

.activity .model .icon, .activity .model .text {
    display: flex;
    align-items: center;
}

.activity .model .icon img {
    height: 16px;
    width: 16px;
}

.activity .text .code {
    color: var(--light-blue);
}

/* -------------------- */

.nav-tabs .nav-link {
    color: #3d465a;
}

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

.blurred {
    filter: blur(2px);
}

/* BLOG GALLERY */

#sortable {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    margin: 0;
}

li.sortable-item {
    height: 140px;
    display: flex;
    background-color: #eee !important;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

li.sortable-item::before {
    content: '';
    background-image: url(../../images/admin/icons/drag-and-drop.svg);
    display: inline-block;
    height: 16px;
    width: 10px;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 5px;
	top: 50%;
    transform: translateY(-50%);
}

li.sortable-item .image {
    margin-right: 30px;
}

li.sortable-item .image img {
    object-fit: contain;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background-color: #fff;
}

li.sortable-item .data {
    width: 100%;
    align-content: space-evenly;
}

li.sortable-item .data .title {
    font-size: 16px;
    font-weight: bold;
}

li.sortable-item .actions {
    display: flex;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    cursor: pointer;
}

li.sortable-item .actions div {
    margin-left: 5px;
    padding: 0 5px;
    background: #fff;
    border-radius: 50%;
}

/*latest blogs*/

.latest_blogs {
    margin-top: 30px;
}

.latest_blogs .blog .image {
    background-color: #eee;
    border-radius: 8px;
    height: 140px;
}

.latest_blogs .blog .image img {
    object-fit: cover;
    height: 140px;
    width: 100%;
    border-radius: 8px;
}

.latest_blogs .blog .data {
    margin-top: 10px;
}

.latest_blogs .blog .data .title {
    font-size: 16px;
}

.latest_blogs .blog .data .date {
    font-size: 12px;
}

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

.nav.nav-tabs li:hover {
    cursor: pointer;
}

/* menu */

.menu-wrapper {
    display: flex;
    gap: 10px;
}

.menu-column {
    min-width: 175px;
    height: 100%;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 11px 5px rgba(240, 240, 240, 0.5);
    flex: 1;
}

.menu-column .header {
    display: inline-flex;
    padding: 15px 5px;

}

.menu-column .header .info {
    display: inline-flex;
}

.menu-column .items {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 10px 10px 10px;
}

.menu-column .items .item {
    display: flex;
    justify-content: space-between;
    border-radius: 8px;
    background-color: #e8ecee;
    padding: 5px 10px;
    height: 47px;
}

.menu-column .items .item-blurred {
    filter: blur(2px);
}

.menu-column .items .item .content {
    display: flex;
    align-self: center;
}

.menu-column .items .item .content .drag-icon {
    margin-right: 15px;
}

.menu-column .items .item .content .drag-icon img, .menu-column .items .item .actions .edit img {
    vertical-align: middle;
}

.menu-column .items .item .actions {
    border-radius: 4px;
    padding: 8px 10px;
    background-color: #e8ecee;
    margin-left: 5px;
}
.menu-column .items .item .actions .edit {
    visibility: hidden;
}

.menu-column .items .item:hover > .actions {
    background-color: #f5f7fd;
    opacity: 0.75;
}

.menu-column .items .item:hover > .actions > * {
    cursor: pointer;
}

.menu-column .items .item:hover > .actions .edit {
    visibility: visible;
}

.menu-column .items .item .actions .edit img {
    width: 12px;
    height: 12px;
}

.header .info .flagged-circle {
    width: 9px;
    height: 9px;
    margin: 0 10px;
    background-color: #2c47db;
    border-radius: 50%;
    align-self: center;
}

/* ---- */

.stack-image {
    height: 50px;
    aspect-ratio: 1 ;
    margin-right: 15px;
    object-fit: contain;
    padding: 2px;
    border-radius: 7px;
}

.limit-lines-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.limit-lines-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.btn-generate {
    width: auto;
}

.bg-grey-table {
    border: none;
}

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

tbody[data-sortable] tr td {
    position: relative;
    vertical-align: middle;
}

tbody[data-sortable].image-rows tr td:not(.dataTables_empty):first-child:before {
    transform: translateY(-50%);
    top: 50%;
}

tbody[data-sortable] tr td:not(.dataTables_empty):first-child:before {
    content: '';
    background-image: url(../../images/admin/icons/drag-and-drop.svg);
    display: inline-block;
    height: 16px;
    width: 10px;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: absolute;
    left: 5px;
	top: 16px;
}

tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-bg-type: var(--super-light-grey);
}

[id^="ItemsWrapper"] {
    gap: 10px;
    margin-bottom: 15px;
}

[id^="ItemsWrapper"] > div {
    background-color: #eee;
    border-radius: 8px;
    padding-top: 10px;
}

.actions-wrapper {
    display: inline-flex;
    justify-content: end;
    width: 100%;
}

.action-button {
    appearance: none;
    border: none;
    background-color: #fff;
    border-radius: 50%;
    aspect-ratio: 1;
    height: 30px;
    font-size: 16px;
}

#DirtyFormToastr {
    background-color: #022b55;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 73px;
    display: flex;
    align-items: center;
    z-index: 1000;
    transform: translateY(-73px);
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
}

#DirtyFormToastr.show {
    transform: translateY(0px);
    opacity: 1;
}

#DirtyFormToastr .unsaved-changes {
    margin-left: 290px;
    margin-right: auto;
    font-size: 14px;
    color: #fff;
}

.subtitle {
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

.th-with-icon {
    display: inline-flex;
    align-items: center;
}

.th-with-icon .icon {
    display: flex;
    margin-right: 2px;
}

table tr td {
    font-family: Manrope;
    font-style: normal;
    font-weight: 300;
    line-height: 20px; /* 125% */
}

.card-list .item {
    padding: 16px 28px;
    border-radius: 20px;
    background: var(--white, #FFF);

    /* Shadow */
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
}

.card-list .item .body {
    display: flex;
    justify-content: space-between;
}

.card-list .item .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--black, #000);

    /* Body/B2_medium */
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
}

.card-list .item .header .actions-title {
    display: inline-flex;
}

.card-list .item .header .actions-title .actions {
    display: flex;
    align-items: center;
    margin-right: 8px;
    cursor: pointer;
}

.card-list .item .header .view {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.card-list .item .header .view img {
    height: 16px;
    width: 9px;
}

.card-list .item .header .actions-title .actions img {
    height: 16px;
    width: 3px;
}

.card-list .item .body .data {
    color: var(--black, #000);

    /* Caption/C1_regular */
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
}

.card-list .item .body .status {
    display: flex;
    place-self: flex-end;
}

.status-tag {
    width: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    padding: 5px 10px;
    white-space: nowrap;

    background-color: var(--bg-light-green, #D6FFB4);
    color: var(--text-green);

    /* Buttons/B1_capslock */
    font-family: Manrope;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px; /* 128.571% */
    text-transform: uppercase;
}

.status-tag .icon {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.status-tag.failed, .status-tag.rejected, .status-tag.expired {
    background-color: var(--bg-light-red);
    color: var(--text-light-red);
}

.status-tag.new {
    background-color: var(--bg-light-blue);
    color: var(--light-blue);
}

.status-tag.draft {
    background-color: var(--border-light-grey);
    color: var(--dark-grey);
}

.status-tag.submitted {
    background-color: var(--bg-light-blue);
    color: var(--light-blue);
}

.status-tag.expires_soon {
    background-color: var(--light-orange);
    color: var(--dark-orange);
}

.status-tag.waiting {
    background-color: var(--dark-grey);
    color: var(--white);
}

.status-tag.started {
    background-color: var(--bg-light-grey);
    color: var(--dark-grey);
}

.label-value {
    display: flex;
}

.label-value .label {
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
    margin-right: 5px;
    margin-bottom: 14px;
}

.label-value .value {
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
}

.filepond--root {
    border-radius: 30px;
    border: 1px dashed var(--light-blue);
}

.filepond--panel-root {
    background-color: transparent;
}

.filepond--drop-label.filepond--drop-label label {
    font-family: Manrope;
    color: var(--light-blue);
    font-size: 16px;
    font-weight: 300;
}

.filepond--label-action {
    text-decoration-color: var(--light-blue);
}

.filepond--label-action img {
    width: 28px;
    height: 28px;
    padding: 8px;
    border: 1px solid;
    border-radius: 50%;
    margin-bottom: 24px;
}

.filepond--root .filepond--drop-label {
    min-height: 7.75em;
}

.last-login {
    color: var(--light-blue);
}

.custom-checkbox {
    display: flex;
    align-items: center;
}

.custom-checkbox input {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.custom-checkbox .checkbox-label {
    font-size: 16px;
}

.document-overview-data {
    margin-top: 40px;
}

.document-overview-data .label-value .label {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.light-blue-text {
    color: var(--light-blue) !important;
}

.modal-title {
    color: var(--black);
    font-size: 24px;
    font-weight: 500;
}

.modal-subtitle {
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 50px;
}

.auto-width {
    width: auto;
}

.large-modal .modal-body {
    padding-left: 80px;
    padding-right: 80px;
}

.large-modal .modal-footer {
    padding-left: 80px;
    padding-right: 80px;
    justify-content: flex-start;
}

.vacation-data-card {
    border-radius: 30px;
    border: 0.7px solid var(--border-light-grey);
    padding: 25px 40px;
}

.vacation-data-card .label, .survey-summary .label, .violation-summary .label, .accident-report-summary .label {
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-grey);
}

.vacation-data-card .value, .survey-summary .value, .violation-summary .value, .accident-report-summary .value {
    width: fit-content;
    font-size: 16px;
    font-weight: 300;
    color: var(--black);
    margin-bottom: 24px;
}

.vacation-data-card .value.blue {
    background-color: var(--bg-light-blue);
    padding: 2px 8px;
    border-radius: 30px;
}

.faq-category {
    display: inline-flex;
    font-size: 24px;
    font-weight: 500;
    margin: 24px 0 12px 0;
}
.faq-category .title {
    display: flex;
    align-items: center;
}
.faq-category .options {
    cursor: pointer;
    margin-right: 10px;
    display: flex;
    align-items: center;
    position: relative;
}
.faq-category .options img {
    height: 24px;
    width: 24px;
}
.faq-category .options .btn-dropdown-actions img {
    height: 18px;
    width: 18px;
}

.faq-item {
    border-radius: 20px;
    border: 1px solid var(--border-light-grey);
    padding: 25px 20px;
    margin-bottom: 15px;
}

.faq-item-header {
    display: flex;
    justify-content: space-between;
}

.faq-item-header .title {
    font-size: 16px;
    font-weight: 500;
}

.faq-item-header .options {
    position: relative;
}

.faq-item-header .drag-and-drop {
    cursor: pointer;
    position: unset;
    display: flex;
    height: 18px;
    margin-right: 10px;
}

.faq-item-header .left, .faq-item-header .right {
    display: flex;
    align-items: center;
}

.btn-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-light-grey);
    background-color: var(--white);
    height: 26px;
    width: 26px;
    margin-right: 10px;
}

.btn-mini.expand {
    background-color: var(--yellow);
    border: none;
}
.btn-mini.expand.blue {
    background-color: var(--bg-light-blue);
}

.btn-mini img {
    height: 14px;
    width: 14px;
}

.faq-item-body {
    position: relative;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 300;
    padding: 20px 0;
}

.faq-item-body::before {
    background-color: var(--yellow);
    content: "";
    position: absolute;
    left: -21px;
    top: 0;
    height: -webkit-fill-available;
    width: 5px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

.modal-footer>* {
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.options-dropdown {
    position: absolute;
    top: 45px;
    background-color: var(--white);
    border: 1px solid var(--bg-light-blue);
    border-radius: 8px;
    padding: 8px;
    z-index: 1;
    font-size: 14px;
}

.options-dropdown img {
    height: 14px;
    width: 14px;
}

.btn-dropdown-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    color: var(--light-blue);
}

.delete-button {
    background-color: var(--bg-light-red);
    color: var(--text-light-red);
}
.delete-button:hover {
    background-color: var(--text-light-red);
    color: var(--white);
}

.cancel-button {
    background-color: var(--bg-light-grey);
    color: var(--black);
}
.cancel-button:hover {
    background-color: var(--dark-grey);
    color: var(--white);
}

.delete-modal-content {
    text-align: center;
    color: var(--black);
}

.delete-modal-content .header {
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 10px;
}
.delete-modal-content .body {
    font-weight: 300;
    font-size: 16px;
    margin-bottom: 20px;
}

.steps {
    padding: 20px;
}

.steps .step {
    display: flex;
    margin-bottom: 22px;
}

.steps .step .circle {
    position: relative;
    display: flex;
    flex: 0 0 30px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    background-color: var(--bg-light-grey);
    color: var(--dark-grey);
}

.steps .step .circle .line {
    position: absolute;
    height: 22px;
    width: 1px;
    background-color: var(--dark-grey);
    bottom: -22px;
}

.steps .step .circle.active .line {
    background-color: var(--black);
}

.steps .step .title {
    align-self: center;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
}

.steps .step .circle.active {
    background-color: var(--yellow);
    color: var(--black);
}

.btn-fixed img {
    height: 11px;
    width: 11px;
}

.flex-start {
    justify-content: flex-start;
}

.gap-10 {
    gap: 10px;
}

.accident-report-modal #StepContent_2 {
    min-height: 650px;
    position: relative;
    padding-bottom: 95px;
}

.injured-persons-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.injured-person-add,
.injured-menu-popover button,
.injured-save-button,
.injured-delete-button,
.mini-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.injured-person-add img,
.injured-menu-popover img,
.gender-toggle img,
.injured-save-button img,
.injured-delete-button img {
    width: 16px;
    height: 16px;
}

.injured-person-card,
.injured-person-form {
    position: relative;
    width: 100%;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

.injured-person-card {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
}

.injured-person-card-title {
    margin-bottom: 16px;
    color: var(--black);
    font-size: 16px;
    font-weight: 600;
}

.injured-person-card-injuries {
    color: var(--dark-grey);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

.injured-person-form {
    margin-top: 22px;
    padding: 28px 26px 26px;
}

.injured-person-form .form-group {
    margin-bottom: 24px;
}

.injured-person-form input::placeholder {
    color: #d8d8d8;
}

.gender-toggle {
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 46px;
    padding: 3px;
    border-radius: 30px;
    background: #f4f4f4;
}

.gender-toggle label {
    margin: 0;
    cursor: pointer;
}

.gender-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gender-toggle span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border-radius: 30px;
    color: var(--dark-grey);
    font-size: 16px;
    font-weight: 400;
}

.gender-toggle input:checked + span {
    background: #fff;
    color: var(--black);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.injured-form-actions {
    margin-top: 8px;
}

.injured-save-button,
.injured-delete-button,
.mini-button {
    justify-content: center;
    min-width: 148px;
    height: 36px;
    border-radius: 30px;
    background: #fff;
    font-size: 16px;
}

.injured-save-button, .mini-save-button {
    border: 1px solid #4b8f29;
    color: #4b8f29;
}

.injured-delete-button, .mini-delete-button {
    border: 1px solid #ff4764;
    color: #ff4764;
}

.accident-report-modal #StepContent_2 .accident-step-actions {
    position: absolute;
    left: 0;
    bottom: 0;
}

.lost-password-body {
    display: flex;
    justify-content: center;
}

.small-statistics-card {
    padding: 14px;
    border-radius: 20px;
    background-color: var(--white);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
}

.small-statistics-card .number {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
}

.small-statistics-card .icon-and-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-statistics-card .icon-and-text .icon {
    display: flex;
    height: 14px;
    width: 14px;
    margin-right: 2px;
}

.small-statistics-card .icon-and-text .text {
    display: flex;
}

.small-statistics-card .view button {
    margin-top: 8px;
}

.uploadAndFiles .files {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.uploadAndFiles .upload,
.document-attachment-card {
    width: 152px;
    min-height: 152px;
}

.uploadAndFiles .upload .filepond--root {
    /*height: 100% !important;*/
}

.document-attachment-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background-color: var(--bg-light-grey);
}

.document-attachment-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}

.document-attachment-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border-light-grey);
    border-radius: 50%;
    background-color: var(--white);
    cursor: pointer;
}

.document-attachment-action img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.document-attachment-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 34px 16px 18px;
    color: var(--dark-grey);
    text-align: center;
    font-size: 10px;
}

.document-attachment-link:hover {
    color: var(--dark-grey);
}

.document-attachment-link span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.document-attachment-icon {
    width: 34px;
    height: 40px;
    opacity: 0.35;
}

.text-webkit-right {
    text-align: -webkit-right;
}

.back-button {
    display: flex;
    align-items: center;
}
.back-button img {
    height: 18px;
}
.question {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
    border-radius: 20px;
    padding: 25px 20px;
    margin-bottom: 15px;
}

.question .question-header {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.question .question-header .left {
    display: flex;
    align-items: center;
}

.question .question-header .drag-and-drop {
    cursor: grab;
}

.question-sortable-placeholder {
    border: 1px dashed var(--light-blue);
    border-radius: 20px;
    margin-bottom: 15px;
}

.question .question-header .left .data {
    margin-left: 24px;
}

.question .question-header .left .data .title {
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
}

.question .question-header .left .data .subtitle {
    color: var(--dark-grey);
    font-size: 16px;
    font-weight: 300;
}

.question .question-header .right {
    display: flex;
    align-items: center;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--white);
    background-color: var(--yellow);
    border-color: transparent;
}

.custom-circle-checkbox {
    display: flex;
    align-items: center;
    color: var(--dark-grey);
}

.custom-circle-checkbox input {
    height: 19px;
    width: 19px;
    border-radius: 50%;
    padding: 0;
    appearance: none;
    margin-right: 16px;
}

.custom-circle-checkbox input:checked {
    background-color: var(--light-blue);
}

.custom-circle-checkbox input.question-option-input {
    width: min(420px, 100%);
    height: auto;
    border-radius: 30px;
    appearance: auto;
    margin-right: 10px;
    padding: 4px;
}

.options-container {
    margin-bottom: 40px;
}

.survey-summary, .violation-summary, .accident-report-summary {
    margin-bottom: 20px;
}

.fit-content {
    width: fit-content;
}

.mt-2rem {
    margin-top: 2rem;
}

.mt-4rem {
    margin-top: 4rem;
}
.mb-4rem {
    margin-bottom: 4rem;
}

span.orange {
    color: var(--dark-orange);
}

.injured-person-card-actions {
    position: relative;
    width: auto;
    justify-content: flex-end;
}

.justify-end {
    justify-content: end;
}

.text-nowrap {
    text-wrap: nowrap;
}

.growth-card {
    display: flex;
    gap: 4px;
    background-color: var(--bg-light-green);
    color: var(--text-green);
    border-radius: 30px;
    padding: 2px 10px;
    width: min-content;
}

.growth-card.down {
    background-color: var(--bg-light-red);
    color: var(--text-light-red);
}

.growth-card .value {
    font-weight: 500;
}

.stats-growth-percentage {
    display: flex;
    gap: 4px;
    align-items: center;
}

.stats-growth-percentage .label {
    white-space: nowrap;
}

.survey-stats-element .title {
    color: var(--dark-grey);
    font-weight: 300;
    font-size: 16px;
}

.survey-stats-element .data {
    color: var(--black);
    font-weight: 600;
    font-size: 32px;
}

#notifications-panel {
    color: var(--black);
    position: fixed;
    top: 0;
    height: 100%;
    width: 390px;
    max-width: 75%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    right: -100%;
    background: #ffffff;
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    z-index: 1060;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    padding: 50px 25px;
}

#notifications-panel .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 20px;
    cursor: default;
}

#notifications-panel .header .icon {
    display: flex;
    align-items: center;
}

#notifications-panel .header .icon img {
    width: 24px;
    height: 24px;
    font-weight: 400;
}

#notifications-panel .title {
    flex: auto;
    padding: 0 12px;
    font-weight: 600;
    font-size: 24px;
}

#notifications-panel .date {
    font-size: 12px;
}

#notifications-panel.open {
    right: 0;
}

#notifications-panel .badge {
    line-height: 24px;
    font-weight: 400;
    text-align: left;
    white-space: normal;
}

#notifications-panel .notification {
    display: flex;
    /*justify-content: space-between;*/
    font-size: 14px;
    margin-bottom: 15px;
    padding: 20px 15px;
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.12);
}

#notifications-panel .notification .icon {
    width: 10px;
    margin-right: 15px;
}

#notifications-panel .notification .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #8993ac;
    display: inline-block;
}

#notifications-panel .notification .circle.circle_unread {
    background-color: #fe8578;
}

#notifications-panel .notification .circle.circle_read {
    background-color: #929eb8;
}

#notifications-panel .notification .name {
    font-weight: 800;
    font-size: 14px;
    color: #1d1e37;
}

#notifications-panel .notification .task {
    font-size: 14px;
    font-weight: 600;
    color: #009d5f;
}

#notifications-panel .notification .project {
    font-size: 14px;
    font-weight: 600;
    color: #fe877a;
}

#notifications-shadow-layer {
    position: fixed;
    min-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.61);
    cursor: pointer;
    z-index: 1000;
    display: none;
}

#notifications-shadow-layer.is-visible {
    display: block !important;
    -webkit-animation: cd-fade-in 0.3s;
    -moz-animation: cd-fade-in 0.3s;
    animation: cd-fade-in 0.3s;
}

#btn-notifications {
    cursor: pointer;
}

#notifications-unread, #notifications-archive {
    margin-top: 40px;
}

#notifications-unread .notification:hover {
    cursor: pointer;
}

.notification .left {
    margin-right: 15px;
}

.notification .left .avatar {
    width: 40px;
    height: 40px;
}

.notification .left .avatar .system {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--yellow);
}

.notification .left .avatar .system img {
    height: 20px;
    width: 20px;
}

.notification .left .avatar img {
    width: 40px;
    height: 40px;
}

#notifications-panel .notification .header {
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 20px;
}

#notifications-panel .notification .header .time-and-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#notifications-panel .notification .header .time-and-status .status {
    margin-left: 6px;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background-color: var(--bg-light-grey);
}

#notifications-panel .notification .header .time-and-status .status.unread {
    background-color: var(--black);
}

#notifications-panel .notification .content .title {
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    line-height: 20px;
}

.notification .content .body {
    margin-top: 4px;
}

#notifications-panel .date-section {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* LARGE NOTIFICATION CARD */

.large-notification {
    display: flex;
    padding: 25px 20px;
    border-radius: 20px;
    border: 0.7px solid var(--border-light-grey);
    background: var(--white);
    margin-bottom: 10px;
}

.large-notification .left {
    display: flex;
    height: fit-content;
    align-items: center;
}

.large-notification .avatar {
    height: 45px;
    width: 45px;
}

.large-notification .avatar .system {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    background-color: var(--yellow);
}

.large-notification .avatar img {
    height: 45px;
    width: 45px;
}

.large-notification .avatar .system img {
    height: 22px;
    width: 22px;
}

.large-notification .status {
    margin-right: 8px;
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background-color: var(--bg-light-grey);
}

.large-notification .status.unread {
    background-color: var(--black);
}

/*.large-notification:has(.status.unread):hover {*/
/*    cursor: pointer;*/
/*}*/

.large-notification .header {
    display: flex;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.large-notification .header .time {
    margin-left: 10px;
}

.large-notification .right {
    margin-left: 15px;
}

.large-notification .content .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.large-notification .content .body {
    margin-top: 4px;
}

.notifications-date-section {
    margin: 25px 0;
    font-size: 16px;
    font-weight: 600;
}

/* Survey question statistics */
.question-statistics-card {
    padding: 10px;
}

.question-statistics-card .answer-count {
    color: var(--light-blue);
    font-size: 12px;
}

.question-statistics-card .answer-item {
    margin-bottom: 6px;
}

.text-answers-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.text-answers-pagination button {
    width: 32px;
    height: 32px;
    border: 1px solid #e8edf2;
    border-radius: 4px;
    background: #fff;
    color: var(--light-blue);
    cursor: pointer;
}

.text-answers-pagination button:disabled {
    color: #aaa;
    cursor: default;
}

.survey-statistics-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.survey-statistics-bar > :first-child {
    flex: 0 0 100px;
}

.survey-statistics-bar .bar-label {
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.survey-statistics-bar .bar-track {
    width: -webkit-fill-available;
    height: 12px;
    overflow: hidden;
    background-color: #e8edf2;
    border-radius: 999px;
}

.survey-statistics-bar .bar-fill {
    height: 100%;
    min-width: 0;
    background: var(--yellow);
    border-radius: inherit;
    transition: width 0.35s ease;
}

.survey-statistics-bar .bar-count {
    color: #555;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    width: 150px;
    overflow: hidden;
}