/* ============================================================
   GLOBAL
============================================================ */

body {
    margin: 0;

    background-color: #F7F8F3;

    color: #26332D;

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   SIDEBAR
============================================================ */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    width: 250px;

    padding: 24px 16px;

    box-sizing: border-box;

    background-color: #1F4D3A;

    display: flex;
    flex-direction: column;

    z-index: 1000;
}


/* ============================================================
   BRAND
============================================================ */

.sidebar-brand {
    display: flex;

    align-items: center;

    padding: 8px 10px 24px 10px;

    margin-bottom: 24px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.15);
}


.sidebar-logo-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: #FFFFFF;

    border-radius: 10px;

    font-size: 22px;

    margin-right: 12px;
}


.sidebar-logo-title {
    color: #FFFFFF;

    font-size: 18px;

    font-weight: 700;

    line-height: 1.2;
}


.sidebar-logo-subtitle {
    color: #DDEBDD;

    font-size: 11px;

    margin-top: 4px;
}


/* ============================================================
   SECTION TITLES
============================================================ */

.sidebar-section-title {
    color: rgba(221, 235, 221, 0.6);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

    padding:
        0
        12px;

    margin-bottom: 10px;
}


.sidebar-account-title {
    margin-top: 20px;
}


/* 
/* ============================================================
   NAVIGATION LINKS
============================================================ */

