/*  COLOR
    -----------------------------------------------------------------------------------------------
*/



:root,
[data-bs-theme=light]
{

    /* BODY */

    --x-body-font: 'Montserrat', sans-serif;

    --x-body-backcolor: #ffffff;



    /* NAVIGATION */

    --x-top-navigation-font: 'Montserrat', sans-serif;

    --x-top-navigation-forecolor: #333333;
    --x-top-navigation-backcolor: #090909;

    --x-top-navigation-hover-forecolor: #ffffff;
    --x-top-navigation-hover-backcolor: #ff4800;



    /* MODAL */

    --x-modal-font: 'Montserrat', sans-serif;

    --x-modal-forecolor : #555555;

    --x-modal-content-backcolor: #292a2d;
    --x-modal-warning-backcolor: #f2a600;
    --x-modal-success-backcolor: #12c99b;
    --x-modal-error-backcolor: #e41749;
    --x-modal-note-backcolor: #0676ed;

    --x-modal-close-forecolor: #ffffff;



    /* TITLE - SUB TITLE */

    --x-title-font: 'Montserrat', sans-serif;

    --x-title-forecolor: #333333;



    /* INPUT / LABEL / BORDER / ICON / LIST */

    --x-input-text-font: 'Montserrat', sans-serif;

    --x-input-text-forecolor: #555555;
    --x-input-label-forecolor: #555555;

    --x-input-border-forecolor: #cccccc;
    --x-input-border-hover-forecolor: #ff6000;
    --x-input-border-focus-forecolor: #ff4800;



    /* COLOR */

    --x-color-white: #ffffff;

    --x-color-orange: #ff4800;



}



/*  CORE
    -----------------------------------------------------------------------------------------------
*/



*,
*::before,
*::after 
{

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}



html
{

    height: 100%;

}



body
{

    margin: 0;
    padding: 0;

    margin-left: auto;
    margin-right: auto;

    background: var(--x-body-backcolor);
    color: var(--x-body-forecolor);

    overflow-x: hidden;
    overflow-y: auto;

}



a:link
{

    text-decoration: none;

}



a:visited
{

    text-decoration: none;

}



/*
a:hover
{

    text-decoration: none;

}
*/



/*  IMAGE
    -----------------------------------------------------------------------------------------------
*/



img
{

    display: block;

    border-width: 0;

    max-width: 100%;
    height: auto;

}



.img_left
{

    margin-right: auto;

}



.img_right
{

    margin-left: auto;

}



@media screen and (max-width:1199.98px)
{

    .img_left
    {

        margin-right: auto;
        margin-left: auto;

    }



    .img_right
    {

        margin-right: auto;
        margin-left: auto;

    }

}



/*  ALIGNMENT
    -----------------------------------------------------------------------------------------------
*/



.left
{

    text-align: left;

}



.center
{

    text-align: center !important;

    margin-left: auto;
    margin-right: auto;

    left: 0;
    right: 0;

}



.right
{

    text-align: right;

}



.justify
{

    text-align: justify;

}



/*  POSITION
    -----------------------------------------------------------------------------------------------
*/



.relative
{

    position: relative;

}



.absolute
{

    position: absolute;

}



/*  COLUMN
    -----------------------------------------------------------------------------------------------
*/



.flexbox
{

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    width: 100%;

}



.column_01
{

    flex: 0 0 5%;
    max-width: 5%;

    overflow-wrap: anywhere;

}



.column_02
{

    flex: 0 0 10%;
    max-width: 10%;

    overflow-wrap: anywhere;

}



.column_03
{

    flex: 0 0 15%;
    max-width: 15%;

    overflow-wrap: anywhere;

}



.column_04
{

    flex: 0 0 20%;
    max-width: 20%;

    overflow-wrap: anywhere;

}



.column_05
{

    flex: 0 0 25%;
    max-width: 25%;

    overflow-wrap: anywhere;

}



.column_06
{

    flex: 0 0 30%;
    max-width: 30%;

    overflow-wrap: anywhere;

}



.column_07
{

    flex: 0 0 35%;
    max-width: 35%;

    overflow-wrap: anywhere;

}



.column_08
{

    flex: 0 0 40%;
    max-width: 40%;

    overflow-wrap: anywhere;

}



.column_09
{

    flex: 0 0 45%;
    max-width: 45%;

    overflow-wrap: anywhere;

}



