.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
#background1{
    background: url('../images/Side.jpg') no-repeat 100% 0;
}

#background2{
    background: url('../images/Side.jpg') no-repeat 0 0;
}


/* Accordion */
.accordionHeader {
    background-color: #f3f4f5;
    color: black;
    padding: 10px;
    font-weight: bold;
    text-align: left;
    font-size: large;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    justify-content: space-between; /* Align text and icon */
    margin-top:2px;
}

    .accordionHeader::after {
        content: "▼"; /* Default collapsed icon */
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .accordionHeader.expanded::after {
        content: "▶"; /* Expanded icon */
    }

.accordionContent {
    font-family: 'Montserrat', sans-serif;
    background-color: white;
    padding: 10px;
    text-align: left;
    padding-left: 30px;
    font-weight: normal;
    word-wrap: break-word; /* Ensures long words wrap */
    overflow-wrap: break-word; /* Alternative for better compatibility */
    white-space: normal; /* Allows text to wrap naturally */
    overflow-x: hidden;
    box-sizing: border-box;
}
    .accordionContent img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 10px 0;
    }
/*Cascading DropDown*/

/*CollapsiblePanel*/
.collapsePanel {
	
	background-color:white;
	overflow:hidden;
}

.collapsePanelHeader {
    /*width: 100%;*/
    background-color: #679941;
    color: #FFF;
    font-size: large;
    font-weight: bold;
    padding: 10px 0px 10px 20px;
}

#master_content .collapsePanelHeader a {color:#FFF;}
#master_content .collapsePanelHeader a:hover {text-decoration:none;background:none;}

/*Confirm Button*/

/* DropShadow */

#master_content .dropShadowPanel span {color:white;text-decoration:underline;}
#master_content .dropShadowPanel span:hover {text-decoration:none;}

.DivSectionNormal
{font-size:12pt;
 font-family:'Montserrat', sans-serif; 
 background-color:#08A522;
 color:White;
 text-align:left;
 font-weight:bold;
 /* -moz-border-radius-topleft:10px;*/ 
 }

.DivSectionLabel
{font-size:13pt;
 height: 40px;
 font-family:'Montserrat', sans-serif; 
 background-color:#679941;
 color:White;
 text-align:left;
 font-weight:bold;
 border-top-left-radius:15px;
 border-top-right-radius:15px;
 -moz-border-radius-topleft:15px;
 -moz-border-radius-topright:15px;
 }
 
 .DivSectionLabelNew
{font-size:14pt;
 font-family:'Montserrat', sans-serif; 
 background-image:url(../Images/mback.gif.ashx);
 color:White;
 text-align:left;
 font-weight:normal;
 text-indent:10px;
 height:31px;
 vertical-align:middle;
 }

.maincontainer 
{
    z-index: 5000;
}

