@import url("https://use.typekit.net/hdr8ozy.css");

:root {

    /* color variables */
    --st-primary: #D42E12;
    --st-secondary: #d0c7a7;
    --st-neutral: #5c584a;
    --st-light: #FFFFFF;
    --st-dark: #000000;
    --heading-color: var(--st-primary); /* alternative color for headings, this can be a variable or a custom hex code */
    --body-font-color: var(--st-neutral);
    --body-line-height: 1.5; /* should match brizy */
    --icon-color: var(--st-secondary);
    --footer-color: var(--st-neutral); /* alternative color for footer, this can be a variable or a custom hex code */

    /* define your imported fonts as variables with fallbacks */
    --ff-heading: 'lato', sans-serif;
    --ff-body: 'lato', sans-serif;

    /* button variables */
    --btn-padding: 10px 20px;
    --btn-font-size: 1rem;
    --btn-font-weight: 700;
    --btn-letter-spacing: 0.0625rem;
    --btn-font-family: var(--ff-heading);

    /* primary button */
    --btn-secondary-bg-color: var(--st-primary);
    --btn-secondary-font-color: var(--st-light);
    --btn-secondary-border-color: var(--st-primary);
    /* primary button hover */
    --btn-secondary-hover-bg-color: var(--st-neutral);
    --btn-secondary-hover-font-color: var(--st-light);
    --btn-secondary-hover-border-color: var(--st-neutral);

    /* secondary button */
    --btn-primary-bg-color: var(--st-neutral);
    --btn-primary-font-color: var(--st-light);
    --btn-primary-border-color: var(--st-neutral);
    /* secondary button hover */
    --btn-primary-hover-bg-color: var(--st-primary);
    --btn-primary-hover-font-color: var(--st-light);
    --btn-primary-hover-border-color: var(--st-primary);

    /* other variables */
    --st-radius: 10px;


    /* nav font variables */
    --nav-font-family: var(--ff-body);

    /* logo variables */

    --logo-height: auto;
    --logo-width: auto;

    /* 1rem = 16px (multiples of 16)
        example: 
            2rem = ~32px
            0.625 = ~10px

        use this calculator for px to rem conversions if you need help:
        https://nekocalc.com/px-to-rem-converter
    */

    /* font variables */

    /* define the min(mobile) heading size and the max(desktop) heading size based on mockup */
    --h1-max-size: 3.4rem;
    --h1-min-size: 2.8rem;

    --h1-font-weight: 700;

    --h2-max-size: 2.8rem;
    --h2-min-size: 2.5rem;

    --h2-font-weight: 700;

    --h3-max-size: 2.3rem;
    --h3-min-size: 2.0rem;

    --h3-font-weight: 700;

    --h4-max-size: 1.9rem;
    --h4-min-size: 1.7rem;

    --h4-font-weight: 700;

    --h5-max-size: 1.6rem;
    --h5-min-size: 1.6rem;

    --h5-font-weight: 700;

    --h6-max-size: 1.2rem;
    --h6-min-size: 1.2rem;

    --h6-font-weight: 700;

    --fs-p: 1.125rem;
    --fs-md: 0.813rem;
    --fs-sm: 0.5rem; /* typically used in "width" and "depth" */

    --body-font-weight: 400;

    /* can stop editing here unless making element specific adjustments*/

    /* clamp variables */
    --fs-h1: clamp(var(--h1-min-size), 2vw + 2.35rem, var(--h1-max-size));
    --fs-h2: clamp(var(--h2-min-size), 2vw + 2.35rem, var(--h2-max-size));
    --fs-h3: clamp(var(--h3-min-size), 2vw + 2.35rem, var(--h3-max-size));
    --fs-h4: clamp(var(--h4-min-size), 2vw + 2.35rem, var(--h4-max-size));
    --fs-h5: clamp(var(--h5-min-size), 2vw + 2.35rem, var(--h5-max-size));
    --fs-h6: clamp(var(--h6-min-size), 2vw + 2.35rem, var(--h6-max-size));

}

