@import url("cdn.datatables.net/2.1.3/css/dataTables.dataTables.min.css"rel="stylesheet");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
/*@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");*/

@import "../jquery-ui.css";
@import "css/style-jquery-ui.css";
@import "../jquery.fileupload-ui.css";
@import "../ck-editor.css";
@import "../glyphicons.css";
@import "../bootstrap.iconpro.css";
@import "css/style-bootstrap.css";
@import "css/style-content.css";
@import "css/style-wizard.css";
@import "css/style-button.css";
@import "css/style-form.css";
@import "css/style-payment.css";
@import "css/style-login.css";
@import "css/style-header.css";
@import "css/style-global.css";
@import "css/style-glyphicon.css";
@import "css/style-menu.css";
@import "css/style-panel.css";

:root {
    font-size: 15px;

    /* Bootstrap Fonts */
    --bs-body-font-family: "Muli", sans-serif;
    --bs-btn-font-family: "Muli", sans-serif;
    --bs-body-font-size: 1rem;

    /* Font Awesome Fonts */
    --fa-style-family: "Muli", sans-serif, "FontAwesome";

    /* Images */
    --header-image: url("../images/company-logo.svg");
    --home-image: url("images/company-logo.svg");

  /*Primary Button colors as per Figma design*/
  --pri-btn-hover-bg-color: hsl(19, 100%, 47.6%); /*Darker orange*/
  --pri-btn-text-color: hsl(0, 0%, 100%); /* White */
  --pri-btn-border-color: hsl(210, 8%, 35%); /* Orange */
  --pri-btn-disabled-bg: hsl(0, 0%, 80%); /* Gray */
  --pri-btn-disabled-border: hsl(0, 0%, 80%); /* Gray */
  --pri-btn-disabled-text: hsl(0, 0%, 100%); /* White */

  /*Secondary Button colors as per Figma design*/
  --sec-btn-bg-color: hsl(0, 0%, 100%); /* White */
  --sec-btn-hover-bg-color: hsl(19, 100%, 47.6%); /* Orange */
  --sec-btn-hover-text-color: hsl(0, 0%, 100%); /* White */
  --sec-btn-disabled-bg-color: hsl(0, 0%, 100%); /* White */
  --sec-btn-disabled-text-color: hsl(0, 0%, 80%); /* Gray */
  --sec-btn-disabled-border-color:  hsl(0, 0%, 80%); /* Gray */

  /*Default Button colors as per Figma design*/
  --default-btn-bg-color: var(--sec-btn-bg-color);
  --default-btn-text-color:var(--pri-btn-text-color);
  --default-btn-hover-text-color:var(--sec-btn-hover-text-color);
  --default-btn-hover-bg-color:var(--sec-btn-hover-bg-color);
  --default-btn-border-color:var(--pri-btn-border-color);

    /* Primary Colors */
    --primary-color: hsl(19, 100%, 47.6%); /* Orange */
    --primary-hover-color: hsl(19, 100%, 47.6%); /* Darker Orange */
    --primary-active-color: hsl(210, 8%, 35%); /* Even darker Orange */
    --primary-text-color: hsl(0, 0%, 100%); /* White */

    /* Secondary Colors */
    --secondary-color: hsl(210, 8%, 46%); /* Gray */
    --secondary-hover-color: hsl(210, 8%, 40%); /* Darker Gray */
    --secondary-active-color: hsl(210, 8%, 35%); /* Even Darker Gray */
    --secondary-text-color: hsl(0, 0%, 100%); /* White */

    /* Neutral Colors */
    --neutral-color-light: hsl(210, 17%, 97%); /* Light gray */
    --neutral-color-dark: hsl(210, 11%, 23%); /* Dark gray */

    /* Default Button Colors */
    --button-bg-color: hsl(19, 100%, 47.6%); /* Default button background */
    --button-hover-color: hsl(19, 100%, 47.6%); /* Darker default button */
    --button-active-color: hsl(210, 8%, 35%); /* Even darker default button */
    --button-text-color: hsl(210, 10%, 15%); /* Default button text color */

    /* Additional Colors */
    --success-color: hsl(0, 100%, 50%); /* Red */
    --success-hover-color: hsl(134, 61%, 35%);
    --success-active-color: hsl(0, 100%, 50%);
    --success-text-color: hsl(0, 0%, 100%); /* White */

    --warning-color: hsl(210, 8%, 35%); /* Darker Orange */
    --warning-border-color: hsl(39, 83%, 91%);
    --warning-hover-color: hsl(45, 100%, 46%);
    --warning-active-color: hsl(210, 8%, 35%);

    --danger-color: #F8D7DA; /* Red */
    --danger-border-color: #181818;
    --danger-hover-color: #DC3545;
    --danger-active-color: hsl(354, 70%, 40%);
    --danger-text-color: #181818; /* White */

    /* Default hyperlink color */
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color-rgb: 54, 106, 236;

    /* RGBA Colors for Transparency */
    --primary-color-transparent: hsla(223, 84%, 56%, 0.8); /* 80% opacity */
    --neutral-bg-color-transparent: hsla(210, 17%, 97%, 0.5); /* 50% opacity */

    /* Disabled Button */
    --bs-btn-disabled-bg: hsl(0, 0%, 80%);
    --bs-btn-disabled-border-color: hsl(0, 0%, 80%);
}