.column_10
{

    flex: 0 0 50%;
    max-width: 50%;

    overflow-wrap: anywhere;

}



.column_11
{

    flex: 0 0 55%;
    max-width: 55%;

    overflow-wrap: anywhere;

}



.column_12
{

    flex: 0 0 60%;
    max-width: 60%;

    overflow-wrap: anywhere;

}



.column_13
{

    flex: 0 0 65%;
    max-width: 65%;

    overflow-wrap: anywhere;

}



.column_14
{

    flex: 0 0 70%;
    max-width: 70%;

    overflow-wrap: anywhere;

}



.column_15
{

    flex: 0 0 75%;
    max-width: 75%;

    overflow-wrap: anywhere;

}



.column_16
{

    flex: 0 0 80%;
    max-width: 80%;

    overflow-wrap: anywhere;

}



.column_17
{

    flex: 0 0 85%;
    max-width: 85%;

    overflow-wrap: anywhere;

}



.column_18
{

    flex: 0 0 90%;
    max-width: 90%;

    overflow-wrap: anywhere;

}



.column_19
{

    flex: 0 0 95%;
    max-width: 95%;

    overflow-wrap: anywhere;

}



.column_20
{

    flex: 0 0 100%;
    max-width: 100%;

    overflow-wrap: anywhere;

}



.flex_01
{

    flex: 0 0 5%;
    max-width: 5%;

    overflow-wrap: anywhere;

}



.flex_02
{

    flex: 0 0 10%;
    max-width: 10%;

    overflow-wrap: anywhere;

}



.flex_03
{

    flex: 0 0 15%;
    max-width: 15%;

    overflow-wrap: anywhere;

}



.flex_04
{

    flex: 0 0 20%;
    max-width: 20%;

    overflow-wrap: anywhere;

}



.flex_05
{

    flex: 0 0 25%;
    max-width: 25%;

    overflow-wrap: anywhere;

}



.flex_06
{

    flex: 0 0 30%;
    max-width: 30%;

    overflow-wrap: anywhere;

}



.flex_07
{

    flex: 0 0 35%;
    max-width: 35%;

    overflow-wrap: anywhere;

}



.flex_08
{

    flex: 0 0 40%;
    max-width: 40%;

    overflow-wrap: anywhere;

}



.flex_09
{

    flex: 0 0 45%;
    max-width: 45%;

    overflow-wrap: anywhere;

}



.flex_10
{

    flex: 0 0 50%;
    max-width: 50%;

    overflow-wrap: anywhere;

}



.flex_11
{

    flex: 0 0 55%;
    max-width: 55%;

    overflow-wrap: anywhere;

}



.flex_12
{

    flex: 0 0 60%;
    max-width: 60%;

    overflow-wrap: anywhere;

}



.flex_13
{

    flex: 0 0 65%;
    max-width: 65%;

    overflow-wrap: anywhere;

}



.flex_14
{

    flex: 0 0 70%;
    max-width: 70%;

    overflow-wrap: anywhere;

}



.flex_15
{

    flex: 0 0 75%;
    max-width: 75%;

    overflow-wrap: anywhere;

}



.flex_16
{

    flex: 0 0 80%;
    max-width: 80%;

    overflow-wrap: anywhere;

}



.flex_17
{

    flex: 0 0 85%;
    max-width: 85%;

    overflow-wrap: anywhere;

}



.flex_18
{

    flex: 0 0 90%;
    max-width: 90%;

    overflow-wrap: anywhere;

}



.flex_19
{

    flex: 0 0 95%;
    max-width: 95%;

    overflow-wrap: anywhere;

}



.flex_20
{

    flex: 0 0 100%;
    max-width: 100%;

    overflow-wrap: anywhere;

}



@media screen and (max-width:1499.98px)
{



}



@media screen and (max-width:1199.98px)
{



}



@media screen and (max-width:991.98px)
{



    .flex_05
    {

        flex: 0 0 100%;
        max-width: 100%;

    }

    .flex_06
    {

        flex: 0 0 100%;
        max-width: 100%;

    }

    .flex_09
    {

        flex: 0 0 100%;
        max-width: 100%;

    }



}



@media screen and (max-width:767.98px)
{



}



@media screen and (max-width:575.98px)
{



}



/*  FLEXBOX GAP
    -----------------------------------------------------------------------------------------------
*/



.gap
{

    column-gap: 30px;
    row-gap: 50px;

}



