@-ms-viewport {
  width: device-width;
}

*,html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
  -ms-overflow-style: scrollbar;
  letter-spacing: 0
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
          outline: none;
}
.boxsizing,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}
body{padding:0px; margin:0px;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
#policybazaar {
    width: 1170px !important;
    padding-left:15px;
     padding-right:15px;
}
.calculator_wrapper{
      border: 1px solid rgba(37, 56, 88, 0.2);
    border-radius: 4px;
    padding: 35px 27px;
}
.hraSelection.action{margin-top: 30px;}
.calculator_wrapper.resultBox{padding:0px;}
.calculator_wrapper.resultBox .banner.gst {  
  /*background: url(../../images/calculator/gst.jpg) no-repeat left bottom;*/
    width: 100%;
    height: 220px;
  background: #f4f5f7;
  position: relative;
  }
.calculator_wrapper.resultBox .banner.gst::before {
  content: '';
  background: url(../../images/calculator/hra.png) no-repeat center bottom;
  width: 100%;
  height: 100%;
  background-size: cover;
  display: block;
}
.calculator_wrapper.resultBox .banner.gst::after{
  content: '';
  background: url(../../images/calculator/gst_text.png) no-repeat center ;
  width: 100%;
  height: 100%;
  background-size: 60%;
      display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}
  .calculator_wrapper.resultBox .banner.hra {    
    width: 100%;
    height: 220px;
  background: #f4f5f7;
  position: relative;
  }
.calculator_wrapper.resultBox .banner.hra::before {
  content: '';
  background: url(../../images/calculator/hra.png) no-repeat center bottom;
  width: 100%;
  height: 100%;
  background-size: cover;
  display: block;
}
.calculator_wrapper.resultBox .banner.hra::after{
  content: '';
  background: url(../../images/calculator/home.png) no-repeat center ;
  width: 100%;
  height: 100%;
  background-size: contain;
      display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}

.calculator_wrapper.resultBox .banner.hra.gratuity::after{
  content: '';
  background: url(../../images/calculator/gratuity.png) no-repeat center ;
  width: 100%;
  height: 100%;
  background-size: contain;
      display: block;
    position: absolute;
    top: 0;
    z-index: 1;
}

.calculator_wrapper.resultBox p.infotext{    font-size: 12px;
    text-align: justify;
    line-height: 16px;
    letter-spacing: 0;
    color: #7a869a;
    margin: 20px 0 0 0;
}
.calculator_wrapper.resultBox p.infotext a {
    color: #0065ff;    text-decoration: none;
}
.calculator_wrapper.resultBox .gstprice,.calculator_wrapper.resultBox  .maturityResult, .calculator_wrapper.resultBox .netprice,.calculator_wrapper.resultBox .hracharge {
    float: left;
    width: 48%;
    background: #fff;    position: relative;
    padding: 24px 6px 5px; border-radius: 4px;
}
.calculator_wrapper.resultBox  .maturityResult{width: 100%}

.calculator_wrapper.resultBox span{
  position: absolute;
    font-size: 11px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    top: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.calculator_wrapper.resultBox .netprice {float: right;}
.calculator_wrapper.resultBox .gstprice input,.calculator_wrapper.resultBox  .maturityResult input, .calculator_wrapper.resultBox .netprice input,.calculator_wrapper.resultBox .hracharge input {    width: 100%;
    font-size: 16px;
    padding: 6px;    text-align: center;

    border: none;}
.calculator_wrapper.resultBox .result {
    background: #f4f5f7;
    padding: 20px;
    
}
.calculator_title{
        font-size: 22px;
    font-weight: 300;
    color: #253858;
    position: relative;
    padding: 0px 0 10px;
}
.action:after{content:"";clear: both;display: table;}
.action p{  
    font-size: 14px;
    font-weight: 500;
    color: #253858;
    padding: 20px 0 5px;
    margin: 0px;
}
.calculator_title:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(37, 56, 88, 0.2);
    left: 0;
    bottom: 0;
}
.insurerGroup {
    position: relative;
    clear: both;
    margin: 10px 0 0 0;
    display: table;
    width: 100%;
}
.inputGroup {
    display: inline-block;
    width: 24%;
    border:none;
    border-radius: 5px;
    padding: 1px;
    position: relative;
    margin-right: 1.3%;
    text-transform: lowercase;
    float: left;
}
.finalSubmit .calculate.gratuitycalculate {
    width: 250px;
    display: inline-block;
    background: #0563f6;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    color: #FFF;
    border-radius: 5px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.5px;
}
.sliderBox{margin-bottom: 35px;}
.hra .sliderBox{margin-bottom: 8px;}
.sliderBox:after {
    content: "";
    display: table;
    clear: both;
}
.ui-widget-header{
      background: #0065ff;border-radius: 10px;
}
.ui-widget.ui-widget-content {
    border: none;border-radius: 10px;
    background: rgba(37, 56, 88, 0.2);    width: 70%;float: left;    top: 11px;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.45em;
    margin-left: -.6em;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #0463f6;
    background: #ffff;
    font-weight: normal;
    color: #454545;
}
.scrollAmt{
    float: right;
    width: 25%;position: relative;
}
.inputBox{
    width: 100%;
    padding: 10px ;
    border: 1px solid #d3d7dd;
    border-radius: 4px;    font-size: 17px;
}
.ui-slider-horizontal .ui-slider-handle{top:-0.7em;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   font-size: 13px;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 13px;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 13px;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 13px;
}


