:root{
    --warning: #FF6200;
    --dark-warning: #df5600;
    --light-warning: #fff6f0;
    --purple: #3C2CEF;
    --dark-purple: #170b9a;
    --light-purple: #F3F2FF;
    --deep-blue: #1C2747;
    --light-error-red: #FFEBEB;
    --error-red: #B40100;
    --dark-error-red: #900000;
    --danger-dark: #ca3a17;
    --danger-light: #ff6d48;
    --danger : #ef4464;
    --light-danger : #ffedf0;
    --dark-gray: #7C7C7C;
    --blue-gray: #72818f;
    --light-sunflower: #FFFBEF;
    --sunflower: #FFBB00;
    --dark-sunflower: #D79D00;
    --darker-sunflower: #B78704;
    --light-lake: #EAFFFC;
    --lake: #14EACA;
    --lake-text: #111641;
    --dark-lake: #11c2a8;
    --darker-lake: #00816E;
    --dull-gray: #A0A0A0;
    --dark-dull-gray: #707070;
    --background: #F8F8F8;
    --black: #000;
    --faint-gray: #F4F5FD;
    --light-gray: #DFDFDF;
    --footer-text-gray: #C7DFF7;
    --olive: #D6CFB7;
    --mottled-lighter: #335E65;
    --mottled-light: #325055;
    --mottled-green: #2B4548;
    --off-white: #FFFBEF;
    --white: #FFFFFF;
    --faint-blue-bg: #EFF6FD;

    --blue : #1c7dfa;
    --blue-dark : #166fe4;
    --background : #f4f5f7;
    --uploader-blue : #f5f9ff;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    --gutter-xxxs: 2px;
    --gutter-xxs: 4px;
    --gutter-m: 5px;
    --gutter-xs: 6px;
    --gutter-1_5xs: 9px;
    --gutter-2xs: 12px;
    --gutter-half: 15px;
    --gutter-sm: 20px;
    --gutter: 30px;

    --font-size-xxs: 11px;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-m: 14px;
    --font-size: 16px;
    --font-size-l: 18px;
    --font-size-xl: 20px;
    --font-size-x2l: 24px;
    --font-size-xxl: 32px;

    --form-element-height: 50px;

    --btn-padding-x : 32px;
    --btn-padding-y : 16px;
    --btn-radius : 8px;
    --btn-padding-x-sm : 18px;
    --btn-padding-y-sm : 12px;
    --btn-radius-sm : 6px;
    --btn-padding-x-lg : 30px;
    --btn-padding-y-lg : 24px;
    --btn-radius-lg : 8px;

    --modal-padding: 20px;

    --icon-bg-size-xxl: 120px;
    --icon-bg-size-lg: 80px;
    --icon-size-lg: 48px;
    --icon-bg-size: 40px;
    --icon-size: 22px;
    --icon-bg-size-sm: 32px;
    --icon-size-sm: 18px;

    --popover-width : 400px;
    --popover-width-sm : 240px;
    --popover-padding: 20px;

    --table-header-bg: #F7F8FF;

    --pagination-item-size: 32px;
    --pagination-font-size: var(--font-size);

    --shadow : 0px 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-xxl : 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --layover-max-width: 540px;
    --layover-min-width: 300px;

    --kpi-icon-bg-size: 80px;
    --kpi-icon-size: 44px;

    --location-snippet-size: 300px;
    --sdg-snippet-width: 422px;
    --sdg-snippet-height: 152px;
    --sdg-icon-size: 120px;
    --sdg-icon-size-sm: 90px;
    --legend-size: 12px;

    --filter-field-width: 250px;
}
@font-face {
    font-family: "Poppins";
    src: url("../font/Poppins/Poppins-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Roman.ttf");
    font-weight: 500;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Black.ttf");
    font-weight: 900;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-BlackOblique.ttf");
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Book.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-BookOblique.ttf");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Light.ttf");
    font-weight: 100;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-LightOblique.ttf");
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Medium.ttf");
    font-weight: 600;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-MediumOblique.ttf");
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-Heavy.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "Avenir";
    src: url("../font/Avenir/Avenir-HeavyOblique.ttf");
    font-weight: 700;
    font-style: italic;
}
body{
    font-family: "Avenir", Arial, Helvetica, sans-serif;
    top : 0px !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y:hidden;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* -webkit-touch-callout: none; /* iOS Safari */
    /* -webkit-user-select: none; Safari */
     /* -khtml-user-select: none; Konqueror HTML */
       /* -moz-user-select: none; Old versions of Firefox */
        /* -ms-user-select: none; Internet Explorer/Edge */
        /* user-select: none; */
    font-size: var(--font-size);
    background-color: var(--background);
}
body::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
a{
    color: var(--dark-lake);
    text-decoration: none;
}
.link{
    cursor: pointer;
}
/**
 * Links
 */
.link-faded{
    color: var(--blue-gray) !important;
    text-decoration: none;
}
/**
 * Form
 */
