@import url("account.css");
@import url("animations.css");
@import url("audio.css");
@import url("cloud.css");
@import url("contextMenu.css");
@import url("form-ui.css");
@import url("message.css");
@import url("systemBlocks.css");
@import url("test.css");
@import url("app.css");
@import url("style.css");
@import url("cloud/emptyCloud.css");
@import url("message/emptyMainPage.css");
@import url("VR/style.css");
@import url("components.css");

@import "../assets/flag-icons/css/flag-icons.min.css";

/*@media (prefers-reduced-motion: reduce) {*/
/*    .element {*/
/*        animation: none;*/
/*    }*/
/*}*/

/*!* Theme *!*/
/*@media (prefers-color-scheme: dark) {  }*/

/*!* no-preference, high, low, more, less *!*/
/*@media (prefers-contrast: more) { }*/

/*body:dir(rtl) { direction: rtl; text-align: right; }*/

/*@media (hover: none) {*/
/*    *:hover {*/
/*        background: none;*/
/*    }*/
/*}*/



.center-block {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover */
    .hover-item {
        transition: background-color 0.15s;
    }
    .hover-item:hover {
        background-color: var(--color-hover);
    }

/* Overflow  */
    .o-hidden  { overflow: hidden !important; }
    .o-visible { overflow: visible !important; }
    .o-auto    { overflow: auto !important; }
    .o-scroll  { overflow: scroll !important; }

    .ox-hidden { overflow-x: hidden !important; }
    .ox-visible{ overflow-x: visible !important; }
    .ox-auto   { overflow-x: auto !important; }
    .ox-scroll { overflow-x: scroll !important; }

    .oy-hidden { overflow-y: hidden !important; }
    .oy-visible{ overflow-y: visible !important; }
    .oy-auto   { overflow-y: auto !important; }
    .oy-scroll { overflow-y: scroll !important; }

    .o-clip    { overflow: clip !important; }
    .ox-clip   { overflow-x: clip !important; }
    .oy-clip   { overflow-y: clip !important; }

    .o-ios     { -webkit-overflow-scrolling: touch; }
    .o-contain { overscroll-behavior: contain !important; }
    .o-none    { overscroll-behavior: none !important; }
    .o-gutter  { scrollbar-gutter: stable both-edges; }


/* Cursor utilities */
    .c-pointer   { cursor: pointer; }
    .c-default   { cursor: default; }
    .c-text      { cursor: text; }
    .c-move      { cursor: move; }
    .c-not-allowed { cursor: not-allowed; }
    .c-wait      { cursor: wait; }
    .c-cross     { cursor: crosshair; }
    .c-grab      { cursor: grab; }
    .c-grabbing  { cursor: grabbing; }

/* SVG Colors */
    .svg-red { color: #F94949; }

/* Box sizing */
    .bx-bb { box-sizing: border-box; }
    .bx-cb { box-sizing: content-box; }

/* Width */
    .w-auto  { width: auto; }
    .w-15    { width: 15px; }
    .w-35    { width: 35px; }
    .w-200   { width: 200px; }
    .w-300   { width: 300px; }
    .w-500   { width: 500px; }
    .w-full  { width: 100%;  }

/* Height */
    .h-auto  { height: auto; }
    .h-35    { height: 35px; }
    .h-40    { height: 40px; }
    .h-45    { height: 45px; }
    .h-full  { height: 100%;  }

/* max height */
    .-max-h-400 { max-height: 400px; }
    .-max-h-500 { max-height: 500px; }
    .-max-h-600 { max-height: 600px; }
    .-max-h-700 { max-height: 700px; }

/* POSITION */
    .pos-relative   { position: relative !important; }
    .pos-absolute   { position: absolute !important; }
    .pos-fixed      { position: fixed !important; }
    .pos-sticky     { position: sticky !important; }

/* Grig Elements */
    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }


/* DISPLAY */
    .d-b   { display: block; }
    .d-ib  { display: inline-block; }
    .d-i   { display: inline; }
    .d-f   { display: flex; }
    .d-if  { display: inline-flex; }
    .d-g   { display: grid; }
    .d-ig  { display: inline-grid; }
    .d-n   { display: none; }

/* FLEX Direction */
    .fd-r  { flex-direction: row; }
    .fd-rr { flex-direction: row-reverse; }
    .fd-c  { flex-direction: column; }
    .fd-cr { flex-direction: column-reverse; }

/* FLEX Wrap */
    .fw-n  { flex-wrap: nowrap; }
    .fw-w  { flex-wrap: wrap; }
    .fw-wr { flex-wrap: wrap-reverse; }

/* FLEX Justify */
    .jc-start   { justify-content: flex-start; }
    .jc-center  { justify-content: center; }
    .jc-end     { justify-content: flex-end; }
    .jc-between { justify-content: space-between; }
    .jc-around  { justify-content: space-around; }
    .jc-evenly  { justify-content: space-evenly; }

/* FLEX Align Item */
    .ai-start  { align-items: flex-start; }
    .ai-center { align-items: center; }
    .ai-end    { align-items: flex-end; }
    .ai-stretch{ align-items: stretch; }

/* FLEX Align Content */
    .ac-start  { align-content: flex-start; }
    .ac-center { align-content: center; }
    .ac-end    { align-content: flex-end; }
    .ac-between{ align-content: space-between; }
    .ac-around { align-content: space-around; }
    .ac-stretch{ align-content: stretch; }

/* FLEX Grow & Shrink */
    .fg-0 { flex-grow: 0; }
    .fg-1 { flex-grow: 1; }

    .fs-0 { flex-shrink: 0; }
    .fs-1 { flex-shrink: 1; }

    .flex-1 { flex: 1; }

    .minw-0 { min-width: 0; }

/* Gap  */
    .gap-2_5 { gap: 2.5px;   }
    .gap-5   { gap: 5px;   }
    .gap-10  { gap: 10px;  }
    .gap-15  { gap: 15px;  }
    .gap-20  { gap: 20px;  }
    .gap-25  { gap: 25px;  }
    .gap-30  { gap: 30px;  }
    .gap-50  { gap: 50px;  }
    .gap-100 { gap: 100px; }

/* Border-radius */
    .br-0   { border-radius: 0; }
    .br-5   { border-radius: 5px; }
    .br-10  { border-radius: 10px; }
    .br-50p { border-radius: 50%; }

/* Margin */
    /* Margin X */
        .mx-0  { margin-left: 0; margin-right: 0; }
        .mx-5  { margin-left: 5px; margin-right: 5px; }
        .mx-10 { margin-left: 10px; margin-right: 10px; }
        .mx-15 { margin-left: 15px; margin-right: 15px; }
        .mx-20 { margin-left: 20px; margin-right: 20px; }
        .mx-25 { margin-left: 25px; margin-right: 25px; }
        .mx-30 { margin-left: 30px; margin-right: 30px; }
        .mx-35 { margin-left: 35px; margin-right: 35px; }
        .mx-40 { margin-left: 40px; margin-right: 40px; }

    /* Margin Y */
        .my-0  { margin-top: 0; margin-bottom: 0; }
        .my-5  { margin-top: 5px; margin-bottom: 5px; }
        .my-10 { margin-top: 10px; margin-bottom: 10px; }
        .my-15 { margin-top: 15px; margin-bottom: 15px; }
        .my-20 { margin-top: 20px; margin-bottom: 20px; }
        .my-25 { margin-top: 25px; margin-bottom: 25px; }
        .my-30 { margin-top: 30px; margin-bottom: 30px; }
        .my-35 { margin-top: 35px; margin-bottom: 35px; }
        .my-40 { margin-top: 40px; margin-bottom: 40px; }

    /* Top */
        .mt-0  { margin-top: 0; }
        .mt-5  { margin-top: 5px; }
        .mt-10 { margin-top: 10px; }
        .mt-15 { margin-top: 15px; }
        .mt-20 { margin-top: 20px; }
        .mt-25 { margin-top: 25px; }
        .mt-50 { margin-top: 50px; }

    /* Bottom */
        .mb-0  { margin-bottom: 0px; }
        .mb-5  { margin-bottom: 5px; }
        .mb-10 { margin-bottom: 10px; }
        .mb-15 { margin-bottom: 15px; }
        .mb-20 { margin-bottom: 20px; }
        .mb-25 { margin-bottom: 25px; }

    /* Right */
        .mr-0  { margin-right: 0px; }
        .mr-5  { margin-right: 5px; }
        .mr-10 { margin-right: 10px; }
        .mr-15 { margin-right: 15px; }
        .mr-20 { margin-right: 20px; }
        .mr-25 { margin-right: 25px; }

    /* Left */
        .ml-5  { margin-left: 5px; }
        .ml-10 { margin-left: 10px; }
        .ml-15 { margin-left: 15px; }
        .ml-20 { margin-left: 20px; }
        .ml-25 { margin-left: 25px; }

/* Padding */
    .p-t-0 {padding-top: 0 !important;}
    .pT5 {padding-top: 5px !important;}
    .pT10 {padding-top: 10px !important;}
    .pT15 {padding-top: 15px !important;}
    .pT20 {padding-top: 20px !important;}
    .pT25 {padding-top: 25px !important;}
    .pT30 {padding-top: 30px !important;}

    .pB0 {padding-bottom: 0px !important;}
    .pB5 {padding-bottom: 5px !important;}
    .pB10 {padding-bottom: 10px !important;}
    .pB15 {padding-bottom: 15px !important;}
    .pB20 {padding-bottom: 20px !important;}
    .pB25 {padding-bottom: 25px !important;}
    .pB30 {padding-bottom: 30px !important;}

    .pL0 { padding-left: 0 !important; }
    .pL5 { padding-left: 5px !important; }
    .pL10 { padding-left: 10px !important; }
    .pL15 { padding-left: 15px !important; }
    .pL20 { padding-left: 20px !important; }
    .pL25 { padding-left: 25px !important; }
    .pL30 { padding-left: 30px !important; }
    .pL40 { padding-left: 40px !important; }

    .pR5 { padding-right: 5px !important; }
    .pR10 { padding-right: 10px !important; }
    .pR15 { padding-right: 15px !important; }
    .pR20 { padding-right: 20px !important; }
    .pR25 { padding-right: 25px !important; }
    .pR30 { padding-right: 30px !important; }

    .pad5 { padding: 5px; }
    .pad6_5 { padding: 6.5px; }
    .pad7_5 { padding: 7.5px; }
    .pad10 { padding: 10px; }
    .pad12_5 { padding: 12.5px; }
    .pad15 { padding: 15px; }
    .pad20 { padding: 20px; }
    .pad25 { padding: 25px; }
    .pad30 { padding: 30px; }
    .pad50 { padding: 50px; }

    .pad0-5 {padding: 0 5px;}
    .pad0-10 {padding: 0 10px;}
    .pad0-15 {padding: 0 15px;}
    .pad0-20 {padding: 0 20px;}
    .pad0-25 {padding: 0 25px;}
    .pad0-50 {padding: 0 50px;}

    .pad2_5-5 {padding: 2.5px 5px;}
    .pad2_5-10 {padding: 2.5px 10px;}
    .pad2_5-15 {padding: 2.5px 15px;}
    .pad2_5-20 {padding: 2.5px 20px;}

    .pad5-0 {padding: 5px 0px;}
    .pad5-5 {padding: 5px 5px;}
    .pad5-6_5 {padding: 5px 6.5px;}
    .pad5-10 {padding: 5px 10px;}
    .pad5-15 {padding: 5px 15px;}
    .pad5-25 {padding: 5px 25px;}

    .pad7_5-10 { padding: 7.5px 10px; }
    .pad7_5-15 { padding: 7.5px 15px; }
    .pad7_5-25 { padding: 7.5px 25px; }

    .pad10-0 {padding: 10px 0;}
    .pad10-5 {padding: 10px 5px;}
    .pad10-10 {padding: 10px 10px;}
    .pad10-15 {padding: 10px 15px;}
    .pad10-25 {padding: 10px 25px;}

    .pad15-0 { padding: 15px 0px; }
    .pad15-5 { padding: 15px 5px; }
    .pad15-10 { padding: 15px 10px; }
    .pad15-15 { padding: 15px 15px; }
    .pad15-20 { padding: 15px 20px; }
    .pad15-25 { padding: 15px 25px; }

    .pad20-40 { padding: 20px 40px; }

    .pad25-10 {padding: 25px 10px;}
    .pad25-50 {padding: 25px 50px;}

    /* Padding X */
        .px-10 { padding-left: 10px; padding-right: 10px; }
        .px-15 { padding-left: 15px; padding-right: 15px; }
        .px-20 { padding-left: 20px; padding-right: 20px; }
        .px-25 { padding-left: 25px; padding-right: 25px; }
        .px-30 { padding-left: 30px; padding-right: 30px; }
        .px-35 { padding-left: 35px; padding-right: 35px; }
        .px-40 { padding-left: 40px; padding-right: 40px; }

    /* Padding Y */
        .py-2_5 { padding-top: 2.5px; padding-bottom: 2.5px; }
        .py-5   { padding-top: 5px;   padding-bottom: 5px;   }
        .py-10  { padding-top: 10px;  padding-bottom: 10px;  }
        .py-15  { padding-top: 15px;  padding-bottom: 15px;  }
        .py-20  { padding-top: 20px;  padding-bottom: 20px;  }
        .py-25  { padding-top: 25px;  padding-bottom: 25px;  }
        .py-30  { padding-top: 30px;  padding-bottom: 30px;  }
        .py-35  { padding-top: 35px;  padding-bottom: 35px;  }
        .py-40  { padding-top: 40px;  padding-bottom: 40px;  }

/* FONT SIZE */
    .fs-12 { font-size: 12px; line-height: 16px; }
    .fs-13 { font-size: 13px; line-height: 18px; }
    .fs-14 { font-size: 14px; line-height: 20px; }
    .fs-16 { font-size: 16px; line-height: 24px; }
    .fs-18 { font-size: 18px; line-height: 26px; }
    .fs-20 { font-size: 20px; line-height: 28px; }
    .fs-24 { font-size: 24px; line-height: 32px; }
    .fs-32 { font-size: 32px; line-height: 40px; }

/* font-weight */
    .fw-100 { font-weight: 100; }
    .fw-200 { font-weight: 200; }
    .fw-300 { font-weight: 300; }
    .fw-400 { font-weight: 400; }
    .fw-500 { font-weight: 500; }
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }


/* Style Icon */
    .icon15  { width: 15px; height: 15px;}
    .icon20  { width: 20px; height: 20px;}
    .icon25  { width: 25px; height: 25px; }
    .icon30  { width: 30px; height: 30px; }
    .icon35  { width: 35px; height: 35px; }
    .icon40  { width: 40px; height: 40px; }
    .icon45  { width: 45px; height: 45px; }
    .icon60  { width: 60px; height: 60px; }
    .icon75  { width: 75px; height: 75px; }
    .icon100 { width: 100px; height: 100px; }
    .icon150 { width: 150px; height: 150px; }
    .icon200 { width: 200px; height: 200px; }

/* Text Align */
    .ta-left   { text-align: left; }
    .ta-center { text-align: center; }
    .ta-right  { text-align: right; }

/* Edit Scroll */
    ::-webkit-scrollbar-thumb {
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
        cursor: pointer;
        background-color: #ababab;
    }
    ::-webkit-scrollbar-thumb:hover {
        background-clip: content-box;
        background-color: #969494;
        cursor: pointer;
    }
    ::-webkit-scrollbar {
        width: 16px;
        cursor: pointer;
    }
    .scroll-container {
        overflow-y: auto;
    }

    @media (max-width: 768px) {
        .scroll-container::-webkit-scrollbar {
            width: 0;
            background: transparent;
        }
        .scroll-container {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
    }

/* Border */
    .b1 { border-width: 1px; }
    .b2 { border-width: 2px; }
    .b3 { border-width: 3px; }

    .border-clue  { border-color: var(--color-hover); }
    .border-dark  { border-color: #333; }
    .border-light { border-color: #eee; }

    /* Style Border */
    .border-solid  { border-style: solid; }
    .border-dashed { border-style: dashed; }
    .border-dotted { border-style: dotted; }

/* responsive */
    @media (max-width: 1000px) {
        .md-w-full           { width: 100%; }
        .md-flex-col         { flex-direction: column; }
        .md-flex-col-reverse { flex-direction: column-reverse; }
        .md-justify-start    { justify-content: flex-start; }
        .md-justify-end      { justify-content: flex-end; }
    }
    @media (max-width: 750px) {
        .md-w-full-phone     { width: 100%; }
        .md-flex-col-phone   { flex-direction: column; }
        .md-ai-center-phone  { align-items: center; }
    }