*{
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

body{
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}
body.page-template-idc-registration,
body.page-template-idc-forgot-password,
body.page-template-idc-reset-password,
body.page-template-idc-email-confirmation {
  background-color: #ffffff !important;
}
.calculator-container{
  width:900px;
}

.blue{
  position: relative;
  background-color:#336699;
  border: 2px solid grey; 
  height: auto;
  margin:auto;
  width:100%;
  margin-left: 50px;

}

img{
  float:left;
}
.white{
  position: absolute;
  background-color: #fff;
  height: auto;
  margin:auto;
  padding-top:35px;
  box-shadow: 0px 3px 10px 0px #333;
}
.signup{
  text-align: right;
  padding-top: 20px;
  float: right;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}
.signup .btn-light, .signup .btn-light:hover, .signup .btn-light:focus {
  color: black;
  background-color: #feca30;
}
.et_header_style_left .et-fixed-header #et-top-navigation, .et_header_style_split .et-fixed-header #et-top-navigation {
  padding-top: 80px !important;
}
#et-top-navigation {
  position: relative;
}
.senderSection, .recipientSection{
  padding-top:0;
  color:#336699;
  font-weight: 700;
  font-size:18px;
}
.currencyFlag{
  float: left;
}
.exchange-rate-section{
  position: relative;
  background-color: #004a80;
  height:100px;
  width:365px;
  color:#fff;
  padding-top:40px;
  padding-left:10px;
  border-radius:7px;
  box-shadow: 0px 3px 10px 0px #333;
  left:-10px;
  font-size:14px;
}

.feeRateContainer{
  padding-top: 0px !important;
  margin-bottom: 10px;

}

.feeRate{
  color:#fff;
  font-size:12px;
  text-align: center;
  margin: 40px auto 0;
}

#recipientAmount, #recipientAmountBR, #senderAmount, #senderAmountBR{
  margin:auto;
  text-align: center;
  padding-bottom:20px;
  margin-bottom:0;
}

.recipient{
  padding-top:30px;
}

.sendBtnContainer{
  color: #fff;
  background-color: #004a80;
  border: none;
  margin:auto;
  text-align: center;

}
.send-btn a {
  text-decoration: none;
  color:#fff;
  text-align:center;
}

.calculator-type-container{
  display: flex;
  justify-content: center;
}

.calculator-type{
  background-color: #004a80;
  border-radius: 5px;
}

.calculator-type button {
  color: white;
  border: 1px solid black;
}

/* @media  */

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1024px) {
  .blue{

    margin-left:0px;

   }
   .feeRateContainer{

    padding-top: 50px;
    padding-bottom: 0px;

   }
   #main-header{
    background-color: #002b60;
  }
}

/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {

}

/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
  .blue{

    margin-left:180px;

   }
   .feeRateContainer{

    padding-top: 50px;
    padding-bottom: 0px;

   }
   #main-header{
    background-color: #002b60;
  }
  .signup {
    margin-right: 40px;
  }
}

/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
  .blue{

    margin-left:100px;
  }
  #main-header{
    background-color: #002b60;
  }

}

/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 768px) {
  .blue{

    margin-left:100px;
  }
  #main-header{
    background-color: #002b60;
  }
}



/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
  .calculator-container{
    width:270px;
  }
  .exchange-rate-section{
    width:255px;
    padding-top:20px;
  }
  .blue{
    margin-left:70px ;
  }
  #main-header{
    background-color: #002b60;
  }

}
@media all and (max-width: 414px) {
  .calculator-container{
    width:270px;
  }
  .exchange-rate-section{
    width:255px;
    padding-top:20px;
  }
  .blue{
    margin-left:45px ;
  }
  #main-header{
    background-color: #002b60;
  }

}
@media all and (max-width: 411px) {
  .calculator-container{
    width:270px;
  }
  .exchange-rate-section{
    width:255px;
    padding-top:20px;
  }
  .blue{
    margin-left:44px ;
  }
  #main-header{
    background-color: #002b60;
  }

}
@media all and (max-width: 360px) {
  .calculator-container{
    width:270px;
  }
  .exchange-rate-section{
    width:255px;
    padding-top:20px;
  }
  .blue{
    margin-left:22px ;
  }
  #main-header{
    background-color: #002b60;
  }

}
@media all and (max-width: 320px) {
  .calculator-container{
    width:270px;
  }
  .exchange-rate-section{
    width:255px;
    padding-top:20px;
  }
  .blue{
    margin-left:8px ;
  }
  #main-header{
    background-color: #002b60;
  }

}