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



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

    /* BODY */

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

    --x-body-backcolor: #ffffff;
    --x-body-forecolor: #555555;



    /* A LINK */

    --x-link-forecolor: #262626;
    --x-link-visited-forecolor: #262626;
    --x-link-hover-forecolor: #ff4800;



    /* NAVIGATION */

    --x-top-navigation-link-forecolor: #212226;
    --x-top-navigation-link-backcolor: #292a2d;

    --x-top-navigation-link-hover-forecolor: #212226;
    --x-top-navigation-link-hover-backcolor: #ff4800;


    /* MODAL */

    --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: 'Raleway', sans-serif;

    --x-title-forecolor: #393939;



    /* INPUT */

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

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



    /* COLOR */

    --x-color-white: #ffffff;
    --x-color-black: #000000;

    --x-color-orange: #ff5200;

    --x-color-darkgray: #222222;
    --x-color-lightgray: #999999;

}



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



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

    -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-color: var(--x-body-backcolor);
    color: var(--x-body-forecolor);

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

}



a:link
{

    font-family: var(--x-body-font);
    font-size: 15px;
    font-weight: normal;

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

    text-decoration: none;

    line-height: normal;
    letter-spacing: .5px;

}



a:visited
{

    font-family: var(--x-body-font);
    font-size: 15px;
    font-weight: normal;

    color: var(--x-link-visited-forecolor);

    text-decoration: none;

    line-height: normal;
    letter-spacing: .5px;

}


/*
a:hover
{

    font-family: var(--x-font-01);
    font-size: 13px;
    font-weight: normal;

    color: var(--x-link-hover-forecolor);

    text-decoration: none;

    line-height: normal;
    letter-spacing: 2px;

}
*/


/*  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;

}



.inblock
{

    display: inline-block;

}



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



.flexbox
{

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    justify-content: center;

    width: 100%;

}



.column_01
{

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

    word-break: break-word;

}



.column_02
{

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

    word-break: break-word;

}



.column_03
{

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

    word-break: break-word;

}



.column_04
{

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

    word-break: break-word;

}



.column_05
{

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

    word-break: break-word;

}



.column_06
{

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

    word-break: break-word;

}



.column_07
{

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

    word-break: break-word;

}



.column_08
{

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

    word-break: break-word;

}



.column_09
{

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

    word-break: break-word;

}



.column_10
{

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

    word-break: break-word;

}



.column_11
{

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

    word-break: break-word;

}



.column_12
{

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

    word-break: break-word;

}



.column_13
{

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

    word-break: break-word;

}



.column_14
{

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

    word-break: break-word;

}



.column_15
{

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

    word-break: break-word;

}



.column_16
{

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

    word-break: break-word;

}



.column_17
{

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

    word-break: break-word;

}



.column_18
{

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

    word-break: break-word;

}



.column_19
{

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

    word-break: break-word;

}



.column_20
{

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

    word-break: break-word;

}



.flex_01
{

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

    word-break: break-word;

}



.flex_02
{

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

    word-break: break-word;

}



.flex_03
{

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

    word-break: break-word;

}



.flex_04
{

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

    word-break: break-word;

}



.flex_05
{

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

    word-break: break-word;

}



.flex_06
{

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

    word-break: break-word;

}



.flex_07
{

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

    word-break: break-word;

}



.flex_08
{

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

    word-break: break-word;

}



.flex_09
{

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

    word-break: break-word;

}



.flex_10
{

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

    word-break: break-word;

}



.flex_11
{

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

    word-break: break-word;

}



.flex_12
{

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

    word-break: break-word;

}



.flex_13
{

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

    word-break: break-word;

}



.flex_14
{

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

    word-break: break-word;

}



.flex_15
{

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

    word-break: break-word;

}



.flex_16
{

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

    word-break: break-word;

}



.flex_17
{

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

    word-break: break-word;

}



.flex_18
{

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

    word-break: break-word;

}



.flex_19
{

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

    word-break: break-word;

}



.flex_20
{

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

    word-break: break-word;

}



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



}



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



}



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



    .flex_02
    {

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

    }

    .flex_03
    {

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

    }

    .flex_04
    {

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

    }

    .flex_05
    {

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

    }

    .flex_06
    {

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

    }

    .flex_08
    {

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

    }

    .flex_09
    {

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

    }

    .flex_10
    {

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

    }

    .flex_11
    {

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

    }

    .flex_12
    {

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

    }



}



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



}



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



}



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



.gap
{

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

}



.gap_form
{

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

}



.flex_between
{

    justify-content: space-between;

}



.flex_top
{

    order: 2;

}



.flex_bottom
{

    order: 1;

}



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

    .flex_top
    {

        order: 1;

    }



    .flex_bottom
    {

        order: 2;

    }

}



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



.orange
{

    color: var(--x-color-orange);

}



.white
{

    color: var(--x-color-white);

}



.green
{

    color: #25D366;

}



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



.mt_20
{

    margin-top: 20px;

}



.mt_40
{

    margin-top: 40px;

}



.mt_80
{

    margin-top: 80px;

}



.mt_100
{

    margin-top: 100px;

}



.mt_200
{

    margin-top: 200px;

}



.mt_300
{

    margin-top: 300px;

}



.mt_400
{

    margin-top: 400px;

}



/*  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-input-font);
    font-size: 13px;
    font-weight: normal;

    color: var(--x-input-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%;

    }

}



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



::-webkit-scrollbar 
{

    width: 5px;
    overflow: auto;

}



::-webkit-scrollbar-track 
{

    background: #595959; 

}



::-webkit-scrollbar-thumb
{

    background: #999999; 

}



::-webkit-scrollbar-thumb:hover
{

    background: #999999; 

}