.brand--theme__wrapper {
background-color:#fff !important;


body,p{
    font-size: var(--fs-p) !important;
    color: var(--body-font-color) !important;
    font-family: var(--ff-body) !important;
    line-height: var(--body-line-height) !important;
    font-weight: var(--body-font-weight) !important;
}

h1{
    font-size: var(--fs-h1) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h1-font-weight) !important;
}
h2{
    font-size: var(--fs-h2) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h2-font-weight) !important;

}
h3{
    font-size: var(--fs-h3) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h3-font-weight) !important;

}
h4{
    font-size: var(--fs-h4) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h4-font-weight) !important;
}
h4 a{
    font-size: var(--fs-h4) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h4-font-weight) !important;
}
h5{
    font-size: var(--fs-h5) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.2 !important;
    font-weight: var(--h5-font-weight) !important;

}
h6{
    font-size: var(--fs-h6) !important;
    color: var(--heading-color) !important;
    font-family: var(--ff-heading) !important;
    line-height: 1.6 !important;
    font-weight: var(--h6-font-weight) !important;

}
i{
    font-size: var(--btn-font-size) !important;
    color: var(--icon-color) !important;
}
/* overwrite body bg color */

.moveindatediv h6, .moveindatediv h4, .moveindatediv h5{
        font-size: var(--fs-h5) !important;
        color: var(--heading-color) !important;
        font-family: var(--ff-heading) !important;
        line-height: 1.2 !important;
        font-weight: var(--h5-font-weight) !important;
}
.rentContent{
    background-color: #ffffff !important;
}

.location_about_left_col h1 {
    font-size: var(--fs-h3) !important;
    font-weight: var(--h3-font-weight) !important;
    text-align: left;
}

.step2Sec1{
    background-color: var(--st-light) !important;
    padding-bottom: 0px;
}

section.step2Sec1 {
    padding-top: 180px !important;
}

@media only screen and (max-width: 768px) {
    .step2Sec1 {
        padding-top: 140px !important;
    }
}

/* start location template styles */

/* location hero */
.location_image{
    padding-left: 0px !important;
}
@media (max-width: 834px) {
    .col-md-5.location_image {
        padding: 0px 20px !important;
        height: auto !important;
    }
}
.carousel-inner{
    border-radius: var(--st-radius) !important;
}
.carousel-item{
    position: relative !important;
    overflow: hidden !important;
    padding-bottom: 62.5% !important;
}
.carosal_img{
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    object-fit: cover !important;
}
.carousel-control-next-icon{
    color: var(--st-primary) !important;
}
.carousel-control-prev-icon{
    color: var(--st-primary) !important;
}

.p_keyframe {
    border: 1px solid var(--st-primary) !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--st-radius) !important;
    color: var(--st-primary) !important;
    font-size: var(--fs-p) !important;
    max-width: 100% !important;
}
.step_2_title.location_name{
    color: var(--heading-color) !important;
    font-weight: var(--h3-font-weight) !important;
    font-size: var(--fs-h3) !important;
}
.infoSection  a{
    font-size: var(--fs-p) !important;
    line-height: var(--body-line-height) !important;
    font-family: var(--ff-body) !important;
    font-weight: var(--body-font-weight) !important;
}
@media only screen and (max-width: 480px) {
    a.textStyle001.contact_info.addresslink {
        font-size: var(--fs-p) !important;
    }
}

.contact_info {
    color: var(--st-neutral) !important;
}

#ClickToCall a{
    color: var(--st-primary) !important;
    text-decoration: underline !important;
    font-size: var(--fs-p) !important;
    font-weight: var(--body-font-weight) !important;

}
 /* office button */
#office_hours button{
    font-size: var(--btn-font-size) !important;
    padding: 3px 6px !important;
    border-radius: var(--st-radius) !important;
    border: 1px solid var(--st-primary) !important;
    background-color: #fff !important;
    width: 100% !important;
    color: var(--st-primary) !important;

}
#office_hours i{
    color: var(--st-primary) !important;
    margin-top: 0px !important;
}

#office_hours > .dropdown-menu {
    background: var(--st-light) !important;
    width: 100% !important; 
    border-radius: var(--st-radius) !important;
    border: 1px solid var(--st-primary) !important;
}
  
#office_hours > .dropdown-menu table {
    font-size: 0.875rem !important;
    margin-bottom: 0px !important;
}  
#office_hours > .dropdown-menu .table-borderless{
    border: 0px !important;
}
#office_hours .dropdown-menu .table thead {
    display: none !important;
}
#office_hours .dropdown-menu .table tbody{
    background-color: var(--st-light) !important;
    display: flex !important;
    flex-direction: column !important;
}
#office_hours .dropdown-menu .table tbody tr{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}