.gap_form
{

    column-gap: 20px;
    row-gap: 20px;

}



/*  FLEXBOX SET
    -----------------------------------------------------------------------------------------------
*/



.flex_top
{

    order: 2;

}



.flex_bottom
{

    order: 1;

}



@media screen and (max-width:991.98px)
{

    .flex_top
    {

        order: 1;

    }



    .flex_bottom
    {

        order: 2;

    }

}



/*  MARGIN PADDING XY%
    -----------------------------------------------------------------------------------------------
*/



.mt_20
{

    margin-top: 20px;

}



.mt_40
{

    margin-top: 40px;

}



.mt_60
{

    margin-top: 60px;

}



.mt_80
{

    margin-top: 80px;

}



.mt_100
{

    margin-top: 100px;

}



.mt_200
{

    margin-top: 200px;

}



.mt_300
{

    margin-top: 300px;

}



/*  NAVIGATION / MAIN TOP
    -----------------------------------------------------------------------------------------------
*/



.navigation 
{

    font-family: var(--x-top-navigation-font);
    font-size: 14px;
    font-weight: 400;

    letter-spacing: 1px;

    background: transparent;

    width: 100%;
    max-width: 100%;

    z-index: 99;

    display: flex;

    flex-wrap: wrap;

}



nav 
{

    text-align: right;
    margin-left: auto;

}



nav ul 
{

    margin: 0;
    padding: 0;

    margin-right: 25px;

    margin-top: 10px;

    list-style: none;

}



nav ul li
{

    float: left;
    position: relative;

    z-index: 11;

}



nav ul li a
/*nav ul li a:visited*/
{

    display: block;

    padding: 0 0 0 50px;

    background: transparent;
    color: var(--x-top-navigation-forecolor);

    text-decoration: none;
    text-align: right;

}



nav ul li span
/*nav ul li a:visited*/
{

    display: block;

    padding: 20px 10px 0 10px;

    background: transparent;
    color: var(--x-top-navigation-forecolor);

    text-decoration: none;
    text-align: right;

}



nav ul li a:hover
/*nav ul li a:visited:hover*/
{

    background: transparent;
    color: var(--x-top-navigation-hover-forecolor);

}



nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after
{

    padding-left: 4px;
    content: ' ▾';

}



nav ul li ul li 
{

    min-width: 210px;

}



nav ul li ul li a 
{

    text-align: left;

    padding: 15px;

    line-height: 20px;
    color: var(--x-top-navigation-forecolor);

}



nav ul li ul li a:hover
{

    background: transparent;
    background-color: var(--x-top-navigation-hover-backcolor);

}



.nav-dropdown 
{

    margin-left: -100px;

    position: absolute;

    top: 40px;

    display: none;

    z-index: 21;

    background: var(--x-top-navigation-backcolor);

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

}



/* Mobile navigation */
.nav-mobile 
{

    display: none;

    position: absolute;

    top: 10px;

    right: 50px;

    /*
    height: 70px;
    width: 70px;
    */

}



@media screen and (max-width: 4000px) 
{

    .nav-mobile
    {

        display: block;

    }



    nav
    {

        width: 98%;

    }



    nav ul
    {

        display: none;

        position: absolute;

        z-index: 21;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

        width: 96%;

        background-color: var(--x-top-navigation-backcolor);

        margin-top: 0;

    }



    nav ul ul
    {

        display: none;

        position: absolute;

        z-index: 22;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

        width: 99%;

        background-color: var(--x-top-navigation-backcolor);

        margin-top: 0;
        margin-bottom: 5px;

    }



    nav ul li
    {

        float: none;

    }



    nav ul li a
    /*nav ul li a:visited*/
    {

        padding: 15px;

        background: var(--x-top-navigation-backcolor);
        color: #ffffff !important;

        text-align: left;

    }



    nav ul li a:hover
    /*nav ul li a:visited:hover*/
    {

        background: var(--x-top-navigation-hover-backcolor);
        color: var(--x-top-navigation-hover-forecolor);

    }



    nav ul li ul li a
    {

        padding-left: 30px;

    }



    .nav-dropdown 
    {

        margin: 0;

        position: static;

    }



    nav ul li span
    {

        display: block;

        padding: 20px 10px 0 10px;

        background: var(--x-top-navigation-backcolor);
        color: #ffffff;

        line-height: 0;

        text-decoration: none;
        text-align: right;

    }

}



