/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9/07/2020, 4:08:52 PM
    Author     : bob
*/

/* ----------Utility classes --------------*/


.bg-cover{
    background-size: cover;
}
.bg-contain{
    background-size: contain;
}
.bg-grad-v{
    background: transparent linear-gradient(0deg, var(--primary) 0%, var(--secondary) 100%) repeat scroll 0% 0%;
}
.bg-grad-v-trans-up{
    background: transparent linear-gradient(0deg, rgba(0, 0, 0, 0.10) 10%, rgba(0, 0, 0, 0.50) 80%);
}
.bg-grad-v-trans-down{
    background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0.10) 10%, rgba(0, 0, 0, 0.50) 80%);
}
.bg-grad-h{
    background: transparent linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%) repeat scroll 0% 0%;
}
.bg-grad-h-trans-l{
    background: transparent linear-gradient(90deg, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.40) 90%);
}
.bg-grad-h-trans-r{
    background: transparent linear-gradient(270deg, rgba(0, 0, 0, 0.25) 10%, rgba(0, 0, 0, 0.40) 90%);
}
.bg-grad-135{
    background: transparent linear-gradient(135deg,  var(--primary) 0%, var(--secondary) 100%) repeat scroll 0% 0%;
}
.bg-primary{
    background-color: var(--primary);
}
.bg-secondary{
    background-color: var(--secondary);
}

.bg-light {
    color: var(--dark);
    background-color: var(--light);
}
.bg-dark {
    color: var(--light);
    background-color: var(--dark);
}
.bg-gray{
    background-color: var(--gray);
}
.bg-lightgray{
    background-color: var(--gray-light);
}
.bg-white{
    background-color: var(--white);
}
.bg-red{
    background-color: var(--red);
}
.bg-green{
    background-color: var(--green);
}
.bg-limegreen{
    background-color: var(--limegreen);
}
.bg-yellow{
    background-color: var(--yellow);
}
.bg-pink{
    background-color: var(--pink);
}
.bg-orange{
    background-color: var(--orange);
}
.bg-blue{
    background-color: var(--blue);
}
.bg-gray {
    color: var(--highlight);
    background-color: var(--gray);
}
.bg-highlight{
    background-color: var(--highlight);
}

.bg-transparent{
    background: transparent;
}
.bg-trans-20{
    background-color: rgba(0,0,0,0.20);
}
.bg-trans-40{
    background-color: rgba(0,0,0,0.40);
}
.bg-trans-60{
    background-color: rgba(0,0,0,0.60);
}

.text-primary {
    color: var(--primary);
}
.text-secondary {
    color: var(--secondary);
}
.text-highlight {
    color: var(--highlight);
}
.text-light {
    color: var(--light);
}
.text-dark {
    color: var(--dark);
}


.transition-h-0_25{
    transition: height 0.25s;
}
.transition-h-0_5{
    transition: height 0.5s;
}
.transition-h-0_75{
    transition: height 0.75s;
}
.transition-h-1{
    transition: height 1s;
}

.transition-w-0_25{
    transition: width 0.25s;
}
.transition-w-0_5{
    transition: width 0.5s;
}

.transition-h-0_75{
    transition: width 0.75s;
}
.transition-h-1{
    transition: width 1s;
}

.absolute{
    position: absolute;
}
.relative{
    position: relative;
}

.float-left {
    float: left;
}
.float-right {
    float: right;
}
.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.clear {
    clear: both;
}
.clear-left {
    clear: left;
}
.clear-right {
    clear: right;
}
.hide {
    display: none;
}

.collapse{
    display: none;
}
.show{
    display: block;
}
.center{
    text-align: center;
}
.center-text{
    text-align: center;
}
.center-align{
    justify-content: center;
}
.middle{
    align-items: center;
}
.centered{
    align-items: center;
    justify-content: center;
}
.right{
    text-align: right;
}

.display-topleft {
    position:absolute;
    left:0;
    top:0
}
.display-topright {
    position:absolute;
    right:0;
    top:0
}

.display-bottomleft {
    position:absolute;
    left:0;
    bottom:0
}
.display-bottomright {
    position:absolute;
    right:0;
    bottom:0
}

.display-middle {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%)
}

.display-left {
    position:absolute;
    top:50%;
    left:0%;
    transform:translate(0%, -50%);
    -ms-transform:translate(-0%, -50%)
}

.display-right {
    position:absolute;
    top:50%;
    right:0%;
    transform:translate(0%, -50%);
    -ms-transform:translate(0%, -50%)
}

.display-topmiddle {
    position:absolute;
    left:50%;
    top:0;
    transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%)
}

.display-bottommiddle {
    position:absolute;
    left:50%;
    bottom:0;
    transform:translate(-50%, 0%);
    -ms-transform:translate(-50%, 0%)
}


.d-flex{
    display: flex;
}
.d-block{
    display: block;
}
.d-inline{
    display: inline-block;
}
.d-inline-flex{
    display: inline-flex;
}
.d-table{
    display: table;
}
.d-table-row{
    display: table-row;
}
.d-table-cell{
    display: table-cell;
}
.d-table-col{
    display: table-column;
}

.flex{
    flex: 1;
}
.flex-0{
    flex: 0 0;
}
.flex-grow{
    flex-grow: 1;
}
.flex-shrink{
    flex-shrink: 1;
}
.no-shrink{
    flex-shrink: 0; 
}
.no-grow{
    flex-grow: 0; 
}


.flex-col{
    flex-direction: column;
}
.flex-col-rev{
    flex-wrap: column-reverse;
}
.flex-row{
    flex-direction: row;
}
.flex-row-rev{
    flex-wrap: row-reverse;
}
.flex-wrap{
    flex-wrap: wrap;
}
.rev-wrap{
    flex-wrap: wrap-reverse;
}

