@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');
body {
  font-family: 'Nunito Sans', sans-serif;;
  background-color: #fff;
  line-height: 1.9;
  color: #8c8c8c;
  position: relative; }
 /*  body:before {
    z-index: -1;
    position: absolute;
    height: 50vh;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    background: #8bbabb; } */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family:  'Nunito Sans', sans-serif;
  color: #000; }
.tenordays{
   /* font-size: 2rem;
   color:  #557392;
   line-height: 4rem;
   font-weight: bolder;
   align-content: center; */
   font-family: 'Nunito Sans', sans-serif;
   font-style: normal;
   font-weight: 900;
   font-size: 36px;
   text-align: center;
   margin-top: 20px;
   padding-bottom: 8px;
   color: rgba(9, 51, 94, 0.75) !important;
   line-height: 30px;padding-top: 1rem; 
  /* identical to box height */
  color: rgba(9, 51, 94, 0.75);
}


.line{
  border: 1px solid rgba(9, 51, 94, 0.25)!important;
  background-color: rgba(9, 51, 94, 0.25)!important;
  border-radius: 50px!important;
  width: 70%!important; 
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  align-items: center;
  width: 80%;
  font-weight: bold !important;
  height: 0px;
  border-bottom: 1px solid black;
  position: relative;
}
.daysText{
  font-family: 'Nunito Sans', sans-serif;
  font-style:normal ;
  font-weight: 600 !important;
  font-size: 14px!important;
  line-height: 1px!important;
  opacity: 75%;
  /* identical to box height */                   
  color: rgba(9, 51, 94, 0.75)!important;
}

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a, a:hover {
    text-decoration: none !important; }

.text-black {
  color: #000; 
}
.grid-container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr  ;
  grid-gap: 0.5rem;
  font-family: 'Nunito Sans', sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 16px;
  color: rgba(9, 51, 94, 0.5);
}

.grid-child-selected{
  border:  2px solid #557392 !important;
  border-radius: 1%;
  background-color: #ecf4f8 !important;
  text-align: center;
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.5), 5px 5px 12px rgba(0, 0, 0, 0.15);
  font-weight: bold !important;
  border: inset;
}

.grid-child{
  
   border: outset 1px solid #ecf4f8;
    border-radius: 50%;
    background-color: #ecf4f8;
    box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.5), 5px 5px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    /*color: #557392;*/
    width: 108px;
    height: 109px;
   
    /* shape-outside: radial-gradient(black);
    box-shadow:outset  0 0 0.1em 0 grey;
    -moz-box-shadow: 0 0.2em -0.2em 0 grey;
    -webkit-box-shadow: 0 0.2em -0.2em 0 black;
    box-shadow: 0 0.2em -0.2em 0  black,
                0 0.2em 0.2em 0 white;
    border-color: #A6A6D2 #4D4D9B #4D4D9B #d9e0e7;
    background-image: -webkit-linear-gradient(top, white,#e5edf6);
    background-image: -moz-linear-gradient(top, white, #e5edf6);
    background-image: -ms-linear-gradient(top, white, #e5edf6);
    background-image: -o-linear-gradient(top, white, #e5edf6);
    background-image: -webkit-gradient(to bottom, white, #e5edf6);  */
}
#contactForm{
  margin-bottom: 0rem !important;
}
.Sofri-logo{
  padding-left: 0vw;
}

.bannerTop{

  width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.mainTextInv{
  float: left;  
  width: 50%; 
  height: 350px; 
  color: #020e3f; 
  font-weight: bold !important; 
  font-size: 2.5rem; 
  padding-top: 2rem; 
  line-height: 3.5rem;
  font-family: 'Nunito Sans', sans-serif;
font-size: 48px;
font-style: normal;
font-weight: 900;
line-height: 65px;
letter-spacing: 0em;
text-align: left;

  
}
.mainTextMinor{
  font-size: 16px !important;
  font-weight: 400!important;
  width: 30%;
  line-height: 20px;
  text-align  : center;
  grid-auto-flow: row;
  text-align: justify !important; /* For Edge */
  -moz-text-align-last: center !important; /* For Firefox prior 58.0 */
  text-align-last: center !important;

}

.loanInputControl{
  border-radius: 2rem !important;
background-color: white !important;
font-weight: bold;
  text-align: left !important;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.25);
  padding-left: 15px !important;
}
.div-amount{
  text-align: right !important;
  color:#09335e;
  font-weight: bold;
  width: 50%;
}
.div-label{
  width: 50%;
}
.div-total{
  color:#09335e;
  font-weight: bold !important;
}
h3{
  margin-bottom: 2px;
}
.content {
  padding: 5rem 0; }

