html {
    /* overflow:hidden; */
}

body{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important;
}

#calculator-wrapper {
    display:flex;
    flex-direction: row;
}
.calculator-controls {
    width:40%;
    max-width:500px;
}
.calculator-charts {
    margin-left:30px;
    width: 60%;
}
.control-item {
    display:flex;
    flex-direction: row;
    padding: 13px 30px 13px 30px;
    box-shadow: 0 2px 5px 0.2rem rgba(0,0,0, 0.1);
    border-radius: 0 0 20px 20px;
    margin: 0 0 20px 0;
    width:100%;
}
.controller-title {
    padding: 6px 30px 0px 9px;
    box-shadow: 0 -3px 5px 0.1rem rgba(0,0,0, 0.1);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.controller-title .help-icon {
  padding: 0 4px;
  border: 2px solid #c7c7c7;
  background-color: transparent;
  color: #c7c7c7;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  font-size: 14px;
  font-weight: bold;
  margin-right: -20px;
  line-height: 15px;
  cursor: pointer;
}
.controller-title.hightlighted .help-icon {
  background-color: transparent;
  border: 2px solid #FFF;
  color: #FFF;
}
.control-item.hightlighted {
    box-shadow: none;
    background-color: #1156A5;
}
.control-item .prefix {
    display:flex;
    margin:6px 10px 0 0;
    font-size:20px;
}
.control-item.hightlighted .prefix {
    color: #fff;
}
.control-item.columned {
    flex-direction: column;
}
.control-item.hightlighted .total-amount{
  font-size:24px;
  color: #fff;
  margin-top: 3px;
}

.switch-container {
    display: flex;
    place-self: flex-end;
}
.custom-switch label {
    color: #aaa;
    font-size: 12px;
    padding-top: 3px;
}
.controller {
    width: 100%;
}
.controller-title h3 {
    font-size: 15px;
    font-weight: 300;
    color: #737475;
    margin-left: 20px;
    margin-bottom: 5px;
}
.controller-title.hightlighted {
    background-color: #1156A5;
    border-bottom: 1px solid #1e69be;
    box-shadow: none;
}
.controller-title.hightlighted h3 {
  color: #fff;
}
.lock {
    width: 30px;
    height: 27px;
    flex-basis: 50px;
    cursor: pointer;
}
.lock.locked {
    margin: 8px 0 0 30px;
    background: url('../calculator/locked.png') no-repeat center center;
}
.lock.unlocked {
    margin: 8px 0 0 30px;
    background: url('../calculator/unlocked.png') no-repeat center center;
}

#working {
  display: none;
  width: 22px;
  height:22px;
  background: url('../calculator/loader.gif') no-repeat center center;
  background-size: contain;
}

.btn-calculate {
    color: #FFF;
    background-color: #1156A5;
    border-radius: 15px;
    margin-top: 20px;
}
.btn-calculate:hover, .btn-calculate:active  {
    color: #FFF;
    background-color: #0f4b91;
}
#objetive_mode_button {
    box-shadow: 0 2px 5px 0.1rem rgba(0,0,0, 0.3);
    border-radius: 15px 0 0 15px;
    background-color: #d3d3d3;
    padding:10px;
    color:#737475;
    font-weight:bold;
    cursor: pointer;
    font-size: 14px;
}
#objetive_mode_button:hover {
  text-decoration: none;
  background-color: #e2e2e2;
}
#return_mode_button {
    box-shadow: 0 2px 5px 0.1rem rgba(0,0,0, 0.3);
    border-radius: 0 15px 15px 0;
    background-color: #d3d3d3;
    padding:10px;
    color:#737475;
    font-weight:bold;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
#return_mode_button:hover {
  text-decoration: none;
  background-color: #e2e2e2;
}
#objetive_mode_button.active, #return_mode_button.active, #objetive_mode_button.active:hover, #return_mode_button.active:hover {
    background-color: #0f4b91;
    color:#FFF;
    cursor: auto;
}
#objetive_mode_button .icon {
    display:inline-block;
    background: url('../calculator/flag-inactive.png') no-repeat ;
    width:30px;
    height:27px;
    /*margin: 0 20px 0 0;*/
    background-position: 0px 0px;
}
#objetive_mode_button.active .icon {
    background: url('../calculator/flag-active.png') no-repeat ;
    background-position: 0px 0px;
}

#return_mode_button .icon {
    display:inline-block;
    background: url('../calculator/chart-inactive.png') no-repeat ;
    width: 30px;
    height: 27px;
    /*margin: 0 20px 0 0;*/
    background-position: 0px 0px;
}
#return_mode_button.active .icon {
    background: url('../calculator/chart-active.png') no-repeat ;
    background-position: 0px 0px;
}

