@import "/public/__Global/Styles/global.css";

/*root*/
:root {
    --base-color: #13653c;
    --back-color: #F2F2F2;
    --box-color: #2C3E50;
    --div-color: #FFEBCA;

    --pop-color: #1f96fc;
    --bilt-color: #21aef1;
    --boarder-color: #033541;
    --select-color: #ffdd00;
    --hover-color: #ffa200;

    --green-color: #3cb878;
    --snow-color: #f8f8f8;
    --red-color: #cd0303;
    --yellow-color: #ffcc00;
    --gold-color: gold;
}

::-webkit-scrollbar-thumb {
    background: var(--box-color) !important;
}

html {
    position: fixed;
    direction: rtl;
    display: block;
    clear: both;
    height: 100vH;
    width: 100vW;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    overflow: hidden;
    z-index: 0;
    /*background: var(--back-color);*/
    background: transparent;
    transform-style: preserve-3d;
    perspective: 1000px;
    perspective-origin: center;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

body {
    position: relative;
    direction: ltr;
    display: block;
    clear: both;
    height: 100%;
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
    /*background: var(--back-color);*/
    background: transparent;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.clear {
    position: relative;
    display: block;
    height: 7px;
    clear: both;
}

img.logo_log {
    position: relative;
    width: auto;
    max-width: 60%;
    margin: 1% auto 3% auto;
    text-align: center;
    justify-content: center;
    display: block;
    overflow: hidden;
    height: auto;
    max-height: 60%;
}

ar {
    position: fixed;
    direction: ltr;
    display: block;
    clear: both;
    height: 100%;
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    z-index: 10;
}

ar .timer {
    position: absolute;
    margin: auto;
    display: block;
    background: rgb(33 32 32 / 60%);
    border: 2px solid #cfcfcf;
    z-index: 2;
    border-top: unset;
    padding: 10px 15px;
    color: #f8f8f8;
    font-family: 'per_add';
    font-size: 16px;
    max-width: 50%;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    justify-content: center;
    border-radius: 0px 0px 10px 10px;
}

ar .emtiaz {
    position: absolute;
    margin: auto;
    display: block;
    background: rgb(22 139 183 / 60%);
    border: 2px solid #cfcfcf;
    z-index: 2;
    border-left: unset;
    padding: 10px 15px;
    color: #f8f8f8;
    font-family: 'per_add';
    font-size: 12px;
    max-width: 50%;
    top: 10%;
    left: -1px;
    text-align: center;
    justify-content: center;
    border-radius: 0px 10px 10px 0px;
}

.black_bax_alert {
    position: fixed;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgb(256 256 256 / 15%);
    z-index: 10000;
}

.black_bax_alert .alert_box {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vW;
    border-radius: 10px;
    background: rgb(0 0 0 / 66%);
    -webkit-animation-name: start;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: start;
    -moz-animation-duration: 0.5s;
    -moz-animation-iteration-count: 1;
    animation-name: start;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

@-moz-keyframes rot_alrt {
    0% {
        opacity: 0;
        top: -120px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

@-webkit-keyframes rot_alrt {
    0% {
        opacity: 0;
        top: -120px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

@keyframes rot_alrt {
    0% {
        opacity: 0;
        top: -120px;
    }
    100% {
        opacity: 1;
        top: 0px;
    }
}

.black_bax_alert .alert_box span.close_alert {
    border-radius: 4px;
    position: relative;
    display: inline-block;
    margin: 10px 15px;
    padding: 11.5px 20px;
    font-family: 'sans_b';
    font-size: 15px;
    cursor: pointer;
    direction: ltr;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    box-shadow: 0px 0px 2px #f0f0f0;
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+1) {
    color: #f8f8f8;
    border-radius: 10px;
    background: var(--base-color);
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+2) {
    color: #f8f8f8;
    border-radius: 10px;
    background: var(--base-color);
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+1):hover {
    font-weight: bold;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+1):active, .black_bax_alert .alert_box span.close_alert:nth-of-type(n+1):focus {
    font-weight: bold;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+2):hover {
    font-weight: bold;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.black_bax_alert .alert_box span.close_alert:nth-of-type(n+2):active, .black_bax_alert .alert_box span.close_alert:nth-of-type(n+2):focus {
    font-weight: bold;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.black_bax_alert .alert_box selction {
    z-index: 1000;
    border-radius: 10px;
    box-shadow: 0px 0px 2px var(--base-color) insert 0px 0px 50px var(--base-color);
    direction: rtl;
    -webkit-animation-name: rot_alrt;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-name: rot_alrt;
    -moz-animation-duration: 0.2s;
    -moz-animation-iteration-count: 1;
    animation-name: rot_alrt;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    max-width: 95vw;
    max-height: 80vh;
    overflow: auto;
    width: auto;
    height: auto;
    padding: 20px;
    border: 1px solid var(--base-color);
    box-sizing: border-box;
    background-color: #f8f8f8;
    top: -5vH;
    position: relative;
}

.black_bax_alert .alert_box selction label {
    position: relative;
    color: var(--base-color);
    border-bottom: unset;
    display: block;
    margin: 0px auto;
    border-radius: 6px 6px 0px 0px;
    width: auto;
    z-index: 5;
    font-size: 15px;
    padding: 10px 15px;
    font-family: sans_b;
    direction: rtl;
    text-align: right;
    min-height: 25px;
}

.black_bax_alert .alert_box selction message {
    position: relative;
    color: #181818;
    display: block;
    margin: 5px auto;
    text-align: justify;
    width: calc(100% - 40px);
    z-index: 5;
    font-size: 16px;
    padding: 20px;
    font-family: 'sans';
    max-height: calc(100% - 130px);
    overflow: hidden;
    overflow-y: auto;
    direction: rtl;
}

.black_bax_alert .alert_clicker {
    position: absolute;
    margin: auto;
    width: 100%;
    z-index: 1200;
    left: 0;
    bottom: 5vW;
    right: 0;
    direction: rtl;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;

}

._audio, ._video, ._img, ._file, ._embed {
    max-width: 100% !important;
    clear: both !important;
    display: block !important;
    margin: 3% auto 3% auto !important;
    position: relative !important;
    max-height: 350px !important;
    overflow: hidden !important;
    border-radius: 5px !important;
    direction: rtl;
    text-align: center;
}

._embed {
    min-height: 210px;
}

.info {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    z-index: 10;
    width: max(4vW, 8vH);
    height: max(4vW, 8vH);
    top: 2%;
    left: 1%;
    cursor: url('/public/__Global/Files/cursor/Cursor.png'), default;
}

.info svg {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
    filter: drop-shadow(0px 0px 5px #f8f8f8);
}

.info svg path {
    fill: #f8f8f8;
    text-shadow: 1px -1px 2px #181818;
    filter: drop-shadow(-1px 1px 2px #181818);
    cursor: url('/public/__Global/Files/cursor/Cursor.png'), default;
}

canvas {
    position: fixed;
    margin: auto;
    clear: both;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vW;
    max-width: 100vW;
    min-width: 100%;
    height: 100vH;
    max-height: 100vH;
    min-height: 100%;
    display: block;
    cursor: url('/public/__Global/Files/cursor/Cursor.png'), default;
}

.modir {
    border: 5px #302F2F solid;
    font-size: 13.7px;
    z-index: 2;
    position: absolute;
    margin: auto;
    display: block;
    width: 400px;
    max-width: 95%;
    padding: 0;
    bottom: 0;
    right: 0px;
    left: 0px;
    top: 0;
    border-radius: 5px;
    direction: rtl;
    max-height: 95%;
    min-height: 400px;
}

.modir, .modir * {
    cursor: url('/public/__Global/Files/cursor/Cursor.png'), default;
}

.frameContentHolder {
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: block;
    overflow: hidden;
    overflow-y: auto;
}

.frameContentContainer {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

#divLawyerBackground {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(220 220 220 / 10%);
    display: block;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.clearFloat {
    clear: both;
}

#divLawyer {
    height: 250px;
    width: 250px;
    background: url('/public/Myball/Scripts/front/others/old projects/jalebsource/files_chamancanvas/lawyer_sprite.png') no-repeat 0;
    position: absolute;
    bottom: 0;
    left: -30px;
    background-position: 0 0;
}

.frameContentHolder p {
    position: relative;
    display: block;
    padding: 5%;
    margin: auto;
    color: #f8f8f8;
    text-shadow: 0px 0px 2px #181818;
    font-family: 'sans';
    text-align: justify;
    direction: rtl;
    font-size: 16px;
}

.frameContentHolder p b {
    font-size: 20px;
    font-family: 'sans_b';
}

.frameContentHolder p b.e {
    font-size: 19px;
    font-family: 'sans_b';
    cursor: pointer;
    color: #3485fc;
    text-shadow: 0px 0px 2px #181818;
}

b {
    font-size: 20px;
    font-weight: bolder;
}

b.e {
    font-size: 19px;
    cursor: pointer;
    color: #3485fc;
    text-shadow: 0px 0px 2px #181818;
    font-weight: bolder;
}


form, .form {
    position: relative;
    display: block;
    margin: auto;
    padding: 0;
    direction: rtl;
    clear: both;
    z-index: 1;
}

form label, .form label {
    position: relative;
    display: block;
    margin: 5px auto;
    padding: 10px;
    direction: rtl;
    clear: both;
    z-index: 1;
    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

form label input, .form label input {
    position: relative;
    display: block;
    margin: 0px auto;
    padding: 10px;
    direction: rtl;
    clear: both;
    z-index: 1;
    width: calc(80% - 20px);
    font-family: 'sans';
    color: rgba(220, 220, 220, 0.8);
    background: #1615152e;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 55%);
    border-radius: 25px;
    font-size: 20px;
    border: unset;
}

form label input::placeholder, .form label input::placeholder {
    color: rgba(220, 220, 220, 0.5);
}

form label input[type="submit"], .form label input[type="submit"] {
    width: 50%;
    min-width: 120px;
    background: #28aa55;
    color: #f8f8f8;
    font-family: 'sans_b';
    font-size: 25px;
    cursor: pointer;
    box-shadow: 0px 0px 3px rgb(146 227 111 / 55%);
}

form pre, .form pre {
    text-align: center;
    position: relative;
    display: block;
    margin: 10px auto 10px auto;
    font-size: 12px;
    font-family: 'sans';
    color: rgba(0, 0, 0, 0.9);
}

form pre b, .form pre b {
    font-size: 13px;
    font-family: 'sans_b';
    color: var(--hover-color);
    position: relative;
}


.popup_box {
    position: fixed;
    margin: auto;
    width: 100vW;
    height: 100vH;
    display: block;
    clear: both;
    z-index: 500;
    background: rgb(16 16 16 / 40%);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.popup_box object.box_show_link {
    position: relative;
    display: block;
    width: 97%;
    height: auto;
    max-height: calc(98vH - max(15vW, 15vH));
    min-height: 200px;
    max-width: 1280px;
    min-width: 200px;
    top: max(15vW, 15vH);
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0;
    border-radius: 10px;
    margin: auto;
    opacity: 1;
    overflow: hidden !important;
}

/*.popup_box object.box_show_link .close {*/
/*    display: none;*/
/*    visibility: hidden;*/
/*}*/
.popup_box object.box_show_link .close {
    position: absolute !important;
    background: transparent;
    display: block;
    margin: 0px auto auto 0px;
    font-size: 17px;
    font-weight: 100;
    padding: 15px 20px;
    border-radius: 3px 3px 0px 0px;
    text-align: left;
    direction: ltr;
    color: var(--red-color);
    z-index: 20;
    top: 2%;
    left: 2%;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.popup_box object.box_show_link .close:before {
    cursor: pointer;
}

.popup_box object.box_show_link .show_responsive {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: calc(100vH);
    min-height: calc(200px - 50px);
    margin: auto;
    display: block;
    direction: ltr;
    overflow: auto;
    padding-bottom: 0vH;
}

.popup_box object.box_show_link .show_responsive iframe {
    position: relative;
    overflow: hidden;
    display: block;
    clear: both;
    width: calc(100%);
    margin: auto;
    height: calc(87vH);
    z-index: 0;
    border-radius: 5px;
}

.menu_list, .user_list, .chat_list {
    position: relative;
    clear: both;
    direction: rtl;
    margin: 1% 3%;
}

.menu_list .geme_base, .user_list .user_info_r, .chat_list .geme_chat {
    display: block;
    margin: 2%;
    text-align: center;
    justify-content: center;
    padding: 3% 3%;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #181818;
    background: rgb(24 24 24 / 60%);
}

.menu_list .geme_base img, .user_list .user_info_r img, .chat_list .geme_chat img {
    position: relative;
    margin: auto;
    clear: both;
    display: block;
    max-width: 96%;
    width: auto;
    max-height: 96%;
    height: auto;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    filter: blur(0px);
    min-width: 80%;
    min-height: 80%;
}

.chat_list .geme_chat img {
    border-radius: 10px;
}

.menu_list .geme_base:hover img {
    filter: blur(3.5px);
}

.menu_list .geme_base titr {
    position: absolute;
    margin: auto;
    width: calc(100% - 4%);
    padding: 5% 2%;
    text-align: center;
    height: 25%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #181818;
    font-size: 2.5vW;
    color: #f8f8f8;
    font-family: 'titr';
    cursor: pointer;
    display: none;
    -webkit-animation-name: start;
    -moz-animation-name: start;
    animation-name: start;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    animation-direction: normal;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.menu_list .geme_base:hover titr {
    display: block;
    -webkit-animation-name: start;
    -moz-animation-name: start;
    animation-name: start;
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -moz-animation-direction: normal;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    animation-direction: normal;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.user_list .user_info_r b {
    display: block;
    position: relative;
    margin: auto;
    width: calc(100% - 4%);
    padding: 5% 2%;
    text-align: center;
    height: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #181818;
    font-size: max(1.2vW, 16px);
    color: #f8f8f8;
    font-family: 'titr';
    cursor: pointer;
}

span.lin_text {
    display: block;
    margin: 2% auto;
    clear: both;
    width: 1280px;
    max-width: calc(95% - 55px - 5px);
    direction: rtl;
    padding: 10px 55px 10px 5px;
    font-size: 15px;
    font-family: 'sans_b';
    color: #181818;
    position: relative;
    text-align: right;
}

.titler[role="2"] span.lin_text {
    margin: 3% auto;
    max-width: calc(95% - 60px - 5px);
    padding: 10px 60px 20px 5px;
    border-bottom: 1px solid rgb(156 156 156 / 20%);
}


span.lin_text i {
    font-size: 35px;
    width: 35px;
    height: 35px;
    right: 10px;
    top: 0;
    bottom: 0;
    color: #f8f8f8;
}

.menu_list .geme_base span, .chat_list .geme_chat span {
    position: absolute;
    background: #181818;
    width: 100%;
    text-align: center;
    justify-content: center;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 5% 1%;
    direction: ltr;
    font-family: 'per_add';
    font-size: max(1.2vW, 16px);
    color: gold;
    overflow: hidden;
}

i svg, i img {
    width: 100%;
    height: 100%;
    display: block;
    clear: both;
    cursor: pointer;
    position: relative;
}

.icon {
    position: absolute;
    margin: auto;
    display: block;
    color: var(--box-color);
}

.titler {
    position: relative;
    display: block;
    margin: 1% 3% 3% 3%;
    clear: both;
    border-radius: 15px;
    padding: 0vH 0vW;
    background: #f8f8f8;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.titler d {
    position: absolute;
    z-index: 10;
    background: #1b5a9b;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #104479;
    width: 40px;
    height: 40px;
    border-radius: 0px 0px 7px 7px;
    top: -1px;
    right: 10%;
    cursor: pointer;
    text-align: center;
}

.titler d i {
    width: 20px;
    height: 20px;
    font-size: 20px;
    color: #c9c9c9;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

img.text_img {
    position: relative !important;
    display: inline-block !important;
    margin: auto 5px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0px 0px 10px gold !important;
    clear: unset !important;
    filter: unset !important;
}

.titler[role="2"] img.text_img {
    width: 20px !important;
    height: 20px !important;
    border-radius: unset !important;
    box-shadow: unset !important;
}

small img.text_img {
    width: 17px !important;
    height: 17px !important;
}

p.document {
    position: relative;
    display: block;
    margin: 5px 5px;
    padding: 15px 15px;
    font-family: 'sans';
    font-weight: 300;
    border-radius: 5px;
    background: var(--div-color);
    color: #171e26;
    cursor: pointer;
    text-decoration: none;
    direction: rtl;
    text-align: right;
}

.btn-p {
    padding: 10px;
    position: relative;
    display: block;
    width: 300px;
    max-width: 80%;
    background: var(--base-color);
    text-align: center;
    font-size: 20px;
    border-radius: 5px;
    font-family: 'per_add';
    font-weight: 900;
    color: snow;
    cursor: pointer;
    margin: 15px auto;
    clear: both;
    direction: rtl;
    overflow: hidden;
}

.btn-p.red {
    background: var(--red-color);
}

.btn-p:hover {
    background: var(--hover-color);
}

.btn-p.red:hover {
    background: #460404FF;
}

.btn {
    position: relative;
    margin: 10% auto;
    display: block;
    max-width: 65%;
    min-width: 250px;
    padding: 15px 15px;
    border: 1px solid var(--base-color);
    border-radius: 15px;
    background: linear-gradient(45deg, var(--base-color), var(--hover-color));
    text-align: center;
    font-size: 24px;
    font-family: 'titr';
    color: #f8f8f8;
    cursor: pointer;
}

.btn[role="2"] {
    color: #f8f8f8;
    background: #c9c9c9 url(/public/files/icons/headbg5.png);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

progres {
    position: relative;
    display: block;
    margin: 2% auto 5% auto;
    border-radius: 20px;
    overflow: hidden;
    background: rgb(18 19 18 / 72%);
    width: 90%;
    height: 10px;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

progres prog {
    position: absolute;
    margin: auto;
    height: 100%;
    background: var(--green-color);
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    -moz-transition: all 0.75s ease;
    -webkit-transition: all 0.75s ease;
    transition: all 0.75s ease;
}

span.lin_text i b#numer {
    position: absolute;
    margin: auto;
    font-family: 'naz_900';
    font-size: 19px;
    width: 35px;
    height: 25px;
    color: var(--green-color);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    text-shadow: 0px 0px 2px #181818;
    z-index: 1;
}


.sticker {
    position: fixed;
    margin: auto;
    display: block;
    width: 120px;
    height: 160px;
    padding: 10px;
    background: #f8f8f8;
    z-index: 100;
    border-radius: 12px;
    top: 5%;
    right: 0;
    left: 0;
    overflow: hidden;
}

.sticker img {
    position: relative;
    margin: 5px;
    width: calc(100% - 10px);
    height: auto;
    max-height: calc(75% - 10px);
}

.sticker h3 {
    position: absolute;
    margin: 5px auto;
    font-family: 'sans_b';
    font-size: 12px;
    color: var(--red-color);
    top: 5px;
    left: 5px;
    z-index: 5;
    width: calc(100% - 10px);
    display: block;
}

.sticker h1 {
    position: relative;
    text-align: center;
    margin: 5px auto;
    font-family: 'sans';
    font-size: 15px;
    color: #181818;
    z-index: 1;
    display: block;
}

#deadline {
    width: 90vW;
    max-width: 100%;
    position: relative;
    z-index: 1;
    background: #181818;
    padding: 20px 10px;
    border-radius: 10px;
}

#deadline svg {
    width: 100%;
}

#progress-time-fill {
    animation-name: progress-fill;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Death */
#death-group {
    animation-name: walk;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    transform: translateX(0);
}

#death-arm {
    animation: move-arm 3s ease infinite;
    /* transform-origin: left center; */
    transform-origin: -60px 74px;
}

#death-tool {
    animation: move-tool 3s ease infinite;
    transform-origin: -48px center;
}

/* Designer */

#designer-arm-grop {
    animation: write 1.5s ease infinite;
    transform: translate(0, 0) rotate(0deg) scale(1, 1);
    transform-origin: 90% top;
}

.deadline-days {
    color: #fff;
    text-align: center;
    width: 165px;
    margin: 0 auto;
    position: relative;
    height: 20px;
    font-family: "Oswald", sans-serif;
}

.deadline-days .inner {
    width: 165px;
    position: relative;
    top: 0;
    left: 0;
}

.mask-red,
.mask-white {
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.mask-red {
    left: 0;
    width: 0;
    color: #be002a;
    animation: text-red 30s ease infinite;
    z-index: 2;
    background: #181818;
}

.mask-white {
    right: 0;
}

/* Flames */

#red-flame {
    opacity: 0;
    animation: show-flames 30s ease infinite, red-flame 120ms ease infinite;
    transform-origin: center bottom;
}

#yellow-flame {
    opacity: 0;
    animation: show-flames 30s ease infinite, yellow-flame 120ms ease infinite;
    transform-origin: center bottom;
}

#white-flame {
    opacity: 0;
    animation: show-flames 30s ease infinite, red-flame 100ms ease infinite;
    transform-origin: center bottom;
}

@keyframes progress-fill {
    0% {
        x: -100%;
    }

    100% {
        x: -3%;
    }
}

@keyframes walk {
    0% {
        transform: translateX(0);
    }
    6% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(100px);
    }
    15% {
        transform: translateX(140px);
    }

    25% {
        transform: translateX(170px);
    }

    35% {
        transform: translateX(220px);
    }

    45% {
        transform: translateX(280px);
    }

    55% {
        transform: translateX(340px);
    }

    65% {
        transform: translateX(370px);
    }

    75% {
        transform: translateX(430px);
    }

    85% {
        transform: translateX(460px);
    }

    100% {
        transform: translateX(520px);
    }
}

@keyframes move-arm {
    0% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(0);
    }

    9% {
        transform: rotate(40deg);
    }

    80% {
        transform: rotate(0);
    }
}

@keyframes move-tool {
    0% {
        transform: rotate(0);
    }

    5% {
        transform: rotate(0);
    }

    9% {
        transform: rotate(50deg);
    }

    80% {
        transform: rotate(0);
    }
}

/* Design animations */

@keyframes write {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1, 1);
    }

    16% {
        transform: translate(0px, 0px) rotate(5deg) scale(0.8, 1);
    }

    32% {
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }

    48% {
        transform: translate(0px, 0px) rotate(6deg) scale(0.8, 1);
    }

    65% {
        transform: translate(0px, 0px) rotate(0deg) scale(1, 1);
    }

    83% {
        transform: translate(0px, 0px) rotate(4deg) scale(0.8, 1);
    }
}

@keyframes text-red {
    0% {
        width: 0%;
    }

    100% {
        width: 98%;
    }
}

/* Flames */

@keyframes show-flames {
    0% {
        transform: translateY(0);
    }
    74% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(-30px);
    }
    97% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes show-flames {
    0% {
        opacity: 0;
    }
    74% {
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes red-flame {
    0% {
        transform: translateY(-30px) scale(1, 1);
    }

    25% {
        transform: translateY(-30px) scale(1.1, 1.1);
    }

    75% {
        transform: translateY(-30px) scale(0.8, 0.7);
    }

    100% {
        transform: translateY(-30px) scale(1, 1);
    }
}

@keyframes yellow-flame {
    0% {
        transform: translateY(-30px) scale(0.8, 0.7);
    }

    50% {
        transform: translateY(-30px) scale(1.1, 1.2);
    }

    100% {
        transform: translateY(-30px) scale(1, 1);
    }
}

.text_titr {
    display: block;
    margin: 10px auto;
    width: 90vW;
    max-width: 100%;
    position: relative;
    z-index: 1;
    background: #181818;
    padding: 20px 10px;
    border-radius: 10px;
}

.text_titr h3 {
    position: relative;
    font-size: 12px;
    font-family: 'sans';
    text-align: right;
    direction: rtl;
    color: rgb(152 10 10 / 80%);
    display: block;
}

.text_titr h1 {
    margin: 2% auto;
    position: relative;
    font-size: 16px;
    font-family: 'sans_b';
    text-align: right;
    direction: rtl;
    color: #f8f8f8;
    display: block;
}


.infor_table {
    position: absolute;
    margin: auto;
    display: block;
    clear: both;
    z-index: 10;
    width: max(20vW, 15vH);
    height: max(20vW, 15vH);
    top: 12%;
    left: 2%;
    cursor: url('/public/__Global/Files/cursor/Cursor.png'), default;
}

.infor_table table {
    position: relative;
    display: block;
    font-family: 'sans';
    text-align: center;
    font-size: 14px;
    direction: rtl;
    width: 100%;
    height: auto;
    margin: auto;
    border-radius: 5px;
    overflow: hidden;
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
}

.infor_table table thead, .infor_table table tbody {
    padding: 2px;
    position: relative;
    margin: auto;
    display: block;
    width: calc(100% - 4px);
    background: var(--back-color);
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
}

.infor_table table thead tr, .infor_table table tbody tr {
    text-align: center;
    width: 100%;
    display: block;
    margin: auto;
    position: relative;
    border-bottom: 1px solid rgb(24 24 24 / 30%);
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
}

.infor_table table thead tr {
    background: #441365;
    color: #f8f8f8;
    border-radius: 5px;
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
}

.infor_table table thead tr th, .infor_table table tbody tr td {
    text-align: center;
    width: 43%;
    display: inline-block;
    margin: auto;
    position: relative;
    cursor: url(/public/__Global/Files/cursor/Cursor.png), default;
}

.infor_table table thead tr th:nth-child(1), .infor_table table tbody tr td:nth-child(1) {
    border-left: 1px solid rgb(24 24 24 / 30%);
}

.infor_table table tbody tr.all {
    background: rgb(255 0 0 / 30%);
}

.infor_table table tbody tr.this {
    background: rgb(0 255 0 / 30%);
}

svg .player {
    fill: #5d5d5d;
    stroke: #181818;
    stroke-width: 2px;
    transition: fill 0.5s;
}

svg .active {
    fill: var(--green-color);
    stroke: #011101;
    stroke-width: 3px;
}

th i {
    position: relative;
    margin: auto;
    display: block;
    clear: both;
    width: 13px;
    height: 13px;
    font-size: 13px;
    text-align: center;
}

.gride {
    position: relative;
    margin: 70px auto 50px auto;
    display: grid;
    grid-template-columns: 50% 50%;
    clear: both;
    text-align: center;
    justify-content: center;
}

.gride span {
    position: relative;
    margin: auto;
    text-align: center;
    justify-content: center;
    display: block;
    width: 100%;
    height: 100%;
}

.gride span i {
    color: #4c266f;
    font-size: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    display: block;
    position: relative !important;
    margin: 10% auto 5% auto !important;
    text-shadow: 0px 0px 2px #f8f8f8;
    cursor: pointer;
}

.gride span h3 {
    position: relative;
    margin: 10% auto 2% auto;
    color: #f8f8f8;
    font-family: 'kalame_b';
    font-size: 18px;
    text-align: center;
    text-shadow: 0px 0px 5px #784ba0;
}




.voice_player {
    position: relative;
    display: block;
    margin: 25px auto;
    max-width: 1280px;
    clear: both;
    height: 100px;
    background: var(--div-color);
    border-radius: 9px;
    z-index: 1;
    transform: translateZ(1px);
}

.video_player {
    position: relative;
    display: block;
    margin: 25px auto;
    width: calc(100% - 16px);
    max-width: min(1280px, 97vW);
    max-height: min(calc(100% - 16px), 97vH);
    clear: both;
    height: calc(100% - 16px);
    background: var(--div-color);
    border-radius: 9px;
    z-index: 1;
    transform: translateZ(1px);
}

.voice_player i#BX, .video_player i#BX {
    padding: 10px 15px;
    font-size: 22px;
    color: var(--base-color);
    font-family: 'm3dfont';
    font-weight: 900;
    width: 3%;
    cursor: pointer;
    height: 50%;
    top: 20%;
    right: 15%;
    bottom: 0;
    z-index: 3;
    transform: translateZ(3px);
}

.voice_player i#control_voice, .video_player i#control_video {
    width: 10%;
    height: 50%;
    top: 0;
    bottom: 0;
    left: 3%;
    cursor: pointer;
    z-index: 2;
    transform: translateZ(2px);
}

.voice_player i#timer_voice, .video_player i#timer_video {
    width: 70%;
    height: 50%;
    top: 0;
    bottom: 0;
    left: -5%;
    right: 0px;
    cursor: pointer;
    z-index: -1;
    transform: translateZ(-1px);
}

.voice_player i#watch_voice, .video_player i#watch_video {
    padding: 10px 15px;
    font-size: 22px;
    color: var(--base-color);
    font-family: 'per_add';
    font-weight: 900;
    width: 8%;
    height: 50%;
    top: 20%;
    right: 2%;
    bottom: 0;
}

.video_player i#watch_video, .video_player i#timer_video, .video_player i#control_video, .video_player i#BX {
    display: none;
    visibility: hidden;
}

.video_player i#video_full {
    padding: 10px 15px;
    font-size: 20px;
    color: var(--base-color);
    font-weight: 900;
    width: 3%;
    cursor: pointer;
    height: 40%;
    top: 20%;
    right: 11%;
    bottom: 0;
    display: none;
    visibility: hidden;
}

.video_player i#BX {
    right: 17%;
}

.video_player i#watch_video {
    right: 0%;
}

.video_player canvas#playe_hd_video {
    position: relative;
    width: calc(100% - 16px);
    min-height: 300px;
    display: block;
    background-color: #353535;
    background: #353535 url('/public/__Global/Files/icon/pro/img_1.png') center center no-repeat;
    background-size: 15%;
    bottom: 0px;
    right: 0;
    left: 0;
    border: 8px solid var(--div-color);
    max-width: min(calc(100% - 16px), 96vW);
    max-height: 96vH;
    margin: auto;
    display: block;
    border-radius: 25px;
    z-index: 1;
    transform: translateZ(1px);
    cursor: pointer;
}