.row-wrap{
    flex-wrap: wrap;
}
.no-wrap{
  flex-wrap: nowrap; 
}

.nowrap{
    white-space: nowrap;
}

.row-item {
  flex: 1;
  gap: 10px; /* Add margin to all sides of each flex item */
}

/* Remove left margin for the first item in each wrapped row 
.row-item:first-child {
  margin: 0;
}*/

.flex-space-between{
    flex: 1;
    justify-content: space-between;
}
.flex-space-around{
    flex: 1;
    justify-content: space-around;
}

.flex-start{
    justify-content: flex-start;
}
.flex-end{
    justify-content: flex-end;
}
.flex-left{
    justify-content: left;
}
.flex-right{
    justify-content: right;
}

.align-items-flex-start{
    align-items: flex-start;
}
.align-items-flex-end{
    align-items: flex-end;
}
.align-items-stretch {
    align-items:  stretch ;
}
.align-items-center{
    align-items: center;
}
.align-items-baseline{
    align-items: baseline;
}
.align-items-first{
    align-items: first baseline;
}
.align-items-last{
    align-items: last baseline;
}
.align-items-start{
    align-items: start;
}
.align-items-end{
    align-items: end;
}
.align-items-self-start{
    align-items: self-start;
}
.align-items-self-end{
    align-items: self-end;
}

.align-content-flex-start{
    align-content: flex-start;
}
.align-content-flex-end{
    align-content: flex-end;
}
.align-content-center{
    align-content: center;
}
.align-content-space-between{
    align-content: space-between;
}
.align-content-space-around{
    align-content: space-around;
}
.align-content-space-evenly{
    align-content: space-evenly;
}
.align-content-stretch{
    align-content: stretch;
}
.align-content-start{
    align-content: start;
}
.align-content-end{
    align-content: end;
}
.align-content-baseline{
    align-content: baseline;
}
.align-content-first{
    align-content: first baseline;
}
.align-content-last{
    align-content: last baseline;
}
 
.justify-flex-start{
    justify-content: flex-start;
}
.justify-flex-end{
    justify-content: flex-end;
}
.justify-center{
    justify-content: center;
}
.justify-start{
    justify-content: start;
}
.justify-end{
    justify-content: end;
}

.justify-left{
    justify-content: left;
}
.justify-right{
    justify-content: right;
}
.justify-center{
    justify-content: center;
}

.space-between{
    justify-content: space-between;
}
.space-around{
    justify-content: space-around;
}
.space-evenly{
    justify-content: space-evenly;
}


.border-box{
    box-sizing: border-box;
}
.content-box{
    box-sizing: content-box;
}

.order-1{
    order: 1;
}
.order-2{
    order: 2;
}
.order-3{
    order: 3;
}
.order-4{
    order: 4;
}
.order-5{
    order: 5;
}
.order-6{
    order: 6;
}
.order-7{
    order: 7;
}
.order-8{
    order: 8;
}
.order-9{
    order: 9;
}
.order-10{
    order: 10;
}
.order-11{
    order: 11;
}
.order-12{
    order: 12;
}

.fb-sm {
    flex-basis: var(--breakpoint-sm);
}
.fb-md {
    flex-basis: var(--breakpoint-md);
}
.fb-lg {
    flex-basis: var(--breakpoint-lg);
}
.fb-xl {
    flex-basis: var(--breakpoint-xl);
}

.fb-1r{
    flex-basis: 1rem;
}
.fb-2r{
    flex-basis: 2rem;
}
.fb-3r{
    flex-basis: 3rem;
}
.fb-4r{
    flex-basis: 4rem;
}
.fb-5r{
    flex-basis: 5rem;
}

.fb-100{
    flex-basis: 100px;
}
.fb-150{
    flex-basis: 150px;
}
.fb-200{
    flex-basis: 200px;
}
.fb-250{
    flex-basis: 250px;
}
.fb-300{
    flex-basis: 300px;
}
.fb-320{
    flex-basis: 320px;
}
.fb-350{
    flex-basis: 350px;
}
.fb-360{
    flex-basis: 360px;
}
.fb-400{
    flex-basis: 400px;
}
.fb-450{
    flex-basis: 450px;
}
.fb-480{
    flex-basis: 480px;
}
.fb-500{
    flex-basis: 500px;
}
.fb-560{
    flex-basis: 560px;
}
.fb-600{
    flex-basis: 600px;
}
.fb-650{
    flex-basis: 650px;
}
.fb-700{
    flex-basis: 700px;
}

.w-5pc{
    width: 5%;
}
.w-10pc{
    width: 10%;
}
.w-15pc{
    width: 15%;
}
.w-20pc{
    width: 20%;
}
.w-25pc{
    width: 25%;
}
.w-30pc{
    width: 30%;
}
.w-33pc{
    width: 33%;
}
.w-40pc{
    width: 40%;
}
.w-50pc{
    width: 50%;
}
.w-60pc{
    width: 60%;
}
.w-66pc{
    width: 66%;
}
.w-70pc{
    width:70%;
}
.w-75pc{
    width: 75%;
}
.w-80pc{
    width: 80%;
}
.w-90pc{
    width: 90%;
}
.w-100pc{
    width: 100%;
}

.w-auto {
    flex: 1 1 100%;
}

