html body div.calculators .wrapper{
    max-width:400px;margin:auto;width:100%;height:100%;
  }   
  html body div.calculators .cal-title {
    width: 100%;
    text-align: center;
    background: #f68122;
    margin: 0px;
    font-size: 25px;
    padding: 14px;
    color: white;
  }
  .header-copy {
    text-align: center;
    line-height: 20px;
    margin: 10px 0px 30px 0px;
    font-size: 15px;
}
  
  html body div.calculators .max-h{
    max-height:400px;
  }
  html body div.calculators .custom-col{
    margin: auto;
    bottom: 20px;
    position: relative;
    right: 20px;
  }
  html body div.calculators .custom-mb{
    margin-bottom:50px;
  }
  html body div .calculators .aAuto{
    margin:auto;
  }
  html body div.calculators div.input-group.int-group{
    left:0px;
  }
  div.calculators .dti-group{
      position:relative;
      bottom:2px;
  }
  div.calculators .dti-row{
      margin-bottom:2px;
  }
  div.calculators .xsmall-label {
    font-size: 10px !important;
    font-weight: 600;
    line-height: 12px;
  }

html body div.calculators .down-slide {
    margin: 20px 0px 0px 0px;
    width: calc(100% - 70px) !important;
}
html body div.calculators .slide-wrapper{
    width:100%;
}
html body .calculators .int-label{
    position:relative;
    top:15px;
  }