#office_hours .dropdown-menu .table tbody tr:last-child { 
    display: none !important; 
}

#office_hours .dropdown-menu .table tbody tr td {
    font-family: var(--ff-body) !important;
    font-size: var(--fs-md) !important;
    color: var(--st-primary) !important;
    font-weight: var(--btn-font-weight) !important;
    border: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
}
#active_status_nsl {
    display: none !important;
}

#active_status_two {
    display: none !important;
}

#office_hours button #openClose_nsl {
    font-weight: 700 !important;
    font-family: var(--ff-body) !important;
}

#office_hours button .fw-bolder {
    font-weight: 700 !important;
}

#office_hours button span {
    font-weight: 400 !important;
}

 /* access button */

#toggleArrowAccess{
    font-size: var(--btn-font-size) !important;
    padding: 3px 6px !important;
    border-radius: var(--st-radius) !important;
    border: 1px solid var(--st-secondary) !important;
    background-color: #fff !important;
   color: var(--st-primary) !important;
    width: 100% !important; 
}

#toggleArrowAccess span{
    font-size: var(--btn-font-size) !important;
    color: var(--st-primary);
    font-weight: 400 !important;
}
#toggleArrowAccess i{
    color: var(--st-primary) !important;
}

#toggleArrowAccess .fw-bolder {
    font-weight: 700 !important;
}

#toggleArrowAccess #openCloseTwo {
    font-weight: 700 !important;
    font-family: var(--ff-body) !important;
}

#toggleArrowAccess i{
    margin-top: 0px !important;
}

#access_hours > .dropdown-menu {
    background: var(--st-light) !important;
    width: 100% !important; 
    border-radius: var(--st-radius) !important;
    border: 1px solid var(--st-primary) !important;
}
  
#access_hours > .dropdown-menu table {
    font-size: 0.875rem !important;
    margin-bottom: 0px !important;
}  
#access_hours > .dropdown-menu .table-borderless{
    border: 0px !important;
}
#access_hours .dropdown-menu .table thead {
    display: none !important;
}
#access_hours .dropdown-menu .table tbody{
    background-color: var(--st-light) !important;
    display: flex !important;
    flex-direction: column !important;
}
#access_hours .dropdown-menu .table tbody tr{
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
}

#access_hours .dropdown-menu .table tbody tr td {
    font-family: var(--ff-body) !important;
    font-size: var(--fs-md) !important;
    color: var(--st-primary) !important;
    font-weight: var(--btn-font-weight) !important;
    border: 0px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.quick_links{
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
   background: var(--st-light) !important;
}
  .col-md-7.infoSection {
        background-color: var(--st-light) !important;
    }
.quick_links span{
background-color: #fff;
    padding: 6px 10px;
}
.quick_links a[href="#FacilityFeatures"], .features--link__wrapper {
    display: none !important;
  }
  .quick_links > *:nth-child(1) {
    display: none !important;
  }  
  
.quick_links a{
    color: var(--st-neutral) !important;
    font-size: var(--fs-p) !important;
    font-weight: var(--body-font-weight) !important;
    margin-bottom: 0px;
}
.quick_links a i{
    color: var(--icon-color) !important;
}
.featuredivtop{
    display: none !important;
}

.container.row.newFilterSection.unit_fitering.mblHide {
    position: sticky !important;
    top: 80px !important;
    background: #fff !important;
    z-index: 9 !important;
    padding-bottom: 20px !important;
    border-radius: var(--st-radius) !important;
    margin-top: 120px !important;
    margin-bottom: 0px !important;
}
.newFilterSection #developer {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
}
.multiselect-container li label{
    font-size: var(--fs-md) !important;
    font-weight: var(--btn-font-weight) !important;
}
.multiselect-container li:hover {
    background-color: transparent !important; 
    cursor: pointer;
}
  
.multiselect-container li:hover label {
    color: var(--st-secondary) !important;
}

.multi-select-menuitem {
    font-size: var(--fs-md) !important;
    font-weight: 800 !important;
    display: block; 
    padding: 6px 10px; 
    color: inherit; 
}

.multi-select-menuitem:hover {
    background-color: transparent !important;
    color: var(--st-secondary) !important;
    cursor: pointer;
}

  
#mprDetailDataTable td {
    padding-top: 3rem !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    padding-right: 0px;
}