@media (max-width: 400px) {
    :root {
        font-size: 0.85rem; /* Adjusts further for mobile */
    }
}

@media (max-width: 350px) {
    :root {
        font-size: 0.75rem; /* Adjusts further for mobile */
    }
}

/*eWeb Banner Image Styles*/

.eWebHomeBanner {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    padding-left: 5%;
    color: var(--primary-color);
    overflow: hidden;
    border-radius: 4px;
}

.eWebHomeBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
}

.eWebHomeBanner-content {
    max-width: 50%;
    z-index: 1;
}

.eWebHomeBanner h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
}

.eWebHomeBanner .btn {
    padding: 12px 24px;
    font-size: 18px;
    border-radius: 30px;
    font-weight: bold;
}

.btn-icon {
    margin-left: 10px;
    font-size: 20px;
}

/* Adjusts further for mobile */
@media (max-width: 768px) {
    .eWebHomeBanner {
        height: 400px;
        text-align: center;
        justify-content: center;
        padding-left: 0px;
    }
    .eWebHomeBanner-content {
        max-width: 50%;
    }
    .eWebHomeBanner h1 {
        font-size: 32px;
    }
    .eWebHomeBanner .btn {
        font-size: 16px;
        padding: 10px 20px;
    }
}

.product-row,
.product-row *,
.product-row *::before,
.product-row *::after {
    box-sizing: content-box !important;
}

/* Event Calender */
.EvCalMultipleDays, .EvCalMultipleDays a {
    color: #222;
    background-color: #fff
}

.EvCalSingleDay, .EvCalSingleDay a {
    color: #fff;
    background-color: #888;
}

.EvCalFirstDay {
}

.EvCalNoFirstDay {
}

.EvCalTable {
    border-color: #ddd;
    line-height: 110%;
    width: 100%;
    border-radius: 10px;  
    overflow: hidden;
}

    .EvCalTable td {
        padding: 0
    }

.EvCalHeader {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee,endColorstr=#cccccc);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    background: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -o-linear-gradient(#eeeeee,#cccccc);
    padding: 4px 4px;
    border-color: #bbb;
    text-align: center
}