html body .calculators.legacy .slide-wrapper .perc-wrap .down-perc{
    border-left:1px solid #a9a9a9;
    padding-left:10px;
    font-size:14px;
}
html body .calculators.legacy .perc-wrap .perc-symbol
{
        position: absolute;
        right: -10px;
        top: 10px;
}
html body div.calculators .perc-symbol{
    position: absolute;
    right: -10px;
    top: 14px;
}
html body div.calculators .slide-wrapper .perc-wrap {
    padding: 5px 0px;
    text-align: center;
    float: right;
    position: absolute;
    top: 14px;
    right: 16px;
    width: 50px;
}
html body div.calculators .slide-wrapper .down-perc {
    padding: 7px 5px 7px 3px;
    width: 66px;    font-size:14px;
}
html body .cal-pad{
    padding:0px 8px 0px 8px;
}
  html body div.calculators div.cal-container{
    margin:auto;width:100%;max-width:610px;padding:0px;
  }
  html body div.calculators .mainValueWrap{
      width: 100%;
      text-align: center;
      height: auto;
      position: relative;
      top: 100px;
  }
  html body div.calculators {
      color: #333538;
      font-family: 'Lato', sans-serif;
      line-height: 1.6;
      padding: 0;
      margin: 0;
  }
  .calculators .cal-container input {
    padding: 6px 5px;
  }
  div.calculators.legacy .cal-container input {
    padding: 6px 5px;
    border-left-width: 0px;
    border-right: 1px solid #a9a9a9;
    border-top: 1px solid #a9a9a9;
    border-bottom: 1px solid #a9a9a9;
    min-height:33px;
  }
  html body div.legacy div.input-group{
      position:relative;
      left:21px;
      width:90%;
  }
  
  html body div.legacy .row.my-container{
    padding-left:35px;
  }
  
  html body div.legacy .btn.btn-adv {
      background-color: transparent;
      border-radius: 0;
      color: #f68121;
      padding: 0.25rem 0.75rem;
      border: 0px;
      position: relative;
      bottom: 0;
  }
  html body div.legacy .cal-container{
      float:none;
  }
  
  html body div.legacy div.input-group-prepend div.input-group-text {
    display: flex;
    align-items: center;
    padding: 6px;
    margin-bottom: 0;
    left: -24px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid #a9a9a9;
    position: absolute;
    height: 100%;
    width: 25px;
  }
  .calculators .advancedRowData input {
    width: 100%;
  }
  html body div.calculators label {
      display: inline-block;
      margin-top: 20px;
      margin-bottom:0px;
  }
  div.calculators a {
      color: #f27173;
      text-decoration: none;
  }
  
  div.calculators a:hover {
      color: #e25f5f;
      text-decoration: underline;
  }
  
  div.calculators .content {
      max-width: 610px;
      margin: auto;
      padding: 16px 32px;
  }
  
  div.calculators .header {
      text-align: center;
      padding: 32px 0;
  }
  
  div.calculators .wrapper {
      min-height: 400px;
      padding: 16px 0;
      position: relative;
  }
  
  div.calculators .wrapper.col-2 {
      display: inline-block;
      min-height: 256px;
      width: 49%;
  }
  @media (max-width: 768px) {
    html body div.calculators .mainValueWrap{
      margin-bottom:120px;
    }
  }
  @media (max-width:1279px) {
    html body .mainValueWrap .mainOutputWrap div{
      font-size: 15px;
      letter-spacing: -1px;
    }
  
  html body div.legacy div.row.my-container {
    padding-left: 15px;
  }
  }
  @media (max-width: 479px) {
    html body div.calculators .input-group input{
      width:100%;
    }
  }
  @media (max-width: 580px) {
      html body div.calculators div.cal-container{
          margin: auto;
      max-width: 100%;
      width: auto;
      min-width: unset !important;
      }
      html body div.calculators div.mainValueWrap{
        margin-bottom:0px;
      }
  
      html body div.calculators div.mainValueText {
        text-align:center;
        padding-left:0px;
        }
      
        html body div.calculators div.mainValue {
          text-align:center;
          padding-left:0px;
          }
      html body div.calculators div.cal-container .wrapper {
      width: 250px !important;
      min-width: unset;
      min-height: unset;
      margin: auto;
      }
      html body div.calculators .mainValueWrap {
      width: 100%;
      text-align: center;
      height: auto;
      position: relative;
      top: 10px;
      }
  
      html body div.calculators div .mainValueText {
      font-size: 25px;
      color: #636466;
      }
      html body div.calculators .row.my-container{
          padding:30px;
      }
  
      html body div.calculators .mainOutputWrap {
      text-align: left;
      position: relative;
      margin: 25px 0px 20px 24px;
      padding:0px 40px;
  }
  
      html body div.calculators .mainValue {
      font-size: 36px;
      color: #636466;
      line-height: 32px;
      font-weight: 400;
      }
      html body div.calculators .mainOutputWrap .col-sm-4.col-7{
          text-align:right;
          font-weight: bold;
      }
  }
  
  
  
  @media (max-width: 400px) {
      div.calculators .wrapper.col-2 {
          width: 100%
      }
  }
  
  div.calculators .wrapper canvas {
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
  }
  
  div.calculators .toolbar {
      display: flex;
  }
  
  div.calculators .toolbar > * {
      margin: 0 8px 0 0;
  }
  
  div.calculators .btn {
      background-color: #aaa;
      border-radius: 4px;
      color: white;
      padding: 0.25rem 0.75rem;
  }
  
  div.calculators .btn .fa {
      font-size: 1rem;
  }
  
  div.calculators .btn:hover {
      background-color: #888;
      color: white;
      text-decoration: none;
  }
  
  div.calculators .btn-chartjs { background-color: #f27173; }
  div.calculators .btn-chartjs:hover { background-color: #e25f5f; }
  div.calculators .btn-docs:hover { background-color: #2793db; }
  div.calculators .btn-docs { background-color: #36A2EB; }
  div.calculators .btn-docs:hover { background-color: #2793db; }
  div.calculators .btn-gh { background-color: #444; }
  div.calculators .btn-gh:hover { background-color: #333; }
  
  div.calculators .btn-on {
      border-style: inset;
  }
  
  div.calculators .chartjs-title {
      font-size: 2rem;
      font-weight: 600;
      white-space: nowrap;
  }
  
  div.calculators .chartjs-title::before {
      background-image: url(../logo.html);
      background-position: left center;
      background-repeat: no-repeat;
      background-size: 40px;
      content: 'Chart.js | ';
      color: #f27173;
      font-weight: 600;
      padding-left: 48px;
  }
  
  div.calculators .chartjs-caption {
      font-size: 1.2rem;
  }
  
  div.calculators .chartjs-links {
      display: flex;
      justify-content: center;
      padding: 8px 0;
  }
  
  div.calculators .chartjs-links a {
      align-items: center;
      display: flex;
      font-size: 0.9rem;
      margin: 0.2rem;
  }
  
  div.calculators .chartjs-links .fa:before {
      margin-right: 0.5em;
  }
  
  div.calculators .samples-category {
      display: inline-block;
      margin-bottom: 32px;
      vertical-align: top;
      width: 25%;
  }
  
  div.calculators .samples-category > .title {
      color: #aaa;
      font-weight: 300;
      font-size: 1.5rem;
  }
  
  div.calculators .samples-category:hover > .title {
      color: black;
  }
  
  div.calculators .samples-category > .items {
      padding: 8px 0;
  }
  
  div.calculators .samples-entry {
      padding: 0 0 4px 0;
  }
  
  div.calculators .samples-entry > .title {
      font-weight: 700;
  }
  
  @media (max-width: 640px) {
      div.calculators .samples-category { width: 33%; }
  }
  
  @media (max-width: 512px) {
      div.calculators .samples-category { width: 50%; }
  }
  
  @media (max-width: 420px) {
      div.calculators .chartjs-caption { font-size: 1.05rem; }
      div.calculators .chartjs-title::before { content: ''; }
      div.calculators .chartjs-links a { flex-direction: column; }
      div.calculators .chartjs-links .fa { margin: 0 }
      div.calculators .samples-category { width: 100%; }
  }
  
  div.calculators .analyser table {
      color: #333;
      font-size: 0.9rem;
      margin: 8px 0;
      width: 100%
  }
  
  div.calculators .analyser th {
      background-color: #f0f0f0;
      padding: 2px;
  }
  
  div.calculators .analyser td {
      padding: 2px;
      text-align: center;
  }
  div.calculators .cal-container{
      border: 2px solid #ababab;
      margin: auto;
      border-radius: 8px;
      margin: 50px auto;
  }
  div.calculators .my-container{
      background:#eaeaea;
      padding-bottom: 60px;
  }
  html body div.legacy.calculators .btn.btn-adv{
      background-color: transparent;
      border-radius: 0;
      color: #f68121;
      padding: 0.25rem 0.75rem;
      border: 0px;
      position: relative;
      bottom: 0px;
  }
  html body div.legacy.calculators .btn.btn-adv:after{
    content: ">";
    font-size:14px;
    font-weight:bold;
    position:relative;
  }
  div.calculators .arrowWrap{
      width: 120px;
      margin: auto;
      text-align: center;
      position: relative;
  }
  div.calculators .btn-primary.btn-adv.focus, div.calculators .btn-primary.btn-adv:focus {
      box-shadow: unset;
      background:#eaeaea;
  }
  div.calculators .mainOutputWrap {
      text-align: left;
      position: relative;
      margin: 75px 0px 0px 24px;
  }
  div.calculators .arrow {
      border: solid #eaeaea;
      border-width: 0 20px 20px 0;
      display: inline-block;
      padding: 8px;
      position: absolute;
      top: -17px;
  }
  div.calculators .mainValueText{
      font-size: 25px;
      color: #636466;
      
  }
  div.calculators .mainValue{
      font-size: 40px;
      color: #636466;
      line-height: 32px;
      font-weight: 400;
  }
  div.calculators .mainValueWrap{
      width: 100%;
      text-align: center;
      height: auto;
      position: relative;
      top: calc(56% - 95px);
  }
  div.calculators .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  html body div.calculators .mainValueText {
    text-align:left;
    padding-left:15px;
    }
  
    html body div.calculators .mainValue {
      text-align:left;
      padding-left:15px;
      }
  
  
  /* start css file (bootstrap) */
  
  
    
  
    /* end css file (bootstrap) */