:root {

    --sh-color-one: #091647;
    --sh-color-two: #FFF8F5;
    --sh-color-tree: #E33232;
    --sh-color-four: #3A456C;
    /*labels*/
    --sh-color-label-green: red;
    --sh-color-label-pink: rgba(240, 71, 255, 0.5);
    --sh-color-label-yellow: red;
    --sh-color-label-blue: red;
    /*change pass card bg*/
    --r-card-change-password: 20px; /* the radius */
    --s-card-change-password: 43px; /* size of inner curve */
    --x-card-change-password: 1px; /* horizontal offset (no percentage) */
    --y-card-change-password: 1px; /* vertical offset (no percentage) */
    --card-change-password_m: / calc(2 * var(--r-card-change-password)) calc(2 * var(--r-card-change-password)) radial-gradient(#000 70%, #0000 72%);
    --card-change-password_g: conic-gradient(at calc(100% - var(--r-card-change-password)) var(--r-card-change-password), #0000 25%, #000 0);
    --card-change-password_d:(var(--s-card-change-password) + var(--r-card-change-password));
    /*add game card bg*/
    --r-card-add-game: 19px; /* the radius */
    --s-card-add-game: 30px; /* size of inner curve */
    --x-card-add-game: 283px; /* horizontal offset (no percentage) */
    --y-card-add-game: 7px; /* vertical offset (no percentage) */
    --card-add-game_m: / calc(2 * var(--r-card-add-game)) calc(2 * var(--r-card-add-game)) radial-gradient(#000 70%, #0000 72%);
    --card-add-game_g: conic-gradient(at calc(100% - var(--r-card-add-game)) var(--r-card-add-game), #0000 25%, #000 0);
    --card-add-game_d:(var(--s-card-add-game) + var(--r-card-add-game));


    /*mobile-version*/
    --r-card-add-game-mobile: 19px; /* the radius */
    --s-card-add-game-mobile: 30px; /* size of inner curve */
    --x-card-add-game-mobile: 220px; /* horizontal offset (no percentage) */
    --y-card-add-game-mobile: 2px; /* vertical offset (no percentage) */
    --card-add-game-mobile_m: / calc(2 * var(--r-card-add-game-mobile)) calc(2 * var(--r-card-add-game-mobile)) radial-gradient(#000 70%, #0000 72%);
    --card-add-game-mobile_g: conic-gradient(at calc(100% - var(--r-card-add-game-mobile)) var(--r-card-add-game-mobile), #0000 25%, #000 0);
    --card-add-game-mobile_d:(var(--s-card-add-game-mobile) + var(--r-card-add-game-mobile));

    /*add game card mini bg*/
    --r-card-add-game-mini: 19px; /* the radius */
    --s-card-add-game-mini: 30px; /* size of inner curve */
    --x-card-add-game-mini: 152px; /* horizontal offset (no percentage) */
    --y-card-add-game-mini: 7px; /* vertical offset (no percentage) */
    --card-add-game-mini_m: / calc(2 * var(--r-card-add-game-mini)) calc(2 * var(--r-card-add-game-mini)) radial-gradient(#000 70%, #0000 72%);
    --card-add-game-mini_g: conic-gradient(at calc(100% - var(--r-card-add-game-mini)) var(--r-card-add-game-mini), #0000 25%, #000 0);
    --card-add-game-mini_d:(var(--s-card-add-game-mini) + var(--r-card-add-game-mini));


    /*mini mobile-version*/
    --r-card-add-game-mini-mobile: 19px; /* the radius */
    --s-card-add-game-mini-mobile: 30px; /* size of inner curve */
    --x-card-add-game-mini-mobile: 150px; /* horizontal offset (no percentage) */
    --y-card-add-game-mini-mobile: 2px; /* vertical offset (no percentage) */
    --card-add-game-mini-mobile_m: / calc(2 * var(--r-card-add-game-mini-mobile)) calc(2 * var(--r-card-add-game-mini-mobile)) radial-gradient(#000 70%, #0000 72%);
    --card-add-game-mini-mobile_g: conic-gradient(at calc(100% - var(--r-card-add-game-mini-mobile)) var(--r-card-add-game-mini-mobile), #0000 25%, #000 0);
    --card-add-game-mini-mobile_d:(var(--s-card-add-game-mini-mobile) + var(--r-card-add-game-mini-mobile));
    /*profile card bg*/
    --r-card-profile: 30px; /* the radius */
    --s-card-profile: 60px; /* size of inner curve */
    --x-card-profile: -5px; /* horizontal offset (no percentage) */
    --y-card-profile: -5px; /* vertical offset (no percentage) */
    --card-profile_m: / calc(2 * var(--r-card-profile)) calc(2 * var(--r-card-profile)) radial-gradient(#000 70%, #0000 72%);
    --card-profile_g: conic-gradient(at calc(100% - var(--r-card-profile)) var(--r-card-profile), #0000 25%, #000 0);
    --card-profile_d:(var(--s-card-profile) + var(--r-card-profile));

}

body {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    background-color: var(--sh-color-two);
    /*overflow-x: hidden;*/

}

.w-90 {
    width: 90%;
}

.text-red {
    color: var(--sh-color-tree);
}
.border-primary{
    border-color: var(--sh-color-one) !important;
}
.btn-primary {
    background-color: var(--sh-color-one);
    color: #fff;
}
.nav-link{
    color: var(--sh-color-one);
}
.page-link{
    margin: 0 5px;
    border-radius: 6px !important;
    padding: 5px 11px 2px 11px !important;
    border: var(--bs-pagination-border-width) solid var(--sh-color-one) !important;
    color: var(--sh-color-one) !important;
}
.active>.page-link, .page-link.active{
    background-color: var(--sh-color-one) !important;
    color:#fff !important;
}
.btn-primary:hover {
    background-color: var(--sh-color-tree);
    color: #fff;
}

.btn-tree {
    background-color: var(--sh-color-tree);
    color: #fff;
}
.btn-outline-tree {
    border:solid 1px var(--sh-color-tree) !important;
    color:  var(--sh-color-tree);
    background:transparent;
}
.btn-outline-tree:hover {
    border:solid 1px var(--sh-color-tree) !important;
    color:  var(--sh-color-tree);
    background:transparent;
}

.brn-cancel {
    background-color: #ABABAB;
    color: #000;
}

.brn-four, .brn-four.active, .brn-four.show, .brn-four:first-child:active, :not(.btn-check) + .brn-four:active {
    background-color: var(--sh-color-four);
    color: #fff;
}

.brn-four:hover {
    background-color: var(--sh-color-four);
    color: #fff;
}

.brn-cancel:hover {
    background-color: #ABABAB;
    color: #000;
}

.btn-tree:hover {
    background-color: var(--sh-color-tree) !important;
    border: unset;
    color: #000;
}

.bg-dark {
    background-color: var(--sh-color-one) !important;
    color: #fff;
}

.label-yellow {
    color: #353535;
    background-color: #FFDD80;
}

.label-blue {
    color: #353535;
    background-color: #809DFF;
}

.label-pink {
    background-color: #F7A3FF;
    color: #353535;
}

.label-green {
    color: #353535;
    background-color: #B2FFC0;
}
.label-green:hover {
    color: #353535;
    background-color: #97d9a3;
}

.label-orange {
    color: #353535;
    background-color: #FFCF81;
}
.label-red {
    color: #fff;
    background-color: var(--sh-color-tree);
}

.label-dark {
    color: #fff;
    background-color: #515151
}

.label-whatsapp {
    color: #353535;
    background-color: #34DF76;
}

.label-x {
    color: #fff;
    background-color: #8FDCFF;
}

.label-telegram {
    color: #fff;
    background-color: #34AADF;
}

.header-action-btns {
    display: flex;
    flex-direction: row-reverse;
    gap: 11px;
    margin: 0;
    padding: 0;
}

.btn {
    border: unset;
    padding: 10px 20px 10px 20px !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 24px !important;
    border-radius: 100px;
}


/* استایل نوار ناوبری */
.navbar {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/*modals start*/
.modal-content {
    mask: calc(100% - var(--card-change-password_d) - var(--x-card-change-password)) 0 var(--card-change-password_m),
    100% calc(var(--card-change-password_d) + var(--y-card-change-password)) var(--card-change-password_m),
    radial-gradient(var(--s-card-change-password) at 100% 0, #0000 99%, #000 calc(100% + 1px)) calc(-1 * var(--r-card-change-password) - var(--x-card-change-password)) calc(var(--r-card-change-password) + var(--y-card-change-password)),
    var(--card-change-password_g) calc(-1 * var(--card-change-password_d) - var(--x-card-change-password)) 0,
    var(--card-change-password_g) 0 calc(var(--card-change-password_d) + var(--y-card-change-password));
    mask-repeat: no-repeat;
    border-radius: 34px;
}

.modal-header {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    justify-content: flex-start;
}
.modal-header .modal-title {
    font-size: 16px;
    padding: 18px 40px;
}

.modal-close-btn {
    background-color: #E33232 !important;
    padding: 18px !important;
    border-radius: 100px !important;
    z-index: 23;
    margin: 0 !important;
}
.modal-close-btn-x{
    background-color: #E33232 !important;
    padding: 15px 16px 11px 16px !important;
    border-radius: 100px !important;
    position: absolute;
    top:1px;
}
.modal-body {
    padding: 30px 30px 0 30px;
}

.modal-footer {
    border: 0;
    padding: 0 20px 14px 20px;
}

/*modals end*/
.alert{
    font-size:14px;
    padding: 15px 40px;
    line-height: 19px;
    border-radius: 8px;
}
.alert i{
    font-size: 20px;
    position: absolute;
    right: 12px;
    top: 14px;
}
.alert-info{
    border-color: #D3FFE4;
    background-color:#E9FFF2;
    color:#008852;
    line-height: 18px;
}
.rounded-pill{
    padding: 10px 9px 8px 9px;
    line-height: 6px;
    font-size: 14px;
    color:#000;
}