:root {
    /*Lime*/
    --lime-1: #7CB26C;
    --lime-2: #DEF5B1;
    --lime-3: #E8F7C8;
    --lime-4: #F5FBE6; /**/
    /*Lime Opacity*/
    --lime-opacity-1: #DEF5B11e;
    --lime-opacity-2: #DEF5B144;
    --lime-opacity-3: #DEF5B188;
    --lime-opacity-4: #DEF5B1aa;
    /*Warm Red*/
    --warmred-1: #DD5034;
    --warmred-2: #F28C56;
    --warmred-3: #FFB478;
    --warmred-4: #FFD5A2;
    /*Warm Red Opacity*/
    --warmred-opacity-1: #F28C561e;
    --warmred-opacity-2: #F28C5644;
    --warmred-opacity-3: #F28C5688;
    --warmred-opacity-4: #F28C56aa;
    /*Sky Blue*/
    --skyblue-1: #0F486B;
    --skyblue-2: #A6D4F0;
    --skyblue-3: #C0E0F4;
    --skyblue-4: #DEF0FA;
    /*Sky Blue Opacity*/
    --skyblue-opacity-1: #A6D4F01e;
    --skyblue-opacity-2: #A6D4F044;
    --skyblue-opacity-3: #A6D4F088;
    --skyblue-opacity-3: #A6D4F0aa;
    /*Yellow*/
    --yellow-1: #FFD56C;
    --yellow-2: #FFE292;
    --yellow-3: #FFEDBB;
    --yellow-4: #FFF6DC;
    /*Yellow Opacity*/
    --yellow-opacity-1: #FFE2921e;
    --yellow-opacity-2: #FFE29244;
    --yellow-opacity-3: #FFE29288;
    --yellow-opacity-4: #FFE292aa;
    /*Black/White*/
    --black: #000;
    --white: #fff;
    /*Grey*/
    --grey-1: #D1D1D0;
    --grey-2: #DFDFDE;
    --grey-3: #EFEFEF;
    --grey-4: #F8F8F7;
    /*Dark*/
    --dark-1: #999;
    --dark-2: #777;
    /*Border*/
    --border: var(--grey-2);
    /*Buttons*/
    /*Primary*/
    --primary: var(--lime-1);
    --primary-hover: #92D034;
    --primary-active: #5C9605;
    --primary-disabled: #C3E0AB;
    /*Secondary*/
    --secondary: #EEEEEB;
    --secondary-hover: #DBDBD8;
    --secondary-active: #C3C3C1;
    --secondary-disabled: #F6F6F6;
    /*Tertiary*/
    --tertiary: #000;
    --tertiary-hover: #3D3B38;
    --tertiary-active: #000;
    --tertiary-disabled: #989088;
    /*Danger*/
    --danger: #DD5034;
    --danger-hover: #F6A457;
    --danger-active: #C34D08;
    --danger-disabled: #F1C59B;
    /*Misc*/
    /*Shadow*/
    --shadow-1: 0px 6px 10px rgba(0,0,0,0.04);
    --shadow-2: 0px 8px 14px rgba(90,90,90,0.1);
    --shadow-3: 0px 10px 20px rgba(90,90,90,0.12);
    /*colors*/
    --text-grey-1: #2B343B;
    --text-grey-2: #6A7883;
    --text-grey-3: #99A5AE;
    --text-grey-4: #b0b4b7;
    /*Page overlays*/
    --overlay-1: rgb(0 0 0 / 0.40);
    --overlay-2: rgb(0 0 0 / 0.50);
    --overlay-3: rgb(0 0 0 / 0.60);
    --overlay-4: rgb(0 0 0 / 0.80);
    --overlay-light-1: rgb(252 252 252 / 80%);
    --overlay-light-2: rgb(252 252 252 / 8%);
    /*Layout Dimentions*/
    --navbar-height: 50px;
    --sidebar-width: 220px;
    --sidebar-body-width: 420px;
}


/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Nunito Light'), local('Nunito-Light'), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAnsSUYevI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v11/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Nunito Bold'), local('Nunito-Bold'), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAjsOUYevI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Nunito Black'), local('Nunito-Black'), url(https://fonts.gstatic.com/s/nunito/v11/XRXW3I6Li01BKofAtsGUYevI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*Tag*/
body {
    overflow-x: hidden;
    color: var(--text-grey-1);
    position: relative;
    background: var(--white);
    font-size: 14px;
}

    body::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border-radius: 0px;
        padding: 3px;
        background-color: var(--white);
    }

    body::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--white);
    }

    body::-webkit-scrollbar-thumb {
        border-radius: 0;
        -webkit-box-shadow: none;
        background-color: var(--text-grey-3);
        transition: 0.2s !important;
    }

        body::-webkit-scrollbar-thumb:hover {
            background-color: var(--text-grey-4);
        }

    body.min-sidebar {
        --sidebar-width: 72px;
    }

    body.min-sidebar .min-sidebar-hide {
        display: none;
    }
    body.min-sidebar .min-sidebar-show {
        display: block;
    }
        body.min-sidebar sidebar{
            overflow: unset !important;
            z-index: 999999;
        }
        body.min-sidebar .sidebar-body #SidebarMenu > li:not(.divider) {
            display: block !important;
            min-height: 52px;
        }
        body.min-sidebar .sidebar-body .menu-block {
            transition: 0.2s;
            border: 1px solid transparent;
        }
        body.min-sidebar .menu-block > .menu-nav {
            padding: 0.5rem !important;
            margin-bottom: 6px !important;
        }

        body.min-sidebar .menu-accordian {
            max-height: 320px !important;
            overflow-y: auto;
        }

        body.min-sidebar sidebar div.menu-nav.active {
            color: var(--black) !important;
            background: var(--lime-2);
        }
        body.min-sidebar .sidebar-body #SidebarMenu > li:hover .menu-block {
            display: block;
            position: absolute;
            z-index: 99999;
            background: var(--white);
            padding-left: 12px;
            padding-right: 12px;
            border-radius: 6px;
            border: 1px solid var(--border);
            width: 220px;
            box-shadow: var(--shadow-3);
            box-sizing: content-box;
        }

                body.min-sidebar .sidebar-body #SidebarMenu > li:hover ul.menu-accordian {
                    display: block;
                }

            body.min-sidebar .sidebar-body #SidebarMenu > li ul.menu-accordian {
                display: none;
            }

        body.min-sidebar .sidebar-wrapper{
            overflow: unset !important;
        }

        body.min-sidebar .menu-nav {
            margin-top: 6px;
        }

        body.min-sidebar .page-modal-overlay {
            z-index: 1000000;
        }

        body.min-sidebar li .menu-accordian .menu-nav.sm {
            height: 28px;
            padding: 0.2rem 1rem;
            opacity: 1;
            margin-bottom: 6px;
        }

        a {
            color: inherit;
        }

viewbag {
    display: none;
}

main, body {
    background: var(--grey-4) !important;
    width: 100%;
}

mainbody {
    display: block;
    transition: 0.2s !important;
}

.main-body {
    background: var(--grey-4);
    margin-left: var(--sidebar-width);
    height: calc(100vh - var(--navbar-height));
    overflow: auto;
    transition: margin-left, background 0.2s;
    margin-top: var(--navbar-height);
    width: initial;
}

.pageLoading .main-body {
    margin-left: 0;
}

.pageLoading #Loader-Circle {
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    bottom: 0px !important;
}

header {
    top: 0px;
    width: calc(100vw - var(--sidebar-width));
    height: var(--navbar-height);
    right: 0;
    position: fixed;
    z-index: 9999;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    padding: 0px;
    padding-right: 24px;
}

sidebar {
    position: fixed;
    top: 0px;
    bottom: 0px;
    height: 100vh;
    background: var(--white);
    transition-duration: 0.25s;
    transition-delay: 0s;
    z-index: 9999;
    overflow: hidden;
    left: 0px;
    width: var(--sidebar-width);
    border-right: 1px solid var(--border);
}

.sidebar-body {
    width: unset;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 0px 1.5rem;
}

.sidebar-body-width {
    width: var(--sidebar-body-width);
}

.sidebar-width {
    width: var(--sidebar-width);
}

.sidebar-ml {
    margin-left: var(--sidebar-body-width);
}

.sidebar-mr {
    margin-right: var(--sidebar-body-width);
}

.sidebar-right {
    width: var(--sidebar-body-width);
    transition: 0.2s;
    position: absolute;
    right: 0px;
    flex-shrink: 0;
    z-index: 999;
    height: calc(100vh - var(--navbar-height));
    bottom: 0px;
    top: var(--navbar-height);
    box-shadow: var(--shadow-3)
}

.lg-sidebar-right {
    --sidebar-body-width: 720px;
}

.md-sidebar-right {
    --sidebar-body-width: 540px;
}


body.hide-sidebar-right .sidebar-mr {
    margin-right: 0;
}

body.hide-sidebar-right .sidebar-right {
    width: 100px;
    right: -100px !important;
}

body.hide-sidebar-right .meeting-body {
    width: calc(100vw - var(--sidebar-width));
}
/*Menu accordian*/
.menu-accordian {
    transition-duration: 0.1s;
    padding-bottom: 0px;
    transition-delay: 0.2s;
}

li.open .menu-accordian {
    margin-top: -6px;
    padding: 8px 0px;
    position: relative;
}

li .menu-accordian:before {
    background: transparent;
    display: block;
    content: "";
    top: 0px;
    width: 3px;
    position: absolute;
    left: 0px;
    transition: 0.2s;
}

.menu-accordian .menu-nav.sm {
    overflow: hidden;
    padding-top: 0px;
    padding-bottom: 0px;
    opacity: 0;
    transition-duration: 0.2s;
    height: 0px;
    margin: 0px;
    transition-delay: 0.2s;
    color: var(--black);
}
.menu-accordian .menu-nav-text{
    margin-top: 2px;
}

.menu-accordian .menu-nav.sm:not(.active):hover {
    color: var(--black);
    background: var(--grey-3);
}

    .menu-accordian .menu-nav.sm:hover:before {
        background: var(--overlay-2);
        height: 10px;
        transition-delay: 0.05s;
    }