#total_investment {
  padding:5px 20px;
  border-radius: 20px;
  /*background-color: #d3d3d3;*/
  color: #737475;
  box-shadow: 0 2px 5px 0.2rem rgba(0,0,0, 0.1);
}
#total_return {
  padding:5px 20px;
  border-radius: 20px;
  /*background-color: #0f4b91;*/
  color: #0f4b91;
  box-shadow: 0 2px 5px 0.2rem rgba(0,0,0, 0.1);
}
#total_balance {
  padding: 0 20px 5px 20px;
  border-radius: 20px;
  /*border: 4px solid #0f4b91;*/
  background-color: #FFF;
  color: #0f4b91;
  font-size: 22px;
}
#total_balance .amount {
  font-size:40px;
}

.apexcharts-bar-area:hover {
  /*fill: #FF0099 !important; */
  filter: brightness(80%);
}
#period-container {
  font-size: 14px;
}
#period-container .custom-control-inline {
  width: 40%;
}


 .masthead {
     padding:10px 0;
 }
 .logo img {
     height:90px;
 }
 .mainnav {
     z-index: 3;
     position: relative;
     height:10px;
     box-shadow: 0 4px 6px 0.1rem rgba(0,0,0, 0.2);
 }

 figure {
     margin:0;
 }

 #app-wrapper {
     padding-top: 50px;
 }

 #main-title{
   font-size: 1.8em;
   font-weight: 400;
   color: #444;
 }

 #main-description{
   font-size: 15px;
   font-weight: 300;
   text-align: left;
 }

 #help-button{
   position: absolute;
   top: 24px;
   right: 25px;
   height: 40px;
   width: 40px;
   border-radius: 50%;
   background-color: #28a745;
   font-family: 'Inter', sans-serif;
   color: #fff;
   font-size: 30px;
   line-height: 40px;
   text-align: center;
   font-weight: 600;
   cursor: pointer;
   -webkit-transition: -webkit-transform .3s ease-in-out;
   -ms-transition: -ms-transform .3s ease-in-out;
   transition: transform .3s ease-in-out;
   z-index: 1000;
 }

 #helpModalLabel, #help-content{
  font-family: 'Inter', sans-serif;
 }

 .modal-footer-button{
   border-radius: 10em;
   background-color: #007fff;
   padding: 10px 32px;
   border-color: #007fff;
 }

 .modal-footer-button:hover{
   background-color: #007fff;
   border-color: #007fff;
 }

 #hero-section{
   padding-top: 14px;
   text-align: center;
   color: #737475;
 }

 #goal {
     padding: 15px;
     color: #fff;
     border-radius: 20px;
     display:flex;
     flex-direction: column;
     margin-bottom:20px;
 }
 #goal span {
     color:#fff;
     font-size:16px;
 }



 .controller-recurring{
   padding: 12px 0;
   color: #737475;
   display: flex;
   flex-direction: column;
   width: 100%;
    margin: auto;
 }

 .subtitle{
   text-align: center;
   font-size: 18px;
 }

 .graph-title h3 {
   font-size: 18px;
   color: #737475;
   padding-top: 16px;
   text-align: center;
 }
 .graph-title .help-icon {
    padding: 0px 4px;
    border: 2px solid #c7c7c7;
    background-color: transparent;
    color: #c7c7c7;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    font-size: 14px;
    font-weight: bold;
    margin: -2px -10px 0 10px;
    line-height: 15px;
    cursor: pointer;
 }

 .controller-slider {
     width: 100%; /* Width of the outside container */
 }

 .controller-title-recurring h3{
   font-size: 14px;
   font-weight: 300;
   color: #737475;
   padding-top: 10px;
 }

 .switch-subtitle h3{
   font-size: 12px;
   font-weight: 300;
   color: #737475;
   padding-top: 10px;
 }

 .notes-graph p {
   padding-top: 0;
   font-size: 13px;
   font-weight: 300;
   color: #737475;
   text-align: justify;
 }

 #futureReturn-section-wrapper{
   padding: 14px;
   margin: 20px 0;
   text-align: center;
   font-size: 26px;
   background-color: #007fff;
   border-radius: 18px;
 }

 .futureReturn-title{
     font-size: 18px;
     font-weight: 300;
     color: #a8d5f7;
     text-align: center;
 }

 .controller-amount{
     text-align: center;
     font-size: 26px;
     color: #737475;
 }

 #controls-container{
     display: flex;
    flex-direction: column;
 }

 #disclaimers {
     cursor:pointer;
 }

 #futureReturn_output{
     font-size: 26px;
     color: white;
     margin: 0px;
 }

   /* The slider itself */
   .slider-calculator {
     -webkit-appearance: none;
     width: 100%;
     height: 8px;
     border-radius: 5px;
     background: #d3d3d3;
     outline: none;
     opacity: 0.7;
     -webkit-transition: .2s;
     transition: opacity .2s;
   }

   /* Mouse-over effects */
   .slider-calculator:hover {
     opacity: 1; /* Fully shown on mouse-over */
   }

   /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
   .slider-calculator::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #007fff;
     cursor: pointer;
     border: 2px solid white;
     box-shadow: 0px 0px 6px #0390fc;
   }

   .slider-calculator::-moz-range-thumb {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: #007fff;
     cursor: pointer;
     border: 2px solid white;
     box-shadow: 0px 0px 6px #0390fc;
   }


   .switch-subtitle, .controller-switch{
     flex-basis: 0;
   }

   .custom-switch {
     padding-left: 2.50rem;
   }

   .pie-gragh-wrapper .apexcharts-tooltip {
     color: #fff;
   }

   #disclaimers{
     font-weight: 900;
     color: #007fff
   }

 .apexcharts-yaxis-label {
     text-align:left;
 }

 .modal-description, .modalLabel{
   font-family: 'Inter', sans-serif;
 }

 .modalLabel{
   font-size: 22px;
 }



