/* -----------------------------------------
   CDFW OCEANSIDE COLOR THEME
   https://wildlife.ca.gov/Portals/_default/skins/cagov-2026/css/colortheme.css?cdv=1408

   Reference: https://template.webstandards.ca.gov/visual-design/color.html
   Reference (CDN): https://template.webstandards.ca.gov/cdn.html
----------------------------------------- */
:root {
    --color-p1: #fdb81e;
    --color-p1-dark: #fdb20a;
    --color-p1-darker: #f5aa02;
    --color-p1-darkest: #d29102;
    --color-p1-light: #fdc64b;
    --color-p1-lighter: #fed478;
    --color-p1-lightest: #fee3a5;
    --color-p2: #045070;
    --color-p2-dark: #03445F;
    --color-p2-darker: #03384E;
    --color-p2-darkest: #02202D;
    --color-p2-light: #2A6A85;
    --color-p2-lighter: #4F859B;
    --color-p2-lightest: #9BB9C6;
    --color-p3: #0A1E25;
    --color-p3-dark: #293039;
    --color-p3-darker: #232930;
    --color-p3-darkest: #14171c;
    --color-p3-light: #5b616a;
    --color-p3-lighter: #84898f;
    --color-p3-lightest: #adb0b5;
    --color-s1: #e8f1f5;
    --color-s1-darker: #e2f3f8;
    --color-s1-lighter: #f7fcfd;
    --color-s2: #D9EC2A;
    --color-s2-dark: #B8C924;
    --color-s2-darker: #98A51D;
    --color-s3: #954922;
    --color-s3-dark: #7F3E1D;
    --color-s3-light: #A56443;
    --color-s3-lighter: #B58064;
    --sub-nav-bg: var(--color-s1-lighter);
    --mobile-drawer: var(--color-p2-darker);
    --mobile-drawer-active: var(--color-p2);
}

/* theme element colors */
:root {
    --button-font-color: #fff;
    --button-background-color: var(--color-p2);
    --link-font-color: var(--color-p2);
    --link-background-color: #fff;
    --select-option-font-color: var(--color-p2);
    --select-option-background-color: transparent;
    --selected-option-font-color: #F5F5F5;
    --selected-option-background-color: var(--color-p2);
    --custom-checkbox-font-color: #F0F0F0;
    --custom-checkbox-background-color: var(--color-p2);
}

/*-------------- button --------------*/
.btn-success {
    color: var(--button-font-color);
    background-color: var(--button-background-color);
    border-color: #c0c0c0;
    font-weight: 600;
}
    .btn-success:hover, .btn-success:focus,
    .btn-success:not(:disabled):active, .btn-success:not(.disabled):active,
    .btn-success:not(:disabled).active, .btn-success:not(.disabled).active {
        color: var(--button-font-color);
        background-color: var(--color-p2-darker);
        border-color: #c0c0c0;
        box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
        filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
    }

    .btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled:active, .btn-success.disabled.active,
    .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled]:active, .btn-success[disabled].active {
        color: var(--button-font-color);
        background-color: var(--color-p2-light);
        border-color: #c0c0c0;
        opacity: 0.6;
        box-shadow: none;
        filter: none;
    }

    /* btn-success is the basic style and should be inherited */
    .btn-success.btn-standout {
        background-color: var(--color-p3);
    }
        .btn-success.btn-standout:hover, .btn-success.btn-standout:focus,
        .btn-success.btn-standout:not(:disabled):active, .btn-success.btn-standout:not(.disabled):active,
        .btn-success.btn-standout:not(:disabled).active, .btn-success.btn-standout:not(.disabled).active {
            background-color: var(--color-p3-darker);
            box-shadow: 0 2px 4px rgb(255 255 255 / 50%);
            filter: drop-shadow(2px 2px 4px rgba(255, 255, 255, 0.5));
        }
        .btn-success.btn-standout.disabled, .btn-success.btn-standout.disabled:hover, .btn-success.btn-standout.disabled:focus, .btn-success.btn-standout.disabled:active, .btn-success.btn-standout.disabled.active,
        .btn-success.btn-standout[disabled], .btn-success.btn-standout[disabled]:hover, .btn-success.btn-standout[disabled]:focus, .btn-success.btn-standout[disabled]:active, .btn-success.btn-standout[disabled].active {
            background-color: var(--color-p3-light);
        }

