/*


SPECIFCATION

1. HTML,BODY,PRELOAD,HEXAGON,HEADING
2. PADDING
3. MARGIN
4. BORDER
5. FORM ELEMENTS
6. INPUT GROUP ADDON

*/

/*===1.HTML,BODY,PRELOAD,HEXAGON=====*/
html{
  font-size: 62.5%;
  height: 100%;
}


h1,h2,h3,h4,h5,h6,p,span,a,li {
  font-family: @font-name;
}

.width20px{
  width: 20px !important;
}
.width4per{
  width: 4% !important;
}
.width10per{
  width: 10% !important;
}
.width13per{
  width: 13% !important;
}
.width15per{
  width: 15% !important;
}
.width22per{
  width: 22% !important;
}
.width18per{
  width: 18% !important;
}
.width85per{
  width: 85% !important;
}
.width75per{
  width: 75% !important;
}
.width42per{
  width: 42% !important;
}
.width50per{
  width: 50% !important;
}
.width60per{
  width: 60% !important;
}
.width90per{
  width: 90% !important;
}
.width95per{
  width: 95% !important;
}
.width100per{
  width: 100% !important;
}
.pl0{
  padding-left: 0px !important;
}
.pl2{
  padding-left: 2px !important;
}
.pr0{
  padding-right: 0px !important;
}
.plr14px{
  padding-left: 14px !important;
  padding-right: 14px !important;
}
.pl5{
  padding-left: 5px !important;
}
.pr5{
  padding-right: 5px !important;
}
.pr15{
  padding-right: 15px !important;
}
.pt7{
  padding-top: 7px !important;
}
.pt5{
  padding-top: 5px !important;
}
.pt10{
  padding-top: 10px !important;
}
.pt15{
  padding-top: 15px !important;
}
.pb10{
  padding-bottom: 10px !important;
}
.pb17{
  padding-bottom: 17px !important;
}
.pb35{
  padding-bottom: 35px !important;
}
.pb60{
  padding-bottom: 60px !important;
}
.pr50{
  padding-right: 50px;
}
.pt35{
  padding-top: 35px !important;
}
.mt30 {
  margin-top: 30px !important;
}
.mt42 {
  margin-top: 42px !important;
}
.mr0{
  margin-right: 0px !important;
}
.mr50px{
  margin-right: 50px !important;
}
.mt-5{
  margin-top: 5px;
}
.mt-6{
  margin-top: 6px !important;
}
.ml0{
  margin-left: 0px !important;
}
.mt0{
  margin-top: 0px !important;
}
.mb0{
  margin-bottom: 0px !important;
}

.mt10{
  margin-top: 10px !important;
}
.mt20{
  margin-top: 20px !important;
}
.mb-77{
  margin-bottom: 77px;
}

.mb10 {
  margin-bottom: 10px;
}

