@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --others-white: #FFF;
    --greyscale-100: #F8F8F8;
    --greyscale-200: #F1F2F4;
    --greyscale-300: #C1C1C1;
    --greyscale-500: #444444;
    --greyscale-600: #687588;
    --greyscale-700: #020626;
    --greyscale-900: #020626;
    --greyscale-grey-200: #E4E4E7;
    --primary-base: #2d43fb;
    --alerts-error-base: #E03137;
    --secondary-base: #FFD023;
    --others-blue: #2F78EE;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    font-family: 'Poppins', sans-serif;
    /*background-image: url(../images/login-back.png);
    background-size: cover;
    background-repeat: no-repeat;*/
}
/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* button */
::-webkit-scrollbar-button {
    background: #020626;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--greyscale-600)
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #666;
    }

/* Track */
::-webkit-scrollbar-track {
    background: #020626;
}

/* The track NOT covered by the handle. */
::-webkit-scrollbar-track-piece {
    background: #020626;
}

/* Corner */
::-webkit-scrollbar-corner {
    background: #020626;
}

/* Resizer */
::-webkit-resizer {
    background: var(--greyscale-300);
}

a, p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    text-decoration: none;
    /*line-height: 1.2;*/
}

button:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none;
}

input:focus {
    outline: none !important;
}

a:active, a:focus {
    outline: 0;
    outline: none !important;
    -moz-outline-style: none;
}

a, img, span, input, textarea, button, svg, path, circle {
    transition: .3s all ease;
}

span, a {
    display: inline-block;
}


.wrapper {
    overflow: hidden;
}

h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.5px;
}

h3 {
    color: #020626;
    /*font-size: 32px;*/
    font-weight: 700;
    line-height: 125%;
}