.heading {
  font-size: 2.5rem;
  font-weight: 900; }

.form-control {
  border: none;
  border-bottom: 1px solid #ccc;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
  background: none; 
}
  .form-control:active, .form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #000; 
  }

.input-centered{
  align-self: center !important;
  text-align:center !important;
  border-radius: 2rem;
  background-color: white;
  font-weight: bold;
}
.col-form-label {
  color: #000;
  font-size: 13px; }

.btn, .form-control, .custom-select {
  height: 45px; 
box-shadow: #09335e;
}

/* The container must be positioned relative: */
.custom-select {
  position: relative;
  font-family: Arial;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
.invDisplayBoxgroup{
  flex-flow:column ;
}
.displayBox{
  border:1px !important;
  border-radius: 1px !important;
  border-color: limegreen !important;
  text-align: center;
  padding-left: 1em;
}
.btn {
  border: none;
  border-radius: 3;
  font-size: 12px;
  letter-spacing: .2rem;
  text-transform: uppercase; 
}
  .btn.btn-primary {
    background: #020e3f;
    color: #fff;
    padding: 15px 20px;
    width: 80%!important;  
    min-width: 70% !important;
  }
  .btn:hover {
    color: #fff; }
  .btn:active, .btn:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none; }

.contact-wrap {
  -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2); 
   color: #020e3f;
   float: right;
   border-radius: 0.5rem;
   padding-right: 0px;
   padding-left: 0px;
  }
  .loan-wrap {
    -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.2); 
     color: #09335E;
     float: right;
     border-radius: 0.5rem;
     padding-right: 0px;
     padding-left: 0px;
    }
  
  .contact-wrap .col-form-label {
    font-size: 14px;
    color: #b3b3b3;
    margin: 0 0 10px 0;
    display: inline-block;
    padding: 0; 
  }
  .contact-wrap .form, .contact-wrap .contact-info {
    padding: 40px; }
  .contact-wrap .contact-info {
    color: rgba(255, 255, 255, 0.5); }
    .contact-wrap .contact-info ul li {
      margin-bottom: 15px;
      color: rgba(255, 255, 255, 0.5); }
      .contact-wrap .contact-info ul li .wrap-icon {
        font-size: 20px;
        color: #ecf4f8;
        margin-top: 5px; }
  .contact-wrap .form {
    background: #ecf4f8; }
    .contact-wrap .form h3 {
      color: #020e3f;
      font-size: 20px;
      margin-bottom: 30px; }
  .contact-wrap .contact-info {
    background: #020e3f; }
    .contact-wrap .contact-info h3 {
      color: #fff;
      font-size: 20px;
      margin-bottom: 30px; }

label.error {
  font-size: 12px;
  color: red; }

#message {
  resize: vertical; }

#form-message-warning, #form-message-success {
  display: none; }

#form-message-warning {
  color: #B90B0B; 
}

#form-message-success {
  color: #55A44E;
  font-size: 18px;
  font-weight: bold; 
}