li.open .menu-accordian .menu-nav.sm {
    height: 28px;
    padding: 0.2rem 1rem;
    opacity: 1;
    margin-bottom: 6px;
}

sidebar div.menu-nav.active {
    /*    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;*/
    background: var(--white);
    color: var(--black) !important;
}
    sidebar div.menu-nav.active:hover {
        color: var(--black);
        background: var(--grey-3);
    }

    sidebar .img-sm .profile-img {
        border: 0px solid var(--white);
        height: 27px;
        width: 27px;
        margin: 4px 2px;
    }

.profile-img.w-150px {
    image-rendering: initial !important;
}

html.pageLoading sidebar {
    transition: 0.2s;
    left: calc(-1* var(--sidebar-width));
}

html.pageLoading header {
    transition: 0.2s;
    width: calc(100vw);
}

html.pageLoading .staff-body {
    opacity: 0;
    transition: 0.2s;
}


li:hover .menu-accordian, li:hover .menu-nav.sm {
    transition-delay: 0.0s;
}


/*Text*/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 400;
}

h3, h4, h5, p, span {
    font-family: 'Nunito', sans-serif;
}

h1 {
    font-weight: 500;
    font-size: 48px;
}

label {
    color: var(--text-grey-4);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 13px;
    font-weight: 400;
}

.text-nowrap {
    white-space: nowrap;
}

.text-nodecoration, .text-nodecoration:hover {
    text-decoration: none !important;
}

.text-green {
    color: var(--lime-2);
}

.text-blue {
    color: var(--skyblue-1);
}

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

.text-primary {
    color: var(--primary-active) !important;
}

.text-grey {
    color: var(--text-grey-1);
}

.text-grey-1 {
    color: var(--text-grey-2);
}

.text-grey-2 {
    color: var(--text-grey-3)
}

.text-grey-3 {
    color: var(--text-grey-4)
}

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

a.text-grey:hover, .hover.text-grey:hover {
    color: var(--text-grey-2);
}

a.text-grey-1:hover, .hover.text-grey-1:hover {
    color: var(--text-grey-3)
}

a.text-grey-2:hover, .hover.text-grey-2:hover {
    color: var(--text-grey-4)
}

.text-active {
    color: var(--text-grey-1);
}

    .text-active:active, .text-active:hover {
        color: var(--primary) !important;
    }

.underline:not(.hover) {
    text-decoration: underline;
}

.underline.hover:hover {
    text-decoration: underline;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -html-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.text-div {
    background: var(--grey-3);
    border-radius: 100px;
    padding: 4px;
    height: 8px;
    flex-grow: 1;
    margin: 9px 0px;
}


.bg-loading {
    background: linear-gradient(90deg, var(--grey-2), var(--grey-4));
    background-size: 400% 400%;
    -webkit-animation: Loading-Animation 3s ease infinite;
    -moz-animation: Loading-Animation 3s ease infinite;
    animation: Loading-Animation 3s ease infinite
}

@-webkit-keyframes Loading-Animation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Loading-Animation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes Loading-Animation {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.loader-circle-anim {
    -webkit-animation: Loader-Circle 2s linear infinite;
    -moz-animation: Loader-Circle 2s linear infinite;
    animation: Loader-Circle 2s linear infinite
}

@keyframes Loader-Circle {
    0% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        stroke-dasharray: 7 170;
    }

    50% {
        transform: rotate(180deg);
        transform-origin: 50% 50%;
        stroke-dasharray: 94 94;
    }

    100% {
        transform: rotate(720deg);
        transform-origin: 50% 50%;
        stroke-dasharray: 7 170;
    }
}

.empty-text:empty {
    width: 64px;
    background: var(--lime-opacity-1);
    display: block;
    border-radius: 100px;
    padding: 4px;
    height: 8px;
    margin: 9px 0px;
}

.text-div.md {
    padding: 7px;
    height: 14px;
    margin: 4px 0px;
}

.text-div.lg {
    padding: 11px;
    height: 22px;
}

.text-truncate-line, .text-truncate-line-2, .text-truncate-line-3, .text-truncate-block span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: unset;
    word-break: break-word;
}

.text-truncate-line-2 {
    -webkit-line-clamp: 2;
}

.text-truncate-line-3 {
    -webkit-line-clamp: 3;
}

.text-line-1 th {
    white-space: nowrap;
    min-width: 160px !important;
}
/*Hover*/
.hover {
    transition: 0.2s;
}

.hover-show {
    transition: 0.2s;
    opacity: 0;
}

.hover:hover .hover-show {
    opacity: 0.5;
}

.hover.hover-show:hover, .hover .hover-show:hover {
    opacity: 1;
}

.active-show, .active .active-hide {
    display: none;
}

.active .active-show, .active-hide {
    display: block;
}

/*Merge Tags */
.mergetagwrapper {
    display: inline;
}

    .mergetagwrapper:before {
        content: '{---}';
        padding: 2px 12px;
        background: rgb(255 193 7 / 25%);
        color: #ff7607;
        font-weight: bold;
        border-radius: 6px;
        cursor: pointer;
    }

/*Menu-Nav*/
.menu-nav {
    display: flex;
    position: relative;
    cursor: pointer;
    font-weight: 500;
    padding: 0.5rem;
    text-align: left !important;
    color: var(--text-grey-1);
    background: rgba(255, 255, 255, 0);
    transition: 0.2s;
    font-size: 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    align-items: center;
    height: 38px;
}

    .menu-nav.sm {
        height: unset;
        padding: 0.2rem 0.5rem;
    }

    .menu-nav:hover {
        background: var(--grey-3);
        color: var(--black);
    }

    .menu-nav:focus {
        background: var(--grey-4);
        color: var(--black);
    }

    .menu-nav.active {
        color: var(--black) !important;
        border-radius: 6px;
        background: var(--lime-2);
    }

    .menu-nav:before {
            background: transparent;
    display: block;
    content: "";
    height: 0px;
    width: 4px;
    position: absolute;
    left: 5px;
    transition: 0.2s;
    transition-delay: 0.0s;
    border-radius: 12px;
    }

    .menu-nav:hover:before {
        height: 12px;
    }

a.menu-nav {
    text-decoration: none !important;
}

.menu-nav .waves-ripple {
    background: var(--lime-opacity-3);
    background: -webkit-radial-gradient(var(--lime-opacity-2) 40%, var(--lime-opacity-3) 60%, var(--overlay-1) 70%);
    background: -o-radial-gradient(var(--lime-opacity-2) 40%, var(--lime-opacity-3) 60%, var(--overlay-1) 70%);
    background: -moz-radial-gradient(var(--lime-opacity-2) 40%, var(--lime-opacity-3) 60%, var(--overlay-1) 70%);
    background: radial-gradient(var(--lime-opacity-2) 40%, var(--lime-opacity-3) 60%, var(--overlay-1) 70%);
}

/*Nav-Item*/
.nav-item {
    border-bottom: 3px solid transparent;
    transition: 0.2s;
    cursor: pointer;
    padding: 0.75rem 0rem;
    margin-right: 1rem
}

    .nav-item.sm {
        border-bottom: 2px solid transparent;
        padding: 0.5rem 0rem;
    }

    .nav-item:hover {
        border-bottom-color: var(--grey-1);
    }

        .nav-item:hover .nav-item-text {
            color: var(--text-grey-1)
        }

    .nav-item.active {
        border-bottom-color: var(--black);
    }

    .nav-item .nav-item-text {
        padding: 0.2rem 0.75rem;
        background: rgba(0, 0, 0, 0);
        border-radius: 4px;
        transition: 0.2s;
        font-size: 16px;
        font-weight: bold;
        color: var(--text-grey-3)
    }

    .nav-item.sm .nav-item-text {
        padding: 0.35rem 0.1rem;
        font-size: 14px;
    }

    .nav-item.active .nav-item-text {
        background: none;
        color: var(--black);
    }

    .nav-item.sm.active .nav-item-text {
        background: none;
        color: var(--black);
    }

/* Waves */
/*.waves-div .waves-ripple {
    background: var(--lime-opacity-3);
    background: -webkit-radial-gradient(var(--overlay-1) 0, var(--overlay-2) 60%, var(--overlay-4) 70%);
    background: -o-radial-gradient(var(--overlay-1) 0, var(--overlay-2) 60%, var(--overlay-4) 70%);
    background: -moz-radial-gradient(var(--overlay-1) 0, var(--overlay-2) 60%, var(--overlay-4) 70%);
    background: radial-gradient(var(--overlay-1) 0, var(--overlay-2) 60%, var(--overlay-4) 70%);
}*/

/*fonts*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: inherit;
    line-height: 1.2;
    color: inherit
}

.h1, h1 {
    font-size: 2.5rem
}

.h2, h2 {
    font-size: 2rem
}

.h3, h3 {
    font-size: 1.75rem
}

.h4, h4 {
    font-size: 1.5rem
}

.h5, h5 {
    font-size: 1.25rem
}

.h6, h6 {
    font-size: 1rem
}

a:hover {
    text-decoration: none;
}

.font-uniform h1, .font-uniform h2, .font-uniform h3, .font-uniform h4, .font-uniform h5, .font-uniform h6, .font-uniform p {
    font-size: 14px !important;
    margin-bottom: 0px;
}

.font-uniform img {
    display: none;
}

.tag-name {
    overflow: hidden;
    white-space: nowrap;
    max-width: 180px;
    text-overflow: ellipsis;
    display: block;
}

.font-small {
    font-size: 13px;
    line-height: 14px;
}

.font-xsmall {
    font-size: 11px;
}

.font-light {
    font-weight: 300;
}

.font-bold {
    font-weight: 600;
}

.font-strikethrough {
    text-decoration: line-through;
}

/*Border*/
.btn {
    border-radius: 6px;
}

.form-control {
    border-radius: 6px;
}

.border-round {
    border-radius: 1000px;
}

.border-r24 {
    border-radius: 24px;
}

.border-r12 {
    border-radius: 12px;
}

.border-r6 {
    border-radius: 6px;
}

.border-r4 {
    border-radius: 4px;
}

.border-r0 {
    border-radius: 0px;
}

