/*----------------------------------------------------------
    VARIABLES
----------------------------------------------------------*/

:root {
    --grid-columns: repeat(12,1fr);
    --grid-gap: 1.25em;
    --login-page-padding: 3.75em;
}

@media (max-width: 1400px) {

    :root {
        --grid-gap: 1.125em;
        --login-page-padding: 3em;
    }
    
}

@media (max-width: 1280px) {

    :root {
        --grid-gap: 1em;
        --login-page-padding: 2.5em;
    }
    
}

@media (max-width: 1024px) {

    :root {
        --login-page-padding: 1.75em;
    }
    
}

@media (max-width: 768px) {

    :root {
        --login-page-padding: 1em;
    }
    
}

/*----------------------------------------------------------
    GENERAL

    XXL	- 1600	- col-X
    XL 	- 1400	- col-xl-X
    L 	- 1280	- col-lg-X
    M 	- 1024	- col-md-X
    S 	- 768	- col-sm-X
    XS 	- 500	- col-xs-X
----------------------------------------------------------*/

.grid-container:not(.hidden) {
    display: grid;
    grid-template-columns: var(--grid-columns);
    grid-column-gap: var(--grid-gap);
}

.fas-normal .grid-container:not(.hidden),
.logged-in .grid-container:not(.hidden) {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--login-page-padding);
}

/* COLUMNS */

.col-1      { grid-column: span 1; }
.col-2      { grid-column: span 2; }
.col-3      { grid-column: span 3; }
.col-4      { grid-column: span 4; }
.col-5      { grid-column: span 5; }
.col-6      { grid-column: span 6; }
.col-7      { grid-column: span 7; }
.col-8      { grid-column: span 8; }
.col-9      { grid-column: span 9; }
.col-10     { grid-column: span 10; }
.col-11     { grid-column: span 11; }
.col-12     { grid-column: span 12; }

@media (max-width: 1600px) {

    .col-xxl-1   { grid-column: span 1; }
    .col-xxl-2   { grid-column: span 2; }
    .col-xxl-3   { grid-column: span 3; }
    .col-xxl-4   { grid-column: span 4; }
    .col-xxl-5   { grid-column: span 5; }
    .col-xxl-6   { grid-column: span 6; }
    .col-xxl-7   { grid-column: span 7; }
    .col-xxl-8   { grid-column: span 8; }
    .col-xxl-9   { grid-column: span 9; }
    .col-xxl-10  { grid-column: span 10; }
    .col-xxl-11  { grid-column: span 11; }
    .col-xxl-12  { grid-column: span 12; }

}

@media (max-width: 1400px) {

    .col-xl-1   { grid-column: span 1; }
    .col-xl-2   { grid-column: span 2; }
    .col-xl-3   { grid-column: span 3; }
    .col-xl-4   { grid-column: span 4; }
    .col-xl-5   { grid-column: span 5; }
    .col-xl-6   { grid-column: span 6; }
    .col-xl-7   { grid-column: span 7; }
    .col-xl-8   { grid-column: span 8; }
    .col-xl-9   { grid-column: span 9; }
    .col-xl-10  { grid-column: span 10; }
    .col-xl-11  { grid-column: span 11; }
    .col-xl-12  { grid-column: span 12; }

}

@media (max-width: 1280px) {

    .col-lg-1   { grid-column: span 1; }
    .col-lg-2   { grid-column: span 2; }
    .col-lg-3   { grid-column: span 3; }
    .col-lg-4   { grid-column: span 4; }
    .col-lg-5   { grid-column: span 5; }
    .col-lg-6   { grid-column: span 6; }
    .col-lg-7   { grid-column: span 7; }
    .col-lg-8   { grid-column: span 8; }
    .col-lg-9   { grid-column: span 9; }
    .col-lg-10  { grid-column: span 10; }
    .col-lg-11  { grid-column: span 11; }
    .col-lg-12  { grid-column: span 12; }

}

@media (max-width: 1024px) {

    .col-md-1   { grid-column: span 1; }
    .col-md-2   { grid-column: span 2; }
    .col-md-3   { grid-column: span 3; }
    .col-md-4   { grid-column: span 4; }
    .col-md-5   { grid-column: span 5; }
    .col-md-6   { grid-column: span 6; }
    .col-md-7   { grid-column: span 7; }
    .col-md-8   { grid-column: span 8; }
    .col-md-9   { grid-column: span 9; }
    .col-md-10  { grid-column: span 10; }
    .col-md-11  { grid-column: span 11; }
    .col-md-12  { grid-column: span 12; }

}