.w-1{
    min-width: 1px;
    max-width: 1px;
}
.w-2{
    min-width: 2px;
    max-width: 2px;
}
.w-3{
    min-width: 3px;
    max-width: 3px;
}
.w-4{
    min-width: 4px;
    max-width: 4px;
}
.w-5{
    min-width: 5px;
    max-width: 5px;
}
.w-6{
    min-width: 6px;
    max-width: 6px;
}
.w-7{
    min-width: 7px;
    max-width: 7px;
}
.w-8{
    min-width: 8px;
    max-width: 8px;
}
.w-9{
    min-width: 9px;
    max-width: 9px;
}
.w-10{
    min-width: 10px;
    max-width: 10px;
}
.w-12{
    min-width: 12px;
    max-width: 12px;
}
.w-14{
    min-width: 14px;
    max-width: 14px;
}
.w-15{
    min-width: 15px;
    max-width: 15px;
}
.w-16{
    min-width: 16px;
    max-width: 16px;
}
.w-18{
    min-width: 18px;
    max-width: 18px;
}
.w-20{
    min-width: 20px;
    max-width: 20px;
}
.w-22{
    min-width: 22px;
    max-width: 22px;
}
.w-24{
    min-width: 24px;
    max-width: 24px;
}
.w-25{
    min-width: 25px;
    max-width: 25px;
}
.w-26{
    min-width: 26px;
    max-width: 26px;
}
.w-28{
    min-width: 28px;
    max-width: 28px;
}
.w-30{
    min-width: 30px;
    max-width: 30px;
}
.w-32{
    min-width: 32px;
    max-width: 32px;
}
.w-34{
    min-width: 34px;
    max-width: 34px;
}
.w-35{
    min-width: 35px;
    max-width: 35px;
}
.w-36{
    min-width: 36px;
    max-width: 36px;
}
.w-38{
    min-width: 38px;
    max-width: 38px;
}
.w-40{
    min-width: 40px;
    max-width: 40px;
}
.w-42{
    min-width: 42px;
    max-width: 42px;
}
.w-44{
    min-width: 44px;
    max-width: 44px;
}
.w-45{
    min-width: 45px;
    max-width: 45px;
}
.w-46{
    min-width: 46px;
    max-width: 46px;
}
.w-48{
    min-width: 48px;
    max-width: 48px;
}
.w-50{
    min-width: 50px;
    max-width: 50px;
}
.w-52{
    min-width: 52px;
    max-width: 52px;
}
.w-54{
    min-width: 54px;
    max-width: 54px;
}
.w-55{
    min-width: 55px;
    max-width: 55px;
}
.w-56{
    min-width: 56px;
    max-width: 56px;
}
.w-58{
    min-width: 58px;
    max-width: 58px;
}
.w-60{
    min-width: 60px;
    max-width: 60px;
}
.w-62{
    min-width: 62px;
    max-width: 62px;
}
.w-64{
    min-width: 64px;
    max-width: 64px;
}
.w-65{
    min-width: 65px;
    max-width: 65px;
}
.w-66{
    min-width: 66px;
    max-width: 66px;
}
.w-68{
    min-width: 68px;
    max-width: 68px;
}
.w-70{
    min-width: 70px;
    max-width: 70px;
}
.w-72{
    min-width: 72px;
    max-width: 72px;
}
.w-74{
    min-width: 74px;
    max-width: 74px;
}
.w-75{
    min-width: 75px;
    max-width: 75px;
}
.w-76{
    min-width: 76px;
    max-width: 76px;
}
.w-78{
    min-width: 78px;
    max-width: 78px;
}
.w-80{
    min-width: 80px;
    max-width: 80px;
}
.w-82{
    min-width: 82px;
    max-width: 82px;
}
.w-84{
    min-width: 84px;
    max-width: 84px;
}
.w-85{
    min-width: 85px;
    max-width: 85px;
}
.w-86{
    min-width: 86px;
    max-width: 86px;
}
.w-88{
    min-width: 88px;
    max-width: 88px;
}
.w-90{
    min-width: 90px;
    max-width: 90px;
}
.w-92{
    min-width: 92px;
    max-width: 92px;
}
.w-94{
    min-width: 94px;
    max-width: 94px;
}
.w-95{
    min-width: 95px;
    max-width: 95px;
}
.w-96{
    min-width: 96px;
    max-width: 96px;
}
.w-98{
    min-width: 98px;
    max-width: 98px;
}
.w-100{
    min-width: 100px;
    max-width: 100px;
}
.w-105{
    min-width: 105px;
    max-width: 105px;
}
.w-110{
    min-width: 110px;
    max-width: 110px;
}
.w-115{
    min-width: 115px;
    max-width: 115px;
}
.w-120{
    min-width: 120px;
    max-width: 120px;
}
.w-125{
    min-width: 125px;
    max-width: 125px;
}
.w-130{
    min-width: 130px;
    max-width: 130px;
}
.w-135{
    min-width: 135px;
    max-width: 135px;
}
.w-140{
    min-width: 140px;
    max-width: 140px;
}
.w-145{
    min-width: 145px;
    max-width: 145px;
}
.w-150{
    min-width: 150px;
    max-width: 150px;
}
.w-155{
    min-width: 155px;
    max-width: 155px;
}
.w-160{
    min-width: 160px;
    max-width: 160px;
}
.w-165{
    min-width: 165px;
    max-width: 165px;
}
.w-170{
    min-width: 170px;
    max-width: 170px;
}
.w-175{
    min-width: 175px;
    max-width: 175px;
}
.w-180{
    min-width: 180px;
    max-width: 180px;
}
.w-185{
    min-width: 185px;
    max-width: 185px;
}
.w-190{
    min-width: 190px;
    max-width: 190px;
}
.w-195{
    min-width: 195px;
    max-width: 195px;
}
.w-200{
    min-width: 200px;
    max-width: 200px;
}
.w-210{
    min-width: 210px;
    max-width: 210px;
}
.w-220{
    min-width: 220px;
    max-width: 220px;
}
.w-225{
    min-width: 225px;
    max-width: 225px;
}
.w-230{
    min-width: 230px;
    max-width: 230px;
}
.w-240{
    min-width: 240px;
    max-width: 240px;
}
.w-250{
    min-width: 250px;
    max-width: 250px;
}
.w-260{
    min-width: 260px;
    max-width: 260px;
}
.w-270{
    min-width: 270px;
    max-width: 270px;
}
.w-280{
    min-width: 280px;
    max-width: 280px;
}
.w-290{
    min-width: 290px;
    max-width: 290px;
}
.w-300{
    min-width: 300px;
    max-width: 300px;
}
.w-320{
    min-width: 320px;
    max-width: 320px;
}
.w-340{
    min-width: 340px;
    max-width: 340px;
}
.w-350{
    min-width: 350px;
    max-width: 350px;
}
.w-360{
    min-width: 360px;
    max-width: 360px;
}
.w-380{
    min-width: 380px;
    max-width: 380px;
}
.w-400{
    min-width: 400px;
    max-width: 400px;
}
.w-420{
    min-width: 420px;
    max-width: 420px;
}
.w-440{
    min-width: 440px;
    max-width: 440px;
}
.w-450{
    min-width: 450px;
    max-width: 450px;
}
.w-460{
    min-width: 460px;
    max-width: 460px;
}
.w-480{
    min-width: 480px;
    max-width: 480px;
}
.w-500{
    min-width: 500px;
    max-width: 500px;
}
.w-520{
    min-width: 520px;
    max-width: 520px;
}
.w-540{
    min-width: 540px;
    max-width: 540px;
}
.w-550{
    min-width: 550px;
    max-width: 550px;
}
.w-560{
    min-width: 560px;
    max-width: 560px;
}
.w-580{
    min-width: 580px;
    max-width: 580px;
}
.w-600{
    min-width: 600px;
    max-width: 600px;
}
.w-620{
    min-width: 620px;
    max-width: 620px;
}
.w-640{
    min-width: 640px;
    max-width: 640px;
}
.w-650{
    min-width: 650px;
    max-width: 650px;
}
.w-660{
    min-width: 660px;
    max-width: 660px;
}
.w-680{
    min-width: 680px;
    max-width: 680px;
}
.w-700{
    min-width: 700px;
    max-width: 700px;
}
.w-720{
    min-width: 720px;
    max-width: 720px;
}
.w-740{
    min-width: 740px;
    max-width: 740px;
}
.w-762{
    min-width: 762px;
    max-width: 762px;
}
.w-780{
    min-width: 780px;
    max-width: 780px;
}
.w-800{
    min-width: 800px;
    max-width: 800px;
}
.w-820{
    min-width: 820px;
    max-width: 820px;
}
.w-840{
    min-width: 840px;
    max-width: 840px;
}
.w-860{
    min-width: 860px;
    max-width: 860px;
}
.w-880{
    min-width: 880px;
    max-width: 880px;
}
.w-900{
    min-width: 900px;
    max-width: 900px;
}
.w-920{
    min-width: 920px;
    max-width: 920px;
}
.w-940{
    min-width: 940px;
    max-width: 940px;
}
.w-960{
    min-width: 960px;
    max-width: 960px;
}
.w-980{
    min-width: 980px;
    max-width: 980px;
}
.w-1000{
    min-width: 1000px;
    max-width: 1000px;
}
.w-1020{
    min-width: 1020px;
    max-width: 1020px;
}
.w-1040{
    min-width: 1040px;
    max-width: 1040px;
}
.w-1060{
    min-width: 1060px;
    max-width: 1060px;
}
.w-1080{
    min-width: 1080px;
    max-width: 1080px;
}
.w-1100{
    min-width: 1100px;
    max-width: 1100px;
}
.w-1120{
    min-width: 1120px;
    max-width: 1120px;
}
.w-1140{
    min-width: 1140px;
    max-width: 1140px;
}
.w-1160{
    min-width: 1160px;
    max-width: 1160px;
}
.w-1180{
    min-width: 1180px;
    max-width: 1180px;
}
.w-1200{
    min-width: 1200px;
    max-width: 1200px;
}
.w-1220{
    min-width: 1220px;
    max-width: 1220px;
}
.w-1240{
    min-width: 1240px;
    max-width: 1240px;
}
.w-1260{
    min-width: 1260px;
    max-width: 1260px;
}
.w-1280{
    min-width: 1280px;
    max-width: 1280px;
}
.w-1300{
    min-width: 1300px;
    max-width: 1300px;
}
.w-1400{
    min-width: 1400px;
    max-width: 1400px;
}
.w-1500{
    min-width: 1500px;
    max-width: 1500px;
}
.w-1600{
    min-width: 1600px;
    max-width: 1600px;
}

