/*                                                                         PPPP                                      
        ..PPP..        :P:      .;PP      .PPP.     d        .PPP.         PPPP   .PPP.             .PPP..          
     :PPPPPPPPPP;     PPPPP   PPPPPP  .PPPPPPPPPPPPPP     PPPPPPPPPPP;     PPPP.PPPPPPPPP;       ;PPPPPPPPPPP        
   :PPPPP    PPPPP;    ...  .PPPP:   PPPPP,   .PPPPPP   PPPPP:   .PPPPP    PPPPPP.   .PPPPP,   .PPPP:    PPPPP;      
  ,PPPP        ;PPP;  :PPP  PPPP    PPPP         PPPP  ;PPP:        PPPP   PPPP         PPPP,  PPPP        :PPP;     
  PPPP          PPPP  :PPP  PPPP    PPP:  d      ,PPP  PPPP          PPP;  PPPP          PPPP  PPP:         PPPP     
  PPPP          PPPP  :PPP  PPPP    PPPP         PPPP  PPPP          PPPP  PPPP          PPPP  PPP:         PPPP     
  PPPP        .PPPP   :PPP  PPPP    iPPPP       PPPPP  PPPP          PPPP  PPPP          PPPP  :PPP:        PPPP     
  PPPP PPPPPPPPPPP    :PPP  PPPP     .PPPPPPPPPPPPPPP  PPPP          PPPP  PPPP          PPPP   :PPPPPPPPPP PPPP     
  PPPP PPPPPPPP       :PPP  PPPP        PPPPPPPPP   P  PPPP          PPPP  PPPP          PPPP      PPPPPPPP PPPP     
  PPPP
  
  https://www.piranhadesigns.com/

====================================================================
USER AREA STYLES
================================================================= */

#page_cont { min-height: 100%; position: relative; }

.fh { min-height: 80vh; }
.ffh { min-height: 100vh; padding-top:78px; padding-bottom: 78px; }
.f-ffh footer { margin-top: -65px; }
/*.f-ffh .ffh { padding-bottom: calc(101px); }*/

h1 { font-size: 1.565rem; }
h2 { font-size: 1.565rem; }
h3 { font-size: 20px; }
h4 { font-size: 18px; line-height: 1; font-weight: 600; }

.h1 { font-size: 1.565rem; }
.h2 { font-size: 1.25rem; }
.h3 { font-size: 20px; }
.h4 { font-size: 18px; }

.bkg-image { background-repeat: no-repeat; background-position: center; background-size: cover; }
.text-justify { text-align: justify; }

p { margin-bottom: 1.3rem; }

/****************
 HEAD PAGE
*****************/

#m_nav { background: var(--main-cream-color); border-bottom: 1px solid #e4e1d7; border-radius: 0 0 20px 20px;
        background: linear-gradient(180deg, rgba(249, 245, 240, 1) 0%, rgba(249, 245, 240, 0.75) 100%);
        background: linear-gradient(180deg, rgba(255, 254, 252, 1) 0%, rgba(255, 254, 252, 0.77) 100%);
        border-bottom: solid 1px #efe7da;
        -moz-backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px); }

.brand { display: inline-block; margin: 0 auto; }
.brand svg, img.brand { width: 180px; height: auto; transition: 0.6s; }

#m_nav .navbar-brand svg { width: 180px; height: auto; transition: 0.6s; display: block; }
#m_nav .ani-flip:hover * { transform: rotateY(360deg); }