.bor-0 {
  border:0px !important;
}
.bor-none{
  border:none !important;
}
/*==== COMMON Class====*/
a, a:focus, a:hover {
  text-decoration: none;
}
ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.w-25 {
  width: 25%;
}
.w-40{
  width: 40%;
}
.w-50{
  width: 50%;
}
.w-55{
  width: 55%;
}
.w-57{
  width: 57%;
}
.w-60{
  width: 60%;
}
.w-70 {
  width: 70%;
}
.w-80 {
  width: 80%;
}
.wFull {
  width: 100%;
}
/*==== padding Class====*/
.nopadding {
  padding: 0px !important;
}
.pt0{
  padding-top: 0px !important;
}
.padfull-8{
  padding: 8px !important;
}
.pad-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.padL-0 {
  padding-left: 0 !important;
}
.padR-0 {
  padding-right: 0 !important;
}
.padTB {
  padding: 15px 0;
}
.pad-10 {
  padding-right: 10px !important;
  padding-left: 10px !important;
}
.ptb5 {
  padding-top: 5px ;
  padding-bottom: 5px;
}
.ptb10 {
  padding-top: 10px ;
  padding-bottom: 10px;
}
.ptb14 {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.pad-15 {
  padding-right: 15px !important;
  padding-left: 15px !important;
}
.pt20{
  padding-top: 20px !important;
} 
.pad-25 {
  padding-right: 25px !important;
  padding-left: 25px !important;
}
.ptb-15 {
  padding-top: 5px !important;
  padding-bottom: 10px !important;
}
//.ptb-15 {
//  padding-top: 15px !important;
//  padding-bottom: 15px !important;
//}
.padlr-15 {
  padding: 7px 15px !important;
}

.padtb-19 {
  padding-top: 19px;
  padding-bottom: 19px;
}

.ptb-20{
  padding: 20px 0px !important;
}
.pt-16{
  padding-top: 16px !important;
}
.pb-25 {
  padding-bottom: 25px !important;
}
.pb-15 {
  padding-bottom: 15px !important;
}
/*====MARGIN====*/
.nomargin {
  margin: 0 !important;
}
.mb-5 {
  margin-bottom: 5px;
}
.mb-9 {
  margin-bottom: 9px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt15px{
  margin-top: 15px !important;
}
.mtb-15 {
  margin: 15px 0;
}
.mt-15{
  margin-top: 15px !important; ;
  margin: auto;
}
.mt-4{
  margin-top: 4px !important;
}
.mt-7{
  margin-top: 7px;
}
.mt-11{
  margin-top: 11px;
}
.mt-12{
  margin-top: 12px;
}
.mt-23{
  margin-top: 23px;
}
.mtb-25 {
  margin: 25px 0;
}
.mlr-15{
  margin: auto 15px !important;
}
.mlr15neg{
  margin-left: -15px !important;
  margin-right: -15px !important;
}
.mlr-5 {
  margin: 0 5px !Important;
}

.ml-2 {
  margin-left:2px !important
}

.mlminus-2 {
  margin-left:-2px !important
}

.ml-5 {
  margin-left:5px !important
}


.ml-15 {
  margin-left:15px
}
.mtb-0{
  margin: 0 auto !important;
}
.mb-15{
  margin-bottom: 15px !important;
}
.mtb-25 {
  margin: 25px 0;
}
.mtb-15 {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.mb-20{
  margin-bottom: 20px;
}
.m-15 {
  margin-left: -15px;
  margin-right: -15px;
}
.mr-6 {
  margin-right: 6px;
}
.ml-8{
  margin-left: 8px !important;
}
/*====BORDER====*/
.bor-0 {
  border:0px !important;
}
.bor-btm {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px !important;
  margin-bottom: 10px !important;
}
.tab-cell {
  display: table;
  width: 100%;
}
.tab-cell > li{
  display: table-cell;
  vertical-align: middle;
}
.table-fluid > li {
  width: 50%;
}
.li-50 > li {
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}
.brad-0 {
  border-radius: 0px !important;
}
/*===DISPLAY===*/
.rel {
  position: relative;
}
.t4px{
  top: 4px !important;
}
.t5px{
  top: 5px !important;
}
.t-6{
  top: 6px !important;
}
.t-15{
  top: 15px !important;
}
.r-5 {
  position: absolute;
  right: 5px;
  bottom: 5px;
}
.r10px{
  right: 10px !important;
}
.in {
  display: inline-block;
}
.block{
  display: block;
}
.bg-trans {
  background: transparent !important;
}
hr {
  margin-top: 15px;
  margin-bottom: 25px;
  border: 0;
  border-top: 1px solid #CCC;
}

/*1.1 ends*/
.border-left-nav{
  border-left: 1px solid #9F61C9;
}

.arrow_box {
  position: relative;

}
.arrow_box:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #88b7d5;
  border-width: 30px;
  margin-left: -30px;
}


.btn-property{
  border-radius: 4px;
  border-color: transparent;
  color: white;
  font-size: 12px;
  font-weight: 500;
  //text-transform: uppercase;
  padding: 2px 5px !important;
  height: 24px !important;
  min-width: 65px;
  i{
    font-size: 1.1rem !important;
  }
}



.accent-btn{
  background-image: none !important;
  background-color: @accent-btn-bg;
}
.accent-btn:hover,
.accent-btn:focus{
  background-color : @accent-btn-bg;
  background-image: none !important;
  border-color: transparent;
}

.danger-btn{
  background-image: none !important;
  background-color: @warning;
}
.danger-btn:hover,
.danger-btn:focus{
  background-color : @warning;
  background-image: none !important;
  border-color: transparent;
}



.green-btn{
  background-image: none !important;
  background-color: @success-500;
  color: @white;
}
.green-btn:hover,
.green-btn:focus{
  background-color : @success-500;
  background-image: none !important;
  border-color: transparent;
  color: @white
}

.clear-btn{
  background-image: none !important;
  background-color: rgba(250,250,250,0.12);
  border: 1px solid rgba(0,0,0,0.12) !important;
  color:black;
}

.clear-btn:hover,
.clear-btn:focus{
  background-color: rgba(250,250,250,0.12);
  background-image: none !important;
  border-color: transparent;
}
.grey-cancel-btn{
  background-image: none !important;
  background-color: rgba(250,250,250,1);
  color:black;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
.grey-cancel-btn:hover,
.grey-cancel-btn:focus{
  background-color: rgba(250,250,250,0.12);
  background-image: none !important;
  color:black;
  border-color: transparent;
}
.cancel-btn{
  background-image: none !important;
  background-color: rgba(250,250,250,0.12);
  color:black;
  border: 1px solid rgba(0,0,0,0.12) !important;
}
.cancel-btn:hover,
.cancel-btn:focus{
  background-color: rgba(250,250,250,0.12);
  background-image: none !important;
  color:black;
  border-color: transparent;
}
.browse-btn{
  background-image: none !important;
  background-color: #ba68c8;
  color:white;
  border: 1px solid #ba68c8 !important;
}
.browse-btn:hover,
.browse-btn:focus{
  background-color: #ba68c8;
  background-image: none !important;
  border-color: transparent;
}
pagination-dr {
  .pagination > li > a {
    color: @accent-btn-bg;
  }
  .pagination > .active > a,
  .pagination > .active > span,
  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus{
    color: #fff;
    cursor: default;
    background-color: @accent-btn-bg;
    border-color: @accent-btn-bg;
  }
}



.w500px{
  width: 500px;
  max-width: 500px;
  min-width: 500px;
}
.w300px{
  width: 300px;
  max-width: 300px;
  min-width: 300px;
}
.w277px{
  width: 275px;
  max-width: 275px;
  min-width: 275px;
}
.w250px{
  width: 250px;
  max-width: 250px;
  min-width: 250px;
}

.w200px{
  width: 200px;
  max-width: 200px;
  min-width: 200px;
}
.w175px{
  width: 175px;
  max-width: 175px;
  min-width: 175px;
}
.w160px{
  width: 160px;
  max-width: 160px;
  min-width: 160px;
}
.w150px{
  width: 150px;
  max-width: 150px;
  min-width: 150px;
}
.w125px{
  width: 125px;
  max-width: 125px;
  min-width: 125px;
}
.w120px{
  width: 120px;
  max-width: 120px;
  min-width: 120px;
}
.w100px{
  width: 100px;
  max-width: 100px;
  min-width: 100px;
}
.w75px{
  width: 75px;
  max-width: 75px;
  min-width: 75px;
}
.w60px{
  width: 60px;
  max-width: 60px;
  min-width: 60px;
}
.w50px{
  width: 50px;
  max-width: 50px;
  min-width: 50px;
}
.w25px{
  width: 25px;
  max-width: 25px;
  min-width: 25px;
}

.inl_sno{
  width: 15px;
  min-width: 15px;
  max-width: 15px;
}
.inl_xxs{
  width: 30px;
  min-width: 30px;
  max-width: 30px;
}
.inl_xs{
  width: 40px;
  min-width: 40px;
  max-width: 40px;
}
.inl_s{
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}
.inl_sm{
  width: 65px;
  min-width: 65px;
  max-width: 65px;
}
.inl_mp{
  width: 85px;
  min-width: 85px;
  max-width: 85px;
}
.inl_m{
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}
.inl_mm{
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}
.inl_ms{
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

.inl_mpp{
  width: 125px;
  min-width: 125px;
  max-width: 125px;
}
.inl_l{
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

.inl_lp{
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

.inl_xl{
  width: 250px;
  min-width: 250px;
  max-width: 250px;
}

.inl_xlm{
  width: 350px;
  min-width: 350px;
  max-width: 350px;
}


.inl_xxl{
  width: 550px;
  min-width: 550px;
  max-width: 550px;
}