/* Font Family */
@font-face {
    font-family: IranSans;
    src: url("../fonts/iranSans/IRANSansEot.eot") format("eot"),
    url("../fonts/iranSans/IRANSansWoff.woff") format("woff"),
    url("../fonts/iranSans/IRANSansWoff2.woff2") format("woff2");
}

@font-face {
    font-family: IranSansBold;
    src: url("../fonts/iranSans/IRANSansEotBold.eot") format("eot"),
    url("../fonts/iranSans/IRANSansWoffBold.woff") format("woff"),
    url("../fonts/iranSans/IRANSansWoff2Bold.woff2") format("woff2");
}

@font-face {
    font-family: Ordibehesht;
    src: url("../fonts/ordibehesht/Ordibehesht.woff") format("woff");
}

@font-face {
    font-family: IranSansBlack;
    src: url("../fonts/iranSans/IRANSansWeb_Black.woff") format("woff");
}

@font-face {
    font-family: IranSansMedium;
    src: url("../fonts/iranSans/IRANSansWeb_Medium.woff") format("woff");
}

@font-face {
    font-family: SevenSegment;
    src: url("../fonts/sevenSegment/SevenSegment.woff") format("woff");
}

/* Root */

:root {
    --opacity-100: 1;
    --bs-warning-cold: #ff8400;
    --color-hint-object-success: #4caf50;
    --color-hint-object-danger: #d00025;
    --color-hint-object-warning: #ffa500;
    --color-hint-object-gray: #757575;
    --color-hint-object-danger-hot: #9c0000;
    --color-hint-object-gray-400: #403f44;
    --color-white: #ffffff;
    --color-hint-purple: #b000d5;
    --color-hint-purple-hover: rgba(135, 4, 162, 0.96);
    --radius-20: 20px;
    --rem-3: 3rem;
    --color-dark-900: #0c0c0c;
    --color-button-danger: #ef4056;
    --end-37: 37%;
    --start-97: 97%;
    --bottom-1: 1%;
    --color-hint-gray: #727272;
    --btn-orange-mo20: #FF8401;
    --btn-gray-300: #b4b4b4;
    --btn-orange-hover-mo20: rgba(241, 130, 0, 0.91);
    --btn-orange-focus-mo20: rgba(218, 116, 0, 0.91);
}

/* Css All */

* {
    padding: 0;
    margin: 0;
    transition: .5s all;
    box-sizing: border-box;
}

body {
    font-family: IranSans !important;
}

.header {
    margin-top: 100px;
}

h1 {
    font-family: Ordibehesht;
}

h2 {
    font-family: IranSansBlack;
}

h3 {
    font-family: IranSansMedium;
    line-height: 35px;
}

/* ScrollBar */
::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: 0 0 0 .1rem #565659 !important;
    border-radius: 2px !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1f1f1f !important;
    border-radius: 2px !important;
}

@media only screen and (max-width: 576px) {
    .bg-red-dark {
        background-color: #780001 !important;
    }

    .bg-dark {
        background-color: #403f44;
    }

    .bg-dark-frame {
        opacity: 1;
        background-color: #0d0c0f !important;
    }

    .navbar-main-menu {
        background-color: #fef0d5 !important;
    }

    .card {
        color: #ffffff;
    }

    label {
        color: #242424 !important;
    }

    .bg-black-frame {
        opacity: 1;
        background-color: #0d0c0f !important;
    }

    .fs-10 {
        font-size: 4.9rem !important;
    }

    .fs-10 {
        font-size: calc(4rem - .2rem) !important;
    }

    .bg-info-login-admin-po {
        clip-path: polygon(100% 100%, 100% -100%, -80% 100%) !important;
    }

    .bg-gw {
        background-color: #403f44;
    }

    .text-sm-dark {
        color: #000000 !important;
    }

    .column-sm-reverse {
        flex-direction: column-reverse !important;
    }

    .navbar-nav {
        flex-direction: column-reverse !important;
    }

    .mb-5-sm {
        margin-bottom: var(--rem-3) !important;
    }

    .border-sm-top {
        border-top: 1px solid #dee2e6 !important;
    }

}