@media (max-width: 768px) {

    .col-sm-1   { grid-column: span 1; }
    .col-sm-2   { grid-column: span 2; }
    .col-sm-3   { grid-column: span 3; }
    .col-sm-4   { grid-column: span 4; }
    .col-sm-5   { grid-column: span 5; }
    .col-sm-6   { grid-column: span 6; }
    .col-sm-7   { grid-column: span 7; }
    .col-sm-8   { grid-column: span 8; }
    .col-sm-9   { grid-column: span 9; }
    .col-sm-10  { grid-column: span 10; }
    .col-sm-11  { grid-column: span 11; }
    .col-sm-12  { grid-column: span 12; }

}

@media (max-width: 556px) {

    .col-xs-1   { grid-column: span 1; }
    .col-xs-2   { grid-column: span 2; }
    .col-xs-3   { grid-column: span 3; }
    .col-xs-4   { grid-column: span 4; }
    .col-xs-5   { grid-column: span 5; }
    .col-xs-6   { grid-column: span 6; }
    .col-xs-7   { grid-column: span 7; }
    .col-xs-8   { grid-column: span 8; }
    .col-xs-9   { grid-column: span 9; }
    .col-xs-10  { grid-column: span 10; }
    .col-xs-11  { grid-column: span 11; }
    .col-xs-12  { grid-column: span 12; }

}


/* INDENTS */

.col-1.col-indent-1     { grid-column: 2 / span 1; }
.col-2.col-indent-1     { grid-column: 2 / span 2; }
.col-3.col-indent-1     { grid-column: 2 / span 3; }
.col-4.col-indent-1     { grid-column: 2 / span 4; }
.col-5.col-indent-1     { grid-column: 2 / span 5; }
.col-6.col-indent-1     { grid-column: 2 / span 6; }
.col-7.col-indent-1     { grid-column: 2 / span 7; }
.col-8.col-indent-1     { grid-column: 2 / span 8; }
.col-9.col-indent-1     { grid-column: 2 / span 9; }
.col-10.col-indent-1     { grid-column: 2 / span 10; }
.col-11.col-indent-1     { grid-column: 2 / span 11; }

.col-1.col-indent-2     { grid-column: 3 / span 1; }
.col-2.col-indent-2     { grid-column: 3 / span 2; }
.col-3.col-indent-2     { grid-column: 3 / span 3; }
.col-4.col-indent-2     { grid-column: 3 / span 4; }
.col-5.col-indent-2     { grid-column: 3 / span 5; }
.col-6.col-indent-2     { grid-column: 3 / span 6; }
.col-7.col-indent-2     { grid-column: 3 / span 7; }
.col-8.col-indent-2     { grid-column: 3 / span 8; }
.col-9.col-indent-2     { grid-column: 3 / span 9; }
.col-10.col-indent-2     { grid-column: 3 / span 10; }

@media (max-width: 1280px) {

    .col-lg-1.col-lg-indent-1     { grid-column: 2 / span 1; }
    .col-lg-2.col-lg-indent-1     { grid-column: 2 / span 2; }
    .col-lg-3.col-lg-indent-1     { grid-column: 2 / span 3; }
    .col-lg-4.col-lg-indent-1     { grid-column: 2 / span 4; }
    .col-lg-5.col-lg-indent-1     { grid-column: 2 / span 5; }
    .col-lg-6.col-lg-indent-1     { grid-column: 2 / span 6; }
    .col-lg-7.col-lg-indent-1     { grid-column: 2 / span 7; }
    .col-lg-8.col-lg-indent-1     { grid-column: 2 / span 8; }
    .col-lg-9.col-lg-indent-1     { grid-column: 2 / span 9; }
    .col-lg-10.col-lg-indent-1     { grid-column: 2 / span 10; }
    .col-lg-11.col-lg-indent-1     { grid-column: 2 / span 11; }

    .col-lg-1.col-lg-indent-2     { grid-column: 3 / span 1; }
    .col-lg-2.col-lg-indent-2     { grid-column: 3 / span 2; }
    .col-lg-3.col-lg-indent-2     { grid-column: 3 / span 3; }
    .col-lg-4.col-lg-indent-2     { grid-column: 3 / span 4; }
    .col-lg-5.col-lg-indent-2     { grid-column: 3 / span 5; }
    .col-lg-6.col-lg-indent-2     { grid-column: 3 / span 6; }
    .col-lg-7.col-lg-indent-2     { grid-column: 3 / span 7; }
    .col-lg-8.col-lg-indent-2     { grid-column: 3 / span 8; }
    .col-lg-9.col-lg-indent-2     { grid-column: 3 / span 9; }
    .col-lg-10.col-lg-indent-2     { grid-column: 3 / span 10; }

}