h4 {
    color: var(--greyscale-900, #020626);
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

h5 {
    color: var(--greyscale-900, #020626);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}

.text-white {
    color: #fff;
}

.text-grey {
    color: #687588;
}


/* btns */

.border-btn {
    border-radius: 10px;
    border: 1px solid var(--greyscale-900, #020626);
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    color: var(--greyscale-900, #020626);
    
}

    /*.border-btn:hover {
        border: 1px solid #020626;
        background: #FAFAFA;
        color: #020626;
    }*/

    .border-btn:hover {
        border: 1px solid #020626;
        background: #020626;
        color: #fff;
    }

.sign-img {
    height: 70%;
}

    .sign-img img {
        width: 85%;
        height: 85%;
        /*opacity:0.5;*/
    }

.sign-left {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sign-text {
    /*border-top: 5px solid #2d43fb;
    background: #020626;*/
    display: flex;
    /*padding: 50px 50px 80px 50px;*/
    padding: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /*gap: 24px;*/
    gap: 12px;
    align-self: stretch;
    height:30%;
}

    .sign-text h1 {
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: -0.5px;
    }

    .sign-text p {
        color: #FFF;
        font-size: 14px;
        line-height: 150%;
        width:80%;
    }

.sign-form-block {
    padding: 24px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
}

    .sign-form-block .arrow-icon {
        position: absolute;
        left: -60px;
        top: -30px;
        height: 61px;
    }

.sign-form {
    position: relative;
    /*max-width: 420px;*/
    width: 80%;
    margin: auto;
    display: flex;
    /* height: 1024px; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*gap: 10px;
    background: #fff;*/
}

    .sign-form form {
        width: 100%;
    }

.sign-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .sign-steps .steps-status {
        display: flex;
        align-items: flex-start;
        gap: 6px;
    }

        .sign-steps .steps-status span {
            display: inline-block;
            min-width: 20px;
            height: 20px;
            border-radius: 3px;
            background: #C1C1C1;
        }

            .sign-steps .steps-status span.active {
                background: #2d43fb;
            }

    .sign-steps > p {
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.3px;
    }

.sign-form h3 {
    margin: 32px 0;
}

.sign-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

    .sign-form .form-group .form-label {
        color: #020626;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
        margin-bottom: 0;
    }

        .sign-form .form-group .form-label span {
            color: #E03137;
            font-size: 14px;
            font-weight: 500;
            line-height: 160%;
        }

    .sign-form .form-group input {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #C1C1C1;
        width: 100%;
        color: #020626;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

        .sign-form .form-group input:focus {
            border-color: #2d43fb;
            box-shadow: none;
        }

        .sign-form .form-group input::placeholder {
            color: #FFFFFF;
            font-size: 14px;
            line-height: 160%;
        }

.form-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px 0;
}

.sign-btns {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin: 32px 0;
}

.btn,
.sign-btn {
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.3px;
    /*border: 1px solid #020626;*/
    min-width: 80px;
}

    .black-btn,
    .sign-btn.next {
        background: #2d43fb;
        color: #fff;
    }

        .black-btn:hover,
        .sign-btn.next:hover {
            background: #03bdff;
        }

        .sign-btn.next.active {
            background: #2d43fb;
            border-color: #2d43fb;
        }

            .sign-btn.next.active:hover {
                background: #03bdff;
                border-color: #03bdff;
            }

    .sign-btn.prev {
        background: transparent;
        color: #020626;
    }

        .sign-btn.prev:hover {
            border: 1px solid #020626;
            background: #FAFAFA;
        }

    .btn:focus {
        box-shadow: none;
    }

.black-btn:hover {
    color: #fff;
}

.sign-link {
    text-align: center;
}

    .sign-link p {
        color: #020626;
        font-size: 14px;
        line-height: 160%;
    }

        .sign-link p a {
            color: #2d43fb;
            font-weight: 500;
        }

            .sign-form .forgot-group .forgot-btn:hover,
            .sign-link p a:hover {
                color: #020626;
            }

.sign-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    gap: 10px;
}

    .sign-end span {
        display: inline-block;
        color: #020626;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .sign-end a {
        display: inline-block;
        color: #020626;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

        .sign-end a:hover {
            color: #2d43fb;
        }

/* sign input error style */
.sign-form .sign-btn[disabled] {
    display: none;
}

.sign-form .form-group input.error {
    border-color: #E03137;
}

.not-text,
.error-text {
    display: none;
    color: #E03137;
    font-size: 12px;
    line-height: 160%;
}

.not-text,
.form-group input.error ~ .error-text {
    display: flex;
    align-items: center;
}

    .not-text .fa-circle-exclamation,
    .sign-form .form-group .error-text .fa-circle-exclamation {
        font-size: 16px;
        margin-right: 4px;
    }

.sign-form .forgot-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .sign-form .forgot-group .forgot-btn {
        color: #2d43fb;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }
/* sign input error style end */
/* show-hide password style */
.input-in {
    position: relative;
}

    .input-in #showPass {
        position: absolute;
        z-index: 2;
        right: 20px;
        top: 10px;
        cursor: pointer;
    }

    .input-in #showPass {
        display: inline-block;
        margin-left: -40px;
    }

        .input-in #showPass.active .fa-eye-slash,
        .input-in #showPass .fa-eye {
            display: none;
        }

        .input-in #showPass.active .fa-eye {
            display: inline-block;
        }
/* show-hide password style end */

/* aside style */
.aside-block {
    border-right: 1px solid #C1C1C1;
    background: #020626;
    padding: 24px 32px;
    width: 280px;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
}

    .aside-block .aside-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
    }

        .aside-block .aside-logo .menu-closer {
            display: flex;
            align-items: center;
            gap: 0 5px;
            margin-top: 2px;
        }

            .aside-block .aside-logo .menu-closer .fa-chevron-left {
                color: #fff;
            }

.aside-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .aside-menu ul li .menu-link {
        display: flex;
        align-items: center;
        padding: 8px;
        gap: 0 16px;
        color: #FFF;
        font-size: 16px;
        font-weight: 500;
        /*line-height: 150%;*/
        letter-spacing: 0.2px;
        border-radius: 10px;
    }
        
    .glyph {
            display: inline-block;
            width: 9em;
            margin: 1em;
            text-align: center;
            vertical-align: top;
        }

    .glyph .flaticon {
        padding: 10px;
        display: block;
        font-family: "Flaticon";
        font-size: 24px;
        line-height: 1;
    }

        .glyph .flaticon:before {
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 0;
        }

.aside-menu ul li i {
    color: #FFFFFF;
}

        .aside-menu ul li .menu-link.active,
        .aside-menu ul li .menu-link:hover {
            background: #2d43fb;
        }

            .aside-menu ul li .menu-link.active i,
            .aside-menu ul li .menu-link:hover i {
                color: #fff;
            }

    .aside-menu ul li {
        margin-bottom: 3px;
    }

        .aside-menu ul li:last-child {
            margin-bottom: 0;
        }


.aside-app-link {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 12px 16px 20px;
    border-radius: 16px;
    background: #020626;
    position: relative;
}

    .aside-app-link::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;
        margin: auto;
        width: 92%;
        height: 100%;
        border-radius: 16px;
        opacity: 0.5;
        background: #020626;
        transition: .3s all ease;
    }

    .aside-app-link .upload-icon {
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top:20px;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }

    .aside-app-link .upload-btn {
        padding: 18px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        background: #FFF;
        color: #020626;
        font-size: 14px;
        font-weight: 600;
        /*line-height: 160%;*/
        position: relative;
        z-index: 2;
    }

        .aside-app-link .upload-btn:hover {
            background: #2d43fb;
            color: #fff;
        }

.aside-settings .logout-btn i,
.aside-settings .settings-btn i {
    color: #FFFFFF;
}

.aside-settings .logout-btn,
.aside-settings .settings-btn {
    padding: 16px 0;
    display: flex;
    align-items: center;
    gap: 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

    .aside-settings .logout-btn:hover,
    .aside-settings .settings-btn:hover,
    .aside-settings .settings-btn.active {
        color: #2d43fb !important;
    }

.aside-settings .logout-btn {
    margin-bottom: 16px;
}

.light-dark-switcher {
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

    .light-dark-switcher a {
        padding: 6px 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 8px;
        border-radius: 100px;
        width: 100%;
        font-size: 12px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
    }

        .light-dark-switcher a:hover,
        .light-dark-switcher a.active {
            background: #020626;
            color: #fff;
        }

        .light-dark-switcher a svg path,
        .light-dark-switcher a svg path {
            fill: #687588;
        }

        .light-dark-switcher a:hover svg path,
        .light-dark-switcher a.active svg path {
            fill: #fff;
        }
/* aside end */

/* dashboard style */
.main {
    display: flex;
    background: var(--greyscale-50, #FAFAFA);
}

section {
    width: 100%;
    overflow: hidden;
}

.dropdown-toggle::after {
    content: none;
}

.dashboard-top {
    padding: 16px;
    border-bottom: 1px solid #C1C1C1;
    background: #FFF;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

    .dashboard-top .dashboard-top-search {
        max-width: 315px;
        width: 100%;
        position: relative;
    }

        .dashboard-top .dashboard-top-search input {
            width: 100%;
            height: 48px;
            padding: 8px 8px 8px 46px;
            border-radius: 10px;
            border: none;
            background: var(--greyscale-100, #F8F8F8);
            font-size: 14px;
            font-weight: 400;
            line-height: 160%;
        }

            .dashboard-top .dashboard-top-search input::placeholder {
                font-size: 14px;
                font-weight: 400;
                line-height: 160%;
                color: var(--greyscale-600, #687588);
            }

        .dashboard-top .dashboard-top-search button {
            position: absolute;
            left: 16px;
            top: -4px;
            bottom: 0;
            margin: auto;
            padding: 0;
            border: none;
            background: transparent;
        }


.dashboard-top-right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.add-btn {
    /*max-width: 150px;
    height: 48px;
    border-radius: 10px;*/
    background: var(--greyscale-900, #020626);
    color: var(--others-white, #FFF);
    /*text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.2px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
   /* border: none;
    padding: 12px 24px;*/
}

    .add-btn:hover {
        background: #020626;
        color: #fff;
    }

    .add-btn img {
        width: 18px;
    }

    .add-btn[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

    .profile-btn[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

.dropdown-menu {
    padding: 8px;
    border-radius: 12px;
    background: var(--others-white, #FFF);
    box-shadow: 5px 5px 50px 0px rgba(26, 32, 44, 0.15);
    border: none;
    /*transform: scale(1.8) translate3d(190px, 85px, 0px) !important;*/
}

    .dropdown-menu li {
        /*margin-bottom: 8px;*/
    }

        .dropdown-menu li:last-child {
            margin-bottom: 0;
        }

    .dropdown-menu .dropdown-item {
        padding: 8px;
        border-radius: 10px;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
        letter-spacing: 0.2px;
        display: flex;
        align-items: center;
        /*justify-content: space-between;*/
        gap: 0 8px;
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu .dropdown-item.active {
            background: var(--greyscale-100, #F8F8F8);
        }

        .dropdown-menu .dropdown-item .check-icon {
            opacity: 0;
        }

        .dropdown-menu .dropdown-item.active .check-icon {
            opacity: 1;
        }

.dashboard-top-right .add-drop {
    margin-right: 20px;
}

.dashboard-top-right .notif-profile {
    display: flex;
    align-items: center;
    gap: 0 20px;
}

/* header notification */
.notif-profile .notif-btn {
    border: none;
    padding: 0;
    background: transparent;
}

.notif-profile .notif {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    position: relative;
    border-radius: 50%;
    background: var(--greyscale-100, #F8F8F8);
}

    .notif-profile .notif:hover {
        background: #e6e6e6;
    }

    .notif-profile .notif .notif-info {
        min-width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--others-white, #FFF);
        background: var(--alerts-error-base, #E03137);
        position: absolute;
        right: 0;
        top: 0;
    }

.notif-profile .notif-popup .dropdown-menu {
    min-width: 400px;
    box-shadow: 5px 5px 50px 0px rgba(26, 32, 44, 0.06);
}

.notif-profile .notif-title {
    color: var(--greyscale-900, #020626);
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

.notif-profile .notif-item {
    padding: 20px 16px;
    border-bottom: 1px solid #F1F2F4;
}

    .notif-profile .notif-item:last-child {
        border: none;
    }

.notif-item .notif-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 10px;
}

.notif-item .notif-name {
    overflow: hidden;
    color: var(--greyscale-900, #020626);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 160%;
    height: 24px;
}

.notif-item .notif-date {
    color: var(--greyscale-500, #FFFFFF);
    font-size: 10px;
    line-height: 160%;
}

.notif-item .notif-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow: hidden;
    color: var(--greyscale-600, #687588);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 400;
    line-height: 160%;
}

.notif-item .unread-icon {
    min-width: 8px;
    height: 8px;
    background: #E03137;
    border-radius: 50%;
}

/* header profile */
.profile-btn {
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0 10px;
}

    .profile-btn .profile-avatar img {
        min-width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .profile-btn .fa-chevron-down {
        font-size: 14px;
    }


/* dash main */
.dash-main {
    display: flex;
    flex-direction: column;
    gap: 12px 0;
    width: 100%;
    padding: 12px;
}

.dashboard-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 700;
    line-height: 130%;
}

.title-big {
    color: var(--greyscale-900, #020626);
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

.dash-date {
    position: relative;
}

    .dash-date input {
        border-radius: 8px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        padding: 8px 36px 8px 12px;
        height: 40px;
        font-size: 12px;
        background-image: url(../images/icons/calendar.svg);
        background-repeat: no-repeat;
        background-position: center right 10px;
        /* width: 90px; */
    }

        .dash-date input::placeholder,
        .dash-date input[value=""] {
            color: var(--greyscale-900, #020626);
            font-size: 12px;
            font-weight: 500;
            line-height: 160%;
        }

.info-cards {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    overflow: auto;
}

    .info-cards .info-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 130px;
        /* max-width: 277px; */
        width: 100%;
        padding: 24px;
        gap: 40px;
        border-radius: 16px;
        border: 1px solid var(--greyscale-grey-200);
        transition: 0.3s;
        background: transparent;
    }

    .info-cards .card-subtitle {
        color: var(--greyscale-900);
        font-size: 16px;
        font-weight: 500;
        line-height: 150%;
        letter-spacing: 0.2px;
        margin-bottom: 18px;
        white-space: nowrap;
    }

    .info-cards .card-title {
        color: var(--greyscale-900);
        font-size: 32px;
        font-weight: 700;
        line-height: 125%;
        white-space: nowrap;
    }

    .info-cards .info-card .card-img {
        border-radius: 100px;
        background: var(--greyscale-200);
        background: #F1F2F4;
        padding: 16px;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .info-cards .info-card:hover {
        background: var(--greyscale-900);
    }

        .info-cards .info-card:hover .card-subtitle {
            color: var(--others-white);
            opacity: 0.7;
        }

        .info-cards .info-card:hover .card-title {
            color: var(--others-white);
        }

        .info-cards .info-card:hover .card-img {
            /*background: var(--greyscale-700);*/
            background: #2d43fb;
        }

            .info-cards .info-card:hover .card-img svg path {
                fill: #F8F8F8;
            }
/* dashboart recent presentation */
.dashboard-recent {
    padding: 24px;
    border-radius: 16px;
    background: var(--others-white, #FFF);
    display: flex;
    flex-direction: column;
    gap: 16px 0;
}

    .dashboard-recent .dash-recent-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.plus-green-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-base, #2d43fb);
}

    .plus-green-btn:hover {
        background: #2d43fb;
    }

.more-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--greyscale-900, #020626);
    color:#fff;
}

    .more-btn:hover {
        background: #020626;
        color: #fff;
    }

.mini-presentation {
    border-radius: 10px;
    background: var(--greyscale-100, #FFF);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:5px;
}

    .mini-presentation .mini-pres-in {
        display: flex;
        align-items: center;
    }

    .mini-presentation .mini-pres-img {
        margin-right: 12px;
    }

        .mini-presentation .mini-pres-img img {
            width: 44px;
            height: 41px;
            border-radius: 8px;
        }

    .mini-presentation .mini-pres-text p {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }

    .mini-presentation .mini-pres-text span {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        font-weight: 400;
        line-height: 160%;
    }

.dashboard-recent .view-all-btn {
    text-align: right;
}

.view-all-btn .view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #000;
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    width: 80px;
    height: 32px;
}

    .view-all-btn .view-all:hover {
        border-color: #020626;
        background: #020626;
        color: #fff;
    }
/* license-info */
.license-info {
    padding: 24px;
    border-radius: 16px;
    background: var(--others-white, #FFF);
}

    .license-info .h5-title {
        margin-bottom: 32px;
    }

.h5-title {
    color: var(--greyscale-900, #020626);
    font-size: 20px;
    font-weight: 700;
}

/* chart style */
.license-chart .canvas-con {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.license-chart .canvas-con-inner {
    width: 120px;
    position: relative;
}

    .license-chart .canvas-con-inner canvas {
        height: 120px !important;
    }

.license-chart .chart-total {
    font-size: 12px;
    font-weight: 400;
    position: absolute;
    left: 46px;
    top: 70px;
    color: var(--greyscale-500, #FFFFFF);
}

.license-chart .legend-con ul {
    margin: 0;
    padding-left: 16px;
    list-style: none;
}

    .license-chart .legend-con ul li {
        display: flex;
        align-items: center;
    }

    .license-chart .legend-con ul .chart-legend {
        border-radius: 50px;
        min-width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 4px;
    }

.license-chart .chart-legend-label-text {
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-weight: 500;
    line-height: 160%;
}

.license-chart .chart-legend-label-num {
    margin-left: auto;
    color: var(--greyscale-900, #020626);
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    float: right;
    padding-left: 15px;
}
/* dashboard Player Devices */

.dash-player {
    padding: 24px;
    border-radius: 16px;
    background: var(--others-white, #FFF);
}

.player-dev-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dash-player-content {
    margin-bottom: 44px;
}

.player-top-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 20px;
}

.player-dev-top .dash-player-search .form-group {
    position: relative;
    max-width: 297px;
    width: 100%;
}

.player-dev-top .dash-player-search input {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 16px 50px 16px 20px;
    width: 100%;
    height: 54px;
}

.player-dev-top .dash-player-search .player-search-btn {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 11px;
}

.dash-main .nav-pills .nav-link.active,
.dash-main .nav-pills .show > .nav-link {
    background: #2d43fb;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
}

    .dash-main .nav-pills .nav-link.active svg path,
    .dash-main .nav-pills .show > .nav-link svg path {
        fill: #fff;
    }

    .dash-main .nav-pills .nav-link.active i,
    .dash-main .nav-pills .show > .nav-link i {
        color: #fff !important;
    }

/*    .dash-main .nav-pills .nav-link.active i,
    .dash-main .nav-pills .show > .nav-link i {
        color: #fff;
        font-size: 16px !important;
    }

        .dash-main .nav-pills .nav-link.active i:before,
        .dash-main .nav-pills .show > .nav-link i:before {
            font-size: 16px !important;
        }*/
.dash-main .nav-pills {
    gap: 10px;
    border-radius: 1000px;
    background: var(--greyscale-100, #F8F8F8);
    padding: 3px;
}

    .dash-main .nav-pills .nav-link {
        /*width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        padding: 5px;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);*/

        min-width: 30px;
        height: 30px;
        /*display: flex;
        align-items: center;
        justify-content: center;*/
        border-radius: 50%;
        padding: 5px 0 0 0;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
    }

        /*.dash-main .nav-pills .nav-link svg {
            width: 14px;
            height: 14px;
        }*/
        .dash-main .nav-pills .nav-link i {
            width: 14px;
            height: 14px;
            color: #020626;
        }
        .dash-main .nav-pills .nav-link i:before {
            font-size:14px;
            vertical-align:top;
        }

.dash-player-tab .dataTables_wrapper .dataTables_length,
.dash-player-tab .dataTables_wrapper .dataTables_filter {
    display: none;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    float: left;
    padding-top: 44px;
}

    .dataTables_wrapper .dataTables_paginate > span {
        display: flex;
        align-items: center;
    }

.dash-main .dataTables_wrapper .dataTables_info {
    float: right;
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    padding-top: 44px;
}
/* dash table */
table.dataTable > thead > tr > th {
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-weight: 700;
    line-height: 170%;
    letter-spacing: 0.2px;
    padding: 18px 16px;
    vertical-align: middle;
    background: var(--greyscale-50, #FAFAFA);
}

    table.dataTable > thead > tr > th:first-child {
        border-radius: 10px 0 0 10px;
    }

    table.dataTable > thead > tr > th:last-child {
        border-radius: 0 10px 10px 0;
    }

table.dataTable > thead > tr > th {
    /*border-bottom: none;*/
}

table.dataTable tbody th,
table.dataTable tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #F1F2F4;
}

table.dataTable.no-footer {
    border: none;
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    overflow: visible !important;
    border: none;
}

.dash-table .last-update p,
.dash-table .player-name p {
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    font-weight: 500;
    line-height: 160%;
}

.dash-table .last-update span,
.dash-table .player-name span {
    display: block;
    color: var(--greyscale-500, #FFFFFF);
    font-size: 12px;
    font-weight: 400;
    line-height: 160%;
}

.dash-table .license-status span,
.dash-table .last-ping-status span {
    display: block;
    width: 143px;
    padding: 4px 16px;
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    border-radius: 8px;
    text-transform: uppercase;
    text-align: center;
}

    .dash-table .license-status span.inactive,
    .dash-table .last-ping-status span.off {
        color: var(--alerts-error-base, #E03137);
        background: var(--alerts-error-light, #FFEDEC);
    }

    .dash-table .license-status span.active,
    .dash-table .last-ping-status span.on {
        color: var(--alerts-success-base, #2d43fb);
        background: var(--primary-100, #E7F7EF);
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    font-weight: 600;
    line-height: 160%;
    min-width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--greyscale-100, #F8F8F8);
        border: none;
        color: #020626 !important;
    }
/* dash map */
.dash-tab-map {
    height: 524px;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

    .dash-tab-map img,
    .dash-tab-map iframe {
        border-radius: 10px;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.map-pin {
    padding: 16px;
    border-radius: 8px;
    background: var(--neutral-10, #FFF);
    box-shadow: 0px 16px 24px 0px rgba(30, 30, 30, 0.08);
    /*min-width: 460px;*/
    width: 100%;
    /*position: absolute;
    right: 32px;
    top: 108px;*/
}

    .map-pin .pin-top {
        margin-bottom: 8px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .map-pin .pin-top-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .map-pin .pin-name {
        margin-bottom: 8px;
        color: var(--neutral-90, #161A34);
        font-family: 'Poppins';
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .map-pin .pin-in {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .map-pin .pin-status .current-status {
        border-radius: 8px;
        font-size: 10px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
        padding: 8px 16px;
    }

        .map-pin .pin-status .current-status.active {
            background: var(--primary-100, #E6F5E9);
            color: var(--primary-base, #2d43fb);
        }

        .map-pin .pin-status .current-status.inactive {
            color: var(--alerts-error-base, #E03137);
            background: var(--alerts-error-light, #FFEDEC);
        }

    .map-pin .pin-download {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .map-pin .pin-download span {
            color: var(--greyscale-900, #020626);
            font-size: 12px;
            font-weight: 400;
            line-height: 160%;
        }

.pin-assets {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content:center;
}

    .pin-assets a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        height: 30px;
        border-radius: 8px;
        /*padding: 3px;*/
    }

    .pin-assets .info-btn {
        background: var(--greyscale-600, #687588);
        color: #fff;
    }

        /*.pin-assets .info-btn:hover {
            background: #020626;
            color:#fff;
        }*/

    .pin-assets .copy-btn,
    .pin-assets .share-btn {
        border-radius: 8px;
        background: var(--primary-base, #2d43fb);
        color:#fff;
    }

        .pin-assets .copy-btn:hover,
        .pin-assets .share-btn:hover {
            background: #2d43fb;
        }

    .pin-assets .edit-btn {
        align-items: flex-start;
        background: var(--greyscale-900, #020626);
        color: #fff;
    }

        .pin-assets .edit-btn:hover {
            background: #020626;
        }

    .pin-assets .delete-btn {
        /*align-items: flex-start;*/
        background: var(--alerts-error-base, #E03137);
        color: #fff;
    }

        .pin-assets .delete-btn:hover {
            background: #e3696d;
        }

.pin-items {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding:5px;
}

    .pin-items:last-child {
        margin-bottom: 0;
    }

    .pin-items p {
        color: var(--neutral-60, #7E8492);
        font-family: 'Poppins';
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    .pin-items span {
        display: block;
        color: var(--greyscale-800, #1F2937);
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        margin-left: 5px;
    }

        .pin-items span.color-green {
            color: #2d43fb;
        }






/* dashboard template */
.dash-template {
    padding: 24px;
    border-radius: 16px;
    background: var(--others-white, #FFF);
    display: flex;
    flex-direction: column;
    gap: 16px 0;
}

    .dash-template .view-all-link {
        padding: 6.5px 16px;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
    }

        .dash-template .view-all-link:hover {
            color: #2d43fb;
        }


.dash-temp-block {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content:end;
    gap: 16px;
}

    .dash-temp-block .temp-search {
        width: 50%;
        margin-right: auto;
    }

        .dash-temp-block .temp-search .form-group {
            position: relative;
            width: 100%;
        }

        .dash-temp-block .temp-search input {
            border-radius: 10px;
            border: 1px solid var(--greyscale-300, #C1C1C1);
            padding: 16px 50px 16px 20px;
            width: 100%;
            height: 54px;
        }

        .dash-temp-block .temp-search .temp-search-btn {
            display: inline-block;
            padding: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            position: absolute;
            right: 20px;
            top: 11px;
        }

.temp-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.pagination {
    margin-bottom: 0;
}

    .pagination .page-item .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 600;
        line-height: 160%;
        min-width: 32px;
        height: 32px;
        border-radius: 10px;
        border: none;
        padding: 0;
        margin: 0;
    }

        .pagination .page-item .page-link:hover,
        .pagination .page-item .page-link.active {
            background: var(--greyscale-100, #F8F8F8);
            border: none;
            color: #020626 !important;
        }

        .pagination .page-item .page-link.next {
            border-radius: 8px;
            border: 1px solid var(--greyscale-200, #F1F2F4);
            margin-left: 24px;
        }

        .pagination .page-item .page-link.prev {
            border-radius: 8px;
            border: 1px solid var(--greyscale-200, #F1F2F4);
            margin-right: 24px;
        }

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0 16px;
}

    .pagination-info .pagination-items p {
        color: var(--greyscale-600, #687588);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
    }

    .pagination-info .pagination-drop .pag-drop-btn {
        border-radius: 8px;
        border: 1px solid var(--greyscale-200, #F1F2F4);
        background: var(--others-white, #FFF);
        padding: 10px;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
    }

        .pagination-info .pagination-drop .pag-drop-btn .fa-chevron-down {
            margin-left: 10px;
        }

        .pagination-info .pagination-drop .pag-drop-btn[aria-expanded="true"] .fa-chevron-down {
            transform: rotate(180deg);
        }

    .pagination-info .pagination-drop .dropdown-menu {
        padding: 5px;
        min-width: 100%;
    }

        .pagination-info .pagination-drop .dropdown-menu .dropdown-item {
            padding: 1px 5px;
        }

/* dropdowns with border */
.default-drop-btn {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    background: transparent;
    display: flex;
    align-items: center;
}

    .default-drop-btn .text {
        margin-right: 10px;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .default-drop-btn[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

    .default-drop-btn .fa-chevron-down {
        /*height: 14px;*/
    }

.dash-template .dash-temp-items {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    flex-grow: 1;
}

    /*.dash-template .dash-temp-items a {
        display: block;
        width: 200px;
        height: 280px;
    }

        .dash-template .dash-temp-items a img {
            width: 200px;
            height: 280px;
            object-fit: cover;
            border-radius: 16px;
        }*/

.dash-template .dash-temp-items-potrait a img {
    display: block;
    /*width: 200px;*/
    /*height: 200px;*/
    height: 146px;
    object-fit: cover;
    border-radius: 16px;
    aspect-ratio: 0.5625 / 1;
}

.dash-template .dash-temp-items-landscape a img {
    display: block;
    width: 260px;
    /*width: 360px;*/
    /*height: 150px;*/
    object-fit: cover;
    border-radius: 16px;
    aspect-ratio: 1.77778 / 1;
}

/* Presentations */
.table-left {
    display: flex;
    gap: 12px;
    align-items: center;
}

    .table-left .pres-tab-img img {
        width: 87px;
        height: 50px;
        border-radius: 8px;
        object-fit: contain;
    }

    .table-left .table-title {
        color: var(--greyscale-900);
        font-family: 'Poppins';
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 155px;
    }

    .table-left .table-subtitle {
        color:#020626;
        font-family: 'Poppins';
        font-size: 12px;
        line-height: 160%;
    }

.table-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-middle svg path {
    fill: #FFFFFF;
}

.table-tag .table-item {
    display: flex;
    /*width: 72.143px;*/
    padding: 4px 0;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    border-radius: 8px;
    text-align: right;
    font-size: 10px !important;
    font-weight: 500;
    /*line-height: 160%;*/
    /*letter-spacing: 0.2px;*/
    padding: 5px;
}

    .table-tag .table-item.item1 {
        color: var(--primary-base, #2d43fb);
        background: var(--primary-100, #E6F5E9);
    }

    .table-tag .table-item.item2 {
        color: var(--alerts-warning-dark, #E6BB20);
        background: var(--secondary-100, #FFFAE9);
    }

    .table-tag .table-item.item3 {
        color: var(--greyscale-900, #020626);
        background: var(--greyscale-100, #F8F8F8);
    }

.tab-in-date {
    display: flex;
    align-items: center;
    gap: 0 12px;
}

    .tab-in-date i {
        color: #020626;
    }

    .tab-in-date span {
        display: flex;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 400;
        line-height: 160%;
        white-space: nowrap;
    }

.table-right {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.dash-main .control__indicator {
    top: -10px;
    width: 18px;
    height: 18px;
    /*background: transparent;*/
    border: 1px solid #2d43fb;
    border-radius: 50px;
}

.dash-main .control--checkbox .control__indicator:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 8px;
}

.assets-table .control input:checked ~ .control__indicator,
.settings-table .control input:checked ~ .control__indicator,
.reports-table .control input:checked ~ .control__indicator,
.playlist-table .control input:checked ~ .control__indicator,
.pres-table .control input:checked ~ .control__indicator {
    border-color: #2d43fb;
}

.assets-table thead tr th:last-child,
.settings-table thead tr th:last-child,
.players-table thead tr th:last-child,
.playlist-table thead tr th:last-child,
.pres-table thead tr th:last-child {
    text-align: right;
}

.assets-table tbody tr th,
.playlist-table tbody tr th,
.pres-table tbody tr th {
    width: 20px;
    padding: 0 0 0 16px;
}

table th,
table td {
    box-sizing: border-box;
}

table.assets-table tbody th,
table.assets-table tbody td,
table.playlist-table tbody th,
table.playlist-table tbody td,
table.pres-table tbody th,
table.pres-table tbody td {
    border: none;
}

table.assets-table thead > tr > th.sorting:after,
table.assets-table thead > tr > th.sorting:before,
table.players-table thead > tr > th.sorting:after,
table.players-table thead > tr > th.sorting:before,
table.playlist-table thead > tr > th.sorting:after,
table.playlist-table thead > tr > th.sorting:before,
table.pres-table thead > tr > th.sorting:after,
table.pres-table thead > tr > th.sorting:before {
    content: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    border-radius: 8px;
    border: 1px solid var(--greyscale-200, #F1F2F4);
    margin-left: 24px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    border-radius: 8px;
    border: 1px solid var(--greyscale-200, #F1F2F4);
    margin-right: 24px;
}


.pres-main {
    display: flex;
    flex-direction: column;
    gap: 16px 0;
}

.global-search .form-group {
    position: relative;
}

    .global-search .form-group .global-search-btn {
        position: absolute;
        right: 20px;
        top: 14px;
        background: transparent;
        border: none;
        padding: 0;
    }

.global-search input {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 16px 50px 16px 20px;
    width: 100%;
}

.global-search .form-group input::placeholder {
    color: var(--greyscale-500, #FFFFFF);
    font-size: 14px;
    line-height: 160%;
}

.pres-search {
    /*max-width: 632px;*/
    max-width: 100%;
    width: 100%;
    margin-right: auto;
    position: relative;
}

    .pres-search .form-group input {
        width: 100%;
    }

.search-result {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}


    .search-result .clear-tags {
        background: transparent;
    }

        .search-result .clear-tags:hover {
            background: var(--greyscale-100, #F8F8F8);
        }

.presentation-tab .dataTables_wrapper .dataTables_filter {
    display: none;
}

.dash-main .settings__table-wrap .dataTables_wrapper .dataTables_info,
.dash-main .presentation-tab .dataTables_wrapper .dataTables_info {
    padding-right: 122px;
    padding-top: 22px;
}

.dash-main .settings__table-wrap .dataTables_wrapper .dataTables_paginate,
.dash-main .presentation-tab .dataTables_wrapper .dataTables_paginate {
    padding-top: 16px;
}

.presentation-tab .pin-assets {
    justify-content: flex-end;
}

.settings__table-wrap .dataTables_length,
.presentation-tab .dataTables_length {
    position: absolute;
    right: 0;
    bottom: -4px;
}

    .settings__table-wrap .dataTables_length label,
    .presentation-tab .dataTables_length label {
        display: flex;
        align-items: center;
        gap: 4px 0;
        overflow: hidden;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
        width: 106px;
    }

    .settings__table-wrap .dataTables_length select,
    .presentation-tab .dataTables_length select {
        border: none;
        border-radius: 0;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
        width: 70px;
        border-radius: 8px;
        border: 1px solid var(--greyscale-200, #F1F2F4);
        background-color: var(--others-white, #FFF);
        padding: 10px;
        margin-right: 50px;
        margin-left: 4px;
    }

        .settings__table-wrap .dataTables_length select option,
        .presentation-tab .dataTables_length select option {
            width: 100%;
            padding: 10px;
        }

.top-bar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.pres-calendar input {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 10px 50px 10px 15px;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    background-image: url(../images/icons/calendar.svg);
    background-repeat: no-repeat;
    background-position: right 20px top 10px;
}

.presentation-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presentation-card {
    display: flex;
    padding: 16px 16px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    border-radius: 16px;
    background: var(--greyscale-50, #FAFAFA);
    cursor: pointer;
    transition: .3s all ease;
}

    .presentation-card:hover {
        box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.20);
    }

.pres-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.player-check .control__indicator,
.presentation-card .control__indicator {
    top: -10px;
    /*background: transparent;*/
    border-radius: 50px;
    border: 1px solid #2d43fb;
    width: 18px;
    height: 18px;
}

.presentation-card .control--checkbox .control__indicator:after {
   /* left: 5px;
    top: 1.5px;*/
}

.presentation-card .pres-card-img {
    /*width: 100%;*/
    margin:auto;
}

    .presentation-card .pres-card-img img {
        width: 100%;
        max-height: 112px;
        object-fit: cover;
    }

.presentation-card .pres-card-title {
    color: var(--greyscale-900);
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
}

.pres-card-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-direction:column;
}

.presentation-card .pres-card-subtitle {
    color: var(--greyscale-500);
    font-size: 12px;
    line-height: 16px;
}

.presentation-card .card-date {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px;
    gap: 12px;
    border-radius: 8px;
    background: var(--greyscale-200);
    color: #020626;
}

    .presentation-card .card-date span {
        display: flex;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        line-height: 160%;
    }

.presentation-card .table-tag {
    flex-wrap: wrap;
}

.pres-rov {
    gap: 20px 0;
}

.manage-modal-full .modal-dialog {
    /*max-width: calc(100% - 280px);*/
    max-width: 100%;
    margin: 0 0 0 auto;
    min-height: 100vh;
}

.manage-modal-full .modal-body {
    /*padding: 36px;*/
    background: #fff;
    min-height: 100vh;
}

/* manage tags modal */
.manage-modal .modal-dialog {
    max-width: 590px;
    margin: 0 0 0 auto;
    height: 100%;
}

.manage-modal .modal-body {
    padding: 18px;
    background: #fff;
}

.manage-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-head-in {
    display: flex;
    align-items: center;
    gap: 0 16px;
}

.modal-title {
    color: var(--greyscale-900, #020626);
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
}

.modal-close {
    background: transparent;
    padding: 0;
    border: none;
}

.modal .black-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    color: var(--others-white, #FFF);
    font-size: 14px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    width: 135px;
    height: 48px;
    border-radius: 10px;
}

.modal .modal-content {
    border: none;
    border-radius: 0;
    height: 100%;
}

.manage-modal .dataTables_wrapper .dataTables_filter {
    margin: 32px 0;
    width: 100%;
}

    .manage-modal .dataTables_wrapper .dataTables_filter label {
        width: 100%;
    }

    .manage-modal .dataTables_wrapper .dataTables_filter input {
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        padding: 10px;
        width: 100%;
        background-image: url(../images/icons/search-icon.svg);
        background-repeat: no-repeat;
        background-position: top 10px right 10px;
        margin: 0;
    }

.manage-modal table {
    width: 100%;
}

.modal-table table thead tr th {
    border-radius: 10px;
}

.modal-table .table-head {
    display: flex;
    align-items: center;
    gap: 0 16px;
}

.modal-table .table-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .modal-table .table-body .manage-tag-name {
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        line-height: 160%;
        padding: 5px 16px;
        width: 181px;
    }

.modal .control__indicator {
    top: -11px;
    width: 18px;
    height: 18px;
    /*background: transparent;*/
    border: 1px solid #2d43fb;
    border-radius: 50%;
}

.modal .control--checkbox .control__indicator:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 8px;
}

.modal .dataTables_wrapper .dataTables_info {
    float: left;
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    position: absolute;
    left: 0;
    bottom: 15px;
    padding: 0;
}

.modal table.dataTable thead > tr > th.sorting::before,
.modal table.dataTable thead > tr > th.sorting::after {
    right: 16px;
}

.modal table.dataTable tbody th,
.modal table.dataTable tbody td {
    border: none;
}

.modal .dataTables_wrapper .dataTables_paginate {
    padding-top: 32px;
    justify-content: center;
    width: 100%;
    padding-bottom: 60px;
}

.modal .dataTables_length {
    position: absolute;
    right: 0;
    bottom: 2px;
}

    .modal .dataTables_length label {
        display: flex;
        align-items: center;
        gap: 4px 0;
        overflow: hidden;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
        width: 106px;
    }

    .modal .dataTables_length select {
        border: none;
        border-radius: 0;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
        width: 70px;
        border-radius: 8px;
        border: 1px solid var(--greyscale-200, #F1F2F4);
        background-color: var(--others-white, #FFF);
        padding: 10px;
        margin-right: 50px;
        margin-left: 4px;
    }

        .modal .dataTables_length select option {
            width: 100%;
            padding: 10px;
        }

/* manage add tags modal */
.add-tag-modal {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px 0;
    margin: 16px 0;
}

    .add-tag-modal .assign-color,
    .add-tag-modal .enter-tag-name {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px 0;
        width: 100%;
    }

        .add-tag-modal .assign-color p,
        .add-tag-modal .enter-tag-name p {
            color: var(--greyscale-900, #020626);
            font-size: 14px;
            font-weight: 500;
            line-height: 160%;
        }

        .add-tag-modal .enter-tag-name input {
            width: 100%;
            border-radius: 10px;
            padding: 10px;
            border: 1px solid var(--greyscale-300, #C1C1C1);
            font-size: 14px;
        }

            .add-tag-modal .enter-tag-name input::placeholder {
                color: var(--greyscale-500, #FFFFFF);
                font-size: 14px;
                line-height: 160%;
            }

.assign-colors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

    .assign-colors .color-item {
        min-width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: black;
    }

        .assign-colors .color-item-active
        {
            transform: scale(1.4);
            border: 2px dotted red; 
        }

    .assign-colors .black {
        background: #020626;
    }

    .assign-colors .green {
        background: #2d43fb;
    }

    .assign-colors .darkbrown {
        background: #E6BB20;
    }

    .assign-colors .yellow {
        background: #FFD023;
    }

    .assign-colors .red {
        background: #C02337;
    }

    .assign-colors .light-blue {
        background: #EBF3FF;
    }

    .assign-colors .teal {
        background: #2DD4BF;
    }

    .assign-colors .orange {
        background: #FFA500;
    }

    .assign-colors .portage {
        background: #8C62FF;
    }

    .assign-colors .blue {
        background: #2F78EE;
    }

    .assign-colors .brown {
        background: #964B00;
    }

    .assign-colors .aqua {
        background: #7AFFE7;
    }

    .assign-colors .burlywood {
        background: #E3696D;
    }

    .assign-colors .indigo {
        background: #4B0082;
    }

    .assign-colors .olive {
        background: #808000;
    }

    .assign-colors .darkyellow {
        background: #E7E00A;
    }

    .assign-colors .lightgreen {
        background: #3FFC5F;
    }

    .assign-colors .pink {
        background: #F885BF;
    }

    .assign-colors .maroon {
        background: #79214D;
    }

    /*.assign-colors .color1 {
        background: #E6F5E9;
    }

    .assign-colors .color2 {
        background: #2d43fb;
    }

    .assign-colors .color3 {
        background: #FFFAE9;
    }*/


.add-tag-btns {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

    /*.add-tag-btns button {
        width: 100%;
        height: 56px;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #020626;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.3px;
        background: #fff;
    }*/

    .add-tag-btns .cancel-btn {
        color: #020626;
    }

        /*.add-tag-btns .cancel-btn:active,
        .add-tag-btns .cancel-btn:hover {
            border: 1px solid #020626;
            background: #FAFAFA;
        }*/

        .add-tag-btns .cancel-btn:active,
        .add-tag-btns .cancel-btn:hover {
            border: 1px solid #020626;
            background: #020626;
            color:#fff;
        }

    .add-tag-btns .green-btn {
        background: var(--primary-base, #2d43fb);
        border-color: #2d43fb;
        color: #fff;
    }

        .add-tag-btns .green-btn:active,
        .add-tag-btns .green-btn:hover {
            border-color: #020626;
            background: #020626;
        }

/* template modal */
.template-modal .modal-dialog {
    max-width: 680px;
    margin: 0 0 0 auto;
    height: 100%;
}

.template-modal .modal-body {
    padding: 24px;
    background: #fff;
}

.template-modal .dash-template {
    padding: 0;
    margin-top: 32px;
}

    .template-modal .dash-template .dash-temp-items {
        margin: 16px 0 32px;
    }

.template-modal .dash-temp-block .temp-search {
    width: 100%;
}

.m-temp-rov {
    margin: 0;
    width: 100%;
    gap: 16px 0;
}

    .m-temp-rov .m-temp-col {
        padding: 0;
        padding-right: 16px;
    }

        .m-temp-rov .m-temp-col:last-child {
            padding-right: 0;
        }

.template-modal .default-drop-btn {
    width: 100%;
    justify-content: space-between;
}

.template-modal .template-preview {
    margin: 32px 0 20px;
    text-align:center;
}

    .template-modal .template-preview img {
        max-width: 100%;
        max-height: 786px;
        object-fit: contain;
        border-radius: 16px;
    }

.modal-end-btns {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}

    .modal-end-btns a,
    .modal-end-btns button {
        max-width: 162px;
        width: 100%;
        height: 56px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.3px;
        background: transparent;
        border: none;
    }

    .modal-end-btns .close-btn {
        border: 1px solid var(--greyscale-900, #020626);
        color: var(--greyscale-900, #020626);
    }

        .modal-end-btns .close-btn:hover {
            border: 1px solid #020626;
            background: #FAFAFA;
        }

    .modal-end-btns .black-btn {
        background: var(--greyscale-900, #020626);
        color: var(--others-white, #FFF);
    }

        .modal-end-btns .black-btn:hover {
            background: #020626;
        }

    .modal-end-btns .green-btn {
        background: #2d43fb;
        border-color: #2d43fb;
        color: var(--others-white, #FFF);
    }

        .modal-end-btns .green-btn:hover {
            background: #020626;
        }

/* My Playlist */
.playlist-table {
    width: 100% !important;
}

    .playlist-table .playlist-td-name,
    .playlist-table .playlist-name {
        display: flex;
        align-items: center;
        gap: 0 16px;
    }

        .playlist-table .playlist-td-name .control,
        .playlist-table .control {
            padding-left: 18px;
        }

    .playlist-table .table-left .table-title {
        line-height: 1.2;
        max-width: 100%;
    }

    .playlist-table .table-text {
        width: 180px;
        overflow: hidden;
    }

/* Select presentation from library Modal */
.select-modal .modal-dialog {
    max-width: 1128px;
    margin: 0 auto;
}

.select-modal .modal-content {
    border-radius: 16px;
}

.select-modal .modal-body {
    padding: 50px 32px 32px;
    background: #fff;
    border-radius: 16px;
}

.select-modal .modal-end-btns {
    justify-content: center;
    margin-top: 48px;
}

    .select-modal .modal-end-btns button {
        max-width: 126px;
        height: 48px;
        width: 100%;
    }

/* Players start */
.players-main,
.reports-main,
.playlist-main
{
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding: 24px;
    border-radius: 16px;
    /*height:100vh;*/
    /*background: var(--others-white, #fff);*/
}

.players-title,
.reports-title,
.settings-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings__form .form-group-search {
    position: relative;
    width: 100%;
}

    .settings__form .form-group-search input {
        width: 100%;
        height: 54px;
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        padding: 16px 50px 16px 20px;
    }

.settings__table-wrap .dataTables_wrapper .dataTables_filter {
    margin-bottom: 24px;
}

    .settings__table-wrap .dataTables_wrapper .dataTables_filter label,
    .settings__table-wrap .dataTables_wrapper .dataTables_filter {
        width: 100%;
    }

        .settings__table-wrap .dataTables_wrapper .dataTables_filter input {
            display: block;
            padding: 10px;
            background: transparent;
            width: 100%;
            background-image: url(../images/icons/search-icon.svg);
            background-repeat: no-repeat;
            background-position: top 10px right 10px;
            margin: 0;
            border-radius: 10px;
        }

            .settings__table-wrap .dataTables_wrapper .dataTables_filter input::placeholder {
                color: var(--greyscale-500, #FFFFFF);
                font-size: 14px;
                line-height: 160%;
            }

.settings__table-wrap .reports__table-content {
    overflow: visible;
}

.settings__form .manage-tags-link {
    display: flex;
    /*height: 48px;*/
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-900, #020626);
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    /*line-height: 160%;*/
    letter-spacing: 0.2px;
}

    .settings__form .manage-tags-link:hover {
        background: #020626;
        color: #fff;
    }

        .settings__form .manage-tags-link:hover svg path {
            fill: #fff;
        }
/* Table content */

.players-table.dataTable tbody th,
.players-table.dataTable tbody td,
.reports-table.dataTable tbody th,
.reports-table.dataTable tbody td {
    border: 0;
}

.players-check-inp,
.reports-check-inp,
.playlist__check-inp {
    width: 16px;
    height: 16px;
    border: 1px solid #cbd5e0;
}

.players-table.dataTable > thead > tr > th:first-child {
    width: 0px;
}

.players-table.dataTable > thead > tr > th {
    width: 38%;
}

.players__table-wrap .players-name {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .players__table-wrap .players-name .players-turn {
        display: flex;
        align-items: center;
        gap: 16px;
        width:max-content;
    }

.players__table-wrap .players-turn .playes-on-off {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*.players__table-wrap .players-turn .players-off-spn {*/
.players-off-spn {
    padding: 4px 16px;
    border-radius: 8px;
    background: var(--alerts-error-light, #f5c9c6) !important;
    color: var(--alerts-error-base, #e03137) !important;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

/*.players__table-wrap .players-turn .players-on-spn {*/
.players-on-spn {
    padding: 4px 16px;
    border-radius: 8px;
    background: var(--primary-200, #ccecd2) !important;
    color: #020626;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

.players-default-spn {
    padding: 4px 16px;
    border-radius: 8px;
    background: var(--primary-200, #E4E4E7) !important;
    color: #020626;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

.players-prog-spn {
    padding: 4px 16px;
    border-radius: 8px;
    background: #2d43fb !important;
    color: #fff !important;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

.players__table-wrap .players-turn .players-name-spn {
    display: flex;
    flex-direction: column;
    width:150px;
}

    .players__table-wrap .players-turn .players-name-spn b {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }

    .players__table-wrap .players-turn .players-name-spn span {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        line-height: 160%;
    }

.players__table-wrap .players-name .players-name-list {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    flex: 2 1 auto;
}

    .players__table-wrap .players-name .players-name-list span {
        color: var(--primary-base, #2d43fb);
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
        white-space: nowrap;
    }
.players-name-list-img {
    flex: 2 1 auto;
    display: flex;
    justify-content: flex-end;
}

.players__table-wrap .players-list-download {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .players__table-wrap .players-list-download img {
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        line-height: 160%;
    }

.players-modal1 .modal-dialog {
    max-width: 750px;
}

.players-modal1 .modal-content {
    border-radius: 16px;
    background: var(--others-white, #fff);
    padding: 24px;
}

.players-modal1 .modal-body {
    padding: 0;
}

.players-modal1 .players__modal1-info,
.players-modal1 .players__modal1-info-item {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.players__modal1-info .players__modal1-title {
    color: var(--greyscale-900, #020626);
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}

.players__modal1-info .players__modal1-table thead tr th {
    background: var(--greyscale-50, #fafafa);
    padding: 16px;
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    width: 50%;
}

.players__modal1-info .players__modal1-table tbody tr td {
    padding: 16px;
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    font-weight: 500;
    line-height: 160%;
}

.players__modal1-info-item .players__modal2-date {
    display: flex;
    flex-direction: column;
}

    .players__modal1-info-item .players__modal2-date span {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        font-weight: 400;
        line-height: 160%;
    }

.players-modal2 .modal-dialog,
.settings__modal .modal-dialog,
.players-modal-download .modal-dialog,
.playlist__modal1 .modal-dialog,
.playlist__modal3 .modal-dialog,
.playlist-modal4 .modal-dialog {
    max-width: 395px;
    width: 100%;
    height: 100%;
    margin: 0;
    margin-left: auto;
}

.players-modal-download .modal-dialog {
    max-width: 689px;
}

.players-modal2 .modal-body,
.settings__modal .modal-body,
.players-modal-download .modal-body,
.playlist__modal1 .modal-body,
.playlist__modal3 .modal-body,
.playlist-modal4 .modal-body {
    display: flex;
    padding: 36px;
    flex-direction: column;
    gap: 32px;
    background: var(--others-white, #fff);
}

.players__modal2-inp,
.players-modal2 .players__modal2-editing,
.players-modal2 .players__modal2-editing .players__modal2-inp,
.settings__modal .settings__modal-editing,
.settings__modal .settings__modal-editing .players__modal2-inp,
.playlist__modal-editing .players__modal2-inp,
.playlist-modal4 .players__modal2-inp {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.players__modal2-editing .players__modal2-inp {
    width: 100%;
}

.players__modal2-inp .choose-category .players__modal2-editing-btn {
    width: 100%;
    justify-content: space-between;
}

.players__modal2-inp .players__modal2-editing-title {
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}

.players__modal2-inp input {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    width: 100%;
}

    .players__modal2-inp input:focus {
        border-color: #2d43fb;
        box-shadow: none;
    }

    .players__modal2-inp input::placeholder {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 14px;
        line-height: 160%;
    }

.inp__check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    border-radius: 10px;
    background: var(--greyscale-50, #fafafa);
    padding: 12px;
}

.players__modal2-inp .inp__check input {
    padding: 0;
    box-shadow: none;
    width: 44px;
    height: 22px;
}

.inp__check.form-switch .form-check-input:checked {
    background-image: url(../images/icons/switch.svg);
    border-color: transparent;
    background-color: var(--primary-base, #2d43fb);
}

.inp__check.form-switch .form-check-input {
    background-image: url(../images/icons/minus.svg);
    border-color: transparent;
    background-color: #cbd5e0;
    cursor: pointer;
}

.inp__check label {
    color: var(--greyscale-900, #020626);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.2px;
    cursor: pointer;
}

.players__modal2-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

    .players__modal2-time .modal2-time-inp {
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.modal2-time-inp input {
    border: 0;
}

.players-modal-download .modal-dialog {
    max-width: 689px;
}

.players-modal-download .players__modal-item {
    display: flex;
    padding: 24px;
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
    border: 1px solid var(--greyscale-200, #f1f2f4);
    background: var(--others-white, #fff);
}

.players__modal-item .players__modal-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f2f4;
    padding-bottom: 16px;
}

.players__modal-item .download__modal-name {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .players__modal-item .download__modal-name b {
        color: var(--greyscale-900, #020626);
        font-size: 18px;
        font-weight: 600;
        line-height: 150%;
    }

    .players__modal-item .download__modal-name span {
        color: var(--greyscale-600, #687588);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
    }

.players__modal-item .download__modal-btn {
    display: flex;
    width: 150px;
    height: 56px;
    padding: 21px 0px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: var(--greyscale-900, #020626);
    color: var(--others-white, #fff);
    border: 1px solid #020626;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
}

    .players__modal-item .download__modal-btn:hover {
        background-color: #020626d2;
    }

.players__modal-item .download__min-spn {
    color: var(--greyscale-600, #687588);
    font-size: 12px;
    font-weight: 500;
    line-height: 160%;
}

.players__modal-item .download__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #f1f2f4;
    padding-top: 16px;
}

.players__modal-item .download__info-text {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 600;
    line-height: 160%;
}

/* Players end */

/* Reports start */
.reports-table {
    white-space: nowrap;
}

.reports-main .reports-title .default-drop-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-900, #020626);
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 700;
}

.reports__table-wrap .reports-tab-wrap .choose-category {
    width: 100%;
}

.reports-main .default-drop-btn {
    width: 100%;
    justify-content: space-between;
}

.reports-main .reports-tab-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.reports-main .reports__table-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.check-table {
    display: flex;
    align-items: center;
    gap: 16px;
}

.reports-table .table-gray-spn span {
    display: flex;
    width: 97px;
    padding: 4px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: var(--greyscale-100, #f8f8f8);
    color: var(--greyscale-900, #020626);
    font-size: 10px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
}

.reports-table tbody tr span {
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    line-height: 160%;
}

/* Reports end */

/* Settings start */
.settings-main {
    /*padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;*/
    display: flex;
    flex-direction: column;
    gap: 13px 0;
    width: 100%;
    /*padding: 0 12px 13px;*/
}

.settings__tabs .settings__tabs-content {
    display: flex;
    align-items: flex-start;
}

.settings__tabs .settings__tab {
    display: flex;
    /*width: 300px;*/
    padding: 14px;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    border-radius: 16px;
    background: var(--others-white, #fff);
}

    
.settings-main .settings__tab .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: 0.2px;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    align-items: center;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 16px;
}

.settings-main .nav-pills .nav-link i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
    font-size: 32px !important;
    vertical-align: middle;
}

.settings-main .settings__tab .nav-link.active,
.settings-main .settings__tab .show > .nav-link {
    background: var(--greyscale-100, #f8f8f8);
    color: inherit;
    width: 100%;
}

    .settings-main .settings__tab .nav-link.active,
    .settings-main .settings__tab .show > .nav-link svg path {
        stroke: #2d43fb;
    }

.settings-main .settings__tab .nav-link.active, .settings-main .settings__tab .show > .nav-link i {
    color: #2d43fb;
}


.settings__tabs .tab-content {
    width: 100%;
}

.settings__tabs .settings__form {
    display: flex;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
    border-radius: 16px;
    background: var(--others-white, #fff);
}

.settings__form .settings__form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings__form .settings__company-id {
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
}

    .settings__form .settings__company-id b {
        font-weight: 700;
    }

.settings__form .settings__form-label {
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}

.settings__form .settings__form-inp {
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
}

    .settings__form .settings__form-inp:focus {
        border-color: #2d43fb;
        box-shadow: none;
    }

::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.settings__form .settings__form-inp::placeholder {
    color: var(--greyscale-900, #020626);
}

.settings__form .input-number-flag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
}

    .settings__form .input-number-flag .settings__form-inp {
        border: 0;
        padding: 0;
        width: 100%;
    }

    .settings__form .input-number-flag button {
        border: 0;
        background-color: transparent;
    }

.settings__modal .inp__check input {
    padding: 0;
    box-shadow: none;
    width: 44px;
    height: 22px;
}

.settings__form-group-check {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--greyscale-50, #fafafa);
    padding: 16px;
    border-radius: 10px;
}

    .settings__form-group-check .inp__check {
        padding: 0;
    }

    .settings__form-group-check .settings__form-inp {
        background-color: transparent;
    }

.settings__table-wrap .settings-table {
    white-space: nowrap;
}

.settings-table thead tr th:first-child {
    width: 20%;
}

.settings-table.dataTable > thead > tr > th:last-child {
    text-align: end;
}

.settings-table.dataTable thead > tr > th.sorting:last-child::before,
.settings-table.dataTable thead > tr > th.sorting:last-child:after {
    content: "";
}

.settings__table-wrap .settings-table .settings-th1 {
    width: 25% !important;
}

.settings-assets {
    justify-content: end;
}

.settings__modal-tab {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 32px;
    width: 100%;
}

    .settings__modal-tab li {
        width: 100%;
    }

.playlist__modal-tabs .tab-content {
    width: 100%;
}

.settings__modal-tab .nav-link {
    border-radius: 0;
    overflow: hidden;
    color: var(--greyscale-900, #020626);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 160%;
    width: 100%;
    height: 40px;
    border-bottom: 2px solid #C1C1C1;
}

    .settings__modal-tab .nav-link.active,
    .settings__modal-tab .show > .nav-link {
        background-color: transparent;
        color: var(--primary-base, #2d43fb);
        border-bottom: 2px solid var(--primary-base, #2d43fb);
    }

.settings__modal .settings__modal-form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

    .settings__modal .settings__modal-form-group .settings__modal-form-label {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .settings__modal .settings__modal-form-group .settings__modal-form-inp {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        background-color: transparent;
    }

.settings__modal .settings__modal-tags,
.playlist__modal-editing .playlist__modal-tags {
    display: flex;
    align-items: center;
    display: flex;
    padding: 10px;
    gap: 12px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
}

    .settings__modal .settings__modal-tags a {
        display: flex;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        border-radius: 8px;
        background: var(--greyscale-100, #f8f8f8);
        color: var(--greyscale-900, #020626);
        font-size: 10px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
    }

.settings-end-btns {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}

    .settings-end-btns .button {
        width: 126px;
        height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
        background: transparent;
        border-radius: 10px;
        border: 1px solid var(--greyscale-900, #020626);
    }

    .settings-end-btns .black-btn {
        color: #fff;
        background: var(--greyscale-900, #020626);
    }

        .settings-end-btns .black-btn:hover {
            background: #020626;
        }

    .settings-end-btns .cancel-btn:hover {
        border: 1px solid #020626;
        background: #FAFAFA;
    }

    .settings-end-btns .green-btn {
        background: #2d43fb;
        /*border-color: #2d43fb;*/
        color: var(--others-white, #FFF);
    }

        .settings-end-btns .green-btn:hover {
            background: #020626;
        }

    .settings-end-btns .delete-btn {
        align-items: flex-start;
        background: var(--alerts-error-base, #E03137);
        color: #fff;
        border-color: var(--alerts-error-base, #E03137);
    }

        .settings-end-btns .delete-btn:hover {
            background: #e3696d;
        }

table {
    width: 100%;
}

.settings-table .table-subtitle {
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    line-height: 160%;
}

.settings__table-wrap .dataTables_wrapper .dataTables_filter {
    display: block;
}



.manage-modal .dataTables_wrapper .dataTables_filter label {
    width: 100%;
}

.manage-modal .dataTables_wrapper .dataTables_filter input {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 10px;
    width: 100%;
    background-image: url(../images/icons/search-icon.svg);
    background-repeat: no-repeat;
    background-position: top 10px right 10px;
    margin: 0;
}

.manage-modal table {
    width: 100%;
}

.modal-table table thead tr th {
    border-radius: 10px;
}
/* Settings end */

/* Playlist start */

.playlist__modal1 .modal-content,
.playlist__modal3 .modal-content {
    height: 100%;
}

.playlist__modal-tabs .nav-item {
    width: 100%;
}

.playlist__modal-editing .settings__form-btn,
.playlist__modal4-editing .settings__form-btn {
    width: 100%;
}

.playlist__modal1 .playlist__modal-editing {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
    height: 100%;
}

    .playlist__modal1 .playlist__modal-editing .playlist__modal-form {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

.playlist__modal1 .playlist__modal-library {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 0;
}

.playlist__modal-library .playlist__library-text {
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
}

.playlist__library-link {
    display: flex;
    height: 56px;
    padding: 21px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    background: var(--primary-base, #2d43fb);
    color: var(--others-white, #fff);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
}

    .playlist__library-link:hover {
        background: #2d43fb;
        color: #fff;
    }

.playlist__modal3 .playlist__modal3-settings {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.playlist__modal3-settings .playlist__modal3-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.playlist__modal3-item .playlist__settings-info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.playlist__modal3-item .playlist__settings-info-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

    .playlist__modal3-item .playlist__settings-info-top p {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }

.playlist__settings-rename {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .playlist__settings-rename i:before {
        font-size:16px !important;
        color: var(--greyscale-900, #020626);
    }

.playlist__modal3-item .playlist__settings-info-spn {
    color: var(--greyscale-500, #FFFFFF);
    font-size: 12px;
    line-height: 160%;
}

.playlist__modal3-item .playlist__check-inp {
    margin-right: 4px;
}

.playlist-modal4 .playlist__modal4-editing {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 32px;
}

.playlist__moda4-wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.playlist__modal4-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    display: flex;
    padding: 16px;
    border-radius: 10px;
    background: var(--greyscale-50, #fafafa);
}

.playlist__modal4-content-name {
    color: var(--greyscale-900, #020626);
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0.2px;
}

.playlist__modal4-radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .playlist__modal4-radio .playlist__modal-inp-radio {
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        overflow: hidden;
    }

        .playlist__modal4-radio .playlist__modal-inp-radio .form-check-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*gap: 8px;*/
            padding: 8px;
            height: 46px;
            background: var(--others-white, #fff);
            width: 100%;
            color: var(--greyscale-900, #020626);
            font-size: 14px;
            font-weight: 500;
           /* line-height: 160%;*/
            cursor: pointer;
        }

        .playlist__modal4-radio .playlist__modal-inp-radio.active {
            background: transparent;
            border-color: #2d43fb;
        }

.playlist__modal4-editing .playlist__modal4-radio .form-check {
    padding: 0;
}

.playlist__modal-inp-radio .form-check-input {
    width: 20px;
    height: 20px;
    box-shadow: none;
}

.playlist__modal4-radio .form-check-input:checked {
    background-color: #2d43fb;
    border-color: #2d43fb;
}

.playlist__modal4-wekday {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

    .playlist__modal4-wekday .players-check-inp {
        background: transparent;
    }

    .playlist__modal4-wekday span {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        line-height: 160%;
    }

.modal .playlist__modal4-wekday .control__indicator {
    top: 0px;
}

.modal .playlist__modal4-wekday .control {
    color: var(--greyscale-900, #020626);
    font-size: 12px;
    line-height: 160%;
}

.playlist-modal4 .modal-body {
    height: auto;
}

/* Playlist end */

/* assets page */
.assets-properties .modal-dialog {
    /* max-width: 760px;*/
    max-width: calc(100% - 280px);
    margin: 0 0 0 auto;
    max-height: 100%;
    height:100%
}

.assets-properties .modal-body {
    background: #fff;
    padding: 0;
}

.assets-properties .modal-content {
    padding: 36px;
}

.assets-modal-tags {
    margin-top: 24px;
}

.assets-modal-tags p {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
        margin-bottom: 10px;
    }

.assets-modal-tags .modal-tags {
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        padding: 10px;
    }

.assets-modal-details {
    display:flex;
    flex-direction:row;
    width:90%;
}

.assets-modal-content {
   /* margin-top: 24px;*/
   padding:10px;
   width:100%;
}

.assets-modal-info {
    padding: 10px;
    width: 100%;
}

    .assets-modal-content img {
        width:100%;
        max-height: 370px;
        border-radius: 16px;
        object-fit: contain;
        object-position: center;
    }
.assets-modal-content video {
    width: 100%;
    max-height: 370px;
    border-radius: 16px;
    object-fit: contain;
    object-position: center;
}

.assets-modal-img-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.assets-modal-img-info > div {
        display: flex;
        align-items: center;
    }

.assets-modal-img-info .img-info-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

.assets-modal-img-info p {
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
    }

.assets-modal-img-info p span {
            color: var(--greyscale-500, #FFFFFF);
            font-size: 12px;
            line-height: 160%;
        }

.assets-properties .modal-end-btns {
    margin-top: 32px;
}
/* upload modal */
.assets-upload .modal-dialog {
    max-width: 760px;
}

.upload-modal .upload-alert {
    display: flex;
    align-items: center;
    gap: 0 10px;
    border-radius: 10px;
    background: var(--others-light-blue, #EBF3FF);
    color: var(--others-blue, #2F78EE);
    margin: 10px 0;
}

    .upload-modal .upload-alert span {
        color: var(--others-blue, #2F78EE);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

.assets-upload .in-content {
    padding: 10px 0;
    border-radius: 16px;
    border: 1px solid var(--greyscale-200, #F1F2F4);
    background: var(--others-white, #FFF);
}

.assets-upload .assets-drag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px 0;
}

    .assets-upload .assets-drag img {
        max-width: 150px;
        margin: auto;
        border: 2px dashed #C1C1C1;
        border-radius: 10px;
        padding: 20px;
    }

#drop-area.highlight {
    border-color: #2d43fb;
}
/*#drop-area.highlight {
	border-color: #2d43fb;
}*/

.assets-upload .assets-drag .drag-text h5 {
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 140%;
    margin-bottom: 16px;
}

.assets-upload .assets-drag .drag-text p {
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 14px;
    line-height: 160%;
}

.assets-upload .modal-end-btns {
    margin-top: 32px;
}

.modal-upload-btn {
    text-align: center;
    width: 100%;
}

.filelabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*gap: 0 8px;*/
    transition: border 300ms ease;
    cursor: pointer;
    margin: 0;
    color: var(--others-white, #FFF);
    text-align: center;
    /*font-size: 16px;*/
    font-weight: 500;
    /*line-height: 150%;
    letter-spacing: 0.3px;*/
    border-radius: 10px;
    background: #2d43fb;
    padding: 12px;
    height: 38px;
}

    .filelabel:hover {
        border-color: #020626;
        background: #020626;
        color: #fff;
    }

    .filelabel #choose {
        display: none;
    }

.upload-progress {
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-top: 24px;
}

    .upload-progress .process {
        border-radius: 13px;
        background: #2d43fb;
        width: 100%;
        height: 6px;
    }

    .upload-progress .process-precent {
        color: var(--greyscale-900, #020626);
        font-size: 12px;
        font-weight: 700;
        line-height: 160%;
        letter-spacing: 0.2px;
    }

.upload-preview {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 0 12px;
}

    .upload-preview img {
        height: 41px;
        width: 87px;
        object-fit: contain;
    }

    .upload-preview video {
        height: 41px;
        width: 87px;
        /*object-fit: cover;*/
    }

    .upload-preview .img-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .upload-preview .img-name {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }

    .upload-preview .img-info {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        line-height: 160%;
    }

/* Presentation editor */
/* aside style */
.aside-editor::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.aside-editor::-webkit-scrollbar {
    width: 2px;
    background-color: #F5F5F5;
}

.aside-editor::-webkit-scrollbar-thumb {
    background-color: #FAFAFA;
}

.aside-editor {
    border-right: 1px solid #C1C1C1;
    background: #fff;
    padding: 32px;
    width: 230px;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .aside-editor .aside-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
        width: 100%;
    }

        .aside-editor .aside-logo .menu-closer {
            display: flex;
            align-items: center;
            gap: 0 5px;
            margin-top: 2px;
        }

            .aside-editor .aside-logo .menu-closer .fa-chevron-left {
                color: #fff;
            }

    .aside-editor ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

.aside-editor-menu {
    width: 100%;
    padding: 16px;
    border-radius: 24px;
    background: var(--greyscale-50, #FAFAFA);
}

.aside-editor .nav-pills {
    gap: 16px 0;
}

    .aside-editor .nav-pills .nav-link {
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: var(--others-white, #FFF);
        position: relative;
        border-radius: 16px;
        transition: .3s all ease;
    }

        .aside-editor .nav-pills .nav-link.active,
        .aside-editor .nav-pills .nav-link:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
        }

        .aside-editor .nav-pills .nav-link .text {
            color: var(--greyscale-900, #020626);
            font-size: 14px;
            font-weight: 700;
            line-height: 160%;
            letter-spacing: 0.2px;
            /*margin-top: 16px;*/
            text-align:center;
        }

        .aside-editor .nav-pills .nav-link .icon img {
            height: 24px;
            width: 24px;
        }

        .aside-editor .nav-pills .nav-link .drag {
            position: absolute;
            left: 8px;
            top: 8px;
        }


/* Editor header */
.editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--greyscale-300, #C1C1C1);
    background: var(--others-white, #FFF);
}

.editor-top-title {
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.editor-top-menu {
    display: flex;
    align-items: center;
    gap: 0 32px;
}

    .editor-top-menu .editor-items {
        display: flex;
        align-items: center;
        gap: 0 24px;
    }

        .editor-top-menu .editor-items .ed-btn {
            min-width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--greyscale-100, #F8F8F8);
        }

            .editor-top-menu .editor-items .ed-btn.active,
            .editor-top-menu .editor-items .ed-btn:hover {
                background: #2d43fb;
                color: #fff;
            }


            .editor-top-menu .editor-items .ed-btn svg {
                height: 20px;
                width: 20px;
            }

            .editor-top-menu .editor-items .ed-btn .hover-icon,
            .editor-top-menu .editor-items .ed-btn.active .default-icon {
                display: none;
            }

            .editor-top-menu .editor-items .ed-btn.active .hover-icon {
                display: inline-block;
                color: #fff;
            }

.precent-drop .precent-btn {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--greyscale-100, #F8F8F8);
    border: none;
    display: flex;
    align-items: center;
    gap: 0 12px;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 600;
    line-height: 160%;
}

    .precent-drop .precent-btn .fa-chevron-down {
        height: 16px;
        width: 16px;
        padding: 4px;
        color: #FFFFFF;
    }

    .precent-drop .precent-btn[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

.precent-drop .dropdown-menu {
    min-width: 100%;
    padding: 8px;
}

    .precent-drop .dropdown-menu .dropdown-item {
        padding: 8px;
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }
/* editor tab */
.editor-tab {
    position: relative;
    padding-top: 60px;
    padding-left: 40px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    .editor-tab .tab-main {
        padding-right: 40px;
    }

.multimedia-main {
    width: calc(100% - 400px);
    padding-right: 40px;
}

.multimedia-block {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 100%;
}

    .multimedia-block .multimedia-plano,
    .multimedia-block .multimedia-web,
    .multimedia-block .multimedia-ticker,
    .multimedia-block .multimedia-clock,
    .multimedia-block .multimedia-text,
    .multimedia-block .multimedia-item {
       /* position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;*/
       padding:10px;
    }

    .multimedia-block .multimedia-item {
        /*background: var(--secondary-300, #FFECA7);*/
        width: 100%;
    }

.multimedia-block .multimedia-text {
    width: 100%;
    /*background: var(--primary-400, #99D8A5);*/
}

.multimedia-block .multimedia-clock {
    width: 100%;
    /*background: var(--secondary-base, #FFD023);*/
}

    .multimedia-block .multimedia-ticker {
        width: 100%;
        /*background: var(--others-light-blue, #EBF3FF);*/
    }

    .multimedia-block .multimedia-web {
        width: 100%;
        /*background: var(--others-blue, #2F78EE);*/
    }

    .multimedia-block .multimedia-plano {
        width: 100%;
        /*background: var(--greyscale-500, #FFFFFF);*/
    }

    .multimedia-block .multimedia-item i:before {
        font-size: 48px;
        /*color: #E6BB20;*/
        color: #2d43fb; 
    }

    .multimedia-block .multimedia-text i:before {
        font-size: 48px;
        /*color: #CCECD2;*/
        color: #2d43fb;
    }

    .multimedia-block .multimedia-clock i:before {
        font-size: 48px;
        /*color: #F8F8F8;*/
        color: #2d43fb;
    }

    .multimedia-block .multimedia-ticker i:before {
        font-size: 48px;
        /*color: #2F78EE;*/
        color: #2d43fb;
    }

    .multimedia-block .multimedia-web i:before {
        font-size: 48px;
        /*color: #E4E4E7;*/
        color: #2d43fb;
    }

    .multimedia-block .multimedia-plano i:before {
        font-size: 48px;
        /*color: #F8F8F8;*/
        color: #2d43fb;
    }

.multimedia-main .multimedia-down {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--others-light-blue, #EBF3FF);
    height: 95px;
    width: 100%;
}

.editor-main .edit-drop {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index:200;
}

    .editor-main .edit-drop .dropdown-menu .dropdown-item {
        justify-content: flex-start;
        gap: 0 10px;
    }

    .editor-main .edit-drop .edit-btn {
        background: transparent;
        padding: 0;
        border: none;
    }

    .editor-main .edit-drop .dropdown-menu {
        margin-top: 12px !important;
    }

        .editor-main .edit-drop .dropdown-menu .dropdown-item:hover svg path,
        .editor-main .edit-drop .dropdown-menu .dropdown-item.active svg path {
            fill: #2d43fb;
        }

.main-sidebar {
    padding: 36px;
    background: var(--others-white, #FFF);
    min-width: 400px;
    width: 400px;
    margin-top: -60px;
    min-height: calc(100vh - 89px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .main-sidebar .modal-end-btns {
        margin-top: 24px;
    }

.sidebar-form {
    width: 100%;
}

    .sidebar-form .sidebar-title {
        margin-bottom: 32px;
    }

.sidebar-title.d-flex {
    align-items: center;
    gap: 0 16px;
}

    .sidebar-title.d-flex .back-btn {
        border: none;
        background: transparent;
        padding: 0;
    }

.sidebar-form .form-group {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

    .sidebar-form .form-group > span {
        display: block;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .sidebar-form .form-group input {
        width: 100%;
        height: 54px;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
    }

        .sidebar-form .form-group input::placeholder {
            color: var(--greyscale-500, #FFFFFF);
            font-size: 14px;
            line-height: 160%;
        }

.sidebar-form .sidebar-tags {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
}

.sidebar-form .sidebar-form-size {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.sidebar-form .form-group.gap-16 {
    gap: 16px 0;
}

.sidebar-form .form-group.mt-32 {
    margin-top: 32px;
}

.sidebar-select .select-btn {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--greyscale-500, #FFFFFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    width: 100%;
    background: #fff;
}

    .sidebar-select .select-btn[aria-expanded="true"] .fa-chevron-down {
        transform: rotate(180deg);
    }

    .sidebar-select .select-btn.black {
        font-weight: 500;
        color: var(--greyscale-900, #020626);
    }

.sidebar-select .dropdown-menu {
    min-width: 100%;
}

.sidebar-coloris {
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .sidebar-coloris span {
        display: block;
        color: var(--greyscale-900, #020626);
        font-size: 16px;
        line-height: 150%;
        letter-spacing: 0.2px;
    }

    .sidebar-coloris label {
        width: 110px;
        height: 41px;
        padding: 9px 14px 9px 10px;
        border-radius: 6px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        background: var(--White, #FFF);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

        .sidebar-coloris .clr-field button,
        .sidebar-coloris label input {
            width: 22px;
            height: 22px;
            border-radius: 6px;
            border: none;
            padding: 0;
        }

.clr-picker {
    width: 264px;
    padding: 16px;
    border-radius: 12px;
    background: var(--others-white, #FFF);
    box-shadow: 0 0 10px 0px rgba(26, 32, 44, 0.1);
}

.clr-field button:after {
    border-radius: 0;
}

.clr-gradient {
    margin-bottom: 16px;
    height: 147px;
    border-radius: 4px;
}
/* multimedia right modal */
.for-all .modal-dialog {
    margin: 0 0 0 auto;
    max-width: 400px;
}

.for-all .modal-content {
    background: var(--others-white, #FFF);
    padding: 24px;
    min-height: 100vh;
    height: 100%;
}

.for-all .modal-body {
    padding: 0;
}

.for-all .modal-end-btns {
    justify-content: space-between;
    margin-top: auto;
}

    .for-all .modal-end-btns button {
        height: 56px;
    }

.for-all .nav-pills {
    border-bottom: 1px solid var(--greyscale-300, #C1C1C1);
    flex-wrap: nowrap;
}

    .for-all .nav-pills .nav-item {
        width: 100%;
    }

        .for-all .nav-pills .nav-item .nav-link {
            padding: 9px 0;
            overflow: hidden;
            color: var(--greyscale-900, #020626);
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 600;
            line-height: 160%;
            width: 100%;
            border: none;
            border-radius: 0;
            position: relative;
        }

            .for-all .nav-pills .nav-item .nav-link::after {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 0;
                background: #2d43fb;
                left: 0;
                bottom: 0;
                transition: .3s all ease;
            }

    .for-all .nav-pills .nav-link.active,
    .for-all .nav-pills .show > .nav-link {
        color: var(--primary-base, #2d43fb);
        background: transparent;
        border-color: #2d43fb;
    }

    .for-all .nav-pills .nav-item .nav-link.active::after {
        height: 2px;
    }

.widget-block {
    border-radius: 10px;
    background: var(--greyscale-50, #FAFAFA);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    margin: 34px 0;
}

    .widget-block p {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        line-height: 160%;
    }

        .widget-block p span {
            color: var(--greyscale-900, #020626);
            font-size: 12px;
            font-weight: 500;
            line-height: 160%;
        }

.range-block {
    margin-top: 24px;
}

    .range-block > span {
        display: block;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .range-block p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0 16px;
        height: 54px;
    }

    .range-block .slider_label {
        width: 68px;
        height: 54px;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid var(--greyscale-300, #C1C1C1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        line-height: 160%;
        background: #fff;
    }

.for-all .manage-modal-head {
    margin-bottom: 12px;
}

.upload-content {
    text-align: center;
    margin-top: 32px;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .upload-content h5 {
        margin: 26px 0 32px;
    }

.modal-select-btn .select-btn {
    border-radius: 10px;
    background: var(--primary-base, #2d43fb);
    width: 230px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    color: var(--others-white, #FFF);
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

    .modal-select-btn .select-btn:hover {
        background: #2d43fb;
        color: #fff;
    }

.popup-upload-btn .filelabel {
    width: 230px;
}
/* modal multimedia assets property */
.modal-asset {
    display: flex;
    align-items: center;
    gap: 0 12px;
}

    .modal-asset .modal-asset-img img {
        min-width: 42px;
        height: 41px;
        object-fit: cover;
    }

    .modal-asset .modal-asset-text p {
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 600;
        line-height: 160%;
    }

    .modal-asset .modal-asset-text span {
        display: block;
        color: var(--greyscale-500, #FFFFFF);
        font-size: 12px;
        line-height: 160%;
    }

.mas-drop {
    width: 100%;
}

    .mas-drop .fa-chevron-down {
        font-size: 14px;
        color: #020626;
    }

    .mas-drop .mas-drop-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 10px;
        background: var(--greyscale-50, #FAFAFA);
        border: none;
        padding: 16px;
    }

        .mas-drop .mas-drop-btn[aria-expanded="true"] .fa-chevron-down {
            transform: rotate(180deg);
        }

    .mas-drop .dropdown-menu {
        min-width: 100%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
    }

.form-check.pl-0 {
    padding-left: 0;
}

.side-font {
    display: flex;
    flex-direction: column;
    /*margin: 32px 0;*/
    gap: 32px 0;
}

    .side-font .font-style {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 16px;
    }

        .side-font .font-style .sidebar-select {
            width: 100%;
        }

        .side-font .font-style .fst-input input {
            width: 60px;
            height: 54px;
            padding: 16px 5px;
            text-align: center;
            border-radius: 10px;
            border: 1px solid var(--greyscale-300, #C1C1C1);
            background-color: #fff;
            padding: 4px;
            color: var(--greyscale-900, #020626);
            font-size: 14px;
            font-weight: 500;
            line-height: 160%;
        }

.font-style-btns {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .font-style-btns .font-style-btn {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-radius: 4px;
        border: 1px solid var(--greyscale-100, #F8F8F8);
        background: var(--greyscale-50, #FAFAFA);
    }

        .font-style-btns .font-style-btn:hover,
        .font-style-btns .font-style-btn.active {
            border-color: #2d43fb;
        }

.font-position {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .font-position .font-text-align,
    .font-position .font-text-pos {
        display: flex;
        align-items: center;
        gap: 0 16px;
    }

        .font-position .font-text-align .text-align-btn,
        .font-position .font-text-pos .text-pos-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            background: transparent;
            padding: 0;
            width: 24px;
            height: 24px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

            .font-position .font-text-pos .text-pos-btn:hover,
            .font-position .font-text-pos .text-pos-btn.active {
                border-color: #2d43fb;
            }

            .font-position .font-text-align .text-align-btn:hover,
            .font-position .font-text-align .text-align-btn.active {
                background: #FAFAFA;
                border-color: #2d43fb;
            }

.modal-end-btns.mt-60 {
    margin-top: 60px;
}

/*  */
.text-schedule-block .schedule-title {
    border-radius: 10px;
    background: var(--greyscale-50, #FAFAFA);
    padding: 16px;
}

.form-group textarea {
    width: 100%;
    height: 142px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 16px;
}

    .form-group textarea::placeholder {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 14px;
        line-height: 160%;
    }

.schedule-alert {
    border-radius: 10px;
    background: var(--others-light-blue, #EBF3FF);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 0 10px;
    margin-top: 8px;
    color: var(--others-blue, #2F78EE);
}

    .schedule-alert .fa-circle-exclamation {
        transform: rotate(180deg);
    }

    .schedule-alert span {
        display: block;
        font-size: 12px;
        font-weight: 500;
        line-height: 160%;
    }

.text-schedule-block .modal-end-btns {
    margin-top: 32px;
}

/* schedule-add */
.schedule-add {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px 0;
}

    .schedule-add .schedule-new {
        display: flex;
        flex-direction: column;
    }

.schedule-new .schedule-new-item {
    padding: 16px 0;
    border-radius: 16px;
    background: var(--others-white, #FFF);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.schedule-new-left {
    display: flex;
    align-items: center;
    gap: 0 16px;
}

.schedule-new .schedule-new-left .new-text p {
    max-width: 150px;
    height: 22px;
    overflow: hidden;
    color: var(--greyscale-900, #020626);
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    line-height: 160%;
}

.schedule-new .schedule-new-left .new-text span {
    color: var(--greyscale-500, #FFFFFF);
    font-size: 12px;
    line-height: 160%;
}

.schedule-new .control__indicator {
    top: -10px;
    border-radius: 50px;
    /*background: transparent;*/
    border: 1px solid #2d43fb;
}

.schedule-new .control--checkbox .control__indicator:after {
    left: 6px;
    top: 3px;
}
/* ticker-group */
.ticker-group {
    display: flex;
    flex-direction: column;
}

.ticker-sidebar .modal-end-btns {
    margin-top: 32px;
}

.multimedia-preview img {
    width: 100%;
}


/* autocomplate */
.amsify-suggestags-area .amsify-suggestags-input-area.amsify-focus,
.amsify-suggestags-area .amsify-suggestags-input-area .amsify-suggestags-input:focus {
    outline: none;
    border-color: #2d43fb;
    box-shadow: none;
}

.amsify-suggestags-input-area .amsify-select-tag.col-bg,
.amsify-suggestags-input-area .amsify-select-tag {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 10px;
    border-radius: 10px;
    background: var(--greyscale-100, #F8F8F8);
    gap: 0 4px;
    /* color: var(--greyscale-700, #020626); */
    font-size: 12px;
    font-weight: 500;
    line-height: 160%;
}

.amsify-suggestags-area .amsify-suggestags-input-area-default {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px !important;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
}

.amsify-suggestags-area .amsify-suggestags-input-area .amsify-suggestags-input {
    max-width: 100%;
}

.amsify-suggestags-area .amsify-suggestags-input-area-default {
    max-width: 100%;
    width: 100%;
}

.amsify-suggestags-area .amsify-suggestags-list {
    width: 100% !important;
}

.item1 {
    color: var(--primary-base, #2d43fb);
    background: var(--primary-100, #E6F5E9);
}

.item2 {
    color: var(--alerts-warning-dark, #E6BB20);
    background: var(--secondary-100, #FFFAE9);
}

.item3 {
    color: var(--greyscale-900, #020626);
    background: var(--greyscale-100, #F8F8F8);
}


.dashboard-sec .amsify-suggestags-area .amsify-suggestags-input-area .amsify-suggestags-input {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 10px;
    /*max-width: 632px;*/
    max-width:100%;
    width: 100%;
    background-image: url(../images/icons/search-icon.svg);
    background-repeat: no-repeat;
    background-position: center right 20px;
}

.dashboard-sec .amsify-suggestags-input-area {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    padding: 0 !important;
    border: none;
}

    .dashboard-sec .amsify-suggestags-input-area span {
        order: 2;
    }

    .dashboard-sec .amsify-suggestags-input-area input {
        order: 1;
    }

.global-assign-tags {
    position: relative;
}


.global-select {
    width: 100%;
}

.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 100%;
}

.bs-searchbox .form-control {
    box-shadow: none;
    border-color: #2d43fb;
    margin-bottom: 8px;
}

.bootstrap-select > .dropdown-toggle {
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    padding: 7px;
    width: 100%;
    background: transparent;
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 220%;
}

    .bootstrap-select > .dropdown-toggle:focus {
        outline: none !important;
        outline-offset: 0;
    }

.bootstrap-select .dropdown-toggle::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    background-image: url(../images/icons/select-arrow.svg);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    border: none;
    transition: .3s all ease;
}

.bootstrap-select .dropdown-toggle.show::after {
    transform: rotate(180deg);
}


/* input type range style */
.range-block input[type=range] {
    width: 100%;
    background-color: transparent;
    -webkit-appearance: none;
}

    .range-block input[type=range]::-webkit-slider-runnable-track {
        background: #2d43fb;
        border-radius: 10px;
        width: 100%;
        height: 4px;
        cursor: pointer;
    }

    .range-block input[type=range]::-moz-range-track {
        background: #2d43fb;
        border-radius: 10px;
        width: 100%;
        height: 4px;
        cursor: pointer;
    }

    .range-block input[type=range]::-ms-track {
        background: #2d43fb;
        width: 100%;
        height: 4px;
        cursor: pointer;
    }

    .range-block input[type=range]::-webkit-slider-thumb {
        margin-top: -5px;
        width: 14px;
        height: 14px;
        background: #2d43fb;
        border-radius: 15px;
        cursor: pointer;
        -webkit-appearance: none;
    }

    .range-block input[type=range]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: #2d43fb;
        border-radius: 15px;
        cursor: pointer;
    }

    .range-block input[type=range]::-ms-thumb {
        width: 14px;
        height: 14px;
        background: #2d43fb;
        border-radius: 15px;
        cursor: pointer;
        margin-top: 0px;
    }
/* calendar style */
.daterangepicker,
.daterangepicker .drp-calendar {
    max-width: 350px;
    width: 100%;
}

    .daterangepicker .drp-selected {
        display: none;
    }

.daterangepicker {
    padding: 61px 16px 16px 16px;
    background: #fff;
    box-shadow: 5px 5px 50px 0px rgba(26, 32, 44, 0.06);
    border-radius: 12px;
}

    .daterangepicker .drp-calendar.left .calendar-table {
        padding: 8px 0 0;
    }

    .daterangepicker .drp-calendar.left {
        padding: 0;
    }

    .daterangepicker .dt-title {
        font-family: 'Poppins', sans-serif;
        width: 90%;
        position: absolute;
        top: 16px;
        left: 16px;
        color: var(--greyscale-900, #020626);
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #F1F2F4;
    }

    .daterangepicker th.month {
        font-family: 'Poppins', sans-serif;
        padding: 16px;
        color: var(--greyscale-900, #020626);
        font-size: 16px;
        font-weight: 600;
        line-height: 150%;
        letter-spacing: 0.3px;
    }

    .daterangepicker td.end-date.active,
    .daterangepicker td.start-date.active,
    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background: #2d43fb;
        color: #fff;
        border-radius: 10px;
    }

    .daterangepicker td.in-range {
        background: #E6F5E9;
    }


    .daterangepicker .calendar-table tr:nth-child(2) th {
        font-family: 'Poppins', sans-serif;
        color: var(--greyscale-500, #FFFFFF);
        font-size: 14px;
        font-weight: 400;
        line-height: 34px;
        min-width: 34px;
        width: 34px;
        height: 34px;
    }

    .daterangepicker .calendar-table td {
        font-family: 'Poppins', sans-serif;
        width: 34px;
        height: 34px;
        color: var(--greyscale-900, #020626);
        font-size: 14px;
        font-weight: 400;
        line-height: 34px;
        min-width: 34px;
        border-radius: 0;
    }

    .daterangepicker.show-calendar .drp-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        gap: 0 20px;
        border: none;
    }

        .daterangepicker.show-calendar .drp-buttons button {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            text-align: center;
            font-family: 'Poppins';
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.2px;
            width: 100px;
            height: 42px;
            margin: 0;
        }

        .daterangepicker.show-calendar .drp-buttons .cancelBtn {
            color: var(--greyscale-900, #020626);
            border: 1px solid var(--greyscale-900, #020626);
        }

            .daterangepicker.show-calendar .drp-buttons .cancelBtn:hover {
                border: 1px solid #020626;
                background: #FAFAFA;
                ;
            }

        .daterangepicker.show-calendar .drp-buttons .applyBtn {
            background: var(--greyscale-900, #020626);
            color: #fff;
        }

            .daterangepicker.show-calendar .drp-buttons .applyBtn:hover {
                background: #2d43fb;
                border-color: #2d43fb;
            }

/* custom checkbox */
.control {
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
}

    .control > span {
        display: inline-block;
        color: #687588;
        font-size: 14px;
        font-weight: 500;
        line-height: 160%;
    }

    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

.control__indicator {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control input:checked ~ .control__indicator {
    background: #2d43fb;
    border-radius: 50%;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 7px;
    top: 4px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* end */
.page-link:focus {
    box-shadow: none;
}

table.dataTable {
    width: 100% !important;
}

.form-check-input:focus {
    box-shadow: none;
}

.mb-32 {
    margin-bottom: 32px;
}

.mt-32 {
    margin-top: 32px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mt-16 {
    margin-top: 16px;
}

.mob,
.mob-logo,
.tab {
    display: none !important;
}

.top-in {
    display: flex;
    align-items: center;
    gap: 0 20px;
}



@media screen and (max-height: 740px) {
    .sign-left {
        /*height: 100vh;*/
    }
    /* .aside-editor, */
    .aside-block {
        overflow-y: auto;
    }
    .sticky {
        width: 100% !important;
    }
    .manage-modal-full .modal-dialog {
        max-width: 100%;
    }
    .assets-modal-details {
        display: flex;
        flex-direction: column;
    }
}


/*@media screen and (min-width: 1024px)*/
@media screen and (min-width: 1401px) {
    .sign-in {
        margin: 0;
        padding: 0;
        width: 100%;
       /* height: 100vh;*/
        background-image: url(../images/cl-background.svg);
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width: 1400px) {
    .sign-in {
        margin: 0;
        padding: 0;
        width: 100%;
        /*height: 100vh;*/
        background-image: url(../images/cl-background.svg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .assets-modal-details {
        display: flex;
        flex-direction: column;
    }

    .manage-modal-full .modal-dialog {
        max-width: 100%;
    }

    .sticky {
        width: 100% !important;
    }

    .tab {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    .aside-block .aside-logo {
        justify-content: space-between;
    }

    .menu-opener {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        min-width: 20px;
        height: 20px;
        padding: 4px 2px;
        background: transparent;
        border: none;
        gap: 3px;
        cursor: pointer;
        margin-right: 20px;
    }

        .menu-opener span {
            display: inline-block;
            position: relative;
            background: #020626;
            height: 2px;
        }

            .menu-opener span.one,
            .menu-opener span.three {
                width: 15px;
            }

            .menu-opener span.two {
                width: 9px;
            }

    .aside-block {
        position: fixed;
        left: -100%;
        top: 0;
        z-index: 100;
        transition: .4s all ease;
    }

        .aside-block.active {
            left: 0;
        }
}


@media screen and (max-width: 992px) {
    .sign-in {
        background: none;
    }
    .assets-modal-details {
        display: flex;
        flex-direction: column;
    }
    .manage-modal-full .modal-dialog {
        max-width: 100%;
    }
    .sticky {
        width: 100% !important;
    }
    .select-modal .h4-title {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .sign-img {
        display: none;
    }

    .sign-left {
        height: auto;
    }

    .sign-text {
        background-image: url('../images/h-login-tab-bg.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-top: none;
    }

        .sign-text h1 {
            margin-left:auto;
            margin-right:auto;
        }
        .sign-text p {
            margin-left: auto;
            margin-right: auto;
        }

        /*.sign-text:before {
		content: ' ';
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 33%;
		opacity: 0.2;
		background-image: url('../images/login-img.svg');
		background-position: center;
		background-size: cover;
		border-top: none;
	}*/
        .sign-form-block .arrow-icon {
            display: none;
        }

    .sign-text img {
        margin-left: auto;
        margin-right: auto;
    }

    .sign-in .sign-form {
        gap: 0;
    }

    .sign-end {
        margin-top: 87px;
    }
    /* end form sign */
    .dash-recent-content .license-info {
        margin-top: 0 !important;
    }

    .license-info .h5-title {
        text-align: center;
    }

    .license-chart .canvas-con {
        flex-direction: column;
        gap: 32px 0;
    }

    .license-chart .legend-con ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 12px 0;
    }

    .license-chart .canvas-con-inner {
        width: 150px;
    }

        .license-chart .canvas-con-inner canvas {
            height: 150px !important;
        }

    .license-chart .chart-total {
        left: 45%;
        top: 87px;
        font-size: 14px;
    }

    .dash-player {
        margin-top: 32px;
    }

    .pres-main.dash-player {
        margin-top: 0;
    }

    .dashboard-title {
        /*margin-top: 32px;*/
    }

    .dashboard-top {
        margin-bottom: 0;
    }

    .reports__table-wrap .reports-tab-wrap .choose-category {
        width: auto;
    }

    .dash-main .presentation-tab .dataTables_wrapper .dataTables_info {
        padding-top: 24px;
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 0;
    }

    .presentation-tab .dataTables_length {
        bottom: -6px;
    }

    .settings__tabs .settings__tabs-content {
        flex-direction: column;
    }

    .settings__tabs .settings__tab {
        width: 100%;
        margin-right: 0 !important;
        flex-wrap: nowrap;
        flex-direction: row;
    }

    .settings-main .settings__tab .nav-link {
        min-width: auto;
        width: 100%;
    }

    .settings-main {
        background: transparent;
    }

    .settings__tabs .tab-content {
        margin-top: 24px;
    }
}


@media screen and (max-width: 786px) {
    .assets-modal-details {
        display: flex;
        flex-direction: column;
    }
    .manage-modal-full .modal-dialog {
        max-width: 100%;
    }
    .sticky {
        width: 100% !important;
    }
    .aside-editor .aside-logo {
        display: none;
    }

    .editor-wrap {
        display: block;
        position: relative;
        padding-top: 114px;
    }

    .editor-head {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .editor-top-menu .editor-items {
        gap: 0 16px;
    }

    .editor-top-menu {
        gap: 0 16px;
    }

    .aside-editor {
        background: transparent;
        padding: 0;
        width: 100%;
        min-height: auto;
        height: auto;
    }

    .aside-editor-menu {
        padding: 0;
    }

    .aside-editor .nav-pills {
        display: flex;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row !important;
        width: 100%;
        overflow-x: auto;
        gap: 16px;
        padding: 16px;
    }

        .aside-editor .nav-pills .nav-link {
            min-width: 133px;
            height: 102px;
        }

    .editor-tab {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 24px;
    }

    .multimedia-main {
        padding-right: 0;
    }

    .main-sidebar {
        margin-top: 32px;
        min-width: 100%;
        width: 100%;
        justify-content: flex-start;
        padding: 16px 36px;
        min-height: auto;
    }

    .sm-mt-0 {
        margin-top: 0;
    }

    .sm-ai-center {
        align-items: center;
    }

    .sidebar-form .form-group.sm-mt-0 {
        margin-top: 0;
    }
}



@media screen and (max-width: 576px) {
    /*.mob-logo img {
        filter:none !important;
    }*/
    .player-code-inp {
        width:100% !important;
    }
    .player-code-inp input{
        margin:10px !important;
    }
    .player-code-inst {
        flex-direction:column !important;
    }
    .campaing-list {
        flex-direction: column !important;
    }
    .modal-editing-input-group-row {
        flex-direction: column !important;
    }
    .modal-editing-row {
        flex-direction:column;
    }
    .assets-modal-details {
        display: flex;
        flex-direction: column;
    }
    .manage-modal-full .modal-dialog {
        max-width: 100%;
    }
    .sticky {
        width: 100% !important;
    }
    .mob {
        display: block !important;
    }

    .sign-text {
        display: none;
    }

    .mob-logo {
        display: block !important;
        text-align: center;
    }

        .mob-logo img {
            width: 175px;
            margin: auto;
            
        }

    .sign-block {
        margin-top: 32px;
    }

    .sign-form h3 {
        margin: 0 0 24px;
    }

    .sign-btns {
        margin: 24px 0;
    }

    .sign-end {
        margin-top: 16px;
    }

        .sign-end span {
            display: block;
            text-align: center;
            width: 100%;
        }

    .sign-up .sign-form h3 {
        margin-top: 24px;
    }

    .license-chart .canvas-con {
        flex-direction: row;
        justify-content: space-between;
    }

    .license-chart .canvas-con-inner {
        width: 100px;
    }

        .license-chart .canvas-con-inner canvas {
            height: 100px !important;
        }

    .dash-recent-content .license-info {
        margin-top: 16px !important;
    }

    .license-info .h5-title {
        text-align: left;
    }

    .license-chart .chart-total {
        left: 13%;
        top: 57px;
        font-size: 12px;
    }

    .player-top-right {
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
    }

    .dash-player-search {
        order: 2;
        width: 100%;
    }

        .dash-player-search form {
            width: 100%;
        }

    .dash-main .nav-pills {
        order: 1;
    }

    .player-dev-top .dash-player-search .form-group {
        max-width: 100%;
    }

    .dash-player .h5-title.mob {
        margin-bottom: -28px;
    }

    table.dataTable > thead > tr > th {
        white-space: nowrap;
        min-width: 130px;
    }

    .dataTables_wrapper .dataTables_paginate {
        justify-content: center;
        width: 100%;
    }

    .dash-main .dataTables_wrapper .dataTables_info {
        padding-top: 20px;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: 20px;
    }

    .dash-template .view-all-link {
        padding: 0;
    }

    .dashboard-title {
        align-items: center;
        margin-top: 0;
    }

    .dash-temp-block .temp-search {
        width: 100%;
    }

    .dash-temp-right .default-drop-btn,
    .dash-temp-right:nth-child(2),
    .dash-temp-right .choose-category {
        width: 100%;
    }

    .dash-temp-right .default-drop-btn {
        justify-content: space-between;
    }

    .dash-temp-right .dropdown-menu {
        min-width: 100%;
    }

    .dash-temp-right:nth-child(3),
    .dash-temp-right:nth-child(4) {
        width: 47%;
    }

    .default-drop-btn {
        padding: 16px;
    }

    /*.dash-template .dash-temp-items {
        flex-wrap: nowrap;
        overflow-x: scroll;
    }*/

    .pagination-info .pagination-drop .pag-drop-btn {
        display: none;
    }

    .temp-pagination {
        flex-direction: column;
    }

    .dash-main {
        margin-top: 32px;
    }

    .pagination-info {
        margin-right: auto;
        margin-top: 16px;
    }

    .dash-template,
    .dash-player {
        margin-left: -24px;
        margin-right: -24px;
    }

    .map-pin .pin-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }

    .dash-player-content {
        margin-bottom: 24px;
    }

    .map-pin {
        right: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        max-width: 250px;
    }

    .dashboard-top .add-btn span span {
        display: none;
    }

    .dashboard-top .add-btn {
        width: 92px;
    }

    .dashboard-top-right .add-drop {
        margin-right: 20px;
    }

    .dashboard-top {
        padding: 24px 16px;
        justify-content: space-between;
    }

        .dashboard-top .dashboard-top-search .mob-fix {
            position: fixed;
            top: -130px;
            left: 16px;
            width: 100%;
            z-index: 10;
            padding-right: 32px;
            transition: .3s all ease;
        }

            .dashboard-top .dashboard-top-search .mob-fix.active {
                top: 24px;
            }

    .dashboard-top-right {
        margin-left: 0;
    }

    .dashboard-top .dashboard-top-search {
        width: auto;
        max-width: auto;
    }

    .player-dev-top {
        display: block;
    }

    .pres-main .player-top-right {
        flex-direction: row;
        flex-wrap: wrap;
        /* margin-top: -28px;*/
        margin-top: 10px;
    }

    .pres-main .top-in {
        order: 2;
        gap: 0 16px;
        justify-content: space-between;
        width: 100%;
    }

    .pres-main .nav-pills {
        order: 1;
        margin-left: auto;
    }

    .top-bar {
        flex-direction: column;
    }

        .top-bar .pres-search {
            order: 1;
        }

        .top-bar .sort-by {
            order: 3;
        }

        .top-bar .pres-calendar {
            order: 2;
            width: 100%;
        }

            .top-bar .pres-calendar input {
                width: 100%;
            }

    table.players-table.dataTable > thead > tr > th:first-child,
    table.pres-table.dataTable > thead > tr > th:first-child,
    table.assets-table.dataTable > thead > tr > th:first-child {
        width: 20px !important;
        min-width: 20px;
        padding: 16px 2px 16px 16px;
    }

    .presentation-tab {
        padding-bottom: 80px;
    }

    .dash-main .settings__table-wrap .dataTables_wrapper .dataTables_info,
    .dash-main .presentation-tab .dataTables_wrapper .dataTables_info {
        padding-right: 0;
        margin-right: auto;
        position: absolute;
        left: 0;
        bottom: -50px;
    }

    .settings__table-wrap .dataTables_length,
    .presentation-tab .dataTables_length {
        bottom: -60px;
    }

    .modal .manage-modal-head .black-btn {
        width: 34px;
        height: 34px;
    }

        .modal .manage-modal-head .black-btn span {
            display: none;
        }

        .modal .manage-modal-head .black-btn svg {
            width: 18px;
            height: 18px;
        }

    .players-modal2 .modal-body,
    .settings__modal .modal-body,
    .players-modal-download .modal-body,
    .playlist__modal1 .modal-body,
    .playlist__modal3 .modal-body,
    .playlist-modal4 .modal-body,
    .select-modal .modal-body,
    .template-modal .modal-body,
    .manage-modal .modal-body {
        padding: 36px 16px;
    }

    .modal .dash-template {
        margin-left: 0;
        margin-right: 0;
    }

    .m-temp-rov .m-temp-col.one {
        padding: 0;
    }

    .menu-opener {
        margin-right: 0;
    }

    .template-modal .modal-end-btns {
        justify-content: space-between;
    }

    .modal .black-btn,
    .modal-end-btns button,
    .modal-end-btns a {
        width: 100%;
    }

    .playlist__moda4-wrap {
        gap: 24px 0;
    }

    .players-main .my-pres > .h4-title,
    .playlist-main .my-pres > .h4-title {
        margin-bottom: 16px;
    }

    .reports-tab-wrap .pres-calendar,
    .reports-tab-wrap .pres-calendar input {
        width: 100%;
    }

    .reports-main .reports-tab-wrap {
        flex-wrap: wrap;
    }

    .reports-tab-wrap .pres-calendar {
        order: 1;
    }

    .reports-tab-wrap .player-select {
        order: 2;
    }

    .reports-tab-wrap .location-select {
        order: 3;
    }

    .reports-tab-wrap .content-select {
        order: 4;
        width: 47%;
    }

    .reports-tab-wrap .log-drop {
        order: 5;
        width: 47%;
    }

    .settings-main {
        gap: 16px 0;
    }

    .settings__tabs .tab-content {
        margin-top: 0;
    }

    .settings-main {
        padding: 24px 0;
    }

        .settings-main .nav-pills {
            order: 1;
            margin-bottom: 16px;
            overflow-x: auto;
            width: 100%;
        }

    .settings__tabs .tab-content {
        order: 2;
    }

    .settings-title {
        padding: 0 24px;
    }

    .settings__table-wrap .reports__table-content {
        padding-bottom: 60px;
    }

    .mob-flex {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }
}

progress::-webkit-progress-bar {
    border-radius: 20px;
}

progress::-webkit-progress-value {
    border-radius: 20px;
}

progress::-moz-progress-bar {
    border-radius: 20px;
}


.hidden {
    display: none !important;
}

.dash-illustration-title {
    font-weight: 600;
    text-align: center;
    color: #020626;
    font-size: 16px;
    padding: 10px;
}

.dash-illustration-desc {
    text-align: center;
    color: #020626;
    font-size: 12px;
    padding: 10px 10px 20px 10px;
}

.player-code {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player-code .header-text {
        color: var(--greyscale-900, #020626);
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        padding: 8px;
}

.player-code-inp {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    border: 1px solid #2d43fb;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.player-code-inp input {
        display: flex;
        border-radius: 10px;
        border: 2px solid #2d43fb;
        width: 48px;
        height: 48px;
        text-align: center;
        margin: 10px;
}

.player-code .info-text {
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 10px;
    line-height: 140%;
    padding: 15px;
}

.player-code-inst {
    /*width: 50%;*/
    display: flex;
    flex-direction: row;
    /*align-items: center;
    justify-content: space-evenly;*/
    padding: 25px;
    flex-wrap: wrap;
}

.player-code-inst-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    text-align: center;
}


.sticky {
    position: fixed;
    top: 0;
    width: calc(100% - 280px);
    background-color: #fff;
    z-index: 100;
}

    .sticky + .dash-main {
        padding-top: 97px;
    }

ul.breadcrumb {
    display: flex; /* that’s all */
    align-items: center; /* edit */
    /*margin: 0;*/
    padding: 5px;
    list-style: none;
    font-weight:600;
}

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 12px;
        color:#020626;
    }

    ul.breadcrumb li a{
        color: #020626;
        text-decoration:underline;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding: 8px;
            color: black;
            content: "/\00a0";
        }

.h4-title > i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
    font-size: 36px;
    vertical-align: middle;
    color:#2d43fb;
}

.avatars {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 20%;
    overflow: hidden;
    margin-bottom: 0px !important;
    border: 1px solid #020626;
    display: inline-block;
    position: relative;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2);
    -webkit-transition: .2s ease;
    transition: .2s ease;
}

    .avatar:nth-child(n+2) {
        margin-left: -20px;
    }

.avatars:hover .avatar:nth-child(n+2) {
    margin-left: -10px;
}

div.ninotree {
    margin: 0;
    padding: 0;
}

    div.ninotree ul {
        list-style-type: none;
    }

    div.ninotree label {
        margin-left: 1em;
        user-select: none;
        margin-bottom: 1em;
    }

    div.ninotree .caret {
        cursor: pointer;
        user-select: none;
        margin-left:1em;
    }

    div.ninotree .collapsed {
        display: none;
    }

.custom-control-input {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    border: 1px solid #e6e6e6;
    /*margin-right: 50px;*/
    background-color: transparent;
    outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    position: relative;
}

    .custom-control-input:before {
        content: "";
        position: absolute;
        top: 2px;
        right: 2px;
        bottom: 2px;
        left: 2px;
        border-radius: 100%;
        transition: background .15s;
    }

    .custom-control-input:checked:before {
        background-color: #2d43fb;
        border-color: #2d43fb;
        
    }

div.ninotree ul li input[type="radio"]:checked {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e);
    border-color: #2d43fb;
}

.zoomableContainer {
    height: 100%;
    background-color: #F1F2F4;
    border-radius:20px;
}

.default-icon {
    color: var(--greyscale-900, #020626);
}
.default-icon:hover {
    color:#fff;
}

.aside-editor-menu i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
    color: #020626;
    font-size:28px;
    line-height:1;
}

.ui-resizable-nw, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-se, .ui-resizable-n, .ui-resizable-e, .ui-resizable-s, .ui-resizable-w {
    width: 20px;
    height: 20px;
    background-color: #2d43fb;
    border: 1px solid #FFF;
    border-radius: 20px;
}

.ui-resizable-nw {
    left: -5px;
    top: -5px;
}

.ui-resizable-ne {
    top: -5px;
    right: -5px;
}

.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
}

.ui-resizable-se {
    bottom: -5px;
    right: -5px;
}

.ui-resizable-n {
    top: -5px;
    left: 48%;
}

.ui-resizable-s {
    bottom: -5px;
    left: 48%;
}

.ui-resizable-w {
    left: -5px;
    top: 50%;
}

.ui-resizable-e {
    right: -5px;
    top: 50%;
}

.btn-xs {
    padding: 15px;
}
/*
.campaign-table th {
    border-top: 1px solid rgb(13 33 74 / 30%);
    border-bottom: 1px solid rgb(13 33 74 / 30%);
    border-right: 1px solid rgb(13 33 74 / 30%);
}

    .campaign-table th:first-child {
        border-left: 1px solid rgb(13 33 74 / 30%);
        border-bottom-left-radius: 0px !important;
    }

.campaign-table th:last-child {
    border-bottom-right-radius: 0px !important;
}

.campaign-table td:first-child {
    border-left: 1px solid rgb(13 33 74 / 30%) !important;
}

.campaign-table td {
    border-right: 1px solid rgb(13 33 74 / 30%) !important;
}

.campaign-table {
    border-bottom: 1px solid rgb(13 33 74 / 30%) !important;
    border-collapse: separate !important;
}
*/
.calendar-table .table-condensed{
    border: 0px !important;
}
.calendar-table .table-condensed td:first-child {
    border: 0px !important;
}

.calendar-table .table-condensed td:last-child {
    border: 0px !important;
}

.dataTables_scrollHead {
    width: 100% !important;
}
.dataTables_scrollHeadInner {
    width: 100% !important;
}
.new-modal-body-top {
    position: fixed;
    top: 0px;
    width: calc(100% - 36px);
    background: #fff;
    padding: 0.5em;
}

.newmodal-footer {
    width: calc(100% - 36px);
    position: fixed;
    bottom: 0px;
    height: 80px;
    border-top: 1px solid #f1f2f4;
    display: flex;
    flex-direction: row;
    background-color: var(--others-white, #FFF);
    align-items: center;
    gap: 10px;
    padding: 1em;
    justify-content: flex-end;
}

.new-modal-footer-rightpan {
    display: flex;
    /*align-items: flex-start;
    justify-content: flex-end;
    margin-left: auto;
    width: 40%;*/
    gap: 20px;
}

.newmodal-footer a,
.newmodal-footer button {
    min-width: 162px;
    width: 100%;
    height: 56px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    /*background: transparent;*/
    /*border: none;*/
}

.headerv2 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background-color: #fff;
    padding: 0.5em;
    border-bottom: #E4E4E7 solid 1px;
    z-index:10;
}

.footerv2 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #fff;
    padding: 0.5em;
    display: flex;
    justify-content: end;
    border-top: #E4E4E7 solid 1px;
}

.contentv2 {
    position: fixed;
    top: 150px;
    bottom: 60px;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 1em;
    overflow-y: auto;
    overflow-x: hidden;
}

.footerv2 a,
.footerv2 button {
    min-width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    background: transparent;
    border: none;
}

.footerv2 .btn-white {
    border: 1px solid var(--greyscale-900, #020626);
    color: var(--greyscale-900, #020626);
}

    .footerv2 .btn-white:hover {
        border: 1px solid #020626;
        background: #FAFAFA;
    }

.footerv2 .btn-black {
    background: var(--greyscale-900, #020626);
    color: var(--others-white, #FFF);
}

    .footerv2 .btn-black:hover {
        background: #020626;
    }

.footerv2 .green-btn {
    background: #2d43fb;
    border-color: #2d43fb;
    color: var(--others-white, #FFF);
}

    .footerv2 .green-btn:hover {
        background: #020626;
    }

.headerv2 a,
.headerv2 button {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    background: transparent;
    border: none;
}

.headerv2 .btn-white {
    border: 1px solid var(--greyscale-900, #020626);
    color: var(--greyscale-900, #020626);
}

    .headerv2 .btn-white:hover {
        border: 1px solid #020626;
        background: #FAFAFA;
    }

.headerv2 .btn-black {
    background: var(--greyscale-900, #020626);
    color: var(--others-white, #FFF);
}

    .headerv2 .btn-black:hover {
        background: #020626;
    }

.headerv2 .green-btn {
    background: #2d43fb;
    border-color: #2d43fb;
    color: var(--others-white, #FFF);
}

    .headerv2 .green-btn:hover {
        background: #020626;
    }

.headerv2 .select-btn {
    border-radius: 10px;
    background: var(--primary-base, #2d43fb);
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
    color: var(--others-white, #FFF);
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}

.headerv2 .select-btn:hover {
    background: #2d43fb;
    color: #fff;
}

.settings__table-wrap .dataTables_wrapper .dataTables_filter input:focus {
    background-image:url('#');
}

.dataTables_wrapper {
    overflow-x: auto;
    overflow-y: hidden;
}

.player-code {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* .player-code .header-text {
        color: var(--greyscale-900, #020626);
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        line-height: 140%;
        padding: 15px;
    }

.player-code-inp {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;*/
    /*padding: 15px;*/
    /*flex-wrap: wrap;
    border: 1px solid #2d43fb;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/

    /*.player-code-inp input {
        display: flex;*/
        /*padding: 16px 16px;*/
        /*border-radius: 10px;
        border: 2px solid #2d43fb;
        width: 48px;
        height: 48px;
        text-align: center;
        margin: 20px;
    }*/

.player-code .info-text {
    color: var(--greyscale-900, #020626);
    text-align: center;
    font-size: 10px;
    line-height: 140%;
    padding: 15px;
}
/*.player-code-inst {
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding:25px;
}
.player-code-inst-item {
    flex: 1 1 0;
    width: 0;
    text-align:center;
}*/

.player-code-inst {
    display: flex;
    flex-direction: row;
    padding: 10px;
    flex-wrap: wrap;
}

.player-code-inst-item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    text-align: center;
}

.form-control:focus {
    border-color:#2d43fb;
}

.modal-editing-container {
    display: flex;
    flex-direction: column;
    /*justify-content: space-evenly;*/
    height: 100%;
    gap: 16px;
}

.modal-editing-row {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    width: 100%;

}

.modal-editing-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width:100%;
}

.modal-editing-input-group-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
    align-items: center;
    justify-content:space-evenly;
    height:100%;
}

.modal-editing-input-title {
    color: var(--greyscale-900, #020626);
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
}

.modal-editing-input-control {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--greyscale-300, #C1C1C1);
    width: 100%;
    align-items: center;
}

    .modal-editing-input-control:focus {
        border-color: #2d43fb;
        box-shadow: none;
    }

    .modal-editing-input-control::placeholder {
        color: var(--greyscale-500, #FFFFFF);
        font-size: 14px;
        line-height: 160%;
    }

    .modal-editing-input-control .inp__check input {
        padding: 0;
        box-shadow: none;
        width: 44px;
        height: 22px;
    }

.modal-tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:32px;
}

.btnv2 {
    display: flex;
    height: 48px;
    padding: 21px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    max-width: fit-content;
    margin: 2px auto 2px auto;
}

.btn-white {
    border: 1px solid var(--greyscale-900, #020626);
    color: var(--greyscale-900, #020626);
}

    .btn-white:hover {
        color: var(--greyscale-900, #020626);
    }

.btn-delete {
    background: var(--alerts-error-base, #E03137);
    color: #fff;
    border-color: var(--alerts-error-base, #E03137);
}
    .btn-delete:hover {
        color: #fff;
    }


.grid-5 {
    width: calc(5%);
}

.grid-10 {
    width: calc(10%);
}

.grid-20 {
    width: calc(20%);
}

.grid-25 {
    width: calc(25%);
}

.grid-33 {
    width: calc(33.3333%);
}

.grid-66 {
    width: calc(66.6666%);
}

.grid-50 {
    width: calc(50%);
}

.grid-100 {
    width: calc(100%);
}

.widget-block-pill {
    border-radius: 10px;
    background: var(--greyscale-50, #FAFAFA);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0 8px;
    /*margin: 34px 0;*/
    border-left: #2d43fb 4px solid;
    border-bottom: #2d43fb 1px solid;
    width: 100%;
}

.widget-block-pill-header {
    text-transform: uppercase;
    color: var(--greyscale-300 rgba(0, 0, 0, 0.20))
}

.widget-blockpill-span {
    color: var(--greyscale-900, #020626);
    font-size: 18px;
    font-weight: bold;
    line-height: 160%;
}

.driver-popover {
    max-width: 500px !important;
}

.driver-popover-title {
    font-family: 'Poppins' !important;
    font-size: 20px !important;
    color: #2d43fb;
}

.driver-popover-description {
    font-family: 'Poppins' !important;
    font-size: 16px !important;
    color: #020626;
}

.driver-popover-prev-btn {
    font-family: 'Poppins' !important;
    font-size: 16px !important;
    border: 1px solid var(--greyscale-900, #020626) !important;
    color: var(--greyscale-900, #020626) !important;
    text-shadow:none !important;
}

.driver-popover-next-btn {
    font-family: 'Poppins' !important;
    font-size: 16px !important;
    background: #2d43fb !important;
    border-color: #2d43fb !important;
    color: var(--others-white, #FFF) !important;
    text-shadow: none !important;
}

.driver-popover-close-btn {
    font-family: 'Poppins' !important;
    font-size: 16px !important;
    color: #2d43fb !important;
    text-shadow: none !important;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.notyf__toast_long {
    width: 600px !important;
    height: 150px !important;
}