@media only screen and (min-width: 576px) {
    .bg-gray {
        background: #1C1C1E url("../images/user/background.png") no-repeat fixed center;
        background-size: cover;
    }

    .pos-resp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    /*انیمیشن لوگو و بک گراند*/
    @keyframes bglogo {
        0% {
            opacity: 0;
            top: 50%;
            width: 486px;
        }
        50% {
            opacity: 1;
            top: 50%;
            width: 486px;
        }
        75% {
            top: 50%;
            width: 486px;
        }
        100% {
            top: 48%;
            width: 350px;
        }
    }
    .divlogo {
        animation-name: bglogo;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }

    /*انیمیشن متن مرکز تخصصی*/
    @keyframes mo20Slogan {
        0% {
            opacity: 0;
            top: 50%;
            font-size: 0vw;
        }
        100% {
            opacity: 1;
            top: 60%;
            font-size: 5vw;
        }
    }
    .mo20Slogan {
        opacity: 0;
        font-family: Ordibehesht;
        color: white;
        animation-name: mo20Slogan;
        animation-delay: 2s;
        animation-duration: 1.5s;
        animation-fill-mode: forwards;
    }


    .btn-border {
        border: 1px solid #cecece !important;
        background: rgba(255, 255, 255, 0.23) !important;
        top: 58vh;
        animation: btn_group 2s;
        animation-delay: 4s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes btn_group {
        to {
            opacity: 1;

        }
    }

    /*  login  */
    .bg-gw {
        background-color: #403f44 !important;
    }

    .bg-black-frame {
        opacity: 1;
        background-color: #0d0c0f !important;
    }

    .w-lg-60 {
        width: 60% !important;
    }

    .w-lg-75 {
        width: 75% !important;
    }

    .mt-lg-10 {
        margin-top: 15rem !important;
    }

    .mt-lg-5 {
        margin-top: 5rem !important;
    }

    .vh-lg-88 {
        min-height: calc(100vh - 124px);
        max-height: calc(100vh - 124px);
    }

    .column-lg-reverse {
        flex-direction: column-reverse !important;
    }

    .end-lg-37 {
        left: var(--end-37);
    }

    .border-lg-top {
        border-top: 1px solid #dee2e6 !important;
    }
}

.img-cover {
    background-size: cover;
}

/* Font Class */
.font-ordibehesht {
    font-family: Ordibehesht;
}

.font-iranssans {
    font-family: IranSans;
}

.font-iranssans-bold {
    font-family: IranSansBold !important;
}

.font-iranssans-medium {
    font-family: IranSansMedium;
}

.font-seven-segment {
    font-family: SevenSegment;
}

.logo-80 {
    height: 40px;
}

.text-beige {
    color: #fef0d5;
}

/* Scroll */
.scroll-behavior-contain {
    overscroll-behavior: contain !important;
}

/* Carousel Or Slider */
.bx-wrapper {
    border: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
}

/* Background */

.bg-beige {
    background-color: #ffe3ac;
    color: #0d0c0f;
}

.bg-silver {
    background-color: #1f1f1f !important;
    color: #e3e3e3 !important;
}

.bg-white-gray {
    background-color: #f0f0f0 !important;
    color: #171717 !important;
}

.bg-dark-gray {
    background-color: #2b3238 !important;
}

.bg-primary-dark {
    background-color: #1e2327 !important;
    color: #ffffff;
}

.bg-primary-cold {
    background: linear-gradient(to bottom, #1d72f6, #062b66) !important;
    color: #ffffff;
}

.bg-success-cold {
    background-color: #5adb05 !important;
    color: #ffffff;
}

.bg-purple-cold {
    background: linear-gradient(to bottom, rgb(161, 1, 173), rgb(161, 1, 173)) !important;
    color: #ffffff;
}

.bg-danger-cold {
    background-color: #e60000 !important;
    color: #ffffff;
}

.bg-warning-cold {
    background-color: #ff8400 !important;
    color: #ffffff;
}

.bg-success-cold {
    background-color: #5adb05 !important;
    color: #ffffff;
}

.bg-success-hint-cold {
    background-color: var(--color-hint-object-success) !important;
    color: var(--color-white);
}

.bg-danger-hint-cold {
    background-color: var(--color-hint-object-danger) !important;
    color: var(--color-white);
}

.bg-warning-hint-cold {
    background-color: var(--color-hint-object-warning) !important;
    color: var(--color-white);
}

.bg-gray-hint-cold {
    background-color: var(--color-hint-object-gray) !important;
    color: var(--color-white) !important;
}

.bg-gray-hint-400 {
    background-color: var(--color-hint-object-gray-400) !important;
    color: var(--color-white) !important;
}

.bg-secondary-focus:focus {
    background-color: #efefef !important;
}

.bg-danger-hint-hot {
    background-color: var(--color-hint-object-danger-hot) !important;
    color: var(--color-white);
}

.bg-main-page-dark {
    background: #1F2830 !important;
}

.bg-header-page-wallet {
    background: #232F3D !important;
    color: var(--color-white) !important;
}

.wallet-balance {
    color: var(--color-white) !important;
    position: absolute !important;
}

.wallet-report {
    position: relative !important;
    top: -2rem;
    box-shadow: 0 1rem 2rem hsla(0, 0%, 100%, 0.07);
}

.wallet-report .card {
    border-radius: .2rem .2rem 0 0;
    margin: 0 .2rem 0 .2rem;
}

.bg-main-page-carousel {
    background: #334D51 !important;
}

.bg-main-page-box-code {
    opacity: var(--opacity-100);
    background: #223942 !important;
    color: var(--color-white) !important;
}

/* Resize */
.resize-none {
    resize: none;
}

/*  */
.accordion-button:not(.collapsed) {
    color: #FFFFFF !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

/* Text */

.text-lg {
    font-size: calc(2rem + 2vw) !important;
}

.fs-7 {
    font-size: calc(.8rem + .7vw) !important;
}

.fs-8 {
    font-size: 7rem !important;
}

.fs-9 {
    font-size: 8rem !important;
}

.fs-10 {
    font-size: calc(20px + 90px);
}

.fs-11 {
    font-size: .9rem !important;
}

.fs-12 {
    font-size: .8rem !important;
}

.text-md {
    font-size: 3rem !important;
}

.text-white-hover:hover {
    color: #ffffff !important;
}

.text-gray-hover:hover {
    color: #888888 !important;
}

.text-dark-hover:hover {
    color: #000000 !important;
}

.text-info-hover:hover {
    color: #0dcaf0 !important;
}

.text-info-hover:hover {
    color: #d7a00a !important;
}

.text-pink-hover:hover {
    color: #d70a71 !important;
}

.text-danger-focus:focus {
    color: #e50000 !important;
}

.fs-4-focus:focus {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.color-dark-900 {
    color: var(--color-dark-900) !important;
}

.color-button-danger {
    color: var(--color-button-danger) !important;
}

.color-gray {
    color: var(--color-hint-gray) !important;
}

.color-purple {
    color: var(--color-hint-purple);
!important;
}

.text-turquoise-green-ico {
    color: #21CFD4 !important;
}

/* Btn */
.btn-success-cold {
    background: linear-gradient(to bottom, #62e51c, #1f7808);
    color: #ffffff;
}

.btn-primary-cold {
    background: linear-gradient(to bottom, #1d72f6, #062b66);
    color: #ffffff;
}

.btn-dark-cold {
    background: linear-gradient(to bottom, #1b1b72, #050532);
    color: #ffffff;
}

.btn-danger-gradient {
    background: linear-gradient(to bottom, rgba(250, 95, 95, 0.93), rgba(245, 6, 6, 0.93));
    color: #ffffff !important;
}

.btn-warning-gradient {
    background: linear-gradient(to bottom, rgb(248, 231, 110), rgb(180, 139, 2));
    color: #ffffff !important;
}

.btn-orange-gradient {
    background: linear-gradient(to bottom, rgb(238, 103, 0), rgb(210, 88, 0)) !important;
    color: #ffffff !important;
}

.btn-info-gradient {
    background: linear-gradient(to bottom, #03527b, #03527b);
    color: #ffffff !important;
}

.btn-dark-gradient {
    background: linear-gradient(to bottom, #2f3031, #2f3031);
    color: #ffffff !important;
}

.btn-purple-cold {
    background: linear-gradient(to bottom, rgb(161, 1, 173), rgb(190, 0, 201)) !important;
    color: #ffffff !important;
}

.btn-dark-gradient:hover {
    box-shadow: 0 0 0 .1rem #565659;
}

.btn-border-info {
    border-color: #4a8cb0 !important;
}

.btn-border-info:hover {
    box-shadow: 0 0 0 .1rem rgba(98, 163, 255, 0.5);
}

.btn-border-gray {
    border-color: #565659 !important;
}

.btn-orange {
    opacity: var(--opacity-100);
    background-color: var(--btn-orange-mo20) !important;
    color: var(--color-white);
}

.btn-orange:hover {
    opacity: var(--opacity-100);
    background-color: var(--btn-orange-hover-mo20) !important;
    color: var(--color-white);
}

.btn-orange:focus {
    opacity: var(--opacity-100);
    background-color: var(--btn-orange-focus-mo20) !important;
    color: var(--color-white);
}

.btn-purple {
    opacity: var(--opacity-100);
    background-color: var(--color-hint-purple) !important;
    color: var(--color-white) !important;
}

.btn-purple:hover {
    opacity: var(--opacity-100);
    background-color: var(--color-hint-purple-hover) !important;
    color: var(--color-white) !important;
}

.btn-outline-purple {
    opacity: var(--opacity-100);
    color: var(--color-hint-purple) !important;
    border-color: var(--color-hint-purple) !important;
}

.btn-outline-purple:hover {
    color: var(--color-white) !important;
    background: var(--color-hint-purple) !important;
}

/* Rounded Or Radius */
.rounded-15 {
    border-radius: 13px !important;
}

.rounded-30 {
    border-radius: 30px !important;
}

.rounded-5 {
    border-radius: 2rem !important;
}

.rounded-pill-hover:hover {
    border-radius: 50rem !important;
}

.rounded-20 {
    border-radius: var(--radius-20);
}

.z-index-1 {
    z-index: 1000 !important;
}

/* Top & Bottom & Right & Left */
.top-25 {
    top: 25% !important;
}

.bottom-1 {
    bottom: var(--bottom-1) !important;
}

.mt-10 {
    margin-top: 10rem !important;
}

.vh-88 {
    height: calc(88vh - 1.2vh);
}

.vh-85 {
    height: calc(85vh - 100px);
}

.vh-65 {
    height: calc(65vh - 100px);
}

.vh-60 {
    height: calc(60vh - 100px);
}

.vh-15 {
    height: 15vh !important;
}

.vw-25 {
    width: 25vw !important;
}

.vw-50 {
    width: 50vw !important;
}

.vw-75 {
    width: 75vw !important;
}

.w-form-600 {
    width: 600px !important;
}

.start-90 {
    right: 90% !important;
}


/* Translate */
.tr-non-30-15 {
    transform: translate(-30px, 15px) !important;
}

/* Scroll */

.scroll-x {
    overflow: auto !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.grid-scroll .card {
    display: inline-block !important;
}

.scroll-y {
    overflow-y: scroll;
    overflow-x: hidden;
}

.disabled {
    pointer-events: none;
    opacity: 0.3;
}

/* Height & Width */

.h-700 {
    min-height: calc(700px - 62px);
    max-height: calc(700px - 62px);
}

/* checkBox */
.toggle-btn {
    width: 2%;
    height: 2%;
    border-radius: 100%;
    display: inline-block;
    padding: 1.1rem;
    position: relative;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyklEQVQ4T42TaxHCQAyENw5wAhLACVUAUkABOCkSwEkdhNmbpHNckzv689L98toIAKjqGcAFwElEFr5ln6ruAMwA7iLyFBM/TPDuQSrxwf6fCKBoX2UMIYGYkg8BLOnVg2RiAEexGaQQq4w9e9klcxGLLAUwgDAcihlYAR1IvZA1sz/+AAaQjXhTQQVoe2Yo3E7UQiT2ijeQdojRtClOfVKvMVyVpU594kZK9zzySWTlcNqZY9tjCsUds00+A57z1e35xzlzJjee8xf0HYp+cOZQUQAAAABJRU5ErkJggg==") no-repeat 50% center #e74c3c;
    cursor: pointer;
    -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.toggle-btn.active {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAmUlEQVQ4T6WT0RWDMAhFeZs4ipu0mawZpaO4yevBc6hUIWLNd+4NeQDk5sE/PMkZwFvZywKSTxF5iUgH0C4JHGyF97IggFVSqyCFga0CvQSg70Mdwd8QSSr4sGBMcgavAgdvwQCtApvA2uKr1x7Pu++06ItrF5LXPB/CP4M0kKTwYRIDyRAOR9lJTuF0F0hOAJbKopVHOZN9ACS0UgowIx8ZAAAAAElFTkSuQmCC") no-repeat 50% center #2ecc71;
}


.toggle-btn .cb-value {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* Animation Verify */
@keyframes confetti-slow {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
    }
}

@keyframes confetti-medium {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
    }
}

@keyframes confetti-fast {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg);
    }
}

.animation-container {
    width: 98%;
    height: 98%;
}

.confetti-container {
    perspective: 700px;
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.confetti {
    position: absolute;
    z-index: 1;
    top: -10px;
    border-radius: 0%;
}

.confetti--animation-slow {
    animation: confetti-slow 2.25s linear 1 forwards;
}

.confetti--animation-medium {
    animation: confetti-medium 1.75s linear 1 forwards;
}

.confetti--animation-fast {
    animation: confetti-fast 1.25s linear 1 forwards;
}

/* Checkmark */
.checkmark-circle {
    width: 140px;
    height: 150px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto;
}

.checkmark-circle .background-vy-zp {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #00C09D;
    position: absolute;
}

.checkmark-circle .checkmark {
    border-radius: 5px;
}

.checkmark-circle .checkmark.draw:after {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    -moz-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.checkmark-circle .checkmark:after {
    opacity: 1;
    height: 75px;
    width: 37.5px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    border-right: 15px solid white;
    border-top: 15px solid white;
    border-radius: 2.5px !important;
    content: "";
    left: 35px;
    top: 75px;
    position: absolute;
}

@-webkit-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@-moz-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }
    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }
    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

.verify-success {
    animation-name: verify-success;
    animation: verify-success .5s linear;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes verify-success {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;

    }
}

.verify-zp-in {
    opacity: 0;
    animation-name: verify-zp-in;
    animation: verify-zp-in .5s linear;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
}

@keyframes verify-zp-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Animation */
.animation-down {
    animation: down 1s linear infinite;
    animation-delay: .2s;
    animation-duration: 1.5s;
    transition: all 1s;
}

@keyframes down {
    0% {
        transform: translateY(0);
        opacity: .3;
    }
    50% {
        transform: translateY(50%);
        opacity: .6;
    }
    100% {
        transform: translateY(100%);
        opacity: 1;
        font-size: 22px !important;
    }
}

/**/

.animation-tremor-slow {
    animation: tremor-slow 1s linear;
    animation-delay: .1s;
    animation-duration: .5s;
    transition: all 1s;
}

@keyframes tremor-slow {
    0% {
        transform: rotate(-4deg);
    }
    50% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(-4deg);
    }
}

/* Cursor */

.cursor-pointer {
    cursor: pointer;
}


/* Line Height */

/* BoxShadow */

.bw-it-info-hover:hover {
    box-shadow: inset 250px 0 0 0 #0dcaf0;
}

.bw-it-success-hover:hover {
    box-shadow: inset 250px 0 0 0 rgba(60, 153, 110, 0.5);
}

.bw-it-white-hover:hover {
    box-shadow: inset 250px 0 0 0 #ffffff;
}

.bw-danger-hover:hover {
    transition: all .7s;
    box-shadow: inset 250px 0 0 0 rgb(230, 0, 0);
}

/* Transition */

.transition-1-hover:hover {
    transition: 1s ease-in-out all;
    -webkit-transition: 1s ease-in-out all;
}

.transition-6-hover:hover {
    transition: .6s ease-in-out all;
    -webkit-transition: .6s ease-in-out all;
}

/* Selector */
.selector-secondary {
    transition: all .8s !important;
    background-color: #4f4f4f !important;

}

/* tooltip-custom */
.tooltip-custom {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip-custom .tooltip-custom-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(73, 73, 73, 0.85);
    color: #ffffff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.5s;
}

.tooltip-custom .tooltip-custom-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-custom:hover .tooltip-custom-text {
    visibility: visible;
    opacity: 1;
}

/* Rtl & Ltr */

.dir-rtl {
    direction: rtl !important;
}

.dir-ltr {
    direction: ltr !important;
}

.dir-revert {
    direction: revert !important;
}

/* Input */

.border-form-primary input:focus, textarea:focus {
    border-color: rgba(0, 67, 255, .4) !important;
    box-shadow: 0.125rem 0.125rem 0.125rem 0.125rem rgba(0, 67, 255, .4) !important;
}

#users-list-affiliate_tag {
    border: none !important;
}

#users-list-affiliate_tag:focus {
    border: none !important;
}

.form-upload {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.form-upload + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.form-upload:focus + label,
.form-upload + label:hover {
    background-color: red;
}

.form-upload + label {
    cursor: pointer; /* "hand" cursor */
}

/* Video */

.control-video {
    position: relative !important;
    top: -42px;
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    opacity: 0.4 !important;
    transition: opacity 0.4s !important;
}

.timeline-video {
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    border-right: 3px solid #dedede;
    border-left: 3px solid #dedede;
}

.timeline-video .bar {
    background: rgb(0, 0, 66);
    height: 4px;
    flex: 1;
}

.timeline-video .bar .inner {
    background: #eaeaea;
    width: 0;
    height: 100%;
}

/* Opacity */
.opacity-hover-100:hover {
    opacity: 1 !important;
}

/* Admin */
.bg-info-login-admin-po {
    background-color: #44c7f5;
    clip-path: polygon(100% 100%, 100% -20%, -100% 100%);
    color: #fefefe;
}

.cp-none {
    clip-path: none;
}


.overflow-wrap {
    overflow-wrap: break-word !important;
    word-break: keep-all !important;
}

.admin-header {
    background-color: #1e2327;
    height: 62px;
    padding: 0 20px 0 5px;
}

.admin-sidebar {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: calc(100vh - 62px);
    max-height: calc(100vh - 62px);
    background-color: #1e2327;
}

.admin-sidebar a {
    color: #efefef;
    font-size: 16px;
}

.admin-sidebar a:hover {
    color: rgba(255, 255, 255, 0.93);
    transition: .4s ease-in-out all;
}

.admin-main {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: calc(100vh - 62px);
    max-height: calc(100vh - 62px);
}

.admin-ticket-action-bar {
    background: #1E88E5 !important;
    color: #F5F5F5 !important;
    box-shadow: 0 0 12px #1E88E5 !important;
}


.admin-ticket-messages {
    max-height: 55vh;
    min-height: 55vh;
    margin-top: 80px !important;
    margin-bottom: 80px !important;
}

.user-ticket-messages {
    max-height: 55vh;
    min-height: 49vh;
    margin-bottom: 55px !important;
    background: transparent !important;
}

.admin-ticket-message {
    border-radius: 8px;
    max-width: 300px;
    direction: rtl;
}

.admin-ticket-user {
    background: #E3F2FD !important;
    color: black !important;
    box-shadow: 0 0 3px #F5F5F5 !important;
}

.admin-ticket-admin {
    background: #1976D2;
    color: white;
    box-shadow: 0 0 3px #1E88E5;
}

.admin-ticket-field {
    display: flex !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important;
    width: 90% !important;
    height: fit-content !important;
    z-index: 1030 !important;
}

#admin-ticket-textField {
    padding: 8px !important;
    outline: none;
}

.admin-ticket-fileField {
    left: 10px !important;
    width: fit-content !important;
    height: fit-content !important;
    color: #727272 !important;
}

/* DataTable */
.custom-datatable-row-header {
    direction: ltr !important;
}

.custom-datatable-form-search input {
    text-align: end;
}

.custom-datatable-row-footer {
    text-align: start !important;
}

.custom-datatable-footer-show-page-number {
}

/* User */

.img-zoom {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.9s;
    display: inline-block;
}

.img-zoom:hover,
.img-zoom:focus {
    opacity: 0.7;
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
}

.modal-backdrop{
    z-index: 1 !important;
}


    /* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
    transition: all .8s ease-in-out;
}

.out {
    animation-name: zoom-out;
    animation-duration: 0.9s;
    transition: all .9s ease-in-out;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0.1)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0.1)
    }
    to {
        transform: scale(1)
    }
}

@keyframes zoom-out {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1)
    }
}

#modal-img-zoom {
    overflow-x: scroll !important;
    overflow-y: scroll !important;
}


.lbl-style {
    float: right !important;
    width: 100%;
    text-align: right;
}

.file-style {
    padding-top: 18px !important;
    padding-bottom: 0 !important;
    padding-right: 20px !important;

}

.margin-right-25 {
    margin-right: 25px;
}

.nanobar-progress .nanobar-bar {
    width: 100%;

    background-color: #e3e3e3 !important;
}

/* Card subscription */
.bg-primary-gradient-sub {
    background: linear-gradient(to bottom left, #44A5F0, #4567DD) !important;
    color: var(--color-white) !important;
    opacity: var(--opacity-100);
}

.bg-danger-gradient-sub {
    background: linear-gradient(to bottom left, #E60000, rgba(230, 0, 0, 0.66)) !important;
    color: var(--color-white) !important;
    opacity: var(--opacity-100);
}

.bg-warning-gradient-sub {
    background: linear-gradient(to bottom left, #ff9900, rgba(255, 132, 1, 0.96)) !important;
    color: var(--color-white) !important;
    opacity: var(--opacity-100);
}

.text-info-gray-sub {
    color: #B4DAF8 !important;
}

.text-warning-sub {
    color: #FF8401 !important;
}

.text-danger-sub {
    color: #E60000 !important;
}

.btn-danger-sub {
    background: linear-gradient(to bottom left, #E60000, rgba(230, 0, 0, 0.66)) !important;
}

.active-notif-affiliate{
    position: relative;
    border: none !important;
    animation: active-notif-affiliate 1s linear infinite;
    animation-delay: .1s;
    animation-duration: 1500ms;
    transition: all 1s;
}

@keyframes active-notif-affiliate {
    from{
        opacity: 0.5;
        transform: rotate(1deg);
    }

    to{
        opacity: 0.9;
        transform: rotate(3deg);
    }
}

#loader-loading {
    width: 150px;
    height: 150px;
    z-index: 1000;
    position: fixed;
    top: calc(50% - 100px);
    right: calc(50% - 70px);
}

.container-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #FFFFFF;
}

@keyframes animation-loader {
    0% {
        stroke-dasharray: 1 98;
        stroke-dashoffset: -105;
    }
    50% {
        stroke-dasharray: 80 10;
        stroke-dashoffset: -160;
    }
    100% {
        stroke-dasharray: 1 98;
        stroke-dashoffset: -300;
    }
}

#spinner-loader {
    transform-origin: center;
    animation-name: animation-loader;
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(1, 2, 3, 5);
    animation-iteration-count: infinite;
}

.animation-color-loader {
    animation: animation-color-loader linear infinite;
    animation-delay: .1s;
    animation-duration: 1000ms;
    transition: all 1s;
}

@keyframes animation-color-loader {
    20% {
        opacity: .2;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.9;
    }
}

.d-hidden{
    display: none;
}