/*Header*/
.Tab .ajax__tab_header
{
    color: white;
    font-family:'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
    border:2px solid #000000;
    padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab {
    color: White;
    padding: 5px;
    font-weight: bold;
    background-color: #499A30;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_active .ajax__tab_inner {
    color: White;
    background-color: #499A30;
    padding-right: 6px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_active .ajax__tab_outer {
    color: White;
    padding-right: 6px;
    background-color: #499A30;
    border: 2px solid #000000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab {
    color: White;
    height: 30px;
    background-color: #499A30;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_hover .ajax__tab_inner {
    color: White;
    padding-left: 10px;
    cursor: pointer;
    background-color: #499A30;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_hover .ajax__tab_outer {
    color: White;
    padding-right: 6px;
    background-color: #499A30;
    border: 2px solid #000000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab {
    color: white;
    padding: 5px;
    background-color: #2c6f14;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_inner {
    color: White;
    padding-left: 10px;
    background-color: #2c6f14;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}
.Tab .ajax__tab_outer {
    color: White;
    padding-right: 6px;
    margin-right: 5px;
    background-color: #2c6f14;
    border: 2px solid #000000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}

 .DivPaginate
{
 }
 .PaginateSections{
 font-family:'Montserrat', sans-serif; 
 font-size:large;
 background-color:#08A522;
 color:White;
 text-align:left;
 font-weight:bold;
 height: 50px;
 width: 100%;
 padding: 3px 0px 0px 0px;
 border-top-left-radius:3px;
 border-top-right-radius:3px;
 border-bottom-left-radius:3px;
 border-bottom-right-radius:3px;
 -moz-border-radius-topleft:3px;
 -moz-border-radius-topright:3px;
 -moz-border-radius-bottomleft:3px;
 -moz-border-radius-bottomright:3px;
 overflow:hidden;}
 .bg {width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5000;
}

/*Modal Popup*/
/*.modalBackground {
	background-color:Gray;
}*/
/*Modal Popup
.modalBackground {
	background-image:url(../Images/NewBG.jpg.ashx);
	background-repeat:repeat;
}
*/
/*
.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

*/

.modalBackground
    {
    background-color: transparent;
        /*background-image:url(../Images/NewYouBG.jpg);*/
/*        filter: alpha(opacity=60);
        opacity: 0.6;*/
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        width: 300px;
        border: 3px solid #848484;
        /*border-radius: 12px;*/
        padding:0;       
    }
    .modalPopup .header
    {
        background-color: #848484;
        height: 30px;
        color: White;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        font-size: large;
        /*border-top-left-radius: 6px;
        border-top-right-radius: 6px;*/
    }
    .modalPopup .body
    {
        min-height: 50px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
    }
    .modalPopup .footer
    {
        padding: 6px;
    }
    .modalPopup .yes, .modalPopup .no
    {
        height: 23px;
        color: White;
        line-height: 23px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        border-radius: 4px;
    }
    .modalPopup .yes
    {
        background-color: #2FBDF1;
        border: 1px solid #0DA9D0;
    }
    .modalPopup .no
    {
        background-color: #9F9F9F;
        border: 1px solid #5C5C5C;
    }


.pretty-table {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9em;
    color: #FFF;
    background: #bcd0e4;
}

    .pretty-table caption {
        caption-side: bottom;
        font-size: 0.9em;
        font-style: italic;
        text-align: right;
        padding: 0.5em 0;
        color: #FFF;
    }

    .pretty-table th {
        border: 1px dotted #666;
        padding: 0.5em;
        text-align: center;
        color: #FFF;
        padding-left: 10px;
        padding-right: 10px;
    }

    .pretty-table td {
        border: 1px dotted #666;
        padding: 0.5em;
        text-align: center;
        color: #000;
        padding-left: 10px;
        padding-right: 10px;
    }

    .pretty-table th[scope=col] {
        color: #FFF;
        background-color: #8fadcc;
        text-transform: uppercase;
        font-size: 0.9em;
        border-bottom: 2px solid #333;
        border-right: 2px solid #333;
    }

    .pretty-table th + th[scope=col] {
        color: #fff;
        background-color: #7d98b3;
        border-right: 1px dotted #666;
    }

    .pretty-table th[scope=row] {
        background-color: #b8cfe5;
        border-right: 2px solid #333;
    }

    .pretty-table tr.alt th, .pretty-table tr.alt td {
        color: #2a4763;
    }

    .pretty-table tr:hover th[scope=row], .pretty-table tr:hover td {
        background-color: #BEA1C6;
        color: #000;
        font-weight: bold;
    }

.trfirst {
    background-color: #FFFBD6;
}

.trsecond {
    background-color: #ffffff;
}

.trheader {
    background-color: #08A522;
    text-align: center;
}

[data-element="card"] {
height: 100%;
width: 100%;
}
[data-container="button"] {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
.cellContainer {
    width: 25%;
    float: right;
}
.common-checkbox input {
    height: 20px;
    width: 20px;
}

/* ======= Buttons Styling ======= */
.NewButtons {
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: White;
    background-color: #499A30;
    border-color: White;
    border: none;
    padding: 10px 15px;
    min-width: 120px;
    text-align: center;
    cursor: pointer;
}

    .NewButtons:hover {
        background-color: #3E8226;
    }

/* Responsive Button Adjustments */
@media (max-width: 600px) {
    .NewButtons {
        width: 100%;
    }
}

/* ======= Navbar ======= */
.navbar {
    position: relative;
    min-height: 120px;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
    border: 1px solid transparent;
    background-image: url("/images/NewYou.png");
    background-size: cover; /* or contain */
    background-repeat: no-repeat;
    background-position: center;
}

/* Mobile override */
@media (max-width: 767px) {
    .navbar {
        background-image: url("/images/MobileNewYou.png");
        background-repeat: no-repeat;
        background-size: cover; /* Ensures the image covers the navbar without repeating */
        background-position: center; /* Centers the background image */
    }
}

/* Responsive Header */
.header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 10px 20px;
}

.left-space {
    flex: 1; /* Pushes the right-container to the right */
}

.right-container {
    display: flex;
    flex-direction: column; /* Ensures buttons are below search bar */
    align-items: flex-end; /* Aligns everything to the right */
    gap: 20px; /* Adds spacing between search and buttons */
}

/* Mobile Responsive Navbar */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        text-align: center;
    }

    .header-container {
        flex-direction: column;
        align-items: center;
    }

    .right-container {
        align-items: center;
    }
}

.search-container {
    display: flex;
    align-items: flex-end;
}

.search-button {
    cursor: pointer;
    border: none !important;
    background: none;
}

.button-container {
    display: flex;
    gap: 10px;
}

.btn-custom {
    padding: 8px 10px;
    font-size: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

    .btn-custom:hover {
        background-color: #0056b3;
    }
.slideshow-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    position: relative;
}

    .slideshow-container img {
        width: 100%;
        height: auto;
    }

@media (max-width: 768px) {
    .slideshow-container {
        max-width: 100%;
    }
}

.notification-button {
    position: relative;
    padding: 6px 10px;
    font-size: 16px;
    color: #333;
    background: none;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .notification-button:hover {
        text-decoration: none;
        color: #000;
    }

    .notification-button .badge {
        font-size: 12px;
        padding: 3px 6px;
        vertical-align: top;
    }

/* Buttons */

.Buttons {
    font-family: 'Montserrat', sans-serif !important;
    display: inline-block;
    padding: 10px 10px;
    font-weight: bold;
    font-size: 1.5rem;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-align: center;
    color: white;
    background-color: #449633;
    /*max-width: 90%;*/
}

    .Buttons:hover {
        background-color: #36c618;
    }
/* Mobile styles */
@media (max-width: 768px) {
    .button {
        width: 100%;
        font-size: 1.2rem;
        padding: 10px 0;
    }
}
.article-content img {
    max-width: 100%;
    height: auto;
    text-align: left;
}

@media (max-width: 768px) {
    table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    td, th {
        display: inline-block;
        width: auto !important;
        box-sizing: border-box;
        padding: 8px;
    }

    .form-control,
    .Buttons,
    input[type="text"],
    textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    .aspNetButtonContainer {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

        .aspNetButtonContainer > * {
            margin: 5px;
        }

    .updatepanel-wrapper {
        padding: 10px;
    }
}
.headerlink,
.headerlink:visited,
.headerlink:hover,
.headerlink:active {
    padding: 5px;
    text-decoration: none !important;
    font-size: 16px;
    color: #201F1F !important; /* or any color you want */
    font-weight: normal; /* optional for header styling */
}
@media (max-width: 600px) {
    .headerlink {
        padding: 2px 4px !important;
        font-size: 0.85rem;
    }
}