#mprDetailDataTable h2 {
    font-size: var(--fs-h3) !important;
}

#resetButton{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family);
}
#resetButton:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border-color) !important;
}

.rentContent img.offer_banner{
    margin-top: 3rem;
}

/* rent cta */
.blackBtnStoragely{
    background-color: var(--btn-secondary-bg-color) !important;
    border: 1px solid var(--btn-secondary-border-color) !important;
    color: var(--btn-secondary-font-color) !important;
    font-weight: var(--btn-font-weight) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family);
}
  
.blackBtnStoragely:hover{
    background-color: var(--btn-secondary-hover-bg-color) !important;
    border: 1px solid var(--btn-secondary-hover-border-color) !important;
    color: var(--btn-secondary-hover-font-color) !important;
}
/* reserve cta */
.priceSection .reserveBtnPop{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    font-weight: var(--btn-font-weight) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family);
}
.priceSection .reserveBtnPop:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border-color) !important;
}

.inputcheck {
    padding-right: 10px !important; 
}

/* inquire cta */
.inquiryBtnPop{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    font-weight: var(--btn-font-weight) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.inquiryBtnPop:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border-color) !important;
}

/* pricing section */
h3.actualMoPrice{
    font-size: var(--fs-h3) !important;
    color: var(--st-primary) !important;
    font-family: var(--ff-heading) !important;
}

h3.actualMoPrice small{
    color: var(--st-neutral) !important;
}

small.promoText {
    color: var(--st-neutral) !important;
}

@media (max-width: 834px) {
    h3.actualMoPrice small{
        font-size: var(--fs-md) !important;
    }
}

h3.mb-1.withoutDiscntprice {
    font-size: var(--fs-h3) !important;
    color: var(--st-neutral) !important;
    font-family: var(--ff-heading) !important;
    text-decoration-color: var(--st-primary) !important;
}
h3.mb-1.withoutDiscntprice span{
    text-decoration: line-through !important;
    text-decoration-color: var(--st-primary) !important;

}
h3.mb-1.withoutDiscntprice small{
    color: var(--st-neutral) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--st-primary) !important;

}
@media (max-width: 834px) {
    h3.mb-1.withoutDiscntprice small{
        font-size: var(--fs-md) !important;
    }
}
.unit-type-listing-name{
    border: 1px solid var(--st-neutral) !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--st-radius) !important;
    color: var(--st-neutral) !important;
    font-size: var(--fs-p) !important;
    font-family: var(--ff-heading) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
   line-height: 18px;
   background-color: transparent !important;
}


@media (max-width: 1024px) {
    h2.widthHeight{
        font-size: var(--fs-p) !important;
    }
}
@media (max-width: 834px) {
    h2.widthHeight{
        font-size: var(--fs-sm) !important;
    }
}

#resetButton b {
    text-transform: uppercase;
}

/* width & depth */

.widthHeight yy1,
.widthHeight xx1 {
  font-size: var(--fs-sm) !important;
  top: 2.8rem !important;
}
@media (max-width: 834px) {
    .widthHeight yy1,
    .widthHeight xx1 {
        font-size: var(--fs-sm) !important;
        top: 2.2rem !important;
    }
}
.whatwillfit{
    background-color: transparent !important;
    color: var(--st-neutral) !important;
}

.whatwillfit a{
    color: var(--st-neutral) !important;
}

.whatwillfit .fa-boxes-stacked:before{
    color: var(--icon-color) !important;
}
.offer__sale{
    display: none !important;
}

.page_discount{
    border: 1px dashed var(--st-primary) !important;
    background-color: transparent !important;
margin-bottom: 10px !important;
margin-top: 10px !important;
border-radius: var(--st-radius);
}
.page_discount span{
    font-size: var(--fs-p) !important;
    line-height: var(--body-line-height) !important;
    text-align: center !important;
    color: var(--st-primary) !important;
    font-weight: 700 !important;
    text-decoration-color: var(--st-secondary) !important;   
}


@media (max-width: 992px) {
    .page_discount .whitetext {
        font-size: var(--fs-p) !important;
    }
    #FacilityFeatures h1 {
        font-size: 18px !important;
    }
}
@media (max-width: 600px) {
    .page_discount {
            width: 200%;
            
}
}
#FacilityFeatures .facility_features_title {
    font-size: var(--fs-h2) !important;
    text-align: center;
}