.scrollAmt .inputBox{padding:10px 10px 10px 25px;font-size: 17px;}
.scrollAmt:before{
    content: "₹";
    position: absolute;
    font-size: 20px;
    top: 9px;
    left: 10px;

}

select{    width: 100%;
    padding: 10px;
    border: 1px solid #d3d7dd;    font-size: 14px;
    border-radius: 4px;
    -webkit-appearance: none;background: #fff;position: relative;
}
select:after {
  content: "";
    left: 9px;
    top: 4px;
    width: 7px;
    height: 13px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.slabSelect,.rateofgst{width: 30%;    margin-right: 40px;}
.showError{    font-size: 12px;
    color: #df342f;
    padding: 10px 0;}
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;
}


/* Customize the label (the container) */
.selectionContainer {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.selectionContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 4px;
    bottom: 0;
    transform: translateY(-50%);
}

/* On mouse-over, add a grey background color */
.selectionContainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.selectionContainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.selectionContainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.selectionContainer .checkmark:after {
    left: 9px;
    top: 4px;
    width: 7px;
    height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.clear{display: table;clear: both}
.action .selectionContainer p{padding:4px 0 5px}
.step{
      position: relative;
    top: 10px;
}
 .step .range{
    position: absolute;
    width: 1px;
    background-color: #ccc;
}
 .step .range.last span{
       font-size: 12px;
    width: 59px;
    position: absolute;
    top: 18px;
    right: 0px;
    text-align: right;
}
 .step .range.first span{font-size: 12px;
    width: 35px;
    position: absolute;
    top: 18px;
    left: 0px;text-align: left;
  }
 .step .range.high{height: 15px;}
 .step .range.low{height: 10px;}
 .step .range.step0{left: 0%;}
  .step .range.step10{left: 10%;}
   .step .range.step20{left: 20%;}
    .step .range.step30{left: 30%;}
     .step .range.step40{left: 40%;}
      .step .range.step50{left: 50%;}
       .step .range.step60{left: 60%;}
        .step .range.step70{left: 70%;}
         .step .range.step80{left: 80%;}
          .step .range.step90{left: 90%;}
           .step .range.step100{left: 99.5%;}
.finalSubmit{margin-top: 30px;}
.finalSubmit .calculate{
    width: 200px;
    display: inline-block;
    background: #ccc;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
}
.finalSubmit .reset{
    width: 100px;
    display: inline-block;
    background: #ccc;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
}
.justify-content-end {
    -webkit-box-pack: end!important;
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}
.justify-content-center {
  -webkit-box-pack: center !important;
  -webkit-justify-content: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
}

/*======Content CSS============*/
.online_hra_calc {
  display: block;
    border: none;
    padding: 12px 0 6px 0;
    margin: 0;
    font-size: 24px;
    color: #005387;
    text-align: left;
    font-weight: 400;
    cursor: none;
    text-indent: 0;    cursor: auto;
}
.main-title {
  display: block;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 28px;
    color: #005387;
    text-align: left;
    font-weight: 400;
    cursor: none;
    text-indent: 0;
}
.hra_paragraph {
      text-align: justify;
    font-size: 14px;
    line-height: 25px;
    padding: 0px 0px 10px;
       color: #404b52;    list-style-position: inside;
}
h3.faqlist{margin:2px 0}
h3.faqlist{
      font-size: 16px;
    color: #185387;
    background: #f5f5f5cc;
    padding: 10px 40px 10px 10px;
    border-radius: 5px;position: relative;cursor: pointer;}
h3.faqlist.first{margin-top:30px;}    
h3.faqlist:after{
      content: "";
    position: absolute;
    width: 18px;
    height: 19px;
    right: 8px;
    background: url(../../images/calculator/up-down-arrow.png) no-repeat 0 -204px;
    top: 30%;

}
h3.faqlist.open:after{background: url(../../images/calculator/up-down-arrow.png) no-repeat 0 -164px;}
.faqAccWrap{max-height: 0em;max-height: 0;overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); padding:0px 10px;}
.faqAccWrap.open{display: block;max-height: 1000em;transition: max-height 1s ease-in-out;}
.table-wrap {
  overflow: auto;
}
.table-wrap table {
    border-collapse: collapse;
    width: 100%;
    margin: 15px 0px;
  border: 1px solid #ff0;
}
 .table-wrap table tr:first-child td {
    background: #f5f9fc;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
}
 .table-wrap table td{
   color: #404b52;
       line-height: 18px;
    border: 1px solid #ccc;
    padding: 7px;
    width: 25%;
    vertical-align: middle;
   text-align: center;
   font-size: 13px;
}
.hra_paragraph a, .hra_paragraph a strong {
    color: #0065ff;
    text-decoration: none;
}
.hra_wrapper {
  margin-bottom: 15px;
}

