.calc-wrapper{
    width: 100%;
    margin: 50px auto;
    background: #fff;
}
.calc-container{
    background: #F2F2F2!important;
    padding: 20px!important;
    border-radius: 0px;
    margin: 15px 0;
    box-shadow: 0 0 8px rgb(166, 164, 197);
    font-family: 'Roboto', sans-serif;
   
}
.result-heading{
    text-align: left !important;
}
.calc-heading h1{
    font-size: 30px;
    margin-bottom: 0;
    color: #0EB0EE;
    margin-top: 16px;
    text-align: left !important;
}
.calc-sub-heading{
    text-align: left !important;
}
.calc-heading{
    margin-bottom: 20px;
    text-align: center;
}
.calc-row{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.label-field{
    width: 55%;
}
.label-field .label{
    font-size: 18px;
}
.input-field,
.input-field{
    display: flex;
    margin: 15px 0;
    width: 45%;
    justify-content: flex-end;

}
.row1 .input-field #inp1,
.row2 .input-field #inp2{
    height: 35px;
    border: 1px solid gray;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 2px 8px;
    font-size: 17px;
    border-right: none;
    width: 65%;
    max-width: 100%;
}
.row1 .input-field #inp1:focus,
.row2 .input-field #inp2:focus{
    outline: 0;
}
.row1 .input-field #selec1,
.row2 .input-field #selec2{
    font-size: 17px !important;    
    padding: 2px 8px;
    width: 35%;
    height: 35px;
    border: 1px solid gray;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.disabled-btn{
    background: gray!important;  
    cursor: not-allowed;  
}
.row1 .input-field #selec1:focus,
.row2 .input-field #selec2:focus{
    outline: 0;
}
.calc-wrapper .calc-btn{
    height: 42px;
    background:#0EB0EE;
    color: white;
    padding: 5px 12px;
    border: 2px solid black !important;
    border-radius: 3px;
    margin: 5px 0;
    font-size: 15px;
    width: 210px;
}

.calc-wrapper .butn:hover{
    text-decoration: none!important;
}
.calc-wrapper .result-box{
    padding: 0;
    border-radius: 6px;
    font-size: 20px;
}
.calc-wrapper .result-box p{
    margin: 0;
    font-size: 20px;
}
.help-btn{
    margin-top: 16px;
    text-align: right;
}
.help-btn .calc-btn{
    width: 210px;
}
.help-btn #help-butn{
    border: none;
    background: none;
    background: #0EB0EE!important;
}
.help-btn #help-butn:hover{
    text-decoration: none!important;
}
.help-btn #help-butn a{
    text-decoration: none;
    font-size: 16px;
    color: rgb(196, 195, 195);
}
.help-btn #help-butn:hover a{
    color: #0EB0EE!important;
}

/* Chrome, Safari, Edge, Opera */
.calc-container input::-webkit-outer-spin-button,
.calc-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.calc-container input[type=number] {
  -moz-appearance: textfield;
}


 /* media queries */





#pdfTable{
    border: 1px solid gray;
    border-collapse: collapse;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;

}

#pdfTable th,
#pdfTable td{
    border: 1px solid #808080;
    text-align: left;

    
}
.subscript {
    vertical-align: sub;
    font-size: smaller !important;
    line-height: normal;
  }
  .warning-info{
      /* color: red; */
      font-size: 20px !important;
  }





.form-container {
    margin: 80px auto;
    width: 300px;
}

.form-group {
    margin-bottom: 10px;
}

.btn {
    background: #1c94ff;
    padding: 4px 8px;
    border: none;
    box-shadow: 2px 1px 1px #d3d3d3;
    color: #fff;
    outline: none;
    font-size: 17px;
    cursor: pointer;
}

label {
    display: block;
    margin-bottom: 2px;
}

.form-group .form-control {
    width: 100%;
    outline: none;
    padding: 5px;
    border: none;
    background: #d1d1d1;
    border-bottom: 2px solid #1c94ff;
    font-size: 16px;
}

.has-success .form-control {
    border-bottom: 2px solid #168b3f;
}

.has-danger .form-control {
    border-bottom: 2px solid #dc1d34;
}

.form-group .text-help {
    color: #dc1d34;
}

.inline-label label{
    display: inline;
}

.pristine-error {
    display: table;
}
#results-area{
    min-height: 110px;
}


/* ///////////////// */
#formConfirmation{
    width: 816px;
    height: 1040.8818898px;  
    position: fixed;
    top: 0;
    z-index: -10000;
}
.template-wrapper{
    width: 100%;
    height: 100%;
    position: relative;
}
.template-container{
    /* padding: 10px 60px; */
    width: 650px;
    margin: 0 auto;
  }
  .template-container *{
      font-family: Helvetica, sans-serif;
      font-size: 12px;
      
      /* height: 1200px; */
  }
  #resultPdfTable{
      border-collapse: collapse;
  }
  #resultPdfTable th{
      width: 4%;
      height: 100px;

  }
  #resultPdfTable th,
  #resultPdfTable td{
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    padding: 5px;
    
  }
  /* #resultPdfTable th:last-child, */
  #resultPdfTable td:last-child{
    border-right: 1px solid #000;
    
  }
  #resultPdfTable tr:last-child th,
  #resultPdfTable tr:last-child td{
     border-bottom: 1px solid #000;
  }
  .temp-row{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      border-bottom: 1px solid #000;
      padding-bottom: 20px;
  }
  .info-box{
      display: flex;
      flex-direction: column;
  }
  .info-box > span{
     margin: 0px 0;
  }
  .info-box span{
      font-size: 12px;
  }
  .blue-text{
      color: #0EB0EE;
      width: 18px;
      text-align: left;
      display: inline-block;
  }
  .print-date{
    margin: 15px 0;
    display: inline-block;
  }
  .print-heading{
      font-size: 20px;
      display: block;
      color: #000;
      font-weight: bold;
      width: 100%;
      margin-top: 20px;
      margin-bottom: -9px;
  }

  .temp-footer{
      display: block;
      height: 20px;
      background:   #414042;
      border-top: 5px solid #1075bb;
      width: 816px;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      bottom: 0;
  }

  #resultPdfTable .rotate{
    width: 40px;
    padding: 0 !important;
    position: relative;
    }
 /* #resultPdfTable .rotate div{
    width: 100%;
    height: 100%;
    display: flex;
} */

#resultPdfTable .rotate span{
    text-align: left;
    transform: rotate(-90deg);
    position: absolute;
    right: 0;
    top: 50px;
    left: 0;
    text-transform: uppercase;
    display: flex;
}
/* //////////////////// */











@media screen and (max-width: 992px){
    .calc-container{
        width: 100%;
        margin: 30 auto;
    }  
    .calc-wrapper{
        width: 100%;
    }
    .row1, .row2, .row3{
        display: inline;
    }
    .input-field .calc-input{
        display: inline;
        position: relative;
    }
    .input-field #inp1,
    .input-field #inp2{
        position: relative;
        right: -8px;
    }
    .result-field{
        margin-top: 30px;
    }
}

@media screen and (max-width: 800px){
    #results-area{
        min-height: 150px;
    }
}
@media screen and (max-width: 768px){
    .calc-container{
        width: 100%;
        margin: 20 auto;
    } 
    .label-field{
        width: 100%;
    }
    .input-field,
    .input-field{
        display: flex;
        margin: 15px 0;
        width: 100%;
        justify-content: flex-end;
    
    }
    
}