@import "../variables";

@size0 : 0;
@size1 : 4px;
@size2 : 8px;
@size3 : 12px;
@size4 : 24px;
@size5 : 48px;

//ENGINE
.m0{  margin:@size0;  }
.m1{  margin:@size1;  }
.m2 { margin:@size2;  }
.m3 { margin:@size3 }
.m4 { margin:@size4; }
.m5 { margin:@size5; }

.mt0{  margin-top:@size0; }
.mt1{  margin-top:@size1; }
.mt2 { margin-top:@size2; }
.mt3 { margin-top:@size3; }
.mt4 { margin-top:@size4; }
.mt5 { margin-top:@size5; }

.mr0{  margin-right:@size0;  }
.mr1{  margin-right:@size1;  }
.mr2 { margin-right:@size2;  }
.mr3 { margin-right:@size3; }
.mr4 { margin-right:@size4; }
.mr5 { margin-right:@size5; }

.mb0{  margin-bottom:@size0;  }
.mb1{  margin-bottom:@size1;  }
.mb2 { margin-bottom:@size2;  }
.mb3 { margin-bottom:@size3; }
.mb4 { margin-bottom:@size4; }
.mb5 { margin-bottom:@size5; }

.ml0{  margin-left:@size1;  }
.ml1{  margin-left:@size1;  }
.ml2 { margin-left:@size2;  }
.ml3 { margin-left:@size3; }
.ml4 { margin-left:@size4; }
.ml5 { margin-left:@size5; }

.mh0{  margin-left:@size0; margin-right:@size0;  }
.mh1{  margin-left:@size1; margin-right:@size1;  }
.mh2 { margin-left:@size2; margin-right:@size2;  }
.mh3 { margin-left:@size3; margin-right:@size3; }
.mh4 { margin-left:@size4; margin-right:@size4; }
.mh5 { margin-left:@size5; margin-right:@size5; }

.mv0{  margin-top:@size0; margin-bottom:@size0;  }
.mv1{  margin-top:@size1; margin-bottom:@size1;  }
.mv2 { margin-top:@size2; margin-bottom:@size2;  }
.mv3 { margin-top:@size3; margin-bottom:@size3; }
.mv4 { margin-top:@size4; margin-bottom:@size4; }
.mv5 { margin-top:@size5; margin-bottom:@size5; }

.mt-1{  margin-top:-@size1; }
.mt-2 { margin-top:-@size2; }
.mt-3 { margin-top:-@size3; }
.mt-4 { margin-top:-@size4; }
.mt-5 { margin-top:-@size5; }

.mr-1{  margin-right:-@size1;  }
.mr-2 { margin-right:-@size2;  }
.mr-3 { margin-right:-@size3; }
.mr-4 { margin-right:-@size4; }
.mr-5 { margin-right:-@size5; }

.mb-1{  margin-bottom:-@size1;  }
.mb-2 { margin-bottom:-@size2;  }
.mb-3 { margin-bottom:-@size3; }
.mb-4 { margin-bottom:-@size4; }
.mb-5 { margin-bottom:-@size5; }

.ml-1{  margin-left:-@size1;  }
.ml-2 { margin-left:-@size2;  }
.ml-3 { margin-left:-@size3; }
.ml-4 { margin-left:-@size4; }
.ml-5 { margin-left:-@size5; }

.p0{  padding:@size0; }
.p1{  padding:@size1; }
.p2 { padding:@size2; }
.p3 { padding:@size3; }
.p4 { padding:@size4; }
.p5 { padding:@size5; }

.pt0{  padding-top:@size0;  }
.pt1{  padding-top:@size1;  }
.pt2 { padding-top:@size2;  }
.pt3 { padding-top:@size3; }
.pt4 { padding-top:@size4; }
.pt5 { padding-top:@size5; }

.pr0{  padding-right:@size0;  }
.pr1{  padding-right:@size1;  }
.pr2 { padding-right:@size2;  }
.pr3 { padding-right:@size3; }
.pr4 { padding-right:@size4; }
.pr5 { padding-right:@size5; }

.pb0{  padding-bottom:@size0;  }
.pb1{  padding-bottom:@size1;  }
.pb2 { padding-bottom:@size2;  }
.pb3 { padding-bottom:@size3; }
.pb4 { padding-bottom:@size4; }
.pb5 { padding-bottom:@size5; }

.pl0{  padding-left:@size0;  }
.pl1{  padding-left:@size1;  }
.pl2 { padding-left:@size2;  }
.pl3 { padding-left:@size3; }
.pl4 { padding-left:@size4; }
.pl5 { padding-left:@size5; }

.ph0{  padding-left:@size0; padding-right:@size0; }
.ph1{  padding-left:@size1; padding-right:@size1; }
.ph2 { padding-left:@size2; padding-right:@size2; }
.ph3 { padding-left:@size3; padding-right:@size3;}
.ph4 { padding-left:@size4; padding-right:@size4;}
.ph5 { padding-left:@size5; padding-right:@size5;}