.border-flat-left {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.border-flat-right {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.border-flat-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.border-flat-bottom {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.border, .border-top, .border-left, .border-right, .border-bottom {
    border-color: var(--border) !important;
}

.border-light {
    border-color: var(--grey-3) !important;
}

.border-primary {
    border-color: var(--primary) !important;
    box-shadow: 0px 0px 4px var(--lime-2) !important;
}

.border-transparent, .edit-box.border-transparent {
    border-color: transparent;
}

.border-hover {
    transition: 0.2s;
    border: 1px solid var(--border);
}

    .border-hover.border {
        border: 1px solid var(--border);
    }

    .border-hover.border-white {
        border: 1px solid transparent !important
    }

    .border-hover:hover {
        border-color: var(--lime-opacity-4) !important
    }

    .border-hover:active, .border-hover.active {
        border-color: var(--lime-2) !important;
    }

/*Box*/

.box {
    padding: 1rem;
    border-radius: 6px;
    background: var(--white);
    margin-bottom: 1rem;
    border: 1px solid var(--grey-3);
    outline: 0px solid transparent;
    transition: 0.2s;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.08);
}
    .box .box {
        box-shadow: none;
    }


    .box.lg {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .box:hover {
        outline: 1px solid rgba(0,0,0,0.04);
    }

.dash-info-box {
    padding-right: 0;
}

.div-justify-content-right {
    display: flex;
    justify-content: flex-end
}

.non-click-box {
    border: 1px solid var(--border);
    position: relative;
    transition: 0.2s;
    border-radius: 6px;
    padding: 1rem;
    /*cursor: pointer;*/
    background: var(--white);
}

.edit-box {
    border: 1px solid var(--border);
    position: relative;
    transition: 0.2s;
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
    background: var(--white);
}

    .edit-box.created {
        border-left: 2px solid var(--tertiary);
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .edit-box::after {
        height: 0px;
        background: var(--tertiary);
        display: block;
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        top: calc(100% + 1px);
        border-bottom-left-radius: 48px;
        transition: 0.2s;
        border-bottom-right-radius: 48px;
        opacity: 0;
    }

    .edit-box:hover {
        border-color: var(--overlay-2) !important;
        box-shadow: 0px 0px 0rem 0rem rgb(0 0 0 / 0%);
    }

        .edit-box:hover::after {
            height: 6px;
            opacity: 0.1;
        }

    .edit-box:active {
        transition: 0.2s;
        border-bottom-left-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
        border-color: var(--tertiary) !important;
    }

        .edit-box:active::after {
            height: 4px;
            opacity: 0.5;
            left: -1px;
            right: -1px;
        }


    .edit-box.active {
        border-color: var(--overlay-2) !important;
    }

/*Transition*/
.Transition-0 {
    transition: 0s;
}

.Transition-02 {
    transition: 0.2s;
}

.Transition-04 {
    transition: 0.4s;
}

.ItemLoading {
    transform: scale(0.98);
    opacity: 0.4;
    transition: 0.2s;
    pointer-events: none;
    user-select: none;
}

.noscale.ItemLoading {
    transform: scale(1) !important;
}

.nonDragable {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.custom-tooltip .tooltip-inner {
    max-width: 500px !important;
    width: 500px !important;
}


.flex-none {
    flex: none;
}

.statistic-card {
    background-color: var(--skyblue-opacity-2);
    border: none;
    box-shadow: 0px 1px 0px var(--skyblue-opacity-3);
}

.statistic-card-svg svg {
    height: 48px;
    width: 48px;
}

.statistic-tooltip {
    position: absolute;
    right: 30px;
    top: 10px;
    color: var(--skyblue-1);
}
/*Width*/
.w-24px {
    width: 24px;
}

.w-32px {
    width: 32px;
}

.w-48px {
    width: 48px;
}

.w-64px {
    width: 64px;
}

.w-150px {
    width: 150px;
}

.w-160px {
    width: 160px;
}

.w-180px {
    width: 180px;
}

.w-240px {
    width: 240px;
}

.w-300px {
    width: 300px;
}

.w-400px {
    width: 400px;
}

.w-480px {
    width: 480px;
}

.w-full {
    width: 100%;
}

.w-fit {
    width: fit-content;
}

.mw-100px {
    max-width: 100px !important;
}

.mw-150px {
    max-width: 150px !important;
}

.mw-200px {
    max-width: 200px !important;
}

.mw-300px {
    max-width: 300px;
}

.mw-400px {
    max-width: 400px;
}

.mw-600px {
    max-width: 600px;
}

.mw-720px {
    max-width: 720px;
}

.mw-920px {
    max-width: 920px;
}

.min-w-240px {
    min-width: 240px;
}

/*Squares*/

.sq-10px {
    width: 10px;
    height: 10px;
}

.sq-24px {
    width: 24px;
    height: 24px;
}

.sq-32px {
    width: 32px;
    height: 32px;
}

.sq-48px {
    width: 48px;
    height: 48px;
}

.sq-64px {
    width: 64px;
    height: 64px;
}


/*Height*/
.h-80vh {
    height: 80vh;
}

.min-h-80vh {
    min-height: 80vh;
}

.h-unset {
    height: unset !important;
}

.h-100vh {
    height: 100vh;
}

.h-nav {
    height: var(--navbar-height);
}

.h-nav-body {
    height: calc(100vh - var(--navbar-height));
}

.min-h-nav-body {
    min-height: calc(100vh - var(--navbar-height));
}

.top-nav {
    top: var(--navbar-height);
}

.h-400px {
    height: 400px;
}

.h-320px {
    height: 320px;
}

.h-240px {
    height: 240px;
}

.h-150px {
    height: 150px;
}

.h-32px {
    height: 32px;
}

.h-24px {
    height: 24px;
}

.h-48px {
    height: 48px;
}

.h-64px {
    height: 64px;
}

.mh-480px {
    max-height: 480px;
}

.mh-240px {
    max-height: 240px;
}

.mh-400px {
    max-height: 400px;
}

/*img*/
.img-cover {
    background-position: center;
    background-size: cover;
}

.img-contain {
    background-position: center;
    background-size: contain !important;
    background-repeat: no-repeat;
}

.img-fixed {
    background-attachment: fixed;
}

.profile-img {
    image-rendering: pixelated;
    font-weight: 600;
    color: var(--white) !important;
    transition-property: outline;
    transition: 0.1s;
    background-position: center;
}

    .profile-img.border-round {
        border-radius: 100%
    }

    .profile-img.xs {
        border: none
    }

    .profile-img.xxs {
        height: 18px;
        width: 18px;
        font-size: 9px;
        border-radius: 4px;
        font-weight: 700;
    }

.pointer:hover .profile-img {
    outline-width: 4px !important;
}

.nohover .profile-img, .pointer:hover .nohover .profile-img {
    outline-width: 0px !important;
}

/*misc*/
.search-results .search-hide {
    display: none !important;
}
.search-hidden{
    display: none !important;
}

.text-pill {
    display: inline-block !important;
    margin-right: 6px;
    color: var(--lime-1);
    background-color: var(--lime-4);
    border: 1px solid var(--lime-2);
    border-radius: 6px;
    font-size: 10px !important;
    padding: 4px 4px 4px 8px;
}

#IconSortDefault, #IconSortDescending, #IconSortAscending {
    position: absolute;
    right: 4px;
    cursor: pointer;
}


.no-remove .remove-icon {
    display: none !important;
}

.notification-block {
    border-left: 2px solid var(--lime-2);
    display: block;
}

    .notification-block.seen {
        border-left: 2px solid transparent
    }

.selected-highlight {
    border: 1px solid var(--lime-2) !important;
    border-radius: 6px;
    color: var(--lime-2);
}

.highlight {
    border: 1px solid var(--primary) !important;
    outline: 2px solid var(--lime-opacity-3);
}

    .highlight.edit-box:hover::after {
        background: var(--primary);
    }

    .highlight.edit-box:focus {
        border-color: var(--primary) !important;
    }

.task-completion-overlay.active {
    width: 100%;
    transition: 0.4s;
    transition-delay: .1s;
}

.task-completion-overlay.closed {
    width: 0%;
    right: 0px;
    left: auto;
}

.task-completion-overlay {
    height: 4px;
    width: 0px;
    transition: 0.2s;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 4px;
}

.date-options {
    position: absolute;
    z-index: 99999;
    background: var(--white);
    top: 38px;
    box-shadow: var(--shadow-2);
}

.Important-Date {
    transition: 0.2s;
    opacity: 1;
    word-break: break-word;
    display: block;
    text-align: left !important;
    white-space: normal !important;
    background: var(--white);
    border-radius: 6px;
    /*    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;*/
    padding: 0.5rem;
    /*background: var(--yellow-opacity-3) !important;*/
    color: var(--black) !important;
    /*border: 1px solid var(--border);*/
    position: relative;
    overflow: hidden;
    padding-left: 0.9rem
}

    .Important-Date.hidden {
        display: none !important;
    }

    .Important-Date.ScheduledContent {
        background: var(--lime-opacity-1);
        border: 1px solid var(--lime-opacity-3);
    }

        .Important-Date.ScheduledContent:hover {
            background: var(--lime-opacity-2);
            border: 1px solid var(--lime-2);
        }

    .Important-Date.Meeting, .Important-Date.Meeting-Other {
        background: var(--skyblue-opacity-1);
        border: 1px solid var(--skyblue-opacity-2);
    }

        .Important-Date.Meeting:hover, .Important-Date.Meeting-Other:hover {
            background: var(--skyblue-opacity-2);
            border: 1px solid var(--skyblue-2);
        }

    .Important-Date.First-Day, .Important-Date.Work-Anniversary, .Important-Date.Birthday, .Important-Date.Last-Day {
        background: var(--warmred-opacity-1);
        border: 1px solid var(--warmred-opacity-2);
    }

        .Important-Date.First-Day:hover, .Important-Date.Work-Anniversary:hover, .Important-Date.Birthday:hover, .Important-Date.Last-Day:hover {
            background: var(--warmred-opacity-2);
            border: 1px solid var(--warmred-2);
        }

    .Important-Date.ScheduledContent .calendar-object-bar {
        background: var(--lime-2);
    }

    .Important-Date.Meeting .calendar-object-bar, .Important-Date.Meeting-Other .calendar-object-bar {
        background: var(--skyblue-2);
    }

    .Important-Date.First-Day .calendar-object-bar, .Important-Date.Work-Anniversary .calendar-object-bar, .Important-Date.Birthday .calendar-object-bar, .Important-Date.Last-Day .calendar-object-bar {
        background: var(--warmred-2);
    }

    .Important-Date.groupedContent {
        background: var(--yellow-opacity-1);
        border: 1px solid var(--yellow-opacity-3);
    }

        .Important-Date.groupedContent:hover {
            background: var(--yellow-opacity-2);
            border: 1px solid var(--yellow-2);
        }

        .Important-Date.groupedContent .calendar-object-bar {
            background: var(--yellow-1);
        }



.calendar-object-bar {
    width: 3px;
    top: 7px;
    bottom: 7px;
    position: absolute;
    left: 6px;
    border-radius: 8px;
    transition: 0.2s;
}

.Important-Date:hover .calendar-object-bar {
    top: 4px;
    bottom: 4px;
}


/*Icons*/
.multiselect-profile {
    width: 33% !important;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
    padding: 0.25rem;
}

.page-modal-overlay.xsm .multiselect-profile {
    width: 50% !important;
}

.profile-icon {
    width: 100%;
    max-width: 400px;
    position: relative;
}

/*Alignment*/
.Vertical-Align-Parent {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

    .Vertical-Align-Parent .Vertical-Align {
        position: relative;
        top: 50%;
        transform: translateY(calc(-50% + 0.5px));
    }

.right {
    margin-right: 0px;
    margin-left: auto;
}

.right-abs {
    right: 0px;
}

.left {
    margin-left: 0px;
    margin-right: auto;
}

.left-abs {
    left: 0px;
}

.center-abs {
    left: 0px;
    right: 0px;
}

.bottom:not(.popover) {
    position: absolute;
    bottom: 0px;
}

.top {
    position: absolute;
    top: 0px;
}

.full-abs {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
}

.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

/*Opacity*/

.opacity-0 {
    opacity: 0 !important;
}

.opacity-06 {
    opacity: 0.6;
}

.opacity-04 {
    opacity: 0.4;
}

.opacity-02 {
    opacity: 0.2;
}

.opacity-hover:hover .opacity-0, .opacity-hover:hover .opacity-04, .opacity-hover:hover .opacity-06 {
    opacity: 1;
}

.display-grid {
    display: grid;
}

.align-center {
    align-content: center;
    flex-wrap: wrap;
}

.line-height-normal {
    line-height: normal;
}

.line-height-48 {
    line-height: 48px
}

.line-height-32 {
    line-height: 32px;
}

.line-height-24 {
    line-height: 24px
}

/*Cursor*/
.pointer {
    cursor: pointer;
}

.pointer-no-events {
    pointer-events: none;
}

.no-propagation {
}

.cursor-default {
    cursor: default;
}

.cursor-grab {
    cursor: grab;
}

.cursor-forbidden {
    cursor: no-drop;
}
/*Img-Tile*/
.img-tile-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 50ms;
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 50ms;
    background-size: cover;
    background-position: center center;
    will-change: transform;
    overflow: hidden;
}

/*page-modal-overlay*/
.page-modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--overlay-1);
    z-index: 1050;
}

.page-modal-overlay-dark {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--overlay-3);
    z-index: 1050;
    transition: 0.4s;
}

.page-modal-overlay-light {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--overlay-light-1);
    z-index: 1050;
    transition: 0.4s;
}