.w-min-25{
    min-width: 25px;
}
.w-min-50{
    min-width: 50px;
}
.w-min-100{
    min-width: 100px;
}
.w-min-150{
    min-width: 150px;
}
.w-min-200{
    min-width: 200px;
}
.w-min-250{
    min-width: 250px;
}
.w-min-300{
    min-width: 300px;
}
.w-min-350{
    min-width: 350px;
}
.w-min-400{
    min-width: 400px;
}
.w-min-450{
    min-width: 450px;
}
.w-min-500{
    min-width: 500px;
}
.w-min-560{
    min-width: 560px;
}

.w-max-25{
    max-width: 25px;
}
.w-max-50{
    max-width: 50px;
}
.w-max-100{
    max-width: 100px;
}
.w-max-150{
    max-width: 150px;
}
.w-max-200{
    max-width: 200px;
}
.w-max-250{
    max-width: 250px;
}
.w-max-300{
    max-width: 300px;
}
.w-max-350{
    max-width: 350px;
}
.w-max-400{
    max-width: 400px;
}
.w-max-450{
    max-width: 450px;
}
.w-max-500{
    max-width: 500px;
}
.w-max-560{
    max-width: 560px;
}

.vw-100{
    width: 100vw;
}
.vh-100{
    height: 100vw;
}

