:root {
  --bmi-blue: #254479;
  --bmi-red: #eb3609;
  --bmi-green: #13a494;
  --bmi-light-blue:#ECF1FD;
  --bmi-orange:#d78d37;
  --bmi-lighter-blue:#ECF1FD;
  --bmi-yellow:#ffb700;
  --not-black:#2b2b2b;
}

body {
  font-family: 'DM Sans', sans-serif;
  background-color: #fff;
  color: #111;
  margin: 0;
  padding: 0;
}

.note {font-size: 0.9em;}

.internal-box-content {padding:20px;
background:var(--bmi-lighter-blue);
border-radius:10px;
margin-bottom:20px;
text-align: left;
}



.internal-box-content-smaller {padding:5px 0px;
background:var(--bmi-lighter-blue);
margin-bottom:0px;
text-align: left;
border-bottom:1px solid #ccc;
}

.internal-box-content-smaller h5{margin:10px 0;
font-size:0.9em;}


.form-submit{background: var(--bmi-yellow);
color:#000;
font-size:0.9em;}

.toggle {cursor: pointer;}

#header{background: var(--bmi-blue);
padding:10px;
height:100px;
box-sizing: border-box;}

.footer, .products-section, .subheader {background: var(--bmi-lighter-blue);
text-align: center;
overflow: auto;
width:100%;
padding:20px 0;}


.products-section {margin:30px auto 30px auto;}

.product{float:left;
margin:10px;
width:calc((100% - 80px)/4);
}

.product img {width:80%;
height:auto;}

.product p {font-size:0.8em;
}

.search-lens {float:right;
margin-top:1em;
}

.search-lens img {height:30px;
width:30px;}

h2,h3,h4 {text-align: center;
color:var(--not-black);}

.question {width:calc(100% - 30px);
text-align: left;}

.customer-satisfaction {position:relative;
margin:40px auto 20px auto;
font-size:0.8em;
color:#454545;
  width:300px;}

.rating-area {height:20px;
margin:5px auto;
line-height:20px;}

.rating-area img{float:right;
height:20px;
width:auto;}

.symbol {width:25px;
height:25px;
margin-left:5px;
border-radius: 50%;
background:var(--bmi-blue);
font-weight: bold;
display: inline-block;
text-align: center;
font-size: 1.2em;
line-height: 25px;
color:#fff;
vertical-align: top;
    margin-top: 20px;
text-decoration: none;}

.smaller {width:18px;
height:18px;
font-size:0.9em;
line-height: 18px;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.screenshot {width:50%;
}

@media screen and (max-width:768px) {

.screenshot {max-width:100%;}
}
/* Modal Content/Box */
.modal-content {
  background-color: var(--bmi-lighter-blue);
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #888;
  width: 400px; /* Could be more or less, depending on screen size */
}

.modal-content p {
  font-size:0.9em;
}

.modal-content button {font-size:0.9em;}

.copyright {text-align: right;
font-size: 0.7em;
margin-right:15px;
color:#454545;}

.reset-box {text-decoration:none;
font-weight: bold;}

#post-response {display:none;
text-align: center;}

.cancel-success {width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4em;
    background: #54b899;
    margin: 20px auto;
    font-weight: bold;}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.answer {display:none;
overflow: auto;}

input,button {height:45px;
border-radius:5px;
max-width:100%;
padding:5px;
margin:5px 0;
box-sizing:border-box;
width:100%;
border: none;}

.modal-dialogue, .dialogue{display:none;
font-size:0.9em;
color: var(--bmi-red);}




.order {width:100%;
background:#fff;
border-radius:5px;
box-sizing:border-box;
margin:10px 0;
font-size:0.9em;
overflow: auto;
padding:10px 10px 20px;}

.order p {padding:0 5px;}

.actions-container {width:100%;
clear:both;}

.one-third {width:calc((100% / 3) - 10px);}

.half {width:calc(50% - 10px);}

.cancel-subscription, .contact-support,.get-order {
margin:5px;
float:left;
font-size:1em;
display: block;
height:50px;
text-align: center;
text-decoration:none;
border-radius:5px;
line-height: 50px;
font-weight: bold;}

.cancel-subscription , .confirm-cancel {color: #fff;
background:var(--bmi-red);}

.get-order {color: #fff;
background:var(--bmi-green);}

.contact-support {color: var(--bmi-black);
background:var(--bmi-yellow);}


.canceled, .expired, .no-subscription {font-weight:bold;
color: var(--bmi-red);}

.trial,.in-trial .past-due {font-weight:bold;color: var(--bmi-orange);}

.active {font-weight:bold;color: var(--bmi-green);}

    input:focus,
    input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active  {
      background-color: white;
    -webkit-box-shadow: 0 0 0 30px white inset !important;
        -webkit-text-fill-color: black !important;}

button{cursor: pointer;
font-weight: bold;}

.faq {margin-top:50px;}

.section-title {color: var(--bmi-blue);
display: inline-block;}

.section-title {padding:0;}

.order-container{margin:40px 0 30px;}

.logo {height:40px;
width:auto;
float:left;
padding:20px 5px;}

.company-logos {float:right;
}


#header .company-logos img {
  float: left;
    height: 15px;
    margin: 33px 15px;}

.company-logos img {
  float:left;
  height:20px;
  margin:20px 15px;}

.container {
  width: 70%;
  max-width:800px;
  margin: 0 auto;
  box-sizing:border-box;
}

.footer {margin-top:20px;
background: #EDEFF5;}

.footer .container { width: 90%;
  max-width:2000px;
  margin: 0 auto;
  box-sizing:border-box;}

@media screen and (max-width:800px) {
  
  .modal-content {width:340px;}
  
  .container, .footer .container {
  width: 100%;
  max-width:800px;
  margin: 0 auto;
  box-sizing:border-box;
}

#header {height:55px;}

.company-logos img {
    float: left;
    height: 12px;
    margin: 12px 5px;
}
#header .company-logos img {
    float: left;
    height: 10px;
    margin: 15px 5px;
}

.internal-box-content p {padding:0 !important;}


.text-container{padding:10px;}



.text-container p,h3,h2,h1{padding:0 10px;}

.one-third ,.half {width:100%;}

.logo {height:30px;
padding:5px;}
  
.product{width:calc((100% - 40px)/2);}
  
}

.text-container {padding:10px;
}