.save_up_to {
    background-color: #d9edf7;
    width: 100%;
    border: 1px solid #cfecf5;
    border-radius: 4px;
    margin-top: 15px;
    text-align: center;
    padding: 20px;
}
.save_up_to .save_tax_head {
    text-transform: uppercase;
    color: #5f798f;
    padding: 0px 0px 5px 0px;
    font-weight: 600;
  font-size: 17px;
}
.save_up_to p
{
    color: #317290;
    font-size: 14px;
    margin-bottom: 6px;
}
.save_up_to .save_tax_btn {
    background-color: #29cdff;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    display: block;
    margin: 15px 0px 0px 0px;
  
}

.error_box {
    font-size: 12px;
    padding-top: 20px;
    color: #ed4a46;
    padding: 10px 0;
}
@media (min-width: 576px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }

}

@media (min-width: 992px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 576px) {
  .container {
    width: 540px;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .container {
    width: 720px;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .container {
    width: 960px;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
    max-width: 100%;
  }
}

.container-fluid {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 15px;
  padding-left: 15px;

}

@media (min-width: 576px) {
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 992px) {
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 1200px) {
  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

@media (min-width: 576px) {
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}

@media (min-width: 768px) {
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}

@media (min-width: 992px) {
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}

@media (min-width: 1200px) {
  .row {
    margin-right: -15px;
    margin-left: -15px;
  }
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 576px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 992px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 15px;
    padding-left: 15px;
  }
}

@media (min-width: 1200px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
    padding-right: 15px;
    padding-left: 15px;
  }
}

.col {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px auto;
      -ms-flex: 2px 7px auto;
          flex: 2px 7px auto;
  width: auto;
}

.col-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 8.333333%;
      -ms-flex: 2px 7px 8.333333%;
          flex: 2px 7px 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 16.666667%;
      -ms-flex: 2px 7px 16.666667%;
          flex: 2px 7px 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 25%;
      -ms-flex: 2px 7px 25%;
          flex: 2px 7px 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 33.333333%;
      -ms-flex: 2px 7px 33.333333%;
          flex: 2px 7px 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 41.666667%;
      -ms-flex: 2px 7px 41.666667%;
          flex: 2px 7px 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 50%;
      -ms-flex: 2px 7px 50%;
          flex: 2px 7px 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 58.333333%;
      -ms-flex: 2px 7px 58.333333%;
          flex: 2px 7px 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 66.666667%;
      -ms-flex: 2px 7px 66.666667%;
          flex: 2px 7px 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 75%;
      -ms-flex: 2px 7px 75%;
          flex: 2px 7px 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 83.333333%;
      -ms-flex: 2px 7px 83.333333%;
          flex: 2px 7px 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 91.666667%;
      -ms-flex: 2px 7px 91.666667%;
          flex: 2px 7px 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 2px 7px 100%;
      -ms-flex: 2px 7px 100%;
          flex: 2px 7px 100%;
  max-width: 100%;
}

