:root {
    --c-dblue: #033474;
    --c-hblue: #304a6b;
    --c-hbluealt: #2986b8;
    --c-btngreen: #31c976;
    --c-bg-blue: #126ca5;

    /*  */
    --bg-main-grad: linear-gradient(79deg, rgba(35,90,134,1) 0%, rgba(12,116,178,1) 57%);
    --bg-alt-grad: linear-gradient(79deg, rgba(44, 119, 173, 1) 0%, rgba(41, 129, 188, 1) 25%, rgba(38, 139, 204, 1) 54%, rgba(36, 146, 214, 1) 100%);
}

.debug {
    border: 1px solid red;
}

* {
    box-sizing: border-box
 }

 html{width: 100%;height: 100%;}
 
 body {
     width: 100%;
     height: 100%;            
     margin: 0px;       
     -webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;	
	font-family: 'Nunito Sans';
	font-weight: normal;       
 }


 .backbone-main {
     width: 100%;
     height: 100%;
     display: flex;
     margin: 0px;      
     place-content: center;   
 }

 /* Import Fonts */
 @font-face {
    font-family: 'Nunito Sans';
    src: url('NunitoSans-ExtraBold.woff2') format('woff2'),
        url('NunitoSans-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('NunitoSans-Regular.woff2') format('woff2'),
        url('NunitoSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('NunitoSans-SemiBold.woff2') format('woff2'),
        url('NunitoSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('NunitoSans-Bold.woff2') format('woff2'),
        url('NunitoSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

 .box-bg {
    background: var(----bg-main-grad);
 }

 
 /** SEARCH PAGE **/        
     #search-main {
         margin: 0px !important;
     }

     #search-left {                            
         padding: 0px 20px;
         max-width: 800px;
     }

     #search-right 
     {
        max-width: 800px;                             
     }

     #search-main-text {            
         flex: 1;
         padding-top: 160px;
     }

     #nav,
     #search-nav-links {
         height: 40px;
     }

     #search-nav-links a {                
         text-decoration: none;
     }

     .gap-20 {
         gap: 20px;
     }

     #search-terms {
         border-top: 0.5px solid #FFFFFF;
         padding-top: 30px;            
     }

     #search-terms a {                
         text-decoration: none; 
     }

     #search-footer {                
         padding-top: 30px;                            
         border-top: 0.5px solid #5F7199;

     }

     #search-footer * {                
         text-decoration: none;
     }

     @media screen and (max-width: 992px) {
         #search-left { 
             padding: 0px;
         }

         #search-main-form {
             padding: 10px 20px;
             border-top: 1px solid #033474;
             margin: 10px
         }

         #search-right {
            margin-top: 20px;
             padding: 0px;
         }

         #search-main-text {
             padding-top: 0px;
         }

         .shrink {
            font-size: 0.75rem;
         }
     }

 /** SEARCH END **/

 /** FROM FIGMA **/
     .c2 {
         font-family: 'Inter';
         font-style: normal;
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
     }        

     .c4 {
         /* Desktop/Extras/Caption C1 */
         font-family: 'Inter';
             font-style: normal;
             font-weight: 500;
             font-size: 16px;
             line-height: 20px;
             margin-bottom: 40px;
     }

     .p1 {
         /* Mobile/Extras/📱 Parapgraph P1 */
         font-family: 'Inter';
         font-style: normal;
         font-weight: 400;
         font-size: 16px;
         line-height: 24px;
     }

     .p2 {
         font-family: 'Inter';
         font-style: normal;
         font-weight: 400;
         font-size: 18px;
         line-height: 28px; 
     }
     
     .auto-layout {
         /* Auto layout */
         display: flex;
         flex-direction: row;
         align-items: center;
         padding: 0px;
         gap: 30px;
     }

     .auto-layout-col {
         /* Auto layout */
         display: flex;
         flex-direction: column;
         /* align-items: center; */
         padding: 0px;
         /* gap: 30px; */
     }
             
     .small-button {
         font-family: 'Inter';
         font-style: normal;
         font-weight: 600;
         font-size: 14px;
         line-height: 20px;
     }

     
    .small-button:hover {
        /* background-color: var(--c-dblue); */
        background: linear-gradient(79deg, rgba(44, 119, 173, 1) 0%, rgba(41, 129, 188, 1) 25%, rgba(38, 139, 204, 1) 54%, rgba(36, 146, 214, 1) 100%);
    }

     .heading3 {
        font-family: Nunito Sans, sans-serif;
        font-style: normal;
        font-size: 36px;
        line-height: 36px;
        color: #fff;
        font-weight: 800;
         /* Desktop/Headings/Heading 3 */
         /* font-family: 'Poppins'; */
         /* font-style: normal; */
         /* font-weight: 500; */
         /* font-size: 40px; */
         /* line-height: 50px; */

         /* identical to box height, or 125% */
         letter-spacing: 0.01em;
     }

     .heading4 {
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 600;
         font-size: 24px;
         line-height: 32px;
         margin-bottom: 10px;
     }

     .heading2 {
         /* Desktop/Headings/Heading 2 */
         font-family: 'Poppins';
         font-style: normal;
         font-weight: 500;
         font-size: 50px;
         line-height: 60px;                
     }

 /** FROM FIGMA END **/

 .big-button {        
     background: #033474;

     /* Button Shadow */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     border-radius: 100px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-size: 16px;
     line-height: 20px;
     text-align: center;
     letter-spacing: 0.01em;
     border:none;

     /* White */
     color: #FFFFFF !important;
     padding: 18px 30px;
 }

 a.big-button {
     text-decoration: none;
 }


 .big-button:disabled {
     background: #b3bbc6;   
 }

 .med-button {        
     /* background: #033474; */
     background: #31c976;
     /* Button Shadow */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     border-radius: 100px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-size: 16px;
     line-height: 12px;
     text-align: center;
     letter-spacing: 0.01em;
     border:none;

     /* White */
     color: #FFFFFF !important;
     padding: 12px 30px;
 }

 .med-button * {
     color: #FFFFFF !important;
 }

 a.med-button {
     text-decoration: none;
 }


 .med-button:disabled {
     background: #b3bbc6;   
 }

 #orderlist-main { min-height: 100%;}

 #orderlist-header {        
     /* Gradient */
     /* background: linear-gradient(283.36deg, #9ED600 11.58%, #00C466 82.05%); */
     /* border-radius: 0px 0px 100px 0px; */
     padding-top: 40px;        
 }

 #orderlist-navigation {                
     /* White */
     background: #FFFFFF;

     /* Long Shadow */
     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
     border-radius: 100px;
     
     padding: 10px;
     padding-left: 30px;
     
 }

 #orderlist-nav-links a {
     color:#033474;
     text-decoration: none;
     white-space: nowrap;
 }

 @media screen and (max-width: 480px) {
     #orderlist-navigation {          
         flex-direction: column;
     }

     #orderlist-navigation img 
     {
         max-height: 40px;
     }

     #orderlist-nav-links {
         justify-content: center !important;
     }

     #orderlist-header {
         padding-top: 10px;
     }

     .heading2 {
         font-size: 2em;
         text-align: center;
     }
 }
 


 #orderlist-main-title {        
     border-right: 1px solid white;
 }

 @media screen and (max-width: 768px) {
     #orderlist-main-title {        
         border-right: none;
         border-bottom: 1px solid white;
     }
 }

 #orderlist-main-text {            
     padding: 20px;  
 }

 #orderlist-main-text * {
     color: #FFFFFF;
 }

 


 #orderlist-main-title span 
 {
     padding: 10px;
 }

 #orderlist-main-title a 
 {
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 100px;
     padding: 10px 30px;
     text-decoration: none;
     width: 233px;
 }

 .c-dblue { color: #033474; }
 .c-gray100 { /* Gray 100 */ color: #5F7199; }

 #orderlist-maincontent {
     padding: 50px;
     max-width: 1280px;
     margin: auto;
 }

 .product-card {
     width: 270px;        
     max-width: 270px;
     /* White */
     background: #FFFFFF;
     border: 0.5px solid rgba(95, 113, 153, 0.25);
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
     border-radius: 15px;        
 }

 .product-card img {
     border-radius: 15px !important;
     max-width: 100%;
     max-height: 100%;
 }

 .product-main-details {
     /* padding: 20px; */
 }

 .product-date {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
 }

 .product-name {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 16px;
     line-height: 20px;
     color: #033474;
 }

 .product-amount {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-size: 18px;
     line-height: 24px;        
     color: #033474;
 }
 .product-details {
     padding:20px;
     gap: 10px;

 }

 .product-order-details {
     color: #033474;
     padding: 10px 30px;
     height: 40px;
     background: rgba(95, 113, 153, 0.1);
     border-radius: 100px;
     border:none;
     color: #033474;
     margin:10px;
 }

.product-order-details:hover {    
    color: #FFF;
    background: var(--c-dblue);    
}


 .link-button {
     color: #033474;
     padding: 10px 30px;
     height: 40px;
     background: rgba(95, 113, 153, 0.1);
     border-radius: 100px;
     border:none;
     color: #033474;
     margin:10px;
     text-decoration: none;
     text-align: center;
 }
 
 .caps-label {
     font-family: 'Poppins';
     font-style: normal;
     font-weight: 400;
     font-size: 15px;
     line-height: 20px;

     /* identical to box height, or 133% */
     letter-spacing: 0.06em;
     text-transform: uppercase;
 }

 #orderlist-footer a {
     text-decoration: none;
 }
 #orderlist-footer {        
     gap: 20px;
     margin: 50px;
 }

 #orderlist-footer-right {
     flex: 1;
     place-content: flex-end;
     place-items: flex-start;
 }

 #orderlist-links-1, #orderlist-links-2, #orderlist-links-3 {
     gap: 20px;
 }

 .large-button {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-size: 18px;
     line-height: 20px;

     /* identical to box height, or 111% */
     letter-spacing: 0.01em;        
 }

 .modal-content { border:none; border-radius: 20px; box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1); }
 .modal-body .btn-close { float: right; }

 #orderdetails {
     max-width: 640px;
 }

 #orderdetails-order-details {
     align-items: flex-start;
 }

 #orderdetails-addtional-details {
     /* opacity: 0.5; */
     margin-top: 10px;
     padding-top: 10px;
     /* Gray 100 */
     border-top: 0.5px solid rgb(95 113 153 / 50%);
 }

 #orderdetails-addtional-details div {
     /* place-content: space-between; */

 }

 #orderdetails-addtional-details span {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     font-size: 12px;
     line-height: 16px;

     /* Dark Blue */
     color: #033474;   
     
     flex: 1;
     text-align: right;
 }


 @media screen and (max-width: 430px) {
     #orderdetails-addtional-details .d-flex {
         flex-direction: column;
     }

     #orderdetails-addtional-details span {
         text-align: left;
     }
 }

 #orderdetails-addtional-details small {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;

     /* Gray 100 */
     color: #5F7199;
 }

 #orderdetails-subactions {
     /* display: grid; */
     /* grid-template-columns: 1fr 1fr; */
     gap: 10px;
     margin-top: 30px;
 }

 #orderdetails-subactions button {

     width: 280px;
     height: 50px;

     /* White */
     background: #FFFFFF;
     border: 0.5px solid rgba(95, 113, 153, 0.25);
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
     border-radius: 10px;
 }

 #orderdetails-subactions button:hover {    
    color: #FFF;
    background: var(--c-dblue);    
}

 #orderlist-side-content span 
 {
     max-width: 400px;
 }


 .icon-action-success {
    width: 60px;
    height: 60px;    
    background: rgba(0, 209, 105, 0.05);
    border-radius: 100px;    
    color: rgba(0, 209, 105);
    justify-content: center;
    display: flex;
    align-content: center;
    align-items: center;
    font-size: 2em;
 }