@media (max-width: 834px) {
    .page_discount{
        margin-bottom: 1rem !important;
    }
}
insidetd .featureText {
    display: table-cell !important;
    vertical-align: top !important;
    padding-left: 0.875rem !important;
}
@media only screen and (max-width: 769px) {
    insidetd .featureText{
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.875rem !important;
        align-items: center !important;
        transform: none !important;
        width: 100% !important;;
    }
}
.featureText span{
    margin-bottom: 0px !important;
    font-family: var(--ff-body) !important;
    color: var(--st-neutral) !important;
}
.featureText span i {
        font-size: 1.2rem !important;
        /* margin-right: 0.25rem !important; */
        /* width: auto !important; */
    }
.featureText  a[href="#FacilityFeatures"] {
    display: none !important;
}

.review_btn{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    margin-right: 5px !important;
    margin-left: 30px !important;
    font-family: var(--btn-font-family) !important;
    font-weight: var(--btn-font-weight) !important;
}

.review_btn:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border) !important;
}
@media (max-width: 768px) {
    .review_btn{
        width: 100% !important;
        text-align: center !important;
        margin: 0px !important;
    }
}

#location_info .location_about_left_col h2.location_about_title {
    font-size: var(--fs-h2) !important;
}

#location_info .location_about_left_col p{
    font-family: var(--ff-body) !important;
    color: var(--body-font-color) !important;
    font-size: var(--fs-p) !important;
    font-weight: var(--body-font-weight) !important;
    line-height: var(--body-line-height) !important;
}
.location_info_row1 img{
    border-radius: var(--st-radius) !important;
}
#FacilityFeatures {
    background-color: #f2f2f2 !important;
    padding-bottom: 120px !important;
}

.newrentalstepfivemain {
    background-color: #ffffff !important;
}

.footerFeatures{
    margin-top: 0px !important;
}

.footerFeatures h1{
    font-size: var(--fs-h3) !important;
    text-align: center !important;
}

.features_list li{
    font-size: var(--fs-p) !important;
    color: var(--body-font-color) !important;
    line-height: var(--body-line-height) !important;
    font-family: var(--ff-body) !important;
    font-weight: var(--body-font-weight) !important;
}
ul.lStyleLi.features_list li {
    font-size: var(--fs-p) !important;
    color: var(--body-font-color) !important;
    line-height: var(--body-line-height) !important;
    font-family: var(--ff-body) !important;
    font-weight: var(--body-font-weight) !important;
}
#location_info .location_facility_features_title{
    font-family: var(--ff-heading) !important;
    color: var(--heading-color) !important;
    font-size: var(--fs-h2) !important;
    font-weight: var(--h2-font-weight) !important;
    line-height: 1.2 !important;
}
.facility_features_title{
    color: var(--heading-color) !important;
}

#location_info .location_about_left_col h2 {
    font-size: var(--fs-h4) !important;
    font-weight: var(--h4-font-weight) !important;
}

.rentContent .footerFeatures h1 {
    font-size: var(--fs-h3) !important;
    font-weight: var(--h3-font-weight) !important;
    text-align: center !important;
}

/* rental page */

.whatwillfit a:hover {
    color: var(--st-primary) !important;
}

.summaryofrental{
    background-color: var(--st-primary) !important;
    border-color: var(--st-primary) !important;
}
.rentallocationflex{
    gap: 12px !important;
}
.rentallocationflex {
    margin-left: 0px !important;
}
@media (max-width: 992px) {
    .locationiconflex {
        margin-left: 0px !important;
    }
}

/* specific overwrites from global */
.summaryofrental h2{
    color: var(--st-light) !important;
}
.headtopdivsst h2{
    text-transform: capitalize !important;
}
.rentallocationflex h2{
    font-size: var(--fs-p) !important;
}
.locationiconflex span{
    font-size: var(--fs-p) !important;
    line-height: var(--body-line-height) !important;
    font-family: var(--ff-body) !important;
    font-weight: var(--body-font-weight) !important;
    color: var(--body-font-color) !important;
}
.storagelyunitflex h4{
    font-size: var(--fs-p) !important;
}
.gunratteddiv h2 {
    font-size: var(--fs-p) !important;
}
.inputmain i{
    color: #CACACA !important;
}
.active {
    color: var(--st-light) !important;
    background-color: var(--st-primary) !important;
}

