body {
    font-family: "Jost";
}

a {
    color: #5140C0;
    text-decoration: none;
    font-family: "Jost";
}

    a:hover {
        color: #6f42c1;
        text-decoration: none;
        font-family: "Jost";
    }

.nav-link {
    padding-top:10px;
}
.text-align-l {
    text-align: left;
}

.container-menu {
    display: flex;
    justify-content: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Jost", sans-serif;
}

.pointer-Click {
    cursor: pointer;
}

.color-circle-left {
    color: #2a36c0;
}

.content-link {
    font-size: 16px;
}

.g-nav-link {
    color: #0366d6;
    font-weight: 500;
}

    .g-nav-link:hover {
        color: #721fdf;
    }
/*---------------------new-version---------------------*/
.new-version-toast {
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.new-version-toast-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.new-version-toast-body {
    padding: 2px 16px
}

    .new-version-toast-body label {
        display: inline-block;
        margin-bottom: 20px;
        margin-top: 20px;
    }

.new-version-toast-header {
    padding: 2px 16px;
    background-color: #3051a2;
    color: white;
}

.btn-learn-update {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    background: #b27ae2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 2px solid #b27ae2;
}

@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

/*---------------END------new-version---------------------*/


.fixed-top-menu {
    position: fixed;
    top: 0;
    width: calc(100% - 70px);
    z-index: 1030;
    margin-left: -5px;
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow: hidden;
    background: #37517e;
}

    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #37517e;
        border-top-color: #fff;
        border-bottom-color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        -webkit-animation: animate-preloader 1s linear infinite;
        animation: animate-preloader 1s linear infinite;
    }

@-webkit-keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #47b2e4;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    transition: all 0.4s;
}

    .back-to-top i {
        font-size: 24px;
        color: #fff;
        line-height: 0;
    }

    .back-to-top:hover {
        background: #6bc1e9;
        color: #fff;
    }

    .back-to-top.active {
        visibility: visible;
        opacity: 1;
    }



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
    padding: 0;
}

    .navbar ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navbar li {
        position: relative;
    }

    .navbar a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /*  padding: 10px 0 10px 30px;*/
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        white-space: nowrap;
        transition: 0.3s;
    }

        .navbar a:not([href]):not([tabindex]) {
            display: flex;
            align-items: center;
            justify-content: space-between;
            /*  padding: 10px 0 10px 30px;*/
            font-size: 15px;
            font-weight: 500;
            color: #000000;
            white-space: nowrap;
            transition: 0.3s;
            cursor: pointer;
        }

.navbar-mob a {
    color: #37517e;
}

    .navbar-mob a:not([href]):not([tabindex]) {
        color: #37517e;
    }


.navbar a i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar li:hover > a {
    background: #ebe8ff;
    text-decoration: none;
    border-radius: 50px;
}

.navbar .getstarted {
    padding: 8px 20px;
    /*font-family: "Raleway", sans-serif;*/
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    transition: 0.5s;
    line-height: 1;
    margin: 10px;
    color: #fff;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    /* border: 2px solid #5140C0;*/
}

.getstarted {
/*    font-family: "Raleway", sans-serif;*/
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    transition: 0.5s;
    line-height: 1;
    margin: 10px;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

    .getstarted:hover {
        color: #5140C0;
    }

.navbar .getstarted:hover {
    background: #ebe8ff;
    color: #fff;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

    .navbar .dropdown ul li {
        min-width: 200px;
    }

    .navbar .dropdown ul a {
        padding: 10px 20px;
        font-size: 14px;
        text-transform: none;
        font-weight: 500;
        color: #0c3c53;
    }

        .navbar .dropdown ul a i {
            font-size: 12px;
        }

        .navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
            background: #5140C0;
            text-decoration: none;
        }


.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}

@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
    color: #5140C0;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

    .mobile-nav-toggle.bi-x {
        color: #fff;
    }

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(40, 58, 90, 0.9);
    transition: 0.3s;
    z-index: 999;
}

    .navbar-mobile .mobile-nav-toggle {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .navbar-mobile ul {
        display: block;
        position: absolute;
        top: 55px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        padding: 10px 0;
        border-radius: 10px;
        background-color: #fff;
        overflow-y: auto;
        transition: 0.3s;
    }

    .navbar-mobile a {
        padding: 10px 20px;
        font-size: 15px;
        color: #37517e;
    }

        .navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
            color: #fff;
        }

    .navbar-mobile .getstarted {
        margin: 15px;
        color: #37517e;
    }

    .navbar-mobile .dropdown ul {
        position: static;
        display: none;
        margin: 10px 20px;
        padding: 10px 0;
        z-index: 99;
        opacity: 1;
        visibility: visible;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    }

        .navbar-mobile .dropdown ul li {
            min-width: 200px;
        }

        .navbar-mobile .dropdown ul a {
            padding: 10px 20px;
        }

            .navbar-mobile .dropdown ul a i {
                font-size: 12px;
            }

            .navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
                color: #47b2e4;
            }

    .navbar-mobile .dropdown > .dropdown-active {
        display: block;
    } 
/*--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Hero-auth Section
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

#hero {
    width: 100%;
    overflow: hidden;
    position: relative;
   /* background: linear-gradient(0deg, #5140C0 0%, #5140C0 100%);*/
   background:none;
}

    #hero .carousel-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        position: relative;
        height: 70vh;
        padding-top: 60px;
    }

    #hero h2 {
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 160%;
        /* or 32px */

        text-align: center;
        /* White */

        color: #000;
    }

    #hero h4 {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #000;
        padding-top: 10px;
    }

    #hero h5 {
        font-family: Jost;
        font-style: normal;
        font-size: 16px;
        color: #212529;
    }

    #hero .heroimg {
        width: 100%;
    }

    #hero p {
        width: 100%;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }

    #hero .carousel-control-prev, #hero .carousel-control-next {
        width: 10%;
    }

    #hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
        background: none;
        font-size: 48px;
        line-height: 1;
        width: auto;
        height: auto;
    }

    #hero .btn-get-started {
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 32px;
        border-radius: 50px;
        transition: 0.5s;
        line-height: 1;
        margin: 10px;
        color: #fff;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
        border: 2px solid #5140C0;
    }

        #hero .btn-get-started:hover {
            background: #5140C0;
            color: #fff;
            text-decoration: none;
        }

    #hero .div-Hero-inf {
        padding-top: 20px;
    }

    #hero .div-Hero-inf2 {
        padding-top: 10px;
    }

    #hero .hero-img-fluid {
        padding-top: 100px;
        transform: scale(1.1,1.1);
    }


@media (min-width: 1024px) {
    #hero p {
    }

    #hero .carousel-control-prev, #hero .carousel-control-next {
        width: 5%;
    }
}

@media (max-width: 992px) {




    #hero .heroimg {
        width: 80%;
    }
}

@media (max-width: 768px) {
    #hero .carousel-container {
        height: 90vh;
    }

    #hero h2 {
        font-size: 20px;
    }

    #hero .heroimg {
        width: 80%;
    }
}

#hero .versionNavAuth {
}

    #hero .versionNavAuth span {
        font-size: 14px;
        color: #5555ab;
    }

@media (max-width: 561px) {
    #hero .div-Hero-inf {
        padding-top: 40px;
    }
}

@media (min-width: 561px) {
    #hero {
        height: 100vh;
    }

        #hero .div-Hero-inf {
            padding-top: 84px;
        }

        #hero h2 {
            font-size: 40px;
        }

        #hero h4 {
            font-size: 24px;
        }

    .hero-img {
        display: none;
    }
}

.hero-img {
    width: 100%;
    height: 100vh;
    display: flex;
    position: absolute;
    top: 200px;
}



.hero-waves {
    display: block;
    width: 100%;
    height: 60px;
    position: relative;
}

.wave1 use {
    -webkit-animation: move-forever1 10s linear infinite;
    animation: move-forever1 10s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

.wave2 use {
    -webkit-animation: move-forever2 8s linear infinite;
    animation: move-forever2 8s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

.wave3 use {
    -webkit-animation: move-forever3 6s linear infinite;
    animation: move-forever3 6s linear infinite;
    -webkit-animation-delay: -2s;
    animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px, 0%);
    }

    100% {
        transform: translate(-90px, 0%);
    }
}

@-webkit-keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@-webkit-keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}

.btn-learn-more-Reg {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #3051a2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    width: 100%;
    height: 40px;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 10px 0 30px 0;
    overflow: hidden;
}

.section-bg {
 
}


.section-title {
    padding-bottom: 40px;
}

    .section-title h2 {
        font-size: 14px;
        font-weight: 500;
        padding: 0;
        line-height: 1px;
        margin: 0 0 5px 0;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #4e555b;
        font-family: "Poppins", sans-serif;
    }

        .section-title h2::after {
            content: "";
            width: 120px;
            height: 1px;
            display: inline-block;
            background: #5140C0;
            margin: 4px 10px;
        }

    .section-title p {
        margin: 0;
        margin: 0;
        font-size: 36px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: "Poppins", sans-serif;
        color: #2a2c39;
    }

/*--------------------------------------------------------------
# Cliens
--------------------------------------------------------------*/
.cliens {
    padding: 12px 0;
    text-align: center;
}

    .cliens img {
        max-width: 45%;
        transition: all 0.4s ease-in-out;
        display: inline-block;
        padding: 15px 0;
        filter: grayscale(100);
    }

        .cliens img:hover {
            filter: none;
            transform: scale(1.1);
        }

@media (max-width: 768px) {
    .cliens img {
        max-width: 40%;
    }
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
    font-weight: 600;
    font-size: 26px;
}

.about .content ul {
    list-style: none;
    padding: 0;
}

    .about .content ul li {
        padding-left: 28px;
        position: relative;
    }

        .about .content ul li + li {
            margin-top: 10px;
        }

    .about .content ul i {
        position: absolute;
        left: 0;
        top: 2px;
        font-size: 20px;
        color: #47b2e4;
        line-height: 1;
    }

.about .content p:last-child {
    margin-bottom: 0;
}

.about .content .btn-learn-more {
    margin: 20px auto 30px auto;
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    /* identical to box height, or 171% */
    background: #3051a2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    width: 250px;
    height: 40px;
}

    .about .content .btn-learn-more:hover {
        background: #5140C0;
        color: #fff;
        text-decoration: none;
    }