@media (max-width: 1024px) {

    .col-md-1.col-md-indent-1     { grid-column: 2 / span 1; }
    .col-md-2.col-md-indent-1     { grid-column: 2 / span 2; }
    .col-md-3.col-md-indent-1     { grid-column: 2 / span 3; }
    .col-md-4.col-md-indent-1     { grid-column: 2 / span 4; }
    .col-md-5.col-md-indent-1     { grid-column: 2 / span 5; }
    .col-md-6.col-md-indent-1     { grid-column: 2 / span 6; }
    .col-md-7.col-md-indent-1     { grid-column: 2 / span 7; }
    .col-md-8.col-md-indent-1     { grid-column: 2 / span 8; }
    .col-md-9.col-md-indent-1     { grid-column: 2 / span 9; }
    .col-md-10.col-md-indent-1     { grid-column: 2 / span 10; }
    .col-md-11.col-md-indent-1     { grid-column: 2 / span 11; }
    .col-md-12.col-md-indent-0     { grid-column: span 12; }

    .col-md-1.col-md-indent-2     { grid-column: 3 / span 1; }
    .col-md-2.col-md-indent-2     { grid-column: 3 / span 2; }
    .col-md-3.col-md-indent-2     { grid-column: 3 / span 3; }
    .col-md-4.col-md-indent-2     { grid-column: 3 / span 4; }
    .col-md-5.col-md-indent-2     { grid-column: 3 / span 5; }
    .col-md-6.col-md-indent-2     { grid-column: 3 / span 6; }
    .col-md-7.col-md-indent-2     { grid-column: 3 / span 7; }
    .col-md-8.col-md-indent-2     { grid-column: 3 / span 8; }
    .col-md-9.col-md-indent-2     { grid-column: 3 / span 9; }
    .col-md-10.col-md-indent-2     { grid-column: 3 / span 10; }
    .col-md-12.col-md-indent-0     { grid-column: span 12; }

}

@media (max-width: 768px) {

    .col-sm-1.col-sm-indent-1     { grid-column: 2 / span 1; }
    .col-sm-2.col-sm-indent-1     { grid-column: 2 / span 2; }
    .col-sm-3.col-sm-indent-1     { grid-column: 2 / span 3; }
    .col-sm-4.col-sm-indent-1     { grid-column: 2 / span 4; }
    .col-sm-5.col-sm-indent-1     { grid-column: 2 / span 5; }
    .col-sm-6.col-sm-indent-1     { grid-column: 2 / span 6; }
    .col-sm-7.col-sm-indent-1     { grid-column: 2 / span 7; }
    .col-sm-8.col-sm-indent-1     { grid-column: 2 / span 8; }
    .col-sm-9.col-sm-indent-1     { grid-column: 2 / span 9; }
    .col-sm-10.col-sm-indent-1     { grid-column: 2 / span 10; }
    .col-sm-11.col-sm-indent-1     { grid-column: 2 / span 11; }
    .col-sm-12.col-sm-indent-0     { grid-column: span 12; }

    .col-sm-1.col-sm-indent-2     { grid-column: 3 / span 1; }
    .col-sm-2.col-sm-indent-2     { grid-column: 3 / span 2; }
    .col-sm-3.col-sm-indent-2     { grid-column: 3 / span 3; }
    .col-sm-4.col-sm-indent-2     { grid-column: 3 / span 4; }
    .col-sm-5.col-sm-indent-2     { grid-column: 3 / span 5; }
    .col-sm-6.col-sm-indent-2     { grid-column: 3 / span 6; }
    .col-sm-7.col-sm-indent-2     { grid-column: 3 / span 7; }
    .col-sm-8.col-sm-indent-2     { grid-column: 3 / span 8; }
    .col-sm-9.col-sm-indent-2     { grid-column: 3 / span 9; }
    .col-sm-10.col-sm-indent-2     { grid-column: 3 / span 10; }
    .col-sm-12.col-sm-indent-0     { grid-column: span 12; }

}