.icon-action .heading4 {
    margin: 0px;
}

 
     

 #orderactions-resend-receipt {
     padding: 20px;
     gap: 20px;
 }


 #orderactions-contact-support .form-label,
 #orderactions-request-refund .form-label,
 #orderdetails-update-address .form-label,
 #orderactions-contact-support .form-label {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 13px;
     line-height: 20px;
     text-transform: uppercase;
     color: #033474
 }

 #orderactions-contact-support {
     gap: 10px;
 }

 #rate-unhappy,
 #rate-happy {
     font-size: 75px;
     border-radius: 20px;
     text-align: center;
     margin: 10px;
 }

 #rate-happy {
     background: rgba(0, 209, 105, 0.1);
     color: #00D169;        
 }

 
 #rate-unhappy {
     background: rgba(250, 50, 146, 0.1);
     color: #FA3292;        
 }

 .gap-c-10 {
     column-gap: 10px;
 }
 .pad-top-20 {
     padding: 20px 0px;        
 }

 .switch-happy .form-check-input:checked
 {
     background-color: #198754;
     border-color: #198754;
 }
 
 .switch-unhappy .form-check-input:checked
 {
     background-color: #dc3545;
     border-color: #dc3545;
 }

 #orderactions-rate-product .accordion-button {
     display: none;
 }
 
 #orderactions-rate-product .accordion-button.collapsed {
     display: flex;
     background: lightgray;
     font-weight: 200;
     font-size: 14px;
 }

 #orderactions-rate-product .accordion-button i 
 {
     flex: 1;
     text-align: right;
     padding-right: 50%;
 }

 #rate-product .switch-happy {

 }