/*-------------- standard link --------------*/
a.link-standard {
    color: var(--link-font-color);
    background-color: var(--link-background-color);
    border: 1px solid #d4d4d7;
    border-bottom: 4px solid var(--link-font-color);
    border-radius: 5px;
    text-decoration: none;
    padding: 16px;
    font-weight: 700;
    font-size: 14px;
    margin: 2px;
}
    a.link-standard:hover {
        color: var(--color-p2-darker);
        background-color: #ededef;
    }
    a.link-standard:focus {
        outline: 2px solid var(--color-p2-light);
    }
    a.link-standard.active, a.link-standard.active:hover {
        color: var(--link-background-color);
        background-color: var(--link-font-color);
        border-color: #d4d4d7;
    }

/*-------------- select options popup (dropdown list on mobile) --------------*/
.select-options-modal .modal-header {
    color: #333;
    background-color: transparent;
    height: 40px;
}

.select-options-modal .modal-body {
    padding-top: 0px;
}

.select-options-modal .select-options.list-group {
    max-height: 50vh;
    overflow: auto;
    margin-bottom: 0px;
    margin-left: -15px;
    margin-right: -15px;
}

.select-options-modal .select-options.list-group .list-group-item {
    color: var(--select-option-font-color);
    background-color: var(--select-option-background-color);
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #ddd;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 15px;
    margin-right: 15px;
    outline: none;
    text-decoration: unset;
    font-weight: 500;
}
    .select-options-modal .select-options.list-group .list-group-item.active {
        color: var(--selected-option-font-color);
        background-color: var(--selected-option-background-color);
        font-weight: 700;
    }
    .select-options-modal .select-options.list-group .list-group-item.disabled {
        color: #333;
        background-color: #cdcdcd;
        opacity: 0.7;
    }

    .select-options-modal .select-options.list-group .list-group-item .glyphicon {
        position: absolute;
        right: 10px;
        top: 40%;
        color: var(--selected-option-font-color);
    }
    .select-options-modal .select-options.list-group .list-group-item.active .glyphicon:before {
        content: "\e013";
    }

/*-------------- custom checkbox --------------*/
.customCheckbox {
    font-weight: normal;
    position: relative;
    display: inline-block;
    cursor: default;
}
    .customCheckbox > input[type=checkbox] {
        opacity: 0;
        width: 0.1px;
        margin-top: 0px;
        margin-left: 0px;
    }
    .customCheckbox > .glyphicon {
        border-radius: 4px;
        padding: 6px 6px;
        display: inline-block;
    }
    .customCheckbox > input[type=checkbox]:not(:checked) + input + .glyphicon {
        color: inherit;
        background-color: transparent;
    }
        .customCheckbox > input[type=checkbox]:not(:checked) + input + .glyphicon:before {
            content: "\e157";
        }
    .customCheckbox > input[type=checkbox]:checked + input + .glyphicon {
        color: var(--custom-checkbox-font-color);
        background-color: var(--custom-checkbox-background-color);
    }
        .customCheckbox > input[type=checkbox]:checked + input + .glyphicon:before {
            content: "\e067";
        }

    .customCheckbox > .glyphicon.disabled, .customCheckbox > .glyphicon:disabled,
    .customCheckbox > input[type=checkbox]:disabled + input + .glyphicon {
        opacity: 0.5;
        filter: grayscale(100%);
    }
    .customCheckbox > input[type=checkbox]:disabled:not(:checked) + input + .glyphicon {
        background-color: #D3D3D3;
    }

    .customCheckbox > input[type=checkbox] + input + .glyphicon + * {
        margin-left: 2px;
    }

    .customCheckbox > input[type=checkbox].input-validation-error + input + .glyphicon {
        color: #C00000;
        background-color: var(--color-p1-light);
    }

/*-------------- circle checkbox (button like) --------------*/
    .customCheckbox.mini, .customCheckbox.mobile {
        min-width: 25px;
        border: solid 1px var(--custom-checkbox-background-color);
        border-radius: 20px;
        padding: 0px;
        margin: 0px;
        cursor: pointer;
    }
        .customCheckbox.mini > .glyphicon:empty,
        .customCheckbox.mobile > .glyphicon:empty {
            display: none;
        }
        .customCheckbox.mini.selected,
        .customCheckbox.mobile.selected {
            color: var(--custom-checkbox-font-color);
            background-color: var(--custom-checkbox-background-color);
            font-weight: bold;
        }

        .customCheckbox.mini > input[type=checkbox] + input + .glyphicon + *,
        .customCheckbox.mobile > input[type=checkbox] + input + .glyphicon + * {
            margin: 4px;
        }