.pull-0 {
  right: auto;
}

.pull-1 {
  right: 8.333333%;
}

.pull-2 {
  right: 16.666667%;
}

.pull-3 {
  right: 25%;
}

.pull-4 {
  right: 33.333333%;
}

.pull-5 {
  right: 41.666667%;
}

.pull-6 {
  right: 50%;
}

.pull-7 {
  right: 58.333333%;
}

.pull-8 {
  right: 66.666667%;
}

.pull-9 {
  right: 75%;
}

.pull-10 {
  right: 83.333333%;
}

.pull-11 {
  right: 91.666667%;
}

.pull-12 {
  right: 100%;
}

.push-0 {
  left: auto;
}

.push-1 {
  left: 8.333333%;
}

.push-2 {
  left: 16.666667%;
}

.push-3 {
  left: 25%;
}

.push-4 {
  left: 33.333333%;
}

.push-5 {
  left: 41.666667%;
}

.push-6 {
  left: 50%;
}

.push-7 {
  left: 58.333333%;
}

.push-8 {
  left: 66.666667%;
}

.push-9 {
  left: 75%;
}

.push-10 {
  left: 83.333333%;
}

.push-11 {
  left: 91.666667%;
}

.push-12 {
  left: 100%;
}

.offset-1 {
  margin-left: 8.333333%;
}

.offset-2 {
  margin-left: 16.666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.333333%;
}

.offset-5 {
  margin-left: 41.666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.333333%;
}

.offset-8 {
  margin-left: 66.666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.333333%;
}

.offset-11 {
  margin-left: 91.666667%;
}