@media (max-width: 992px) {
    .about .content .btn-learn-more {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us .content {
    padding: 60px 100px 0 100px;
}

    .why-us .content h3 {
        font-weight: 400;
        font-size: 34px;
        color: #37517e;
    }

    .why-us .content h4 {
        font-size: 20px;
        font-weight: 700;
        margin-top: 5px;
    }

    .why-us .content p {
        font-size: 15px;
        color: #848484;
    }

.why-us .img {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.why-us .accordion-list {
    padding: 0 100px 60px 100px;
}

    .why-us .accordion-list ul {
        padding: 0;
        list-style: none;
    }

    .why-us .accordion-list li + li {
        margin-top: 15px;
    }

    .why-us .accordion-list li {
        padding: 20px;
        background: #fff;
        border-radius: 4px;
    }

    .why-us .accordion-list a {
        display: block;
        position: relative;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        padding-right: 30px;
        outline: none;
        cursor: pointer;
    }

    .why-us .accordion-list span {
        color: #47b2e4;
        font-weight: 600;
        font-size: 18px;
        padding-right: 10px;
    }

    .why-us .accordion-list i {
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .why-us .accordion-list p {
        margin-bottom: 0;
        padding: 10px 0 0 0;
    }

    .why-us .accordion-list .icon-show {
        display: none;
    }

    .why-us .accordion-list a.collapsed {
        color: #343a40;
    }

        .why-us .accordion-list a.collapsed:hover {
            color: #47b2e4;
        }

        .why-us .accordion-list a.collapsed .icon-show {
            display: inline-block;
        }

        .why-us .accordion-list a.collapsed .icon-close {
            display: none;
        }

@media (max-width: 1024px) {
    .why-us .content, .why-us .accordion-list {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 992px) {
    .why-us .img {
        min-height: 400px;
    }

    .why-us .content {
        padding-top: 30px;
    }

    .why-us .accordion-list {
        padding-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .why-us .img {
        min-height: 200px;
    }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .content h3 {
    font-weight: 700;
    font-size: 32px;
    color: #37517e;
    font-family: "Poppins", sans-serif;
}

.skills .content ul {
    list-style: none;
    padding: 0;
}

    .skills .content ul li {
        padding-bottom: 10px;
    }

    .skills .content ul i {
        font-size: 20px;
        padding-right: 4px;
        color: #47b2e4;
    }

.skills .content p:last-child {
    margin-bottom: 0;
}

.skills .progress {
    height: 60px;
    display: block;
    background: none;
    border-radius: 0;
}

    .skills .progress .skill {
        padding: 0;
        margin: 0 0 6px 0;
        text-transform: uppercase;
        display: block;
        font-weight: 600;
        font-family: "Poppins", sans-serif;
        color: #37517e;
    }

        .skills .progress .skill .val {
            float: right;
            font-style: normal;
        }

.skills .progress-bar-wrap {
    background: #e8edf5;
    height: 10px;
}

.skills .progress-bar {
    width: 1px;
    height: 10px;
    transition: .9s;
    background-color: #4668a2;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
    box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
    padding: 50px 30px;
    transition: all ease-in-out 0.4s;
    background: #fff;
}

    .services .icon-box .icon {
        margin-bottom: 10px;
    }

        .services .icon-box .icon i {
            color: #47b2e4;
            font-size: 36px;
            transition: 0.3s;
        }

    .services .icon-box h4 {
        font-weight: 500;
        margin-bottom: 15px;
        font-size: 24px;
    }

        .services .icon-box h4 a {
            color: #37517e;
            transition: ease-in-out 0.3s;
        }

    .services .icon-box p {
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
    }

    .services .icon-box:hover {
        transform: translateY(-10px);
    }

        .services .icon-box:hover h4 a {
            color: #47b2e4;
        }

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
    background: linear-gradient(rgba(40, 58, 90, 0.9), rgba(40, 58, 90, 0.9)), url("../img/cta-bg.jpg") fixed center center;
    background-size: cover;
    padding: 120px 0;
}

    .cta h3 {
        color: #fff;
        font-size: 28px;
        font-weight: 700;
    }

    .cta p {
        color: #fff;
    }

    .cta .cta-btn {
        font-family: "Jost", sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 40px;
        border-radius: 50px;
        transition: 0.5s;
        margin: 10px;
        border: 2px solid #fff;
        color: #fff;
    }

        .cta .cta-btn:hover {
            background: #47b2e4;
            border: 2px solid #47b2e4;
        }

@media (max-width: 1024px) {
    .cta {
        background-attachment: scroll;
    }
}

@media (min-width: 769px) {
    .cta .cta-btn-container {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
    list-style: none;
    margin-bottom: 20px;
}

    .portfolio #portfolio-flters li {
        cursor: pointer;
        display: inline-block;
        margin: 10px 5px;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        color: #444444;
        transition: all 0.3s;
        padding: 8px 20px;
        border-radius: 50px;
        font-family: "Poppins", sans-serif;
    }

        .portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
            background: #47b2e4;
            color: #fff;
        }

.portfolio .portfolio-item {
    margin-bottom: 30px;
}

    .portfolio .portfolio-item .portfolio-img {
        overflow: hidden;
    }

        .portfolio .portfolio-item .portfolio-img img {
            transition: all 0.6s;
        }

    .portfolio .portfolio-item .portfolio-info {
        opacity: 0;
        position: absolute;
        left: 15px;
        bottom: 0;
        z-index: 3;
        right: 15px;
        transition: all 0.3s;
        background: rgba(55, 81, 126, 0.8);
        padding: 10px 15px;
    }

        .portfolio .portfolio-item .portfolio-info h4 {
            font-size: 18px;
            color: #fff;
            font-weight: 600;
            color: #fff;
            margin-bottom: 0px;
        }

        .portfolio .portfolio-item .portfolio-info p {
            color: #f9fcfe;
            font-size: 14px;
            margin-bottom: 0;
        }

        .portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link {
            position: absolute;
            right: 40px;
            font-size: 24px;
            top: calc(50% - 18px);
            color: #fff;
            transition: 0.3s;
        }

            .portfolio .portfolio-item .portfolio-info .preview-link:hover, .portfolio .portfolio-item .portfolio-info .details-link:hover {
                color: #47b2e4;
            }

        .portfolio .portfolio-item .portfolio-info .details-link {
            right: 10px;
        }

    .portfolio .portfolio-item:hover .portfolio-img img {
        transform: scale(1.15);
    }

    .portfolio .portfolio-item:hover .portfolio-info {
        opacity: 1;
    }

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
    padding-top: 40px;
}

    .portfolio-details .portfolio-details-slider img {
        width: 100%;
    }

    .portfolio-details .portfolio-details-slider .swiper-pagination {
        margin-top: 20px;
        position: relative;
    }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background-color: #fff;
            opacity: 1;
            border: 1px solid #47b2e4;
        }

        .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
            background-color: #47b2e4;
        }

    .portfolio-details .portfolio-info {
        padding: 30px;
        box-shadow: 0px 0 30px rgba(55, 81, 126, 0.08);
    }

        .portfolio-details .portfolio-info h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .portfolio-details .portfolio-info ul {
            list-style: none;
            padding: 0;
            font-size: 15px;
        }

            .portfolio-details .portfolio-info ul li + li {
                margin-top: 10px;
            }

    .portfolio-details .portfolio-description {
        padding-top: 30px;
    }

        .portfolio-details .portfolio-description h2 {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .portfolio-details .portfolio-description p {
            padding: 0;
        }


/*--------------------------------------------------------------
# Agreement
--------------------------------------------------------------*/
.agreement {
}

    .agreement .div-bg {
        background: #fff;
        border-radius: 16px;
    }

    .agreement .member {
        position: relative;
        transition: 0.5s;
    }

    .agreement .memberline {
        background-image: linear-gradient( -180deg, #cccccc, #ffffff 80%);
        height: 0px;
        width: 100%;
    }



    .agreement .member:hover {
        transform: translateY(-5px);
    }

    .agreement .member .member-info {
        padding: 30px;
        width: 100%;
    }

    .agreement .member h4 {
        font-weight: 700;
        margin-bottom: 5px;
        font-size: 20px;
        color: #37517e;
        padding-top: 20px;
    }

.agreement {
    padding: 0px 0 10px 0;
}



    .agreement .member p {
        margin: 10px 0 0 0;
        font-size: 14px;
    }

    .agreement .member-info .btn-agr-more {
        margin: 20px auto 30px auto;
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 24px;
        /* identical to box height, or 171% */
        background: #3051a2;
        border-radius: 12px;
        text-align: center;
        color: #FFFFFF;
        width: 250px;
        height: 40px;
    }

        .agreement .member-info .btn-agr-more:hover {
            background: #5140C0;
            color: #fff;
            text-decoration: none;
        }

@media (max-width: 992px) {
    .agreement .member-info .btn-agr-more {
        width: 100%;
    }
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
    position: relative;
    transition: 0.5s;
}

.team .memberline {
    background-image: linear-gradient( -180deg, #cccccc, #ffffff 80%);
    height: 0px;
    width: 100%;
}

.team .member .pic {
    overflow: hidden;
    width: 180px;
    border-radius: 50%;
}

    .team .member .pic img {
        transition: ease-in-out 0.3s;
    }

.team .member:hover {
    transform: translateY(-5px);
}

.team .member .member-info {
    padding-left: 30px;
    width: 250px;
}

.team .member h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
    color: #37517e;
    padding-top: 20px;
}

.team-bg {
    padding: 0px 0 10px 0;
}

.catspan span {
    display: block;
    font-size: 15px;
    padding-bottom: 10px;
    position: relative;
    font-weight: 500;
}

    .catspan span::after {
        content: '';
        position: absolute;
        display: block;
        width: 50px;
        height: 1px;
        background: #cbd6e9;
        bottom: 0;
        left: 0;
    }

.team .member p {
    margin: 10px 0 0 0;
    font-size: 14px;
}

.team .member .social {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

    .team .member .social a {
        transition: ease-in-out 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        width: 32px;
        height: 32px;
        background: #eff2f8;
    }

        .team .member .social a i {
            color: #37517e;
            font-size: 16px;
            margin: 0 2px;
        }

        .team .member .social a:hover {
            background: #47b2e4;
        }

            .team .member .social a:hover i {
                color: #fff;
            }

        .team .member .social a + a {
            margin-left: 8px;
        }

.team .member-panel {
    position: relative;
    box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
    padding: 30px;
    padding-top: 30px;
    border-radius: 10px;
    background: #fff;
    transition: 0.5s;
    
}
    .team .member-panel .box-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .row {
    padding-top: 40px;
}

.pricing .box {
    padding: 60px 40px;
    box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
    background: #fff;
    height: 100%;
    border-top: 4px solid #fff;
    border-radius: 5px;
}

.pricing h3 {
    font-weight: 500;
    margin-bottom: 15px;
    font-size: 20px;
    color: #37517e;
}

.pricing h4 {
    font-size: 48px;
    color: #37517e;
    font-weight: 400;
    font-family: "Jost", sans-serif;
    margin-bottom: 25px;
}

    .pricing h4 sup {
        font-size: 28px;
    }

    .pricing h4 span {
        color: #47b2e4;
        font-size: 18px;
        display: block;
    }

.pricing ul {
    padding: 20px 0;
    list-style: none;
    color: #999;
    text-align: left;
    line-height: 20px;
}

    .pricing ul li {
        padding: 10px 0 10px 30px;
        position: relative;
    }

    .pricing ul i {
        color: #28a745;
        font-size: 24px;
        position: absolute;
        left: 0;
        top: 6px;
    }

    .pricing ul .na {
        color: #ccc;
    }

        .pricing ul .na i {
            color: #ccc;
        }

        .pricing ul .na span {
            text-decoration: line-through;
        }

.pricing .buy-btn {
    display: inline-block;
    padding: 12px 35px;
    border-radius: 50px;
    color: #47b2e4;
    transition: none;
    font-size: 16px;
    font-weight: 500;
    font-family: "Jost", sans-serif;
    transition: 0.3s;
    border: 1px solid #47b2e4;
}

    .pricing .buy-btn:hover {
        background: #47b2e4;
        color: #fff;
    }

.pricing .featured {
    border-top-color: #47b2e4;
}

    .pricing .featured .buy-btn {
        background: #47b2e4;
        color: #fff;
    }

        .pricing .featured .buy-btn:hover {
            background: #23a3df;
        }

@media (max-width: 992px) {
    .pricing .box {
        max-width: 60%;
        margin: 0 auto 30px auto;
    }
}

@media (max-width: 767px) {
    .pricing .box {
        max-width: 80%;
        margin: 0 auto 30px auto;
    }
}

@media (max-width: 420px) {
    .pricing .box {
        max-width: 100%;
        margin: 0 auto 30px auto;
    }
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-list {
    padding: 0 100px;
}

    .faq .faq-list ul {
        padding: 0;
        list-style: none;
    }

    .faq .faq-list li + li {
        margin-top: 15px;
    }

    .faq .faq-list li {
        padding: 20px;
        background: #fff;
        border-radius: 4px;
        position: relative;
    }

    .faq .faq-list a {
        display: block;
        position: relative;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 500;
        padding: 0 30px;
        outline: none;
        cursor: pointer;
    }

    .faq .faq-list .icon-help {
        font-size: 24px;
        position: absolute;
        right: 0;
        left: 20px;
        color: #47b2e4;
    }

    .faq .faq-list .icon-show, .faq .faq-list .icon-close {
        font-size: 24px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .faq .faq-list p {
        margin-bottom: 0;
        padding: 10px 0 0 0;
    }

    .faq .faq-list .icon-show {
        display: none;
    }

    .faq .faq-list a.collapsed {
        color: #37517e;
        transition: 0.3s;
    }

        .faq .faq-list a.collapsed:hover {
            color: #47b2e4;
        }

        .faq .faq-list a.collapsed .icon-show {
            display: inline-block;
        }

        .faq .faq-list a.collapsed .icon-close {
            display: none;
        }

@media (max-width: 1200px) {
    .faq .faq-list {
        padding: 0;
    }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
    border-top: 3px solid #47b2e4;
    border-bottom: 3px solid #47b2e4;
    padding: 30px;
    background: #fff;
    width: 100%;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
}

    .contact .info i {
        font-size: 20px;
        color: #47b2e4;
        float: left;
        width: 44px;
        height: 44px;
        background: #e7f5fb;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
    }

    .contact .info h4 {
        padding: 0 0 0 60px;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #37517e;
    }

    .contact .info p {
        padding: 0 0 10px 60px;
        margin-bottom: 20px;
        font-size: 14px;
        color: #6182ba;
    }

    .contact .info .email p {
        padding-top: 5px;
    }

    .contact .info .social-links {
        padding-left: 60px;
    }

        .contact .info .social-links a {
            font-size: 18px;
            display: inline-block;
            background: #333;
            color: #fff;
            line-height: 1;
            padding: 8px 0;
            border-radius: 50%;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;
            margin-right: 10px;
        }

            .contact .info .social-links a:hover {
                background: #47b2e4;
                color: #fff;
            }

    .contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i {
        background: #47b2e4;
        color: #fff;
    }

.contact .php-email-form {
    width: 100%;
    border-top: 3px solid #47b2e4;
    border-bottom: 3px solid #47b2e4;
    padding: 30px;
    background: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

    .contact .php-email-form .form-group {
        padding-bottom: 8px;
    }

    .contact .php-email-form .validate {
        display: none;
        color: red;
        margin: 0 0 15px 0;
        font-weight: 400;
        font-size: 13px;
    }

    .contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }

        .contact .php-email-form .error-message br + br {
            margin-top: 25px;
        }

    .contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    .contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }

        .contact .php-email-form .loading:before {
            content: "";
            display: inline-block;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            margin: 0 10px -6px 0;
            border: 3px solid #18d26e;
            border-top-color: #eee;
            -webkit-animation: animate-loading 1s linear infinite;
            animation: animate-loading 1s linear infinite;
        }

    .contact .php-email-form .form-group {
        margin-bottom: 20px;
    }

    .contact .php-email-form label {
        padding-bottom: 8px;
    }

    .contact .php-email-form input, .contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
        border-radius: 4px;
    }

        .contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
            border-color: #47b2e4;
        }

    .contact .php-email-form input {
        height: 44px;
    }

    .contact .php-email-form textarea {
        padding: 10px 12px;
    }

    .contact .php-email-form button[type="submit"] {
        background: #47b2e4;
        border: 0;
        padding: 12px 34px;
        color: #fff;
        transition: 0.4s;
        border-radius: 50px;
    }

        .contact .php-email-form button[type="submit"]:hover {
            background: #209dd8;
        }

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    padding: 15px 0;
    min-height: 40px;
    margin-top: 22px;
}

@media (max-width: 992px) {
    .breadcrumbs {
        margin-top: 18px;
    }
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 600;
    color: #37517e;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 14px;
}

    .breadcrumbs ol li + li {
        padding-left: 10px;
    }

        .breadcrumbs ol li + li::before {
            display: inline-block;
            padding-right: 10px;
            color: #4668a2;
            content: "/";
        }

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer {
    background: #5140C0;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
}

    #footer .footer-newsletter {
        padding: 50px 0;
        background: #f3f5fa;
        text-align: center;
        font-size: 15px;
        color: #444444;
    }

        #footer .footer-newsletter h4 {
            font-size: 24px;
            margin: 0 0 20px 0;
            padding: 0;
            line-height: 1;
            font-weight: 600;
            color: #37517e;
        }

        #footer .footer-newsletter form {
            margin-top: 30px;
            background: #fff;
            padding: 6px 10px;
            position: relative;
            border-radius: 50px;
            box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
            text-align: left;
        }

            #footer .footer-newsletter form input[type="email"] {
                border: 0;
                padding: 4px 8px;
                width: calc(100% - 100px);
            }

            #footer .footer-newsletter form input[type="submit"] {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                border: 0;
                background: none;
                font-size: 16px;
                padding: 0 20px;
                background: #47b2e4;
                color: #fff;
                transition: 0.3s;
                border-radius: 50px;
                box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
            }

                #footer .footer-newsletter form input[type="submit"]:hover {
                    background: #209dd8;
                }

    #footer .footer-top {
        padding: 60px 0 30px 0;
        background: #fff;
    }

        #footer .footer-top .footer-contact {
            margin-bottom: 30px;
        }

            #footer .footer-top .footer-contact h3 {
                font-size: 28px;
                margin: 0 0 10px 0;
                padding: 2px 0 2px 0;
                line-height: 1;
                text-transform: uppercase;
                font-weight: 600;
                color: #37517e;
            }

            #footer .footer-top .footer-contact p {
                font-size: 14px;
                line-height: 24px;
                margin-bottom: 0;
                font-family: "Jost", sans-serif;
                color: #5e5e5e;
            }

        #footer .footer-top h4 {
            font-size: 16px;
            font-weight: bold;
            color: #37517e;
            position: relative;
            padding-bottom: 12px;
        }

        #footer .footer-top .footer-links {
            margin-bottom: 30px;
        }

            #footer .footer-top .footer-links ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

                #footer .footer-top .footer-links ul i {
                    padding-right: 2px;
                    color: #47b2e4;
                    font-size: 18px;
                    line-height: 1;
                }

                #footer .footer-top .footer-links ul li {
                    padding: 10px 0;
                    display: flex;
                    align-items: center;
                }

                    #footer .footer-top .footer-links ul li:first-child {
                        padding-top: 0;
                    }

                #footer .footer-top .footer-links ul a {
                    color: #777777;
                    transition: 0.3s;
                    display: inline-block;
                    line-height: 1;
                }

                    #footer .footer-top .footer-links ul a:hover {
                        text-decoration: none;
                        color: #47b2e4;
                    }

        #footer .footer-top .social-links a {
            font-size: 18px;
            display: inline-block;
            background: #47b2e4;
            color: #fff;
            line-height: 1;
            padding: 8px 0;
            margin-right: 4px;
            border-radius: 50%;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;
        }

            #footer .footer-top .social-links a:hover {
                background: #209dd8;
                color: #fff;
                text-decoration: none;
            }

    #footer .footer-bottom {
        color: #fff;
    }

    #footer .copyright {
        float: left;
    }

    #footer .credits {
        float: right;
        font-size: 13px;
    }

        #footer .credits a {
            transition: 0.3s;
        }

