/* master css */
@font-face {
  font-family: GothamLigth;
  src: url("./assets/Fonts/GothamLight.ttf");
}
@font-face {
  font-family: GothamBold;
  src: url("./assets/Fonts/GothamBold.ttf");
}

@font-face {
  font-family: GothamMedium;
  src: 
    url("./assets/Fonts/GothamMedium.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Gotham;
}
.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.flex {
  display: flex;
  display: -webkit-flex;
}

.flex-center{
  justify-content: center;
}

.flex-center-center {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-direction: -webkit-column;
  justify-content: -webkit-center;
  align-items: -webkit-center;
}

.flex-space-bw {
  justify-content: space-between;
  justify-content: -webkit-space-space-between;
}

.flex-wp {
  flex-wrap: wrap;
}

.flex-end{
  justify-content: flex-end;
  justify-content: -webkit-flex-end;
}

.font-small{
  font-family: GothamLigth;
  font-size: 16px;
}

.font-medium{
  font-family: GothamMedium;
  font-size: 21px;
}

.font-large{
  font-family: GothamBold;
  font-size: 28px;
}

.font-weight-light {
  font-weight: normal;
}

.font-weight-medium{
  font-weight: 600;
}

.font-weight-bold{
  font-weight: bolder;
}
 .w33{
   width: 33.33%;
 }
/* master css */

/* Button */
.btn {
  color: #fff !important;
  padding: 10px;
  background-color: rgba(1, 46, 88, 1);
  border-radius: 5px;
  cursor: pointer;
}
/* Button */

/* Input */

.custom-input {
  position: relative;
}
.custom-input input {
  border-radius: 4px;
  border: 2px solid rgba(255, 78, 25, 1);
  line-height: 40px;
  text-indent: 10px;
  padding-top: 6px;
  font-size: 16px;
  width: 100%;
  font-family: GothamLigth;
}

.custom-input input::-webkit-inner-spin-button{
  display: none;
}

.custom-input input::placeholder {
  color: rgb(119, 119, 119);
}
/* .custom-input input:focus::placeholder {
  color: rgb(119, 119, 119);
} */

.custom-input input:focus {
  border: 3px solid rgba(255, 78, 25, 1);
  outline: none;
}

.custom-input label {
  position: absolute;
  cursor: text;
  top: -12px;
  left: -2px;
  color: rgba(1, 46, 88, 1);
  font-weight: bolder;
  font-size: 18px;
  /* transition: top 200ms ease-in, left 200ms ease-in, font-size 200ms ease-in; */
  background-color: #fff;
  padding: 2px;
  font-family: GothamMedium;
}


/* .custom-input input:focus ~ label,
.custom-input input:not(:placeholder-shown) ~ label {
 
  font-size: 15px;
  
} */

/* Input */

/* Input Range */
.custom-input-range label {
  color: rgba(1, 46, 88, 1);
  font-weight: bolder;
  font-family: GothamMedium;
  font-size: 18px;
  margin-bottom: 10px;
  
}

.input-range {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border: 2px solid rgba(255, 78, 25, 1);
  border-radius: 20px;
  height: 10px;
  
}
.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width:20px;
  height: 20px;
  border-radius: 50%;
  transform: translateX(-50%);
  z-index: 1024;
  cursor: pointer;
  position: relative;
}

.input-range::-webkit-progress-bar{
  background-color: rgba(255, 78, 25, 1);
}

.selector{
    width: 35px;
    position: absolute;
    top: -9px;
    transform: translateX(-50%);
    z-index: 2;
}

.selectBtn{
  width: 28px;
  height: 28px;
  background-color: rgba(255, 214, 10, 1);
  border: 2px solid rgba(255, 78, 25, 1);
  border-radius: 50%;
  cursor: pointer;
}

.selectValue{
  width: 50px;
  height: 30px;
  position: relative;
  border-radius: 3px;
  background-color: rgba(1, 46, 88, 1);
  color: #fff;
  font-size: 13px;
  top: 8px;
  font-weight: bolder;
}

.progressBar{
  background-color: rgba(255, 78, 25, 1);
  border-radius: 20px;
  height: 10px;
  left: 0;
  position: absolute;
}

.caret-custom {
  width: 12px;
  height: 12px;
  background-color: rgba(1, 46, 88, 1);
  position: absolute;
  transform: rotate(45deg);
  top: -6px;
}

.circle {
  width: 14px;
  height: 14px;
  background-color: rgba(255, 78, 25, 1);
  border-radius: 50%;
}


