/* =====================================================
    direct
   ===================================================== */ 
.direct-left{
    direction:ltr;
}
.direct-right{
    direction:rtl;
}
.text-left{
    text-align:left;
}
.text-right{
    text-align:right;
}
.text-center{
    text-align:center;
}
.text-justify{
    text-align:justify;
}

/* =====================================================
    padding
   ===================================================== */
.p-base {
    padding: var(--gutter-base);
}
.p-sm {
    padding: var(--gutter-sm);
}
.p-lg {
    padding: var(--gutter-lg);
}
.pt-base {
    padding-top: var(--gutter-base);
}
.pt-sm {
    padding-top: var(--gutter-sm);
}
.pt-lg {
    padding-top: var(--gutter-lg);
}
.pr-base {
    padding-right: var(--gutter-base);
}
.pr-sm {
    padding-right: var(--gutter-sm);
}
.pr-lg {
    padding-right: var(--gutter-lg);
}
.pb-base {
    padding-bottom: var(--gutter-base);
}
.pb-sm {
    padding-bottom: var(--gutter-sm);
}
.pb-lg {
    padding-bottom: var(--gutter-lg);
}
.pl-base {
    padding-left: var(--gutter-base);
}
.pl-sm {
    padding-left: var(--gutter-sm);
}
.pl-lg {
    padding-left: var(--gutter-lg);
}
.no-padding{
    padding:unset;
}
.no-padding-top{
    padding-top:unset;
}
.no-padding-right{
    padding-right:unset;
}
.no-padding-bottom{
    padding-bottom:unset;
}
.no-padding-left{
    padding-left:unset;
}

 /* =====================================================
    margin
   ===================================================== */
.m-base {
    margin: var(--gutter-base);
}
.m-sm {
    margin: var(--gutter-sm);
}
.m-lg {
    margin: var(--gutter-lg);
}
.mt-base {
    margin-top: var(--gutter-base);
}
.mt-sm {
    margin-top: var(--gutter-sm);
}
.mt-lg {
    margin-top: var(--gutter-lg);
}
.mr-base {
    margin-right: var(--gutter-base);
}
.mr-sm {
    margin-right: var(--gutter-sm);
}
.mr-lg {
    margin-right: var(--gutter-lg);
}
.mb-base {
    margin-bottom: var(--gutter-base);
}
.mb-sm {
    margin-bottom: var(--gutter-sm);
}
.mb-lg {
    margin-bottom: var(--gutter-lg);
}
.ml-base {
    margin-left: var(--gutter-base);
}
.ml-sm {
    margin-left: var(--gutter-sm);
}
.ml-lg {
    margin-left: var(--gutter-lg);
}
.no-margin{
    margin:unset;
}
.no-margin-top{
    margin-top:unset;
}
.no-margin-right{
    margin-right:unset;
}
.no-margin-bottom{
    margin-bottom:unset;
}
.no-margin-left{
    margin-left:unset;
}
.mr-auto{
    margin-right: auto;
}
.ml-auto{
    margin-left: auto;
}
.mt-auto{
    margin-top: auto;
}
.mb-auto{
    margin-bottom: auto;
}
 /* =====================================================
    border
   ===================================================== */
 .bordered{
     border:1px solid var(--gray);
 }
 .border-top{
     border-top:1px solid var(--gray);
 }
.border-right{
    border-right:1px solid var(--gray);
}
.border-bottom{
    border-bottom:1px solid var(--gray);
}
.border-left{
    border-left:1px solid var(--gray);
}
 .no-border{
     border:unset;
 }
 .no-border-top{
     border-top:unset;
 }
 .no-border-right{
     border-right:unset;
 }
 .no-border-bottom{
     border-bottom:unset;
 }
 .no-border-left{
     border-left:unset;
 }
 .border-gray-light{
     border-color:var(--gray-light);
 }
 .border-gray-lighter{
     border-color:var(--gray-lighter);
 }