@media (min-width: 576px) {
  .col-sm {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px auto;
        -ms-flex: 2px 7px auto;
            flex: 2px 7px auto;
    width: auto;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 8.333333%;
        -ms-flex: 2px 7px 8.333333%;
            flex: 2px 7px 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 16.666667%;
        -ms-flex: 2px 7px 16.666667%;
            flex: 2px 7px 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 25%;
        -ms-flex: 2px 7px 25%;
            flex: 2px 7px 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 33.333333%;
        -ms-flex: 2px 7px 33.333333%;
            flex: 2px 7px 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 41.666667%;
        -ms-flex: 2px 7px 41.666667%;
            flex: 2px 7px 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 50%;
        -ms-flex: 2px 7px 50%;
            flex: 2px 7px 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 58.333333%;
        -ms-flex: 2px 7px 58.333333%;
            flex: 2px 7px 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 66.666667%;
        -ms-flex: 2px 7px 66.666667%;
            flex: 2px 7px 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 75%;
        -ms-flex: 2px 7px 75%;
            flex: 2px 7px 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 83.333333%;
        -ms-flex: 2px 7px 83.333333%;
            flex: 2px 7px 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 91.666667%;
        -ms-flex: 2px 7px 91.666667%;
            flex: 2px 7px 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 100%;
        -ms-flex: 2px 7px 100%;
            flex: 2px 7px 100%;
    max-width: 100%;
  }
  .pull-sm-0 {
    right: auto;
  }
  .pull-sm-1 {
    right: 8.333333%;
  }
  .pull-sm-2 {
    right: 16.666667%;
  }
  .pull-sm-3 {
    right: 25%;
  }
  .pull-sm-4 {
    right: 33.333333%;
  }
  .pull-sm-5 {
    right: 41.666667%;
  }
  .pull-sm-6 {
    right: 50%;
  }
  .pull-sm-7 {
    right: 58.333333%;
  }
  .pull-sm-8 {
    right: 66.666667%;
  }
  .pull-sm-9 {
    right: 75%;
  }
  .pull-sm-10 {
    right: 83.333333%;
  }
  .pull-sm-11 {
    right: 91.666667%;
  }
  .pull-sm-12 {
    right: 100%;
  }
  .push-sm-0 {
    left: auto;
  }
  .push-sm-1 {
    left: 8.333333%;
  }
  .push-sm-2 {
    left: 16.666667%;
  }
  .push-sm-3 {
    left: 25%;
  }
  .push-sm-4 {
    left: 33.333333%;
  }
  .push-sm-5 {
    left: 41.666667%;
  }
  .push-sm-6 {
    left: 50%;
  }
  .push-sm-7 {
    left: 58.333333%;
  }
  .push-sm-8 {
    left: 66.666667%;
  }
  .push-sm-9 {
    left: 75%;
  }
  .push-sm-10 {
    left: 83.333333%;
  }
  .push-sm-11 {
    left: 91.666667%;
  }
  .push-sm-12 {
    left: 100%;
  }
  .offset-sm-0 {
    margin-left: 0%;
  }
  .offset-sm-1 {
    margin-left: 8.333333%;
  }
  .offset-sm-2 {
    margin-left: 16.666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.333333%;
  }
  .offset-sm-5 {
    margin-left: 41.666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.333333%;
  }
  .offset-sm-8 {
    margin-left: 66.666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.333333%;
  }
  .offset-sm-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px auto;
        -ms-flex: 2px 7px auto;
            flex: 2px 7px auto;
    width: auto;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 8.333333%;
        -ms-flex: 2px 7px 8.333333%;
            flex: 2px 7px 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 16.666667%;
        -ms-flex: 2px 7px 16.666667%;
            flex: 2px 7px 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 25%;
        -ms-flex: 2px 7px 25%;
            flex: 2px 7px 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 33.333333%;
        -ms-flex: 2px 7px 33.333333%;
            flex: 2px 7px 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 41.666667%;
        -ms-flex: 2px 7px 41.666667%;
            flex: 2px 7px 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 50%;
        -ms-flex: 2px 7px 50%;
            flex: 2px 7px 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 58.333333%;
        -ms-flex: 2px 7px 58.333333%;
            flex: 2px 7px 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 66.666667%;
        -ms-flex: 2px 7px 66.666667%;
            flex: 2px 7px 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 75%;
        -ms-flex: 2px 7px 75%;
            flex: 2px 7px 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 83.333333%;
        -ms-flex: 2px 7px 83.333333%;
            flex: 2px 7px 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 91.666667%;
        -ms-flex: 2px 7px 91.666667%;
            flex: 2px 7px 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 100%;
        -ms-flex: 2px 7px 100%;
            flex: 2px 7px 100%;
    max-width: 100%;
  }
  .pull-md-0 {
    right: auto;
  }
  .pull-md-1 {
    right: 8.333333%;
  }
  .pull-md-2 {
    right: 16.666667%;
  }
  .pull-md-3 {
    right: 25%;
  }
  .pull-md-4 {
    right: 33.333333%;
  }
  .pull-md-5 {
    right: 41.666667%;
  }
  .pull-md-6 {
    right: 50%;
  }
  .pull-md-7 {
    right: 58.333333%;
  }
  .pull-md-8 {
    right: 66.666667%;
  }
  .pull-md-9 {
    right: 75%;
  }
  .pull-md-10 {
    right: 83.333333%;
  }
  .pull-md-11 {
    right: 91.666667%;

  }
  .pull-md-12 {
    right: 100%;
  }
  .push-md-0 {
    left: auto;
  }
  .push-md-1 {
    left: 8.333333%;
  }
  .push-md-2 {
    left: 16.666667%;
  }
  .push-md-3 {
    left: 25%;
  }
  .push-md-4 {
    left: 33.333333%;
  }
  .push-md-5 {
    left: 41.666667%;
  }
  .push-md-6 {
    left: 50%;
  }
  .push-md-7 {
    left: 58.333333%;
  }
  .push-md-8 {
    left: 66.666667%;
  }
  .push-md-9 {
    left: 75%;
  }
  .push-md-10 {
    left: 83.333333%;
  }
  .push-md-11 {
    left: 91.666667%;
  }
  .push-md-12 {
    left: 100%;
  }
  .offset-md-0 {
    margin-left: 0%;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px auto;
        -ms-flex: 2px 7px auto;
            flex: 2px 7px auto;
    width: auto;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 8.333333%;
        -ms-flex: 2px 7px 8.333333%;
            flex: 2px 7px 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 16.666667%;
        -ms-flex: 2px 7px 16.666667%;
            flex: 2px 7px 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 25%;
        -ms-flex: 2px 7px 25%;
            flex: 2px 7px 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 33.333333%;
        -ms-flex: 2px 7px 33.333333%;
            flex: 2px 7px 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 41.666667%;
        -ms-flex: 2px 7px 41.666667%;
            flex: 2px 7px 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 50%;
        -ms-flex: 2px 7px 50%;
            flex: 2px 7px 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 58.333333%;
        -ms-flex: 2px 7px 58.333333%;
            flex: 2px 7px 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 66.666667%;
        -ms-flex: 2px 7px 66.666667%;
            flex: 2px 7px 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 75%;
        -ms-flex: 2px 7px 75%;
            flex: 2px 7px 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 83.333333%;
        -ms-flex: 2px 7px 83.333333%;
            flex: 2px 7px 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 91.666667%;
        -ms-flex: 2px 7px 91.666667%;
            flex: 2px 7px 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 100%;
        -ms-flex: 2px 7px 100%;
            flex: 2px 7px 100%;
    max-width: 100%;
  }
  .pull-lg-0 {
    right: auto;
  }
  .pull-lg-1 {
    right: 8.333333%;
  }
  .pull-lg-2 {
    right: 16.666667%;
  }
  .pull-lg-3 {
    right: 25%;
  }
  .pull-lg-4 {
    right: 33.333333%;
  }
  .pull-lg-5 {
    right: 41.666667%;
  }
  .pull-lg-6 {
    right: 50%;
  }
  .pull-lg-7 {
    right: 58.333333%;
  }
  .pull-lg-8 {
    right: 66.666667%;
  }
  .pull-lg-9 {
    right: 75%;
  }
  .pull-lg-10 {
    right: 83.333333%;
  }
  .pull-lg-11 {
    right: 91.666667%;
  }
  .pull-lg-12 {
    right: 100%;
  }
  .push-lg-0 {
    left: auto;
  }
  .push-lg-1 {
    left: 8.333333%;
  }
  .push-lg-2 {
    left: 16.666667%;
  }
  .push-lg-3 {
    left: 25%;
  }
  .push-lg-4 {
    left: 33.333333%;
  }
  .push-lg-5 {
    left: 41.666667%;
  }
  .push-lg-6 {
    left: 50%;
  }
  .push-lg-7 {
    left: 58.333333%;
  }
  .push-lg-8 {
    left: 66.666667%;
  }
  .push-lg-9 {
    left: 75%;
  }
  .push-lg-10 {
    left: 83.333333%;
  }
  .push-lg-11 {
    left: 91.666667%;
  }
  .push-lg-12 {
    left: 100%;
  }
  .offset-lg-0 {
    margin-left: 0%;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px auto;
        -ms-flex: 2px 7px auto;
            flex: 2px 7px auto;
    width: auto;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 8.333333%;
        -ms-flex: 2px 7px 8.333333%;
            flex: 2px 7px 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 16.666667%;
        -ms-flex: 2px 7px 16.666667%;
            flex: 2px 7px 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 25%;
        -ms-flex: 2px 7px 25%;
            flex: 2px 7px 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 33.333333%;
        -ms-flex: 2px 7px 33.333333%;
            flex: 2px 7px 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 41.666667%;
        -ms-flex: 2px 7px 41.666667%;
            flex: 2px 7px 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 50%;
        -ms-flex: 2px 7px 50%;
            flex: 2px 7px 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 58.333333%;
        -ms-flex: 2px 7px 58.333333%;
            flex: 2px 7px 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 66.666667%;
        -ms-flex: 2px 7px 66.666667%;
            flex: 2px 7px 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 75%;
        -ms-flex: 2px 7px 75%;
            flex: 2px 7px 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 83.333333%;
        -ms-flex: 2px 7px 83.333333%;
            flex: 2px 7px 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 91.666667%;
        -ms-flex: 2px 7px 91.666667%;
            flex: 2px 7px 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 2px 7px 100%;
        -ms-flex: 2px 7px 100%;
            flex: 2px 7px 100%;
    max-width: 100%;
  }
  .pull-xl-0 {
    right: auto;
  }
  .pull-xl-1 {
    right: 8.333333%;
  }
  .pull-xl-2 {
    right: 16.666667%;
  }
  .pull-xl-3 {
    right: 25%;
  }
  .pull-xl-4 {
    right: 33.333333%;
  }
  .pull-xl-5 {
    right: 41.666667%;
  }
  .pull-xl-6 {
    right: 50%;
  }
  .pull-xl-7 {
    right: 58.333333%;
  }
  .pull-xl-8 {
    right: 66.666667%;
  }
  .pull-xl-9 {
    right: 75%;
  }
  .pull-xl-10 {
    right: 83.333333%;
  }
  .pull-xl-11 {
    right: 91.666667%;
  }
  .pull-xl-12 {
    right: 100%;
  }
  .push-xl-0 {
    left: auto;
  }
  .push-xl-1 {
    left: 8.333333%;
  }
  .push-xl-2 {
    left: 16.666667%;
  }
  .push-xl-3 {
    left: 25%;
  }
  .push-xl-4 {
    left: 33.333333%;
  }
  .push-xl-5 {
    left: 41.666667%;
  }
  .push-xl-6 {
    left: 50%;
  }
  .push-xl-7 {
    left: 58.333333%;
  }
  .push-xl-8 {
    left: 66.666667%;
  }
  .push-xl-9 {
    left: 75%;
  }
  .push-xl-10 {
    left: 83.333333%;
  }
  .push-xl-11 {
    left: 91.666667%;
  }
  .push-xl-12 {
    left: 100%;
  }
  .offset-xl-0 {
    margin-left: 0%;
  }
  .offset-xl-1 {
    margin-left: 8.333333%;
  }
  .offset-xl-2 {
    margin-left: 16.666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.333333%;
  }
  .offset-xl-5 {
    margin-left: 41.666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.333333%;
  }
  .offset-xl-8 {
    margin-left: 66.666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.333333%;
  }
  .offset-xl-11 {
    margin-left: 91.666667%;
  }
}
/*=====Responsive CSS======*/
@media (max-width: 980px) {
    .main-title {
    font-size: 20px;
  }
  .online_hra_calc {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 980px) { 
    .calculator_wrapper.resultBox .banner.gst::after {
        background-size: 77%;
  }
}
@media (max-width: 1024px) {
.calculator_wrapper.resultBox .gstprice, .calculator_wrapper.resultBox .netprice, .calculator_wrapper.resultBox .hracharge{
        width: 100%;    margin-bottom: 10px;
  }
  .scrollAmt .inputBox {
    padding: 10px 10px 10px 25px;
    font-size: 15px;
}
.slabSelect, .rateofgst {
    width: 50%;
    }
#policybazaar{width: 100% !important;}
}
@media (max-width: 768px) {
  .calculator_wrapper {
    margin-bottom: 15px;
  }
  .scrollAmt, .ui-widget.ui-widget-content {
    float: none;
  }
  .scrollAmt {
    margin-top: 60px;
    width: 100%;
    max-width: 170px;
  }
  .ui-widget.ui-widget-content {
    width: 100%;
  }
  .scrollAmt:before {
    font-size:  17px;
  }
  .scrollAmt .inputBox {
    font-size: 14px;
  }

  .save_up_to{
      max-width: 320px;
  }
 

}
@media (max-width: 767px) {
  .hra_wrapper .row, .gst_wrapper .row {
  margin: 0px;
}
.hra_wrapper .row .col-md-8, .hra_wrapper .row .col-md-4, .gst_wrapper .row .col-md-8, .gst_wrapper .row .col-md-4 {
  padding: 0px !important;
}
 .calculator_wrapper.resultBox .gstprice, .calculator_wrapper.resultBox .netprice, .calculator_wrapper.resultBox .hracharge{
        width: 210px;    margin-bottom: 0px;
  }

  
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
.calculator_wrapper.resultBox .banner.gst::after {
        background-size: 40%;
  }
  .slabSelect {
    width: 40%;
  }
}
@media only screen and (max-width: 768px) {
  .insurerGroup.gratuity .inputGroup{width: 210px}
    .scrollAmt {
    margin-top: 60px;
    width: 100%;
    max-width: 210px;
}
 .gratuity .scrollAmt,.gratuity .scrollAmt .inputBox {width: 210px;}
}
@media (max-width: 480px) { 
  .slabSelect{
      width: 46%;
}
  .save_up_to {
    width: 100%;
    max-width: 100%;
  }
  h3.faqlist{font-size: 14px; line-height: 22px;}
}
@media (max-width: 480px) { 
  .slabSelect{
      width: 60%;
}
}
@media only screen and (max-width: 480px) {
  .insurerGroup.gratuity .inputGroup {
    width:210px;
}

}
@media (max-width: 360px){
  .calculator_wrapper.resultBox span{font-size:14px;}
}