.page-modal-overlay-body {
    transition: 0.2s;
    position: relative;
    margin: 24px auto;
    max-width: 1140px;
    background: var(--white);
    width: 100%;
    border-radius: 6px;
    max-height: calc(100vh - 48px);
    padding: 2rem;
    box-shadow: var(--shadow-3) !important;
}

.modal-closed .page-modal-overlay-body {
    transform: scale(0.95);
    opacity: 0;
    border-radius: 0px;
    box-shadow: none !important;
}

.page-modal.xsm > .modal-container > .modal-body {
    max-width: 420px;
    width: 100%;
}


.page-modal.lg > .modal-container > .modal-body {
    max-width: 1140px;
    width: 100%;
}

.page-modal.xl > .modal-container > .modal-body {
    max-width: calc(100vw - 48px);
    width: 100%;
    height: calc(100vh - 48px);
    margin: auto;
    background: var(--grey-4) !important;
    overflow-y: auto;
    padding: 0px;
}

/*btn-loader*/
.btn-loader {
}

    .btn-loader .btn-loader-svg {
        width: 0px;
        overflow: hidden;
        transition: 0.2s;
        opacity: 0;
        display: inline-flex;
    }

    .btn-loader.loader-active .btn-loader-svg {
        width: 40px;
        opacity: 1;
        margin-left: 0.5rem;
    }

/*Hover icon*/
.hover-icon {
    background: transparent;
    color: transparent;
    transition: 0.2s;
    font-weight: bold;
    font-size: 24px;
    height: 28px;
    width: 28px;
    margin-left: 6px;
    display: inline-block;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: .25rem !important;
}

    .hover:hover .hover-icon, .hover-icon.show {
        color: var(--text-grey-1);
        background: var( --grey-3);
    }

    .hover-icon:hover {
        background: var(--lime-opacity-3) !important;
        color: var(--primary) !important;
        border-radius: 4px;
    }

/*Dropdowns*/
.dropdown-menu {
    padding: 0.5rem;
    border: 1px solid var(--border);
    color: var(--text-grey-2);
    background-color: var(--white);
    box-shadow: var(--shadow-2) !important;
}

.dropdown-menu-item {
    width: 25%;
    display: inline-block;
    padding: 3px;
    height: 48px;
    text-align: center;
}

.dropdown-item {
    color: var(--text-grey-1);
    padding: .25rem 0.5rem !important;
    border-radius: 6px;
    transition: 0.2s;
    text-decoration: none !important;
    margin-bottom: 4px;
}

.dropdown-header {
    padding: .25rem 0.5rem !important
}

.dropdown-item:not(.active):hover {
    color: var(--primary) !important;
    background-color: var(--lime-opacity-2);
}

    .dropdown-item:not(.active):hover a {
        color: var(--primary) !important;
    }

.dropdown-item.danger:not(.active):hover {
    color: var(--danger) !important;
    background-color: var(--warmred-opacity-1);
}

.dropdown-item:not(.active):active {
    color: var(--primary) !important;
    background-color: var(--lime-opacity-3);
}

.dropdown-item.danger:not(.active):active {
    color: var(--danger) !important;
    background-color: var(--warmred-opacity-3);
}

.dropdown-item:focus, .dropdown-item.active {
    color: var(--white);
    text-decoration: none;
    background-color: var(--primary);
}

.dropdown-divider {
    border-top: 1px solid var(--border);
}

.dropdown-menu-item-inner {
    border-radius: 3px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
}

.dropdown-menu-item.active .dropdown-menu-item-inner {
    color: var(--lime-2);
    border: 1px solid var(--lime-2);
}

.dropdown-menu-item-overlay {
    border-radius: 3px;
    opacity: 0;
    background: var(--lime-opacity-2);
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: central;
    transition: 0.2s;
    padding: 8px 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dropdown-menu-item:hover .dropdown-menu-item-overlay {
    opacity: 1;
}

.dropdown-toggle:not(.btn-link)::after {
    display: none !important;
}
/*.dropdown-toggle:not(.btn-link)::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}*/

.dropup.nocaret .dropdown-toggle:not(.btn-link)::after, .dropdown.nocaret .dropdown-toggle:not(.btn-link)::after {
    display: none !important;
}


/*Shadow*/
.shadow-sm {
    box-shadow: var(--shadow-1) !important
}

.shadow {
    box-shadow: var(--shadow-2) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-3) !important;
}

.shadow-hover {
    transition-property: box-shadow;
    transition-duration: 0.2s;
    box-shadow: 0 0.125rem 0.2rem rgba(0,0,0,0);
}

    .shadow-hover:hover {
        box-shadow: var(--shadow-2) !important;
    }

/*Scroll*/
.noscroll {
    overflow: hidden;
}

.noscroll-y {
    overflow-y: hidden;
}

.noscroll-x {
    overflow-x: hidden;
}

.scroll-y {
    overflow-y: auto;
}

.scroll-x {
    overflow-x: auto;
}

.styled-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0px;
    padding: 3px;
    background-color: transparent;
}

.styled-scroll::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background-color: rgba(0, 0, 0, 0);
}

.styled-scroll::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: none;
    background-color: var(--dark-1);
    transition: 0.2s !important;
}

    .styled-scroll::-webkit-scrollbar-thumb:hover {
        background-color: var(--dark-2);
    }

.styled-scroll-light::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0px;
    padding: 3px;
    background-color: transparent;
}

.styled-scroll-light::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
    background-color: transparent;
}

.styled-scroll-light::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: none;
    background-color: var(--dark-1);
    transition: 0.2s !important;
}

.styled-scroll-light::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-2);
}



.styled-scroll-alt::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0px;
    padding: 4px;
    background-color: var(--white);
}

.styled-scroll-alt::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
    background-color: var(--white);
}

.styled-scroll-alt::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: none;
    background-color: var(--grey-3);
    transition: 0.2s !important;
    padding: 6px;
    border-radius: 12px;
}

    .styled-scroll-alt::-webkit-scrollbar-thumb:hover {
        background-color: var(--grey-2);
    }
    
/*Sliding Page*/
.sliding-page {
    overflow-y: auto;
    position: absolute;
    left: 100vw;
    text-align: center;
    transition: 0.4s;
    background: var(--white);
    opacity: 0;
    width: 100%;
}

    .sliding-page.active {
        left: 0;
        opacity: 1;
    }

.sliding-page-content {
    transition: .2s;
}

.sliding-page.active.closed .sliding-page-content {
    transform: scale(0.9);
}

.sliding-page-overlay {
    display: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0,0,0,0);
    transition: 0.2s;
}


.sliding-page.closed .sliding-page-overlay {
    display: block;
}

    .sliding-page.closed .sliding-page-overlay.active {
        background: rgb(8 5 42 / 0.15);
    }