@media screen and (max-width: 900px) {
    #calculator-wrapper {
        display:flex;
        flex-direction: column;
    }

    .calculator-controls {
        width: 100%;
        max-width: none;
    }

    .calculator-charts {
        margin: 0;
        width: 100%;
        max-width: none;
    }
}







   /* MEDIA QUERIES */

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

     #main-title, #main-description{
       text-align: center;
     }

     .controller-switch{
       text-align: center;
     }

     .switch-subtitle, .controller-switch{
       flex-basis: auto;
     }

    }

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

     #main-title, #main-description{
       text-align: center;
     }
     /*
     .controller-recurring{
       border: 1px solid #cdcdcd;
       background-color: transparent;
     }
     */

     .switch-subtitle h3{
       font-size: 9px;
       font-weight: 500;
     }

     .futureReturn-wrapper{
       background-color: transparent;
       color: #737475;
     }

     #futureReturn_output{
       font-size: 23px;
       color: white;
       padding: 0px;
     }

     .division-line{
       padding: 10px 0px;
     }

     .futureReturn-title{
       font-size: 20px;
       margin: 0px;
       color: #a8d5f7;
     }

     .switch-subtitle, .controller-switch{
       flex-basis: auto;
     }

     .custom-switch {
       padding-left: 2.20rem;
     }

     .modalLabel{
       font-size: 24px;
     }

     #recurring_output {
       font-size: 22px;
     }

     .notes-graph p{
       font-size: 13px;
     }

   }

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

     #main-title, #main-description{
       text-align: center;
     }
     /*
     .controller-recurring{
       border: 1px solid #cdcdcd;;
       background-color: transparent;
     }
     */
     .futureReturn-title{
       font-size: 20px;
       margin: 0px;
       color: #737475;
     }

     #futureReturn_output{
       font-size: 23px;
       color: #fff;
       padding: 10px 15px;
       background-color: #007fff;
       border-radius: 10px;
     }

     #futureReturn-section-wrapper{
       background-color: transparent;
     }

     .controller-switch{
       text-align: center;
     }

     .switch-subtitle, .controller-switch{
       flex-basis: auto;
     }

     .custom-switch {
       padding-left: 2.20rem;
     }

     .pie-gragh-wrapper{
       padding: 30px 0;
     }

     .modalLabel{
       font-size: 26px;
     }

     .notes-graph p{
       font-size: 13px;
     }

  }

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

   #main-title, #main-description{
     text-align: center;
   }
   /*
   .controller-recurring{
     border: 1px solid #cdcdcd;
     background-color: transparent;
   }
   */
   .futureReturn-title{
     font-size: 20px;
     margin: 0px;
     color: #737475;
   }

   #futureReturn_output{
     font-size: 23px;
     color: #fff;
     padding: 10px 15px;
     background-color: #007fff;
     border-radius: 10px;
   }

   #futureReturn-section-wrapper{
     background-color: transparent;
   }

   .switch-subtitle, .controller-switch{
     flex-basis: auto;
   }

   .custom-switch {
     padding-left: 2.20rem;
   }

   .pie-gragh-wrapper{
     padding: 30px 0;
   }

   .modalLabel{
     font-size: 26px;
   }

   .notes-graph p{
     font-size: 13px;
   }

  }

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
input[type="radio"]:checked + label {
   background: unset !important;
}

.bolder{
  font-weight: bold !important;
}