.multiselect-container.dropdown-menu li.active {
    color: var(--st-secondary) !important;
    background-color: #fff!important;
}

.multiselect-item.multiselect-all.active {
    color: var(--st-secondary) !important;
    background-color: #fff!important;
}

input[type="radio"] {
    accent-color: var(--st-secondary);
    outline: none;
}

input[type="radio"]:focus {
    outline: none;
    box-shadow: none;
  }

.day{
    font-size: var(--fs-md) !important;
}
.insHover{
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-size: var(--fs-p) !important;
    color: var(--st-neutral) !important;
}
.insHover:hover{
    background-color: var(--btn-secondary-hover-bg-color) !important;
    border: 1px solid var(--btn-secondary-hover-border-color) !important;
    color: var(--st-light) !important;
}

.belongingsdivs {
    margin-bottom: 20px;
}

.belongingsdivs span {
    color: var(--st-primary) !important;
    background-color: #fff !important;
    border-color: var(--btn-primary-border-color) !important;
    border-radius: var(--st-radius) !important;
    font-weight: 700;
    text-align: center;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase;
    font-size: var(--btn-font-size) !important;
    padding: var(--btn-padding) !important;
    line-height: 1.1;
    font-family: var(--btn-font-family);
}

.belongingsdivs button{
    background-color: var(--btn-secondary-bg-color) !important;
    border: 1px solid var(--btn-secondary-border-color) !important;
    border-radius: var(--st-radius) !important;
    color: var(--btn-secondary-font-color) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-size: var(--btn-font-size) !important;
    padding: var(--btn-padding) !important;
    font-family: var(--btn-font-family) !important;
    font-weight: 700 !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    font-family: var(--btn-font-family);
}

.insItem.insHover.selectedIns {
    background-color: var(--btn-primary-bg-color) !important;
    color: #fff !important;
}

.belongingsdivs button:hover{
    background-color: var(--btn-secondary-hover-bg-color) !important;
    border: 1px solid var(--btn-secondary-hover-border-color) !important;
    color: var(--btn-secondary-hover-font-color) !important;
}
.grantxt h2{
    color: var(--st-neutral) !important;
}
.TenantDetailsdiv h2{
    color: var(--heading-color) !important;
    font-size: var(--fs-h3) !important;
}

.protectbelongingtxt h2 {
    font-size: var(--fs-h3) !important;
}

.selectmoveindate{
    margin-top: 60px !important;
    margin-bottom: 60px !important;
}

.selectmoveindate h2{
    font-size: var(--fs-h3) !important;
}

.rentalinfod3{
    display: flex !important;
    flex-direction: column !important;  
}
.rentalinfod3 div{
    width: 100% !important;
}

.moveindatediv{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}
.detailscradbb{
    background-color: transparent !important;
}
.paymentdetailstfive h2 {
    font-size: var(--fs-h2) !important;
    color: var(--heading-color) !important;
}
.priceinforcards{
    color: var(--body-font-color) !important;
}
.totalduetoday_cl{
    color: var(--heading-color) !important;
}
#showTotalPrice b{
    color: var(--heading-color) !important;
}
#ClickToBeginReservation button{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family) !important;
    font-weight: var(--btn-font-weight) !important;
}
#ClickToBeginReservation button:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border-color) !important;
}

}

.breadcrumb-item.active {
    background-color: transparent !important;
    color: var(--st-secondary) !important;
  }

/* Header/Nav */

#navbarSupportedContent .nav-item:last-child {
    margin-right: 8px !important;
}

.navbar-brand img.logo-header {
    height: var(--logo-height) !important;
    width: var(--logo-width) !important;
}

@media (max-width: 992px) {
.navbar-brand img.logo-header {
height: auto !important;
}
}

@media (max-width: 768px) {
    /* logo  */
    .logo-header{
        margin-left: 0.875rem !important;
        width: auto !important;
    }
    /* force buttons to span full width of toggle nav  */
    .navbar-collapse a.main-button {
        max-width: 100% !important
    }
}

.nav-link {
    font-weight: var(--btn-font-weight) !important;
    font-family: var(--nav-font-family);
    color: var(--st-neutral) !important;
}

.navbar-light .navbar-nav .nav-link {
font-weight: var(--btn-font-weight) !important;
color: var(--st-neutral) !important;
}

.dropdown-item {
    font-size: 0.938rem !important;
    font-family: var(--nav-font-family);
    font-weight: 400 !important;
    color: var(--st-neutral) !important;
}

.dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--st-secondary) !important;
}

/* nav buttons */
/* my account nav button */
.navbar-main-buttons{
    display: flex !important;
    flex-direction: row !important;
    gap: 3px !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (max-width: 768px) {
    .navbar-main-buttons{
        flex-direction: column !important;
    }
}
.main-button-2{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family) !important;
    font-weight: var(--btn-font-weight) !important;
    margin-left: 15px;
}

.main-button-2:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border) !important;
}
@media (max-width: 992px) {
    .main-button-2{
        width: 100% !important;
        text-align: center !important;
        margin: 0px !important;
    }
}
/* rent now nav button */
#ClickToStorageFinderMap .main-button{
    background-color: var(--btn-secondary-bg-color) !important;
    border: 1px solid var(--btn-secondary-border-color) !important;
    color: var(--btn-secondary-font-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    letter-spacing: var(--btn-letter-spacing) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    margin-left: 10px !important;
    font-weight: var(--btn-font-weight) !important;
    font-family: var(--btn-font-family) !important;
}
#ClickToStorageFinderMap .main-button:hover{
    background-color: var(--btn-secondary-hover-bg-color) !important;
    border-color: var(--btn-secondary-hover-border-color) !important;
    color: var(--btn-secondary-hover-font-color) !important;
}

@media (max-width: 992px) {
    #ClickToStorageFinderMap {
        display: flex !important;
        width: 100% !important;
        margin-bottom: 0.725rem !important;
    }
    #ClickToStorageFinderMap .main-button{
        width: 100% !important;
        text-align: center !important;
        margin: 0px !important;
    }

    #ClickToStorageFinderMap .main-button-2{
        width: 100% !important;
        text-align: center !important;
        margin: 0px !important;
    }
}

/* Footer */

.wp_footer_main {
    background-color: var(--footer-color) !important;
}

.wp_footer_details_div_v2 {
    max-width: 100% !important;
}

/* reserve popup */

.inputcheck {
    padding-right: 0px !important; 
}

.today.active.day {
    color: var(--st-light) !important;
    background-color: var(--st-primary) !important;
}

.active {
    color: var(--st-light) !important;
    background-color: var(--st-primary) !important;
}

.today.day {
    background-color: transparent !important;
    border: none !important;
    color: var(--st-neutral) !important;
}

.modal-title.ReservePopUp{
    font-family: var(--ff-heading) !important;
    background-color: var(--st-primary) !important;
    color: var(--st-light) !important;
}

.formstfivediv {
    margin-top: 8px !important;
}

.revervationmain .unitrev1 .headtopdivsst {
    margin-bottom: 4px !important;
}

#reservationDays {
    margin-top: 1rem !important;
}

.headtopdivsst p{
    font-family: var(--ff-heading) !important;
    color: var(--heading-color) !important;
    text-align: left !important;
    font-weight: var(--h2-font-weight) !important;
    font-size: var(--fs-h5) !important;
}
.headtopdivsst h2{
    font-size: var(--fs-h3) !important;
    font-weight: var(--h2-font-weight) !important;
}
.unitrev1 p{
    margin: 0px !important;
    font-weight: var(--h2-font-weight) !important;
    font-size: var(--fs-h5) !important;
}
.storagelyunitflex div:first-child{
    position: relative !important;
    padding-bottom: 62.5% !important;
    width: 100% !important;
    overflow: hidden !important;
}
.storagelyunitflex div img{
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.changebtn{
    background-color: var(--btn-secondary-bg-color) !important;
    border: 1px solid var(--btn-secondary-border-color) !important;
    color: var(--btn-secondary-font-color) !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--st-radius) !important;
    text-transform: uppercase !important;
    font-weight: var(--btn-font-weight) !important;
}
.TenantDetailsdiv p{
    font-family: var(--ff-heading) !important;
    color: var(--heading-color) !important;
    text-align: left !important;
    font-weight: var(--h2-font-weight) !important;
    font-size: var(--fs-h5) !important;
}

.datepicker thead th.dow {
    color: var(--heading-color) !important;
}
@media (max-width: 992.5px){
    .datepicker table > thead > tr > th, .rentContent #rental-date .day, .rentContent #rental-date-sps .day {
        font-size: var(--fs-sm);
    }
}
.revervationmain > .unitrev1 {
    width: 20% !important;
}