/*Page-overlay*/
.page-overlay {
}

.page-overlay-content {
    top: var(--navbar-height);
    bottom: 0px;
    width: calc((100vw - var(--sidebar-width)) + 1px);
    height: calc(100vh - var(--navbar-height));
    position: absolute;
    left: 100vw;
    text-align: center;
    transition: 0.4s;
    background: var(--grey-4);
    z-index: 999;
    margin-left: 0px;
    overflow: auto;
}

.page-overlay.open .page-overlay-content {
    left: var(--sidebar-width);
}

.page-slide-overlay {
    background: rgba(0,0,0,0);
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    transition: 0.2s;
    display: block;
    z-index: 99;
}

.page-overlay:not(.open) .page-slide-overlay {
    background: var(--overlay-3);
}

/*Modal*/
.modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 2rem auto;
    text-align: left;
    z-index: 3045;
    background: var(--white);
    max-width: 760px;
    transition: 0.2s;
    transform: scale(1);
    opacity: 1;
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: 100%;
}

.modal-close {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px .5rem;
    margin-right: 0.2rem;
    margin-top: 0.1rem;
    cursor: pointer;
    font-size: 24px;
    opacity: 0.5;
    transition: 0.2s;
    z-index: 999;
}

    .modal-close:hover {
        opacity: 1;
    }

.modal-popup.sm .modal-container .modal-body {
    max-width: 640px;
}

.modal-container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.sm .modal-container:before {
    height: 64px;
}


@media (min-width: 1940px) {
    .container.lg {
        max-width: 1600px !important;
    }
}

@media (max-width: 1270px) {
    .modal-container:before {
        content: '';
        display: inline-block;
        height: 5vh;
        vertical-align: middle;
    }
}

.modal-container:after {
    content: '';
    display: inline-block;
    height: 24px;
    vertical-align: middle;
}

.modal-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
}

    .modal-container::-webkit-scrollbar-track {
        -webkit-box-shadow: none;
        border-radius: 0px;
        padding: 5px;
        background-color: var(--white);
    }

    .modal-container::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
        background-color: var(--white);
    }

    .modal-container::-webkit-scrollbar-thumb {
        border-radius: 0px;
        -webkit-box-shadow: none;
        background-color: var(--overlay-2);
        transition: 0.2s !important;
    }

        .modal-container::-webkit-scrollbar-thumb:hover {
            background-color: var(--overlay-4)
        }


.modal-body::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0px;
    padding: 4px;
    background-color: var(--white);
}

.modal-body::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    background-color: var(--white);
}

.modal-body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: none;
    background-color: var(--grey-3);
    transition: 0.2s !important;
    padding: 6px;
    border-radius: 12px;
}

    .modal-body::-webkit-scrollbar-thumb:hover {
        background-color: var(--lime-1-disabled);
    }

.modal-closed .modal-body {
    transform: scale(0.9);
    opacity: 0;
    border-radius: 0px;
    box-shadow: none !important;
}

.tooltip {
    z-index: 10000;
    max-width: 300px !important;
}

.tooltip-inner {
    text-align: left;
    max-width: 300px !important;
}

/*z-index*/
.z-1 {
    z-index: 9;
}

.z-2 {
    z-index: 99;
}


.z-3 {
    z-index: 999;
}

.z-4 {
    z-index: 9999;
}

.z-5 {
    z-index: 99999;
}

.z-hover:hover {
    z-index: 999;
}

.z-hover:focus-within {
    z-index: 9999;
}

/*pop*/
.pop {
    transform: scale(0.96);
    opacity: 0;
    transition: 0.2s;
}

    .pop.noscale {
        transform: scale(1) !important
    }

    .pop.in {
        transform: scale(1);
        opacity: 1;
    }

    .pop.out {
        transform: scale(0.97);
        opacity: 0.7;
    }

.fade.out {
    margin-left: -3rem
}

.fade.out {
    margin-left: -3rem;
}

.page-overlay .slide-in {
    margin-left: 32px;
    margin-right: -32px;
    transition: 0.35s;
    transition-delay: 0.35s;
    opacity: 0;
}

    .page-overlay .slide-in .slide-in {
        transition-delay: 0.45s;
    }

.page-overlay.open .slide-in {
    margin-left: 0px;
    margin-right: 0px;
    opacity: 1;
}


/*Background*/

.bg-lime-grad {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00dea3+0,36acb8+100 */
    background: var(--primary); /* Old browsers */
    background: -moz-linear-gradient(left, var(--lime-2) 0%, var(--primary) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, var(--lime-2) 0%, var(--primary) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, var(--lime-2) 0%, var(--primary) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--lime-2)', endColorstr='var(--primary)',GradientType=0 ); /* IE6-9 */
}

.bg-primary-grad {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, var(--lime-2) 0%, var(--lime-4) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, var(--lime-2) 0%, var(--lime-4) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom right, var(--lime-2) 0%, var(--lime-4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-lime {
    background-color: var(--lime-2) !important;
}

.bg-lime-opacity-2 {
    background-color: var(--lime-opacity-2) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-tile {
    background-attachment: fixed;
    background-repeat: repeat;
    background-image: url('/Media/Img/Misc/tile.svg') !important;
}

.bg-white.hover:hover, .bg-transparent.hover:hover {
    background-color: var(--grey-4) !important;
}

.bg-light {
    background-color: var(--grey-4) !important;
}

.bg-hover.hover:hover {
    background-color: var(--white) !important;
}

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

.bg-blue-1 {
    background-color: var(--skyblue-1) !important;
}

.bg-blue-2 {
    background-color: var(--skyblue-2) !important;
}

.bg-blue-3 {
    background-color: var(--skyblue-3) !important;
}

.bg-warmred-1 {
    background-color: var(--warmred-2) !important;
}

.bg-warmred-2 {
    background-color: var(--warmred-3) !important;
}

.bg-warmred-3 {
    background-color: var(--warmred-4) !important;
}


.bg-dark {
    background-color: var(--black) !important;
}

.bg-dark-04 {
    background-color: var(--overlay-2);
}

@media(max-height: 800px) {
    .menu-nav {
        margin-bottom: 0px;
        padding: 0.25rem 1rem;
        height: 36px;
    }

    .sidebar-body {
        padding: 1.5rem 0px 1rem;
    }

    body.min-sidebar .menu-accordian {
        max-height: 200px !important;
    }
    body.min-sidebar .menu-block > .menu-nav {
        margin-top: 3px !important;
        margin-bottom: 3px !important
    }
    body.min-sidebar .sidebar-body #SidebarMenu > li:hover .menu-block {
        padding-left: 3px;
        padding-right: 3px;
    }
    body.min-sidebar .sidebar-body #SidebarMenu > li:not(.divider) {
        min-height: 44px;
    }
}

@media(max-height: 700px) {
    body.min-sidebar .menu-accordian {
        max-height: 120px !important;
    }
    .menu-nav {
        height: 32px;
    }
    body.min-sidebar .sidebar-body #SidebarMenu > li:not(.divider) {
        min-height: 40px;
    }
}

@media (max-width: 1340px) and (min-width: 500px) {
    :root {
        --sidebar-body-width: 330px;
    }
}

@media (max-width: 1270px) and (min-width: 500px) {
    :root {
        --sidebar-body-width: 300px;
    }
}

/*Tablet & Mobile*/
.tablet-show {
    display: none !important;
}

@media (max-width: 1170px) {
    .sidebar-mr {
        margin-right: 0px !important;
    }

    .sidebar-right {
        z-index: 999;
        box-shadow: var(--shadow-1) !important;
    }

    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    main {
        padding-bottom: env(safe-area-inset-bottom);
        /* Optional for top notch and sides */
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/*Accordian*/
.accordian-bg-shift {
    transition: 0.2s;
    background: var(--white) !important;
}

    .accordian-bg-shift.open {
        background: var(--grey-4) !important;
        border-color: var(--tertiary-disabled) !important;
    }

/*.accordion-btn {
    height: 24px;
    width: 24px;
    background: transparent;
    transition: 0.2s;
    display: flex;
    align-items: center;
    border-radius: 24px;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    outline: 3px solid transparent;
}*/

.btn .accordion-btn {
    height: 22px;
    width: 22px;
}

.accordion-btn svg {
    margin-bottom: -1px;
    transition: 0.2s;
    transform: rotate(0deg);
}

.accordion-btn.closed svg {
    margin-bottom: 1px;
    transform: rotate(0deg);
}

/*.accordion-btn:hover, .text-active:hover .accordion-btn {
    background: var(--grey-3);
    color: var(--text-grey-2);
    outline: 3px solid var(--grey-3);
}*/

.btn .accordion-btn:hover {
    background: transparent;
    color: inherit;
    outline: 0px solid transparent;
}

.menu-nav .accordion-btn.closed svg {
    transform: rotate(90deg);
}

.menu-nav .accordion-btn:hover {
    background: none;
    color: inherit;
}
.menu-nav-text{
    display: flex;
    align-items: center;
}
.accordion-btn:not(.sidebar-body .accordion-btn)::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: 0;
    border-right: .3em solid transparent;
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
}

.accordion-btn.closed:not(.sidebar-body .accordion-btn)::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

.accordion-btn.accordion-right::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.5em;
    vertical-align: 0;
    content: "";
    border-top: .3em solid transparent;
    border-right: 0;
    border-bottom: .3em solid transparent;
    border-left: .32em solid;
}
/*active-indicator*/
.check-btn {
    width: 18px;
    height: 18px;
    background: var(--white) !important;
    transition: 0.2s;
    color: var(--white) !important;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--tertiary-disabled) !important
}

    .check-btn:hover {
        color: var(--light) !important;
        border: 1px solid var(--tertiary-hover) !important;
        background: var(--tertiary-hover) !important
    }

.active.check-btn {
    color: var(--primary) !important;
    background: var(--white) !important;
    border: 0px !important;
    outline: 5px solid transparent !important;
}

    .active.check-btn:hover {
        color: var(--primary) !important;
    }

.check-btn:active, .check-btn:focus, .check-btn:target, .check-btn:hover {
    outline: 5px solid var(--grey-3) !important;
}

