@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icons/icomoon.eot?ybeoi0');
    src:  url('../fonts/icons/icomoon.eot?ybeoi0#iefix') format('embedded-opentype'),
    url('../fonts/icons/icomoon.ttf?ybeoi0') format('truetype'),
    url('../fonts/icons/icomoon.woff?ybeoi0') format('woff'),
    url('../fonts/icons/icomoon.svg?ybeoi0#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change icons */
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-copy:before {
    content: "\e908";
}
.icon-whatsapp:before {
    content: "\e909";
}
.icon-user:before {
    content: "\e900";
}
.icon-chat:before {
    content: "\e901";
}
.icon-check:before {
    content: "\e902";
}
.icon-mail:before {
    content: "\e903";
}
.icon-right-arrow .path1:before {
    content: "\e904";
    color: rgb(244, 67, 54);
}
.icon-right-arrow .path2:before {
    content: "\e905";
    margin-left: -1em;
    color: rgb(0, 0, 0);
}
.icon-send:before {
    content: "\e906";
}
.icon-startup:before {
    content: "\e907";
}
.icon-mic:before {
    content: "\e91e";
}



html {
    scroll-behavior: smooth;
    font-family: shabnam, cursive;
}
body {
    font: 300 14px Nunito;
    text-rendering: geometricPrecision;
    direction: rtl;
    background: #E3E6EF;
    line-height: 22px;
    word-wrap: break-word;
    margin: 0;
}

body.en-layout{
    direction: ltr;
}

.container {
    max-width: 768px;
    padding: 0;
}
.container header {
    height: 320px;
    background: #460772;
    text-align: center;
    padding: 40px 0 0 0;
    border-radius: 0 0 80% 80% / 0 0 20% 20%;
}
.container header .header-cnr {
    max-width: 380px;
    margin: 0 auto;
    position: relative;
}
.container header .header-cnr .logo {
    font-size: 66px;
    color: #E4E6EF;
}
.container header .header-cnr a {
    text-decoration: none;
    outline: none;
}
.container header .header-cnr .dashboard-icon {
    position: absolute;
    left: 20px;
    font-size: 32px;
    color: #E3E6EF;
    top: 14px;
    text-decoration: none;
}

.container header .header-cnr .language {
    float: right;
    color: #fafafa;
    margin: 20px 0 0 0;
    position: relative;
    right: 20px;
}

.container header .tabs {
    padding: 0 10px;
    margin: 40px auto 0 auto;
    list-style: none;
    display: flex;
    max-width: 380px;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
}
.container header .tabs li {
    margin: 0;
    font: 700 14px Nunito;
    color: #809AE8;
    cursor: pointer;
    padding: 9px 0;
    width: 33%;
    transition: all 0.3s;
}
.container header .tabs li a {
    font: 700 14px Nunito;
    color: #E7ECFF;
    cursor: pointer;
    text-decoration: none;
}
.container header .tabs li.active {
    color: #E7ECFF;
    background: #4f0384;
    margin: 0;
    border-radius: 25px;
}
.container header .dashboard-nav {
    padding: 0;
    margin: 40px auto 0 auto;
    list-style: none;
    display: flex;
    max-width: 380px;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.container header .dashboard-nav li {
    padding: 0;
    margin: 0;
    color: #809AE8;
    cursor: pointer;
    width: 49%;
}
.container header .dashboard-nav li a {
    font: 400 15px Nunito;
    color: #E7ECFF;
    cursor: pointer;
    text-decoration: none;
}
.container header .dashboard-nav li.active {
    color: #E7ECFF;
    background: #0D4BFF;
    padding: 9px 20px;
    margin: 0;
    border-radius: 25px;
}
.site-index {
    margin: -100px auto 0 auto;
    text-align: center;
    max-width: 768px;
}
.tips-entity {
    position: relative;
    width: 340px;
    margin: 20px auto;
    border-radius: 50% / 10%;
    color: white;
    text-align: center;
    text-indent: 0.1em;
    box-shadow: 0 10px 18px #cfd2db;
    background: #ffffff;
    background: -moz-linear-gradient(180deg, #ffffff 22%, #f1f4fc 22%, #fdfdfd 85%);
    background: -webkit-linear-gradient(180deg, #ffffff 22%, #f1f4fc 22%, #fdfdfd 85%);
    background: linear-gradient(180deg, #ffffff 22%, #f1f4fc 22%, #fdfdfd 85%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#fdfdfd", GradientType=1);
    padding: 0 10px;
}
.tips-entity .status {
    width: 100px;
    padding: 4px 0 0 0;
    height: 33px;
    display: block;
    position: relative;
    margin: 0 auto;
    font: 200 15px Nunito;
    border-radius: 0 0 70% 70% / 50% 50% 90% 90%;
}
.tips-entity .status .date {
    font-size: 8px;
}
.tips-entity .status .time {
    font-size: 12px;
    top: -4px;
    position: relative;
}
.tips-entity .status.active {
    background: #ED4A4B;
}
.tips-entity .status.win {
    background: #13B03A;
}
.tips-entity .status.lost {
    background: #98ACE9;
}
.tips-entity .status.cancel{
    background: #df8a13;
}

.tips-entity .status.abort{
    background: #ff5454;
}

.tips-entity .status.no {
    opacity: 0;
}
.tips-entity .sport-name {
    color: #460772;
    font: 400 15px Nunito;
    position: relative;
    text-align: left;
    padding: 2px 0 0 15px;
    margin: -8px 0 0 0;
}
.tips-entity .league-name {
    color: #612c85;
    font: 300 13px Nunito;
    position: relative;
    text-align: left;
    padding: 2px 0 0 15px;
    margin: -3px 0 0 0;
}
.tips-entity .soccer-logo {
    position: absolute;
    right: 25px;
    top: 28px;
    opacity: 0.2;
}
.tips-entity .home-name {
    color: #460772;
    font: 700 20px Nunito;
    position: relative;
    text-align: left;
    padding: 5px 0 0 25px;
    margin: 15px 0 0 0;
}
.tips-entity .away-name {
    color: #460772;
    font: 700 20px Nunito;
    position: relative;
    text-align: left;
    padding: 0 0 0 25px;
}
.tips-entity .market-name {
    border-top: 1px solid #E6EBFA;
    color: #48146b;
    font: 300 15px Nunito;
    position: relative;
    text-align: left;
    padding: 14px 0 0 15px;
    margin: 5px 0 5px 0;
    line-height: 22px;
    height: 52px;
}
.tips-entity .odds-box {
    padding: 0 0 0 25px;
    margin: 0;
    float: left;
}
.tips-entity .odds-box .caption {
    color: #A9B5EF;
    font: 300 22px Nunito;
    position: relative;
    text-align: left;
}
.tips-entity .betting {
    padding: 0 0 30px 0;
    display: flex;
    justify-content: space-between;
}

.tips-entity .odds-box .odds-value {
    color: #460772;
    font: 700 32px Nunito;
    position: relative;
    top: 13px;
    display: block;
}
.tips-entity .select-tips {
    font: 700 15px Nunito;
    position: relative;
    padding: 9px 20px 5px 20px;
    text-align: center;
    text-transform: uppercase;
    background-size: 200% auto;
    color: #fff;
    box-shadow: 0 2px 15px #FF28827D;
    border-radius: 10px;
    outline: none;
    background: #FF2882;
    text-decoration: none;
    float: right;
    margin: 15px 15px 0 0;
    border: none;
    height: 40px;
}
.tips-entity .select-tips .icon {
    float: left;
    position: relative;
    top: 6px;
    left: 18px;
    transform: rotate(180deg);
    font-size: 12px;
    color: #F2F5FC;
}
.tips-entity .select-tips .icon .path2:before {
    color: #fff;
}
.tips-entity:before {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 5.8% / 50%;
}
.tips-modal {
    position: relative;
    width: 360px;
    height: auto;
    margin: 20px auto;
    border-radius: 50% / 5%;
    color: white;
    text-align: center;
    text-indent: 0.1em;
    padding: 0 10px;
}
.tips-modal .status {
    width: 100px;
    padding: 2px 0 0 0;
    height: 33px;
    display: block;
    position: relative;
    margin: 0 auto;
    font: 200 15px Nunito;
    border-radius: 0 0 70% 70% / 50% 50% 90% 90%;
}
.tips-modal .status.active {
    background: #ED4A4B;
}
.tips-modal .status.win {
    background: #13B03A;
}
.tips-modal .status.lost {
    color: #98ACE9;
}
.tips-modal .status.abort{
    color: #ff5454;
}
.tips-modal .status.no {
    opacity: 0;
}
.tips-modal .status .date {
    font-size: 8px;
}
.tips-modal .status .time {
    font-size: 14px;
    top: -3px;
    position: relative;
}
.tips-modal .sport-box {
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tips-modal .sport-name {
    color: #3360E3;
    font: 500 15px Nunito;
    position: relative;
    text-align: left;
    padding: 2px 0 0 0;
    margin: -8px 0 0 0;
}
.tips-modal .league-name {
    color: #253979;
    font: 200 15px Nunito;
    position: relative;
    text-align: left;
    padding: 2px 0 0 0;
    margin: -3px 0 0 0;
}
.tips-modal .soccer-logo {
    position: absolute;
    right: 25px;
    left: auto;
    top: 28px;
    opacity: 0.2;
}
.tips-modal .home-name {
    color: #213877;
    font: 700 22px Nunito;
    position: relative;
    text-align: left;
    padding: 5px 0 0 10px;
    margin: 15px 0 0 0;
}
.tips-modal .away-name {
    color: #213877;
    font: 700 22px Nunito;
    position: relative;
    text-align: left;
    padding: 0 0 0 10px;
    margin: 0;
}
.tips-modal .market-name {
    border-top: 1px solid #E6EBFA;
    color: #6879C8;
    /*font: 300 15px Nunito;*/
    position: relative;
    text-align: left;
    padding: 14px 0 0 15px;
    margin: 5px 0 0 0;
    width: 100%;
    white-space: nowrap;
}
.tips-modal .odds-box {
    padding: 0 0 0 0;
    margin: -70px 10px 0 0;
    float: right;
}
.tips-modal .odds-box .caption {
    color: #A9B5EF;
    font: 300 22px Nunito;
    position: relative;
    text-align: left;
}
.tips-modal .odds-box .odds-value {
    color: #152E70;
    font: 700 25px Nunito;
    position: relative;
    top: -5px;
    display: block;
}
.tips-modal .rate-tips {
    background: #FAF9FE;
    padding: 10px 0;
    width: 100%;
    position: relative;
    margin: 15px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
}
.tips-modal .rate-tips .caption {
    color: #F0243A;
    font: 700 15px Nunito;
}
.tips-modal .rate-tips .rate-btn {
    background: #3460E3;
    border: none;
    outline: none;
    padding: 7px 0;
    border-radius: 5px;
    font: 500 14px Nunito;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 80%;
}
.tips-modal .rate-tips .rate-btn .icon {
    font-size: 22px;
    color: #99FF99;
    margin: 0 10px 0 0;
}
.tips-modal .rate-tips .rate-btn.success {
    background: #2ca201;
    color: #F1F4FC;
}
.tips-modal .rate-tips .rate-btn.success .icon {
    color: #FAF9FE;
}
.tips-modal .ads-description {
    margin: 25px 0 0 0;
    padding: 0 15px;
    list-style-type: none;
    position: relative;
}
.tips-modal .ads-description li {
    padding: 0;
    margin: 0 0 8px 0;
    color: #15285C;
    font: 300 13px Nunito;
    text-align: left;
    line-height: 25px;
    direction: ltr;
}
.tips-modal .ads-description li .icon {
    font-size: 18px;
    color: #3360E3;
    position: relative;
    top: 4px;
    margin: 0 0 0 5px;
}
.tips-modal .ads-description li .sub-desc {
    font: 300 13px Nunito;
    padding: 0 0 0 25px;
}
.tips-modal .ads-description li:first-child {
    text-align: center;
    color: #15285C;
    font: 700 15px Nunito;
}
.tips-modal .register-btn {
    position: relative;
    background: #EF233C;
    padding: 8px 0 7px 0;
    color: #FFFFFF;
    display: block;
    width: 190px;
    margin: 20px auto 0 auto;
    border-radius: 4px;
    font: 500 14px Nunito;
    outline: none;
    text-decoration: none;
    border: none;
}
.tips-modal .bet-now {
    height: 40px;
    padding: 8px 10px 0 10px;
    margin: 30px 0 0 0;
}
.tips-modal .bet-now .caption {
    color: #3360E3;
    float: left;
    position: relative;
    top: 15px;
}
.tips-modal .bet-now .odds {
    position: relative;
    left: 7px;
    color: #3360E3;
    font: 700 28px Nunito;
    top: 4px;
    float: left;
}
.tips-modal .bet-now button {
    float: right;
    background: #0FB038;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    padding: 6px 20px;
    font-weight: 500;
    position: relative;
    top: 3px;
    width: 128px;
    height: 40px;
}
.tips-modal .help-box {
    height: 160px;
    position: relative;
    margin: 30px 0 0 0;
}
.tips-modal .help-box .title {
    color: #213877;
    font: 700 15px Nunito;
    margin: 0 0 22px 0;
}
.tips-modal .help-box ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
}
.tips-modal .help-box ul li {
    display: block;
}
.tips-modal .help-box ul li a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #213877;
    font: 700 12px Nunito;
}

.tips-modal .help-box ul li.online-support{
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #213877;
    font: 700 12px Nunito;
    cursor: pointer;
    border: 1px solid #A9C1F8;
    padding: 12px 20px;
    border-radius: 15px;
    background: #fff;
}

.tips-modal .help-box ul li i{
    font-size: 35px;
    color: #A9C1F8;
    margin: 0 0 11px 0;
}

.tips-modal .help-box ul li a i {
    font-size: 35px;
    color: #A9C1F8;
    margin: 0 0 11px 0;
}
.tips-modal:before {
    content: '';
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: -5.4%;
    left: -5.3%;
    background: inherit;
    border-radius: 5.8% / 50%;
}
.main-carousel {
    width: 500px;
    white-space: nowrap;
}
.main-carousel .tips-modal {
    width: 360px;
    height: 100%;
    float: right;
    margin: 0 20px;
}
.register-index {
    padding: 30px;
    height: 100vh;
    width: 100%;
    direction: ltr;
}
.register-index .cnr {
    background: #fdfdfd;
    padding: 9%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.register-index .cnr .logo {
    font-size: 60px;
    text-align: center;
    color: #213877;
}
.register-index .cnr h3 {
    text-align: center;
    color: #213877;
    line-height: normal;
}
.register-index .cnr p {
    text-align: center;
    color: #FF0D68;
    margin: 0 0 45px 0;
}
.register-index .cnr input {
    height: 40px;
    direction: ltr;
}
.register-index .cnr button[type=submit] {
    background: #0D4BFF;
    border-color: #0D4BFF;
}
.register-index .cnr button:disabled {
    background: #00a7d0;
}
.admin-login input {
    direction: ltr;
}
.my-btn {
    display: block;
    padding: 9px 25px 7px 25px;;
    outline: none;
    text-decoration: none;
    background: #0D4BFF;
    color: #fff;
    border-radius: 25px;
    margin: 20px auto;
    border: none;
}
.my-btn:hover {
    text-decoration: none;
    color: #E3E6EF;
}
.loader {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #f1f2f3a6;
    display: flex;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}
@keyframes ldio-vajwe4q97aa {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.loader .ldio-vajwe4q97aa div {
    position: absolute;
    animation: ldio-vajwe4q97aa 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #1c4595;
    transform-origin: 80px 82px;
}
.loader .loadingio-spinner-eclipse-7twpgeoeq4w {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: transparent;
}
.loader .ldio-vajwe4q97aa {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* see note above */
}
.loader .ldio-vajwe4q97aa div {
    box-sizing: content-box;
}
.close {
    float: left;
    left: 17px;
    top: 11px;
    position: absolute;
    font-size: 30px;
    font-weight: lighter;
    color: #fff;
    opacity: 0.8;
}
.dashboard-layout header {
    height: 220px;
    border-radius: 0;
}
.dashboard-layout .dashboard-box {
    padding: 25px;
}
.dashboard-layout .dashboard-box .title {
    position: relative;
    font: 700 18px Nunito;
    text-align: center;
    color: #0123A3;
}
.dashboard-layout .dashboard-box .description {
    text-align: center;
    margin: 0 0 20px 0;
    font: 300 15px Nunito;
}
.dashboard-layout .dashboard-box div {
    text-align: center;
    margin: 7px 0;
    font: 500 15px Nunito;
    color: #213877;
}
.dashboard-layout .dashboard-box div span {
    width: 50%;
    padding: 0 5px;
    font-weight: 300;
}
.dashboard-layout .dashboard-box div span:first-child {
    text-align: left;
    width: 40%;
    float: left;
    color: #3c3c3c;
}
.dashboard-layout .dashboard-box div span:last-child {
    padding-right: 15px;
    width: 60%;
    text-align: right;
    direction: ltr;
    float: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.dashboard-layout .dashboard-box tbody > tr:nth-of-type(2n) {
    background-color: #f9f9f9;
}
.dashboard-layout .dashboard-box .back-list {
    font-size: 14px;
    color: #373739;
    position: relative;
    text-decoration: none;
    display: block;
    margin: 0 0 15px 0;
}
.dashboard-layout .dashboard-box .back-list .icon {
    position: relative;
    top: 0;
    font-size: 10px;
    margin: 0 0 0 5px;
}
.dashboard-layout .dashboard-box .back-list span {
    color: #213877 !important;
}
.dashboard-layout .dashboard-box .back-list span::after {
    color: #213877 !important;
}
.dashboard-layout .dashboard-box .back-list span::before {
    color: #213877 !important;
}
.dashboard-layout .ticket-create {
    padding: 20px 30px;
}
.dashboard-layout .ticket-create .title {
    position: absolute;
    font: 700 18px Nunito;
    text-align: center;
    top: -90px;
    left: 0;
    right: 0;
    color: #E7ECFF;
}
.dashboard-layout .ticket-create .cnr {
    background: #fff;
    padding: 20px 30px;
}
.dashboard-layout .ticket-create .cnr form {
    width: 100%;
}
.dashboard-layout .ticket-index {
    padding: 25px;
    padding-top: 0;
}
.dashboard-layout .ticket-index table th {
    font: 700 12px Nunito;
    text-align: center;
}
.dashboard-layout .ticket-index table td {
    font: 300 12px Nunito;
}
.dashboard-layout .ticket-index table td a {
    text-decoration: none;
    color: #213877;
}
.dashboard-layout .ticket-index table td:nth-child(1) {
    width: 50%;
    font-weight: 300;
}
.dashboard-layout .ticket-index table td:not(:nth-child(1)) {
    text-align: center;
    font-size: 11px;
}
.dashboard-layout .ticket-index table tbody tr td.bold {
    font-weight: 500;
}
.dashboard-layout .ticket-view {
    padding: 15px;
}
.dashboard-layout .ticket-view .ticket-box {
    padding: 10px;
    margin: 0 0 15px 0;
    background: #edf0f8;
    font: 500 12px Nunito !important;
    color: #213877 !important;
    border-radius: 5px;
}
.dashboard-layout .ticket-view .ticket-box .time {
    font-size: 10px;
    font-weight: 200;
    padding: 0;
    margin: 0;
}
.dashboard-layout .ticket-view .reply-box {
    background: #fff;
    padding: 15px;
    border-radius: 3px;
}
.dashboard-layout .ticket-view .ticket-box.user {
    background: #fafafa;
}
.carousel {
    background: #EEE;
}
.carousel-cell {
    width: 100%;
    height: 100vh;
    margin-right: 10px;
    background: #fff;
    border-radius: 5px;
    counter-increment: gallery-cell;
}
.tips-modal-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
}
.tips-modal-container.no-view {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: all 0.2s;
}
.close {
    transform: rotate(180deg);
    display: block;
    position: absolute;
    left: 22px;
    top: 20px;
    z-index: 1;
    font-size: 24px;
}
.icon-right-arrow .path1::before {
    color: #7d7d7e;
}
.flickity-prev-next-button {
    top: 90%;
}
#register-step1 .control-label {
    float: left;
}
.select-language {
    direction: ltr;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.select-language h3 {
    margin: 0 0 50px 0;
    color: #213877;
}
.select-language a {
    background: #fafafa;
    padding: 6px 15px;
    border-radius: 25px;
    margin: 0 0 15px 0;
    text-decoration: none;
    color: #213877;
}
.select-language a img {
    margin: 0 5px 0 0;
}
.register-now {
    margin-top: 15px !important;
}
.register-now a {
    margin: 0 0 0 7px;
    text-decoration: none;
}

.dashboard-layout .dashboard-box .help-block{
    color: #a94442;
    font-size: 14px;
    font-weight: 300;
}

.carousel-cell{
    display: flex;
    justify-content: center;
    align-items: center;
}