$base-color: #160d29;
$md-dropdown-background-color:#eaeaea;
$label-color: #6c0e87;
$text-color: #160d29 !default;
$white: #FFFFFF;


$padding-base-vertical: 2px;
$padding-base-horizontal: 8px;

//flex-container

@mixin f-flex{
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.f-flex{
    @include f-flex;
}


@mixin f-flex-inline{
    display: -webkit-inline-box!important;
    display: -ms-inline-flexbox!important;
    display: inline-flex!important;
}

.f-flex-inline{
    @include f-flex-inline;  

}




//flex-direction

@mixin f-flex-row{
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: normal!important;
        -ms-flex-direction: row!important;
            flex-direction: row!important;
}


.f-flex-row{
    @include f-flex-row;

}



@mixin f-flex-row-reverse{

    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: reverse!important;
        -ms-flex-direction: row-reverse!important;
            flex-direction: row-reverse!important;

}

.f-flex-row-reverse{
    @include f-flex-row-reverse;

}


@mixin f-flex-column{

    -webkit-box-orient: vertical!important;
    -webkit-box-direction: normal!important;
        -ms-flex-direction: column!important;
            flex-direction: column!important;

}

.f-flex-column{
    @include f-flex-column;

}



@mixin f-flex-col-reverse {

    -webkit-box-orient: vertical!important;
    -webkit-box-direction: reverse!important;
        -ms-flex-direction: column-reverse!important;
            flex-direction: column-reverse!important;


}

.f-flex-col-reverse {
    @include f-flex-col-reverse;

}



//flex-wrap
@mixin f-flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;


}

.f-flex-wrap {
    @include f-flex-wrap;

}


@mixin f-flex-no-wrap {
    -ms-flex-wrap: nowrap!important;
    flex-wrap: nowrap!important;    
    
}

.f-flex-no-wrap {
    @include f-flex-no-wrap; 

}



@mixin f-flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse!important;
    flex-wrap: wrap-reverse!important;

}

.f-flex-wrap-reverse {
    @include f-flex-wrap-reverse;

}



//justify-content

@mixin f-flex-justify-start{
    -webkit-box-pack: start!important;
    -ms-flex-pack: start!important;
        justify-content: flex-start!important;

}

.f-flex-justify-start{
    @include f-flex-justify-start;


}

@mixin f-flex-justify-end {
    -webkit-box-pack: end!important;
    -ms-flex-pack: end!important;
        justify-content: flex-end!important;

}

.f-flex-justify-end {
    @include f-flex-justify-end ;
}

@mixin f-flex-justify-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
        justify-content: center !important;

}

.f-flex-justify-center {
    @include f-flex-justify-center;

}


@mixin f-flex-justify-space-between {
    -webkit-box-pack: justify!important;
    -ms-flex-pack: justify!important;
        justify-content: space-between!important;

}

.f-flex-justify-space-between {
    @include f-flex-justify-space-between;

}

@mixin f-flex-justify-space-around {
    -ms-flex-pack: distribute!important;
    justify-content: space-around !important;

}

.f-flex-justify-space-around {
    @include f-flex-justify-space-around;
}



@mixin f-flex-justify-space-evenly{
    -webkit-box-pack: space-evenly !important;
    -ms-flex-pack: space-evenly !important;
        justify-content: space-evenly !important;

}

.f-flex-justify-space-evenly{
    @include f-flex-justify-space-evenly;


}

//align-items

@mixin f-flex-align-items-stretch {
    -webkit-box-align: stretch!important;
    -ms-flex-align: stretch!important;
        align-items: stretch!important;

}
.f-flex-align-items-stretch {
    @include f-flex-align-items-stretch;


}


@mixin f-flex-align-items-start {
    -webkit-box-align: start!important;
    -ms-flex-align: start!important;
        align-items: flex-start!important;
}

.f-flex-align-items-start {
    @include f-flex-align-items-start;

}


@mixin f-flex-align-items-end {
    -webkit-box-align: end!important;
    -ms-flex-align: end!important;
        align-items: flex-end!important;

}

.f-flex-align-items-end {
    @include f-flex-align-items-end;

}



@mixin f-flex-align-items-center {
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
        align-items: center!important;

}

.f-flex-align-items-center {

    @include f-flex-align-items-center;
}

@mixin f-flex-align-items-baseline {
    -webkit-box-align: baseline!important;
    -ms-flex-align: baseline!important;
        align-items: baseline!important;


}

.f-flex-align-items-baseline {
    @include f-flex-align-items-baseline;


}


//align-content

@mixin f-flex-align-content-start {
    -ms-flex-line-pack: start!important;
    align-content: flex-start!important;

}

.f-flex-align-content-start {
    @include f-flex-align-content-start;

}

@mixin f-flex-align-content-end {
    -ms-flex-line-pack: end!important;
        align-content: flex-end!important;
}
.f-flex-align-content-end{
    @include f-flex-align-content-end;

}

@mixin f-flex-align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;

}

.f-flex-align-content-center {
    @include f-flex-align-content-center;
}

@mixin f-flex-align-content-stretch{
    -ms-flex-line-pack: stretch!important;
    align-content: stretch!important;

}

.f-flex-align-content-stretch{
    @include f-flex-align-content-stretch;

}

@mixin f-flex-align-content-between {
    -ms-flex-line-pack: justify!important;
    align-content: space-between!important;

}