.active.check-btn:active, .active.check-btn:focus, .active.check-btn:target, .active.check-btn:hover {
    outline: 5px solid var(--link-4) !important;
}

.disabled.check-btn {
    color: var(--grey-3) !important;
    border: 1px solid var(--grey-1) !important;
    background: var(--grey-3) !important;
    outline: 0 !important;
}

.disabled.active.check-btn {
    color: var(--primary-disabled) !important;
    background: transparent !important;
    border: 0px solid var(--lime-3) !important;
}

/*Table*/
.table-basic {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .table-basic thead {
        position: sticky;
        top: 0px;
        z-index: 2;
        background: var(--white);
    }

        .table-basic thead th {
            position: sticky;
            top: 0px;
            z-index: 2;
            padding: 12px 16px;
            background: var(--grey-4);
            font-size: 16px;
            border-top: 1px solid var(--border);
            margin-bottom: -1px;
            font-weight: 500;
            min-width: 100px;
            padding-right: 30px;
        }

.wizard .table-basic thead {
    top: -52px;
}

    .wizard .table-basic thead th {
        top: -52px;
    }

.table-basic.bg-white thead th {
    background: var(--white);
}

.table-basic.bg-white thead th {
    background: var(--white);
}

.table-basic thead th::after {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--border);
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0px;
    right: 0px;
}

.table-basic thead th span {
    white-space: nowrap;
}

.table-basic thead th:first-of-type, .table-basic tbody td:first-of-type, .table-basic tfoot td:first-of-type {
    padding-left: 1.5rem;
}

.table-basic thead th:last-of-type, .table-basic tbody td:last-of-type, .table-basic tfoot td:last-of-type {
    padding-right: 1.5rem;
}

.table-basic tbody td, .table-basic tfoot td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-grey-3);
    border-top: 1px solid var(--grey-3)
}

.table-basic tfoot td {
    border-top: none;
}

.table-basic tr.active {
    background: var(--grey-4) !important;
    color: var(--black) !important;
}

    .table-basic tr.active td {
        border-top: 1px solid var(--border) !important;
    }

    .table-basic tr.active + tr td {
        border-top: 1px solid var(--border) !important;
    }

.table-basic.table-round thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
    border-left: 1px solid var(--border);
}

.table-basic.table-round thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
    border-right: 1px solid var(--border);
}

.table-basic.table-round tbody tr td:first-child {
    border-left: 1px solid var(--border);
}

.table-basic.table-round tbody tr td:last-child {
    border-right: 1px solid var(--border);
}

.table-basic tbody tr:last-child td, .table-basic tbody tr.search-last td {
    border-bottom: 1px solid var(--border);
}

.table-basic.table-round tbody tr:last-child td:first-child, .table-basic tbody tr.search-last td {
    border-bottom-left-radius: 8px;
}

.table-basic.table-round tbody tr:last-child td:last-child, .table-basic tbody tr.search-last td {
    border-bottom-right-radius: 8px;
}

.border-flat-right.table-basic.table-round thead tr:first-child th:last-child {
    border-top-right-radius: 0px;
}
.border-flat-left.table-basic.table-round thead tr:first-child th:first-child {
    border-top-left-radius: 0px;
}

.border-flat-left.table-basic.table-round tbody tr:last-child td:first-child, .table-basic tbody tr.search-last td {
    border-bottom-left-radius: 0px;
}
.border-flat-right.table-basic.table-round tbody tr:last-child td:last-child, .table-basic tbody tr.search-last td {
    border-bottom-right-radius: 0px;
}

.table-basic.table-round tbody tr:first-child td:first-child {
    border-top-left-radius: 8px;
}

.table-basic.table-round tbody tr:first-child td:last-child {
    border-top-right-radius: 8px;
}

.table-basic thead + tbody tr:first-child td:first-child, .table-basic thead + tbody tr:first-child td:last-child {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.table-border tbody tr td:not(:last-child) {
    border-right: 1px solid var(--grey-3)
}

.table-border thead th:not(:last-child):before {
    display: block;
    width: 1px;
    background: var(--grey-2);
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 0px;
}

tbody:empty {
    position: relative;
    height: 24px;
}

    tbody:empty::after {
        content: '';
        display: table-row;
        height: 24px;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        border-radius: 4px;
        border-top-left-radius: 0px;
        position: absolute;
        background: var(--white);
        column-span: all;
        width: 100%;
        border-bottom-right-radius: 0px;
    }



.filter-accordian .filter-body {
    position: absolute;
    height: 0px;
    overflow: hidden;
    min-width: 400px;
    max-width: 600px;
    background: var(--white);
    box-shadow: var(--shadow-2);
    transition: 0.2s;
    right: 0px;
    margin: 12px 16px;
    z-index: 9999;
    transform: scale(0.9);
    opacity: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.filter-accordian.open .filter-body {
    height: auto;
    box-shadow: var(--shadow-2);
    transform: scale(1);
    opacity: 1;
}

.header-accordian .header-body {
    position: absolute;
    height: 0px;
    overflow: hidden;
    min-width: 400px;
    max-width: 600px;
    background: var(--white);
    box-shadow: var(--shadow-2);
    transition: 0.2s;
    left: 0px;
    margin: 12px 16px;
    z-index: 9999;
    transform: scale(0.9);
    opacity: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.header-accordian.open .header-body {
    height: auto;
    box-shadow: var(--shadow-2);
    transform: scale(1);
    opacity: 1;
}

/*Bootstrap*/
hr {
    border-color: var(--border)
}
/*badges*/
.team-icon{
    display: inline-block !important;
}
.badge {
    padding: 0.25em 0.6em;
    display: inline;
}

.btn.badge {
    border: 1px solid;
}

.badge-lime {
    color: var(--black);
    background-color: var(--lime-2);
}

.badge-primary, .badge-success {
    color: var(--primary-active);
    background-color: var(--lime-opacity-2);
}

.btn.badge-primary:hover, .btn.badge-success:hover {
    color: var(--white);
    background-color: var(--primary);
}

.badge-dark {
    color: var(--black);
    background-color: var(--grey-2);
}

.btn.badge-dark:hover {
    color: var(--white);
    background-color: var(--black);
}

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

.badge-danger {
    color: var(--danger);
    background-color: var(--warmred-opacity-1);
}

.btn.badge-danger:hover {
    color: var(--white);
    background-color: var(--danger);
}

.badge-warning {
    color: var(--yellow-1);
    background-color: var(--yellow-opacity-1);
}

.btn.badge-warning:hover {
    color: var(--white);
    background-color: var(--yellow-1);
}

.badge-info {
    color: var(--skyblue-1);
    background-color: var(--skyblue-opacity-2);
}

.btn.badge-info:hover {
    color: var(--white);
    background-color: var(--skyblue-1);
}

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

.btn.badge-black:hover {
    color: var(--black);
    background-color: var(--black-opacity-2);
}

.form-control.hidden-input {
    border-color: transparent;
    padding-left: 0px;
    transition: .2s;
}

    .form-control.hidden-input:hover {
        border-color: var(--border);
        padding-left: .375rem;
    }

    .form-control.hidden-input:active, .form-control.hidden-input:focus {
        padding-left: .375rem;
        border-color: var(--lime-2);
    }


.form-control {
    background: var(--white);
    color: var(--text-grey-2);
    max-width: 400px;
    border-color: var(--border);
}

.form-control-lg {
    height: 52px;
}

.form-control:hover {
    border-color: var(--overlay-2) !important;
}

.form-control:focus {
    /*    border-color: var(--black) !important;
    box-shadow: 0 0 0 0.2rem var(--overlay-2) !important;*/
    border-color: var(--primary-hover) !important;
    box-shadow: 0 0 0 0.2rem var(--lime-4) !important;
    background: var(--white);
}

.form-control.minimise {
    width: 240px;
    opacity: 1;
    padding-right: 32px;
    transition: 0.2s;
}

    .form-control.minimise.closed {
        width: 0px;
        padding: 0px;
        opacity: 0;
    }

.form-control:disabled, .form-control[readonly] {
    background-color: var(--grey-3);
    opacity: 1;
}

textarea.form-control {
    min-height: 64px;
}


.Invalid.form-control, .input-validation-error.form-control, .Invalid.btn {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 0.2rem var(--warmred-opacity-2) !important;
}

    .Invalid.form-control + label {
        color: var(--danger) !important;
    }


.Duplicate.form-control {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 0.2rem var(--warmred-opacity-2) !important;
}

    .Duplicate.form-control + label {
        color: var(--danger) !important;
    }

.search-input {
    transition: 0.2s;
    border: 1px solid var(--border);
    border-radius: 6px;
    max-width: 402px;
}

    .search-input:hover {
        border-color: var(--tertiary-hover);
        box-shadow: var(--shadow-2);
    }

    .search-input:focus-within {
        border-color: var(--primary-hover);
        outline: 3px solid var(--lime-opacity-3);
    }

#GlobalSearch-Results {
    min-height: 48px;
    max-height: 481px;
    border-top: 1px solid var(--border);
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

#profile-search-details {
    margin-top: -38px;
    position: relative;
    z-index: 100;
    border-radius: 6px;
    background: var(--white);
    padding: 1rem;
}

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

.progress-bar {
    background-color: var(--lime-2);
}

.close {
    cursor: pointer;
    margin-top: 2px;
    color: unset;
    text-shadow: none;
}

.navbar {
    padding: 0.5rem 0rem;
}

.container.lg {
    max-width: 1400px;
}

.navbar .container {
    max-width: 100%;
    padding: 0px 36px;
}

.tooltip.fade.in {
    opacity: 1 !important;
}

.popover {
    border-color: var(--border);
    box-shadow: var(--shadow-1) !important;
    background-color: var(--black);
    z-index: 10000;
    max-width: 400px;
}

.popover-body {
    color: var(--white);
    background-color: transparent;
    max-height: 600px;
    overflow-y: auto;
}

.popover-header {
    color: var(--white);
    background-color: transparent;
    border: none;
    padding-bottom: 0px;
}

.bs-popover-auto[x-placement^=right] > .arrow::before, .bs-popover-right > .arrow::before {
    left: 0;
    border-width: .5rem .5rem .5rem 0;
    border-right-color: var(--grey-3);
}

.bs-popover-auto[x-placement^=right] > .arrow::after, .bs-popover-right > .arrow::after {
    border-right-color: var(--black);
}

.bs-popover-auto[x-placement^=left] > .arrow::after, .bs-popover-left > .arrow::after {
    border-left-color: var(--black);
}

.popover-body::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    border-radius: 0px;
    padding: 3px;
    background-color: var(--white);
}

.popover-body::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background-color: var(--white);
}