.submitting {
  float: left;
  width: 10%;
  padding: 10px 0;
  display: none;
  font-weight: bold;
  font-size: 12px;
  color: #000; 
}
.div-texts{
  color: #406284;
}
  .slidecontainer {
    width: 100%;
  }
  .left{
    float:right;
  }
  .slider {
    -webkit-appearance:none ;
    width: 100%;
    height: 5px;
    background: #BDCEE2;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    
  }
  input[type=range]{
    -webkit-appearance: none;
}
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHvSURBVEhL7ZTPK2ZRGMcPhgVWo5RSlspO0dSQ3iJZsJiFhfwDopRfDTFDb15R08xiYmYxJWuy8SOLt8hGoezlL5hSFliQ+HzPOdd73/teXllZ+Nan55znPud7ft17zbvetrr651t9M1Y8L4B2341VkY85YuAsYam2se3i9Ch96LIZyZwwAf+oKYc0dfZZWIU+PoqBpd58Ekqgm36ZnkVUDJ2gRY7BXz9plrISMifIfMgmjNmH7o2l8f+umy3qtYATqLMJJoF+6u9dN7QDb/4dAvMdeNJc4tkNoR6Cs+mD367pFD6iUQjMNaDnOfNAfpIvoAVJAyz2j2+7SybxkzAC2rLMexl4TnyRuNwbLnmL5meogQb6VeQ39ZrpzHVJYfO8K48TXuWEXWiwCWNmdETaoswlxWvXfJU+QDBevsX2LWLmecJXtdEZ1LOLS9d9mfCoJKxCC8g8hUfS3gFnlebMKmh+go/QTH9NZ6vn+eTNV0Bfvsb8wvwbMfMWkRgkLLieXcWuP9NnRU01QeYdNmHMIiRdM/KhSZHjOoYmJo/diTdfhjabMGYaflD/eI85E0gM1GsbfBMHkIhOQo1+H9ug3UopmAubSzn/IomiYYJWcwd7cAtZouaKsA7BhU5FzfOKVSYgdpeBVOOb73qTMuYBmLul3eqnAhUAAAAASUVORK5CYII=) #CCCC33;
    background-size:20px;
    background-repeat: no-repeat;
    background-position: 50%;
    cursor: pointer;
    border-radius: 50%;
    visibility: 0.5;
  }
  .slider::-ms-thumb {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background-image:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHvSURBVEhL7ZTPK2ZRGMcPhgVWo5RSlspO0dSQ3iJZsJiFhfwDopRfDTFDb15R08xiYmYxJWuy8SOLt8hGoezlL5hSFliQ+HzPOdd73/teXllZ+Nan55znPud7ft17zbvetrr651t9M1Y8L4B2341VkY85YuAsYam2se3i9Ch96LIZyZwwAf+oKYc0dfZZWIU+PoqBpd58Ekqgm36ZnkVUDJ2gRY7BXz9plrISMifIfMgmjNmH7o2l8f+umy3qtYATqLMJJoF+6u9dN7QDb/4dAvMdeNJc4tkNoR6Cs+mD367pFD6iUQjMNaDnOfNAfpIvoAVJAyz2j2+7SybxkzAC2rLMexl4TnyRuNwbLnmL5meogQb6VeQ39ZrpzHVJYfO8K48TXuWEXWiwCWNmdETaoswlxWvXfJU+QDBevsX2LWLmecJXtdEZ1LOLS9d9mfCoJKxCC8g8hUfS3gFnlebMKmh+go/QTH9NZ6vn+eTNV0Bfvsb8wvwbMfMWkRgkLLieXcWuP9NnRU01QeYdNmHMIiRdM/KhSZHjOoYmJo/diTdfhjabMGYaflD/eI85E0gM1GsbfBMHkIhOQo1+H9ug3UopmAubSzn/IomiYYJWcwd7cAtZouaKsA7BhU5FzfOKVSYgdpeBVOOb73qTMuYBmLul3eqnAhUAAAAASUVORK5CYII=) #CCCC33;
    /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDkxLjg0MSwxNTYuNDI3Yy0xOS40NzEtNDUuOTQ2LTUxLjkzNy04NS4wMTMtOTIuNzg2LTExMi42MzdDMzU4LjIxNywxNi4xNjYsMzA4Ljg5My0wLjAwNywyNTYsMA0KCQkJYy0zNS4yNTQtMC4wMDItNjguOTQ2LDcuMTgtOTkuNTcxLDIwLjE1OEMxMTAuNDg0LDM5LjYzLDcxLjQxNiw3Mi4wOTMsNDMuNzkxLDExMi45NDNDMTYuMTY3LDE1My43NzktMC4wMDcsMjAzLjEwNCwwLDI1Ng0KCQkJYy0wLjAwMiwzNS4yNTUsNy4xODEsNjguOTQ4LDIwLjE1OSw5OS41NzNjMTkuNDcxLDQ1Ljk0Niw1MS45MzcsODUuMDEzLDkyLjc4NiwxMTIuNjM3QzE1My43ODMsNDk1LjgzNCwyMDMuMTA3LDUxMi4wMDcsMjU2LDUxMg0KCQkJYzM1LjI1MywwLjAwMiw2OC45NDYtNy4xOCw5OS41NzEtMjAuMTU4YzQ1Ljk0Ni0xOS40NzEsODUuMDEzLTUxLjkzNSwxMTIuNjM4LTkyLjc4NUM0OTUuODM0LDM1OC4yMiw1MTIuMDA3LDMwOC44OTQsNTEyLDI1Ng0KCQkJQzUxMi4wMDIsMjIwLjc0NCw1MDQuODE5LDE4Ny4wNTIsNDkxLjg0MSwxNTYuNDI3eiBNNDYwLjQxMywzNDIuMjU3Yy0xNi44NTEsMzkuNzgxLTQ1LjA0NSw3My43MjMtODAuNDc2LDk3LjY3Ng0KCQkJYy0zNS40NDQsMjMuOTUzLTc4LjAyLDM3LjkyNi0xMjMuOTM1LDM3LjkzM2MtMzAuNjE5LTAuMDAyLTU5LjcyOS02LjIxOC04Ni4yNTUtMTcuNDU0DQoJCQljLTM5Ljc4MS0xNi44NTEtNzMuNzI0LTQ1LjA0NC05Ny42NzctODAuNDc1QzQ4LjExMywzNDQuNDk1LDM0LjE0LDMwMS45MTcsMzQuMTMzLDI1NmMwLjAwMi0zMC42Miw2LjIxOS01OS43MzEsMTcuNDU0LTg2LjI1Nw0KCQkJYzE2Ljg1MS0zOS43ODEsNDUuMDQ1LTczLjcyNCw4MC40NzYtOTcuNjc2QzE2Ny41MDYsNDguMTEzLDIxMC4wODQsMzQuMTQsMjU2LDM0LjEzM2MzMC42MTksMC4wMDIsNTkuNzI5LDYuMjE4LDg2LjI1NSwxNy40NTQNCgkJCWMzOS43ODEsMTYuODUsNzMuNzI0LDQ1LjA0NCw5Ny42NzcsODAuNDc1YzIzLjk1MywzNS40NDMsMzcuOTI3LDc4LjAyLDM3LjkzNCwxMjMuOTM5DQoJCQlDNDc3Ljg2NCwyODYuNjIsNDcxLjY0OCwzMTUuNzMxLDQ2MC40MTMsMzQyLjI1N3oiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM2NS40MjgsMTg2LjQyTDIyNi4yNjcsOTQuMTFjLTcuNjg2LTUuMDk4LTE4LjA0OS0zLTIzLjE0Nyw0LjY4NWMtNS4wOTgsNy42ODYtMywxOC4wNDksNC42ODUsMjMuMTQ3bDExOC4xODEsNzguMzkzDQoJCQlsLTExOC4xODEsNzguMzkzYy03LjY4Niw1LjA5OC05Ljc4NCwxNS40NjEtNC42ODUsMjMuMTQ3YzUuMDk4LDcuNjg1LDE1LjQ2MSw5Ljc4NCwyMy4xNDcsNC42ODVsMTM5LjE2MS05Mi4zMDkNCgkJCWM0LjY1Mi0zLjA4Niw3LjQ2OC04LjMzMyw3LjQ2OC0xMy45MTZTMzcwLjA4MSwxODkuNTA2LDM2NS40MjgsMTg2LjQyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzU2LjE5NiwzMzkuNDk2SDE1NS44MDRjLTkuMjIyLDAtMTYuNjk5LDcuNDc3LTE2LjY5OSwxNi42OTljMCw5LjIyMiw3LjQ3NywxNi42OTksMTYuNjk5LDE2LjY5OWgyMDAuMzkxDQoJCQljOS4yMjIsMCwxNi42OTktNy40NzcsMTYuNjk5LTE2LjY5OUMzNzIuODk1LDM0Ni45NzMsMzY1LjQxOCwzMzkuNDk2LDM1Ni4xOTYsMzM5LjQ5NnoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==) #CCCC33;*/
    cursor: pointer;
    border-radius: 50%;
    visibility: 0.5;
  }
  input[type="range"]::-webkit-slider-thumb::before {
    
    width: 25px;
    height: 25px;

    background-image:url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHvSURBVEhL7ZTPK2ZRGMcPhgVWo5RSlspO0dSQ3iJZsJiFhfwDopRfDTFDb15R08xiYmYxJWuy8SOLt8hGoezlL5hSFliQ+HzPOdd73/teXllZ+Nan55znPud7ft17zbvetrr651t9M1Y8L4B2341VkY85YuAsYam2se3i9Ch96LIZyZwwAf+oKYc0dfZZWIU+PoqBpd58Ekqgm36ZnkVUDJ2gRY7BXz9plrISMifIfMgmjNmH7o2l8f+umy3qtYATqLMJJoF+6u9dN7QDb/4dAvMdeNJc4tkNoR6Cs+mD367pFD6iUQjMNaDnOfNAfpIvoAVJAyz2j2+7SybxkzAC2rLMexl4TnyRuNwbLnmL5meogQb6VeQ39ZrpzHVJYfO8K48TXuWEXWiwCWNmdETaoswlxWvXfJU+QDBevsX2LWLmecJXtdEZ1LOLS9d9mfCoJKxCC8g8hUfS3gFnlebMKmh+go/QTH9NZ6vn+eTNV0Bfvsb8wvwbMfMWkRgkLLieXcWuP9NnRU01QeYdNmHMIiRdM/KhSZHjOoYmJo/diTdfhjabMGYaflD/eI85E0gM1GsbfBMHkIhOQo1+H9ug3UopmAubSzn/IomiYYJWcwd7cAtZouaKsA7BhU5FzfOKVSYgdpeBVOOb73qTMuYBmLul3eqnAhUAAAAASUVORK5CYII=) #CCCC33;
    width: 100%;
    color: black;
  }
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: url(data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHvSURBVEhL7ZTPK2ZRGMcPhgVWo5RSlspO0dSQ3iJZsJiFhfwDopRfDTFDb15R08xiYmYxJWuy8SOLt8hGoezlL5hSFliQ+HzPOdd73/teXllZ+Nan55znPud7ft17zbvetrr651t9M1Y8L4B2341VkY85YuAsYam2se3i9Ch96LIZyZwwAf+oKYc0dfZZWIU+PoqBpd58Ekqgm36ZnkVUDJ2gRY7BXz9plrISMifIfMgmjNmH7o2l8f+umy3qtYATqLMJJoF+6u9dN7QDb/4dAvMdeNJc4tkNoR6Cs+mD367pFD6iUQjMNaDnOfNAfpIvoAVJAyz2j2+7SybxkzAC2rLMexl4TnyRuNwbLnmL5meogQb6VeQ39ZrpzHVJYfO8K48TXuWEXWiwCWNmdETaoswlxWvXfJU+QDBevsX2LWLmecJXtdEZ1LOLS9d9mfCoJKxCC8g8hUfS3gFnlebMKmh+go/QTH9NZ6vn+eTNV0Bfvsb8wvwbMfMWkRgkLLieXcWuP9NnRU01QeYdNmHMIiRdM/KhSZHjOoYmJo/diTdfhjabMGYaflD/eI85E0gM1GsbfBMHkIhOQo1+H9ug3UopmAubSzn/IomiYYJWcwd7cAtZouaKsA7BhU5FzfOKVSYgdpeBVOOb73qTMuYBmLul3eqnAhUAAAAASUVORK5CYII=)
     #CCCC33;
    z-index: 99;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 50%;
  }
  input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #020e3f;
    border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
    background: #BDCEE2;
    border-radius: 10px;
}