@media screen and (min-width: 4000px) 
{

    .nav-list 
    {

        display: block !important;

    }

}



#nav-toggle 
{

    position: absolute;

    top: 3px;
    
    cursor: pointer;
    padding: 20px 30px 15px 5px;

}



#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after 
{
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 25px;
    background: var(--x-top-navigation-forecolor);

    position: absolute;
    display: block;
    content: '';
    transition: all 200ms ease-in-out;
}



#nav-toggle span:before 
{

    top: -10px;

}



#nav-toggle span:after
{

    bottom: -9px;
    width: 15px;
    right: 0;

}



#nav-toggle.active span 
{

    background-color: transparent;
}



#nav-toggle.active span:before, #nav-toggle.active span:after
{

    top: 0;

}



#nav-toggle.active span:before
{

    transform: rotate(45deg);

}



#nav-toggle.active span:after
{

    transform: rotate(-45deg);

}



.no_click
{

   pointer-events: none;
   cursor: default;

}



/*  WARNING - SUCCESS - ERROR - NOTE / MODAL
    -----------------------------------------------------------------------------------------------
*/



.modal
{

    display: none;
    position: fixed;

    z-index: 1;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    overflow: auto;

    background-color: rgba(0,0,0,0.4);

    font-family: var(--x-modal-font);
    font-size: 14px;
    font-weight: normal;

    color: var(--x-modal-forecolor);

    line-height: 23px;
    letter-spacing: 1px;

    margin: 0;
    padding: 0;

    margin-left: auto;
    margin-right: auto;

    text-align: justify;

}



.modal_content
{

    margin: 5% auto;
    padding: 10px;

    background-color: var(--x-modal-content-backcolor);

    width: 60%;

    border: 1px solid rgba(255,255,255, 0.10); 
    box-shadow: rgba(0, 0, 0, 0.55) 0px 3px 6px, rgba(0, 0, 0, 0.55) 0px 3px 6px; 
    background: rgba(41,42,45, 0.3); 
    backdrop-filter: blur(14px);

}



.modal_warning
{

    position: absolute;

    right: 1px;
    bottom: 1px;

    padding: 10px;

    background-color: var(--x-modal-warning-backcolor);

    width: 40%;

}



.modal_success
{

    position: absolute;

    right: 1px;
    bottom: 1px;

    padding: 10px;

    background-color: var(--x-modal-success-backcolor);

    width: 40%;

}



.modal_error
{

    position: absolute;

    right: 1px;
    bottom: 1px;

    padding: 10px;

    background-color: var(--x-modal-error-backcolor);

    width: 40%;

}



.modal_note
{

    position: absolute;

    right: 1px;
    bottom: 1px;

    padding: 10px;

    background-color: var(--x-modal-note-backcolor);

    width: 40%;

}



.modal_close
{

    position: absolute;

    color: var(--x-modal-close-forecolor);

    right: 5px;

    font-size: 30px;
    font-weight: bold;

    vertical-align: middle;

}



.modal_close:hover,
.modal_close:focus
{

    text-decoration: none;

    transition: transform 0.5s;
    transform: scale(1.3);

    cursor: pointer;

}



@media screen and (max-width: 991.98px) 
{

    .modal_content
    {

        width: 80%;

    }



    .modal_warning
    {

        width: 80%;

    }



    .modal_success
    {

        width: 80%;

    }



    .modal_error
    {

        width: 80%;

    }



    .modal_note
    {

        width: 80%;

    }

}



/*  TOOLTIP
    -----------------------------------------------------------------------------------------------
*/



.tooltip 
{

    position: relative;

    display: inline-block;

    color: var(--x-tooltip-icon-forecolor);

}



.tooltip .tooltiptext
{

    position: fixed;

    visibility: hidden;

    width: 40%;

    background-color: var(--x-tooltip-backcolor);
    color: var(--x-tooltip-forecolor);
  
    text-align: center;

    padding: 15px;

    z-index: 999;
    right: 1px;
    bottom: 1px;
  
    opacity: 0;
    transition: opacity 1s ease;

    white-space: normal;
    word-break: break-word;

}



/*  SCROLLBAR
    -----------------------------------------------------------------------------------------------
*/



::-webkit-scrollbar 
{

    width: 5px;

}



::-webkit-scrollbar-track 
{

    background: #595959; 

}



::-webkit-scrollbar-thumb
{

    background: #999999; 
    border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover
{

    background: #777777; 

}