.popover-body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: none;
    background-color: rgba(0, 0, 0, 0.5);
    transition: 0.2s !important;
}

    .popover-body::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

.btn {
    cursor: pointer;
    font-weight: 500;
}

    .btn:disabled {
        cursor: default;
    }

    .btn.focus, .btn:focus {
        box-shadow: 0 0 0 0.2rem var(--lime-opacity-3);
    }

.validation-summary-errors ul, .vlidation-div span {
    margin: 0.5rem 0;
    list-style: none;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    background: var(--danger);
    color: var(--white);
    text-align: left;
    display: block;
}

/*Btns*/
.btn-primary {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
        color: var(--white) !important;
    }

    .btn-primary:active {
        color: var(--white) !important;
    }

    .btn-primary:active, .btn-primary:focus {
        background-color: var(--primary-active) !important;
        border-color: var(--primary-active) !important;
        box-shadow: 0 0 0 0.2rem var(--primary-disabled) !important;
    }

    .btn-primary:disabled {
        background-color: var(--primary-disabled);
        border-color: var(--primary-disabled);
        color: var(--black);
    }

.show > .btn-primary.dropdown-toggle {
    color: var(--black);
    background-color: var(--lime-2);
    border-color: var(--lime-2);
}

.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background: transparent !important;
}
.border-round.btn-outline-primary{
    border-color: var(--primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !IMPORTANT;
    color: var(--white) !important;
}

    .btn-outline-primary:active, .btn-outline-primary:focus {
        background-color: var(--primary-active) !important;
        border-color: var(--primary-active) !important;
        box-shadow: 0 0 0 0.2rem var(--primary-disabled) !important;
        color: var(--white) !important;
    }

    .btn-outline-primary:disabled {
        background-color: var(--primary-disabled);
        border-color: var(--primary-disabled);
        color: var(--primary) !important;
    }

.btn-secondary {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
}

    .btn-secondary:hover {
        background-color: var(--secondary-hover);
        border-color: var(--secondary-hover);
    }

    .btn-secondary:active, .btn-secondary:focus {
        background-color: var(--secondary-active) !important;
        border-color: var(--secondary-active) !important;
        box-shadow: 0 0 0 0.2rem var(--secondary-disabled) !important;
    }

    .btn-secondary:disabled {
        background-color: var(--secondary-disabled);
        border-color: var(--secondary-disabled);
    }

.btn-dark {
    color: var(--white);
    background-color: var(--tertiary);
    border-color: var(--tertiary);
}

    .btn-dark:hover {
        background-color: var(--tertiary-hover);
        border-color: var(--tertiary-hover);
    }

    .btn-dark:active, .btn-dark:focus {
        background-color: var(--tertiary-active) !important;
        border-color: var(--tertiary-active) !important;
        box-shadow: 0 0 0 0.2rem var(--tertiary-disabled) !important;
    }

    .btn-dark:disabled {
        background-color: var(--tertiary-disabled);
        border-color: var(--tertiary-disabled);
    }

.btn-light {
    border: 1px solid var(--border);
}

.btn-link {
    color: var(--tertiary);
    position: relative;
    text-decoration: none !important;
}

    .btn-link:hover {
        color: var(--tertiary-hover);
        background: var(--grey-3);
    }

    .btn-link:active, .btn-link:focus {
        color: var(--tertiary-active);
        box-shadow: 0 0 0 0.2rem var(--grey-2) !important;
    }

    .btn-link:disabled {
        color: var(--tertiary-disabled);
    }

    /* .btn-link::after {
        transition: 0.2s;
        position: absolute;
        left: .75rem;
        right: .75rem;
        bottom: 4px;
        height: 2px;
        background: transparent;
        content: "";
        display: block;
    }

    .btn-link:hover::after {
        left: 2rem;
        right: 2rem;
        background: var(--tertiary-hover);
    }

    .btn-link:active::after, .btn-link:focus::after {
        left: 1.2rem;
        right: 1.2rem;
        background: var(--tertiary-active);
    }*/

    /*    .btn-link.btn-sm::after {
        bottom: 0px;
        left: 2rem;
        right: 2rem;
    }

    .btn-link.btn-sm:hover::after {
        left: 0.0rem;
        right: 0.0rem;
    }

    .btn-link.btn-sm:active::after, .btn-link.btn-sm:focus::after {
        left: 1rem;
        right: 1rem;
    }*/

    .btn-link.light {
        color: var(--grey-2);
    }

/*.btn-link:active::after, .btn-link:focus::after, .btn-link:hover::after {
        background: var(--text-grey-4) !important;
    }*/

.btn-danger {
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

    .btn-danger:hover {
        background-color: var(--danger-hover);
        border-color: var(--danger-hover);
    }

    .btn-danger:active, .btn-danger:focus {
        background-color: var(--danger-active) !important;
        border-color: var(--danger-active) !important;
        box-shadow: 0 0 0 0.2rem var(--danger-disabled) !important;
    }

    .btn-danger:disabled {
        background-color: var(--danger-disabled);
        border-color: var(--danger-disabled);
    }

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

    .btn-outline-danger:hover {
        background-color: var(--danger-hover);
        border-color: var(--danger-hover);
    }

    .btn-outline-danger:active, .btn-outline-danger:focus {
        background-color: var(--danger-active) !important;
        border-color: var(--danger-active) !important;
        box-shadow: 0 0 0 0.2rem var(--danger-disabled) !important;
        color: var(--white);
    }

    .btn-outline-danger:disabled {
        background-color: var(--danger-disabled);
        border-color: var(--danger-disabled);
        color: var(--danger);
    }

.btn-pill {
    display: inline-flex;
}

    .btn-pill.active {
        background: var(--tertiary) !important;
        color: var(--white) !important;
    }

/*Alerts*/
#general-alert {
    right: calc(50vw - 240px);
    left: calc(50vw - 240px);
    position: fixed;
    bottom: -100px;
    transition: 0.3s;
    border: none;
    color: var(--white) !important;
    border-radius: 6px !important;
    padding: 1.1rem;
    width: 480px;
    z-index: 1000000;
    box-shadow: var(--shadow-3);
}

    #general-alert.active {
        bottom: 48px;
    }

#saving-alert {
    right: calc(50vw - 150px);
    left: calc(50vw - 150px);
    position: fixed;
    bottom: -100px;
    transition: 0.3s;
    border: none;
    color: var(--white) !important;
    border-radius: 6px !important;
    padding: 0.7rem;
    width: 300px;
    z-index: 1000000;
    box-shadow: var(--shadow-3);
    background: var(--skyblue-1);
}

    #saving-alert.active {
        bottom: 16px;
    }

.alert-warning {
    background: var(--yellow-opacity-1) !important;
    color: var(--yellow-1) !important;
}

.alert-info {
    background: var(--skyblue-1) !important;
}

.alert-danger {
    background: var(--danger) !important;
}

.alert-success {
    background: var(--primary) !important;
}

.picker-dialog {
    z-index: 99999;
}

/*Froala*/
.fr-popup {
    z-index: 99999 !important;
}

.fr-toolbar {
    background: var(--white) !important;
    z-index: 25;
}

.fr-second-toolbar {
    display: none !important
}

.fr-toolbar.fr-top {
    margin-bottom: 2rem;
    border: none !important;
    left: 0px;
    right: 0px;
    position: absolute;
    z-index: 999;
    /*    max-height : 40px;
    overflow-x : hidden;
    overflow-y : auto;*/
    /*padding: 0px 1.5rem;*/
}

.second-toolbar {
    height: 48px;
    border: none !important;
    border-radius: 0 !important;
}

.fr-box.fr-basic .fr-wrapper {
    border: none !important;
    background: var(--white) !important;
}

.fr-toolbar .fr-btn-grp {
    display: inline-block;
    margin: 0px !important;
}

.fr-box.fr-basic {
    transition: .2s;
    border-radius: 0px !important;
    padding-top: 50px;
}

.fr-command.fr-btn.fr-options {
    display: none;
}

.fr-box.fr-basic:focus-within {
    outline: 2px solid var(--lime-2) !important;
    box-shadow: 0 0 0 0.2rem var(--lime-4) !important;
    border-radius: 6px !important;
}

.full-height .fr-box.fr-basic {
    height: calc(100vh - 93px);
}

.fr-view img {
    max-width: 100%;
}

.fr-view h1, .fr-view h2, .fr-view h3, .fr-view h4, .fr-view h5, .fr-view h6, .fr-view p, .fr-view span {
    font-family: inherit;
}

.fr-view:not(.preview) table td:hover, .fr-view:not(.preview) table th:hover {
    border-color: var(--text-grey-1) !important;
}

.fr-element table td.fr-selected-cell, .fr-element table th.fr-selected-cell {
    border: 1px double var(--skyblue-1) !important;
}

#logo, .fr-counter {
    display: none !important;
}

.fr-toolbar .fr-newline {
    background: transparent !important;
}

.fr-box.fr-basic .fr-element {
    color: var(--text-grey-1) !important;
}

fr-placeholder {
    padding-top: 20px;
    padding-left: 20px;
}

.fr-toolbar .fr-command.fr-btn.fr-dropdown:after, .fr-popup .fr-command.fr-btn.fr-dropdown:after, .fr-modal .fr-command.fr-btn.fr-dropdown:after {
    display: none !important;
    content: none !important;
}

/*.fr-toolbar .fr-command.fr-btn svg path, .fr-popup .fr-command.fr-btn svg path, .fr-modal .fr-command.fr-btn svg path {
    fill: var(--text-grey-1) !important;
}*/

.fr-toolbar .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path {
    fill: var(--primary);
}