.ir-btn-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 3px;
  background-color: rgba(226, 226, 226);
  background-image: url("./assets/2x/remove_black_36dp.svg");
  background-position: center center;
  background-size: contain;
}

.ir-btn-icon:nth-of-type(2) {
  background-image: url("./assets/2x/add_black_36dp.svg");
}
/* Input Range */

/* Header */
.header {
  background-color: rgba(1, 46, 88, 1);
  padding: 10px;
  color: #fff;
}

.header img{
  width: 55px;
  height: 55px;
}

/* .main-head {
  font-size: 30px;
} */
.p-head {
  margin-top: 5px;
}
/* Header */

/*  form */
.form-field {
  width: 33.33%;
  padding: 5px;
  margin-top: 7px;
}
.row1,
.row2 {
  padding: 10px;
}
.row2 .form-field {
  width: 50%;
 
}
/* .row2 .form-field:first-of-type{
  padding: 20px;
} */

/* form */

/* Result */
.result{
  padding: 20px 10px;
  background-color: rgba(255, 214, 10, 1);
  border-radius: 6px;
  color: rgba(1, 46, 88, 1);
}
.res-price{
  font-family: GothamLigth;
}
/* Result */

/* Summary Table */
.summary-table{
  display: block;
  border-radius: 6px;
  height: fit-content;
}

.st-head{
  padding: 5px 10px;
  color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.st-bottom{
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: rgba(1, 46, 88, 1);
}

.arrow-png, .arrow-png-down{
  background: url("assets/2x/arrow.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
  transition: transform 0.4s ease;
  cursor: pointer;
}

.arrow-png-down{
  transform: rotate(-0deg);
}

.st-icon img{
  width: 25px;
  height: 25px;
}

.dwnld-rpt{
  width: 25%;
}

.download-report{
  position: fixed;
  top: 0;
  z-index: 2222;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .7);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

.download-report-card{
  color: rgba(1, 46, 88, 1);
  display: block;
  width: 40%;
  background: #fff;
  -webkit-box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 8px;
}

.download-report-card-head{
   
   padding-bottom: 5px;
   border-bottom: 2px solid #A6A6A6;
}

.download-report-card input[type=checkbox],.custom-checkbox{
  width: 25px;
  height: 25px;
  position: realtive;
  z-index: 2223;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
}

.custom-checkbox{
  position: absolute;
  background: url("./assets/2x/Tick-Square-1@2x.png") ;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2220;
  border-radius: 7px;
}
.download-report-card input[type=checkbox]:checked ~.custom-checkbox{
  background: url("./assets/2x/Tick-Square@2x.png") ;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.tabels {
 height: fit-content;
}



/* Summary Table */

/* SelectBox */
.select-box{
  position: relative;
}

.select-box input[type=text]:read-only {
  cursor: pointer;
}

.fa-chevron-down{
  position: absolute;
  right: 10px;
  top: 20px;
  color: rgba(255, 78, 25, 1);
}

.options{
  position:  absolute;
  z-index: 2222;
  border: 2px solid rgba(255, 78, 25, 1);
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
}

.opt{
  padding: 5px;

 
}

.opt div:hover{
  background-color: rgba(255, 78, 25, 0.5);
}
.opt div{
  border-top: 1px solid rgba(255, 78, 25, 1);
  padding: 5px;
  cursor: pointer;
}
/* Select Box */

@media only screen and (max-width: 933px){
  .w33{
    width: 100%;
  }

  .rs-area{
    margin-top: 5px;
    justify-content: flex-start;
  }
}

@media only screen and (max-width: 768px){
  .download-report-card input[type=checkbox],.custom-checkbox{
    width: 20px;
    height: 20px;
    border-radius: 4px;
  }
  .download-report-card{
    width: 70%;
  }
  .dwnld-rpt{
    width: 100%;
  }

  .tabels {
    width: 100% !important;
  }
  .custom-input label{
    font-size: 16px;
  }

  .custom-input input:focus ~ label,
.custom-input input:not(:placeholder-shown) ~ label {
  font-size: 12px;
}



  .header img{
    width: 40px;
    height: 40px;
  }
  .form-field {
    width: 100% !important;
  }

  .row2 .form-field:nth-of-type(2){
    margin-top: 50px;
  }

  .font-small{
    font-size: 12px;
  }
  
  .font-medium{
    font-size: 16px;
  }
  
  .font-large{
    font-size: 21px;
  }
  
  .font-weight-light {
    font-weight: normal;
  }
  
  .font-weight-medium{
    font-weight: 600;
  }
  
  .font-weight-bold{
    font-weight: bolder;
  }
}