@media (max-width: 556px) {

    .col-xs-1.col-xs-indent-1     { grid-column: 2 / span 1; }
    .col-xs-2.col-xs-indent-1     { grid-column: 2 / span 2; }
    .col-xs-3.col-xs-indent-1     { grid-column: 2 / span 3; }
    .col-xs-4.col-xs-indent-1     { grid-column: 2 / span 4; }
    .col-xs-5.col-xs-indent-1     { grid-column: 2 / span 5; }
    .col-xs-6.col-xs-indent-1     { grid-column: 2 / span 6; }
    .col-xs-7.col-xs-indent-1     { grid-column: 2 / span 7; }
    .col-xs-8.col-xs-indent-1     { grid-column: 2 / span 8; }
    .col-xs-9.col-xs-indent-1     { grid-column: 2 / span 9; }
    .col-xs-10.col-xs-indent-1     { grid-column: 2 / span 10; }
    .col-xs-11.col-xs-indent-1     { grid-column: 2 / span 11; }
    .col-xs-12.col-xs-indent-0     { grid-column: span 12; }

    .col-xs-1.col-xs-indent-2     { grid-column: 3 / span 1; }
    .col-xs-2.col-xs-indent-2     { grid-column: 3 / span 2; }
    .col-xs-3.col-xs-indent-2     { grid-column: 3 / span 3; }
    .col-xs-4.col-xs-indent-2     { grid-column: 3 / span 4; }
    .col-xs-5.col-xs-indent-2     { grid-column: 3 / span 5; }
    .col-xs-6.col-xs-indent-2     { grid-column: 3 / span 6; }
    .col-xs-7.col-xs-indent-2     { grid-column: 3 / span 7; }
    .col-xs-8.col-xs-indent-2     { grid-column: 3 / span 8; }
    .col-xs-9.col-xs-indent-2     { grid-column: 3 / span 9; }
    .col-xs-10.col-xs-indent-2     { grid-column: 3 / span 10; }
    .col-xs-12.col-xs-indent-0     { grid-column: span 12; }

}

/*----------------------------------------------------------
    ORDER
----------------------------------------------------------*/

@media (max-width: 1280px) {

    .order-lg-1 { order: 1; }
    .order-lg-2 { order: 2; }
    .order-lg-3 { order: 3; }
    .order-lg-4 { order: 4; }
    .order-lg-5 { order: 5; }
    
}

@media (max-width: 1024px) {

    .order-md-1 { order: 1; }
    .order-md-2 { order: 2; }
    .order-md-3 { order: 3; }
    .order-md-4 { order: 4; }
    .order-md-5 { order: 5; }
    
}

@media (max-width: 768px) {

    .order-sm-1 { order: 1; }
    .order-sm-2 { order: 2; }
    .order-sm-3 { order: 3; }
    .order-sm-4 { order: 4; }
    .order-sm-5 { order: 5; }
    
}

@media (max-width: 556px) {

    .order-xs-1 { order: 1; }
    .order-xs-2 { order: 2; }
    .order-xs-3 { order: 3; }
    .order-xs-4 { order: 4; }
    .order-xs-5 { order: 5; }

}


/*----------------------------------------------------------
    ALIGN CONTENT
----------------------------------------------------------*/

.align-right { 
    text-align: right; 
}

@media (max-width: 1024px) {

    .align-md-right { text-align: right;  }
    
}

@media (max-width: 768px) {

    .align-sm-right { text-align: right;  }
    
}

@media (max-width: 556px) {

    .align-xs-right { text-align: right;  }

}

.align-left { 
    text-align: left; 
}

@media (max-width: 1024px) {

    .align-md-left { text-align: left;  }
    
}

@media (max-width: 768px) {

    .align-sm-left { text-align: left;  }
    
}

@media (max-width: 556px) {

    .align-xs-left { text-align: left;  }

}