html, body {
    height: 100%;
    width: 100%;
    /*font-family: 'Area Normal'!important;*/
}
/*
h1, h2, h3 {
    font-weight: 800!important;
}
*/

.logo-eco {
    padding: 20px 15px 15px 15px;
    height: 90px !important;
    margin: -15px -10px;
}



@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Area Normal';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/area/AreaNormal-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Area Normal';
    font-style: normal;
    font-weight: 600;
    src: url('/fonts/area/AreaNormal-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Area Normal';
    font-style: normal;
    font-weight: 800;
    src: url('/fonts/area/AreaNormal-Extrabold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


.btn {
    display: inline-flex;
    min-height: 38px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 8px;
}

.btn-sm {
    min-height: 30px !important;
}

.btn-primary {
    color: var(--Color-Brand-EcoGreen-600, #034638) !important;
    background: var(--Color-Brand-EcoBlue-600, #9FEEFF) !important;
    border-color: var(--Color-Brand-EcoBlue-600, #9FEEFF);
}

    .btn-primary:disabled {
        color: var(--Color-Brand-Charcoal-400, #878787) !important;
        background: var(--Color-Brand-Charcoal-200, #E6E6E6) !important;
        border: 1px solid var(--Color-Brand-Charcoal-200, #E6E6E6) !important;
    }

    .btn-primary:hover:not(:disabled),
    .btn-primary:focus {
        color: var(--Color-Brand-EcoGreen-600, #034638) !important;
        background: var(--Color-Brand-EcoBlue-500, #B2F1FF) !important;
        border: 1px solid var(--Color-Brand-EcoBlue-500, #B2F1FF) !important;
    }

    .btn-primary:active,
    .btn-primary.active:active,
    .btn-primary:focus,
    .btn-primary.active:focus {
        box-shadow: 0 0 0 0.25rem #9FEEEE55 !important;
    }


.btn-secondary {
    color: var(--Color-Brand-EcoGreen-600, #034638) !important;
    background: var(--Color-Brand-Charcoal-White, #FFF) !important;
    border: 1px solid var(--Color-Brand-EcoGreen-600, #034638) !important;
}

    .btn-secondary:disabled {
        color: var(--Color-Brand-Charcoal-400, #878787) !important;
        background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
        border: 1px solid var(--Color-Brand-EcoGreen-300, #9AB5AF) !important;
    }

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: var(--Color-Brand-EcoGreen-600, #034638) !important;
        background: var(--Color-Brand-Charcoal-100, #F5F5F5) !important;
        border: 1px solid var(--Color-Brand-EcoGreen-600, #034638) !important;
    }

    .btn-secondary:active,
    .btn-secondary.active:active,
    .btn-secondary:focus,
    .btn-secondary.active:focus {
        box-shadow: 0 0 0 0.25rem #03463833 !important;
    }



.btn-info {
    color: var(--Color-Brand-EcoGreen-600, #034638) !important;
    background-color: var(--Color-Brand-EcoBlue-600, #9FEEFF) !important;
    border-color: var(--Color-Brand-EcoBlue-600, #9FEEFF) !important;
}




.btn-outline-info {
    color: var(--Color-Brand-EcoGreen-700, #02382D) !important;
    border: 1px solid var(--Color-Brand-EcoGreen-600, #034638) !important;
    border-radius: 25px !important;
    outline: 0 !important;
}

    .btn-outline-info:active,
    .btn-outline-info.active:active,
    .btn-outline-info:focus,
    .btn-outline-info.active:focus {
        box-shadow: 0 0 0 0.15rem #03463833 !important;
    }

.form-control:active,
.form-control:focus {
    box-shadow: 0 0 0 0.15rem #03463833 !important;
    border: 1px solid var(--Color-Brand-EcoGreen-600, #034638) !important;
}

.btn-outline-info.active {
    /* background: var(--Color-Brand-EcoGreen-200, #CDDAD7) !important; */
    color: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
    background: var(--Color-Brand-EcoGreen-600, #034638) !important;
}

    .btn-outline-info.active:hover,
    .btn-outline-info.active:focus {
        /* background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important; */
        background: var(--Color-Brand-EcoGreen-600, #034638CC) !important;
    }

.btn-outline-info:disabled {
    color: var(--Color-Brand-Charcoal-400, #878787) !important;
    background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
    border-radius: 25px;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    /* color: var(--Color-Text-Charcoal-900, #034638) !important;
    background: var(--Color-Brand-Charcoal-100, #F5F5F5) !important; */
    background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
}


/* Reset inside groups */
.btn-group-vertical .btn-outline-info,
.btn-group .btn-outline-info {
    border-radius: 0 !important;
}

    .btn-group .btn-outline-info:first-child {
        border-top-left-radius: 25px !important;
        border-bottom-left-radius: 25px !important;
    }

    .btn-group .btn-outline-info:last-child {
        border-top-right-radius: 25px !important;
        border-bottom-right-radius: 25px !important;
    }

    .btn-group .btn-outline-info:only-child {
        border-radius: 25px !important;
    }



    .btn-group-vertical .btn-outline-info:first-child {
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }

    .btn-group-vertical .btn-outline-info:last-child {
        border-bottom-left-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }

    .btn-group-vertical .btn-outline-info:only-child {
        border-radius: 5px !important;
    }





.page-item.active .page-link {
    z-index: 3;
    color: var(--Color-Brand-EcoGreen-600, #034638);
    background-color: var(--Color-Brand-EcoGreen-200, #CDDAD7);
    border-color: var(--Color-Brand-EcoGreen-600, #034638);
}

.page-link:hover {
    color: var(--Color-Brand-EcoGreen-600, #034638) !important;
    background-color: var(--Color-Brand-EcoGreen-200, #E6EDEB) !important;
    border-color: var(--Color-Brand-EcoGreen-600, #034638) !important;
}


.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: var(--Color-Brand-EcoGreen-600, #034638);
    background-color: #fff;
    border: 1px solid var(--Color-Brand-EcoGreen-600, #034638);
}

.home-app {
    padding-top: 20px 10px !important;
}

    .home-app:hover {
        text-decoration: none;
        /*color: red!important;*/
    }

    .home-app > div {
        padding-top: 20px;
        border-radius: 20px;
    }

        .home-app > div:hover {
            background-color: #9FEEFF33 !important;
        }

    .home-app .title {
        color: #171717;
        text-align: center;
        font-family: area normal;
        font-size: 18px;
        font-style: normal;
        font-weight: 800;
        line-height: 28px;
        margin-top: 18px;
    }

    .home-app .subtitle {
        color: #616161 !important;
        text-align: center;
        font-family: area normal;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px
    }

    .home-app .bg-circle {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #9FEEFF;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 22px;
        color: #034638 !important;
    }


.bg-eco-200 {
    background-color: #CDDAD7 !important;
}

.bg-eco-400 {
    background-color: #C5F5FF !important;
}

.bg-eco-600 {
    background: #034638 !important;
}

.bg-eco-800 {
    background: #022A22 !important;
}

.eco-200 {
    color: var(--Color-Brand-EcoGreen-200, #CDDAD7) !important;
}

.eco-600 {
    color: var(--Color-Brand-EcoGreen-600, #034638) !important;
}


.bg-eco-blue-600 {
    background: #9FEEFF !important;
}

.eco-blue-600 {
    color: #9FEEFF !important;
}

.eco-blue-400 {
    color: #378f98 !important;
}


.logo-eco.cls-1 {
    fill: red !important;
}


.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border: 1px solid var(--Color-Brand-EcoGreen-600, #034638);
    border-radius: 0.25em;
    cursor: pointer;
}

    .form-check-input:checked {
        background-color: var(--Color-Brand-EcoGreen-600, #034638) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 16 16'%3E%3Cpath fill='white' d='M13.485 1.929a1.5 1.5 0 0 1 0 2.122L6.75 10.786l-3.235-3.235a1.5 1.5 0 1 1 2.122-2.122L6.75 6.543l6.735-6.736a1.5 1.5 0 0 1 2.122 0z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 0.9em 0.9em;
    }

.nav-link {
    padding: 0.5rem 1rem !important;
}

.nav-tabs .nav-link {
    color: var(--Color-Brand-EcoGreen-700, #02382D) !important;
}

.nav-pills .nav-link {
    background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
    color: var(--Color-Brand-EcoGreen-700, #02382D) !important;
}

    .nav-pills .nav-link.active {
        color: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
        background: var(--Color-Brand-EcoGreen-700, #02382D) !important;
    }



.card {
    border: 1px solid var(--Color-Brand-EcoGreen-600, #03463888);
}

.card-header {
    color: var(--Color-Brand-EcoGreen-700, #02382D) !important;
    background: var(--Color-Brand-EcoGreen-100, #E6EDEB) !important;
}

.bg-info,
.alert-info {
    background-color: #ecfcff !important;
}



/* Medium gutter (0.5rem = 8px each side = 16px total) */
.g-2 {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

    .g-2 > .col,
    .g-2 > [class*="col-"] {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }


/* gy-2: 0.5rem (8px) */
.gy-2 {
    margin-top: -0.5rem;
    margin-bottom: -0.5rem;
}

    .gy-2 > .col,
    .gy-2 > [class*="col-"] {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

/* gy-3: 1rem (16px) */
.gy-3 {
    margin-top: -1rem;
    margin-bottom: -1rem;
}

    .gy-3 > .col,
    .gy-3 > [class*="col-"] {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }