img { 
    max-width:100%; 
}

html,
body {
  height:100%;
}

.bread-crumb-background {
	background-color:#FAFAF7;
	max-height:45px;
}


/* Sticky footer styles*/
/* Wrapper for page content to push down footer */
.wrap {
  min-height:100%;
  height:auto;
  margin-top:0;
  margin-bottom:-300px;
  padding-top:0;
  padding-bottom:300px;
}

.wrap-auth {
  min-height:100%;
  height:auto;
  margin-top:0;
  margin-bottom:-150px;
  padding-top:0;
  padding-bottom:150px;
}

/* Set the fixed height of the footer here */
.footer {
  height:300px;
  background-color:#FAFAF7;
}

.footer-auth {
  height:150px;
  background-color:#FAFAF7;
}

.footer-background {
	background-color:#FAFAF7;
}

/*Navbar Spacing*/
.navbar-spacer-xs {
	background-color:#FAFAF7;
	border-color:#FAFAF7;
	min-height:64px;
}

.navbar-spacer {
	background-color:#FAFAF7;
	border-color:#FAFAF7;
	min-height:91px;
}

/*Padding*/
.baby-padding {
    padding-left:3px;
    padding-right:3px;
}

.toddler-padding {
    padding-left:5px;
    padding-right:5px;
}

.massive-toddler-padding {
    padding-left:15px;
    padding-right:15px;
}

.teen-padding {
    padding:5px;
}

.young-adult-padding {
    padding:10px;
}

.retired-person-padding {
    padding:15px;
}

/* Custom CSS */
.no-padding-left-right {
    padding-left: 0;
    padding-right: 0;
}

.width-100-percent {
    width: 100%;
}

.btn-siteDefaultGrey {
    background-color: buttonface;
}

.siteDefaultColor {
    color:#333333; 
}

.no-margin
{
    margin: 0;
}

.navigation-arrow {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    color: #F2F2F2;
    padding:0;
}

.navigation-arrow:hover {
    color: #FFF;
    background-color:#F2F2F2;
    text-decoration:none;
}

.dash-list{
    list-style-type:none;
}

.dash-list li:before{
    content: '\2014';
    margin-right:1em;
}

.vertical-arrow{
    position:absolute;
    top:50%;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}

.shipping-assistant-banner {
    background-color: #F9F7F4;
}

.shipping-assistant-heading{
    color:#999999;
}

/*Checkbox Button*/
.checkbox-link {
    margin: 4px;
    background-color: #FEFEFB;
    border-radius: 4px;
    border: 1px solid #FEFEFB;
    overflow: auto;
    color: #1B3365;
}

.checkbox-link:hover {
    background: #DDD;
    cursor: pointer;
}

.checkbox-link label {
    float: left;
    width: 12em;
    margin-bottom: 0;
}

.checkbox-link label:hover{
    cursor:pointer;
}

.checkbox-link label span {
    text-align: center;
    padding: 3px 0px;
    display: block;
}

.checkbox-link label input {
    position: absolute;
    top: -20px;
}

.checkbox-link [type="checkbox"]:checked ~ span {
    background-color: #999;
    color: #FFF;
}

/* Checkbox Button style for specific size */

/* iPhone X portrait*/
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 812px) 
    and (-webkit-min-device-pixel-ratio: 3)
    and (orientation: portrait){

        .mobile-button-size {
            width: 33.33333333%;
        }
}

/* iPhone 6, 6s, 6+, 7, 7+, 8, 8+ portrait*/
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) {

        .mobile-button-size {
            width: 33.33333333%;
        }
}

/* iPhone 5, 5s, SE portrait */
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) {

        .mobile-button-size {
            width: 33.33333333%;
        }
}

/* Galaxy S5 portrait */
@media screen 
    and (device-width: 320px) 
    and (device-height: 640px) 
    and (-webkit-device-pixel-ratio: 3) 
    and (orientation: portrait) {

        .mobile-button-size {
            width: 33.33333333%;
        }
}

/* Declaration Form Loader*/
.declaration-loader{
    position:fixed;
    z-index:1;
    height:20em;
    width:20em;
    margin:auto;
    top:50%;
    left:50%;
}

.declaration-loader:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity:0.3;
    width: 100%;
    height: 100%;
    background-color: #DDD;
}

/* Chatroom */
#onlineUsers li{
    list-style-type:none;
}

#onlineUsers li:before {
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    vertical-align:bottom;
}

#discussion li:not(:last-child) {
    margin-bottom: 1em;
}

.chatbox {
    background-color: #F0F0E7;
    border-radius: 5px;
    padding-top: 15px;
}

.chat-textarea .emojionearea{
    min-height: 37px !important;
}

/* Buy Now Script Helper*/
.myBuyNowScriptHelperButton:hover{
    background-color:transparent;
    text-decoration:none;
}

/* Question Analysis */
.qa-title * {
    margin: 0;
    padding: 0;
}

.qa-panel {
    margin: 0;
    overflow: hidden;
}

.qa-btn {
    display: inline-flex;
    align-items: center;

    padding-left: 0;
    padding-right: 0;
}
.qa-btn span {
    margin-right: 5px;
    white-space: pre-line;
}
.qa-btn span.no-wrap {
    white-space: nowrap;
}
.qa-btn span.flex-grow {
    flex-grow: 1;
}

.qa-stat {
    display: flex;
}
.qa-stat div.h5 {
    min-width: 175px;
}

.qa-ra-table {
    width: 100%;
}
.qa-ra-table td {
    word-wrap: break-word;
}
.qa-ra-table td * {
    margin: 0;
    padding: 0;
}
.qa-ra-table td > b {
    color: forestgreen;
}
.qa-ra-table .w-50 {
    width: 50%;
}
.qa-ra-table .w-25 {
    width: 25%;
}

.report-filter-label {
    text-align: right;
}

.notification-item {
    background-color: #F0F0F0;
    border-radius:25px;
    margin-bottom:10px;
}

/*xs*/
@media (max-width: 767px) {
    .qa-panel > .panel-header {
        padding-left: 0;
        padding-right: 0;
    }
    .qa-panel > .panel-body {
        padding-left: 0;
        padding-right: 0;
    }
    .qa-panel > .panel-footer {
        padding-left: 0;
        padding-right: 0;
    }

    .qa-btn {
        display: flex;
    }

    .report-filter {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .report-filter > * {
        margin-top: 15px;
    }

    .report-filter-label {
        text-align: left;
        margin: 0;
    }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
}

/*lg*/
@media (min-width: 1200px) {
}

.notificationBody {
    opacity: 0;
    height: 0;
    transition: all ease-in-out .2s;
}
.dot {
    height: 10px;
    width: 10px;
    background-color: #00204f;
    border-radius: 10px;
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
}

.dot_empty {
    background-color: #bbb;
}

.loader__dot {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.progress-indicator-scroll {
    width: auto;
    overflow-y: auto; /* Ensures a scroll bar is visible when needed */
    padding: 1em; /* Adjust inner padding as required */
    height: 6em; /* Keeps the intended height */
    box-sizing: border-box; /* Includes padding within the height/width calculation */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    scrollbar-width: none; /* Firefox */
}

    .progress-indicator-scroll::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

.inline-flex {
    display: inline-block; /* Mimics `inline-flex` */
    vertical-align: middle; /* Ensures inline alignment */
    margin: 0.5em; /* Adds space around the elements */
}

.flex {
    display: flex; /* Adds flex behavior */
}

.justify-content-center {
    justify-content: center; /* Center items horizontally */
}

.align-items-center {
    align-items: center; /* Center items vertically */
}

.flex-column {
    flex-direction: column; /* Stack children vertically */
}

.position-relative {
    position: relative; /* For relative positioning */
}

.position-absolute {
    position: absolute; /* For absolute positioning */
}

.text-nowrap {
    white-space: nowrap; /* Prevent text wrapping */
}
.progress-indicator-icon {
    text-align: center; /* Ensures text is centered */
}
.custom-icon-size {
    font-size: 4rem !important;
}
.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.inactive-slide {
    display: none;
    text-align: center;
}

.active-slide {
    display: block;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-size: 18px;
    padding: 8px;
    user-select: none;
    z-index: 10; /* Ensure it stays above other elements */
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}