@media (max-width: 768px) {
    #footer .footer-bottom {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #footer .copyright, #footer .credits {
        text-align: center;
        float: none;
    }

    #footer .credits {
        padding-top: 4px;
    }
}




.get-started-btn-Lang {
    color: #37517e;
    border-radius: 50px;
    padding: 6px 25px 7px 25px;
    white-space: nowrap;
    transition: 0.3s;
    font-size: 16px;
    display: inline-block;
    border: 2px solid #47b2e4;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}

    .get-started-btn-Lang:hover {
        background: #4d5fe1ad;
        color: #fff;
    }

.Lang-img {
    border-radius: 50%;
    width: 28px;
    height: 28px;
    border-color: #fff;
    border-width: 1px;
    cursor: pointer;
}

.Lang-code {
    width: 40px;
    height: 40px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%;
    border: solid 1px;
    border-color: #5140C0;
}

    .Lang-code h4 {
        text-align: center;
        font-size: 18px;
        color: #05166d;
    }

.Lang-code2 {
    width: 40px;
    height: 40px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 50%;
    border: solid 1px;
    border-color: #ebebeb;
}

    .Lang-code2 h4 {
        text-align: center;
        font-size: 18px;
        color: #05166d;
    }

@media (max-width: 768px) {
    .get-started-btn-Lang {
        margin: 0 48px 0 0;
        padding: 6px 20px 7px 20px;
    }
}

.text-pand {
    padding-left: 10px;
}




.Lang-div-Top {
    padding-top: 10px;
}

}

@media (max-width: 430px) {
    .Lang-div-Top {
        padding-top: 10px;
    }
}

@media (max-width: 370px) {
    .Lang-div-Top {
        margin-left: 0px;
        padding-top: 10px;
    }
}

.e-input-group.e-control-wrapper.formcontrol {
    padding: .175rem .75rem;
    font-size: 1rem;
}

.e-float-input:not(.e-input-group) input, .e-float-input.e-control-wrapper:not(.e-input-group) input {
    box-sizing: border-box;
    height: 40px;
}



.section-title-Top {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
}

    .section-title-Top h2 {
        font-size: 18px;
        font-weight: 500;
        padding: 0;
        line-height: 1px;
        margin: 0 0 5px 0;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #4e555b;
        font-family: "Poppins", sans-serif;
    }



        .section-title-Top h2::after {
            content: "";
            width: 120px;
            height: 1px;
            display: inline-block;
            background: #fd9042;
            margin: 4px 10px;
        }

    .section-title-Top p {
        margin: 0;
        margin: 0;
        font-size: 36px;
        font-weight: 700;
        text-transform: uppercase;
        font-family: "Poppins", sans-serif;
        color: #2a2c39;
    }

.pad-bot20 {
    padding-bottom: 20px;
}

.mebClick {
    cursor: pointer;
}

.div-member-inf-content {
    position: relative;
    box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
    padding: 30px;
    padding-top: 30px;
    border-radius: 5px;
    background: #fff;
    transition: 0.5s;
    /* min-height: 300px; */
    border-radius: 16px;
}

.btn-learn-more-les {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    border-radius: 5px;
    transition: 0.3s;
    line-height: 1;
    color: #7431c9;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    margin-top: 6px;
    border: 2px solid #3051a2;
    height: 40px;
}

    .btn-learn-more-les:hover {
        background: #5140C0;
        color: #fff;
        text-decoration: none;
    }

.btn-learn-more {
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    border-radius: 5px;
    transition: 0.3s;
    line-height: 1;
    color: #fff;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    margin-top: 6px;
    border: 2px solid #3051a2;
}

    .btn-learn-more:hover {
        background: #5140C0;
        color: #fff;
        text-decoration: none;
    }


.btn-learn-more-support {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #3051a2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    height: 40px;
    border: 2px solid #3051a2;
}

    .btn-learn-more-support:hover {
        background: #5b317d;
        color: #fff;
        text-decoration: none;
    }



.div_question {
    text-align: center;
}

    .div_question .ul_question li {
        display: inline;
    }

.ul_question span {
    font-size: 10px;
    padding-right: 5px;
}

.questions_completed {
    min-width: 300px;
    text-align: center;
}



.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
    width: 500px;
    border: 1px solid #bdc4c7;
    min-height: 70px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .inputGroup {
        width: 100%;
    }
}


.inputGroup label {
    padding: 12px 60px 0px 10px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3c454c;
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-transition: color 600ms ease-in;
    transition: color 600ms ease-in;
    overflow: hidden;
    margin-bottom: .0rem;
    min-height: 70px;
    border-radius: 10px;
}

    .inputGroup label:before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        content: "";
        background-color: #e9eeff;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
        transform: translate(-50%, -50%) scale3d(1, 1, 1);
        -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        z-index: -1;
    }

    .inputGroup label:after {
        width: 32px;
        height: 32px;
        content: "";
        border: 2px solid #d1d7dc;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
        background-repeat: no-repeat;
        background-position: 2px 3px;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        cursor: pointer;
        -webkit-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }

.inputGroup input:checked ~ label {
    color: #200a71;
}

    .inputGroup input:checked ~ label:before {
        -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
        transform: translate(-50%, -50%) scale3d(56, 56, 1);
        opacity: 1;
    }

    .inputGroup input:checked ~ label:after {
        background-color: #6144ff;
    }

.inputGroup input {
    width: 32px;
    height: 32px;
    -webkit-box-ordinal-group: 2;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}


/*itemGroup checkBox*/



.inputGroup-ch {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
    width: 500px;
    border: 1px solid #bdc4c7;
    min-height: 70px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .inputGroup-ch {
        width: 100%;
    }
}


.inputGroup-ch label {
    padding: 12px 60px 0px 10px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3c454c;
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-transition: color 600ms ease-in;
    transition: color 600ms ease-in;
    overflow: hidden;
    margin-bottom: .0rem;
    min-height: 70px;
    border-radius: 10px;
}

    .inputGroup-ch label:before {
        width: 10px;
        height: 10px;
        border-radius: 0%;
        content: "";
        background-color: #e9eeff;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
        transform: translate(-50%, -50%) scale3d(1, 1, 1);
        -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        z-index: -1;
    }

    .inputGroup-ch label:after {
        width: 32px;
        height: 32px;
        content: "";
        border: 2px solid #d1d7dc;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
        background-repeat: no-repeat;
        background-position: 2px 3px;
        border-radius: 0%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        cursor: pointer;
        -webkit-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }

.inputGroup-ch input:checked ~ label {
    color: #200a71;
}

    .inputGroup-ch input:checked ~ label:before {
        -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
        transform: translate(-50%, -50%) scale3d(56, 56, 1);
        opacity: 1;
    }

    .inputGroup-ch input:checked ~ label:after {
        background-color: #6144ff;
    }

.inputGroup-ch input {
    width: 32px;
    height: 32px;
    -webkit-box-ordinal-group: 2;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}



/*end*/


.inputGroup2 {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
    width: 300px;
    border: 1px solid #47b2e4;
    min-height: 40px;
}

@media (max-width: 768px) {
    .inputGroup2 {
        width: 100%;
    }
}


.inputGroup2 label {
    padding: 12px 60px 0px 10px;
    width: 100%;
    display: block;
    text-align: left;
    position: relative;
    z-index: 2;
    -webkit-transition: color 600ms ease-in;
    transition: color 600ms ease-in;
    overflow: hidden;
    margin-bottom: .0rem;
    min-height: 40px;
}

.inputGroup2 .labActiv {
    color: #3c454c;
    cursor: pointer;
}

.inputGroup2 .labDisabled {
    color: #ccc;
}

.inputGroup2 label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";
    background-color: #327cad;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}

.inputGroup2 label:after {
    width: 32px;
    height: 32px;
    content: "";
    border: 2px solid #d1d7dc;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}

.inputGroup2 input:checked ~ label {
    color: #fff;
}

    .inputGroup2 input:checked ~ label:before {
        -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
        transform: translate(-50%, -50%) scale3d(56, 56, 1);
        opacity: 1;
    }

    .inputGroup2 input:checked ~ label:after {
        background-color: #2c5e8a;
    }

.inputGroup2 input {
    width: 32px;
    height: 32px;
    -webkit-box-ordinal-group: 2;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}

.containerframePDF {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* min-height: 1000px;*/
}
    .containerframePDF .div-panel {
        display: flex;
        padding: 5px 30px 5px 30px;
        background: #fff;
    }
        .containerframePDF .div-panel .box-panel {
            width: 100%;
            
        }
            .containerframePDF .div-panel .box-panel .box-zoom {
                float:left;
            }
            .containerframePDF .div-panel .box-panel .box-fullScren {
                float:right;
            }

.responsiveiframePDF {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

.containerframeVideo {
    position: relative;
    max-width: 600px;
/*    height: 450px;*/
}


/* xs (<=575px) */
/*@media (max-width: 575px) {
    .containerframeVideo {
        height: 320px;
    }
}*/

/* sm (>=576 è <=749) */
/*@media (min-width: 576px) and (max-width: 766px) {
    .containerframeVideo {
        height: 330px;
    }
}*/

/* md (>=767 è <=1000) */
/*@media (min-width: 767px) and (max-width: 1000px) {
    .containerframeVideo {
        height: 350px;
    }
}*/

/* md (>=1001 è <=1164) */
/*@media (min-width: 1001px) and (max-width: 1164px) {
    .iframe-existing-example {
        height: 380px;
    }
}*/

/* xl (>=1200) */
/*@media (min-width: 1200px) {
    .containerframeVideo {
        height: 500px;
    }
}

@media (min-width: 1700px) {

    .containerframeVideo {
        height: 550px;
    }
}*/



.responsiveiframeVideo {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}

#InfUser .user-seting {
    background: #fff;
    border-radius: 16px;
}

#InfUser .memberspan {
    display: block;
    font-size: 15px;
    padding-bottom: 10px;
    position: relative;
    font-weight: bold;
    color: #37517e;
    margin: 40px 0 15px 0;
}

    #InfUser .memberspan::after {
        content: '';
        position: absolute;
        display: block;
        width: 50px;
        height: 1px;
        background: #cbd6e9;
        bottom: 0;
        left: 0;
    }