#m_nav .btn { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.469rem; font-weight: 600; letter-spacing: 1.5px; }
.navbar-nav a { font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; font-size: 13px; color: #333; position:relative; }
.navbar-nav a:hover { color: var(--main-text-color); }

header .avatar, nav .avatar, .avatar { display: inline-block; width: 38px; height: 38px; line-height: 38px; border-radius: 100%; margin-left: 5px; background-color: #444; color: #fff; text-align: center; font-size: 13px; text-transform: uppercase; background-size: contain; transition: 0.5s; }
.navbar-nav a:hover .avatar { background-color: var(--main-text-color); transform: rotateY(360deg); }

.avatar.avatar-lg { cursor: default; width: 50px; vertical-align: middle; height: 50px; line-height: 50px; font-size: 18px; }

/*.navbar-nav .nav-item .title { position:relative; }
.navbar-nav .nav-item .title::after {
  display: inline-block;
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 0;
  height: 2px;
  transition: 0.5s;
  background-color: var(--main-text-color);
}
.navbar-nav a.nav-link:hover .title::after {
  width: 100%;
}*/

/* =================================================================
LAYOUT
================================================================= */

.w500 { max-width: 500px; width: 100%; }

.ffh > div { margin-top: 71px; }

#order-progress { text-transform: uppercase; font-weight: 600; font-size: 18px; padding-left: 0;
    width: 100vw;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
    flex-wrap: wrap;
}
#order-progress li { padding: 0 15px; list-style-position: inside; font-weight: 600; color: #747474; white-space: nowrap; }
#order-progress li.complete { color: #688D53; }
#order-progress li.current { color: var(--main-text-color); }



#order-basket .item { border: 2px solid #EDE8E4; padding:15px; border-radius: 18px; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
#order-basket .item img.product-img { max-width: 66px; height: auto; border-radius: 13px; margin-right: 20px; }
#order-basket .item .old-price { color: #747474; text-decoration: line-through; }
#order-basket .item .product-price { margin-left: 15px; }

#order-total { background: #F2ECE6; border-radius: 18px; text-align: center; padding:15px; }


/* =================================================================
FORMS
================================================================= */

#top-back-btn { top: 30px; left: 22px; }

.v-line { width: 1px; background-color:var(--main-text-color); height: 30px; margin: 0 auto; }

hr { margin: 2.2rem 0; border-color: var(--bs-border-color); opacity:1; border-width: 3px; }
hr.hr-psm { margin: 1.725rem 0; }

.card ul { padding-left: 0; }
.card .card-body > div > ul li, .form-radio-product ul li { padding: 0px 0px 11px 2.2rem; list-style: none; background: url(/assets/images/icons/form/feather-check-square-green.svg) no-repeat 0px 3.5px transparent; }
.form-progress { margin: 24px 0 30px; position:relative; }
.form-progress .progress-bar { background: #E9E1D8; width: 100%; height:10px; border-radius:5px; overflow: visible; display: block; }
.form-progress .progress-stage { background: var(--main-text-color); position:relative; border-radius:5px; height: 100%; width: 0; transition:0.5s; }
.form-progress span { display: inline-block; margin: 0 auto; position:relative; bottom:30px; font-size: 1.065rem; height: 30px; }

.order-product-progress { margin: 20px 0; cursor: default; }
.order-product-progress .step, .order-product-progress .step p { color: #999;  }
.order-product-progress .step.active, .order-product-progress .step.active p { color: var(--main-text-color); font-weight:600; }
.order-product-progress .step.done, .order-product-progress .step.done p { color: var(--main-text-color); }
.order-product-progress .step span { display: inline-block; width: 50px; height: 50px; line-height: 50px; border-radius: 25px; border: solid 1px #ccc; margin-bottom: 10px; }

#order-product-details .row.ffh { height: 100%; }

.alert i { padding-right: 5px; }

.alert-info {
    --bs-alert-color: var(--main-text-color);
    --bs-alert-bg: #E2EDF7;
    --bs-alert-border-color: #E2EDF7;
    --bs-alert-link-color: var(--main-text-color);
}

.alert-main {
    --bs-alert-color: var(--main-text-color);
    --bs-alert-bg: var(--main-cream-color);
    --bs-alert-border-color: var(--main-cream-color);
    --bs-alert-link-color: var(--main-text-color);
}

.form-radio-product label { padding: 1.25rem !important; }
.form-radio-product .product-img { max-width: 66px;
    height: auto;
    border-radius: 13px;
    box-shadow: 0 0 0 1px #E9E4E0; }
.form-radio-product li:marker { position:relative; left:10px; }
.form-radio-product .old-price, .old-price, .form-radio label span.old-price { color: #747474; text-decoration: line-through; }
.form-radio-product label span, .form-radio-product label a { padding: 0; border: 0; }
.form-radio-product label a { text-decoration: underline; }
.form-radio-product .badge .product-price { margin: 0; font-weight: 400; }

/*PHONE HELPERS*/
.card .iti { display: block; }
.iti__search-input { padding-top: 10px; padding-bottom: 10px; }

/* =================================================================
FOOTER
================================================================= */

footer { width: 100%; padding: 20px 0 10px; position: relative; font-size: 13px; }
footer ul { list-style: none; padding: 0; }
footer li { margin: 2px 0; }
footer a.nav-link { display: inline-block; padding: 2px 0; }
footer .ul a { text-decoration: none; white-space: nowrap; margin: 0 10px; }
footer a:hover { text-decoration: underline; }
footer i.fa { font-size: 1.8rem; vertical-align: middle; margin-left: 4px; top: -1px; }
footer p { line-height: 1.2; }

/* =================================================================
SUCCESSS ANIMATION
================================================================= */

@-webkit-keyframes scaleAnimation {0% {opacity: 0; transform: scale(1.5); } 100% {opacity: 1; transform: scale(1); } }
@keyframes scaleAnimation {0% {opacity: 0; transform: scale(1.5); } 100% {opacity: 1; transform: scale(1); } }
@-webkit-keyframes drawCircle {0% {stroke-dashoffset: 151px; } 100% {stroke-dashoffset: 0; } }
@keyframes drawCircle {0% {stroke-dashoffset: 151px; } 100% {stroke-dashoffset: 0; } }
@-webkit-keyframes drawCheck {0% {stroke-dashoffset: 36px; } 100% {stroke-dashoffset: 0; } }
@keyframes drawCheck {0% {stroke-dashoffset: 36px; } 100% {stroke-dashoffset: 0; } }
@-webkit-keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
@keyframes fadeOut {0% {opacity: 1; } 100% {opacity: 0; } }
@-webkit-keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
@keyframes fadeIn {0% {opacity: 0; } 100% {opacity: 1; } }
#successAnimationCircle {stroke-dasharray: 151px 151px; stroke: #222; }
#successAnimationCheck {stroke-dasharray: 36px 36px; stroke: #222; }
#successAnimationResult {fill: #222; opacity: 0; }
#successAnimation.animated {-webkit-animation: 1s ease-out 0.5s 1 both scaleAnimation; animation: 1s ease-out 0.5s 1 both scaleAnimation; }
#successAnimation.animated #successAnimationCircle {-webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut; animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle, 0.3s linear 0.9s 1 both fadeOut; }
#successAnimation.animated #successAnimationCheck {-webkit-animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut; animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck, 0.3s linear 0.9s 1 both fadeOut; }
#successAnimation.animated #successAnimationResult {-webkit-animation: 0.3s linear 0.9s both fadeIn; animation: 0.3s linear 0.9s both fadeIn; }

/* =================================================================
MIN RESPONSIVE CSS BELOW
================================================================= */

@media (min-width: 1200px) {

}

/* Small devices (landscape phones, 576px and up)  */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up)  */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up)  */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up)  */
@media (min-width: 1200px) {

}

/* ================================================================
MAX RESPONSIVE CSS BELOW
================================================================ */

/*Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {

/*.jcarousel .jcarousel-item { width: 380px; }*/

}


/* col-MD start of burger, Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {


.ffh-m { min-height: 100vh; }
.ffh { min-height: auto; padding-top: 67px; padding-bottom: 67px; }
.ffh > div { margin-top: 63px; }
.col-12 .ffh { padding-top: 85px; }


.navbar-nav { flex-direction: row; }
#m_nav .btn { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.469rem; font-weight: 600; letter-spacing: 1.5px; }
.navbar-nav a { letter-spacing: 1px; font-size: 12px; }
#m_nav .btn { font-size:12px; }
header .avatar, nav .avatar, .avatar { display: inline-block; width: 34px; height: 34px; line-height: 34px; font-size: 10px; margin-left: 4px; }
#m_nav .navbar-brand svg { width: 140px }





/*SIGN IN BACKGROUND OVERLAY*/
.auth-login #page_cont .row .col-12.bkg-image { position: fixed; height: 100vh; z-index: -1; opacity: 0.2; }

/*.navbar-brand { height: 60px; width: 75px; margin-right: 0; padding: 0; }
.navbar-toggler { margin-left: 7px; }
.navbar-toggler[aria-expanded*="true"] .icon-bar { background: #fff; }
header .container { width: 100%; max-width: calc(100% - 20px); }
header .col, header .col-auto { margin: 15px 0; }


.navbar .collapse { display: none; }
.navbar .navbar-nav { border-top: 0; padding-bottom: 15px; }
.navbar .navbar-nav > li { text-align: right; }
body .navbar .navbar-nav > li a { border-bottom: solid 3px #e5e9f1; }
body .navbar .navbar-nav > li:last-child a { border-bottom: 0 !important; }
.navbar .navbar-nav > li.active a { border-bottom-color: rgba(168, 60, 181, 0.25); }

.jcarousel .jcarousel-item .timeline_test_data_container { margin: 20px 10px; }
.jcarousel .jcarousel-item { width: 279px; }

.list-test .col-md-8 { padding-left: 0 !important; padding-right: 0 !important; }
.list-test .col-md-4 { padding-left: 0 !important; }
.list-test-note .pull-left { padding-right: 1rem !important; }
.list-test .component_response { padding-right: 100px; padding-left: 10px; font-size: 15px; line-height: 21px; }*/

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {

/*.jcarousel .jcarousel-item { width: 386px; }
.list-test { padding: 0 !important; }
.list-test-note .pull-left { float: none !important; padding-right: 0 !important; padding-bottom: 0 !important; }
.list-test .col-md-8 { padding-left: 0 !important; padding-right: 0 !important; }
.list-test .col-md-4 { padding-left: 15px !important; }
.list-test .test_result_range_bar_container { width: 100%; }
.list-test .btn { margin-top: 10px; }
.list-test .component_response { padding-right: 10px; padding-left: 10px; text-align: center; }*/

#order-progress { padding: 0 1% }
#order-progress li { font-size: 14px; padding: 0 9px; }

}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

.ffh > div { margin-top: 22px; }
.card-body { padding: 18px; }
hr.hr-psm { margin: 1.25rem 0; }

.form-radio-size .product-price { max-width: 120px; }

/*.jcarousel .jcarousel-item { width: calc(100vw - 140px); }
.range_slider ~ span { font-size: 13px; }
.box .nav-tabs > li > a { margin-bottom: 11px; }
label[for="patient_preexisting_conditions"] { border-top: solid 1px #ddd; padding-top: 24px; margin-top: 10px; }*/

}

/* Very small devices (portrait phones, less than 371px) */
@media (max-width: 370px) {

/*.range_slider ~ span { font-size: 12px; }*/

}

/* VERY VERY small devices ( iPhone 5 ) */
@media (max-width: 320px) {

/*.range_slider ~ span { font-size: 10px; }*/

}