.datepicker-inline {
    background-color: #fff;
}

.revervationmain > .datedivrev {
    width: 50% !important;
}
.datedivrev p {
    margin: 0px !important;
}

.revervationmain > .tennatdetailrev {
    width: 30% !important;
}

.unitrev1 .storagelyunitflex h4{
    font-size: var(--fs-h5) !important;
    font-weight: var(--h5-font-weight) !important;
   color: var(--heading-color) !important;
}


.unitrev1 .storagelyunitflex h4 small {
    font-size: var(--fs-h6) !important;
    color: var(--st-neutral) !important;
}

.revtoptxt span, .datepicker .datepicker-switch, .datepicker table > tbody > tr > td, .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    color: var(--st-neutral) !important;
}
.unitrev1 .storagelyunitflex h3{
    font-size: var(--fs-h6) !important;
    font-weight: var(--h6-font-weight) !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
margin-top: 20px;
color: var(--heading-color) !important;
}
.reserveModelWrap yy1, .reserveModelWrap xx1 {
    font-size: 10px !important;
    top: 27px !important;
}
.newbtnorg1{
    background-color: var(--btn-primary-bg-color) !important;
    color: var(--btn-primary-font-color) !important;
    border: 1px solid var(--btn-primary-border-color) !important;
    padding: var(--btn-padding) !important;
    font-size: var(--btn-font-size) !important;
    border-radius: var(--st-radius) !important;
    text-transform: uppercase !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
}
.newbtnorg1:hover{
    background-color: var(--btn-primary-hover-bg-color) !important;
    color: var(--btn-primary-hover-font-color) !important;
    border-color: var(--btn-primary-hover-border-color) !important;
}
/* reserve responsive */
@media (max-width: 768px) {
    .modal-title.ReservePopUp{
        top: -20px !important;
    }
    .storagelyunitflex div:first-child{
        position: relative !important;
        padding-bottom: 62% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .storagelyunitflex div img{
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .revervationmain{
        display: flex !important;
        flex-direction: column !important;
    }
    .revervationmain > .unitrev1 {
        width: 100% !important;
    }
    
    .revervationmain > .datedivrev {
        width: 100% !important;
        padding: 0px !important;
    }
    
    .revervationmain > .tennatdetailrev {
        width: 100% !important;
    }
    
    
}

/* tooltips */


.tooltip-inner{
    background-color: var(--st-neutral) !important;
    font-family: var(--ff-body) !important;
    line-height: var(--body-line-height) !important;
}

@media (max-width: 480px) {
    h3.priceTooltip.actualMoPrice.mb-1 {
        font-size: var(--fs-h3) !important;
        color: var(--st-primary) !important;
        font-family: var(--ff-heading) !important;
    }

    
}

@media (max-width: 1200px) {
    .grayGgnClr h3.priceTooltip.actualMoPrice.mb-1, .grayGgnClr h3.mb-1.withoutDiscntprice {
        font-size: var(--fs-h3) !important;
    }
.infoSection .col-md-6 {
        width: 100% !important;
    }
}

@media (max-width: 1100px) {
    .grayGgnClr h3.priceTooltip.actualMoPrice.mb-1, .grayGgnClr h3.mb-1.withoutDiscntprice {
        font-size: var(--fs-h4) !important;
    }
}

@media (max-width: 834px) {
    .grayGgnClr h3.priceTooltip.actualMoPrice.mb-1, .grayGgnClr h3.mb-1.withoutDiscntprice {
        font-size: var(--fs-h5) !important;
    }
.infoSection .col-md-6 {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .grayGgnClr h3.priceTooltip.actualMoPrice.mb-1, .grayGgnClr h3.mb-1.withoutDiscntprice {
        font-size: var(--fs-h4) !important;
    }
}

/* start brand specific edits if needed */
.col-md-5.sizeSecIcon.leftunitstable {
    background-color: #FAF8F1 !important;
}

.featureListSection {
    background-color: #FAF8F1 !important;
}

.slick-next:before, .slick-prev:before {
    color: var(--st-primary) !important;
}

.location_about_right_features {
    display: none !important;
}

.location_about_left_col {
    width: 100% !important;;
}

.swivl-primaryButton {
width: 75px !important;
}

.scc-ProfileCancelButton {
color: #fff !important;
margin-right: 10px;
}