.f-flex-align-content-between {
    @include f-flex-align-content-between;


}

@mixin f-flex-align-content-around {
    -ms-flex-line-pack: distribute!important;
    align-content: space-around!important;

}

.f-flex-align-content-around {
    @include f-flex-align-content-around;


}

@mixin f-flex-align-content-space-evenly{
    -ms-flex-line-pack: space-evenly!important;
    align-content: space-evenly!important;

}

.f-flex-align-content-space-evenly{
    @include f-flex-align-content-space-evenly;


}

//align-self

@mixin f-flex-align-self-auto {
    -ms-flex-item-align: auto !important;
    -ms-grid-row-align: auto !important;
    align-self: auto !important;

}
.f-flex-align-self-auto {
    @include f-flex-align-self-auto;

}


@mixin f-flex-align-self-start{
    -ms-flex-item-align: start!important;
    align-self: flex-start!important;

}

.f-flex-align-self-start{
    @include f-flex-align-self-start;


}

@mixin f-flex-align-self-end {
    -ms-flex-item-align: end!important;
    align-self: flex-end!important;

}

.f-flex-align-self-end {
    @include f-flex-align-self-end;


}

@mixin f-flex-align-self-center {
    -ms-flex-item-align: center !important;
    -ms-grid-row-align: center !important;
    align-self: center !important;

}

.f-flex-align-self-center {
    @include f-flex-align-self-center;


}
@mixin f-flex-align-self-baseline {
    -ms-flex-item-align: baseline!important;
    align-self: baseline!important;

}
.f-flex-align-self-baseline {
    @include f-flex-align-self-baseline;


}

@mixin f-flex-align-self-stretch{
    -ms-flex-item-align: stretch!important;
    -ms-grid-row-align: stretch!important;
    align-self: stretch!important;

}
.f-flex-align-self-stretch{
    @include f-flex-align-self-stretch;

}


@mixin f-vertical-align-middle{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
  
    align-items: center;
  }
.f-vertical-align-middle{
    @include f-vertical-align-middle;
}


@mixin break-text {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
  
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
  
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  
  }


  .break-text {
      @include break-text;

  }


// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
@mixin f-flex-shortcut($fg: 1, $fs: 0, $fb: auto) {

    // Set a variable to be used by box-flex properties
    $fg-boxflex: $fg;
  
    // Box-Flex only supports a flex-grow value so lets grab the
    // first item in the list and just return that.
    @if type-of($fg) == 'list' {
      $fg-boxflex: nth($fg, 1);
    }
  
     -webkit-box: $fg-boxflex;
        -moz-box: $fg-boxflex;
    -webkit-flex: $fg $fs $fb;
        -ms-flex: $fg $fs $fb;
            flex: $fg $fs $fb;
  }


// Display Order
// - applies to: flex items
// <integer>
@mixin f-order($int: 0) {
    -webkit-box-ordinal-group: $int + 1;
       -moz-box-ordinal-group: $int + 1;
                -webkit-order: $int;
               -ms-flex-order: $int;
                        order: $int;
  }


// Flex grow factor
// - applies to: flex items
// <number>
@mixin f-flex-grow($int: 1) {
    -webkit-box-flex: $int;
       -moz-box-flex: $int;
   -webkit-flex-grow: $int;
            -ms-flex: $int;
           flex-grow: $int;
 }



// Flex shrink
// - applies to: flex item shrink factor
// <number> 
@mixin f-flex-shrink($int: 0) {
    -webkit-flex-shrink: $int;
       -moz-flex-shrink: $int;
               -ms-flex: $int;
            flex-shrink: $int;
  }



  // Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width> 
@mixin f-flex-basis($value: auto) {
    -webkit-flex-basis: $value;
            flex-basis: $value;
  }


  


  //utilities

//hide exact

@media screen and (max-width: 599px){
    .f-hide-xs{
        display: none!important;
    }

}

@media screen and (min-width: 600px) and (max-width: 959px){
    .f-hide-sm{
        display: none!important;
    }

}

@media screen and (min-width: 960px) and (max-width: 1279px){
    .f-hide-md{
        display: none!important;
    }

}

@media screen and (min-width: 1280px) and (max-width: 1919px){
    .f-hide-lg{
        display: none!important;
    }

}

@media screen and (min-width: 1920px) and (max-width: 5000px){
    .f-hide-xl{
        display: none!important;
    }

}

//end hide exact



//hide less than
@media screen and (max-width: 599px){
    .f-hide-lt-sm{
        display: none!important;
    }
}

@media screen and (max-width: 959px){
    .f-hide-lt-md{
        display: none!important;
    }
}
    
@media screen and (max-width: 1279px){
    .f-hide-lt-lg{
        display: none!important;
    }

}

@media screen and (max-width: 1919px){
    .f-hide-lt-xl{
        display: none!important;
    }

}
//end hide less than



//hide greater than
@media screen and (min-width: 600px){
    .f-hide-gt-xs{
        display: none!important;
    }
}

@media screen and (min-width: 960px){
    .f-hide-gt-sm{
        display: none!important;
    }

}

@media screen and (min-width: 1280px){
    .f-hide-gt-md{
        display: none!important;
    }
}

@media screen and (min-width: 1920px){
    .f-hide-gt-lg{
        display: none!important;
    }
}

//end //hide greater than






//end hide