.h-100pc{
    height: 100%;
}

.h-auto{
    flex-direction: column;
    flex: 1 1;
}

.h-1r{
    height: 1rem;
}
.h-2r{
    height: 2rem;
}
.h-3r{
    height: 3rem;
}
.h-4r{
    height: 4rem;
}
.h-5r{
    height: 5rem;
}

.h-min-1r{
    min-height: 1rem;
}
.h-min-2r{
    min-height: 2rem;
}
.h-min-3r{
    min-height: 3rem;
}
.h-min-4r{
    min-height: 4rem;
}
.h-min-5r{
    min-height: 5rem;
}
.h-add-10{
    position:relative;
    height: calc(100% + 10px);
}
.h-sub-10{
    position:relative;
    height: calc(100% - 10px);
}

.h-1{
    min-height: 1px;
    max-height: 1px;
}
.h-2{
    min-height: 2px;
    max-height: 2px;
}
.h-3{
    min-height: 3px;
    max-height: 3px;
}
.h-4{
    min-height: 4px;
    max-height: 4px;
}
.h-5{
    min-height: 5px;
    max-height: 5px;
}
.h-6{
    min-height: 6px;
    max-height: 6px;
}
.h-7{
    min-height: 7px;
    max-height: 7px;
}
.h-8{
    min-height: 8px;
    max-height: 8px;
}
.h-9{
    min-height: 9px;
    max-height: 9px;
}
.h-10{
    min-height: 10px;
    max-height: 10px;
}
.h-12{
    min-height: 12px;
    max-height: 12px;
}
.h-14{
    min-height: 14px;
    max-height: 14px;
}
.h-15{
    min-height: 15px;
    max-height: 15px;
}
.h-16{
    min-height: 16px;
    max-height: 16px;
}
.h-18{
    min-height: 18px;
    max-height: 18px;
}
.h-20{
    min-height: 20px;
    max-height: 20px;
}
.h-22{
    min-height: 22px;
    max-height: 22px;
}
.h-24{
    min-height: 24px;
    max-height: 24px;
}
.h-25{
    min-height: 25px;
    max-height: 25px;
}
.h-26{
    min-height: 26px;
    max-height: 26px;
}
.h-28{
    min-height: 28px;
    max-height: 28px;
}
.h-30{
    min-height: 30px;
    max-height: 30px;
}
.h-32{
    min-height: 32px;
    max-height: 32px;
}
.h-34{
    min-height: 34px;
    max-height: 34px;
}
.h-35{
    min-height: 35px;
    max-height: 35px;
}
.h-36{
    min-height: 36px;
    max-height: 36px;
}
.h-38{
    min-height: 38px;
    max-height: 38px;
}
.h-40{
    min-height: 40px;
    max-height: 40px;
}
.h-42{
    min-height: 42px;
    max-height: 42px;
}
.h-44{
    min-height: 44px;
    max-height: 44px;
}
.h-45{
    min-height: 45px;
    max-height: 45px;
}
.h-46{
    min-height: 46px;
    max-height: 46px;
}
.h-48{
    min-height: 48px;
    max-height: 48px;
}
.h-50{
    min-height: 50px;
    max-height: 50px;
}
.h-52{
    min-height: 52px;
    max-height: 52px;
}
.h-54{
    min-height: 54px;
    max-height: 54px;
}
.h-55{
    min-height: 55px;
    max-height: 55px;
}
.h-56{
    min-height: 56px;
    max-height: 56px;
}
.h-58{
    min-height: 58px;
    max-height: 58px;
}
.h-60{
    min-height: 60px;
    max-height: 60px;
}
.h-62{
    min-height: 62px;
    max-height: 62px;
}
.h-64{
    min-height: 64px;
    max-height: 64px;
}
.h-65{
    min-height: 65px;
    max-height: 65px;
}
.h-66{
    min-height: 66px;
    max-height: 66px;
}
.h-68{
    min-height: 68px;
    max-height: 68px;
}
.h-70{
    min-height: 70px;
    max-height: 70px;
}
.h-72{
    min-height: 72px;
    max-height: 72px;
}
.h-74{
    min-height: 74px;
    max-height: 74px;
}
.h-75{
    min-height: 75px;
    max-height: 75px;
}
.h-76{
    min-height: 76px;
    max-height: 76px;
}
.h-78{
    min-height: 78px;
    max-height: 78px;
}
.h-80{
    min-height: 80px;
    max-height: 80px;
}
.h-82{
    min-height: 82px;
    max-height: 82px;
}
.h-84{
    min-height: 84px;
    max-height: 84px;
}
.h-85{
    min-height: 85px;
    max-height: 85px;
}
.h-86{
    min-height: 86px;
    max-height: 86px;
}
.h-88{
    min-height: 88px;
    max-height: 88px;
}
.h-90{
    min-height: 90px;
    max-height: 90px;
}
.h-92{
    min-height: 92px;
    max-height: 92px;
}
.h-94{
    min-height: 94px;
    max-height: 94px;
}
.h-95{
    min-height: 95px;
    max-height: 95px;
}
.h-96{
    min-height: 96px;
    max-height: 96px;
}
.h-98{
    min-height: 98px;
    max-height: 98px;
}
.h-100{
    min-height: 100px;
    max-height: 100px;
}
.h-105{
    min-height: 105px;
    max-height: 105px;
}
.h-110{
    min-height: 110px;
    max-height: 110px;
}
.h-115{
    min-height: 115px;
    max-height: 115px;
}
.h-120{
    min-height: 120px;
    max-height: 120px;
}
.h-125{
    min-height: 125px;
    max-height: 125px;
}
.h-130{
    min-height: 130px;
    max-height: 130px;
}
.h-135{
    min-height: 135px;
    max-height: 135px;
}
.h-140{
    min-height: 140px;
    max-height: 140px;
}
.h-145{
    min-height: 145px;
    max-height: 145px;
}
.h-150{
    min-height: 150px;
    max-height: 150px;
}
.h-155{
    min-height: 155px;
    max-height: 155px;
}
.h-160{
    min-height: 160px;
    max-height: 160px;
}
.h-165{
    min-height: 165px;
    max-height: 165px;
}
.h-170{
    min-height: 170px;
    max-height: 170px;
}
.h-175{
    min-height: 175px;
    max-height: 175px;
}
.h-180{
    min-height: 180px;
    max-height: 180px;
}
.h-185{
    min-height: 185px;
    max-height: 185px;
}
.h-190{
    min-height: 190px;
    max-height: 190px;
}
.h-195{
    min-height: 195px;
    max-height: 195px;
}
.h-200{
    min-height: 200px;
    max-height: 200px;
}
.h-210{
    min-height: 210px;
    max-height: 210px;
}
.h-220{
    min-height: 220px;
    max-height: 220px;
}
.h-225{
    min-height: 225px;
    max-height: 225px;
}
.h-230{
    min-height: 230px;
    max-height: 230px;
}
.h-240{
    min-height: 240px;
    max-height: 240px;
}
.h-250{
    min-height: 250px;
    max-height: 250px;
}
.h-260{
    min-height: 260px;
    max-height: 260px;
}
.h-270{
    min-height: 270px;
    max-height: 270px;
}
.h-280{
    min-height: 280px;
    max-height: 280px;
}
.h-290{
    min-height: 290px;
    max-height: 290px;
}
.h-300{
    min-height: 300px;
    max-height: 300px;
}
.h-350{
    min-height: 350px;
    max-height: 350px;
}
.h-360{
    min-height: 360px;
    max-height: 360px;
}
.h-400{
    min-height: 400px;
    max-height: 400px;
}
.h-450{
    min-height: 450px;
    max-height: 450px;
}
.h-500{
    min-height: 500px;
    max-height: 500px;
}
.h-600{
    min-height: 600px;
    max-height: 600px;
}
.h-700{
    min-height: 700px;
    max-height: 700px;
}
.h-800{
    min-height: 800px;
    max-height: 800px;
}
.h-900{
    min-height: 900px;
    max-height: 900px;
}
.h-1000{
    min-height: 1000px;
    max-height: 1000px;
}
.h-1100{
    min-height: 1100px;
    max-height: 1100px;
}
.h-1200{
    min-height: 1200px;
    max-height: 1200px;
}