.border-gray-dark{
    border-color:var(--gray-dark);
}
.border-gray-darker{
    border-color:var(--gray-darker);
}
.border-primary-base{
    border-color:var(--primary-base-border);
}
.border-primary-light{
    border-color:var(--primary-light-border);
}
.border-primary-dark{
    border-color:var(--primary-dark-border);
}
.border-dashed{
    border-style:dashed;
}
.border-double{
    border-style:double;
}
.border-dotted{
    border-style:dotted;
}
.border-top-dashed{
    border-top-style:dashed;
}
.border-top-double{
    border-top-style:double;
}
.border-top-dotted{
    border-top-style:dotted;
}
.border-right-dashed{
    border-right-style:dashed;
}
.border-right-double{
    border-right-style:double;
}
.border-right-dotted{
    border-right-style:dotted;
}
.border-bottom-dashed{
    border-bottom-style:dashed;
}
.border-bottom-double{
    border-bottom-style:double;
}
.border-bottom-dotted{
    border-bottom-style:dotted;
}
.border-left-dashed{
    border-left-style:dashed;
}
.border-left-double{
    border-left-style:double;
}
.border-left-dotted{
    border-left-style:dotted;
}

 /* =====================================================
    border radius
   ===================================================== */
.border-radius-base{
    border-radius:var(--border-radius-base);
}
.border-radius-sm{
    border-radius:var(--border-radius-sm);
}
.border-radius-lg{
    border-radius:var(--border-radius-lg);
}
.border-top-left-radius-base{
    border-top-left-radius:var(--border-radius-base);
}
.border-top-right-radius-base{
    border-top-right-radius:var(--border-radius-base);
}
.border-bottom-left-radius-base{
    border-bottom-left-radius:var(--border-radius-base);
}
.border-bottom-right-radius-base{
    border-bottom-right-radius:var(--border-radius-base);
}
.border-top-left-radius-sm{
    border-top-left-radius:var(--border-radius-sm);
}
.border-top-right-radius-sm{
    border-top-right-radius:var(--border-radius-sm);
}
.border-bottom-left-radius-sm{
    border-bottom-left-radius:var(--border-radius-sm);
}
.border-bottom-right-radius-sm{
    border-bottom-right-radius:var(--border-radius-sm);
}
.border-top-left-radius-lg{
    border-top-left-radius:var(--border-radius-lg);
}
.border-top-right-radius-lg{
    border-top-right-radius:var(--border-radius-lg);
}
.border-bottom-left-radius-lg{
    border-bottom-left-radius:var(--border-radius-lg);
}
.border-bottom-right-radius-lg{
    border-bottom-right-radius:var(--border-radius-lg);
}
.no-border-radius{
    border-radius:unset;
}
.no-border-top-left-radius{
    border-top-left-radius:unset;
}
.no-border-top-right-radius{
    border-top-right-radius:unset;
}
.no-border-bottom-left-radius{
    border-bottom-left-radius:unset;
}
.no-border-bottom-right-radius{
    border-bottom-right-radius:unset;
}
 /* =====================================================
    bg
   ===================================================== */
 .bg-white{
     background-color:#fff;
 }
 .bg-black{
     background-color:#000;
 }
 .bg-gray{
     background-color:var(--gray);
 }
.bg-gray-light{
    background-color:var(--gray-light);
}
.bg-gray-lightre{
    background-color:var(--gray-lighter);
}
.bg-gray-dark{
    background-color:var(--gray-dark);
}
.bg-gray-darker{
    background-color:var(--gray-darker);
}
.bg-primary-base{
    background-color:var(--primary-base-bg);
}
.bg-primary-dark{
    background-color:var(--primary-dark-bg);
}
.bg-primary-light{
    background-color:var(--primary-light-bg);    
}
.bg-secondary-base{
    background-color:var(--secondary-base-bg);
}
.bg-secondary-dark{
    background-color:var(--secondary-dark-bg);
}
.bg-secondary-light{
    background-color:var(--secondary-light-bg);
}

 /* =====================================================
    color
   ===================================================== */
.color-white{
    color:#fff;
}
.color-black{
    color:#000;
}
 .color-gray{
     color:var(--gray);
 }
.color-gray-light{
    color:var(--gray-light);
}
.color-gray-lightre{
    color:var(--gray-lighter);
}
.color-gray-dark{
    color:var(--gray-dark);
}
.color-gray-darker{
    color:var(--gray-darker);
}
.color-primary-base{
    color:var(--primary-base-color);
}
.color-primary-dark{
    color:var(--primary-dark-color);
}
.color-primary-light{
    color:var(--primary-light-color);    
}
.color-secondary-base{
    color:var(--secondary-base-color);
}
.color-secondary-dark{
    color:var(--secondary-dark-color);
}
.color-secondary-light{
    color:var(--secondary-light-color);
}


 /* =====================================================
    font
   ===================================================== */
.font-arial{
    font-family:Arial;
}