.EvCalTitle {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background: -moz-linear-gradient(top, #fff, #ddd);
    background-image: -o-linear-gradient(#fff,#ddd);
    color: #666;
    font-size: 1.4em;
    font-weight: 700;
    height: 26px;
    line-height: 26px;
    border-color: #ddd
}

    .EvCalTitle td {
        border-color: #ddd
    }

.EvCalOtherMonthDays {
    background-color: #ddd;
    border-color: #ccc;
    color: #888
}

.EvCalDay {
    border-color: #ddd;
}

.EvCalWeekendDay {
    background-color: #CDE9F1;
    border-color: #cff;
    color: #39C
}

.EvCalTodayDay {
    border-color: #444;
    color: #659a22;
    font-weight: 700
}

.EvCalDay a, .EvCalWeekendDay a, .EvCalOtherMonthDays a {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-size: 0.8em;
    line-height: 110%
}

.EvCalTodayDay a {
    background-color: #9C0;
    display: inline-block;
    padding: 4px 3px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.EvCalOtherMonthDays, .EvCalWeekendDay, .EvCalDay {
    min-height: 24px
}

.left-float {
    FLOAT: none
}

.CommPrPageForm h3 {
    font-size: 20px;
}

.CommPrPageForm h4 {
    font-size: 16px;
}

.tablerow td {
    padding: 8px;
}

#ExplanationText {
    padding-bottom: 24px;
}

.CommPrPageForm input[type="checkbox"] {
    width: 20px;
    float: left;
    margin-top: 5px;
    margin-right: 5px
}
.pagination {
    padding-left: 0;
    margin: 20px 1px;
    border-radius: 4px;
}

    .pagination ul {
        display: inline-block;
        margin-left: -31px;
    }

        .pagination ul > li {
            display: inline
        }

            .pagination ul > li > a, .pagination ul > li > span {
                float: left;
                padding: 4px 12px;
                line-height: 20px;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #ddd;
                border-left-width: 0
            }

                .pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span {
                    background-color: #f5f5f5
                }

        .pagination ul > .active > a, .pagination ul > .active > span {
            color: #999;
            cursor: default
        }

        .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus {
            color: #999;
            cursor: default;
            background-color: transparent
        }

        .pagination ul > li:first-child > a, .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -moz-border-radius-topleft: 4px
        }

        .pagination ul > li:last-child > a, .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px
        }

        .pagination ul > li {
            display: inline;
        }

.panel-primary {
    border-color: #428bca;
}

.panel {
    margin-bottom: 20px;
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

#C_3_1_LabelFindHeader, span#C_4_1_LabelFindHeader {
    display: none;
}

.span12 .row-fluid {
    column-count: 2;
    margin-bottom: 16px;
}

h4 {
    margin-bottom: 24px !important;
}

.dl-horizontal dd {
    margin-bottom: 0px !important;
    margin-left: 180px;
    margin-top: -32px;
    float: left;
}

.dl-horizontal dt {
    margin-bottom: 10px;
}

dd > figure.image > img {
    width: 45%;
    height: auto;
}

#SMSTable {
    margin-top: 10px !important;
}

dd.bio {
    white-space: pre-wrap;
    margin-left: 33px;
    margin-top: -22px;
    max-width:60em;
}
dd.eventdesc {
    width: 50em;
    overflow-wrap: break-word;
    overflow: auto;
}
.accordion {
    padding-bottom: 20px !important;
}
.googleMap {
    padding-left: 185px;
}

.header-center {
    text-align: center !important;
    margin-bottom: -13px !important;
}

.search-right {
    text-align: right !important;
}

div#DESIGNEDLISTCONTROL_DOD_Chapter_MembershipGRIDDIV {
    background: hsl(0, 0%, 90%);
}
span#cxa_mailing_label_html {
    display:block;
    background-color: #eeeeee;
    border: none;
    color: rgb(33, 37, 41);
}
.row-space-between {
    justify-content: space-between;
}

.CommPrPageForm #ExplanationText {
    padding-bottom: 7px;
}

.CommPrPageForm label.checkbox:first-of-type {
    padding-bottom: 24px;
}

/* Add/Edit Bio */
#DesignedDiv:has(> span#cst_bio__UP) {
    height: 500px !important; /* Parent div */
}

#DesignedCell:has(> #DesignedDiv:has(> span#cst_bio__UP)) {
    height: 500px !important; /* Grandparent div */
}

span#cst_bio__UP #cst_bio {
    resize: none;
    height: 400px;
}