.w-max-xs{
    max-width:var(--breakpoint-xs);
}
.w-max-sm{
    max-width:var(--breakpoint-sm);
}
.w-max-md{
    max-width:var(--breakpoint-md);
}
.w-max-lg{
    max-width:var(--breakpoint-lg);
}
.w-max-xl{
    max-width:var(--breakpoint-xl);
}

.w-min-xs{
    min-width:var(--breakpoint-xs);
}
.w-min-sm{
    min-width:var(--breakpoint-sm);
}
.w-min-md{
    min-width:var(--breakpoint-md);
}
.w-min-lg{
    min-width:var(--breakpoint-lg);
}
.w-min-xl{
    min-width:var(--breakpoint-xl);
}

.w-xs{
    width:var(--breakpoint-xs);
}
.w-sm{
    width:var(--breakpoint-sm);
}
.w-md{
    width:var(--breakpoint-md);
}
.w-lg{
    width:var(--breakpoint-lg);
}
.w-xl{
    width:var(--breakpoint-xl);
}

.m-auto{
    margin: auto;
}
.mt-auto{
    margin-top: auto;
}
.mb-auto{
    margin-bottom: auto;
}
.ml-auto{
    margin-left: auto;
}
.mr-auto{
    margin-right: auto;
}
.my-auto{
    margin-top: auto;
    margin-bottom: auto;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.m-0{
    margin: 0;
}
.m-5{
    margin: 5px;
}
.m-10{
    margin: 10px;
}
.m-15{
    margin: 15px;
}
.m-20{
    margin: 20px;
}
.m-25{
    margin: 25px;
}

.mt-5{
    margin-top: 5px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.mb-5{
    margin-bottom: 5px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-15{
    margin-bottom: 15px;
}
.ml-5{
    margin-left: 5px;
}
.ml-10{
    margin-left: 10px;
}
.ml-15{
    margin-left: 15px;
}
.mr-5{
    margin-right: 5px;
}
.mr-10{
    margin-right: 10px;
}
.mr-15{
    margin-right: 15px;
}


.m-0_25r{
    margin: 0.25rem;
}
.m-0_5r{
    margin: 0.5rem;
}
.m-0_75r{
    margin: 0.75rem;
}
.m-1r{
    margin: 1rem;
}
.m-2r{
    margin: 2rem;
}
.m-3r{
    margin: 3rem;
}
.m-4r{
    margin: 4rem;
}
.m-5r{
    margin: 5rem;
}

.mx-1{
    margin-left: 1px;
    margin-right: 1px;
}
.mx-1r{
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-2{
    margin-left: 2px;
    margin-right: 2px;
}
.mx-2r{
    margin-left: 2rem;
    margin-right: 2rem;
}
.mx-3{
    margin-left: 3px;
    margin-right: 3px;
}
.mx-3r{
    margin-left: 3rem;
    margin-right: 3rem;
}
.mx-4{
    margin-left: 4px;
    margin-right: 4px;
}
.mx-5{
    margin-left: 5px;
    margin-right: 5px;
}
.mx-10{
    margin-left: 10px;
    margin-right: 10px;
}
.mx-15{
    margin-left: 15px;
    margin-right: 15px;
}

.my-1{
    margin: 1px 0;
}
.my-1r{
    margin: 1rem 0;
}
.my-2{
    margin: 2px 0;
}
.my-2r{
    margin: 2rem 0;
}
.my-3{
    margin: 3px 0;
}
.my-3r{
    margin: 3rem 0;
}
.my-4{
    margin: 4px 0;
}
.my-5{
    margin-top: 5px;
    margin-bottom: 5px;
}
.my-10{
    margin-top: 10px;
    margin-bottom: 10px;
}
.my-15{
    margin-top: 15px;
    margin-bottom: 15px;
}

.ml-1r{
    margin-left: 1rem;
}
.ml-2r{
    margin-left: 2rem;
}
.ml-3r{
    margin-left: 3rem;
}
.ml-300{
    margin-left: 300px;
}

.mr-1r{
    margin-right: 1rem;
}
.mr-2r{
    margin-right: 2rem;
}
.mr-3r{
    margin-right: 3rem;
}

.mt-1r{
    margin-top: 1rem;
}
.mt-2r{
    margin-top: 2rem;
}
.mt-3r{
    margin-top: 3rem;
}
.mb-1r{
    margin-bottom: 1rem;
}
.mb-2r{
    margin-bottom: 2rem;
}
.mb-3r{
    margin-bottom: 3rem;
}

.b-0{
    border: 0;
}
.b-1{
    border: 1px;
}
.b-2{
    border: 2px;
}
.b-3{
    border: 3px;
}
.bt-1{
    border-top: 1px;
}
.bt-2{
    border-top: 2px;
}
.bt-3{
    border-top: 3px;
}
.bb-1{
    border-bottom: 1px;
}
.bb-2{
    border-bottom: 2px;
}
.bb-3{
    border-bottom: 3px;
}
.bl-1{
    border-left: 1px;
}
.bl-2{
    border-left: 2px;
}
.bl-3{
    border-left: 3px;
}
.br-1{
    border-right: 1px;
}
.br-2{
    border-right: 2px;
}
.br-3{
    border-right: 3px;
}

.b-solid{
    border-style: solid;
}
.b-dash{
    border-style: dashed;
}
.b-dot{
    border-style: dotted;
}
.bb-1dot{
    border-bottom: 1px dotted;
}
.bb-1dash{
    border-bottom: 1px dashed;
}

.b-primary{
    border-color: var(--primary);
}
.b-secondary{
    border-color: var(--secondary);
}
.b-highlight{
    border-color: var(--highlight);
}
.b-light{
    border-color: var(--light);
}
.b-dark{
    border-color: var(--dark);
}
.b-gray{
    border-color: var(--gray);
}
.b-white{
    border-color: var(--white);
}

.b-1s-primary{
    border: 1px solid var(--primary);
}
.b-1s-secondary{
    border: 1px solid var(--secondary);
}
.b-1s-highlight{
    border: 1px solid var(--highlight);
}
.b-1s-light{
    border: 1px solid var(--light);
}
.b-1s-dark{
    border: 1px solid var(--dark);
}
.b-1s-warning{
    border: 1px solid var(--warning);
}
.b-1s-white{
    border: 1px solid var(--white);
}
.b-1s-black{
    border: 1px solid var(--black);
}

.circle{
    border-radius: 50%;
}
.b-r5{
    border-radius: 5px;
}
.b-r10{
    border-radius: 10px;
}
.b-r15{
    border-radius: 15px;
}
.b-r20{
    border-radius: 20px;
}
.b-r25{
    border-radius: 25px;
}
.b-r50{
    border-radius: 50px;
}

.bt-r5{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.bt-r10{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.bt-r15{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.bt-r20{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.bt-r25{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
.bt-r50{
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.br-r5{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.br-r10{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.br-r15{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
.br-r20{
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.br-r25{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
.br-r50{
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.bb-r5{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.bb-r10{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.bb-r15{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.bb-r20{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.bb-r25{
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
.bb-r50{
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.bl-r5{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.bl-r10{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.bl-r15{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.bl-r15{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.bl-r20{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
.bl-r25{
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}
.bl-r50{
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.p-0{
    padding: 0;
}
.p-5{
    padding: 5px;
}
.p-10{
    padding: 10px;
}.p-15{
    padding: 15px;
}
.p-20{
    padding: 20px;
}
.p-25{
    padding: 25px;
}

.px-5{
    padding-left: 5px;
    padding-right: 5px;
}
.px-10{
    padding-left: 10px;
    padding-right: 10px;
}
.px-15{
    padding-left: 15px;
    padding-right: 15px;
}
.py-5{
    padding-top: 5px;
    padding-bottom: 5px;
}
.py-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.py-15{
    padding-top: 15px;
    padding-bottom: 15px;
}
.py-20{
    padding-top: 20px;
    padding-bottom: 20px;
}
.py-25{
    padding-top: 25px;
    padding-bottom: 25px;
}

.p-0_25r{
    padding: 0.25rem;
}
.p-0_5r{
    padding: 0.5rem;
}
.p-0_75r{
    padding: 0.75rem;
}
.p-1r{
    padding: 1rem;
}
.p-2r{
    padding: 2rem;
}
.px-1r{
    padding: 0 1rem;
}
.py-1r{
    padding: 1rem 0;
}
.px-2r{
    padding: 0 2rem;
}
.py-2r{
    padding: 2rem 0;
}
.pr-1r{
    padding-right: 1rem;
}
.pl-1r{
    padding-left: 1rem;
}
.pr-2r{
    padding-right: 2rem;
}
.pl-2r{
    padding-left: 2rem;
}
.pr-3r{
    padding-right: 3rem;
}
.pl-3r{
    padding-left: 3rem;
}

.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}
.xx-small{
    font-size: xx-small;
}
.x-small{
    font-size: x-small;
}
.smaller{
    font-size: smaller;
}
.small{
    font-size: small;
} 
.medium{
    font-size: medium;
}
.large{
    font-size: large;
} 
.larger{
    font-size: larger;
} 
.x-large{
    font-size: x-large;
}  
.xx-large{
    font-size: xx-large;
}  

.fs-0_5r{
    font-size: 0.5rem;
}
.fs-0_55r{
    font-size: 0.55rem;
}
.fs-0_6r{
    font-size: 0.6rem;
}
.fs-0_65r{
    font-size: 0.65rem;
}
.fs-0_7r{
    font-size: 0.7rem;
}
.fs-0_75r{
    font-size: 0.75rem;
}
.fs-0_8r{
    font-size: 0.8rem;
}
.fs-0_85r{
    font-size: 0.85rem;
}
.fs-0_9r{
    font-size: 0.9rem;
}
.fs-0_95r{
    font-size: 0.95rem;
}
.fs-1r{
    font-size: 1rem;
}
.fs-1_1r{
    font-size: 1.1rem;
}
.fs-1_15r{
    font-size: 1.15rem;
}
.fs-1_2r{
    font-size: 1.2rem;
}
.fs-1_25r{
    font-size: 1.25rem;
}
.fs-1_3r{
    font-size: 1.3rem;
}
.fs-1_4r{
    font-size: 1.4rem;
}
.fs-1_5r{
    font-size: 1.5rem;
}
.fs-1_6r{
    font-size: 1.6rem;
}
.fs-1_75r{
    font-size: 1.75rem;
}
.fs-2r{
    font-size: 2rem;
}
.fs-2_5r{
    font-size: 2.5rem;
}
.fs-3r{
    font-size: 3rem;
}
.fs-3_5r{
    font-size: 3.5rem;
}
.fs-4r{
    font-size: 4rem;
}
.fs-4_5r{
    font-size: 4.5rem;
}
.fs-5r{
    font-size: 5rem;
}
.fs-6r{
    font-size: 6rem;
}

.fw-bold{
    font-weight: bold;
}
.fw-bolder{
    font-weight: bolder;
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}
.fw-800{
    font-weight: 800;
}
.fw-900{
    font-weight: 900;
}

.no-decoration{
    text-decoration: none;
}

.fc-primary{
    color: var(--primary);
}
.fc-secondary{
    color: var(--secondary);
}
.fc-highlight{
    color: var(--highlight);
}
.fc-info{
    color: var(--info);
}
.fc-warning{
    color: var(--warning);
}
.fc-danger{
    color: var(--danger);
}

.fc-light{
    color: var(--light);
}
.fc-dark{
    color: var(--dark);
}
.fc-white{
    color: var(--white);
}
.fc-gray{
    color: var(--gray);
}
.fc-lightgray{
    color: var(--gray-light);
}

.fc-pink{
    color: var(--pink);
}
.fc-red{
    color: var(--red);
}
.fc-orange{
    color: var(--orange);
}
.fc-yellow{
    color: var(--yellow);
}
.fc-green{
    color: var(--green);
}
.fc-limegreen{
    color: var(--limegreen);
}
.fc-teal{
    color: var(--teal);
}
.fc-cyan{
    color: var(--cyan);
}
.fc-blue{
    color: var(--blue);
}
.fc-lightblue{
    color: var(--blue-light);
}
.fc-indigo{
    color: var(--indigo);
}
.fc-purple{
    color: var(--purple);
}

.text-gray-300{
    color: gray;
    font-weight: 300;
}
.text-gray-400{
    color: gray;
    font-weight: 400;
}
.text-gray-500{
    color: gray;
    font-weight: 500;
}
.gray {
    color: #CCCCCC;
}
.darkgray {
    color:#555;
}
.white {
    color:#FFF;
}

.big-gray {
    color:#CCC;
    font-size: 1.5rem;
    font-weight:bold; 
}
.big-red {
    color:#F00;
    font-size: 1.5rem;
    font-weight:bold; 
}
.big-orange {
    color:#F90;
    font-size: 1.5rem;
    font-weight:bold; 
}
.primary {
    color: var(--primary);
}
.secondary {
    color: var(--secondary);
}
.highlight {
    color: var(--highlight);
}

.hover-primary:hover {
    color: var(--primary);
}
.hover-secondary:hover {
    color: var(--secondary);
}
.hover-highlight:hover {
    color: var(--highlight);
}
.hover-light:hover {
    color: var(--light);
}
.hover-dark:hover {
    color: var(--dark);
}

.gradient-text{
    background-image: linear-gradient(90deg, var(--primary), var(--secondary));
    background-clip: text;
    color: transparent;
}