.nav-link-locale {
    cursor: pointer;
}

.nav-link-locale-modal {
    cursor: pointer;
    padding-left: 5px;
}

 


.Error-danger {
    border-radius: 12px;
    border: 1px solid #ff0000;
}

    .Error-danger p {
        color: #ff0000;
        padding: 8px;
    }

.success-danger {
    border-radius: 12px;
    border: 1px solid #00cc5f;
}

.topnav-outer {
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 3px solid #f2f4f6;
}

.topnav {
    display: table;
    overflow: hidden;
    width: 100%;
}

    .topnav a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 0 14px 14px 14px;
        text-decoration: none;
        font-size: 17px;
        border-bottom: 3px solid transparent;
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        /* identical to box height, or 150% */
        /* Dark */
        width: 33%;
        height:50px;
        color: #5140C0;
    }

        .topnav a:hover {
            border-bottom: 3px solid #d4d4d4;
        }

        .topnav a.active {
            border-bottom: 3px solid #585858;
            color: #585858;
        }

.div-user-agreement {
    background: #F4F4F4;
    border-radius: 16px;
    margin: 10px 0 10px 0;
}

    .div-user-agreement p {
        padding: 20px;
    }

.div-Forgot {
    margin-top: 20px;
    margin-bottom: -20px;
}

    .div-Forgot h3 {
        /* Body-bold */

        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        /* identical to box height, or 150% */
        /* Black */

        color: #000000;
    }

    .div-Forgot p {
        /* Mobile_Body */

        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        /* Dark */

        color: #585858;
    }

.Remember-Forgot {
    display: table;
    overflow: hidden;
    width: 100%;
    margin: 0 0 20px 0;
}


    .Remember-Forgot .left_block {
        float: left;
        width: 50%;
        padding-left: 5px;
    }

    .Remember-Forgot .right_block {
        float: right;
        width: 50%;
    }

        .Remember-Forgot .right_block a {
            float: right;
            display: inline-flex;
            align-items: center;
            user-select: none;
            color: #3500BE;
            font-family: Jost;
            font-style: normal;
            font-weight: normal;
            font-size: 14px;
            line-height: 24px;
        }
/* äëÿ ýëåìåíòà input c type="checkbox" */
.custom-checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

    /* äëÿ ýëåìåíòà label, ñâÿçàííîãî ñ .custom-checkbox */
    .custom-checkbox + label {
        display: inline-flex;
        align-items: center;
        user-select: none;
        color: #000000;
        font-family: Jost;
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 24px;
    }

        /* ñîçäàíèå â label ïñåâäîýëåìåíòà before ñî ñëåäóþùèìè ñòèëÿìè */
        .custom-checkbox + label::before {
            content: '';
            display: inline-block;
            width: 1em;
            height: 1em;
            flex-shrink: 0;
            flex-grow: 0;
            border: 1px solid #adb5bd;
            border-radius: 0.25em;
            margin-right: 0.5em;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 50% 50%;
        }

    /* ñòèëè ïðè íàâåäåíèè êóðñîðà íà checkbox */
    .custom-checkbox:not(:disabled):not(:checked) + label:hover::before {
        border-color: #b3d7ff;
    }

    /* ñòèëè äëÿ àêòèâíîãî ÷åêáîêñà (ïðè íàæàòèè íà íåãî) */
    .custom-checkbox:not(:disabled):active + label::before {
        background-color: #b3d7ff;
        border-color: #b3d7ff;
    }

    /* ñòèëè äëÿ ÷åêáîêñà, íàõîäÿùåãîñÿ â ôîêóñå */
    .custom-checkbox:focus + label::before {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    /* ñòèëè äëÿ ÷åêáîêñà, íàõîäÿùåãîñÿ â ôîêóñå è íå íàõîäÿùåãîñÿ â ñîñòîÿíèè checked */
    .custom-checkbox:focus:not(:checked) + label::before {
        border-color: #80bdff;
    }

    /* ñòèëè äëÿ ÷åêáîêñà, íàõîäÿùåãîñÿ â ñîñòîÿíèè checked */
    .custom-checkbox:checked + label::before {
        border-color: #5140C0;
        background-color: #5140C0;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

.div-learn-more {
    display: flex;
    justify-content: center;
}

    .div-learn-more .form-learn-more {
        width: 100%;
    }



.sidebar-right {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    min-width: 72px;
    background: #3051a2;
    padding: 6px 14px;
    z-index: 99;
    transition: all 0.5s ease;
}

    .sidebar-right.open {
        width: 300px;
    }

    .sidebar-right .logo-details {
        height: 60px;
        display: flex;
        align-items: center;
        position: relative;
    }

        .sidebar-right .logo-details .icon {
            opacity: 0;
            transition: all 0.5s ease;
        }

        .sidebar-right .logo-details .logo_name {
            color: #fff;
            font-weight: 600;
            display: none;
            transition: all 0.5s ease;
            font-family: Jost;
            font-style: normal;
            font-weight: bold;
            font-size: 32px;
            line-height: 46px;
        }

    .sidebar-right.open .logo-details .icon,
    .sidebar-right.open .logo-details .logo_name {
        display: inline;
    }

    .sidebar-right .logo-details #btn {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 22px;
        transition: all 0.4s ease;
        font-size: 23px;
        text-align: center;
        cursor: pointer;
        transition: all 0.5s ease;
        color: #fff;
    }

    .sidebar-right.open .logo-details #btn {
        text-align: right;
        color: #fff;
    }

   

    .sidebar-right .nav-list {
        margin-top: 20px;
        height: 100%;
        margin-left: -45px;
        margin-right: -12px;
    }

        .sidebar-right .nav-list .listlink {
            padding: 5px 10px 0 20px;
          
        }

    .sidebar-right li {
        position: relative;
        margin: 0px 0;
        list-style: none;
        height: 56px;
    }

        .sidebar-right li .tooltip {
            position: absolute;
            top: -20px;
            left: calc(100% + 15px);
            z-index: 3;
            background: #fff;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 400;
            opacity: 0;
            white-space: nowrap;
            pointer-events: none;
            transition: 0s;
            color: #000000;
        }

        .sidebar-right li:hover .tooltip {
            opacity: 1;
            pointer-events: auto;
            transition: all 0.4s ease;
            top: 50%;
            transform: translateY(-50%);
        }

    .sidebar-right.open li .tooltip {
        display: none;
    }

 

  

    .sidebar-right li .btn-link-m {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        text-decoration: none;
        transition: all 0.4s ease;
        border-color: white;
        border-top: 1px solid #ffffff17;
       
    }

    .sidebar-right li links_name:hover {
        background: rgb(255, 255, 255,0.1);
        color: #fff;
    }

    .sidebar-right li .link-disabled {
        background: #ffffff2b;
        pointer-events: none;
        cursor: default;
        color: #f6f6f636;
    }
    .sidebar-right li .link-menu {
        color: #fff;
        cursor: pointer;
    }
        .sidebar-right li .link-menu:hover {
            color: #fff;
            cursor: pointer;
            background: #ffffff33;
        }
    .sidebar-right li .urgently-red {
        background: #ff5c5c;
        color: #fff;
        cursor: pointer;
    }
        .sidebar-right li .urgently-red:hover {
            background: #d45454;
            color: #ffff;
        }
    .sidebar-right li .links_name {
        
        white-space: nowrap;
        display: none;
        pointer-events: none;
        transition: 0.4s;
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 29px;
    }

    .sidebar-right.open li  .links_name {
        display: inline;
        pointer-events: auto;
        padding-left: 5px;
    }
 
 

    .sidebar-right li i {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        border-radius: 12px;
    }

    .sidebar-right li.profile {
        position: fixed;
        height: 60px;
        min-width: 72px;
        bottom: 30px;
        padding: 10px 0px;
        background: #3051a2;
        transition: all 0.5s ease;
        overflow: hidden;
    }

    .sidebar-right.open li.profile {
        width: 300px;
    }

 

    .sidebar-right li img {
        height: 45px;
        width: 45px;
        object-fit: cover;
        border-radius: 6px;
        margin-right: 10px;
    }
 

    .sidebar-right .profile #log_out {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background: #1d1b31;
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-radius: 0px;
        transition: all 0.5s ease;
    }

    .sidebar-right.open .profile #log_out {
        width: 50px;
        background: none;
    }

    
/*******************sidebar-menu********************/

.sidebar-menu {
    height: 100%;
    width: 500px;
    z-index: 99;
    transition: all 0.5s ease;
}






    .sidebar-menu .nav-list {
        margin-top: 20px;
        height: 100%;
        margin-left: -45px;
        margin-right: -12px;
    }

        .sidebar-menu .nav-list .listlink {
            padding: 5px 10px 0 20px;
        }

    .sidebar-menu li {
        position: relative;
        margin: 5px 0;
        list-style: none;
        height: 56px;
    }





        .sidebar-menu li .btn-link-m {
            display: flex;
            height: 100%;
            width: 100%;
            align-items: center;
            text-decoration: none;
            transition: all 0.4s ease;
            border: 1px solid #a9a9a9;
            box-shadow: 7px 6px 9px 5px rgb(165 165 165 / 20%);
            border-radius: 16px;
        }

        .sidebar-menu li .link-menu {
            background: #ffffff;
            cursor: pointer;
            color: #605a5a;
        }

            .sidebar-menu li .link-menu:hover {
                background: rgb(81, 64, 192,0.1);
                color: #5140C0;
            }


        .sidebar-menu li .urgently-red {
            background: #ff5c5c;
            cursor: pointer;
            color: #ffff;
        }

            .sidebar-menu li .urgently-red:hover {
                background: #d45454;
                cursor: pointer;
                color: #ffff;
            }

        .sidebar-menu li .link-disabled {
            background: #ebebeb;
            pointer-events: none;
            cursor: default;
            color: #bfbfbf;
        }


    .sidebar-menu .wrapper-user, urgently-red {
        display: flex;
        width: 100%;
    }

    .sidebar-menu .left_block-user {
        width: 100%;
    }

    .sidebar-menu .right_block-user {
        width: 50px;
    }





    /**************END sidebar-menu******************/
    .sidebar-menu .links_Notif-user {
        background: #FFC900;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        min-width: 24px;
        padding: 0 5px 0 5px;
    }

    .sidebar-menu .links_Notif-red-user {
        background: #ff0000;
        border-radius: 6px;
        color: #fff;
        text-align: center;
        min-width: 24px;
        padding: 0 5px 0 5px;
    }


    .sidebar-menu .links_not-user {
        border-radius: 6px;
        color: #000000;
        text-align: center;
        min-width: 24px;
        padding: 0 5px 0 5px;
    }




/*
    .sidebar-menu li a .wrapper-user {
        width: 100%;
    }

    .sidebar-menu li a .left_block-user {
        float: left;
    }

    .sidebar-menu li a .right_block-user {
        float: right;
        padding-top: 3px;
        padding-right: 2px;
    }*/







.links_Notif {
    background: #FFC900;
    border-radius: 6px;
    color: #fff;
    display: none;
    text-align: center;
    margin-left: -50px;
    min-width: 24px;
    padding: 0 5px 0 5px;
}

.links_Notif-red {
    background: #ff0000;
    border-radius: 6px;
    color: #fff;
    display: none;
    text-align: center;
    margin-left: -50px;
    min-width: 24px;
    padding: 0 5px 0 5px;
}

.links_Notif_point {
    background: #FFC900;
    border-radius: 50%;
    margin-left: -22px;
    width: 9px;
    height: 9px;
    margin-top: -10px;
}

.sidebar-right.open li  .links_Notif_point {
    display: none;
}

.sidebar-right.open li  .links_Notif {
    display: inline-block;
}

.sidebar-right.open li  .links_Notif-red_point {
    display: none;
}

.sidebar-right.open li  .links_Notif-red {
    display: inline-block;
}


.links_Notif-red_point {
    background: #ff0000;
    border-radius: 50%;
    margin-left: -22px;
    width: 9px;
    height: 9px;
    margin-top: -10px
}

.sidebar-right li  .wrapper {
    width: 100%;
}

.sidebar-right li  .left_block {
    float: left;
}



.sidebar-right li  .right_block {
    float: right;
    padding-top: 3px;
    padding-right: 2px;
}

.home-section {
    position: relative;
    background: #f3f5fa;
    min-height: 100vh;
    top: 0;
    transition: all 0.5s ease;
    z-index: 2;
    width: 100%;
}




.home-section .section-body {
 
    color: #11101d;
    font-weight: 500;
    margin: 18px 8px 18px 75px;
   
}


@media (max-width: 420px) {
    .sidebar-right li .tooltip {
        display: none;
    }
}

.div-nav-menu {
    width: 100%;
}

    .div-nav-menu .inf-nav-menu {
        padding-left: 10px;
    }

    .div-nav-menu .Login-nav-menu {
        float: right;
    }

.nav-link-wrapper {
    display: flex;
    margin-left: 0px;
}

.nav-link-left_block {
    float: left;
}

.nav-link-right_block {
    float: right;
  /*  margin-top: 8px;*/
  /*  padding-left: 10px;*/
}

.pagt-body {
}