/* FOOTER */



 #footer, #footer-new
 {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(/img/footer.svg);
 }

 footer .social-icon a, footer .social-icon a:hover {
     background: #5F7199;
     opacity: 0.5;
     color: #fff;
 }

 .social-icon a {
 font-size: 13px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 width: 40px;
 border-radius: 50%;
}

.fa-sr-only, .fa-sr-only-focusable:not(:focus), .sr-only, .sr-only-focusable:not(:focus) {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border-width: 0;
}

.img-cont {
 height: 200px;
 display: flex;
 place-content: center;
 align-content: center;
}


form label.error {
    color: red !important;
}

#pagination {
    margin-top: 10px;
}

#pagination .page-link {
    background-color: rgba(95, 113, 153, 0.1);
    color: #033474;
    border-radius: 10px;
    margin: 0px 5px;
    cursor: pointer;
}

#pagination .page-item.active .page-link {
    background-color: #FFE600;
    border-color: #FFE600;      
}

.ms-n5 {
    margin-left: -40px !important;
    z-index: 99 !important;
}

.blink {
    text-decoration: blink; 
    animation-name: blinker;    
    animation-duration: 0.6s;    
    animation-iteration-count: infinite;    
    animation-timing-function: ease-in-out;    
    animation-direction: alternate;
}

@keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}

.link-white { color: #fff;}
.link-white:hover {
    color: white;
    font-weight: bold;
}
a.link_text{ color:#2986b8;}	
a.link_text:hover{ text-decoration:underline;}

.bg-box-blue { background: var(--c-bg-blue);}
.bg-main-grad { background: var(--bg-main-grad);}
.bg-alt-grad { background: var(--bg-alt-grad);}

.text-hblue { color: var(--c-hblue);}
.text-hbluealt { color: var(--c-hbluealt);}
.fw-boldest { font-weight: 800 !important; }
.rounded-card { border-radius: 15px !important; }
.btn-backgreen { background: var(--c-btngreen); color: white; font-weight: bold; }

.max-width-1170 { max-width: 1170px; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Update the styling of the accordion headers */
.faq .accordion-button {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--c-hblue);
    background: transparent;
}

/* Space out the accordion items */
#accordionFAQ .accordion-item { margin: 20px; border-radius: 15px; padding-left: 10px; padding-right: 10px; }