/* Margin autos */
.mr-auto{ margin-right:auto }
.ml-auto{ margin-left:auto }

/* Font Weight */
.fw-1{ font-weight:100!important }
.fw-2{ font-weight:200!important }
.fw-3{ font-weight:300!important }
.fw-4{ font-weight:400!important }
.fw-5{ font-weight:500!important }
.fw-6{ font-weight:600!important }
.fw-7{ font-weight:700!important }
.fw-8{ font-weight:800!important }
.fw-9{ font-weight:900!important }

/* Padding */
.pad-0{ padding: 0!important; }
.pad-1{ padding: 5px!important; }
.pad-2{ padding: 10px!important; }
.pad-3{ padding: 15px!important; }
.pad-4{ padding: 20px!important; }
.pad-5{ padding: 30px!important; }
.pad-6{ padding: 40px!important; }
.pad-7{ padding: 50px!important; }
.pad-8{ padding: 60px!important; }

/* Padding top */
.pt-0{ padding-top: 0px!important; }
.pt-1{ padding-top: 5px!important; }
.pt-2{ padding-top: 10px!important; }
.pt-3{ padding-top: 15px!important; }
.pt-4{ padding-top: 20px!important; }
.pt-5{ padding-top: 30px!important; }
.pt-6{ padding-top: 40px!important; }
.pt-7{ padding-top: 50px!important; }
.pt-8{ padding-top: 60px!important; }

/* Padding bottom */
.pb-0{ padding-bottom: 0px!important; }
.pb-1{ padding-bottom: 5px!important; }
.pb-2{ padding-bottom: 10px!important; }
.pb-3{ padding-bottom: 15px!important; }
.pb-4{ padding-bottom: 20px!important; }
.pb-5{ padding-bottom: 30px!important; }
.pb-6{ padding-bottom: 40px!important; }
.pb-7{ padding-bottom: 50px!important; }
.pb-8{ padding-bottom: 60px!important; }

/* Padding left */
.pl-0{ padding-left: 0px!important; }
.pl-1{ padding-left: 5px!important; }
.pl-2{ padding-left: 10px!important; }
.pl-3{ padding-left: 15px!important; }
.pl-4{ padding-left: 20px!important; }
.pl-5{ padding-left: 30px!important; }
.pl-6{ padding-left: 40px!important; }
.pl-7{ padding-left: 50px!important; }
.pl-8{ padding-left: 60px!important; }

/* Padding right */
.pr-0{ padding-right: 0px!important; }
.pr-1{ padding-right: 5px!important; }
.pr-2{ padding-right: 10px!important; }
.pr-3{ padding-right: 15px!important; }
.pr-4{ padding-right: 20px!important; }
.pr-5{ padding-right: 30px!important; }
.pr-6{ padding-right: 40px!important; }
.pr-7{ padding-right: 50px!important; }
.pr-8{ padding-right: 60px!important; }

/* Margin top */
.mt-0{ margin-top: 0px!important; }
.mt-1{ margin-top: 5px!important; }
.mt-2{ margin-top: 10px!important; }
.mt-3{ margin-top: 15px!important; }
.mt-4{ margin-top: 20px!important; }
.mt-5{ margin-top: 30px!important; }
.mt-6{ margin-top: 40px!important; }
.mt-7{ margin-top: 50px!important; }
.mt-8{ margin-top: 60px!important; }
.mt-auto{ margin-top: auto!important }

/* Margin bottom */
.mb-0{ margin-bottom: 0px!important; }
.mb-1px{ margin-bottom: 1px!important; }
.mb-2px{ margin-bottom: 2px!important; }
.mb-3px{ margin-bottom: 3px!important; }
.mb-1{ margin-bottom: 5px!important; }
.mb-2{ margin-bottom: 10px!important; }
.mb-3{ margin-bottom: 15px!important; }
.mb-4{ margin-bottom: 20px!important; }
.mb-5{ margin-bottom: 30px!important; }
.mb-6{ margin-bottom: 40px!important; }
.mb-7{ margin-bottom: 50px!important; }
.mb-8{ margin-bottom: 60px!important; }
.mb-auto{ margin-bottom: auto!important }

/* Margin left */
.ml-0{ margin-left: 0px!important; }
.ml-1{ margin-left: 5px!important; }
.ml-2{ margin-left: 10px!important; }
.ml-3{ margin-left: 15px!important; }
.ml-4{ margin-left: 20px!important; }
.ml-5{ margin-left: 30px!important; }
.ml-6{ margin-left: 40px!important; }
.ml-7{ margin-left: 50px!important; }
.ml-8{ margin-left: 60px!important; }
.ml-auto{ margin-left: auto!important }

/* Margin right */
.mr-0{ margin-right: 0px!important; }
.mr-1{ margin-right: 5px!important; }
.mr-2{ margin-right: 10px!important; }
.mr-3{ margin-right: 15px!important; }
.mr-4{ margin-right: 20px!important; }
.mr-5{ margin-right: 30px!important; }
.mr-6{ margin-right: 40px!important; }
.mr-7{ margin-right: 50px!important; }
.mr-8{ margin-right: 60px!important; }
.mr-auto{ margin-right: auto!important }