.LoginDisplay-menu {
}

.UserDisplay-menu {
}

.nav-link-user {
    color: #fff;
    display: block;
    padding: .8rem 1rem;
    text-decoration: none;
}

    .nav-link-user:hover {
        color: #fff;
    }

.nav-link-row {
    color: #fff;
    display: block;
    padding: .5rem 0rem;
    text-decoration: none;
}

    .nav-link-row:hover {
        color: #fff;
    }

.mobil-top-menu {
    width: 100%;
}




/***************Desctop-start*************/
@media (min-width: 561px) {
 


  

    .nav-link-locale {
        display: inline;
    }

    .UserDisplay-menu {
        display: none;
    }

    .mobil-top-menu {
        display: none;
    }
}

.inline-mobil-top {
    display: flex;
}

.left-block-mobil-top {
    /*width: 50px;*/
    height: 53px;
    display: inline-grid;
    align-items: center;
}

    .left-block-mobil-top .content-link {
        font-family: Jost;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 29px;
        color: #FFFFFF;
    }

.content-mobil-top {
    height: 53px;
    width: 100%;
    display: inline-grid;
    align-items: center;
    text-align: center;
}

    .content-mobil-top .content-link {
        font-family: Jost;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 29px;
        color: #FFFFFF;
    }

.right-block-mobil-top {
    width: 50px;
    height: 53px;
    display: inline-grid;
    align-items: center;
}


.member-officetask {
    position: relative;
    box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
    padding: 30px;
    padding-top: 30px;
    border-radius: 5px;
    background: #fff;
    transition: 0.5s;
    /* min-height: 300px; */
    border-radius: 16px;
}

    .member-officetask .box-panel-i {
        display: flex;
    }

        .member-officetask .box-panel-i .icon-p {
            padding-right: 10px;
        }

.member-officetask-notPerformed {
    height: 20px;
}

    .member-officetask-notPerformed span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
        padding: 0 5px 0 5px;
        background: #FF3528;
        border-radius: 6px;
    }

.member-officetask-completed {
    height: 20px;
}

    .member-officetask-completed span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
        padding: 0 5px 0 5px;
        background: #60CD6B;
        border-radius: 6px;
    }

.member-officetask-expired {
    height: 20px;
}

    .member-officetask-expired span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
        padding: 0 5px 0 5px;
        background: #FFC900;
        border-radius: 6px;
    }

.member-info-officetask {
    padding-top: 10px;
}

    .member-info-officetask h4 {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
    }

.member-officetask-Deadline {
}

    .member-officetask-Deadline span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        color: #8E8E8E;
    }

.team-page-content {
    display: flex;
    width: calc(100% - 360px);
}

    .team-page-content .div-content {
        width: 100%;
        margin-top: 10px;
    }

    .team-page-content .filter-status-cat {
        padding-left: 10px;
        position: fixed;
        top: 55px;
        right: 0;
    }

        .team-page-content .filter-status-cat .cat-content {
            width: 365px;
            height: calc(100vh - 50px);
            background: #FFFFFF;
            box-shadow: 0px 4px 32px rgb(0 0 0 / 15%);
            overflow-y: auto;
            padding-bottom: 10px;
        }

.team-page-content-inf {
    width: 100%;
}

@media (max-width: 781px) {
    .team-page-content .filter-status-cat .cat-content {
        width: 265px;
    }

    .team-page-content {
        width: calc(100% - 240px);
    }
}


.team-page-content .filter-status-cat-page {
    position: fixed;
    top: 55px;
    width: 100%;
    margin-left: -20px;
}

    .team-page-content .filter-status-cat-page .cat-content {
        width: 100%;
        height: calc(100vh - 50px);
        background: #FFFFFF;
        box-shadow: 0px 4px 32px rgb(0 0 0 / 15%);
        overflow-y: auto;
        padding-bottom: 10px;
    }

.team-page-content .message-page {
    position: fixed;
    top: 55px;
    width: 100%;
    margin-left: -20px;
}

    .team-page-content .message-page .message-content {
        width: 100%;
        height: calc(100vh - 50px);
        background: #FFFFFF;
        box-shadow: 0px 4px 32px rgb(0 0 0 / 15%);
        overflow-y: auto;
        padding-bottom: 10px;
    }

        .team-page-content .message-page .message-content .wrapper-content {
            width: 100%;
            padding: 0;
        }

            .team-page-content .message-page .message-content .wrapper-content .inf-content {
                padding: 2px;
                height: calc(100vh - 100px);
            }

            .team-page-content .message-page .message-content .wrapper-content .inf-menu {
                height: 40px;
                background: #ffffff;
                border-top: 1px solid #a3a3a3;
            }



/* ------------------------------------*/

.member-inf-content {
    position: relative;
    box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
    padding: 30px 30px 10px 30px;
    border-radius: 10px;
 
    transition: 0.5s;
}

    .member-inf-content .member-info-cont {
        width: 100%;
    }

        .member-inf-content .member-info-cont .catspan-cont {
            padding-left: 5px;
        }

            .member-inf-content .member-info-cont .catspan-cont span {
                display: block;
                font-size: 15px;
                padding-bottom: 10px;
                position: relative;
                font-weight: 500;
            }

                .member-inf-content .member-info-cont .catspan-cont span::after {
                    content: '';
                    position: absolute;
                    display: block;
                    width: 50px;
                    height: 1px;
                    background: #cbd6e9;
                    bottom: 0;
                    left: 0;
                }


        .member-inf-content .member-info-cont h4 {
            font-family: Jost;
            font-style: normal;
            font-weight: 500;
            font-size: 20px;
            line-height: 23px;
            color: #37517e;
        }

        .member-inf-content .member-info-cont span {
            /*display: block;*/
            font-family: Jost;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            line-height: 17px;
            color: #000000;
        }

        .member-inf-content .member-info-cont p {
            font-family: Jost;
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #585858;
        }

        .member-inf-content .member-info-cont .memberspan {
            display: block;
            font-size: 15px;
            padding-bottom: 10px;
            position: relative;
            font-weight: bold;
            color: #37517e;
            margin: 40px 0 15px 0;
        }

            .member-inf-content .member-info-cont .memberspan::after {
                content: '';
                position: absolute;
                display: block;
                width: 50px;
                height: 1px;
                background: #cbd6e9;
                bottom: 0;
                left: 0;
            }

/* ------------------------------------*/
.wrapper-menu-cont {
    max-width: 600px;
    padding: 0 20px;
}


    .wrapper-menu-cont .child-tab {
        margin-bottom: 8px;
        border-radius: 3px;
        box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
    }


        .wrapper-menu-cont .child-tab .child-tab-label {
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            border-radius: 3px;
            position: relative;
            z-index: 99;
            transition: all 0.3s ease;
        }




.child-tab input:checked ~ label {
    border-radius: 3px 3px 0 0;
    background: #f3f3f3;
}

.icon-chevron-up {
    display: none;
}

.child-tab input:checked ~ label .icon-chevron-down {
    display: none;
}

.child-tab input:checked ~ label .icon-chevron-up {
    display: inline;
}

.wrapper-menu-cont label span {
    color: rgb(0,0,0);
}


.wrapper-menu-cont .child-tab label span {
    font-family: Jost;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    /* Black */
}

.wrapper-menu-cont .child-tab .sub-content {
    max-height: 0px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 3px 3px;
    transition: all 0.4s ease;
}


.child-tab input:checked ~ .sub-content {
    max-height: 100vh;
}



.wrapper-menu-cont .child-tab .sub-content .sub-content-list {
    padding: 10px;
}



input[type="radio"],
input[type="checkbox"] {
    display: none;
}

.menu-cont-child {
}

.div-menu-cont-child {
    padding-bottom: 20px;
}

    .div-menu-cont-child .btn-cont-child {
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 24px;
        background: #3051a2;
        border-radius: 12px;
        text-align: center;
        color: #FFFFFF;
        width: 100%;
        height: 40px;
        border: 2px solid #3051a2;
    }

.menu-group-checkbox {
    overflow: hidden;
    width: 100%;
}

    .menu-group-checkbox .menu-group-label {
        width: 100%;
        padding: 10px 20px;
    }

    .menu-group-checkbox .menu-left_block {
        width: 100%;
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        /* Main */

        color: #5140C0;
    }

    .menu-group-checkbox .menu-count span {
        color: #333;
        text-align: center;
    }

/* ------------------------------------------------*/

.div-menu-ul {
    overflow-y: auto;
    padding-bottom: 180px;
}

    .div-menu-ul::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: transparent;
    }

    .div-menu-ul::-webkit-scrollbar {
        width: 6px;
        background-color: transparent;
    }

    .div-menu-ul::-webkit-scrollbar-thumb {
        background-color: #5140C0;
    }

/* -----------------------------------------------*/

.wrapper-Mob-filter {
    display: table;
    width: 100%;
}

    .wrapper-Mob-filter .left-block {
        float: left;
    }

        .wrapper-Mob-filter .left-block .name-links {
        }

    .wrapper-Mob-filter .right-block {
        float: right;
    }

        .wrapper-Mob-filter .right-block a {
        }

        .wrapper-Mob-filter .right-block .name-links {
            padding: 0px 5px 0px 5px;
        }

        .wrapper-Mob-filter .right-block .count-links {
            background: #FFC900;
            border-radius: 6px;
            color: #fff;
            text-align: center;
            min-width: 24px;
            padding: 0 5px 0 5px;
        }


.div-content-inf {
    display: contents;
    padding-top: 10px;
    width: 100%;
}

.page-filter {
    background: #ffffff;
}



.officeAttachment-list {
}

.officeAttachment-list-img {
}

    .officeAttachment-list-img img {
        width: 200px;
    }

.officeAttachment-list ul {
    list-style: none;
    font-size: 0;
    padding-left: 0rem;
}

.officeAttachment-list li {
    display: inline-block;
    margin-right: 15px;
}


/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 8px;
    background: #F4F4F4;
    box-shadow: 0px 2px 15px rgb(16 110 234 / 15%);
    cursor: pointer;
}

    .team .member .member-img {
        position: relative;
        overflow: hidden;
        height: 150px;
        text-align: center;
    }

    .team .member .social-del {
        position: absolute;
        right: 0;
        top: 1px;
        right: 0;
        transition: ease-in-out 0.3s;
        text-align: center;
    }

        .team .member .social-del .social-div {
            transition: color 0.3s;
            color: #222222;
            margin: 0 3px;
            padding-top: 7px;
            border-radius: 4px;
            width: 36px;
            height: 36px;
            background: #FFFFFF;
            display: inline-block;
            transition: ease-in-out 0.3s;
            color: #8d8888;
            box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            font-size: 16px;
        }

            .team .member .social-del .social-div:hover {
                background: #ebebeb;
            }

    .team .member .social-add {
        position: absolute;
        right: 0;
        top: -12px;
        left: 0px;
        transition: ease-in-out 0.3s;
        text-align: center;
    }

        .team .member .social-add .social-add-div {
            transition: color 0.3s;
            color: #222222;
            margin: 0 3px;
            padding-top: 7px;
            border-radius: 4px;
            display: inline-block;
            transition: ease-in-out 0.3s;
            color: #8d8888;
            border-radius: 20px;
            font-size: 60px;
        }




    .team .member .member-info {
        padding: 15px 15px;
    }

        .team .member .member-info h4 {
            font-weight: 700;
            margin-bottom: 5px;
            font-size: 18px;
            color: #222222;
        }

        .team .member .member-info span {
            display: block;
            font-family: Jost;
            font-style: normal;
            font-weight: normal;
            font-size: 12px;
            line-height: 17px;
            color: #000000;
        }

    .team .member .member-info-Add {
        text-align: center;
        padding: 15px 15px;
    }

        .team .member .member-info-Add span {
            display: block;
            font-family: Jost;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 17px;
            color: #000000;
        }

    .team .member .member-info p {
        font-style: italic;
        font-size: 14px;
        line-height: 26px;
        color: #777777;
    }

.team .header-bg-4 {
    background-repeat: no-repeat;
    background-image: linear-gradient(rgb(181 14 223 / 15%), rgb(255 255 255 / 88%));
}
.team .div-header {
    position: relative;
    box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
    padding: 20px 10px 20px 10px;
    border-radius: 5px;
    background: #fff;
    transition: 0.5s;
    border-bottom: 5px solid #b50edf94;
}
    .team .div-header .n-newUser {
        align-items: center;
        text-align: center;
        display: flex;
    }
        .team .div-header .n-newUser span {
            font-size: 20px;
            color: #37517e;
        }

        .img-fluid-member {
            max-width: 250px;
            height: 100%;
        }

.team .member-inf-content .member-info-cont .box-text-gradient {
     
}

    .team .member-inf-content .member-info-cont .box-text-gradient .items-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
@media (max-width: 562px) {
    .team .member-inf-content .member-info-cont .box-text-gradient .items-text {
       
        -webkit-line-clamp: 4;
       
    }
}

.img-fluid-member-list {
    max-width: 250px;
    height: 100%;
    padding-bottom: 5px;
    cursor: pointer;
}

.member-officetask-Description {
    padding: 10px 0 10px 0;
}

    .member-officetask-Description span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
    }

.member-officetask-Description-inf span {
    font-family: Jost;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    /* Dark */

    color: #585858;
}

.member-officetask-Description-inf image {
    max-width: 100%;
}

.member-officetask-Description-inf img {
    max-width: 100%;
}

.member-officetask-Attachment {
    padding: 10px 0 10px 0;
}

    .member-officetask-Attachment span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
    }