input[type=range]:focus::-ms-fill-lower {
    background: #020e3f;
}
input[type=range]:focus::-ms-fill-upper {
    background: #BDCEE2;
}
.slider::-moz-range-track {
    background: linear-gradient(to right, #020e3f 0%, #020e3f 26.5%, #BDCEE2 27%, #BDCEE2 100%);
} 

select {
  font: 400 12px/1.3 ;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

.theme-select {
  --radius: 2em;
  --baseFg: #CCCC33;
  --baseBg: #ffe3f1;
  --accentFg: white;
  --accentBg: #CCCC33;
}
.Homebtn{
  float: right;
  display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 0px;

position: relative;
width: 114px;
height: 48px;

background: linear-gradient(180deg, rgba(255, 255, 255, 0.175) -172.5%, rgba(9, 51, 94, 0.5) 100%), #09335E;
border-radius: 10px;

left: 24px;
top: 12px;

font-family: 'Nunito Sans', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 24px;

/* identical to box height, or 100% */

color: #FFFFFF;


/* Inside Auto Layout */
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 10px;
}



@media screen and (max-width: 360px) {
  .grid-child{
    width: 80px;
    height: 80px;
    font-size:8px;
  }
  .tenordays{
    font-size: 30px;
   text-align: center;
   margin-top: 16px;
   padding-bottom: 8px;
   color: rgba(9, 51, 94, 0.75) !important;
   line-height: 20px;padding-top: 1rem; 
  }
  .line{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .rate{
      font-size:8px;
  }
  
  
}
@media screen and (max-width:400){

  .Sofri-logo{
    padding-left: 20px !important;
    widows: 77px;
    height: 32px;
  }
  
}
@media screen and (max-width:450){
  .HomeBtnDiv{
    padding-right: 50px !important;
  }
  .Sofri-logo{
    padding-left: 15px !important;
    widows: 77px;
    height: 32px;
  }
  
}
@media screen and (max-width:500px) {
  .mainTextInv{
    height: 250px !important; 
    padding-top: 0.2rem !important;
    width: 100% !important;
    font-size: 40px !important;
    line-height: 48px !important;
    text-align: center !important; /* For Edge */
  -moz-text-align-last: center !important; /* For Firefox prior 58.0 */
  text-align-last: center !important;
  }
  .mainTextMinor{
    font-size: 16px;
  }
  
}

@media screen and (max-width:900px) {
  .mainTextInv{
    width:100%
  }
  
}
@media screen and (max-width: 740px) {
  .mainTextInv{
    width: 400px !important;
  }
}
@media screen and (max-width: 997px) {
  .mainTextInv{
    width: 300px;
  }

  .grid-child{
    width: 90px;
    height: 90px;
    font-size:8px;
  }
  .tenordays{
    font-size: 30px;
   text-align: center;
   margin-top: 16px;
   padding-bottom: 8px;
   color: rgba(9, 51, 94, 0.75) !important;
   line-height: 20px;padding-top: 1rem; 
  }
  .line{
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .rate{
      font-size:8px;
  }
  
}
@media screen and (min-width: 1600px) {
  .container{
    max-width: 70% !important;
    margin-right: 10% !important;
    margin-left: 10% !important;
  }
  .Sofri-logo{
    padding-left: 10vw;
  }
  
}
@media screen and (min-width:576px){
  .bannerTop{
    max-width: 540px;
  }
  
}
@media screen and (min-width:768px){
  .bannerTop{
    max-width: 720px;
  }
  
}

@media screen and (min-width:992px){
  .bannerTop{
    max-width: 960px;
  }
  
}


@media screen and (min-width:1200px){
  .bannerTop{
    max-width: 1140px;
  }
  
}