.form-group{
    margin-bottom: var(--gutter-half);
}
.form-group > label{
    font-weight: 900;
    margin-bottom: var(--gutter-xs);
}
.form-group .field-value{
    margin-top: calc(-1 * var(--gutter-xs));
    font-size: var(--font-size-m);
    font-weight: 700;
    color: var(--blue-gray);
}
.form-control{
    border-color: var(--light-gray);
    border-width: 1px;
    border-radius: var(--radius);
    min-height: var(--form-element-height);
}
.form-check-input:checked{
    border-color: var(--mottled-green);
    background-color: var(--mottled-green);
}
.form-check-input:checked[type="checkbox"]{
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFBB00' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-group.has-error .help-block{
    color: var(--error-red);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-top: var(--gutter-xs);
}
.form-text{
    font-weight: 600;
    color: var(--blue-gray);
    font-size: var(--font-size-sm);
}
.form-control[readonly]{
    background-color: var(--background);
    cursor: not-allowed;
}
.form-control.date[readonly]{
    background-color: var(--white);
}
.form-switch .alttext, .form-switch .text{
    min-width: 80px;
    display: inline-block;
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.form-switch .alttext{
    display: none;
}
.form-switch.has-alttext.checked .alttext{
    display: inline-block;
}
.form-switch.has-alttext.checked .text{
    display: none;
}
/** Switcher */

/** Dropdown Form Control */
.select2 {
    width:100%!important;
}
.form-select:focus, .form-control:focus,
.select2-search__field:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
    border-color: var(--light-gray) !important;
    box-shadow : 0 0 0 0.25rem var(--background) !important;
}
.select2-selection__choice{
    display: inline-block !important;
    background-color: var(--light-lake) !important;
    color: var(--mottled-green) !important;
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--mottled-green) !important;
}
.select2-selection__choice__remove{
    color: var(--white) !important;
    vertical-align: middle;
    margin-top: -3px;
}
.select2-dropdown{
    border-radius: var(--radius) !important;
    border: 0.5px solid var(--light-gray) !important;
}
.select2-search{
    padding: .75rem !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled="true"]{
    background-color: var(--blue-gray);
    color: var(--white);
    text-transform: uppercase;
    font-size: var(--font-size-m);
    font-weight: 900;
}
.select2-container .select2-selection--single{
    height: var(--form-element-height);
}
.select2-container .select2-selection--single.form-select-lg{
    height: 60px;
    padding: .9375rem 2.25rem .9375rem 1.875rem;
    border-radius: 1.875rem !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding-left: 0px;
}
.select2-container--bootstrap-5 .select2-selection--single{
    padding: 12px 2.25rem 12px 1rem;
    border-radius: var(--radius) !important;
    border-color: var(--light-gray) !important;
}
.select2-container .select2-selection--multiple{
    padding: 12px 1.5rem 12px 1rem;
    border-radius: var(--radius) !important;
    border-color: var(--light-gray) !important;
    min-height: 48px !important;
    line-height: 1 !important;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{
    margin-bottom: 0 !important;
    font-size: 0.9rem !important;
}
.select2-container--bootstrap-5.select2-container--disabled .select2-selection, .select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection{
    background-color: var(--background);
}
.select2-search--inline{
    display: none !important;
}
.select2-container--focus .show-search .select2-search--inline{
    display: block !important;
    width: auto !important;
    position: relative;
}
.show-search .select2-search--inline:before{
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    content: "\e955";
    position: absolute;
    left: 0;
    top: 4px;
}
.show-search .select2-search {
    padding: 0rem !important;
    padding-left: 20px !important;
}
.show-search .select2-search textarea{
    min-width: 60px;
}
.show-search .select2-search--inline textarea:focus{
    border-color: transparent !important;
    box-shadow : none !important;
}
.select2-selected-box{
    display: flex;
    width: auto;
    align-items: center;
    justify-content: start;
}
.select2-selected-box .icon{
    font-size: 24px;
    line-height: 1;
    margin-right: 5px;
    color: var(--mottled-green);
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted{
    background-color: var(--light-sunflower) !important;
    color: var(--black) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted){
    background-color: var(--light-sunflower) !important;
    color: var(--black) !important;
}
.select2-results__group{
    display: block;
    padding: .375rem .75rem !important;
    font-size: 1rem;
    color: var(--gray) !important;
    font-weight: 400 !important;
}
.select2-results__options--nested > li{
    padding-left: 2.5rem !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove{
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B4548'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover{
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232B4548'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;
}
/**  Buttons */
.btn{
    --bs-btn-padding-x: var(--btn-padding-x);
    --bs-btn-padding-y: var(--btn-padding-y);
    --bs-btn-border-radius: var(--btn-radius);
    font-weight: 700;
    font-size: var(--font-size);
    line-height: 1 !important;
}
.btn.btn-sm {
    --bs-btn-padding-x: var(--btn-padding-x-sm);
    --bs-btn-padding-y: var(--btn-padding-y-sm);
    --bs-btn-border-radius: var(--btn-radius-sm);
    font-size: var(--font-size-m);
    line-height: 1;
}
.btn-block.btn-sm{
    width: 200px;
}
.btn.btn-lg {
    --bs-btn-padding-x: var(--btn-padding-x-lg);
    --bs-btn-padding-y: var(--btn-padding-y-lg);
    --bs-btn-border-radius: var(--btn-radius-lg);
    font-size: var(--font-size-xl);
}
.btn-block.btn-lg{
    width: 500px;
}
.btn-outline{
    color: var(--black);
    font-weight: 500;
    --bs-btn-bg : var(--faint-gray);
    --bs-btn-border-color: var(--blue-gray);
    --bs-btn-hover-bg: var(--light-gray);
    --bs-btn-hover-border-color: var(--blue-gray);
    --bs-btn-active-bg: var(--faint-gray);
    --bs-btn-active-border-color: var(--blue-gray);
    --bs-btn-disabled-bg: var(--faint-gray);
    --bs-btn-disabled-border-color: var(--blue-gray);
}
.btn-success{
    --bs-btn-bg : var(--dark-lake);
    --bs-btn-border-color: var(--dark-lake);
    --bs-btn-hover-bg: var(--lake);
    --bs-btn-hover-border-color: var(--dark-lake);
    --bs-btn-active-bg: var(--dark-lake);
    --bs-btn-active-border-color: var(--darker-lake);
    --bs-btn-disabled-bg: var(--darker-lake);
    --bs-btn-disabled-border-color: var(--darker-lake);
    color : var(--white) !important;
}
.btn-primary{
    --bs-btn-bg : var(--sunflower);
    --bs-btn-border-color: var(--sunflower);
    --bs-btn-hover-bg: var(--sunflower);
    --bs-btn-hover-border-color: var(--dark-sunflower);
    --bs-btn-active-bg: var(--dark-sunflower);
    --bs-btn-active-border-color: var(--darker-sunflower);
    --bs-btn-disabled-bg: var(--darker-sunflower);
    --bs-btn-disabled-border-color: var(--darker-sunflower);

    --bs-btn-color : var(--mottled-green);
    --bs-btn-hover-color : var(--mottled-green);
    --bs-btn-disabled-color : var(--white);
    --bs-btn-active-color: var(--white);
}
.btn-danger{
    --bs-btn-bg : var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-dark);
    --bs-btn-hover-border-color: var(--danger-dark);
    --bs-btn-active-bg: var(--danger-dark);
    --bs-btn-active-border-color: var(--danger-dark);
    --bs-btn-disabled-bg: var(--danger-dark);
    --bs-btn-disabled-border-color: var(--danger-dark);
    color: var(--white) !important;
}
.btn-info{
    --bs-btn-bg : var(--purple);
    --bs-btn-border-color: var(--purple);
    --bs-btn-hover-bg: var(--dark-purple);
    --bs-btn-hover-border-color: var(--dark-purple);
    --bs-btn-active-bg: var(--dark-purple);
    --bs-btn-active-border-color: var(--dark-purple);
    --bs-btn-disabled-bg: var(--dark-purple);
    --bs-btn-disabled-border-color: var(--dark-purple);
    color: var(--white) !important;
}
.btn-warning{
    --bs-btn-bg : var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-bg: var(--dark-warning);
    --bs-btn-hover-border-color: var(--dark-warning);
    --bs-btn-active-bg: var(--dark-warning);
    --bs-btn-active-border-color: var(--dark-warning);
    --bs-btn-disabled-bg: var(--dark-warning);
    --bs-btn-disabled-border-color: var(--dark-warning);
    color: var(--white) !important;
}
.btn-dark{
    --bs-btn-bg : var(--mottled-green);
    --bs-btn-border-color: var(--mottled-green);
    --bs-btn-hover-bg: var(--mottled-light);
    --bs-btn-hover-border-color: var(--mottled-light);
    --bs-btn-active-bg: var(--mottled-light);
    --bs-btn-active-border-color: var(--mottled-light);
    --bs-btn-disabled-bg: var(--mottled-light);
    --bs-btn-disabled-border-color: var(--mottled-light);
    color: var(--sunflower) !important;
}
.btn-dark-2{
    --bs-btn-bg : var(--mottled-green);
    --bs-btn-border-color: var(--mottled-green);
    --bs-btn-hover-bg: var(--mottled-light);
    --bs-btn-hover-border-color: var(--mottled-light);
    --bs-btn-active-bg: var(--mottled-light);
    --bs-btn-active-border-color: var(--mottled-light);
    --bs-btn-disabled-bg: var(--mottled-light);
    --bs-btn-disabled-border-color: var(--mottled-light);
    color: var(--white) !important;
}
.btn-light{
    --bs-btn-bg : var(--white);
    --bs-btn-border-color: var(--light-gray);
    --bs-btn-hover-bg: var(--faint-gray);
    --bs-btn-hover-border-color: var(--light-gray);
    --bs-btn-active-bg: var(--faint-gray);
    --bs-btn-active-border-color: var(--light-gray);
    --bs-btn-disabled-bg: var(--faint-gray);
    --bs-btn-disabled-border-color: var(--light-gray);
    color: var(--black) !important;
}
.btn-rounded{
    border-radius: calc(var(--font-size-xl)/2 + var(--btn-padding-y));
}
.btn-rounded.btn-sm{
    border-radius: calc(var(--font-size-m)/2 + var(--btn-padding-y-sm));
}
.btn-rounded.btn-lg{
    border-radius: calc(var(--font-size-xxl)/2 + var(--btn-padding-y-lg));
}
.btn .icon{
    display: inline-block;
    margin-right: var(--gutter-1_5xs);
    font-size: calc(var(--font-size-xl));
    margin-top: -5px;
    margin-bottom: -5px;
}
.btn.btn-sm .icon{
    font-size: var(--font-size-m);
    margin-right: var(--gutter-xs);
}
.btn.btn-lg .icon{
    font-size: calc(var(--font-size-xl) + 10px);
}
.btn .btn-text{
    display: inline-block;
    padding-right: 10px;
}
.btn.btn-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn.btn-icon-right .icon{
    margin-left: var(--gutter);
    margin-right: 0;
}
.btn.btn-icon-right .btn-text{
    padding-right: 0px;
    padding-left: 10px;
}
.btn.btn-icon-justified .icon{
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.btn.btn-icon-justified .btn-text{
    flex-grow: 1;
    padding: 0 !important;
}
/* Modals */
.modal-header, .modal-body{
    padding: var(--modal-padding);
}
.modal-dark .modal-body{
    padding-top: 0;
}
.modal-header{
    border-bottom-width: 0px;
    background-color: var(--faint-gray);
    padding-top: var(--gutter-2xs);
    padding-bottom: var(--gutter-2xs);
}
.modal-header .btn-close{
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-header .btn-close:before{
    content: "\e912";
    font-family: "icomoon";
    font-size: var(--icon-size);
}
.modal-header-content{
    display: flex;
    align-items: center;
    font-size: var(--font-size-l);
    font-weight: 700;
    color: var(--mottled-green);
}
.modal-header-content .icon{
    display: inline-block;
    background-color: var(--mottled-green);
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--gutter-xs);
    font-size: var(--icon-size);
    color: var(--lake);
}
.modal-dark .modal-header,.modal-dark .modal-body{
    background-color: var(--mottled-green);
    color: var(--white);
}
.modal-dark .modal-header-content{
    color: var(--white);
}
.modal-dark .modal-header-content .icon{
    background-color: var(--sunflower);
    color: var(--mottled-green);
}
.modal-dark .modal-header .btn-close{
    color: var(--white);
}
.modal-dark .form-group > label{
    font-weight: 600;
}
.modal-dark .form-control{
    border-width: 0;
    border-color: transparent;
}
.modal-dark .form-group.has-error .help-block{
    color: var(--sunflower);
}
.modal-dark .form-select:focus,
.modal-dark .form-control:focus,
.modal-dark .select2-search__field:focus,
.modal-dark .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.modal-dark .select2-container--bootstrap-5.select2-container--open .select2-selection{
    box-shadow : 0 0 0 0.25rem var(--mottled-light) !important;
    border-color: transparent !important;
}
/** Alert **/
.alert{
    padding: 9px 16px;
    display: inline-block;
    max-width : 640px;
    width : 100%;
    margin: auto;
}
.alert-dismissible{
    padding-right: 64px;
}
.alert-dismissible .btn-close{
    padding: 9px 16px;
    margin-top: -16px;
    top : 50%;
    font-size: 14px;
}
.alert-success{
    background-color: var(--light-lake) !important;
    border-color: var(--darker-lake) !important;
}
.alert-danger{
    background-color: var(--light-danger) !important;
    border-color: var(--danger-dark) !important;
    color : var(--danger-dark) !important;
}
.alert-warning{
    background-color: var(--light-warning) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}
.alert-disabled{
    background-color: var(--faint-gray) !important;
    border-color: var(--light-gray) !important;
    color: var(--blue-gray) !important;
}
/** Loader **/
.loading{
    height: 100vh;
    width: 100vw;
    z-index: 3005;
    background-color: rgba(255,255,255,0.85);
}
.spinner {
    width: 80px;
    height: 80px;  
    position: relative;
    margin: 100px auto;
}
.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--mottled-green);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
} 
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
} 
@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}  
@keyframes sk-bounce {
    0%, 100% { 
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% { 
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}
/* Toast */
.app-toast-manager{
    width:100%;
    bottom: 0px;
    height:auto;
    position:fixed;
    display: flex;
    left : 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index : 1000010;
}
.app-toast{
    max-width: 400px;
    min-width: 300px;
    background-color: var(--dark-lake);
    color : #fff;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.4rem;
    -webkit-box-shadow: var(--shadow-xxl);
    -moz-box-shadow: var(--shadow-xxl);
    box-shadow: var(--shadow-xxl);
    margin: 0px 0 15px;
}
.app-toast.danger{
    background-color: var(--danger);
}
.app-toast.warning{
    background-color: var(--dark-warning);
}
/**
 * Popover
 */
 #app-backdrop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: var(--black) !important;
    display: none;
    opacity: 0.15;
}
.app-popover a{
    color: var(--black);
}
.app-popover{
    z-index: 1060;
    position: absolute;
    background-color: var(--white);
    box-shadow : 0px 0px 10px rgba(0, 0, 0, 0.15);
    display: none;
    padding: var(--popover-padding);
    max-width: 90%;
    width: var(--popover-width);
    border-radius: var(--radius);
    margin: 0 var(--gutter-xs);
}
.app-popover-dark{
    background-color: var(--mottled-green);
    color: var(--white);
}
.app-popover-dark a{
    color: var(--lake);
}
.app-popover.show{
    display: block;
}
.app-popover-full{
    padding : 0px;
}
.popover-title{
    height: 60px;
    background-color: var(--lake);
    color: var(--white);
    text-align: center;
    line-height: 60px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-size: 18px;
    font-weight: 600;
}
.app-popover-header{
    display: flex;
    align-items: center;
    font-size: var(--font-size-l);
    font-weight: 700;
    margin-bottom: var(--gutter-half);
}
.app-popover-header .icon{
    display: inline-block;
    background-color: var(--sunflower);
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--gutter-xs);
    font-size: var(--icon-size);
    color: var(--mottled-green);
}
.app-popover-header .icon.close{
    display: inline-block;
    background-color: transparent;
    width: calc(var(--icon-bg-size)/3);
    height: calc(var(--icon-bg-size)/3);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--gutter-xs);
    font-size: var(--icon-size);
    color: var(--white);
    cursor: pointer;
}
.app-popover-title{
    flex: 1;
}
.action-popover{
    padding: 0;
    width: var(--popover-width-sm);
}
.app-popover-menu{
    padding : var(--gutter-1_5xs) var(--gutter-half);
    border-bottom: 1px solid var(--faint-gray);
    font-size: var(--font-size-m);
    text-decoration: none;
    cursor: pointer;
}
.app-popover-menu .icon{
    display: block;
    margin-right: var(--gutter-xs);
    font-size: var(--icon-size);
}
.app-popover-menu:last-child{
    border-bottom-width: 0px;
}
.app-popover-menu.text-danger{
    color: var(--danger) !important;
}
.app-popover-menu.text-warning{
    color: var(--warning) !important;
}
.app-popover-menu.text-purple{
    color: var(--purple) !important;
}
/* Search Lists */
.search-list{
    max-height: 350px;
}
.search-list-item{
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background-color: var(--mottled-light);
    padding: calc(var(--gutter-sm)/2) var(--gutter-half);
    margin-bottom: var(--gutter-xs);
}
.search-list-item.active{
    background-color: var(--sunflower);
    color: var(--mottled-green);
}
.search-list-item .search-item-label{
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
}
.search-list-item .icon{
    color: var(--sunflower) !important;
    text-decoration: none;
}
.search-list-item.active .icon{
    color: var(--mottled-green) !important;
}
/* Table */
.table > tbody > tr > td{
    font-size: var(--font-size-m);
    font-weight: 600;
}
.table > thead > tr > th > a{
    color: inherit;
    text-decoration: none;
}
.table > thead > tr > th .icon{
    margin-left: var(--gutter-half);
    color: var(--blue-gray);
    font-size: 1.2em;
}
.table > :not(caption) > * > * {
    padding: var(--gutter-xs) var(--gutter-2xs);
    vertical-align: middle;
    background-color: transparent;
    border-bottom-color: var(--light-gray);
}
.table > thead > tr > th{
    background-color: var(--table-header-bg);
    font-weight: 900;
    font-size: var(--font-size-m);
    padding: var(--gutter-2xs);
    /* border-top: 1px solid var(--light-gray); */
}
.table > tbody > tr.inactive > td{
    background-color: var(--faint-gray);
    color: var(--blue-gray);
}
.table > tbody > tr.disabled > td, .table > tbody > tr.disabled > th{
    background-color: var(--faint-gray);
    color: var(--blue-gray);
    text-decoration: line-through;
}
.table > tbody > tr.disabled > *{
    text-decoration: line-through;
}
.table > tbody > tr.inactive > td:not(.actions){
    filter: blur(4px);
    text-decoration: line-through;
}
.table > tbody > tr.demo > td{
    background-color: var(--light-sunflower);
}
.table > tbody > tr.not-init > td{
    background-color: var(--faint-gray);
    color: var(--blue-gray);
}
.modal .table > thead > *:first-child > *, .modal .table > tbody > *:first-child > *{
    border-top: 1px solid var(--light-gray);
}
.modal .table > * > * > *:first-child {
    border-left: 1px solid var(--light-gray);
}
.modal .table > * > * > * {
    vertical-align: top;
}
.modal .table > * > * > *:last-child {
    border-right: 1px solid var(--light-gray);
}
.modal.summary .table tr > * {
    border-color: var(--background);
}
.modal.summary .table tr > *:first-child {
    background-color: var(--background);
}
.modal.summary .table tr:first-child > * {
    border-top: 1px solid var(--background);
}
.modal.summary .table tr:last-child > * {
    border-bottom: 1px solid var(--background);
}
.modal.summary .table tr > *:last-child {
    border-right: 1px solid var(--background);
}
.btn-action.crud-icon{
    width: var(--icon-bg-size-sm);
    height: var(--icon-bg-size-sm);
    padding: 0;
    background-color: var(--faint-gray);
    border: 1px solid var(--blue-gray);
    color: var(--black);
    border-radius: 50%;
    text-align: center;
    margin: 0 var(--gutter-xxxs);
    cursor: pointer;
    position: relative;
    line-height: 1;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.btn-status{
    background-color: var(--faint-gray);
    border: 1px solid var(--blue-gray);
    color: var(--black);
    border-radius: var(--radius);
    text-align: center;
    display: inline-block;
    padding: var(--gutter-xxxs) var(--gutter-xs);
    margin-bottom: var(--gutter-xxxs);
    margin-right: var(--gutter-xxxs);
    font-weight: 700;
    font-size: var(--font-size-xxs);

    white-space: nowrap;
}
.btn-status:last-child{
    margin-bottom: 0;
}
/* td .btn-action.crud-icon:first-child{
    margin-left: 0;
} */
.btn-action.crud-icon.primary, .btn-status.primary{
    background-color: var(--mottled-green);
    color: var(--sunflower);
    border-color: var(--mottled-green);
}
.btn-action.crud-icon.danger, .btn-status.danger{
    background-color: var(--light-danger);
    color: var(--danger);
    border-color: var(--danger);
}
.btn-action.crud-icon.lake, .btn-status.lake{
    background-color: var(--light-lake);
    color: var(--dark-lake);
    border-color: var(--dark-lake);
}
.btn-action.crud-icon.purple, .btn-status.purple{
    background-color: var(--light-purple);
    color: var(--purple);
    border-color: var(--purple);
}
.btn-action.crud-icon.warning, .btn-status.warning{
    background-color: var(--light-warning);
    color: var(--warning);
    border-color: var(--warning);
}
.btn-action.crud-icon .icon{
    font-size: var(--icon-size-sm);
    margin: 0;
}
.btn-icon.no-text .icon{
    margin-right: 0px;
}
.btn-icon.no-text .iconbtn-text{
    display: none;
}
/**
 * Pagination
 */
.pagination{
    margin-bottom: 0;
}
.page-item .page-link{
    width: var(--pagination-item-size);
    height: var(--pagination-item-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: var(--gutter-xs);
    text-decoration: none;
    font-size: var(--pagination-font-size);
    font-weight: 700;
    line-height: 1;
    color: var(--mottled-green);
    border-color: var(--mottled-green);
    padding: 0;
}
.page-item .page-link:hover{
    background-color: var(--mottled-green);
    color: var(--sunflower);
}
.page-item.prev .page-link,.page-item.next .page-link{
    border-radius: 50%;
}
.page-item.disabled .page-link{
    border-color: var(--light-gray);
    color: var(--blue-gray);
    background-color: var(--white);
}
.page-item.active .page-link{
    border-color: var(--mottled-green);
    color: var(--sunflower);
    background-color: var(--mottled-green);
}
.btn-pagination{
    height: var(--pagination-item-size);
    padding: var(--gutter-xs) var(--gutter-2xs);
    font-size: var(--font-size-m);
}
.pagination-dropdown .icon{
    margin-right: 0;
    margin-left: var(--gutter-xs);
    font-size: var(--font-size-xl);
}
.pagination-container{
    display: flex;
    align-items: center;
    justify-content: end;
    margin-bottom: var(--gutter-xs);
}
/** Tabs */
.tabs{
    display: flex;
    background-color: var(--faint-gray);
    padding: var(--gutter-xxs);
    border-radius: var(--radius);
    position: relative;
}
.tabs .before{
    position: absolute;
    top: var(--gutter-xxs);
    left: var(--gutter-xxs);
    right: var(--gutter-xxs);
    bottom: var(--gutter-xxs);
    background-color: var(--white);
    content: " ";
    border-radius: var(--radius);
}
.tabs > .tab{
    padding: var(--gutter-1_5xs) var(--gutter-xs);
    font-size: var(--font-size-m);
    border-radius: var(--radius-sm);
    font-weight: 500;
    line-height: 1;
    position: relative;
    cursor: pointer;
    text-align: center;
}
.tabs > .tab a{
    color: var(--black);
    text-decoration: none;
}
.tabs > .tab.active{
    font-weight: 900;
}
/**
 * Upload
 */
.uploader-container{
    margin-bottom: var(--gutter-xs);
}
.uploader-container .uploader, .clickable-link{
    width: 100%;
    box-shadow: var(--shadow);
    padding: 3rem;
    background-color: var(--uploader-blue);
    display: block;
    text-align: center;
    border : 2px dashed var(--blue);
    border-radius: var(--radius);
    position: relative;
    color: var(--blue-gray);
    text-decoration: none;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-l);
    font-weight: 700;
}
.uploader strong{
    color: var(--black);
}
.uploader.active{
    background-color: var(--uploader-blue);
}
.uploader-container .uploader .icon, .clickable-link .icon{
    font-size : var(--icon-size-lg);
    color: var(--blue);
}
.uploader.active .icon{
    color : var(--highlight)
}
.file-upload-preview{
    margin-top: var(--gutter-2xs);
}
.file-upload-preview img{
    width: 100%;
    height: auto;
    width: auto;
    max-width: 400px;
    max-height: 180px;
}
.uploader-queue, .file-list{
    margin-bottom: var(--gutter-2xs);
}
.uploader-queue .uploading, .file-list .file{
    margin-bottom: var(--gutter-xs);
    padding: var(--gutter-xs) var(--gutter-2xs);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-sm);
}
.uploader-queue .uploading .name, .file-list .file .name{
    font-weight: 600;
    margin-bottom: var(--gutter-xs);
    font-size: var(--font-size-m);
}
.uploader-queue .uploading  .name .percent{
    color: var(--blue-gray);
    font-weight: 500;
    font-size: var(--font-size-sm);
}
.uploader-queue .uploading .upload-progress{
    height : 5px;
    width: 100%;
    border-radius: 2.5px;
    background-color: var(--background);
    position: relative;
}
.uploader-queue .uploading .track{
    height : 5px;
    border-radius: 2.5px;
    background-color: var(--lake);
    width: 0%;
}
.file-list .list-item{
    display: flex;
    align-items: center;
    padding:var(--gutter-xs) var(--gutter-2xs);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gutter-xs);
}
.file-list .list-item .text{
    font-weight: 700;
    flex-grow: 1;
    font-size: var(--font-size-m);
}
.file-list .list-item .extension{
    font-weight: 700;
    font-size: var(--font-size-m);
    font-family: 'Courier New', Courier, monospace;
    color: var(--blue-gray);
    padding: 0 var(--gutter-xs);
}
.file-list .list-item .delete-file{
    display: inline-flex;
    width: var(--icon-bg-size-sm);
    height: var(--icon-bg-size-sm);
    justify-content: center;
    align-items: center;
    margin-left: var(--gutter-xs);
    font-size: var(--icon-size-sm);
    background-color: var(--light-danger);
    color: var(--danger);
    border: 1px solid var(--danger-dark);
    border-radius: 50%;
    cursor: pointer;
}
/**
 * Clickable Link
 */
 .clickable-link{
    background-color: var(--faint-gray);
    border-color : var(--blue-gray);
}
.clickable-link .icon{
    color: var(--blue-gray);
}
.clickable-link.success{
   background-color: var(--light-lake);
   border-color : var(--dark-lake);
}
.clickable-link.primary{
   background-color: var(--mottled-green);
   border-color : var(--mottled-green);
   color: var(--white);
}
.clickable-link.primary .icon{
    color: var(--sunflower);
}
/* Custom Containers */
.section-title{
    background-color: var(--faint-gray);
    text-align: center;
    padding: var(--gutter-2xs);
    margin-bottom: var(--gutter-xs);
    border-radius: var(--radius);
    border: 1px solid var(--faint-gray);
    color: var(--black);
    font-weight: 700;
    font-size: var(--font-size-m);
}
.fs-small{
    font-size: var(--font-size-xs);
}
.width-block{
    width: 100%;
}
.width-standard{
    max-width: 400px;
}
.number-sm{
    max-width: 180px;
    text-align: center;
}
.border-container{
    padding: var(--gutter-2xs);
    border: 1px solid var(--light-gray);
    margin-bottom: 1rem;
}
/* Section Styling */
.sections-container{
    background-color: var(--faint-gray);
    border-radius: var(--radius);
    padding: var(--gutter-half);
    margin-bottom: var(--gutter);
}
.sections-container .section{
    background-color: var(--white);
    border-radius: var(--radius-sm);
    padding: var(--gutter-2xs);
    border: 1px solid var(--light-gray);
    margin-bottom: var(--gutter-xs);
}
.sections-container .section:last-child{
    margin-bottom: 0;
}
.sections-container .section .icon{
    display: inline-flex;
    width: var(--icon-bg-size-sm);
    height: var(--icon-bg-size-sm);
    justify-content: center;
    align-items: center;
    margin-left: var(--gutter-xs);
    font-size: var(--icon-size-sm);
    background-color: var(--faint-gray);
    color: var(--black);
    border: 1px solid var(--blue-gray);
    border-radius: 50%;
    cursor: pointer;
}
.sections-container .section .icon.delete{
    background-color: var(--light-danger);
    color: var(--danger);
    border-color: var(--danger-dark);
}
.sections-container .section .icon.move{
    background-color: var(--light-purple);
    color: var(--purple);
    border-color: var(--purple);
}
.sections-container .section .icon.section-type{
    background-color: var(--mottled-green);
    color: var(--sunflower);
    border-color: var(--mottled-green);
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    font-size: var(--icon-size);
    margin-right: var(--gutter-xs);
}
.seciton-title{
    flex-grow: 1;
    font-size: var(--font-size-l);
    font-weight: 900;
}
.content-type{
    display: flex;
    align-items: center;
    padding: var(--gutter-1_5xs);
    margin-bottom: var(--gutter-xs);
    border-radius: var(--radius-sm);
    border: 1px solid var(--light-gray);
    background-color: var(--white);
}
.content-type.selected{
    background-color: var(--mottled-green);
    border-color: var(--mottled-green);
    color: var(--white);
}
.content-type.no-select{
    background-color: var(--faint-gray);
    border-color: var(--light-gray);
    color: var(--blue-gray);
}
.content-type .icon{
    display: inline-flex;
    width: var(--icon-bg-size-sm);
    height: var(--icon-bg-size-sm);
    justify-content: center;
    align-items: center;
    margin-right: var(--gutter-xs);
    font-size: var(--icon-size-sm);
    background-color: var(--light-lake);
    color: var(--mottled-green);
    border: 1px solid var(--mottled-green);
    border-radius: 50%;
}
.content-type.selected .icon{
    background-color: var(--sunflower);
    color: var(--mottled-green);
    border-color: var(--sunflower);
}
.content-type.no-select .icon{
    background-color: var(--faint-gray);
    color: var(--blue-gray);
    border-color: var(--light-gray);
}
.content-type h5{
    margin: 0;
    font-weight: 700;
    font-size: var(--font-size-l);
}
.content-type.no-select h5{
    font-weight: 400;
}
.title-with-icon{
    font-size: var(--font-size);
    font-weight: 700;
    margin-bottom: var(--gutter-xs);
    display: flex;
    align-items: center;
    background-color: var(--faint-gray);
    padding: var(--gutter-xs);
    border-radius: var(--radius);
    border: 1px solid var(--light-gray);
}
.title-with-icon .icon{
    background-color: var(--white);
    color: var(--mottled-green);
    height: var(--icon-bg-size);
    width: var(--icon-bg-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--icon-size);
    margin-right: var(--gutter-1_5xs);
    border: 1px solid var(--light-gray);
}
.modal .title-with-icon{
    color: var(--sunflower);
    background-color: var(--mottled-green);
    border: 1px solid var(--mottled-green);
}
.modal .title-with-icon .icon{
    background-color: var(--mottled-lighter);
    border: 1px solid var(--mottled-lighter);
    color: var(--white);
}
.section{
    border: 1px solid var(--light-gray);
    padding: var(--gutter-2xs);
    background-color: var(--white);
    border-radius: var(--radius-sm);
    margin-bottom: var(--gutter-half);
}
.section-subheader{
    color: var(--blue-gray);
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.section-header{
    font-size: var(--font-size-l);
    font-weight: 700;
}
.section-subtitle{
    font-size: var(--font-size-m);
    font-weight: 900;
}
.select-col{
    padding : var(--gutter-1_5xs);
    text-align: center;
    border: 1px solid var(--mottled-green);
    border-radius: var(--radius);
    cursor: pointer;
}
.select-col:hover{
    background-color: var(--faint-gray);
}
.select-col.selected{
    background-color: var(--mottled-green);
    color: var(--light-lake);
}
.select-col.disabled, .select-col.disabled:hover{
    opacity: 0.4;
    cursor: not-allowed;
    background-color: var(--white);
}
.select-group{
    margin-bottom: var(--gutter);
}
.select-group p{
    margin-bottom: var(--gutter-1_5xs);
    font-size: var(--font-size-m);
    color: var(--blue-gray);
}
.select-col .title, .select-col .desc{
    text-align: left;
    padding: 0 var(--gutter-xs);
    margin-bottom: 0;
}
.select-col .title{
    padding-top: var(--gutter-xs);
    font-size: var(--font-size-l);
    font-weight: 700;
}
.select-col .desc{
    padding-bottom: var(--gutter-xs);
    font-size: var(--font-size);
}
.select-col.selected{
    color: var(--sunflower);
}
.select-col.selected .desc{
    color: var(--white);
}
/**
 * Status Indicator
 */
.status-indicator{
    width : var(--icon-size-sm);
    height: var(--icon-size-sm);
    border-radius: 50%;
    background-color: var(--blue-gray);
    display: inline-block;
    white-space: nowrap;
}
.status-indicator.danger{background-color: var(--danger);}
.status-indicator.warning{background-color: var(--warning);}
.status-indicator.success{background-color: var(--lake);}
.status-indicator.success-shade{background-color: var(--darker-lake);}
/**
 * Adder
 */
.adder{
    background: var(--faint-gray);
    border: 1px solid var(--light-gray);
    border-radius: var(--radius);
    position: relative;
    min-height: 200px;
}
.adder-input-container{
    width: 100%;
    bottom: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
}
.adder-input-container .form-control{
    padding: 10px 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.adder-option{
    border-bottom: 1px solid var(--light-gray);
}
.adder-option:first-child{
    border-top-right-radius: var(--radius);
    border-top-left-radius: var(--radius);
}
.adder-option.correct{
    background-color: var(--lake);
    color: var(--white);
}
.adder-option.correct .text-danger{
    color: var(--sunflower) !important;
}
.adder-option .disabled{
    color : var(--blue-gray) !important;
    cursor: not-allowed !important;
}
.adder-option-text{
    padding: 15px 20px;
    display: flex;
    justify-content: stretch;
    align-items: center;
}
.adder-editable-option{
    border-radius: 0px !important;
    background-color: var(--white) !important;
    border-width: 0px !important;
}
.adder-options
{
    padding-bottom: 55px;
}
.adder-option-text .icon{
    cursor: pointer;
    font-size: 1.5rem;
    display: inline-block;
    padding: 1px 6px;
}
/**
 * Data Group
 */
.data-group{
    margin-bottom: var(--gutter-half);
}
.data-group .header{
    padding: var(--gutter-xs);
    display: flex;
    align-items: center;
    justify-content: start;
    background-color: var(--mottled-green);
    border: 1px solid var(--mottled-green);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    color: var(--white);
    font-weight: 700;
    font-size: var(--font-size);
}
.data-group .header .text{
    flex-grow: 1;
}
.data-group .header .icon{
    height: var(--icon-bg-size-sm);
    width: var(--icon-bg-size-sm);
    border-radius: 50%;
    font-size: var(--icon-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mottled-lighter);
    color: var(--lake);
    margin-right: var(--gutter-xs);
}
.data-group .header .icon.action{
    background-color: var(--mottled-lighter);
    margin-left: var(--gutter-xs);
    margin-right: 0;
    font-size: var(--icon-size);
    cursor: pointer;
}
.data-group .content{
    padding: var(--gutter-2xs) var(--gutter-xs);
    border: 1px solid var(--light-gray);
    border-top-width: 0;
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}
.data-group .content .slots{
    display: flex;
    align-items: center;
    justify-content: start;
}
.slot{
    background-color: var(--faint-gray);
    border: 1px solid var(--blue-gray);
    color: var(--black);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    padding: var(--gutter-xxxs) var(--gutter-xs);
    margin-bottom: var(--gutter-xs);
    margin-right: var(--gutter-xs);
    font-weight: 700;
    font-size: var(--font-size-sm);
}
.slot .icon{
    color: var(--danger);
    cursor: pointer;
    margin-right: var(--gutter-xs);
    font-size: var(--icon-size-sm);
}
/**
 * Layover
 */
.layover{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    background-color: transparent;
}
.layover-backdrop{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
}
.layover-content{
    width: 100%;
    max-width: var(--layover-max-width);
    overflow: hidden;
    position: relative;
    min-width: var(--layover-min-width);
}
.layover-header{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 0px;
    background-color: var(--faint-gray);
    padding: var(--gutter-2xs);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    border: 1px solid var(--light-gray);
}
.layover-body{
    position: relative;
    flex: 1 1 auto;
    padding: var(--gutter-2xs);
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    border-top: 0;
}
.layover-header .btn-close{
    font-size: var(--font-size-m);
    color: var(--mottled-green);
}
.gutter-row{
    --bs-gutter-y : var(--gutter-half) !important;
    --bs-gutter-x : var(--gutter-half) !important;
}
.gutter-row-sm{
    --bs-gutter-y : var(--gutter-xs) !important;
    --bs-gutter-x : var(--gutter-xs) !important;
}
.mb-gutter{
    margin-bottom: var(--gutter-half) !important;
}
.mt-gutter{
    margin-top: var(--gutter-half) !important;
}
/**
 *
 */
.kpi{
    --color: var(--dark-lake);
    --bg: var(--light-lake);
    border: 2px solid var(--color);
    background-color: var(--bg);
    border-radius: var(--radius);
    padding: var(--gutter-2xs);
    display: flex;
    align-items: center;
    justify-content: start;
}
.kpi > .icon{
    display: inline-flex;
    width: var(--kpi-icon-bg-size);
    height: var(--kpi-icon-bg-size);
    min-width: var(--kpi-icon-bg-size);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: var(--color);
    color: var(--white);
    font-size: var(--kpi-icon-size);
    margin-right: var(--gutter-half);
}
.kpi .title{
    color: var(--color);
    font-weight: 700;
    font-size: var(--font-size-l);
    line-height: 1;
    display: flex;
    align-items: center;
}
.kpi .title .icon{
    color: var(--mottled-green);
    cursor: pointer;
}
.kpi .value{
    font-weight: 900;
    font-size: var(--font-size-x2l);
    line-height: 1;
    margin-top: var(--gutter-xs);
    color: var(--black);
}
.kpi.hasalt .value{
    font-size: var(--font-size-xl);
}
.kpi.hasalt .alt-kpi{
    font-weight: 600;
    margin-top: var(--gutter-xs);
    color: var(--blue-gray);
}
.kpi.sunflower{
    --color: var(--dark-sunflower);
    --bg: var(--light-sunflower);
}
.kpi.purple{
    --color: var(--purple);
    --bg: var(--light-purple);
}
.kpi.warning{
    --color: var(--warning);
    --bg: var(--light-warning);
}
.kpi.danger{
    --color: var(--danger);
    --bg: var(--light-danger);
}
.kpi.gray{
    --color: var(--blue-gray);
    --bg: var(--white);
}
.app-popover-dark .value{
    font-weight: 900;
    color: var(--sunflower);
}
.graph-widget{
    background-color: var(--white);
    border-radius: var(--radius);
    padding: var(--gutter-2xs);
    border: 1px solid var(--light-gray);
}
.graph-widget .header{
    display: flex;
    align-items: center;
    font-weight: 700;
    padding-bottom: var(--gutter-half);
}
.graph-widget .icon{
    width: var(--icon-bg-size-sm);
    height: var(--icon-bg-size-sm);
    border-radius: 0;
    font-size: var(--icon-size);
    margin-right: var(--gutter-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.graph-widget .body, .graph-widget .body canvas{
    width: 100% !important;
}
.graph-widget.no-graph .body-wrapper{
    height: 225px;
}
.graph-widget.lake .header .icon{
    color: var(--dark-lake);
}
.graph-widget.purple .header .icon{
    color: var(--purple);
}
.graph-widget.warning .header .icon{
    color: var(--warning);
}
.graph-widget.gray .header .icon{
    color: var(--blue-gray);
}
.graph-widget.danger .header .icon{
    color: var(--danger);
}
.graph-widget.sunflower .header .icon{
    color: var(--dark-sunflower);
}
.graph-widget .canvas-with-legend{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}
.graph-widget .body.center-content{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    flex-direction: column;
}
.canvas-wrapper{
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}
.legend-wrapper{
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: justify;
}
.legend-wrapper .legends{
    padding: 0 var(--gutter-1_5xs);
}
.legend-wrapper .legend{
    display: flex;
    align-items: center;
    margin-bottom: var(--gutter-xxxs);
}
.legend-wrapper .legend .legend-color{
    display: block;
    width: var(--legend-size);
    min-width: var(--legend-size);
    height: var(--legend-size) !important;
    border-radius: 50%;
    margin-right: var(--gutter-xs);
}
.widget-title{
    font-weight: 700;
    text-transform: uppercase;
}
.location-snippets{
    display: flex;
    align-items: center;
}
.location-snippet{
    background-color: var(--white);
    padding: var(--gutter-2xs);
    border-radius: var(--radius);
    width: var(--location-snippet-size);
    min-width: var(--location-snippet-size);
    max-width: var(--location-snippet-size);
    margin-right: var(--gutter-half);
    border: 1px solid var(--light-gray);
}
.location-snippets .location-snippet:last-child{
    margin-right: 0;
}
.location-snippet .icon{
    font-size: var(--icon-size-lg);
}
.location-snippet .title{
    font-weight: 700;
    font-size: var(--font-size-m);
    padding-left: var(--gutter-xxs);
    height: calc(var(--font-size-m) * 2 + var(--gutter-xs));
}
.location-snippet .metric-list{
    padding-left: var(--gutter-xxs);
}
.location-snippet .metric-list .metric{
    margin-bottom: var(--gutter-2xs);
}
.location-snippet .metric-list .metric:last-child{
    margin-bottom: 0;
}
.location-snippet .metric-list .metric{
    font-size: var(--font-size-m);
    font-weight: 600;
}
.location-snippet .metric-list .metric .value{
    font-weight: 900;
    font-size: var(--font-size-xxl);
    line-height: 1;
    color: var(--dark-lake);
}
.location-snippet .metric-list .metric.sunflower .value{
    color: var(--dark-sunflower);
}
.location-snippet .metric-list .metric.purple .value{
    color: var(--purple);
}
.sdg-row{
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    justify-content: center;
    gap: var(--gutter-half);
}
.sdg-col{
    background-color: var(--white);
    border: 1px solid var(--light-gray);
    padding: var(--gutter-half);
    border-radius: var(--radius);
}
.sdg-icons{
    display: flex;
    border-radius: var(--radius);
    position: relative;
    height: var(--sdg-icon-size);
    max-height: var(--sdg-icon-size);
    justify-content: start;
}
.sdg-icons img{
    width: var(--sdg-icon-size);
    height: var(--sdg-icon-size);
    border-radius: var(--radius);
    margin-right: var(--gutter-half);
}
.sdg-icons img:last-child{
    margin-right: 0;
}
.sdg-kpis .kpi{
    margin-top: var(--gutter-half);
}
.sdg-icons img:last-child{
    margin-right: 0;
}
.sdg-row .sdg-icons:last-child{
    margin-bottom: 0;
}
.sdg-icons .icon-wrapper{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background-color: rgba(43, 69, 72, 0.75);
}
.sdg-icons  .icon-wrapper .icon{
    border-radius: 50%;
    font-size: var(--icon-size);
    background-color: var(--sunflower);
    border: 2px solid var(--sunflower);
    color: var(--mottled-green);
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sdg-icons:hover  .icon-wrapper{
    display: flex;
}
.filter{
    padding: var(--gutter-2xs);
    display: flex;
    align-items: bottom;
    width: 100%;
}
.filter-form{
    background-color: var(--background);
    border-bottom: 1px solid var(--light-gray);
}
.filter .form-group{
    margin-bottom: 0;
    margin-right: var(--gutter-2xs);
    min-width: var(--filter-field-width);
}
.filter .form-group.form-group-auto{
    min-width: 110px;
}
.filter .form-group:last-child{
    margin-right: 0;
}
.filter .form-group .form-label{
    font-size: var(--font-size-m);
    margin-bottom: var(--gutter-xxxs);
    color: var(--black);
    display: block;
}
.filter .select2-container .select2-selection--multiple .select2-selection__rendered{
    display:flex !important;
    flex-wrap: nowrap !important;
    overflow-y:auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.filter .select2-container .select2-selection--multiple .select2-selection__rendered::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.filter .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{
    white-space: nowrap;
}
.filter .select2{
    width: 100% !important;
    min-width: var(--filter-field-width);
}
/* .filter .select2-selection__rendered{
    display: inline-flex !important;
}
.filter .select2-selection__rendered .select2-selection__choice{
    float: none !important;
    display: inline-block !important;
} */
@media (max-width: 991px) {
    .sdg-icons img{
        width: var(--sdg-icon-size-sm);
        height: var(--sdg-icon-size-sm);
    }
}