.member-officetask-UserAttachment {
    padding: 10px 0 10px 0;
}

    .member-officetask-UserAttachment span {
        font-family: Jost;
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 23px;
        color: #000000;
    }

.btn-inf-status {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #3051a2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    height: 40px;
    border: 2px solid #3051a2;
}

.btn-inf-status-notActiv {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #efefef;
    border-radius: 12px;
    text-align: center;
    color: #c3c3c3;
    height: 40px;
    border: 2px solid #dfdfdf;
}

.drag-drop-zoneAdd {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    position: relative;
    width: 250px;
    height: 175px;
}

    .drag-drop-zoneAdd:hover {
        background-color: #f5f5f5;
    }

    .drag-drop-zoneAdd input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.div-inf-status {
    text-align: center;
    padding-top: 15px;
}

.support-menu-name {
    /* Body-bold */

    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    /* identical to box height, or 150% */
    /* Black */

    color: #000000;
}

.support-multiline {
}

    .support-multiline .textarea.e-input, .e-input-group textarea, .e-input-group.e-control-wrapper textarea, .e-float-input textarea, .e-float-input.e-control-wrapper textarea {
        height: 150px;
    }






.toolbar-item-attachmentDb {
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #ff0000;
    text-align: center;
}

.btn-file-sync {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #4cbb7e;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    height: 40px;
    border: 2px solid #16ad5a;
}

.toolbar-item-attachmentDb .col-attachmentDb span {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
}

.div-syncDBApp {
    position: fixed;
    background: #f1f1f1;
    bottom: 0px;
    width: 100%;
    z-index: 1000;
    display: flex;
    padding-left: 30px;
    height: 40px;
    align-items: center;
    text-align: center;
}

    .div-syncDBApp .cur-version span {
        font-family: Jost;
        color: #afafaf;
        font-size: 12px;
    }

.toolbar-item-Sync-btn {
    font-family: Jost;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 24px;
    background: #3051a2;
    border-radius: 12px;
    text-align: center;
    color: #FFFFFF;
    border: 2px solid #3051a2;
    margin: 5px;
}
/*-------------desc-top-menu-----------------*/
.inline-desc-top {
    display: flex;
}

.left-block-desc-top {
    min-width: 300px;
    height: 53px;
    align-items: center;
    /* text-align: center; */
    display: inline-grid;
}

.content-desc-top {
    height: 53px;
    width: 100%;
    display: inline-grid;
    align-items: center;
    text-align: center;
}

    .content-desc-top .content-link {
        font-family: Jost;
        font-style: normal;
        font-weight: normal;
        font-size: 20px;
        line-height: 29px;
        color: #000000;
    }

.right-block-desc-top {
   /* width: 250px;*/
    height: 53px;
}

.wrapper-Mob-filter {
    display: none;
}
@media (max-width: 1000px) {
    .left-block-desc-top {
        min-width: 0px;
    }
}