.pv0{  padding-top:@size0; padding-bottom:@size0; }
.pv1{  padding-top:@size1; padding-bottom:@size1; }
.pv2 { padding-top:@size2; padding-bottom:@size2; }
.pv3 { padding-top:@size3; padding-bottom:@size3;}
.pv4 { padding-top:@size4; padding-bottom:@size4;}
.pv5 { padding-top:@size5; padding-bottom:@size5;}

.fs1{ font-size:10px; }
.fs2{ font-size:12px; }
.fs3{ font-size:18px; }
.fs4{ font-size:24px; }
.fs5{ font-size:32px; }

.w100{ width:100%; }
.w90 { width:90%; }
.w80 { width:80%; }
.w70 { width:60%; }
.w60 { width:60%; }
.w50 { width:50%; }
.w40 { width:40%; }
.w30 { width:30%; }
.w20 { width:20%; }
.w10 { width:10%; }

.minw100{ min-width:100%; }
.minw90 { min-width:90%; }
.minw80 { min-width:80%; }
.minw70 { min-width:60%; }
.minw60 { min-width:60%; }
.minw50 { min-width:50%; }
.minw40 { min-width:40%; }
.minw30 { min-width:30%; }
.minw20 { min-width:20%; }
.minw10 { min-width:10%; }

.maxw100{ max-width:100%; }
.maxw90 { max-width:90%; }
.maxw80 { max-width:80%; }
.maxw70 { max-width:60%; }
.maxw60 { max-width:60%; }
.maxw50 { max-width:50%; }
.maxw40 { max-width:40%; }
.maxw30 { max-width:30%; }
.maxw20 { max-width:20%; }
.maxw10 { max-width:10%; }

.maxw600 { max-width: 600px; }

.hidden      { display:none; }
.text-decoration-none { text-decoration:none ; }
.strike-trough { text-decoration: line-through; }
.underline   { text-decoration:underline; }
.uppercase   {  text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.center      { margin-left:auto; margin-right:auto; }
.text-center { text-align:center;   }
.text-left   { text-align:left;     }
.text-right  { text-align:right;    }

.red   { color:@red; }
.green { color:@green; }
.white { color :white; }
.blue { color:blue; }
.lighter-gray { color: @lighter-gray }
.gray { color: @gray }
.gold { color: @gold }

.bg-white{ background-color: white; }
.bg-danger{ background-color: @red; }
.bg-success{ background-color: @green; }
.bg-gray { background-color:@gray; }
.bg-light-gray { background-color:@light-gray; }
.bg-lighter-gray { background-color:@lighter-gray; }
.bg-broken-white { background-color:@broken-white; }

.bold{  font-weight: bold; }
.thin { font-weight: 100; }
.hidden { display:none; }
.pointer { cursor: pointer; }
.clear-both { clear:both; }
.circle { border-radius: 50%; }

.shadow0{
  box-shadow: 0 0 0 #000000;
}
.shadow-hard{
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.shadow-outer-1{
  box-shadow: 0 1px 0 1px rgba(89,105,128,.1), 0 1px 3px 0 rgba(89,105,128,.1), 0 1px 2px 0 rgba(0,0,0,.05);
}
.shadow-outer-2{
  box-shadow: 0 1px 0 1px rgba(89,105,128,.1), 0 3px 20px 0 rgba(89,105,128,.3), 0 1px 2px 0 rgba(0,0,0,.05);
}
.shadow-outer-3{
  box-shadow: 0 1px 3px 0 rgba(89,105,128,.05), 0 1px 1px 0 rgba(0,0,0,.025);
}

.shadow-inner-1{
  box-shadow: inset 0 0 0 1px rgba(89,105,128,.1), inset 0 1px 3px 0 rgba(207,215,230,.6);
}

.shadow-inner-2{
  box-shadow: inset 0 1px 2px 0 rgba(207,215,230,.4);
}

.pill       {  border-radius:50%;     }
.br0        {   border-radius:@size0; }
.br1        {   border-radius:@size1;    }
.br2        {   border-radius:@size2;    }
.br3        {   border-radius:@size3;   }
.br4        {   border-radius:@size4;   }
.br5        {   border-radius:@size5;   }

.bd {
  border-style: dashed;
  border-width: 1px;
}

.bbr1{
  border-bottom-right-radius: @size1;
  border-bottom-left-radius: @size1;
}

.btr1{
  border-top-right-radius: @size1;
  border-top-left-radius: @size1;
}

.b0         { border:none }
.b          { border:1px solid #F0F0F0; }
.bb         { border-bottom:1px solid #F0F0F0; }
.bt         { border-top:1px solid #F0F0F0; }
.br         { border-right:1px solid #F0F0F0; }
.bl         { border-left:1px solid #F0F0F0; }

.o0 { opacity: 0; }
.o20 { opacity: 0.2; }
.o40 { opacity: 0.4; }
.o50 { opacity: 0.5; }
.o60 { opacity: 0.6; }
.o80 { opacity: 0.8; }
.o100 { opacity: 0.1; }

.float-left { float:left;}
.float-right{ float:right;}
.absolute { position:absolute; }
.block { display:block; }
.inline { display:inline-block; }
.relative { position:relative; }


.transition-all{
  transition: all 0.3s ease 0s;
}