.sidebar-link {
    display: flex;

    align-items: center;

    width: 100%;

    padding: 11px 12px;

    margin-bottom: 5px;

    box-sizing: border-box;

    color: #DDEBDD;

    text-decoration: none;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 500;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* ============================================================
   ICONS
============================================================ */


.sidebar-icon {
    width: 20px;
    height: 20px;

    min-width: 20px;

    display: inline-block;

    margin-right: 12px;

    background-color: currentColor;

    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    flex-shrink: 0;

    opacity: 0.90;
}


.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon {
    opacity: 1;
}
.icon-overview {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-station {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V11'/%3E%3Cpath d='M10 20V5'/%3E%3Cpath d='M16 20V14'/%3E%3Cpath d='M22 20V8'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20V11'/%3E%3Cpath d='M10 20V5'/%3E%3Cpath d='M16 20V14'/%3E%3Cpath d='M22 20V8'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-irrigation {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.6 9a7 7 0 1 0 10.8 0L12 2.7z'/%3E%3Cpath d='M9 15a3 3 0 0 0 3 3'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7 6.6 9a7 7 0 1 0 10.8 0L12 2.7z'/%3E%3Cpath d='M9 15a3 3 0 0 0 3 3'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-alerts {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M10 21h4'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-profile {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-settings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h6'/%3E%3Cpath d='M14 6h6'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Cpath d='M4 12h10'/%3E%3Cpath d='M18 12h2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Cpath d='M4 18h2'/%3E%3Cpath d='M10 18h10'/%3E%3Ccircle cx='8' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h6'/%3E%3Cpath d='M14 6h6'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Cpath d='M4 12h10'/%3E%3Cpath d='M18 12h2'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3Cpath d='M4 18h2'/%3E%3Cpath d='M10 18h10'/%3E%3Ccircle cx='8' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-logout {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5'/%3E%3C/g%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M14 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5'/%3E%3C/g%3E%3C/svg%3E");
}
.icon-info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3C/g%3E%3Ccircle cx='12' cy='8' r='1' fill='black'/%3E%3C/svg%3E");

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3C/g%3E%3Ccircle cx='12' cy='8' r='1' fill='black'/%3E%3C/svg%3E");
}
/* ============================================================
   HOVER
============================================================ */

.sidebar-link:hover {
    background-color: #2D6A4F;

    color: #FFFFFF;

    text-decoration: none;

    transform: translateX(2px);
}


/* ============================================================
   BOTTOM AREA
============================================================ */

.sidebar-bottom {
    margin-top: auto;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);
}


/* 
/* ============================================================
   LOGOUT BUTTON
============================================================ */

.sidebar-logout {
    display: flex;

    align-items: center;

    width: 100%;

    padding: 11px 12px;

    border: none;

    background: transparent;

    color: #DDEBDD;

    border-radius: 8px;

    font-family: inherit;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    text-align: left;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


.sidebar-logout:hover {
    background-color:
        rgba(201, 92, 92, 0.2);

    color: #FFFFFF;
}


/* ============================================================
   MAIN CONTENT
============================================================ */

.main-content {
    margin-left: 250px;

    min-height: 100vh;

    padding: 30px;

    box-sizing: border-box;

    background-color: #F7F8F3;
}
/* ============================================================
   LOGIN PAGE
============================================================ */

.login-page, .signup-page {
    min-height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    box-sizing: border-box;

    background-color: #F7F8F3;
}


/* ============================================================
   LOGIN CARD
============================================================ */

.login-card, .signup-card {
    width: 420px;

    padding: 40px;

    box-sizing: border-box;

    background-color: #FFFFFF;

    border-radius: 16px;

    box-shadow:
        0 10px 30px
        rgba(31, 77, 58, 0.10);
}


/* ============================================================
   LOGIN TITLE
============================================================ */

.login-title {
    margin: 0;

    color: #1F4D3A;

    font-size: 24px;

    font-weight: 700;

    text-align: center;

    letter-spacing: 0.5px;
}


.login-subtitle {
    margin-top: 6px;

    margin-bottom: 30px;

    color: #64756B;

    font-size: 14px;

    text-align: center;
}


/* ============================================================
   LOGIN HEADING
============================================================ */

.login-heading, .signup-heading  {
    margin-top: 0;

    margin-bottom: 25px;

    color: #26332D;

    font-size: 21px;

    font-weight: 600;

    text-align: center;
}


/* ============================================================
   LOGIN LABELS
============================================================ */

.login-label, .signup-label {
    display: block;

    margin-bottom: 7px;

    color: #26332D;

    font-size: 13px;

    font-weight: 600;
}
/* ============================================================
   LOGIN INPUTS
============================================================ */

.login-input, .signup-input {
    width: 100%;

    padding: 12px 14px;

    margin-bottom: 18px;

    box-sizing: border-box;

    border:
        1px solid
        #D6DED8;

    border-radius: 8px;

    background-color: #FFFFFF;

    color: #26332D;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.login-input:focus, .signup-input:focus {
    border-color: #2D6A4F;

    box-shadow:
        0 0 0 3px
        rgba(45, 106, 79, 0.12);
}


/* ============================================================
   FORGOT PASSWORD
============================================================ */

.forgot-password-link {
    display: block;

    margin-top: -8px;

    margin-bottom: 22px;

    color: #2D6A4F;

    font-size: 13px;

    font-weight: 500;

    text-align: right;

    text-decoration: none;

    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}


.forgot-password-link:hover {
    color: #1F4D3A;

    text-decoration: underline;
}


/* ============================================================
   LOGIN BUTTON
============================================================ */

.login-button, .signup-button {
    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 8px;

    background-color: #1F4D3A;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.login-button:hover,  .signup-button:hover {
    background-color: #2D6A4F;

    transform: translateY(-1px);
}

/* ============================================================
   SIGNUP BUTTONS 
============================================================ */

.signup-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* ============================================================
   MEMBERSHIP SECTION
============================================================ */

.membership-text {
    margin-top: 28px;

    margin-bottom: 10px;

    color: #64756B;

    font-size: 13px;

    text-align: center;
}

/* ============================================================
   MEMBERSHIP BUTTON
============================================================ */

.membership-button {
    width: 100%;

    padding: 11px;

    border:
        1px solid
        #1F4D3A;

    border-radius: 8px;

    background-color: #FFFFFF;

    color: #1F4D3A;

    font-family: inherit;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
    display: flex;
    box-sizing: border-box;
    text-decoration: none;
    justify-content: center;
}


.membership-button:hover {
    background-color: #1F4D3A;

    color: #FFFFFF;
}


/* ============================================================
   LOGIN OUTPUT
============================================================ */

.login-output, .signup-output {
    margin-top: 15px;

    color: #C95C5C;

    font-size: 13px;

    text-align: center;
}

/* ============================================================
   FORGOT PASSWORD DESCRIPTION
============================================================ */

.forgot-password-description, .signup-description {
    margin-top: -10px;

    margin-bottom: 25px;

    color: #64756B;

    font-size: 13px;

    line-height: 1.5;

    text-align: center;
}
/* ============================================================
   ABOUT THE PROJECT BUTTON PUBIC INFO
============================================================ */
.login-info-icon {
    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #2D6A4F;
    border-radius: 50%;

    font-size: 11px;
    font-weight: 700;
}
.login-project-info-button {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #2D6A4F;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;
}
.login-project-info-wrapper {
    display: flex;
    justify-content: center;

    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid #a8afa9;
}
/* ============================================================
   MEASUREMENTS PAGE
============================================================ */

.measurements-page {
    width: 100%;
}


/* ============================================================
   PAGE HEADER
============================================================ */

.page-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}


.page-title {
    margin: 0;

    color: #1F4D3A;

    font-size: 26px;

    font-weight: 700;

    letter-spacing: 0.2px;
}


.page-subtitle {
    margin-top: 6px;

    margin-bottom: 0;

    color: #64756B;

    font-size: 13px;
}


/* ============================================================
   LIVE STATUS
============================================================ */

.status-badge {
    padding: 7px 13px;

    border-radius: 20px;

    background-color:
        rgba(45, 106, 79, 0.10);

    color: #2D6A4F;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.7px;
}


/* ============================================================
   FILTERS
============================================================ */

.measurement-filters {
    display: flex;

    align-items: flex-end;

    gap: 18px;

    padding: 20px;

    margin-bottom: 20px;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 12px;

    box-shadow:
        0 5px 20px
        rgba(31, 77, 58, 0.06);
}


.filter-group {
    display: flex;

    flex-direction: column;

    min-width: 180px;
}


.station-filter-group {
    width: 190px;
}


.date-filter-group {
    min-width: 280px;
}


.search-filter-group {
    flex: 1;

    min-width: 220px;
}


/* ============================================================
   FILTER LABELS
============================================================ */

.filter-label {
    margin-bottom: 7px;

    color: #26332D;

    font-size: 12px;

    font-weight: 600;
}


/* ============================================================
   SEARCH INPUT
============================================================ */

.measurement-search {
    width: 100%;

    box-sizing: border-box;

    padding: 10px 12px;

    border:
        1px solid
        #D6DED8;

    border-radius: 8px;

    background-color: #FFFFFF;

    color: #26332D;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.measurement-search::placeholder {
    color: #9AA69F;
}


.measurement-search:focus {
    border-color: #2D6A4F;

    box-shadow:
        0 0 0 3px
        rgba(45, 106, 79, 0.10);
}


/* ============================================================
   DROPDOWN
============================================================ */

.station-dropdown .Select-control {
    min-height: 38px;

    border:
        1px solid
        #D6DED8;

    border-radius: 8px;

    box-shadow: none;
}


.station-dropdown .Select-control:hover {
    border-color: #2D6A4F;
}


.station-dropdown .Select-placeholder,
.station-dropdown .Select-value-label {
    color: #26332D;

    font-size: 13px;
}


/* ============================================================
   DATE PICKER
============================================================ */

.measurement-date-picker {
    width: 100%;
}


.measurement-date-picker .DateInput {
    background-color: transparent;
}


.measurement-date-picker .DateInput_input {
    padding: 9px 10px;

    border:
        1px solid
        #D6DED8;

    border-radius: 8px;

    color: #26332D;

    font-family: inherit;

    font-size: 13px;
}
.measurement-date-picker .DateInput_input:focus {
    border-color: #2D6A4F;
}


/* ============================================================
   SUMMARY CARDS
============================================================ */

.measurement-summary {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 20px;
}


.summary-card {
    padding: 18px 20px;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 10px;

    box-shadow:
        0 4px 15px
        rgba(31, 77, 58, 0.04);
}


.summary-label {
    color: #64756B;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}


.summary-value {
    margin-top: 5px;

    color: #1F4D3A;

    font-size: 21px;

    font-weight: 700;
}


/* ============================================================
   TABLE CARD
============================================================ */

.measurements-table-card .dash-header {
    background-color: #1F4D3A !important;

    color: #FFFFFF !important;

    font-size: 12px;

    font-weight: 600;

    text-align: center;

    padding: 12px 14px;

    height: 46px;

    border: 1px solid #1F4D3A !important;

    white-space: normal;
}


/* Header text */

.measurements-table-card
.dash-header .column-header-name {
    color: #FFFFFF !important;

    font-weight: 600;
}


/* Header when sorting */

.measurements-table-card
.dash-header:hover {
    background-color: #2D6A4F !important;
}
/* ============================================================
   TABLE HEADER
============================================================ */

.table-header {
    margin-bottom: 18px;
}


.table-title {
    margin: 0;

    color: #26332D;

    font-size: 17px;

    font-weight: 600;
}


.table-description {
    margin-top: 5px;

    margin-bottom: 0;

    color: #64756B;

    font-size: 12px;
}


/* ============================================================
   DASH DATA TABLE
============================================================ */

.measurements-table-card
.dash-spreadsheet-container {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}
.measurements-table-card
.dash-spreadsheet-inner {
    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ============================================================
   TABLE CELLS
============================================================ */

.measurements-table-card
.dash-cell {
    min-width: 130px;
    max-width: 220px;
  
    height: 42px;

    padding: 12px 14px;

    box-sizing: border-box;

    background-color: #FFFFFF;

    color: #26332D;

    border:
        1px solid
        #E5EBE6;

    font-size: 13px;

    text-align: center;

    white-space: normal;
    text-align: center !important;
    vertical-align: middle !important;

}


/* ============================================================
   TABLE HEADER
============================================================ */

.measurements-table-card
.dash-header {
    height: 46px;

    padding: 12px 14px;

    box-sizing: border-box;

    background-color: #1F4D3A;

    color: #FFFFFF;

    border: none;

    font-size: 12px;

    font-weight: 600;

    text-align: center !important;
    vertical-align: middle !important;
    tooltip_delay: 0;
    tooltip_duration: None;
}


/* ============================================================
   ALTERNATING ROWS
============================================================ */

.measurements-table-card
.dash-spreadsheet-inner tr:nth-child(even)
.dash-cell {
    background-color: #F7F8F3;
}


/* ============================================================
   DATE COLUMN
============================================================ */

.measurements-table-card
.dash-cell.column-Date {
    min-width: 175px;

    color: #1F4D3A;

    font-weight: 600;

    white-space: nowrap;
}


/* ============================================================
   TABLE HOVER
============================================================ */

.measurements-table-card
.dash-spreadsheet-inner tr:hover
.dash-cell {
    background-color:
        rgba(45, 106, 79, 0.07);
}


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1000px) {

    .measurement-filters {
        flex-wrap: wrap;
    }

    .station-filter-group,
    .date-filter-group,
    .search-filter-group {
        flex: 1;

        min-width: 220px;
    }

    .measurement-summary {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 700px) {

    .page-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .measurement-filters {
        flex-direction: column;

        align-items: stretch;
    }

    .station-filter-group,
    .date-filter-group,
    .search-filter-group {
        width: 100%;

        min-width: 0;
    }

    .measurements-table-card {
        padding: 14px;
    }
}
/* ============================================================
   PROFILE PAGE
============================================================ */

.profile-page {
    width: 100%;
}

.profile-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 20px;

    align-items: start;
}
/* ============================================================
   PROFILE PAGE
============================================================ */

.profile-page {
    width: 100%;
    max-width: 1180px;

    margin:
        0
        auto;
}
/* ============================================================
   PROFILE CARDS
============================================================ */
.profile-card {
    width: 100%;

    box-sizing: border-box;

    margin-bottom: 20px;

    padding:
        0
        28px;

    overflow: hidden;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 14px;

    box-shadow:
        0 6px 22px
        rgba(31, 77, 58, 0.06);
}
/* ============================================================
   PROFILE IDENTITY
   ============================================================ */

.profile-identity {
    display: flex;

    align-items: center;

    gap: 16px;

    margin:
        0
        -28px;

    padding:
        24px
        28px;

    background:
        linear-gradient(
            135deg,
            #F2F7F0 0%,
            #E7F0E8 100%
        );

    border-bottom:
        1px solid
        #DCE7DE;
}
.profile-avatar {
    width: 58px;
    height: 58px;

    flex:
        0
        0
        58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #1F4D3A;

    color: #FFFFFF;

    font-size: 21px;

    font-weight: 700;

    letter-spacing: 0.8px;

    box-shadow:
        0 5px 14px
        rgba(31, 77, 58, 0.18);
}
.profile-identity-title {
    margin:
        0
        0
        4px
        0;

    color: #26332D;

    font-size: 18px;

    font-weight: 700;
}
.profile-identity-email {
    margin: 0;

    color: #64756B;

    font-size: 13px;

    overflow-wrap: anywhere;
}
/* ============================================================
   PROFILE SECTIONS
======================================================*/
.profile-section {
    padding:
        25px
        0;

    border-bottom:
        1px solid
        #E7ECE8;
}
.profile-section-last {
    border-bottom: none;
}
.profile-section-title,
.profile-about-title {
    margin:
        0
        0
        5px
        0;

    color: #26332D;

    font-size: 17px;

    font-weight: 700;
}
.profile-section-description {
    margin:
        0
        0
        18px
        0;

    color: #64756B;

    font-size: 12px;

    line-height: 1.5;
}
/* ============================================================
   INFORMATION ROWS
============================================================ */
.profile-info-list {
    overflow: hidden;

    border:
        1px solid
        #E1E8E3;

    border-radius: 9px;
}
.profile-info-item {
    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 24px;

    box-sizing: border-box;

    padding:
        12px
        15px;

    border-bottom:
        1px solid
        #E7ECE8;
}
.profile-info-item:last-child {
    border-bottom: none;
}
.profile-info-label {
    color: #64756B;

    font-size: 12px;

    font-weight: 600;
}
.profile-info-value {
    color: #26332D;

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    overflow-wrap: anywhere;
}
.profile-password-value {
    color: #2D6A4F;

    letter-spacing: 0.4px;
}
/* ============================================================
   PASSWORD FORM
============================================================ */
.profile-password-fields {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 16px;
}
.profile-field {
    display: flex;

    flex-direction: column;
}
.profile-label {
    margin-bottom: 7px;

    color: #26332D;

    font-size: 12px;

    font-weight: 600;
}
.profile-input {
    width: 100%;

    box-sizing: border-box;

    padding:
        11px
        12px;

    border:
        1px solid
        #D6DED8;

    border-radius: 8px;

    background-color: #FFFFFF;

    color: #26332D;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.profile-input:focus {
    border-color: #2D6A4F;

    box-shadow:
        0 0 0 3px
        rgba(45, 106, 79, 0.10);
}
/* ============================================================
   PROFILE ACTIONS
============================================================ */
.profile-actions {
    min-height: 40px;

    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 18px;

    margin-top: 18px;
}
.profile-primary-button {
    min-width: 170px;

    padding:
        11px
        18px;

    border: none;

    border-radius: 8px;

    background-color: #1F4D3A;

    color: #FFFFFF;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}
.profile-primary-button:hover {
    background-color: #2D6A4F;

    transform:
        translateY(-1px);
}
/* ============================================================
   PROFILE MESSAGES
============================================================ */
.profile-message {
    flex: 1;

    font-size: 12px;

    font-weight: 600;
}
.profile-message-success,
.profile-message-error {
    padding:
        9px
        11px;

    border-radius: 7px;
}
.profile-message-success {
    background-color:
        rgba(45, 106, 79, 0.10);

    color: #2D6A4F;
}
.profile-message-error {
    background-color:
        rgba(201, 92, 92, 0.10);

    color: #A33F3F;
}
/* ============================================================
   PROJECT AND SYSTEM
============================================================ */
.profile-about-card {
    padding-top: 25px;

    padding-bottom: 25px;
}
.profile-about-heading {
    margin-bottom: 18px;
}
.profile-system-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap: 30px;

    border-top:
        1px solid
        #E7ECE8;
}
.profile-system-grid
.profile-info-item:nth-last-child(-n + 2) {
    border-bottom: none;
}
/* ============================================================
   RESPONSIVE PROFILE
============================================================ */
@media (max-width: 900px) {

    .profile-password-fields,
    .profile-system-grid {
        grid-template-columns: 1fr;
    }
    .profile-system-grid
    .profile-info-item:nth-last-child(2) {
        border-bottom:
            1px solid
            #E7ECE8;
    }
}
@media (max-width: 700px) {

    .profile-card {
        padding-right: 18px;

        padding-left: 18px;
    }
    .profile-identity {
        margin-right: -18px;

        margin-left: -18px;

        padding-right: 18px;

        padding-left: 18px;
    }
    .profile-info-item,
    .profile-actions {
        align-items: flex-start;

        flex-direction: column;
    }
    .profile-info-value {
        text-align: left;
    }
    .profile-primary-button {
        width: 100%;
    }
}
/* ============================================================
   SETTINGS PAGE
============================================================ */

.settings-page {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}


.settings-header {
    margin-bottom: 24px;
}


/* ============================================================
   SETTINGS CARD
============================================================ */

.settings-card {
    overflow: hidden;

    background-color: #FFFFFF;

    border: 1px solid #E1E6DE;
    border-radius: 14px;

    box-shadow:
        0 4px 16px
        rgba(38, 51, 45, 0.06);
}


.settings-card-header {
    padding: 22px 24px;

    background-color: #F9FAF7;

    border-bottom:
        1px solid
        #E1E6DE;
}


.settings-section-title {
    margin: 0;

    color: #26332D;

    font-size: 18px;
    font-weight: 600;
}


.settings-section-description {
    margin: 6px 0 0 0;

    color: #6B776F;

    font-size: 13px;
}
/* ============================================================
   SETTINGS FIELDS
============================================================ */

.settings-row {
    display: grid;

    grid-template-columns:
        minmax(260px, 1fr)
        minmax(260px, 360px);

    gap: 40px;

    align-items: center;

    padding: 22px 24px;

    border-bottom:
        1px solid
        #E8ECE6;
}


.settings-row:last-child {
    border-bottom: none;
}


.settings-field-information {
    min-width: 0;
}


.settings-label {
    display: block;

    margin-bottom: 5px;

    color: #26332D;

    font-size: 14px;
    font-weight: 600;
}


.settings-help-text {
    margin: 0;

    color: #6B776F;

    font-size: 12px;
    line-height: 1.5;
}
/* ============================================================
   SETTINGS DROPDOWNS
============================================================ */

.settings-dropdown {
    width: 100%;
}


.settings-dropdown .Select-control {
    height: 42px;

    background-color: #FFFFFF;

    border:
        1px solid
        #CBD4CA;
    border-radius: 8px;
    box-shadow: none;
}
.settings-dropdown .Select-control:hover {
    border-color: #4F8A5B;
}
.settings-dropdown.is-focused:not(.is-open)
> .Select-control {
    border-color: #4F8A5B;
    box-shadow:
        0 0 0 3px
        rgba(79, 138, 91, 0.12);
}


.settings-dropdown .Select-placeholder,
.settings-dropdown .Select-value-label {
    color: #26332D !important;

    font-size: 13px;

    line-height: 40px;
}
/* ============================================================
   AVAILABLE STATIONS
============================================================ */

.settings-station-list {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.settings-station-item {
    display: grid;

    grid-template-columns:
        10px
        1fr
        auto;

    gap: 10px;

    align-items: center;

    min-height: 38px;

    padding: 0 12px;

    background-color: #F9FAF7;

    border:
        1px solid
        #E1E6DE;

    border-radius: 8px;

    color: #26332D;

    font-size: 13px;
    font-weight: 500;
}


.settings-station-item.disabled {
    color: #8A948D;

    background-color: #F7F8F3;
}


.station-status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
}


.station-status-dot.available {
    background-color: #3A8D5D;
}


.station-status-dot.pending {
    background-color: #D39B32;
}


.station-status-badge {
    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 600;
}


.station-status-badge.available {
    color: #3A8D5D;

    background-color: #E1F2E6;
}


.station-status-badge.pending {
    color: #946A18;

    background-color: #FFF3D9;
}
/* ============================================================
   TEMPERATURE RADIO BUTTONS
============================================================ */

.settings-radio-group {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.settings-radio-label {
    display: inline-flex !important; 
    align-items: center;

    gap: 7px;

    min-height: 40px;

    padding: 0 14px;

    box-sizing: border-box;

    background-color: #FFFFFF;

    border:
        1px solid
        #CBD4CA;

    border-radius: 8px;

    color: #26332D;

    font-size: 13px;

    cursor: pointer;
}


.settings-radio-input {
    accent-color: #4F8A5B;
}
/* ============================================================
   IRRIGATION PAGE
============================================================ */
.irrigation-page {
    width: 100%;
}
/* ============================================================
   IRRIGATION SUMMARY
============================================================ */
.irrigation-summary {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 15px;

    margin-bottom: 20px;
}
.irrigation-summary-card {
    padding: 18px 20px;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 10px;

    box-shadow:
        0 4px 15px
        rgba(31, 77, 58, 0.04);
}
.irrigation-summary-label {
    color: #64756B;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}
.irrigation-summary-value {
    margin-top: 5px;

    color: #1F4D3A;

    font-size: 21px;

    font-weight: 700;
}
.irrigation-summary-value-water {
    color: #1F4D3A;
}
/* ============================================================
   INFORMATION NOTICE
============================================================ */
.irrigation-notice {
    padding: 15px 18px;

    margin-bottom: 26px;

    background-color: #E3F1F5;

    border:
        1px solid
        rgba(79, 143, 168, 0.22);

    border-radius: 10px;
}
.irrigation-notice-title {
    margin-bottom: 4px;

    color: #376F84;

    font-size: 13px;

    font-weight: 700;
}
.irrigation-notice-text {
    margin: 0;

    color: #64756B;

    font-size: 12px;

    line-height: 1.5;
}
/* ============================================================
   IRRIGATION SECTION HEADER
============================================================ */
.irrigation-section-header {
    margin-bottom: 16px;
}
.irrigation-section-title {
    margin: 0;

    color: #26332D;

    font-size: 18px;

    font-weight: 600;
}
.irrigation-section-description {
    margin:
        5px
        0
        0
        0;

    color: #64756B;

    font-size: 12px;
}
/* ============================================================
   ZONES GRID
============================================================ */
.irrigation-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );

    gap: 16px;
}
/* ============================================================
   ZONE CARD
============================================================ */
.irrigation-zone-card {
    padding: 20px;

    box-sizing: border-box;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 12px;

    box-shadow:
        0 4px 15px
        rgba(31, 77, 58, 0.04);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.irrigation-zone-card:hover {
    transform:
        translateY(-2px);

    border-color:
        #CBD8D0;

    box-shadow:
        0 8px 24px
        rgba(31, 77, 58, 0.08);
}
/* ============================================================
   ZONE HEADER
============================================================ */
.irrigation-zone-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}
.irrigation-zone-heading {
    display: flex;

    align-items: center;

    gap: 12px;
}
/* ============================================================
   ZONE NUMBER
============================================================ */
.irrigation-zone-number {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background-color: #E3F1F5;

    color: #4F8FA8;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.5px;
}
/* ============================================================
   ZONE TITLE
======================================================================= */
.irrigation-zone-title {
    margin: 0;

    color: #26332D;

    font-size: 16px;

    font-weight: 600;
}
.irrigation-zone-subtitle {
    margin:
        4px
        0
        0
        0;

    color: #8A948D;

    font-size: 11px;
}
/* ============================================================
   IRRIGATION STATUS
============================================================ */

.irrigation-status {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.4px;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
/* ON */
.irrigation-status-on {
    background-color: #E1F2E6;
    color: #3A8D5D;
}
/* OFF */

.irrigation-status-off {
    background-color: #F1F3F1;

    color: #6B776F;
}
/* ============================================================
   STATUS DOT
============================================================ */
.irrigation-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    flex-shrink: 0;
}
.irrigation-status-dot-on {
    background-color: #3A8D5D;
    box-shadow:
        0 0 0 3px
        rgba(58, 141, 93, 0.15);
}
.irrigation-status-dot-off {
    background-color: #9AA69F;
}
/* ============================================================
   ZONE BODY
============================================================ */
.irrigation-zone-body {
    padding:
        20px
        0
        18px
        0;
}
.irrigation-control-label {
    color: #26332D;

    font-size: 12px;

    font-weight: 600;
}
.irrigation-control-description {
    margin:
        5px
        0
        0
        0;

    color: #8A948D;

    font-size: 11px;

    line-height: 1.4;
}
/* ============================================================
   IRRIGATION ACTIONS
============================================================ */
.irrigation-actions {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 10px;
}
/* ============================================================
   BUTTONS
============================================================ */
.irrigation-button {
    width: 100%;

    padding: 10px 12px;

    box-sizing: border-box;

    border-radius: 8px;

    font-family: inherit;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}
.irrigation-button:active {
    transform:
        scale(0.98);
}
/* ============================================================
   START BUTTON
============================================================ */
.irrigation-button-on {
    border:
        1px solid
        #1F4D3A;
    background-color: #1F4D3A;
    color: #FFFFFF;
}

.irrigation-button-on:hover {
    background-color:
        rgba(31, 77, 58, 0.07);
        color: #1F4D3A;
}

/* When irrigation is ON */
.irrigation-button-on.is-selected {
    background-color: #FFFFFF;
    border-color: #3A8D5D;
    color: #3A8D5D;
}
/* Selected button hover */
.irrigation-button-on.is-selected:hover {
    background-color: #2D6A4F;
    border-color: #2D6A4F;
    color: #FFFFFF;
}
/* ============================================================
   STOP BUTTON
============================================================ */
.irrigation-button-off {
    border:
        1px solid
        #D6DED8;
    background-color: #26332D;
    color: #FFFFFF;
}
.irrigation-button-off:hover {
    background-color: #F2F5EF;
    border-color: #BFCAC2;
    color: #26332D
}
.irrigation-button-off.is-selected {
    background-color: #FFFFFF	;

    border-color:#D6DED8 ;

    color: #64756B;
}
/* ============================================================
   IRRIGATION RESPONSIVE
============================================================ */
@media (max-width: 900px) {

    .irrigation-summary {
        grid-template-columns:
            1fr;
    }
}
@media (max-width: 600px) {

    .irrigation-grid {
        grid-template-columns:
            1fr;
    }
    .irrigation-zone-card {
        padding: 18px;
    }
}
/* ============================================================
   INFORMATION PAGE
============================================================ */
.info-page {
    width: 100%;
    max-width: 1180px;

    margin:
        0
        auto;
}
.info-page-header {
    padding:
        8px
        0;
}
.info-page-subtitle {
    max-width: 720px;

    line-height: 1.6;
}
.info-project-badge {
    display: inline-block;

    margin-bottom: 10px;

    padding:
        5px
        10px;

    border-radius: 20px;

    background-color:
        rgba(45, 106, 79, 0.10);

    color: #2D6A4F;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.8px;
}
/* ============================================================
   INFORMATION CARDS
============================================================ */
.info-card {
    margin-bottom: 20px;

    padding: 28px;

    box-sizing: border-box;

    background-color: #FFFFFF;

    border:
        1px solid
        #E1E8E3;

    border-radius: 14px;

    box-shadow:
        0 6px 22px
        rgba(31, 77, 58, 0.06);
}
.info-card-last {
    margin-bottom: 0;
}
/* ============================================================
   SECTION HEADERS
============================================================ */
.info-section-heading {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 22px;

    padding-bottom: 18px;

    border-bottom:
        1px solid
        #E7ECE8;
}
.info-section-number {
    min-width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background-color: #1F4D3A;

    color: #FFFFFF;

    font-size: 11px;

    font-weight: 700;
}
.info-section-title {
    margin:
        0
        0
        5px
        0;

    color: #26332D;

    font-size: 18px;

    font-weight: 700;
}
.info-section-introduction {
    margin: 0;

    color: #64756B;

    font-size: 12px;

    line-height: 1.5;
}
/* ============================================================
   CEREAL SMART MAIN TITLE
============================================================ */
.info-main-title {
    margin:
        0
        0
        7px
        0;

    color: #1F4D3A;

    font-size: 32px;

    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -0.4px;
}
.info-main-type {
    margin:
        0
        0
        8px
        0;

    color: #3F744B;

    font-size: 16px;

    font-weight: 600;
}
.info-main-card
.profile-section-description {
    margin-bottom: 18px;
}

/* =====================================================================
   PARAGRAPHS
============================================================ */
.info-section-content {
        width: 100%;

    max-width: none;

    box-sizing: border-box;
}


.info-paragraph {
    width: 100%;

    margin:
        0
        0
        14px
        0;

    color: #45554D;

    font-size: 13px;

    line-height: 1.75;

    text-align: justify;
}
.info-paragraph {
    margin:
        0
        0
        14px
        0;

    color: #45554D;

    font-size: 13px;

    line-height: 1.75;
}
.info-paragraph-last {
    margin-bottom: 0;
}
/* ============================================================
   TECHNOLOGIES
============================================================ */
.info-technologies {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 24px;
}
.info-technology-item {
    display: flex;

    flex-direction: column;

    gap: 6px;

    padding: 16px;

    border-radius: 10px;

    background-color: #F4F7F2;

    border:
        1px solid
        #E1E8E3;
}
.info-technology-name {
    color: #1F4D3A;

    font-size: 15px;

    font-weight: 700;
}
.info-technology-description {
    color: #64756B;

    font-size: 11px;

    line-height: 1.5;
}
/* ============================================================
   EXPERIMENTAL SITES
============================================================ */
.info-sites-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 24px;
}
.info-site-card {
    position: relative;

    padding: 18px;

    overflow: hidden;

    border-radius: 10px;

    background-color: #F7F8F3;

    border:
        1px solid
        #E1E8E3;
}
.info-site-index {
    position: absolute;

    top: 11px;
    right: 13px;

    color:
        rgba(31, 77, 58, 0.20);

    font-size: 22px;

    font-weight: 700;
}
.info-site-name {
    margin:
        0
        0
        6px
        0;

    color: #26332D;

    font-size: 15px;

    font-weight: 700;
}
.info-site-location {
    margin: 0;

    color: #64756B;

    font-size: 12px;
}
/* ============================================================
   MAIN PROJECT INFORMATION CARD
============================================================ */

.info-main-card {
    background:
        linear-gradient(
            135deg,
            #EDF5EF 0%,
            #F7FAF6 100%
        );

    border:
        1px solid
        #C9DDCE;

    box-shadow:
        0 8px 24px
        rgba(31, 77, 58, 0.10);
}


.info-main-card .profile-system-grid {
    border-top-color: #C9DDCE;
}


.info-main-card .profile-info-item {
    border-bottom-color: #D6E5D9;
}
/* ============================================================
   INTERFACE FEATURES
============================================================ */
.info-features-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 24px;
}
.info-feature {
    padding:
        4px
        16px;

    border-left:
        3px solid
        #4F8A5B;
}
.info-feature-title {
    margin:
        0
        0
        7px
        0;

    color: #26332D;

    font-size: 14px;

    font-weight: 700;
}
.info-feature-description {
    margin: 0;

    color: #64756B;

    font-size: 11px;

    line-height: 1.6;
}
/* ============================================================
   CONTACT
============================================================ */

.info-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 20px;
}
.info-contact-person,
.info-support-block {
    padding: 20px;

    border-radius: 10px;

    background-color: #F7F8F3;

    border:
        1px solid
        #E1E8E3;
}
.info-contact-person {
    display: flex;

    align-items: center;

    gap: 14px;
}
.info-contact-avatar {
    width: 48px;
    height: 48px;

    flex:
        0
        0
        48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: #1F4D3A;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 700;
}
.info-contact-role {
    display: block;

    margin-bottom: 4px;

    color: #64756B;

    font-size: 10px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.4px;
}
.info-contact-name,
.info-support-title {
    margin:
        0
        0
        7px
        0;

    color: #26332D;

    font-size: 15px;

    font-weight: 700;
}
.info-support-text {
    margin:
        0
        0
        10px
        0;

    color:  #64756B;

    font-size: 12px;

    line-height: 1.6;
}
.info-contact-missing {
    color: #A36F24;

    font-size: 11px;

    font-weight: 600;
}
/* ============================================================
   RESPONSIVE INFORMATION PAGE
============================================================ */
@media (max-width: 900px) {

    .info-technologies,
    .info-sites-grid,
    .info-features-grid {
        grid-template-columns: 1fr;
    }
    .info-contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {

    .info-card {
        padding: 20px;
    }
    .info-section-heading {
        align-items: center;
    }
    .info-contact-person {
        align-items: flex-start;
    }
}	
/* ============================================================
    PUBLIC INFORMATION PAGE
============================================================ */
.info-access-actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.info-access-actions .membership-button {
    border:
        1px solid
        #FFFFFF;
    background-color: #1F4D3A;
    color: #FFFFFF;
    width: auto;
    min-width: 190px;
    text-align: center;
    text-decoration: none;
}
.info-access-actions .membership-button:hover {
    background-color: #2D6A4F;
    transform: translateY(-1px);
}
.public-info-back {
    border:
        1px solid
        #FFFFFF;
    background-color: #1F4D3A;
    color: #FFFFFF;
    width: auto;
    min-width: 190px;
    text-align: center;
    text-decoration: none;
}
.public-info-back-wrapper {
    
    justify-content: flex-start;
    margin-bottom: 18px;
}
.public-info-back-wrapper .membership-button:hover {
    background-color: #2D6A4F;
    transform: translateY(-1px);
}
.public-info-access-card {
    margin-top: 20px;

}
.public-info-container {
    width: 100%;

    max-width: 1180px;

    margin: 0 auto;
}
.public-info-page {
    min-height: 100vh;

    padding: 30px;

    box-sizing: border-box;

    background-color: #F7F8F3;
}