button#fontFamily-1 span {
    font-weight: bold;
    width: 72px !important;
    color: var(--text-grey-1) !important;
}

.fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a {
    color: #36363e !important;
}

.dark-mode .fr-view h1[style*="color:#000000;"],
.dark-mode .fr-view h2[style*="color:#000000;"],
.dark-mode .fr-view h3[style*="color:#000000;"],
.dark-mode .fr-view h4[style*="color:#000000;"],
.dark-mode .fr-view h5[style*="color:#000000;"],
.dark-mode .fr-view h6[style*="color:#000000;"],
.dark-mode .fr-view p[style*="color:#000000;"],
.dark-mode .fr-view span[style*="color:#000000;"] {
    color: var(--text-grey-1) !important;
}

.dark-mode .fr-view h1[style*="color:#000;"],
.dark-mode .fr-view h2[style*="color:#000;"],
.dark-mode .fr-view h3[style*="color:#000;"],
.dark-mode .fr-view h4[style*="color:#000;"],
.dark-mode .fr-view h5[style*="color:#000;"],
.dark-mode .fr-view h6[style*="color:#000;"],
.dark-mode .fr-view p[style*="color:#000;"],
.dark-mode .fr-view span[style*="color:#000;"] {
    color: var(--text-grey-1) !important;
}

.fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn {
    height: 32px !important;
}

    .fr-toolbar .fr-command.fr-btn i, .fr-toolbar .fr-command.fr-btn svg, .fr-popup .fr-command.fr-btn i, .fr-popup .fr-command.fr-btn svg, .fr-modal .fr-command.fr-btn i, .fr-modal .fr-command.fr-btn svg {
        margin: 4px !important;
    }

/*Async Loader*/
.async-section {
}

@media (max-width: 500px) {
    .fr-box.fr-basic {
        padding-top: 81px !important;
    }

    :root {
        --sidebar-width: 0px !important;
    }

    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .modal-body {
        margin-bottom: 6rem;
    }

    .page-modal.xl .modal-body {
        max-width: 100%;
    }

    .tablet-hide {
        display: none !important;
    }

    .tablet-show {
        display: block !important;
    }

    .tablet-d-block {
        display: block !important;
    }

    .tablet-w-100 {
        width: 100% !important;
        max-width: 100% !important;
        flex: unset;
    }

    sidebar {
        left: -240px;
        width: 240px;
        top: var(--navbar-heights);
    }

        sidebar.open {
            left: 0px;
            box-shadow: var(--shadow-1) !important;
        }

    .main-body {
        margin-left: 0px;
    }
}

.mobile-show {
    display: none !important;
}

@media (max-width: 500px) {
    body, html {
        height: 100%;
        width: 100%;
        margin: 0;
    }

    sidebar {
        height: calc(100% - var(--navbar-height));
    }

    :root {
        --navbar-height: 52px;
    }

    .sidebar-body {
        padding: 1.5rem 0px 1rem;
        height: 100%;
        min-height: calc(100% - var(--navbar-height));
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: hidden;
    }


    .box {
        box-shadow: 0px 1px 0px rgba(0,0,0,0.1);
    }
        .box .box {
            box-shadow: none;
        }

        .modal-container:before {
            height: 64px;
        }

    .table-basic thead th:first-of-type, .table-basic tbody td:first-of-type {
        padding-left: 8px;
    }

    #general-alert {
        width: auto !important;
        left: 24px !important;
        right: 24px !important;

    }

    sidebar {
        left: -100vw;
        width: 100vw;
    }

    .mobile-hide {
        display: none !important;
    }


    .filter-accordian .filter-body {
        min-width: 80vw;
    }

    .header-accordian .header-body {
        min-width: 80vw;
    }

    .mobile-p0 {
        padding: 0px;
    }

    .mobile-show {
        display: block !important;
    }

    .mobile-d-block {
        display: block !important;
    }

    .mobile-w-100 {
        width: 100% !important;
        max-width: 100% !important;
        flex: unset;
    }

    .sidebar-right {
        width: 100vw;
        box-shadow: none;
    }
}

.mobile-sm-show {
    display: none !important;
}

@media (max-width: 374px) {
    .mobile-sm-hide {
        display: none !important;
    }

    .mobile-sm-show {
        display: block !important;
    }

    .mobile-sm-d-block {
        display: block !important;
    }

    .mobile-sm-w-100 {
        width: 100% !important;
        max-width: 100% !important;
        flex: unset;
    }
}

/* WEGLOT */
.iti {
    width: 100%;
}

.wg-no-translate {
}

.wg-force-translate {
}

.wg-default, .wg-default .country-selector {
    top: -48px;
    right: -144px !important;
    bottom: unset !important;
}

.wg-drop.country-selector .wgcurrent:after {
    display: none !important;
    content: none !important;
}

.wg-drop.country-selector {
    background: transparent !important;
}

.wg-drop.country-selector {
    background: transparent !important;
}

    .wg-drop.country-selector .wgcurrent {
        border: none !important;
    }

.wgcurrent.wg-li a {
    color: var(--white) !important;
    font-weight: 400;
}

.wg-drop.country-selector .wgcurrent a {
    padding: 2px !important;
}

.wg-li a {
    color: var(--text-grey-1) !important;
    font-weight: bold;
}

.wg-flags a img.wg-flag {
    margin-right: 0px !important;
    height: 20px !important;
}

/* Hide elements with the class english-hide when the language is set to swedish. */
.wg-sv-hide :lang(sv) {
    display: none !important;
}

/* Hide elements with the class swedish-hide when the language is set to english. */
.wg-en-hide :lang(en) {
    display: none !important;
}

/* Hide elements with the class english-hide when the language is set to swedish. */
.wg-sv-show {
    display: none !important;
}

    .wg-sv-show:lang(sv) {
        display: inherit !important;
    }
/* Hide elements with the class english-hide when the language is set to finnish. */
.wg-fi-show {
    display: none !important;
}

    .wg-fi-show:lang(fi) {
        display: inherit !important;
    }
/* Hide elements with the class english-hide when the language is set to Portuguese. */
.wg-pt-show {
    display: none !important;
}
    .wg-pt-show:lang(pt) {
        display: inherit !important;
    }
/* Hide elements with the class swedish-hide when the language is set to english. */
.wg-en-show {
    display: none !important;
}

    .wg-en-show:lang(en) {
        display: inherit !important;
    }

.Invalid-date {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 0.2rem var(--warmred-opacity-2) !important;
}

.background-white {
    background: white;
}

.invite-cards {
    flex-direction: row;
    gap: 50px;
}

@media (max-width: 860px) {
    .invite-cards {
        flex-direction: column;
    }
}

#StaffPermissionsBody {
    position: relative;
}

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

.hiddenTest {
    width: 0px;
    opacity: 0;
    visibility: hidden;
}

.visibleTest {
    width: var(--sidebar-body-width);
    opacity: 1;
}
.visibleTest--maxwidth {
    max-width: var(--sidebar-body-width) !important;
    width:100% !important;
}

.StaffDetailsSection {
    position: absolute;
    right: 0px;
    z-index: 999;
    height: calc(100vh - var(--navbar-height));
    bottom: 0px;
    box-shadow: var(--shadow-3);
}

.dropdown-menu-size {
    max-height: 150px;
    overflow-y: scroll;
}

.Invalid .dropdown-toggle {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background: transparent !important;
}

.Invalid .dropdown-menu .bg-primary {
    background: var(--danger) !important;
    color: var(--white);
}


.filter-container {
    z-index: 1000;
}

.filter-panel {
    position: absolute;
    right: 0;
    top: 100%;
    width: 360px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 16px;
    margin-top: 8px;
    border: 1px solid #DEDFDE;
}

.info-wrapper {
    position: relative;
}

.info-trigger {
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.info-trigger:hover {
    background-color: var(--grey-4);
}

.info-card {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 280px;
    z-index: 1000;
    animation: fadeIn 0.2s ease-in-out;
}

.info-card.position-top {
    top: auto;
    bottom: calc(100% + 8px);
}

.info-card::before {
    content: '';
    position: absolute;
    right: 16px;
    width: 8px;
    height: 8px;
    background: white;
    transform: rotate(45deg);
    box-shadow: -2px -2px 2px rgba(0,0,0,0.03);
}

.info-card::before {
    top: -4px;
}

.info-card.position-top::before {
    top: auto;
    bottom: -4px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.03);
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(-4px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInTop {
    from { 
        opacity: 0; 
        transform: translateY(4px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.info-card.position-top {
    animation: fadeInTop 0.2s ease-in-out;
}

.info-card-header {
    padding: 16px;
    border-bottom: 1px solid var(--grey-4);
}

.info-card-body {
    padding: 16px;
}

.info-section {
    padding-bottom: 8px;
}

.info-section:not(:last-child) {
    border-bottom: 1px solid var(--grey-4);
}

.gap-2 {
    gap: 8px;
}

.info-wrapper:hover .info-card {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }

}

.loader-body {
    top: var(--navbar-height);
    left: var(--sidebar-width);
    right: 0px;
    bottom: 0px;
    background: var(--overlay-light-2);
}

.loader-page {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: var(--overlay-light-2);

}


.disabled-div {
    background-color: var(--grey-3);
    pointer-events: none;
}

.dropleft .dropdown-toggle::before {
    content: none !important;
}
}

.cursor-not-allowed{
    cursor: not-allowed;
}

.dropdown-menu-right {
    left: auto !important;
}

.break-word {
    overflow-wrap: anywhere;
    white-space: normal;
}

#contract-request-editor_ifr {
    height: 100%;
}

.min-h-100px {
  min-height: 100px;
}

.tox-notification--error, .tox-notification--info {
  display: none !important;
  opacity: 0 !IMPORTANT;
  height: 0px !important;
  width: 0px !important;
  padding: 0px !important;
}

/* Child Birth Date Input Styles */
.child-birth-date-input.is-invalid {
    border: 2px solid #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
}

.child-birth-date-input.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
    outline: none;
}

.child-birth-date-input.legacy-year-only {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: #ffc107;
    font-style: italic;
    color: #6c757d;
}

.child-birth-date-error {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.child-birth-date-input::placeholder {
    color: #6c757d;
    font-style: italic;
}