#header.header-scrolled {
    background: #ffffff;
}


    /***************Mobil-start*************/
    @media (max-width: 561px) {
     

    

      

        .nav-link-locale {
            display: none;
        }

        #header.header-scrolled {
            background: #3051a2;
        }

        .sidebar-right {
            display: none;
        }

            .sidebar-right.open {
                margin-left: -85px;
            }

                .sidebar-right.open ~ .home-section {
                    left: 0px;
                    width: 100%;
                }

                    .sidebar-right.open ~ .home-section .div-nav-menu {
                        width: 100%;
                    }

        .fixed-top-menu {
            margin-left: 0px;
            width: 100%;
        }

        .home-section .section-body {
            margin: 18px 0 18px 0;
        }

        .div-nav-menu .inf-nav-menu {
            padding-left: 10px;
            width: 100%;
        }

        .LoginDisplay-menu {
            display: none;
        }

        .desc-top-menu {
            display: none;
        }

        #header {
            height: 53px;
        }

        .team-page-content {
            width: 100%;
        }

            .team-page-content .filter-status-cat .cat-content {
                display: none;
            }

        .wrapper-Mob-filter {
            display: inline;
        }

        .btn-inf-status {
            width: 100%;
        }

        .btn-inf-status-notActiv {
            width: 100%;
        }

        .btn-learn-more-support {
            width: 100%;
        }
    }

    @media (min-width: 562px) {
        .btn-inf-status {
            max-width: 350px;
            width: 100%;
        }


        .btn-inf-status-notActiv {
            max-width: 350px;
            width: 100%;
        }

        .btn-learn-more-support {
            max-width: 350px;
            width: 100%;
        }
    }
    /***************Mobil-Desctop-End*************/


    .geo-map {
        display: flex;
    }

    .col-geo-map-1 {
        width: 430px;
    }

    .col-geo-map-2 {
        width: calc(100% - 430px);
    }


    @media (max-width: 992px) {

        .col-geo-map-1 {
            order: 1;
            width: 100%;
        }

        .col-geo-map-2 {
            order: 0;
            width: 100%;
        }
    }

    .features h3 {
        font-weight: 400;
        font-size: 24px;
    }

    .geo-map-ul {
        margin-left: -35px;
    }


        .geo-map-ul li {
            list-style-type: none;
        }

        .geo-map-ul .count-geo-div {
            display: flex;
            /* align-self: center;*/
        }

            .geo-map-ul .count-geo-div .count-geo-list-green {
                height: 28px;
                width: 28px;
                border: 1px solid #d5d6d7;
                border-radius: 4px;
                margin-top: 1px px;
                background: #009900;
                line-height: 26px;
                border-radius: 50%;
                text-align: center;
                font-size: 14px;
                color: #ffff;
            }

            .geo-map-ul .count-geo-div .count-geo-list-red {
                height: 28px;
                width: 28px;
                border: 1px solid #d5d6d7;
                border-radius: 4px;
                margin-top: 1px px;
                background: #CC3333;
                line-height: 26px;
                border-radius: 50%;
                text-align: center;
                font-size: 14px;
                color: #ffff;
            }

            .geo-map-ul .count-geo-div .count-geo-body {
                display: block;
                padding-left: 10px;
            }

                .geo-map-ul .count-geo-div .count-geo-body .body-name span {
                    font-size: 14px;
                    color: #000;
                }

                .geo-map-ul .count-geo-div .count-geo-body .body-address span {
                    font-size: 14px;
                    color: #a3a3a3;
                }

        .geo-map-ul .count-geo-icon {
            display: flex;
        }

            .geo-map-ul .count-geo-icon .geo-icon-notActiv {
                padding: 5px 10px 0 0px;
                color: #cfcfcf;
            }

            .geo-map-ul .count-geo-icon .geo-icon-Activ {
                padding: 5px 10px 0 0px;
                color: #895fdb;
            }

    .member-officetask .detail-Gps {
        margin: 10px 0 10px 0;
        display: flex;
        align-items: center;
        text-align: center;
    }

        .member-officetask .detail-Gps .btnNavigate {
            margin: 0 10px 0 10px;
            font-family: Jost;
            font-style: normal;
            font-weight: bold;
            font-size: 14px;
            line-height: 24px;
            background: #f9f9f9;
            border-radius: 12px;
            text-align: center;
            color: #FFFFFF;
            border: 2px solid #e7e7e7;
            margin-top: 5px;
        }

            .member-officetask .detail-Gps .btnNavigate span {
                color: #2f9ae7;
            }

        .member-officetask .detail-Gps .detail-Gps-distance {
        }

    .breadcrumb {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        list-style: none;
        border-radius: 0.25rem;
        padding: 0;
        margin-bottom: 0;
    }

        .breadcrumb > .active {
            color: inherit;
        }

    .breadcrumb-item.active {
        color: #6c757d;
    }

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0.5rem;
    }

        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: #6c757d;
            content: "/";
        }

    .visit-div-phone {
        display: flex;
    }

        .visit-div-phone .visit-lab {
        }

        .visit-div-phone .visit-progressBar {
            width: 150px;
        }

            .visit-div-phone .visit-progressBar span {
                font-size: 14px;
                color: #11101d;
            }

        .visit-div-phone .visit-count {
        }

            .visit-div-phone .visit-count span {
                font-size: 14px;
                color: #11101d;
            }

    .member-officetask .detail-back {
        margin: 10px 0 10px 0;
        display: flex;
    }

    .member-officetask .back-inf {
    }

    .member-officetask .detail-Address {
        margin: 10px 0 10px 0;
        display: flex;
    }

        .member-officetask .detail-Address .Address-info {
        }

            .member-officetask .detail-Address .Address-info span {
                font-size: 14px;
                color: #b2b0c3;
            }

    .member-officetask .detail-Description {
        margin: 10px 0 10px 0;
        display: flex;
    }

        .member-officetask .detail-Description .Description-inf {
        }

            .member-officetask .detail-Description .Description-inf span {
                font-size: 14px;
                color: #808087;
            }

    .detail-icon-notActiv {
        padding: 5px 10px 0 0px;
        color: #bfbfbf;
    }

    .member-officetask-map {
        position: relative;
        box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
        padding-top: 10px;
        padding-bottom: 10px;
        margin-bottom: 3px;
        border-radius: 5px;
        background: #fff;
        transition: 0.5s;
        /* min-height: 300px; */
        border-radius: 16px;
    }







    /*-----------------------------AdminPanel----------------------*/

    .adminPanel {
        padding: 10px 0 30px 0;
        overflow: hidden;
    }

        .adminPanel .service-box {
            box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
            background-color: #fff;
            height: 100%;
            padding: 60px 30px;
            text-align: center;
            transition: 0.3s;
            border-radius: 5px;
        }

            .adminPanel .service-box .read-more {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: 600;
                font-size: 16px;
                padding: 8px 20px;
            }

            .adminPanel .service-box:hover {
                color: #fff;
            }

        .adminPanel .blue {
            border-bottom: 3px solid #2db6fa;
        }

        .adminPanel .orange {
            border-bottom: 3px solid #f68c09;
        }

        .adminPanel .green {
            border-bottom: 3px solid #08da4e;
        }

        .adminPanel .red {
            border-bottom: 3px solid #e9222c;
        }

        .adminPanel .purple {
            border-bottom: 3px solid #b50edf;
        }

        .adminPanel .pink {
            border-bottom: 3px solid #f51f9c;
        }

        .adminPanel .blue:hover {
            background: #2db6fa;
        }

        .adminPanel .orange:hover {
            background: #f68c09;
        }

        .adminPanel .green:hover {
            background: #08da4e;
        }

        .adminPanel .red:hover {
            background: #e9222c;
        }

        .adminPanel .purple:hover {
            background: #b50edf;
        }

        .adminPanel .pink:hover {
            background: #f51f9c;
        }

        .adminPanel .service-box.blue .read-more {
            color: #2db6fa;
        }

        .adminPanel .service-box.orange .read-more {
            color: #f68c09;
        }

        .adminPanel .service-box.green .read-more {
            color: #08da4e;
        }

        .adminPanel .service-box.red .read-more {
            color: #e9222c;
        }

        .adminPanel .service-box.purple .read-more {
            color: #b50edf;
        }

        .adminPanel .service-box.pink .read-more {
            color: #f51f9c;
        }


        .adminPanel .service-box:hover h3,
        .adminPanel .service-box:hover p,
        .adminPanel .service-box:hover .read-more {
            color: #fff;
        }

        .adminPanel .service-box .ri-discuss-line {
            width: 100%;
            border-radius: 15px;
        }

        .adminPanel .service-box h3 {
            color: #444444;
            font-weight: 700;
            color: #012970;
        }

        .adminPanel .div-header {
            position: relative;
            box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
            padding: 10px;
            /* padding-top: 30px; */
            border-radius: 5px;
            background: #fff;
            transition: 0.5s;
            border-radius: 16px;
        }

        .adminPanel .header-bg-1 {
            background-repeat: no-repeat;
            background-image: linear-gradient(rgb(207 235 255 / 50%), rgb(255 255 255 / 88%));
        }

        .adminPanel .header-bg-2 {
            background-repeat: no-repeat;
            background-image: linear-gradient(rgb(246 140 9 / 10%), rgb(255 255 255 / 88%));
        }

        .adminPanel .header-bg-3 {
            background-repeat: no-repeat;
            background-image: linear-gradient(rgb(8 218 78 / 15%), rgb(255 255 255 / 88%));
        }

        .adminPanel .header-bg-4 {
            background-repeat: no-repeat;
            background-image: linear-gradient(rgb(181 14 223 / 15%), rgb(255 255 255 / 88%));
        }





        .adminPanel .div-header .n-title {
            display: flex;
        }

            .adminPanel .div-header .n-title h5 {
                padding-left: 10px;
                font-size: 18px;
                line-height: 42px;
                font-weight: 700;
                color: #9b9797;
            }

            .adminPanel .div-header .n-title h3 {
                padding-left: 10px;
                font-size: 28px;
                line-height: 42px;
                font-weight: 700;
                color: #012970;
            }

        .adminPanel .div-header .n-newUser {
            align-items: center;
            text-align: center;
            display: flex;
        }

            .adminPanel .div-header .n-newUser .n-inf-title {
                align-items: center;
                text-align: center;
                display: flex;
            }

                .adminPanel .div-header .n-newUser .n-inf-title h4 {
                    font-size: 20px;
                    line-height: 42px;
                    font-weight: 700;
                    color: #012970;
                    padding-left: 10px;
                }

                    .adminPanel .div-header .n-newUser .n-inf-title h4:hover {
                        color: #307bff;
                    }

                .adminPanel .div-header .n-newUser .n-inf-title h5 {
                    padding-left: 10px;
                    font-size: 18px;
                    line-height: 42px;
                    font-weight: 700;
                    color: #858585;
                }

            .adminPanel .div-header .n-newUser .n-inf-btn {
                align-items: center;
                text-align: center;
                display: flex;
                padding-left: 10px;
            }

        .adminPanel .member-panel {
            position: relative;
            box-shadow: 2px 10px 10px rgb(0 0 0 / 10%);
            padding: 30px;
            padding-top: 30px;
            border-radius: 5px;
            background: #fff;
            transition: 0.5s;
            border-radius: 16px;
        }

        .adminPanel .blue-top {
            border-top: 5px solid #2db6fa;
        }

        .adminPanel .orange-top {
            border-top: 5px solid #f68c09;
        }

        .adminPanel .green-top {
            border-top: 5px solid #08da4e;
        }

        .adminPanel .red-top {
            border-top: 5px solid #e9222c;
        }

        .adminPanel .purple-top {
            border-top: 5px solid #b50edf94;
        }

        .adminPanel .pink-top {
            border-top: 5px solid #f51f9c;
        }


        .adminPanel .box-btn {
            padding-top: 20px;
        }

        .adminPanel .inf-user-form p {
            min-height: 34px;
        }

        .adminPanel .form-edit {
            padding-top: 20px;
        }

            .adminPanel .form-edit .member-task-Name {
                padding-top: 20px;
            }

            .adminPanel .form-edit .member-task-Description {
                padding-top: 20px;
            }

            .adminPanel .form-edit .member-task-Attachment {
                padding-top: 20px;
            }

            .adminPanel .form-edit .member-task-route {
                padding-top: 20px;
            }

        .adminPanel .green-top .box-inf-status {
            padding-top: 10px;
            padding-bottom: 10px;
            display: flex;
        }


        .adminPanel .btn-Upload-F {
            font-family: Jost;
            font-style: normal;
            font-weight: bold;
            font-size: 14px;
            line-height: 24px;
            background: #3051a2;
            border-radius: 8px;
            text-align: center;
            color: #FFFFFF;
            width: 200px;
            border: 2px solid #3051a2;
        }

            .adminPanel .btn-Upload-F :hover {
                background: #3051a2;
                color: #FFFFFF;
            }

    .div-u-addTel {
        width: 100%;
    }

        .div-u-addTel .box-codeTel {
            display: flex;
        }

            .div-u-addTel .box-codeTel .div-code {
                width: 165px;
            }

            .div-u-addTel .box-codeTel .div-tel {
                width: 200px;
                padding-left: 10px;
            }

        .div-u-addTel .div-btn {
            margin-top: 18px;
        }


            .div-u-addTel .div-btn .btn-addUserButton {
                font-family: Jost;
                font-style: normal;
                font-weight: bold;
                font-size: 14px;
                line-height: 24px;
                background: #3051a2;
                border-radius: 8px;
                text-align: center;
                color: #FFFFFF;
                width: 100%;
                height: 40px;
                border: 2px solid #3051a2;
            }

    .div-u-addGroup {
        width: 100%;
        padding: 16px;
    }


        .div-u-addGroup .box-Group .div-Group {
            width: 100%;
            text-align: left;
        }

        .div-u-addGroup .box-Group .div-Group-cat {
            width: 100%;
            padding-top: 20px;
        }

            .div-u-addGroup .box-Group .div-Group-cat .div-list {
                padding-top: 10px;
                padding-bottom: 10px;
            }


        .div-u-addGroup .div-btn {
            margin-top: 18px;
        }


            .div-u-addGroup .div-btn .btn-addUserButton {
                font-family: Jost;
                font-style: normal;
                font-weight: bold;
                font-size: 14px;
                line-height: 24px;
                background: #3051a2;
                border-radius: 8px;
                text-align: center;
                color: #FFFFFF;
                width: 100%;
                height: 40px;
                border: 2px solid #3051a2;
            }

    .dialogContent .box-del h3 {
        font-size: 25px;
        line-height: 42px;
        font-weight: 700;
        color: #012970;
        padding-left: 10px;
    }

    .dialogContent .box-del h5 {
        font-size: 20px;
        line-height: 42px;
        font-weight: 700;
        padding-left: 10px;
    }

    .dialogContent .items-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .modal-Add.e-dialog .e-dlg-header-content {
        background-color: #198754;
        color: #fff;
    }

    .modal-Edit.e-dialog .e-dlg-header-content {
        background-color: #0dcaf0;
        color: #fff;
    }

    .modal-Delete.e-dialog .e-dlg-header-content {
        background-color: #dc3545;
        color: #fff;
    }

    .dialogContent .box-upload .member {
        width: 100%;
    }

        .dialogContent .box-upload .member .drag-drop-zoneAdd-t {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            position: relative;
            width: 100%;
            height: 175px;
            border: dashed 2px #adb5bd;
        }

            .dialogContent .box-upload .member .drag-drop-zoneAdd-t input[type=file] {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                cursor: pointer;
            }

    .btn-Upload-F {
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 24px;
        background: #3051a2;
        border-radius: 8px;
        text-align: center;
        color: #FFFFFF;
        width: 200px;
        border: 2px solid #3051a2;
    }

        .btn-Upload-F :hover {
            background: #3051a2;
            color: #FFFFFF;
        }

    .member-task-Attachment .Attachment-list {
        position: relative;
    }

    .member-task-Attachment .Attachment-list-img {
    }

        .member-task-Attachment .Attachment-list-img img {
            width: 200px;
        }

    .member-task-Attachment .Attachment-list ul {
        list-style: none;
        font-size: 0;
        padding-left: 0rem;
        padding-top: 20px;
    }

    .member-task-Attachment .Attachment-list li {
        display: inline-block;
        margin-right: 15px;
    }

    .member-task-Attachment .Attachment-list .member {
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 8px;
        /* background: #F4F4F4; */
        box-shadow: 0px 2px 15px rgb(16 110 234 / 15%);
        cursor: pointer;
    }

        .member-task-Attachment .Attachment-list .member .member-img {
            position: relative;
            overflow: hidden;
            height: 150px;
            text-align: center;
        }

        .member-task-Attachment .Attachment-list .member .social-del {
            position: absolute;
            right: 0;
            top: 1px;
            right: 10px;
            transition: ease-in-out 0.3s;
            text-align: center;
        }

            .member-task-Attachment .Attachment-list .member .social-del .social-div {
                transition: color 0.3s;
                color: #222222;
                margin: 0 3px;
                padding-top: 7px;
                width: 36px;
                height: 36px;
                background: #FFFFFF;
                display: inline-block;
                transition: ease-in-out 0.3s;
                color: #8d8888;
                box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.15);
                border-radius: 20px;
                border: 2px solid #3051a2;
                font-size: 16px;
            }

    /*----*/


    .member-task-Attachment .Attachment-list-t {
        position: relative;
    }

    .member-task-Attachment .Attachment-list-t-img {
    }

        .member-task-Attachment .Attachment-list-t-img img {
            width: 200px;
        }

    .member-task-Attachment .Attachment-list-t ul {
        list-style: none;
        font-size: 0;
        padding-left: 0rem;
        padding-top: 20px;
    }

    .member-task-Attachment .Attachment-list-t li {
        display: inline-block;
        margin-right: 15px;
    }

    .member-task-Attachment .Attachment-list-t .member {
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 8px;
        /* background: #F4F4F4; */
        box-shadow: 0px 2px 15px rgb(16 110 234 / 15%);
        cursor: pointer;
    }

        .member-task-Attachment .Attachment-list-t .member .member-img {
            position: relative;
            overflow: hidden;
            max-height: 150px;
            max-width: 300px;
            text-align: center;
            width: 300px;
        }

        .member-task-Attachment .Attachment-list-t .member .social-del {
            position: absolute;
            right: 0;
            top: 1px;
            right: 10px;
            transition: ease-in-out 0.3s;
            text-align: center;
        }

            .member-task-Attachment .Attachment-list-t .member .social-del .social-div {
                transition: color 0.3s;
                color: #222222;
                margin: 0 3px;
                padding-top: 7px;
                width: 36px;
                height: 36px;
                background: #FFFFFF;
                display: inline-block;
                transition: ease-in-out 0.3s;
                color: #8d8888;
                box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.15);
                border-radius: 20px;
                border: 2px solid #3051a2;
                font-size: 16px;
            }


    .member-task-User {
        padding-top: 20px;
    }

        .member-task-User .User-list-Task {
            padding-top: 10px;
        }

            .member-task-User .User-list-Task .box-tab {
            }

                .member-task-User .User-list-Task .box-tab .cs-tab-Select {
                    padding-bottom: 10px;
                    padding-top: 10px;
                }

                .member-task-User .User-list-Task .box-tab .task-User-tab {
                    max-width: 500px;
                }

                .member-task-User .User-list-Task .box-tab .task-UserGroup-tab {
                    max-width: 500px;
                }

                    .member-task-User .User-list-Task .box-tab .task-UserGroup-tab .n-label {
                        padding: 10px;
                    }

                .member-task-User .User-list-Task .box-tab .grid-People {
                    max-width: 500px;
                }


    .member-task-PublicLink {
        padding-top: 20px;
    }

        .member-task-PublicLink .box-switch {
            padding-top: 10px;
            align-items: center;
            display: inline-grid;
        }

        .member-task-PublicLink .box-Task {
            padding-top: 10px;
            margin-left: 10px;
        }

            .member-task-PublicLink .box-Task .div-link {
                display: flex;
            }



    .hr-line {
        margin: 20px 0;
        padding: 0;
        height: 0;
        border: none;
        border-top: 1px solid #333;
        border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
        background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
        background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
        background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    }

    .btn-border-left-r {
        border-radius: .25rem 0 0 .25rem;
    }

    .btn-border-right-r {
        border-radius: 0 .25rem .25rem 0;
    }

    .btn-border-r {
        border-radius: .25rem;
    }

    .adminPanel .div-g-new-list {
        display: flex;
        padding: 10px;
        margin-bottom: 5px;
    }

        .adminPanel .div-g-new-list .g-new-lb {
            padding-top: 12px;
        }

        .adminPanel .div-g-new-list .g-new-btn {
            margin-left: 10px;
        }

            .adminPanel .div-g-new-list .g-new-btn .btn-GroupUser-F {
                font-family: Jost;
                font-style: normal;
                font-weight: bold;
                font-size: 14px;
                line-height: 24px;
                background: #3051a2;
                border-radius: 8px;
                text-align: center;
                color: #FFFFFF;
                border: 2px solid #3051a2;
            }

                .adminPanel .div-g-new-list .g-new-btn .btn-GroupUser-F :hover {
                    background: #3051a2;
                    color: #FFFFFF;
                }



    .dialogContent .div-g-new-list-m {
        display: flex;
        padding: 10px;
        margin-bottom: 5px;
    }

        .dialogContent .div-g-new-list-m .g-new-ch {
            padding-top: 11px;
        }

        .dialogContent .div-g-new-list-m .g-new-accord {
            width: 100%;
        }

    .div-u-addGroup .div-btn .btn-addUserButton {
        font-family: Jost;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 24px;
        background: #3051a2;
        border-radius: 8px;
        text-align: center;
        color: #FFFFFF;
        width: 100%;
        height: 40px;
        border: 2px solid #3051a2;
    }

    .div-DateTimePicker {
        padding-top: 30px;
    }

        .div-DateTimePicker .box-DateTimePicker {
            display: flex;
        }

            .div-DateTimePicker .box-DateTimePicker .TimePicker-Switch {
                padding-right: 10px;
            }

            .div-DateTimePicker .box-DateTimePicker .TimePicker-Date {
            }


    .btn-success-disable {
        color: #fff;
        background-color: #90d3b4;
        border-color: #198754;
    }

    .Attachment-list-t .containerframeVideo-t {
        width: 100%;
        height: 300px;
    }

    .member-panel .member-info-cont .catspan-cont {
        padding-bottom: 10px;
    }

        .member-panel .member-info-cont .catspan-cont span::after {
            content: '';
            position: absolute;
            display: block;
            width: 100px;
            height: 1px;
            background: #caceff;
            /*bottom: 0;*/
            left: 25px;
        }

    .box-upload-file {
        padding: 20px 0 20px 0
    }

    .box-addUserFile-upload .drag-drop-zoneAdd-t {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        cursor: pointer;
        position: relative;
        width: 100%;
        height: 64px;
        border: dashed 2px #adb5bd;
    }

        .box-addUserFile-upload .drag-drop-zoneAdd-t input[type=file] {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

    .home-activ-menu {
        left: 235px;
        width: calc(100% - 235px);
    }

    .tranning-box-gradient-right {
        background-image: linear-gradient(-90deg, #b50edf1f, #ffffff 30%);
    }

    .tranning-Gradient-botton {
        border-bottom: 5px solid #b50edf94;
    }

    .virual-uaser {
    }

    nav.primary-navigation {
        margin: 0 auto;
        display: block;
        text-align: center;
        font-size: 16px;
    }

        nav.primary-navigation ul li {
            list-style: none;
            margin: 0 auto;
            border-left: 2px solid #3ca0e7;
            display: inline-block;
            padding: 0 10px 0 5px;
            position: relative;
            text-decoration: none;
            text-align: center;
            font-family: arvo;
        }

        nav.primary-navigation li a {
            color: black;
        }

            nav.primary-navigation li a:hover {
                color: #3ca0e7;
            }

        nav.primary-navigation li:hover {
            cursor: pointer;
        }

        nav.primary-navigation ul li ul {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            padding-left: 0;
            left: 0;
            display: none;
            background: white;
        }

            nav.primary-navigation ul li:hover > ul,
            nav.primary-navigation ul li ul:hover {
                visibility: visible;
                opacity: 1;
                display: block;
                min-width: 250px;
                text-align: left;
                padding-top: 20px;
                box-shadow: 0px 3px 5px -1px #ccc;
            }

            nav.primary-navigation ul li ul li {
                clear: both;
                width: 100%;
                text-align: left;
                margin-bottom: 20px;
                border-style: none;
            }

                nav.primary-navigation ul li ul li a:hover {
                    padding-left: 10px;
                    border-left: 2px solid #3ca0e7;
                    transition: all 0.3s ease;
                }

    @media (max-width: 561px) {
        nav.primary-navigation {
            display: none;
        }
    }

    .btn-down-file {
        /* background-color: #e1f6ff;*/
        border-color: #1a92c9;
        color: #736c6c;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
    }

        .btn-down-file:hover {
            background-color: #e1f6ff;
            border-color: #1a92c9;
        }

    .box-badge {
        /* margin-right:15px*/
    }

        .box-badge .div-badge {
            position: relative;
        }

        .box-badge .pc-h-item {
            display: flex;
            align-items: center;
            padding: 0 10px 0 10px;
        }

        .box-badge .link-ball svg {
            color: #5c5c5c;
        }

        .box-badge .pc-head-link {
            margin: 0 4px;
            position: relative;
            font-weight: 500;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /*  width: 44px;*/
            height: 44px;
            border-radius: 4px;
            color: var(--pc-header-color);
            overflow: hidden;
        }

            .box-badge .pc-head-link .pc-h-badge {
                position: absolute;
                top: -22px;
                left: -12px;
                border-radius: 50%;
                font-size: 12px;
                z-index: 9;
            }


        .box-badge .dropdown-notification {
            min-width: 420px;
            max-width: 100%;
        }

            .box-badge .dropdown-notification .dropdown-header,
            .box-badge .dropdown-notification .dropdown-body {
                padding: 16px 20px;
            }

            .box-badge .dropdown-notification .list-group-item-action:active, .box-badge .dropdown-notification .list-group-item-action:hover, .box-badge .dropdown-notification .list-group-item-action:focus {
                background: #e8f4ff;
            }

            .box-badge .dropdown-notification .list-group-item-action .user-avtar,
            .box-badge .dropdown-notification .list-group-item-action h5,
            .box-badge .dropdown-notification .list-group-item-action .h5 {
                cursor: pointer;
            }

            .box-badge .dropdown-notification .badge {
                font-size: 0.8125rem;
                padding: 0.43em 1em;
            }

            .box-badge .dropdown-notification .user-avtar {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .box-badge .dropdown-notification .notification-file {
                display: flex;
                align-items: center;
            }

                .box-badge .dropdown-notification .notification-file i {
                    font-size: 20px;
                    margin-right: 16px;
                }

            .box-badge .dropdown-notification .card {
                cursor: pointer;
            }

                .box-badge .dropdown-notification .card:hover {
                    background: var(--pc-active-background);
                }

    @media (max-width: 575.98px) {
        .box-badge .dropdown-notification {
            min-width: calc(100%);
        }

        .box-badge .link-ball svg {
            color: #FFF;
        }
    }

    .bg-Training {
        background: #fee8ff;
        color: #ae18ff;
    }

    .bg-light-primary {
        background: #e8f4ff;
        color: #1890ff;
    }

    .bg-light-secondary {
        background: #f0f1f2;
        color: #6c757d;
    }

    .bg-light-success {
        background: #eef9e8;
        color: #52c41a;
    }

    .bg-light-info {
        background: #e7f9f9;
        color: #13c2c2;
    }

    .bg-light-warning {
        background: #fff7e8;
        color: #faad14;
    }

    .bg-light-danger {
        background: #ffeded;
        color: #ff4d4f;
    }

    .bg-danger {
        background: #ff0000;
        color: #ffffff;
    }

    .bg-light-light {
        background: #fefeff;
        color: #f8f9fa;
    }

    .bg-light-dark {
        background: #e8e8e8;
        color: #141414;
    }

    .bg-light-primary {
        background-color: #ebf0ff;
        color: #36f;
    }

    .bg-light-danger {
        background: #ffeded;
        color: #ff4d4f;
    }

    .bg-light-primary {
        background-color: #ebf0ff;
        color: #36f;
    }

    .bg-light-success {
        background: #eef9e8;
        color: #52c41a;
    }

    .text-success {
        --bs-text-opacity: 1;
        color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
    }

    .user-avtar {
        width: 40px;
        margin-right: 10px;
        border-radius: 50%;
    }



    /*ChatRoom*/
    @import url(https://fonts.googleapis.com/css?family=Lato:400,700);


    .box-h-chat .container-chat {
        border-radius: 5px;
    }

        .box-h-chat .container-chat .chat .chat-history ul {
            margin-left: -50px;
        }


    .box-h-chat .chat {
        width: 100%;
        float: left;
        background: #F2F5F8;
        /*    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;*/
        border-radius: 20px;
        color: #434651;
    }

        .box-h-chat .chat .chat-header {
            padding: 20px;
            border-bottom: 2px solid white;
        }

            .box-h-chat .chat .chat-header img {
                float: left;
            }

            .box-h-chat .chat .chat-header .chat-about {
                float: left;
                padding-left: 10px;
                margin-top: 6px;
            }

            .box-h-chat .chat .chat-header .chat-with {
                font-weight: bold;
                font-size: 16px;
            }

            .box-h-chat .chat .chat-header .chat-num-messages {
                color: #92959E;
            }

            .box-h-chat .chat .chat-header .fa-star {
                float: right;
                color: #D8DADF;
                font-size: 20px;
                margin-top: 12px;
            }

        .box-h-chat .chat .chat-history {
            padding: 30px 30px 20px;
            border-bottom: 2px solid white;
            overflow-y: scroll;
            height: 575px;
        }

            .box-h-chat .chat .chat-history li {
                list-style-type: none;
            }

            .box-h-chat .chat .chat-history .message-data {
                margin-bottom: 15px;
            }
                .box-h-chat .chat .chat-history .message-data .div-del {
                    color:red;
                    cursor:pointer;
                }




            .box-h-chat .chat .chat-history .message-data-time {
                color: #a8aab1;
                padding-left: 6px;
            }

            .box-h-chat .chat .chat-history .message {
                color: white;
                padding: 5px 20px;
                line-height: 26px;
                font-size: 16px;
                border-radius: 7px;
                margin-bottom: 30px;
                width: 90%;
                position: relative;
            }

                .box-h-chat .chat .chat-history .message:after {
                    bottom: 100%;
                    left: 7%;
                    border: solid transparent;
                    content: " ";
                    height: 0;
                    width: 0;
                    position: absolute;
                    pointer-events: none;
                    border-bottom-color: #86BB71;
                    border-width: 10px;
                    margin-left: -10px;
                }

            .box-h-chat .chat .chat-history .my-message {
                background: #86BB71;
            }

            .box-h-chat .chat .chat-history .other-message {
                background: #94C2ED;
            }

                .box-h-chat .chat .chat-history .other-message:after {
                    border-bottom-color: #94C2ED;
                    left: 93%;
                }

                .box-h-chat .chat .chat-history .other-message img {
                    width: 100%;
                    border-radius: 2px;
                    max-width: 270px;
                    max-height: 270px;
                    -o-object-fit: contain;
                    object-fit: contain;
                }


        .box-h-chat .chat .chat-message {
            padding: 10px;
        }

            .box-h-chat .chat .chat-message textarea {
                width: 100%;
                border: none;
                padding: 10px 20px;
                font: 14px/22px "Lato", Arial, sans-serif;
                margin-bottom: 10px;
                border-radius: 5px;
                resize: none;
            }

            .box-h-chat .chat .chat-message .fa-file-o, .box-h-chat .chat .chat-message .fa-file-image-o {
                font-size: 16px;
                color: gray;
                cursor: pointer;
            }

            .box-h-chat .chat .chat-message button {
                color: #ffffff;
                cursor: pointer;
                background: #86b0da;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
            }

                .box-h-chat .chat .chat-message button:hover {
                    background: #75b1e8;
                }

    .box-h-chat .online, .box-h-chat .offline, .me {
        margin-right: 3px;
        font-size: 10px;
    }

    .box-h-chat .online {
        color: #86BB71;
    }

    .box-h-chat .offline {
        color: #E38968;
    }

    .box-h-chat .me {
        color: #94C2ED;
    }

    .box-h-chat align-left {
        text-align: left;
    }

    .box-h-chat .align-right {
        text-align: right;
    }

    .box-h-chat .float-right {
        float: right;
    }

    .box-h-chat .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .j-content {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .webinarframe {
        width: 100%;
        height: 595px;
    }

    @media (max-width: 765px) {
        .webinarframe {
            width: 100%;
            height: 395px;
        }
    }

    @media (max-width: 561px) {
        .webinarframe {
            width: 100%;
            height: 355px;
        }
    }

    @media (max-width: 451px) {
        .webinarframe {
            width: 100%;
            height: 305px;
        }
    }


    .webinarframeAdmin {
        width: 100%;
        height: 305px;
    }
    /*------------------------------------------------------------*/

    .mg-panelchat .people-list {
        width: 308px;
        background: #f7f7f7;
        height: 822px;
        overflow-y: scroll;
    }

    .mg-panelchat .chat {
        width: calc(100% - 308px);
        float: left;
        background: #F2F5F8;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        color: #434651;
    }


    @media (max-width: 451px) {
        .team .member-panel .box-container img {
            width: 100%;
        }
    }

.div-login-body {
    width: 338px;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid #a9a9a9;
}

.div-login-body-main {
}

.fix-login-body {
    width: 100%;
    display: flex;
    justify-content: center;
}

#LoginIn {
    display: flex;
    justify-content: center;
}

    #LoginIn .div-Aut {
        max-width: 900px;
        width: 100%;
    }


/*----*/
.member-task-list-Attachment {
    padding-top: 20px;
}

    .member-task-list-Attachment .Attachment-list-t {
        position: relative;
        text-align: center;
    }

.member-task-list-Attachment .Attachment-list-t-img {
}

    .member-task-list-Attachment .Attachment-list-t-img img {
        width: 100%;
    }

.member-task-list-Attachment .Attachment-list-t ul {
    list-style: none;
    font-size: 0;
    padding-left: 0rem;
    padding-top: 20px;
}

    .member-task-list-Attachment .Attachment-list-t li {
        display: inline-block;
        margin-right: 15px;
    }

.member-task-list-Attachment .Attachment-list-t .member {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0px 2px 15px rgb(16 110 234 / 15%);
    cursor: pointer;
}

    .member-task-list-Attachment .Attachment-list-t .member .member-img-t {
        position: relative;
        overflow: hidden;
        text-align: center;
        max-height: 200px;
    }
    .member-task-list-Attachment .Attachment-list-t .member .member-img-t .img-fluid {
        width: 100%;
    }

    .member-task-list-Attachment .Attachment-list-t .member .social-del {
        position: absolute;
        right: 0;
        top: 1px;
        right: 10px;
        transition: ease-in-out 0.3s;
        text-align: center;
    }

        .member-task-list-Attachment .Attachment-list-t .member .social-del .social-div {
            transition: color 0.3s;
            color: #222222;
            margin: 0 3px;
            padding-top: 7px;
            width: 36px;
            height: 36px;
            background: #FFFFFF;
            display: inline-block;
            transition: ease-in-out 0.3s;
            color: #8d8888;
            box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            border: 2px solid #3051a2;
            font-size: 16px;
        }


    .member-task-list-Attachment .Attachment-list-t .member .social-menu {
        position: absolute;
        right: 0;
        bottom: 1px;
        right: 10px;
        transition: ease-in-out 0.3s;
        text-align: center;
    }
        .member-task-list-Attachment .Attachment-list-t .member .social-menu .social-div {
            transition: color 0.3s;
            color: #222222;
            margin: 0 3px;
            padding-top: 7px;
            width: 36px;
            height: 36px;
            background: #FFFFFF;
            display: inline-block;
            transition: ease-in-out 0.3s;
            color: #8d8888;
            box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            border: 2px solid #3051a2;
            font-size: 16px;
        }



/*----*/
.member-task-list-Attachment-t {
    padding-top: 20px;
}

    .member-task-list-Attachment-t .Attachment-list-t {
        position: relative;
        text-align: center;
    }

    .member-task-list-Attachment-t .Attachment-list-t-img {
    }

        .member-task-list-Attachment-t .Attachment-list-t-img img {
            width: 100%;
        }

    .member-task-list-Attachment-t .Attachment-list-t ul {
        list-style: none;
        font-size: 0;
        padding-left: 0rem;
        padding-top: 20px;
    }

    .member-task-list-Attachment-t .Attachment-list-t li {
        display: inline-block;
        margin-right: 15px;
    }

    .member-task-list-Attachment-t .Attachment-list-t .member-t {
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0px 2px 15px rgb(16 110 234 / 15%);
        cursor: pointer;
    }

        .member-task-list-Attachment-t .Attachment-list-t .member-t .member-img-t {
            position: relative;
            overflow: hidden;
            text-align: center;
        }

            .member-task-list-Attachment-t .Attachment-list-t .member-t .member-img-t .img-fluid {
                width: 100%;
            }