/* Font sizes */
.fs-10{ font-size:10px!important }
.fs-11{ font-size:11px!important }
.fs-12{ font-size:12px!important }
.fs-13{ font-size:13px!important }
.fs-14{ font-size:14px!important }
.fs-14{ font-size:14px!important }
.fs-15{ font-size:15px!important }
.fs-16{ font-size:16px!important }
.fs-18{ 
  font-size:18px!important;
  line-height: 28px
}
.fs-20{ 
  font-size:20px!important;
  line-height: 30px
}
.fs-22{ font-size:22px!important }
.fs-24{ font-size:24px!important }
.fs-26{ font-size:26px!important }
.fs-28{ font-size:28px!important }
.fs-30{ font-size:30px!important }

/* Line Heights */
.lh-12{ line-height:12px!important }
.lh-13{ line-height:13px!important }
.lh-14{ line-height:14px!important }
.lh-14{ line-height:14px!important }
.lh-15{ line-height:15px!important }
.lh-16{ line-height:16px!important }
.lh-18{ line-height:18px!important }
.lh-20{ line-height:20px!important }
.lh-22{ line-height:22px!important }
.lh-24{ line-height:24px!important }
.lh-26{ line-height:26px!important }
.lh-28{ line-height:28px!important }
.lh-30{ line-height:30px!important }

:root{
  --grid-pix: 16px;
  --minus-grid-pix: -16px;
}
.row {
  margin-right: var(--minus-grid-pix);
  margin-left: var(--minus-grid-pix);
  display: flex;
  flex-wrap: wrap;
}

.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: var(--grid-pix);
  padding-left: var(--grid-pix);
}

.same-height {
  display: flex;
  align-items: stretch; 
}
.same-height .col {
  display: flex;
  flex-direction: column;
}
.text-center{ text-align: center }
.float-right{ float: right }
.col-flex-end{
  align-items: end;
  display: flex;
  flex-direction: column;  
}

.col-1 { width: 8.3333333333%; }
.col-2 { width: 16.6666666667%; }
.col-3 { width: 25%; }
.col-3-5 { width: 31%; }
.col-4 { width: 33.3333333333%; }
.col-4-5 { width: 38%; }
.col-5 { width: 41.6666666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.3333333333%; }
.col-7-5 { width: 60%; }
.col-8 { width: 66.6666666667%; }
.col-8-5 { width: 69%; }
.col-9 { width: 75%; }
.col-10 { width: 83.3333333333%; }
.col-11 { width: 91.6666666667%; }
.col-12 { width: 100%; }

@media (min-width: 576px) {
  .col-sm-1 { width: 8.3333333333%; }
  .col-sm-2 { width: 16.6666666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.3333333333%; }
  .col-sm-5 { width: 41.6666666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.3333333333%; }
  .col-sm-8 { width: 66.6666666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.3333333333%; }
  .col-sm-11 { width: 91.6666666667%; }
  .col-sm-12 { width: 100%; }
}

@media (max-width: 768px) {
  .col-xs-1 { width: 8.3333333333%; }
  .col-xs-2 { width: 16.6666666667%; }
  .col-xs-3 { width: 25%; }
  .col-xs-4 { width: 33.3333333333%; }
  .col-xs-5 { width: 41.6666666667%; }
  .col-xs-6 { width: 50%; }
  .col-xs-7 { width: 58.3333333333%; }
  .col-xs-8 { width: 66.6666666667%; }
  .col-xs-9 { width: 75%; }
  .col-xs-10 { width: 83.3333333333%; }
  .col-xs-11 { width: 91.6666666667%; }
  .col-xs-12 { width: 100%; } 
}

@media (min-width: 768px) {
  .col-md-1 { width: 8.3333333333%; }
  .col-md-2 { width: 16.6666666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.3333333333%; }
  .col-md-5 { width: 41.6666666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.3333333333%; }
  .col-md-8 { width: 66.6666666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.3333333333%; }
  .col-md-11 { width: 91.6666666667%; }
  .col-md-12 { width: 100%; } 
}

@media (min-width: 992px) {
  .col-lg-1 { width: 8.3333333333%; }
  .col-lg-2 { width: 16.6666666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.3333333333%; }
  .col-lg-5 { width: 41.6666666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.3333333333%; }
  .col-lg-8 { width: 66.6666666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.3333333333%; }
  .col-lg-11 { width: 91.6666666667%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1 { width: 8.3333333333%; }
  .col-xl-2 { width: 16.6666666667%; }
  .col-xl-3 { width: 25%; }
  .col-xl-4 { width: 33.3333333333%; }
  .col-xl-5 { width: 41.6666666667%; }
  .col-xl-6 { width: 50%; }
  .col-xl-7 { width: 58.3333333333%; }
  .col-xl-8 { width: 66.6666666667%; }
  .col-xl-9 { width: 75%; }
  .col-xl-10 { width: 83.3333333333%; }
  .col-xl-11 { width: 91.6666666667%; }
  .col-xl-12 { width: 100%; }
}

@media screen and (max-width: 768px){
  .col { width: 100%; }   
  .page-block{
    overflow: auto;
    margin-bottom:20px;
  }
  .page-block table th{ white-space:nowrap; }
  .same-height .page-block:not(.exclude-same-height){ height:inherit; }
}