/* * { transition: all 0.3s ease-out;} */





body {
    font-family: "Lexend", Sans-serif !important;
    overflow-x:hidden;
}

body::-webkit-scrollbar {
  width:0px;
 
}

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

/* Handle */
body::-webkit-scrollbar-thumb {
  background: #4EAACB;
  
}





.dropdown-profile .nav .nav-link {
  font-weight: 400;
}



.dropdown-profile .nav .nav-link:hover { background:#2BBBEF; color: #fff !important;}



.newnacbaar .navbar-vertical {
    background: #2BBBEF !important;
    font-family: "Lexend", Sans-serif !important;
}

    .newnacbaar .navbar-vertical .nav-link {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
        adding-left: 1.75rem;
        margin-left: 0rem !important;
        margin-right: 0rem !important;
        order-radius: .5rem;
        font-size: 15px;
        border-radius: 0px !important;
        color:#fff !important;
    }

        .newnacbaar .navbar-vertical .nav-link:hover {
            border-radius: 0px !important;
            color: #808080 !important;
        }

            .newnacbaar .navbar-vertical .nav-link:hover svg path {
                fill: #020046 !important;
            }

            .newnacbaar .navbar-vertical .nav-link:hover rect {
                stroke: #020046 !important;
            }



            .newnacbaar .navbar-vertical .active-bt svg path {
              fill: #020046 !important;
          }

          .newnacbaar .navbar-vertical .active-bt svg rect {
              stroke: #020046 !important;
            
          }

          .newnacbaar .navbar-vertical .active-bt svg circle {
            stroke: #020046 !important;
            
        }


        .#navbarVerticalNav .active-bt a svg path {
          fill:#020046;
      }

      .newnacbaar .navbar-vertical .active-bt svg path {
        fill: #020046 !important;
        stroke: #020046;
    }

          


           




.newnacbaar .navbar-vertical .nav-link .dropdown-indicator-icon svg {
                opacity: 0;
            }


.newnacbaar .parent span {
    padding-left: 0px !important;
    font-size: 13px; font-weight:400; margin-left:0px;
    text-align:left;
}

.newnacbaar .parent .nav-link {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    adding-left: 1.75rem;
    margin-left: 0rem !important;
    margin-right: 0rem !important;
    order-radius: .5rem;
    font-size: 15px;
    border-radius: 0px !important;
    color: #fff !important;
}


.reportdata h2 { color:#fff; padding-bottom:15px;}
.reportdata .form-group label { color:#fff; margin-bottom:15px;}





.newnacbaar .navbar-vertical-footer button {
    color: #fff !important;
}

    .newnacbaar .navbar-vertical-footer button:hover {
        color: #020046 !important;
        font-family: "Lexend", Sans-serif !important;
    }

.newnacbaar .navbar-vertical {
    border: none;
}

.newnacbaar .navbar-vertical-footer {
    background: #2BBBEF !important;
    border: none !important;
    padding:0px 0px;
    height:auto !important;
    
}



.topnavnew  {
    background: #020046;
    border:none;
}

    .topnavnew .navbar-logo p {
        color: #fff !important;
        font-family: "Lexend", Sans-serif !important;
        padding-left:40px;
    }

    .topnavnew ul li a {
        /* color: #fff !important; */
        font-family: "Lexend", Sans-serif !important;
    }

    .topnavnew .theme-control-toggle {
        display: none;
    }

.CommentsExtractor {
    text-align: center;
    border: 2px solid #020046;
    padding:100px 0px 40px 0px;
    border-radius: 20px;
}

    .CommentsExtractor h1 {
        font-family: "Lexend", Sans-serif !important;
        color:#fff;
        font-size:30px;
        margin-bottom:40px;
        font-weight:400;
        text-align:left;
        line-height:38px;
    }

        .CommentsExtractor h1 b { font-weight:300;}

        .CommentsExtractor h4 {
            font-family: "Lexend", Sans-serif !important;
            color: #020046;
            font-size: 18px;
            margin-bottom: 10px;
            margin-top: 32px;
        }

    .CommentsExtractor #channelUrlForm {
        margin-bottom:20px;
    }


        .CommentsExtractor #channelUrlForm input {
            padding: 8px 15px;
            font-family: "Lexend", Sans-serif !important;
            border-radius: 10px;
            border: 1px solid #020046;
            background: rgba(255, 255, 255, 0.50);
            
        }


            .CommentsExtractor #channelUrlForm input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                color: #FFF;
                font-family: Lexend;
                font-size: 15px;
                font-style: normal;
                font-weight: 300;
                opacity: 1;
            }

            .CommentsExtractor #channelUrlForm input::-moz-placeholder { /* Firefox 19+ */
                color: #FFF;
                font-family: Lexend;
                font-size: 15px;
                font-style: normal;
                font-weight: 300;
                opacity: 1;
            }

            .CommentsExtractor #channelUrlForm input:-ms-input-placeholder { /* IE 10+ */
                color: #FFF;
                font-family: Lexend;
                font-size: 15px;
                font-style: normal;
                font-weight: 300;
                opacity: 1;
            }

            .CommentsExtractor #channelUrlForm input:-moz-placeholder { /* Firefox 18- */
                
                
                color: #FFF;
                font-family: Lexend;
                font-size: 15px;
                font-style: normal;
                font-weight:300;
                opacity:1;
            }













        .CommentsExtractor #channelUrlForm button {
            border: none;
            background: #2BBBEF;
            font-family: "Lexend", Sans-serif !important;
            color:#030445;
            padding: 10px 15px;
            border-radius: 14px;
            font-size: 13px;
            margin-left:30px;
        }

            .CommentsExtractor #channelUrlForm button:hover {
                background: #fff !important;
            }


    .CommentsExtractor div button {
        border: none;
        background: none;
        font-family: "Lexend", Sans-serif !important;
        color: #2BBBEF;
        padding: 10px 20px;
        border-radius: 14px;
        font-size: 13px;
        border: 2px solid #2BBBEF;
        text-transform: capitalize;
        margin-right:15px;
    }

    .CommentsExtractor div .filter-active { background:#2BBBEF; color:#fff;}







        .CommentsExtractor div button:hover {
            background: #2BBBEF !important;
            color: #fff;
        }


        .CommentsExtractor div button:last-child {
            margin-right:0px;
        }


        #channelIdResult p {
            color: #fff;
        }

#videoListResult p { color:#fff;}




#channelIdForm {
    margin-bottom: 20px;
}

    #channelIdForm input {
        padding: 8px 15px;
        font-family: "Lexend", Sans-serif !important;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.50);
        border: 1px solid #020046;
    }



        #channelIdForm input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            opacity: 1;
            color: #FFF;
            font-family: Lexend;
            font-size: 15px;
            font-style: normal;
            font-weight:300;
        }

        #channelIdForm input::-moz-placeholder { /* Firefox 19+ */
            opacity: 1;
            color: #FFF;
            font-family: Lexend;
            font-size:15px;
            font-style: normal;
            font-weight:300;
        }

        #channelIdForm input:-ms-input-placeholder { /* IE 10+ */
            opacity: 1;
            color: #FFF;
            font-family: Lexend;
            font-size: 15px;
            font-style: normal;
            font-weight:300;
        }

        #channelIdForm input:-moz-placeholder { /* Firefox 18- */
            opacity:1;
            color: #FFF;
            font-family: Lexend;
            font-size: 15px;
            font-style: n6ormal;
            font-weight: 300;
        }




    #channelIdForm button {
        border: none;
        background: #2BBBEF;
        font-family: "Lexend", Sans-serif !important;
        color:#030445;
        padding: 10px 15px;
        border-radius: 14px;
        font-size: 13px;
        margin-left:30px;
    }

        #channelIdForm button:hover {
            background: #fff !important;
        }


#CommentsExtractor div button {
    border: none;
    background: #020046;
    font-family: "Lexend", Sans-serif !important;
    color: #fff;
    padding: 10px 15px;
    border-radius: 50px;
    font-size: 13px;
    text-transform: capitalize;
}

#channelIdForm button:hover {
    background: #fff !important;
}

.content {
    background: #fff;
}

.footer {
    padding: 0 2.5rem;
    padding-top: 25px;
}


.CommentsExtractor .dataTables_wrapper {
    position: relative;
    clear: both;
    margin: 0px 25px;
    
    margin-top: 40px;
    
}




.CommentsExtractor .dataTables_wrapper td {
        text-align: left;
        font-size: 14px;
        
    }


.chat {
    height: auto !IMPORTANT;
}




.navbar-vertical.navbar-expand-lg .navbar-vertical-content .navbar-nav .nav-link:hover {
    background: #fff !important;
}



.dropdown-profile span {
    color: #010029;
}

.dropdown-profile ul li a {
    color: #010029 !important;
    font-family: "Lexend", Sans-serif !important;
}

.dropdown-profile .btn {
    background: #010029;
    font-family: "Lexend", Sans-serif !important;
}

.videoList h4 {
    font-family: "Lexend", Sans-serif !important;
    color: #020046;
    font-size: 30px;
    margin-bottom:30px;
}

.page-title {
    font-family: "Lexend", Sans-serif !important;
    color: #020046;
    font-size: 30px;
    margin-bottom: 30px;
}


.newbutton {
  border-radius: 14px;
  background: none;
  border-radius: 14px;
  color: #FFF;
font-family: Lexend;
font-size: 13.249px;
font-style: normal;
font-weight: 600;
line-height: normal;
  background:#2BBBEF;
  border: 2px solid #2BBBEF;
}

    .newbutton:hover {
        border-radius: 14px;
        background: none;
        border-radius: 14px;
        color: #FFF;
font-family: Lexend;
font-size: 13.249px;
font-style: normal;
font-weight: 600;
line-height: normal;
        background:none;
        border: 2px solid #2BBBEF;
    }


.loginform form {
    width: 300px;
    margin: auto;
    height: auto;
    border: 2px;
}


    .loginform form label {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        text-align: left;
        margin-bottom: 5px;
        text-align: left;
        margin-top: 10px
    }

    .loginform form input {
        width: 100%;
        height: auto;
        padding: 5px 15px;
        font-family: "Lexend", Sans-serif !important;
        border-radius: 10px;
        border: 1px solid #020046;
    }

    .loginform form button {
        border: none;
        background: #020046;
        font-family: "Lexend", Sans-serif !important;
        color: #fff;
        padding: 10px 15px;
        border-radius: 50px;
        font-size: 13px;
        text-transform: capitalize;
        width:100%;
        margin-top:15px;
    }


        .loginform form button:hover {
            background: #2BBBEF !important;
        }


    .loginform form a {
        font-family: "Lexend", Sans-serif !important;
        color: #020046;
        font-size: 15px;
        margin-bottom: 20px;
        margin-block: 10px;
        display: inline-block;
    }

.loginform form a:hover { text-decoration:underline !important;}

.loginform h2 {
    color: rgb(2, 0, 70);
    font-size:25px;
    margin-bottom: 20px;
    font-family: Lexend, sans-serif !important;
    margin-bottom: 0px;
}




.newnacbaar {
    padding:0px;
    background:#030445;
}

.fixed-top {
    top:0px;
    left:0px;
    right:0px;
    z-index: 99999;
}



.topnavnew {
    border-radius:0px;
    background:rgba(14, 49, 101, 0.8) !important;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:56px !important;
    padding-right:56px !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(6px) !important;
    
}


/* .navbar-vertical.navbar-expand-lg {
width: 13.875rem;} */


.newnacbaar .navbar-vertical {
  /* height: calc(100vh - 64px) !important; */
  top: 64px !important;
  border-radius: 0px !important;
  background: rgba(14, 49, 101, 0.8) !important;
  padding: 0px 15px;
  position: fixed !important;
  z-index: 99999;
}


.footer { display:none;}

.content { background:none;}

.formmain {
    border-radius: 19.589px;
    border: 3px solid #2BDAEF;
    width: 700px;
    padding: 30px 105px;
    margin: auto;
}

.formmain label {
        width: 100%;
        text-align: left;
        color: #fff;
        font-size:16px;
       
    }

.tp label { display:none;}

.tpm { margin-bottom:30px !important;}

.formmain input {
    width: 335px;
}

.logo-text {
    display:none !IMPORTANT;
}


#navbarVerticalNav a {
    border-radius: 10px !important;
    margin-bottom:12px;
    padding-left: 12px;
    padding-top: 8px !important;
    padding-bottom: 8px !important; font-weight:400; font-size:15px;
    padding-right:12px;
    text-align:left;
    
}


.card-info { height:auto !important; width: 100%;
    margin-bottom:30px;;}

.cardwrap {
    display: flex;
    flex-wrap: wrap;
    
}



.cardwrap img { border-radius:10px 10px 0px 0px; border:4px solid #2BDAEF; border-bottom:none;}
.cardwrap .card-info { border-radius:0px 0px 10px 10px; border:4px solid #2BDAEF; border-top:none; background:#fff;}
.cardwrap .card-info h4 a {
  color: #000;
  font-family: Lexend;
font-size: 18px;
font-style: normal;
font-weight: 500;
padding-right:20px;
line-height: normal;
letter-spacing: -0.009px;
}


.cardwrap .card-info p {
  margin: 5px 0;
  font-size: 14px;
  color: #2BBBEF;
  font-family: Lexend;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}


.card-info h4 a {
    
    line-height: 23px;
}

#gridView .row {
    margin-bottom: 19px;
}   


#videoDetails {
   padding:8px 20px 20px 20px !important;
   
}


.content {
    
    padding-top: 104px;
}

.dropdown-indicator-icon { display:none !important;}

.navbar-vertical .navbar-vertical-content .nav-link-icon {
    margin-right: 7px;
    min-width: 16px !important;
    text-align: center;
}



.dropdown a {
    background: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-left:0px;
}

.dropdown a:hover {
    background: #4AFFA8;
}

    .dropdown a svg { color: #030445; }

.navbar-top .navbar-nav-icons .nav-link {
    /* padding:0px 15px !important; */
    text-align: center;
}


.topnavnew li:last-child a {
    background: none;
    padding: 0px !important;
    border:none;
}

    

    .support-chat + .btn-support-chat {
        background: #4AFFA8 !important;
        border: #4AFFA8 solid 1px !important;
        color: #030445 !important;
    }


.support-chat + .btn-support-chat span {
    color: #030445 !important;
}



/* .topnavnew .collapse ul li:last-child {
    display: none;
} */


#navbarVerticalNav a svg path {
   
    fill: #fff;
}

#navbarVerticalNav a svg {
    height: 25px;
    margin-right:10px;
    color: #fff;
}


#gridTable { width:1600px !important; float:left; margin-top:40px !important; border-radius:20px; overflow:hidden;}
#gridTable { width:auto !important; min-width:100%; float:left; margin-top:40px; border-radius:20px; overflow:hidden;}
    #gridTable tr th {
        background-color: #0b2f67;
        color: #fff;
        font-weight: 300;
    }

.dataTables_length { color:#fff;}

#gridTable tr td {
    color: #fff;
    font-weight: 400;
    font-size: 15px;
}


#gridTable tr th {
    background-color: #0b2f67;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
}

#gridTable tr th {
    background-color: #0b2f67;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    padding: 15px 20px;
    border: none;
}

.dataTables_paginate a {
    color: #fff;
    padding: 0px 0px;
}

.dataTables_paginate {
    color: #fff;
    padding: 0px 8px;
    width: auto;
    display: inline-block;
    float: right;
    padding-top: .85em;
}

.dataTables_info {
    width: auto;
    float: left;
    color: #fff;
}

.content .page-title {
    color: #fff;
    font-weight:300;
}

#gridTable_filter {
    width: auto;
    color: #fff;
    /* display: inline-block; */
    float: right;
}

.dataTables_length {
    float: left;
    width: auto;
}

#gridTable tr th:first-child {
    width: 40px;
    text-align:left;
}
/* .odd td:first-child {
    width: 40px;
    text-align: center;
    
} */

.even td:first-child {
    width: 40px;
    text-align:left;
    
}


.overflow { width:100%; height:300px; background:#000;}

.overflow {
    width: 100%;
    height: 99px;
    background: #030445;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index:999;
}




#gridTable tr td {
    background: none !important;
}

/* #gridTable tr:hover {
    background: none !important;
} */

#gridTable .dataTables_length label {
    color: #fff !important;
}
#gridTable select {
    color: #fff;
}

#gridTable_filter input {
    background: #fff;
    
}

div.dataTables_wrapper div.dataTables_length label {
    color: #fff;
}

.dataTables_wrapper .dataTables_length select {
    color: #fff;
}

.dataTables_wrapper .dataTables_length select option {
    color:#000;
}

.dataTables_info {
    color: #fff !important;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
   color: #fff !important;
  }




    /* .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #2BBBEF !important;
    } */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    
    color: #fff !important;
    
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        
        color: #fff !important;
       
    }


table.dataTable.no-footer {
    border-bottom:0px solid #fff;
}

#gridTable_length label select {
    
    margin-left: 10px;
    margin-right: 10px;
}

.dataTables_paginate .paginate_button {
    color: #fff !important;
    padding:10px;
    display:inline-block;
    
}

.CommentsExtractor th:before { display:none !important;}
.CommentsExtractor th:after {
    display: none !important;
}


table.dataTable.no-footer {
    border-bottom: 0px solid #fff !important;
}

.dataTableHide { display:none;}


body {
    margin: 0px;
    padding: 0px;
   background: #030445;
}

.mainloginwrao { width:800px; height:auto; margin:auto; margin-top:30px;}
.mainloginleft {
    width: 60%;
    height: auto;
    float: left;
}
.mainloginright {
    width: 50%;
    height: auto;
    float:right;
}


.mainloginleft #message {
    color: #fff;
}

    .mainloginleft label {
        width: 100%;
        height: auto;
        color: #FFF;
        font-family: Lexend;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 40px;
        display: inline-block;
    }

.mainloginleft input {
    border-radius: 14px;
    border: 1px #B6B6B6;
    background: rgba(255, 255, 255, 0.50);
    width: 100%;
    padding: 15px 10px;
    margin-bottom:18px;
    font-family: Lexend;
    outline:0px;
}

.mainloginleft button {
    border-radius: 14px;
    background: var(--Final-Blue, #2BBBEF);
    width: 100%;
    border: none;
    padding: 12px 0px;
    margin-top: 0px;
    font-size: 16px;
    cursor: pointer;
    border: 2px solid #2BBBEF;
    font-weight:400;
    font-family: Lexend;
    margin-top:0px;
}


    .mainloginleft button:hover {
        border-radius: 14px;
        background:none;
        width: 100%;
        border: none;
        padding: 12px 0px;
        margin-top:0px;
        font-size: 16px;
        cursor: pointer;
        color:#fff;
        border:2px solid #2BBBEF;
    }


/* .padding-right-0 {
    padding-right: 0rem !important;
} */




.mainloginleft h2 {
    color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 45.196px; /* 125.545% */
    margin: 59px 0px 0px 0px;
}


.mainloginleft p {
    color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight:300;
    line-height: 25px;
    margin: 0px;
    color: #fff;
    margin-bottom:17px;
}



.mainloginright img { width:100%; border-radius:10px;}

.logininnerwrap {
    width: 100%;
    display: inline-block;
    border: 2px solid #2BDAEF;
    border-radius: 20px;
    padding:70px 40px;
    display: flex;
    align-content: flex-start;
    align-items: center;
    justify-content: space-around;
}



.mainloginwrao {
    width: 800px;
    height: 100%;
    margin: auto;
    margin-top:0px;
    display: flex;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-evenly;
    flex-direction: column;
}


.rightlogout li { font-size:18px; color:#fff; margin-left:10px; text-transform:capitalize;}
    .rightlogout li button {
        background: #2BBBEF;
        border: none;
        color: #fff;
        padding: 5px 15px;
        border-radius:10px;
        border: 2px solid #2BBBEF;
        font-size: 17px;
    font-weight: 700;
    }

#logoutBtn svg {
    height: 25px;
    width: 25px;
    margin-top: -3px;
    
}

.profilename {
    line-height: 40px;
}

.rightlogout li button:hover {
    border: 2px solid #2BBBEF;
    background: none;
}


.tabfilter {
    white-space: nowrap;
    padding-bottom: 15px;
}

#videosTable tr th {
    background-color: #0b2f67;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
    padding: 5px 20px;
    border: none;
    margin-top:20px;
}

#videosTable { color:#fff; font-weight:400; width:1600px;}

.videomanges .dataTables_wrapper {
    margin-left: 0px;
    margin-right: 0px;
}

.videomanges .dataTables_length {
    margin-bottom: 20px;
}

.videomanges .dataTables_filter label {
    color: #fff;
}

.videomanges #videosTable_paginate {
    color: #fff !important;
}

.videomanges .dataTables_wrapper {
    margin-top: 10px;
}

.videomanges .dataTables_filter input {
    color: #fff;
}

.videomanges h4 { text-align:left; margin-bottom:10px;}
.videomanges { padding-top: 0px; margin-bottom:15px; position:relative;}

.videomanges .videosTable_paginate a {
        color: #fff !important;
    }


.mainloginleft input::-ms-input-placeholder { /* Edge 12-18 */
    color: #fff;
    opacity: 1;
    font-family: Lexend;
    font-size: 12px;
   
    font-weight: 600;
}

.mainloginleft input::placeholder {
    color: #fff;
    opacity: 1;
    font-family: Lexend;
    font-size: 16px;
    font-weight:600;
}



.container.Aichat {
    padding: 0px;
}
.Aichat h2 {
    color: #FFF;
    font-family: Lexend;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom:10px;
}

.Aichat select {
    width: 100%;
    height: auto;
    background: none;
    border-radius: 10px;
    border: 1px solid #FFF;
    padding: 12px 10px;
    color: #FFF;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin-bottom:20px;
    line-height: 151%; /* 24.16px */
    letter-spacing: -0.008px;
}
    .Aichat select option {
        color: #000;
    }


.channelfild input {
    width: 100%;
    height: auto;
    background: none;
    border-radius: 10px;
    border: 1px solid #FFF;
    padding: 12px 10px;
    color: #FFF;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    margin-bottom: 20px;
    line-height: 151%; /* 24.16px */
    letter-spacing: -0.008px;
}


    .channelfild input::-ms-input-placeholder { /* Edge 12-18 */
        color: #FFF;
        opacity: 1;
    }

    .channelfild input::placeholder {
        color: #FFF;
        opacity: 1;
    }








.Aichat .uploadbox {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1.5px solid #FFF;
    margin-bottom:20px;
    position:relative;
}

.Aichat .uploadbox:last-child { margin:0px;}




    .Aichat .uploadboxhead {
        border-bottom: 1.5px solid #FFF;
        padding: 15px 10px 10px 10px;
    }

.uploadboxhead h3 {
    color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    margin: 0px;
    line-height: 13.798px; /* 140% */
    letter-spacing: 0.111px;
    margin-bottom:6px;
}


.uploadboxhead small {
    color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 10.399px;
    font-style: normal;
    font-weight: 300;
    line-height: 15px; /* 142.857% */
    letter-spacing: 0.052px;
}


.Aichat .uploadboxhead a {
    display: inline-block;
    margin: 5px 2px;
}
.Aichat .uploadlistmain {
width:100%;
height:auto;
padding:15px 10px;
}

.runbutton {
    width: 100%;
    text-align: center;
    margin-top: 15px;
}

    .runbutton button:hover {
        background: #2BBBEF
    }

    .Aichat .uploadlistmain p {
        color: #FFF;
        font-family: Lexend;
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 151%; /* 12.08px */
        letter-spacing: -0.004px;
        word-wrap: break-word;
        white-space: nowrap;
    text-overflow: ellipsis; 
    overflow: hidden;
    padding-top:7px;
    }

    .Aichat .uploadlistmain .preBtn {
        border-radius: 10px;
        border: 1.5px #FFF;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.20);
        Selection colors Hex Final Blue #2BBBEF;
        display: inline-block;
        padding: 7px 8px;
        color:#2BBBEF;
        margin-right:10px;
    }

        .Aichat .uploadlistmain .preBtn:hover {
            background: #2BBBEF;
            color:#fff;
            text-decoration:none;
        }

    .Aichat .uploadlistmain a img { width:15px; margin-left:5px;}

    .Aichat .uploadlistmain .Cimg img {
        width:22px;
    }

    .Aichat .uploadlistmain p { margin:0px; }

.uploadlistmain .row {
    margin-bottom: 8px;
}

.uploadlistmain .rowoverflow {
    overflow-y:auto;
    overflow-x: hidden;
    height:80px;
    padding-right:10px;
}

.uploadlistmain .rowoverflow::-webkit-scrollbar {
        width:7px;
        border-radius:4px;
    }

/* Track */
    .uploadlistmain .rowoverflow::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 4px;
    }

/* Handle */
    .uploadlistmain .rowoverflow::-webkit-scrollbar-thumb {
        background: #4EAACB;
        border-radius: 4px;
    }

    /* Handle on hover */
        .uploadlistmain .rowoverflow::-webkit-scrollbar-thumb:hover {
            background: #4EAACB;
        }


.uploadlistmain .uploadicon img {
    width: 27px !IMPORTANT;
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 0px !important;
}



.uploadlistmain ul { margin:0px; padding:0px;}
    .uploadlistmain ul li {
        color: #FFF;
        font-family: Lexend;
        font-size: 13px;
        font-style: normal;
        font-weight: 300;
        line-height: 151%; /* 21.14px */
        letter-spacing: -0.007px;
        list-style:none;
        border: 1px solid #2BDAEF;
        padding:8px 12px;
        border-radius:10px;
        margin-bottom:10px;
    }

    
    .uploadlistmain ul li:last-child {
     margin-bottom:0px;
  }




        .uploadlistmain ul li.active .threedott {
            display:block;
        }

.uploadlistmain ul li:hover .hovericon { display:block;}

.uploadlistmain ul li:hover {
            border-radius: 10px;
            border: 1px #2BDAEF;
            border: 1px solid #2BDAEF;
            background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
            
        }

        .uploadlistmain ul li.active {
            border-radius: 10px;
            border: 1px #2BDAEF solid;
            background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
            border: 1px solid #2BDAEF;
        }

            .uploadlistmain ul li.active .threedott {
                color:#2BDAEFl
            }




            .uploadlistmain .threedott {
                float: right;
                margin-top: -3px;
                position: relative;
                display: none;
            }

.uploadlistmain .dotttooktip {
    width: 123px;
    height:auto;
    display:none;
    flex-shrink: 0;
    border-radius: 14px;
    border: 1px solid var(--Final-Green, #4AFFA8);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);
    padding:5px;
    z-index:99;
   right:-10px;
   position:absolute;
}

.editicon {
    width: auto;
    height: auto;
    margin-right: 10px;
    margin-right: 5px;
    display: inline-block;
}


.uploadlistmain .threedott:hover .dotttooktip {
    display: block;
}




    .uploadlistmain .dotttooktip ul {
        margin: 0px;
        padding: 0px;
    }

    .uploadlistmain .dotttooktip ul li {
        padding:5px 0px !important;
    }
    .uploadlistmain .dotttooktip ul li a {
        color: var(--label-primary, #000);
        font-family: Lexend;
        font-size: 13.5px;
        font-style: normal;
        font-weight:400;
        padding:3px 6px;
        line-height: 151%; /* 24.16px */
        letter-spacing: -0.008px;
    }

        .uploadlistmain .dotttooktip ul li a:hover { color:#fff;}

        .uploadlistmain .dotttooktip ul li a img {
            margin-left: 0px;
            margin-right: 5px;
        }

        .uploadlistmain .dotttooktip ul li a:hover img {
            filter: brightness(0) invert(1);
        }






        .uploadlistmain .dotttooktip ul li:hover {
            text-decoration: none;
            background: #2BBBEF;
        }

    .uploadlistmain .dotttooktip ul li a:hover {
        text-decoration: none;
        background: ##2BBBEF;
    }


.leftsearchbox {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: #030445;
    display: inline-block;
    padding:8px 10px;
    width: 100%;
    margin-bottom:15px;
}








.leftsearchbox input {
    color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 151%; /* 24.16px */
    letter-spacing: -0.008px;
    background:none;
    border:none;
    outline:none;
    width:85%;
    margin-top:2px;;
}


    .leftsearchbox input::-ms-input-placeholder { /* Edge 12-18 */
        color: #2BBBEF;
        opacity: 1;
    }

.run {
    display: inline-flex;
    height: auto;
    padding: 4px 14px;
    justify-content: center;
    align-items: center;
    line-height: 22px;
    flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
    border: none;
}

    .leftsearchbox input::placeholder {
        color: #2BBBEF;
        opacity: 1;
    }


    .leftsearchbox button {
        border: none;
        background: none;
        float: right;
    }


.chatwrapmain {
    width: 100%;
    height:100%;
    border-radius: 10px;
    border: 1.5px solid #FFF;
    background: #030445;
    position:relative;
    padding:20px 0px 15px 0px;
    min-height:617px;
}

    .chatwrapmain .chatmain {
      width: calc(100% - 47px);
        height: auto;
        border-radius: 10px;
        border: 2px solid #2BDAEF;
        padding:8px 10px;
        position:absolute;
        bottom:28px;
        left:22px;
        z-index:999;
        /* background: linear-gradient(75deg, rgba(43, 218, 239, 0.00) 1.38%, rgba(74, 255, 168, 0.00) 100%); */
        background:#030445;
        
    }

        .chatwrapmain .chatmain input {
            width: 100%;
            border: none;
            color: rgba(255, 255, 255, 0.80);
            font-family: Lexend;
            font-size: 14px;
            font-style: normal;
            font-weight: 300;
            background:none;
            border:none;
            outline:0px;
            height:100%;
            line-height: 151%; /* 21.14px */
            letter-spacing: -0.007px;
        }


        .chatwrapmain .chatmain textarea {
          width: 100%;
          border: none;
          color: rgba(255, 255, 255, 0.80);
          font-family: Lexend;
          font-size: 14px;
          font-style: normal;
          font-weight: 300;
          background:none;
          border:none;
          outline:0px;
          height:auto;
          margin-top:4px;
          resize:none;
          line-height: 151%; /* 21.14px */
          letter-spacing: -0.007px;
          overflow:hidden;
          max-height:400px;
      }


.chatwrapmain .chatmain textarea::-ms-input-placeholder { /* Edge 12-18 */
        color: #fff;
        opacity: 1;
    }

.chatwrapmain .chatmain textarea::placeholder {
        color:#fff;
        opacity: 1;
    }






        #chatsuggbox {
            height:30px;
            margin: 0px;
            text-align: center;
            cursor:pointer;
        }


        #chatsuggbox svg {
          height:16px;
          margin: 0px 3px;
      }



        #submitBtn img {
            height: 32px;
        }

/* .fullscreendiv .chatmain input { 
    width:89%; } */

    .searchleft {
      display: inline-block;
      width: 75%;
      height: 30px;
      width: calc(100% - 130px);
  }

.searchright {
    width: auto;
    float: right;
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 10px;
    bottom:10px;
}






.chatwrapmain .chatmain input::-ms-input-placeholder { /* Edge 12-18 */
                color: #fff;
                opacity: 1;
            }

.chatwrapmain .chatmain input::placeholder {
                color:#fff;
                opacity: 1;
            }

.chatwraphead { border-bottom:1px solid #fff; padding:15px 10px; text-align:right; margin-bottom:20px;}


    .chatwraphead .plabtn {
        width:250px;
        height:auto;
        float:left;
        position:relative;
 }



.chatwraphead .plabtn a {
    text-transform: uppercase;
    color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20.798px;
    letter-spacing: 0.111px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.20);
    color: #fff !IMPORTANT;
    display: inline-block;
    padding: 10px 15px;
    float: left;
}


.chatwraphead .plabtn a:hover {
            background: #2BBBEF;
            text-decoration: none;

 }

 .pading-right-0 { padding-right:0px;}



.plabtn ul {
    position: absolute;
    left: 0px;
    width: 292px;
    border-radius: 14px;
    border: 1px solid var(--Final-Green, #4AFFA8);
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);
    top: 41px;
    padding: 10px 20px;
    display: none;
}

.plabtn ul li {
        text-align: left;
        list-style: none;
        padding: 5px 10px;
        border: 1px solid #fff;
        cursor: pointer;
 }


.plabtn ul li:last-child { color:red;}

    .plabtn ul li:hover {
        border-radius: 10px;
        border: 1px solid #2BDAEF;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    }

.chatwraphead .plabtn:hover ul {
    display: block;
}




        .chatwraphead button {
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.20);
            color: var(--Final-Blue, #2BBBEF);
            font-family: Lexend;
            font-size: 12px;
            font-style: normal;
            border: none;
            padding: 10px 15px;
            font-weight: 400;
            line-height: 20.798px; /* 173.319% */
            letter-spacing: 0.111px;
        }

        .chatwraphead button:hover {
            background:#2BBBEF;
            color:#fff;
        }







.chatwrapmain .chatmain button {
   border: none;
    
}
    .chatwrapmain .quechat {
        width:auto;
        max-width:90%;;
        height: auto;
        display: inline-block;
        padding: 15px 15px;
        border-radius: 10px;
        border: 1px solid #2BDAEF;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
        color: rgba(255, 255, 255, 0.80);
        text-align: right;
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        margin-bottom: 15px;
        line-height: 151%; /* 21.14px */
        letter-spacing: -0.007px;
    }

    .chatwrapmain .anschat {
        border-radius: 10px;
        border: 1px solid #2BDAEF;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%);
        color: rgba(255, 255, 255, 0.80);
        text-align: justify;
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        padding: 15px 15px;
        margin-bottom: 15px;
        line-height: 151%; /* 21.14px */
        letter-spacing: -0.007px;
        /* display: flex; */
    }

.chatwrapmain .anschat h4 {
    color: rgba(255, 255, 255, 0.80);
   
}


.fullscreendiv {
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    top:100px;
    padding: 0px;
    z-index:99;
    top:0px;
}

.fullscreen {
    width: 30px;
    height: auto;
    position: absolute;
    z-index: 999;
    bottom: 3px;
    left: 5px;
    cursor:pointer;
}

.fullscreendiv .fullscreen svg path {
    fill: #4AFFA8;
}



.fullscreendiv .chatmain {
    width: 95.5%;
}

.sharebutton:hover .sharepopup { display:block;}


.sharepopup {
    width:220px;
    height:auto;
    flex-shrink: 0;
    position: absolute;
    left: -30px;
    /*bottom: 27px;*/
    padding-bottom:26px;
    display:none;
    z-index:99;
}

.sharepopup ul { margin:0px; padding:0px; list-style:none;  border-radius: 10px; padding: 7px 10px;
  border: 1px solid var(--Final-Green, #4AFFA8);
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);}


.sharepopup ul li { line-height:22px; text-align:left; padding:10px 8px; color: #030445;
font-family: Lexend;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    border: 1px solid #fff;
    line-height: 151%; /* 24.16px */
    letter-spacing: -0.008px;}

.sharepopup ul li svg {
        margin-right: 5px;
    }


.sharepopup ul li:last-child svg { margin-right:10px;}




    .sharepopup ul li:hover { border-radius: 10px;
        border: 1px solid #2BDAEF;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

.chathead-hide { display:none;}




.chatediticon {
    width: 19px;
    height: 30px;
    display: inline-block;
    margin-right: 20px;
    /* float: left; */
}



.mainchatsugg {
  border-radius: 10px;
  border: 1px solid var(--Final-Green, #4AFFA8);
  background: #FFF;
  padding: 15px;
  box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);
  position: absolute;
  width: 100%;
  left: 0px;
  bottom: 57px;
  display: none;
  max-height: 400px;
  height:auto;
  overflow: scroll;
  z-index: 99;
  overflow-x: auto;
}




.mainchatsugg::-webkit-scrollbar {
  width: 7px;
  border-radius: 4px;
}

/* Track */
.mainchatsugg::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.mainchatsugg::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}







.chatsuggopen { display:block;}


    .mainchatsugg .nav-link {
        border-radius: 10px;
        color: #030445;

font-family: Lexend;
font-size: 15px;
font-style: normal;
font-weight: 400;
margin-right:10px;
}

    .mainchatsugg .nav-link.active {
        border-radius: 10px;
        border: 1px solid #2BDAEF;
        color:#030445;
        font-size: 15px;

font-family: Lexend;

font-style: normal;
font-weight: 400;
line-height: 151%; /* 21.14px */
letter-spacing: -0.007px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}


.mainchatsugg ul { margin:0px; padding:0px;} 
.mainchatsugg ul li { list-style:none; color: var(--Dark-Blue, #010029);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    margin-bottom:10px;
    padding:10px;
    border-bottom:1px solid #F5F5F5;
    line-height: 151%; /* 21.14px */
    border-radius:10px;
    letter-spacing: -0.007px;}

.mainchatsugg ul li svg { float:right;}


.mainchatsugg ul li a {
    padding: 5px 0px;
    display: inline-block;
    color: var(--Dark-Blue, #010029);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 151%;
    letter-spacing: -0.007px;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mainchatsugg ul li a:hover { text-decoration:none;}










.chatwrapmain .searchsticky {
  width:100%;
  height: auto;
  border-radius: 10px 10px 0px 0px;
  border:2px solid #2BDAEF;
  padding:20px 10px;
  position:sticky;
  bottom:0px;
  left:0px;
  border-bottom:0px;
  background:#030445;
  animation: slideDown 1s ease-out;
  z-index:99;
  
}


@keyframes slideDown {
  from {
    transform: translateY(250%);
    
  }
  to {
    transform: translateY(0%);
    
  }
}





.data-sources-loader {
  display: inline-block;
  margin-top:0px;
  /* float: right; */
}

.data-sources-loader span {
  float: right;
  width: auto !important;
  font-size: 18px;
  padding: 0px;
  margin: 0px;
  margin-top: 2px !important;
  margin-left: 5px;
}


.data-sources-loader span a { text-decoration:underline; color:#fff;}
.data-sources-loader span a:hover { text-decoration:none; color:#fff;}

.data-sources-loader svg {
  float:left;
  
}

























.chatoverflowscrool {
    overflow-y: auto;
    overflow-x: auto;
    height:auto;
    max-height: calc(400px - -117px);
    position:static;
    padding-bottom:120px;
    min-height: calc(400px - -117px);
  
}


.chatoverflowscrool::after {
  position: absolute;
  z-index: 99;
  content: '';
  bottom: 45px;
  width: 100%;
  min-height: 110px;
  background: rgb(3, 11, 69);
  background: linear-gradient(0deg, rgba(3, 11, 69, 0.9892550770308123) 20%, rgba(3, 11, 69, 0) 100%);
  left: 0px;
  height: 140px;
}

#loadingMessage { width:100%; height:auto; text-align:center; color:#fff;}


.chatoverflowscrool::-webkit-scrollbar {
    width: 7px;
    border-radius: 4px;
}

/* Track */
.chatoverflowscrool::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 4px;
    }

/* Handle */
.chatoverflowscrool::-webkit-scrollbar-thumb {
        background: #4EAACB;
        border-radius: 4px;
    }

    /* Handle on hover */
    .uploadlistmain .rowoverflow::-webkit-scrollbar-thumb:hover {
        background: #4EAACB;
    }





.chatoverflowscrool1 {
    overflow-y: scroll;
    overflow-x: auto;
    height:151px;
    margin-bottom:15px;
    padding-right:10px;
}

    .chatoverflowscrool1::-webkit-scrollbar {
        width: 7px;
        border-radius: 4px;
    }

    /* Track */
    .chatoverflowscrool1::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 4px;
    }

    /* Handle */
    .chatoverflowscrool1::-webkit-scrollbar-thumb {
        background: #4EAACB;
        border-radius: 4px;
    }





.#loadingMessage {
    font-size: 2em;
    font-weight:300;
}

.dots {
    display: inline-block;
    width: 1em;
    text-align: left;
}

.dots::after {
        content: '...';
        animation: dots 1.5s steps(3, end) infinite;
    }

@keyframes dots {
    0%, 20% {
        content: '   ';
    }

    40% {
        content: '.  ';
    }

    60% {
        content: '.. ';
    }

    80%, 100% {
        content: '...';
    }
}
















.margin-10 { margin:0px 10px;}




.anschat b svg {
    margin-right: 10px;
}

.anschat b { display:inline-block; float:left;}
.anschat p {
    display: inline-block;
    float: right;
    width:auto;
}

.padding-right-0 {
    padding-right: 0px;
}



.generationwrap { width:100%; height:auto; padding:0px 0px;}

    .generationwrap button {
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.20);
        border: none;
        padding:0px 0px;
        font-family: Lexend;
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        color:#fff;
        margin:0px 3px;
        line-height: 20.798px; /* 173.319% */
        letter-spacing: 0.111px;
        width:30px;
    height:30px;
    }
.generationwrap button:hover {
background:#2BBBEF;
color:#fff;}


.generationwrap .suggbtn {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.20);
    border: none;
    padding:0px 0px;
    font-family: Lexend;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    color:#fff;
    margin:0px 3px;
    line-height: 20.798px; /* 173.319% */
    letter-spacing: 0.111px;
    width:30px;
height:30px;
display:inline-block;
padding-top:4px;
}

    .generationwrap .clearChatBtn {
        
        color: white;
        position: relative; /* Position relative to show tooltip */
    }
    .generationwrap .clearChatBtn:hover{
        
        color:white;
    }

    .generationwrap .suggbtn:hover {
        background: #2BBBEF;
        color: #fff;
    }
.suggbtn {
    position: relative;
}

.tooltip {
    visibility: hidden;
    width: 100px; /* Adjust width as needed */
    background-color: black; /* Tooltip background color */
    color: #fff; /* Tooltip text color */
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    bottom: 125%; /* Position above the button */
    left: 50%;
    margin-left: -50%; /* Center the tooltip */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Fade effect */
}
.tooltipsug {
    visibility: hidden;
    width: 200px; /* Adjust width as needed */
    background-color: black; /* Tooltip background color */
    color: #fff; /* Tooltip text color */
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1000;
    bottom: 125%; /* Position above the button */
    left: 50%;
    margin-left: -50%;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s; /* Fade effect */
    transform: translateX(-50%); /* Center the tooltip */
}
.clearChatBtn:hover .tooltip {
    visibility: visible;
    opacity: 1; /* Show tooltip on hover */
}

.promptpopup {
    width: 650px;
    height: auto;
    border-radius: 12px;
    border: 2px solid var(--Final-Gradient, #2BDAEF);
    background: #030445;
    padding: 40px;
}

.promptpopup .modal-header {
        border:none;    }

.promptpopup .searchtopbox {
        width: 100%;
        height: auto;
        border-radius: 10px;
        border: 1px solid #2BDAEF;
        padding:10px 20px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    }

    .generationwrap button svg {
        font-size:14px;
    }

.searchtopbox input {
    background: none;
    border: none;
    outline: 0px;
    width: 95%;
    color: #2BBBEF;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 151%; /* 24.16px */
    letter-spacing: -0.008px;
}
    .searchtopbox input::-ms-input-placeholder { /* Edge 12-18 */
        color: #2BBBEF;
        opacity:1;
    }

    .searchtopbox input::placeholder {
        color: #2BBBEF;
        opacity: 1;
    }

.searchicon {
    width: auto;
    display: inline-block;
}

.newprompt {
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    
}

.newprompt .modal-dialog { max-width:697px; display: flex;
    align-items: center; height:100%;}

.runpopupmain { width:100%; height:auto; text-align:center; margin-top:20px;}

 .runpopupmain button {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.20);
        border: none;
        color: #2BBBEF;
        padding:5px 15px;
        font-size:14px;
        margin:0px 3px;
        line-height: 25px;
    }

.runpopupmain button:hover {
background: #2BBBEF; color:#000; }




    .chatfullscreen {
        width: 100%;
        height: 752px;
    }

.atticon {
    width: 20px;
    display: inline-block;
    float: left;
    line-height: 29px;
    cursor:pointer;
    position:relative;
}

    .atticon:hover .atticonpopup { display:block;}


    .atticonpopup {
        width: 280px;
        height: auto;
        border-radius: 14px;
        border: 1px solid var(--Final-Green, #4AFFA8);
        background: #FFF;
        padding: 10px 10px;
        box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);
        position: absolute;
        bottom: 20px;
        left: -11px;
        display: none;
    }


.atticonpopup ul { margin:0px; padding:0px; list-style:none;}
    .atticonpopup ul li {
        margin-bottom:5px;
        font-size: 14px;
        border: 1px solid #fff;
        padding:6px 12px;
    }

.atticonpopup ul li:nth-child(3n) { color:red;}


        .atticonpopup ul li:hover {
            border-radius: 10px;
            border: 1px solid #2BDAEF;
            background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
        }
   

        .ansicon button {
            /* margin: 0px 5px; */
            padding:7px;
            display: inline-block;
            text-align: center;
            line-height:0px;
            position:relative;
            background:none;
            border:none;
            outline:0px;
        }

            .ansicon button:hover {
                background: #2BBBEF;
                padding: 7px;
                border-radius: 50%;
            }

            .ansicon button img {
                height: 14px;
            }


    .ansicon {
        border-radius: 7.006px;
        border: 1.051px solid rgba(255, 255, 255, 0.50);
        background: #030445;
        padding:5px 10px;
        width: auto;
        display: inline-block;
        margin-top: 15px;
    }


    .uploadsugetion {
        display: none;
        background: #fff;
        z-index: 9;
        position: absolute;
        width:95%;
        padding:15px 5px;
        border-radius: 10px;
border: 1px solid var(--Final-Green, #4AFFA8);
background: #FFF;
top:146px;
box-shadow: 0px 4px 4px 0px rgba(189, 189, 189, 0.25);
    }

    .uploadsugetion label {
        width: 100%;
        padding: 8px 8px;
        border: 1px solid #fff;
    }

    .uploadsugetion label input { float:right;}

    .uploadsugetion label:hover { border-radius: 10px;
        border: 1px solid #2BDAEF;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}


        .uploadsugetioninput {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
          }
          
          .uploadsugetion .form-group {
            display: block;
            margin-bottom:5px;
          }
          
          .uploadsugetion .form-group input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            display: none;
            cursor: pointer;
          }
          
          .uploadsugetion .form-group label {
            position: relative;
            cursor: pointer;
          }

          .uploadsugetion .form-group:last-child label{ color:red;}
          
          .uploadsugetion .form-group label:before {
            content:'';
            -webkit-appearance: none;
            background-color: transparent;
            border: 2px solid #020046;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
            padding: 10px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            margin-right: 5px;
            float:right;
          }
          
          .uploadsugetion .form-group input:checked + label:after {
            content: '';
            display: block;
            position: absolute;
            top: 11px;
            /* left: 9px; */
            width: 6px;
            height: 14px;
            border: solid #020046;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
            /* float: right; */
            right: 21px;
        }


        .uploadlistmain .uploadicon img { margin-bottom:0px;}

        .uploadlistmain button img { height:auto;}

        .leftsearchbox button img {
            /* height: 37px; */
            /* width: 39px; */
        }
          


        .promptBtn a {
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.20);
            color: var(--Final-Blue, #2BBBEF);
            font-family: Lexend;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 20.798px;
            letter-spacing: 0.111px;
            display: inline-block;
            width: 100%;
            text-align: center;
            padding: 10px 0px;
        }


        .promptBtn a:hover { background:#2BBBEF; text-decoration:none;; color: #fff;}
        .promptBtn .cancelbutton { width:100%; height:auto;}

        .cancelbutton {
            text-align: center;
            padding: 20px 0px;
        }

        .newprompt .modal-content { border-radius: 12px;
            border: 2px solid var(--Final-Gradient, #2BDAEF);
            width: 100%;
height: 494x;
flex-shrink: 0;
            background: #030445; } 

.newprompt .modal-footer button {
                margin: auto;
            }

 .newprompt .popupinnerbox { border-radius: 10px;
    border: 1px solid #2BDAEF;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

    .newprompt .popupinnerbox ul {
        margin: 0px;
        padding: 0px;
        height: 235px;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 30px;
        margin-bottom: 15px;
    }


    .newprompt .popupinnerbox ul::-webkit-scrollbar {
        width: 7px;
        border-radius: 4px;
    }

    /* Track */
    .newprompt .popupinnerbox ul::-webkit-scrollbar-track {
        background: #fff;
        border-radius: 4px;
    }

    /* Handle */
    .newprompt .popupinnerbox ul::-webkit-scrollbar-thumb {
        background: #4EAACB;
        border-radius: 4px;
    }






    .newprompt .popupinnerbox ul li { list-style:none; color: var(--Final-Blue, #2BBBEF);
        font-family: Lexend;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        margin-bottom:10px;
        line-height: 151%; /* 24.16px */
        letter-spacing: -0.008px;}

        .newprompt .modal-body {
            padding: 40px 30px 0px 30px;
        }
        .newprompt .restart { border-radius: 10px; border:none;color:#fff; padding:5px 10px; margin-bottom:10px;;
            background: rgba(255, 255, 255, 0.20); float:right; color:#2BBBEF; cursor:pointer; margin-right:20px;}


        .newprompt .btn-primary { border-radius: 10px;
            background: var(--Final-Blue, #2BBBEF); color: #030445;
            font-family: Lexend;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 11.798px; /* 173.319% */
            letter-spacing: 0.111px;}

            .newprompt .btn-primary:hover {  background: rgba(255, 255, 255, 0.20); color: var(--Final-Blue, #2BBBEF);}

            .closebtn { position: absolute; right:10px; top:10px; border:none; background:none; z-index:999;;}

         .newprompt .btn-secondary { border-radius: 10px;
            background: rgba(255, 255, 255, 0.20); color: var(--Final-Blue, #2BBBEF);
            font-family: Lexend;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 11.798px; /* 173.319% */
            letter-spacing: 0.111px;}

            .newprompt .btn-secondary:hover {  background: var(--Final-Blue, #2BBBEF); color: #030445;}

            .cancelbutton button {
                margin: 0px 5px;
            }
        
        .newprompt .restart:hover { background:#2BBBEF; color:#fff;;}

     .newprompt .popupinnerbox .popupnotification { border-radius: 10px;
        border: 1px solid #2BDAEF; display:inline-block; padding:10px 15px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

        .newprompt .popupinnerbox .popupnotification p { color: #FFF;

            font-family: Lexend;
            font-size: 10px;
            font-style: normal;
            font-weight: 300;
            display:inline-block;
            line-height: 151%; /* 15.1px */
            letter-spacing: -0.005px;}

            .popupnotification p {
                width: 90%;
                float: right;
                margin:0px;
            }

.newprompt .popupinnerbox .popupnotification b { width:37px; display:inline-block;}

.newprompt .btn-close {
    background-clip: unset;
    position: absolute;
    right: 10px;
    top: 10px;
}
          


.download-button {
    background: none;
    border: none;
    padding-top: 8px;
}


.uploadsugetion form { height:160px; overflow-y: auto; overflow-x:hidden; margin-bottom:20px; padding: 0px 5px;}

.uploadsugetion form::-webkit-scrollbar {
    width: 7px;
    border-radius: 4px;
}

/* Track */
.uploadsugetion form::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 4px;
}

/* Handle */
.uploadsugetion form::-webkit-scrollbar-thumb {
    background: #4EAACB;
    border-radius: 4px;
}


 

 #applySelectionButton {
    background: #2BBBEF;
    border: none;
    color: #fff;
    padding:8px 20px;
    border-radius: 20px;
    border: 2px solid #2BBBEF;
    margin-left:13px;
}


#applySelectionButton:hover {
    background: #fff;
    border: none;
    color: #2BBBEF;
    padding:8px 20px;
    border-radius: 20px;
    border: 2px solid #2BBBEF;
}


.uploadsugetion form label input {
    float: left;
    margin-right: 10px;
    }


.uploadsugetion label p {
    color: #000 !important;
    font-size: 15px !important;
    padding: 0px !important;
    margin: 0px !important;
}


.active-bt { background: #fff;}

.active-bt path { fill:#000 !important;}
.active-bt span { color:#000;}


.Aichat select option {
    color: #000;
}



.chatmainwrap {
    position: fixed;
    width: 43%;
    height: auto;
    background: #fff;
    min-height: 80px;
    bottom: 0px;
    right: 34px;
}


.menuhover .show {
    background: #2BBBEF;
    border-radius: 0px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 10px;
}

.show li a {
    border-radius:0px !important;
    margin-bottom: 0px ! IMPORTANT;
    font-size: 14px !important;
    padding:10px;
}

.show li a svg  {
    height:20px !important;
    margin-right: 0px !important;
    color: #fff;
}




.show li a img  {
    height: 16px !important;
    margin-right: 0px !important;
    color: #fff;
}






#navbarVerticalNav .show li a:hover  {
border-radius: 0px !important;}

#navbarVerticalNav .show li a {
    border-radius: 0px !important;}


#navbarVerticalNav .show li:first-child a:hover { border-radius:15px 15px 0px 0px !important;}




.chanaldetils_title { background:#4AFFA8; border-radius: 12px; padding:20px; color: var(--Dark-Blue, #010029);
    font-family: Lexend;
    font-size:30px;
    font-style: normal;
    font-weight: 500;
    line-height: 45.196px; /* 112.991% */
    letter-spacing: -2.8px;
    
    border: 2px solid var(--Final-Green, #4AFFA8); box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.30);
}


.videodetilswrap { margin-top:20px;}
.chanlepic { width:100%; height:auto; margin-top:20px; }

.chanlepic img { width:100%; border-radius:20px; border-radius: 16px;
    
    -webkit-box-shadow: 10px 10px 5px 0px rgba(74,255,168,1);
-moz-box-shadow: 10px 10px 5px 0px rgba(74,255,168,1);
box-shadow: 10px 10px 5px 0px rgba(74,255,168,1);
   }


.videodetilswrap h2 { color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    margin-bottom:13px;
    line-height: normal;}


.rightlist ul { margin:0px; padding:0px; padding-bottom:10px;}

.rightlist ul li { color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    border-radius: 10px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    list-style:none;
    padding:10px;
    line-height: 151%; /* 27.18px */
    display: inline-block;
    min-width:132px;
    border: 1px solid #0d3260;
    letter-spacing: -0.009px; margin-right:5px;}

.rightlist ul li:hover b svg path { fill:#4AFFA8}



.rightlist button { color: var(--blanco, #FFF) !important;
  font-family: Lexend !important;
  font-size: 16px !important;
  font-style: normal;
  font-weight:300 !important;
  border-radius: 10px !important;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  list-style:none;
  padding:10px !important;
  line-height: 151%; /* 27.18px */
  display: inline-block;
  min-width:132px !important;
  border: 1px solid #0d3260 !important;
  letter-spacing: -0.009px; margin-right:7px !important;}

  .rightlist button:hover {
    border: 1px solid #2BDAEF !important;
}

.rightlist .active {
  border: 1px solid #2BDAEF !important;
}




.rightlist button:hover b svg path { fill:#4AFFA8;}


.videodetilswrap .youtubetext h3 { color:#fff !important; font-weight:300;}

.datause h3 {
  color: #fff;
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 15px;
}


.datause h2 {
  color: #fff;
  font-weight: 300;
  font-size: 17px;
  margin-bottom: 15px;
}




.datause ul { margin:0px; padding:0px;}

.datause ul li {
  list-style: none;
  width: 22.33%;
  display: inline-block;
}
.datause span {
  width: 100%;
  display: inline-block;
  margin-top:9px;
  color: #fff;
  font-weight: 300;
  font-size: 13px;
}


.datause .btn-primary {
  background: #2BBBEF;
  border-radius: 12px;
  padding: 4px 16px;
  border: 2px solid #2BBBEF;
  float: left;
  margin-right: 9px;
  font-size: 14px;
}

.datause .btn-primary:hover {
 
  border-radius: 12px;
  padding: 4px 16px;
  border: 2px solid #2BBBEF;
  float: left;
  margin-right: 9px;
  font-size: 14px;
}






/* Tooltip container */
.rightlist .tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.rightlist .tooltip1 .tooltiptext {
  visibility: hidden;
  width: 100%;
  height:100%;
  background-color: #2BBBEF;
  color: #fff;
  text-align: center;
  padding:10px 0;
  top: 0px;
  border-radius: 6px;
  transition: all 0s ease-out;
  position: absolute;
  z-index: 1;
  left: 0px;
  line-height: 11px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.rightlist .tooltip1:hover .tooltiptext {
  visibility: visible;
  transition: all 0s ease-out;
}

.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #2BBBEF transparent transparent transparent;
}









    

    
.rightlist ul li:hover { border: 1px solid #2BDAEF;}

.rightlist ul {
    margin: 0px;
    padding: 0px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom:10px;
}



.rightlist ul::-webkit-scrollbar {
    height:4px;
    border-radius:4px;
}

/* Track */
.rightlist ul::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 4px;
}

/* Handle */
.rightlist ul::-webkit-scrollbar-thumb {
    background: #4EAACB;
    border-radius: 4px;
}

/* Handle on hover */
.rightlist ul::-webkit-scrollbar-thumb:hover {
        background: #4EAACB;
    }



    .rightlist ul li b {
        float: right;
    }


    .rightlist ul li span {
        margin-right:30px;
    }

    .rightlist button span {
      margin-right:10px !important;
  }


.channelinfomain { width: 100%; height:auto; margin-top:20p;} 

.rightlist {
    margin-bottom:20px;
}

.channelinfowrap {transition: all 0.5s ease-out; margin-bottom:15px; border-radius: 18px; padding:13px 20px; background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
}
.channelinfowrap span { color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 151%; /* 30.2px */
    letter-spacing: -0.01px;}

    .channelinfowrap p {
        color: #FFF;
        font-family: Lexend;
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        word-break:break-word;
        line-height: 151%; /* 24.16px */
        letter-spacing: -0.008px;}

 .channelinfowrap:hover { background:#175776; transition: all 0.5s ease-out;}

 .padding-left-7 { padding-left:7.5px;}
 .padding-right-7 { padding-right:7.5px;}


 .bottomtabing .nav-item button {
  color: #B6B6B6;

    font-family: Lexend;
    font-size:17px;
    font-style: normal;
    font-weight: 300;
    line-height: 40px; /* 211.429% */}

 .bottomtabing .nav-item .active {
    color: #FFF;
    font-family: Lexend;
    font-size:17px;
    font-style: normal;
    font-weight: 400;
    border-bottom:#2BDAEF;
    line-height: 40px; /* 211.429% */}

    .bottomtabing .nav-tabs {
        border-bottom: 0px solid rgba(0, 0, 0, 0);
        width: 100%;
        border-bottom: 1px solid #fff;
    }

    .bottomtabing .tab-pane { border-radius: 10px;
        border: 1px solid #2BDAEF; padding:30px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%); }

.bottomtabing .tab-pane p {
 color:#fff; color: rgba(255, 255, 255, 0.80);

    text-align: justify;
    font-family: Lexend;
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    word-break:break-word;
    line-height: 26px; /* 157.143% */
    letter-spacing: -0.007px;} 

    .bottomtabing .tab-pane { margin-top:40px;;}

    .bottomtabing {
        padding-top:25px;
    }



    #loadingMessage { position:relative;}

    .nav-item a { margin-bottom:0px !important;}


 


.lastmenu .nav-item a:hover svg path { stroke: #000; }

.lastmenu .nav-item a:hover svg circle { stroke: #000; }



    .loading-overlay .container {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100px;
        margin-left: -230px;
        margin-top: -50px;
        display: block;
        width: 500px;
      }
      
      .loading-overlay .loader {
        position: relative;
        display: block;
        width: 100%;
        height: 10px;
        margin-top: 38px;
      }
      
      /* ooo, css circles*/
      .loading-overlay .circle {
        display: inline-block;
        position: relative;
        /* key up the animations! */
        -webkit-animation: dotloader 2.5s infinite;
        -moz-animation: dotloader 2.5s infinite;
        -ms-animation: dotloader 2.5s infinite;
        -o-animation: dotloader 2.5s infinite;
        animation: dotloader 2.5s infinite;
      }
      



      #loadingMessage .container {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100px;
        margin-left: -230px;
        margin-top: -50px;
        display: block;
        width: 500px;
      }
      
      #loadingMessage .loader {
        position: relative;
        display: block;
        width: 100%;
        height: 10px;
        margin-top: 38px;
      }
      
      /* ooo, css circles*/
      #loadingMessage .circle {
        display: inline-block;
        position: relative;
        /* key up the animations! */
        -webkit-animation: dotloader 2.5s infinite;
        -moz-animation: dotloader 2.5s infinite;
        -ms-animation: dotloader 2.5s infinite;
        -o-animation: dotloader 2.5s infinite;
        animation: dotloader 2.5s infinite;
      }





      .circle + .circle {
        margin-left: -25px;
        /* staggered effect cause by delay property */
        -webkit-animation: dotloader 2.5s 0.2s infinite;
        -moz-animation: dotloader 2.5s 0.2s infinite;
        -ms-animation: dotloader 2.5s 0.2s infinite;
        -o-animation: dotloader 2.5s 0.2s infinite;
        animation: dotloader 2.5s 0.2s infinite;
      }
      
      .circle + .circle + .circle {
        margin-left: -25px;
        -webkit-animation: dotloader 2.5s 0.4s infinite;
        -moz-animation: dotloader 2.5s 0.4s infinite;
        -ms-animation: dotloader 2.5s 0.4s infinite;
        -o-animation: dotloader 2.5s 0.4s infinite;
        animation: dotloader 2.5s 0.4s infinite;
      }
      
      .circle + .circle + .circle + .circle {
        margin-left: -25px;
        -webkit-animation: dotloader 2.5s 0.6s infinite;
        -moz-animation: dotloader 2.5s 0.6s infinite;
        -ms-animation: dotloader 2.5s 0.6s infinite;
        -o-animation: dotloader 2.5s 0.6s infinite;
        animation: dotloader 2.5s 0.6s infinite;
      }
      
      /* here be the animations matey! */
      @keyframes "dotloader" {
        0%,20% {
          width: 4px;
          height: 4px;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          left: 0%;
          background-color:#030445;
        }
        
        30%,70% {
          width: 8px;
          height: 8px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          left: 50%;
          background-color:#4AFFA8;
        }
      
        80%,100% {
          width: 4px;
          height: 4px;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          left: 100%;
          background-color:#030445;
        }
      }
      
      @-moz-keyframes dotloader {
        0%,20% {
          width: 4px;
          height: 4px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          left: 0%;
          background-color:#4AFFA8;
        }
        
        30%,70% {
          width: 8px;
          height: 8px;
          -moz-border-radius: 4px;
          border-radius: 4px;
          left: 50%;
          background-color:#030445;
        }
        
        80%,100% {
          width: 4px;
          height: 4px;
          -moz-border-radius: 2px;
          border-radius: 2px;
          left: 100%;
          background-color:#4AFFA8;
        }
      }
      
      @-webkit-keyframes "dotloader" {
        0%,20% {
          width: 4px;
          height: 4px;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          left: 0%;
          background-color:#030445;
        }
        
        30%,70% {
          width: 8px;
          height: 8px;
          -webkit-border-radius: 4px;
          border-radius: 4px;
          left: 50%;
          background-color:#4AFFA8;
        }
        
        80%,100% {
          width: 4px;
          height: 4px;
          -webkit-border-radius: 2px;
          border-radius: 2px;
          left: 100%;
          background-color:#030445;
        }
      }
      
      @-ms-keyframes "dotloader" {
        0%,20% {
          width: 4px;
          height: 4px;
          border-radius: 2px;
          left: 0%;
          background-color: rgba(256, 256, 256, 0);
        }
        
        30%,70% {
          width: 8px;
          height: 8px;
          border-radius: 4px;
          left: 50%;
          background-color: rgba(256, 256, 256, 0.5);
        }
        
        80%,100% {
          width: 4px;
          height: 4px;
          border-radius: 2px;
          left: 100%;
          background-color: rgba(256, 256, 256, 0);
        }
      }
      
      @-o-keyframes "dotloader" {
        0%,20% {
          width: 4px;
          height: 4px;
          border-radius: 2px;
          left: 0%;
          background-color: rgba(256, 256, 256, 0);
        }
        
        30%,70% {
          width: 8px;
          height: 8px;
          border-radius: 4px;
          left: 50%;
          background-color: rgba(256, 256, 256, 0.5);
        }
        
        80%,100% {
          width: 4px;
          height: 4px;
          border-radius: 2px;
          left: 100%;
          background-color: rgba(256, 256, 256, 0);
        }
      }
    

      .loading-overlay {
        background-color: rgba(0, 0, 0, 0.9) !important;
       
    }



    .videodetils #videoTitle {
    font-family: Lexend;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 45.196px; /* 141.238% */
    letter-spacing: -0.64px;}


    .videodetils #videoDescription { color: rgba(255, 255, 255, 0.80);

        text-align: justify;
        font-family: Lexend;
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 22px; /* 137.5% */
        letter-spacing: -0.008px;}

        .videodetils #videoDescription p { color: rgba(255, 255, 255, 0.80);

            text-align: justify;
            font-family: Lexend;
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: 22px; /* 137.5% */
            letter-spacing: -0.008px;}

.videotag { border-radius: 13px; padding:20px 10px; text-align: center;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

.videotag h3 { color: var(--Final-Green, #4AFFA8);
    font-family: Lexend;
    font-size:17px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;} 

    .videotag p { color: #FFF;
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        margin-bottom:0px;
        text-align:center;
        line-height: 22px; /* 137.5% */
        letter-spacing: -0.008px;}

.tagmain { padding-top:30px;}

.backbutton #backToHome { color: #FFF;
    padding: 11px 20px;
    font-family: Lexend;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal; margin-bottom:30px; background:#2BDAEF; border:1px solid #2BDAEF !important; border-radius:13px !important; margin-top:0px;}
.backbutton #backToHome:hover {padding: 11px 20px; background:none; border:1px solid #2BDAEF !important;}
#backToHome svg {
    margin-right: 5px;
    margin-top: -3px;
}


.card-container img { width:100%;}


.navbar-vertical .navbar-vertical-content {
    padding: 1rem 0 !important;
    
}

.navbar-vertical-collapsed .navbar-vertical.navbar-expand-lg {
   
    padding:0rem 0rem !important;
   
}


.navbar-vertical-footer { display:block !important;}

.edit-btn {
    border: none;
    background: none;
    margin-right: 27px;
}

.quechat input {
    background: none;
    border: navajowhite;
    color: #fff;
    outline: 0;
}

.edit-actions {
    margin-top: -13px;
    margin-bottom: 10px;
}


.edit-actions button {
    border: none;
    background: none;
    color: #fff;
    text-transform: capitalize;
    font-size: 14px;
}







.dot-elastic {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotElastic 1s infinite linear;
  }
  
  .dot-elastic::before, .dot-elastic::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-elastic::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotElasticBefore 1s infinite linear;
  }
  
  .dot-elastic::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotElasticAfter 1s infinite linear;
  }
  
  @keyframes dotElasticBefore {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1, 1.5);
    }
    50% {
      transform: scale(1, 0.67);
    }
    75% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  
  @keyframes dotElastic {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1, 1.5);
    }
    75% {
      transform: scale(1, 1);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  
  @keyframes dotElasticAfter {
    0% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1, 0.67);
    }
    75% {
      transform: scale(1, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  
  /**
   * ==============================================
   * Dot Pulse
   * ==============================================
   */
  .dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9999px 0 0 -5px #9880ff;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
  }
  
  .dot-pulse::before, .dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  .dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #9880ff;
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
  }
  
  .dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #9880ff;
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
  }
  
  @keyframes dotPulseBefore {
    0% {
      box-shadow: 9984px 0 0 -5px #9880ff;
    }
    30% {
      box-shadow: 9984px 0 0 2px #9880ff;
    }
    60%,
    100% {
      box-shadow: 9984px 0 0 -5px #9880ff;
    }
  }
  
  @keyframes dotPulse {
    0% {
      box-shadow: 9999px 0 0 -5px #9880ff;
    }
    30% {
      box-shadow: 9999px 0 0 2px #9880ff;
    }
    60%,
    100% {
      box-shadow: 9999px 0 0 -5px #9880ff;
    }
  }
  
  @keyframes dotPulseAfter {
    0% {
      box-shadow: 10014px 0 0 -5px #9880ff;
    }
    30% {
      box-shadow: 10014px 0 0 2px #9880ff;
    }
    60%,
    100% {
      box-shadow: 10014px 0 0 -5px #9880ff;
    }
  }
  
  /**
   * ==============================================
   * Dot Flashing
   * ==============================================
   */
  .dot-flashing {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: .5s;
  }
  
  .dot-flashing::before, .dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-flashing::before {
    left: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 0s;
  }
  
  .dot-flashing::after {
    left: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFlashing 1s infinite alternate;
    animation-delay: 1s;
  }
  
  @keyframes dotFlashing {
    0% {
      background-color: #9880ff;
    }
    50%,
    100% {
      background-color: #ebe6ff;
    }
  }
  
  /**
   * ==============================================
   * Dot Collision
   * ==============================================
   */
  .dot-collision {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  .dot-collision::before, .dot-collision::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-collision::before {
    left: -10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotCollisionBefore 2s infinite ease-in;
  }
  
  .dot-collision::after {
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotCollisionAfter 2s infinite ease-in;
    animation-delay: 1s;
  }
  
  @keyframes dotCollisionBefore {
    0%,
    50%,
    75%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-15px);
    }
  }
  
  @keyframes dotCollisionAfter {
    0%,
    50%,
    75%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(15px);
    }
  }
  
  /**
   * ==============================================
   * Dot Revolution
   * ==============================================
   */
  .dot-revolution {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  .dot-revolution::before, .dot-revolution::after {
    content: '';
    display: inline-block;
    position: absolute;
  }
  
  .dot-revolution::before {
    left: 0;
    top: -15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    transform-origin: 5px 20px;
    animation: dotRevolution 1.4s linear infinite;
  }
  
  .dot-revolution::after {
    left: 0;
    top: -30px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    transform-origin: 5px 35px;
    animation: dotRevolution 1s linear infinite;
  }
  
  @keyframes dotRevolution {
    0% {
      transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotateZ(360deg) translate3d(0, 0, 0);
    }
  }
  
  /**
   * ==============================================
   * Dot Carousel
   * ==============================================
   */
  .dot-carousel {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
    animation: dotCarousel 1.5s infinite linear;
  }
  
  @keyframes dotCarousel {
    0% {
      box-shadow: 9984px 0 0 -1px #2BBBEF, 9999px 0 0 1px #2BBBEF, 10014px 0 0 -1px #2BBBEF;
    }
    50% {
      box-shadow: 10014px 0 0 -1px #2BBBEF, 9984px 0 0 -1px #2BBBEF, 9999px 0 0 1px #2BBBEF;
    }
    100% {
      box-shadow: 9999px 0 0 1px #2BBBEF, 10014px 0 0 -1px #2BBBEF, 9984px 0 0 -1px #2BBBEF;
    }
  }
  
  
  .dot-typing {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #2BBBEF;
    color: #2BBBEF;
    box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    animation: dotTyping 1.5s infinite linear;
  }
  
  @keyframes dotTyping {
    0% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
    16.667% {
      box-shadow: 9984px -10px 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
    33.333% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
    50% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px -10px 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
    66.667% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
    83.333% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px -10px 0 0 #2BBBEF;
    }
    100% {
      box-shadow: 9984px 0 0 0 #2BBBEF, 9999px 0 0 0 #2BBBEF, 10014px 0 0 0 #2BBBEF;
    }
  }
  
  /**
   * ==============================================
   * Dot Windmill
   * ==============================================
   */
  .dot-windmill {
    position: relative;
    top: -10px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    transform-origin: 5px 15px;
    animation: dotWindmill 2s infinite linear;
  }
  
  .dot-windmill::before, .dot-windmill::after {
    content: '';
    display: inline-block;
    position: absolute;
  }
  
  .dot-windmill::before {
    left: -8.66px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  .dot-windmill::after {
    left: 8.66px;
    top: 15px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  @keyframes dotWindmill {
    0% {
      transform: rotateZ(0deg) translate3d(0, 0, 0);
    }
    100% {
      transform: rotateZ(720deg) translate3d(0, 0, 0);
    }
  }
  
  /**
   * ==============================================
   * Dot Bricks
   * ==============================================
   */
  .dot-bricks {
    position: relative;
    top: 8px;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
    animation: dotBricks 2s infinite ease;
  }
  
  @keyframes dotBricks {
    0% {
      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
    }
    8.333% {
      box-shadow: 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
    }
    16.667% {
      box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff;
    }
    25% {
      box-shadow: 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
    }
    33.333% {
      box-shadow: 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
    }
    41.667% {
      box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff;
    }
    50% {
      box-shadow: 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
    }
    58.333% {
      box-shadow: 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
    }
    66.666% {
      box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 9991px -16px 0 0 #9880ff;
    }
    75% {
      box-shadow: 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
    }
    83.333% {
      box-shadow: 9991px -16px 0 0 #9880ff, 10007px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
    }
    91.667% {
      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px -16px 0 0 #9880ff;
    }
    100% {
      box-shadow: 9991px -16px 0 0 #9880ff, 9991px 0 0 0 #9880ff, 10007px 0 0 0 #9880ff;
    }
  }
  
  /**
   * ==============================================
   * Dot Floating
   * ==============================================
   */
  .dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
  }
  
  .dot-floating::before, .dot-floating::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-floating::before {
    left: -12px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFloatingBefore 3s infinite ease-in-out;
  }
  
  .dot-floating::after {
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
  }
  
  @keyframes dotFloating {
    0% {
      left: calc(-50% - 5px);
    }
    75% {
      left: calc(50% + 105px);
    }
    100% {
      left: calc(50% + 105px);
    }
  }
  
  @keyframes dotFloatingBefore {
    0% {
      left: -50px;
    }
    50% {
      left: -12px;
    }
    75% {
      left: -50px;
    }
    100% {
      left: -50px;
    }
  }
  
  @keyframes dotFloatingAfter {
    0% {
      left: -100px;
    }
    50% {
      left: -24px;
    }
    75% {
      left: -100px;
    }
    100% {
      left: -100px;
    }
  }
  
  /**
   * ==============================================
   * Dot Fire
   * ==============================================
   */
  .dot-fire {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9999px 22.5px 0 -5px #9880ff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -.85s;
  }
  
  .dot-fire::before, .dot-fire::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
  }
  
  .dot-fire::before {
    box-shadow: 9999px 22.5px 0 -5px #9880ff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -1.85s;
  }
  
  .dot-fire::after {
    box-shadow: 9999px 22.5px 0 -5px #9880ff;
    animation: dotFire 1.5s infinite linear;
    animation-delay: -2.85s;
  }
  
  @keyframes dotFire {
    1% {
      box-shadow: 9999px 22.5px 0 -5px #9880ff;
    }
    50% {
      box-shadow: 9999px -5.625px 0 2px #9880ff;
    }
    100% {
      box-shadow: 9999px -22.5px 0 -5px #9880ff;
    }
  }
  
  /**
   * ==============================================
   * Dot Spin
   * ==============================================
   */
  .dot-spin {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: transparent;
    color: transparent;
    box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), 0 18px 0 0 rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 rgba(152, 128, 255, 0), -18px 0 0 0 rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 rgba(152, 128, 255, 0);
    animation: dotSpin 1.5s infinite linear;
  }
  
  @keyframes dotSpin {
    0%,
    100% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    12.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    25% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 0 #9880ff, 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    37.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 0 #9880ff, 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    50% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 0 #9880ff, -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0);
    }
    62.5% {
      box-shadow: 0 -18px 0 -5px rgba(152, 128, 255, 0), 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 0 #9880ff, -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
    }
    75% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 -5px rgba(152, 128, 255, 0), 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 0 #9880ff, -12.72984px -12.72984px 0 0 #9880ff;
    }
    87.5% {
      box-shadow: 0 -18px 0 0 #9880ff, 12.72984px -12.72984px 0 0 #9880ff, 18px 0 0 -5px rgba(152, 128, 255, 0), 12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), 0 18px 0 -5px rgba(152, 128, 255, 0), -12.72984px 12.72984px 0 -5px rgba(152, 128, 255, 0), -18px 0 0 -5px rgba(152, 128, 255, 0), -12.72984px -12.72984px 0 0 #9880ff;
    }
  }
  
  
  .dot-falling {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9999px 0 0 0 #9880ff;
    animation: dotFalling 1s infinite linear;
    animation-delay: .1s;
  }
  
  .dot-falling::before, .dot-falling::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-falling::before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFallingBefore 1s infinite linear;
    animation-delay: 0s;
  }
  
  .dot-falling::after {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotFallingAfter 1s infinite linear;
    animation-delay: .2s;
  }
  
  @keyframes dotFalling {
    0% {
      box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
      box-shadow: 9999px 0 0 0 #9880ff;
    }
    100% {
      box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
    }
  }
  
  @keyframes dotFallingBefore {
    0% {
      box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
      box-shadow: 9984px 0 0 0 #9880ff;
    }
    100% {
      box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
    }
  }
  
  @keyframes dotFallingAfter {
    0% {
      box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
    }
    25%,
    50%,
    75% {
      box-shadow: 10014px 0 0 0 #9880ff;
    }
    100% {
      box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
    }
  }
  
  
  .dot-stretching {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    transform: scale(1.25, 1.25);
    animation: dotStretching 2s infinite ease-in;
  }
  
  .dot-stretching::before, .dot-stretching::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
  }
  
  .dot-stretching::before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotStretchingBefore 2s infinite ease-in;
  }
  
  .dot-stretching::after {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    animation: dotStretchingAfter 2s infinite ease-in;
  }
  
  @keyframes dotStretching {
    0% {
      transform: scale(1.25, 1.25);
    }
    50%,
    60% {
      transform: scale(0.8, 0.8);
    }
    100% {
      transform: scale(1.25, 1.25);
    }
  }
  
  @keyframes dotStretchingBefore {
    0% {
      transform: translate(0) scale(0.7, 0.7);
    }
    50%,
    60% {
      transform: translate(-20px) scale(1, 1);
    }
    100% {
      transform: translate(0) scale(0.7, 0.7);
    }
  }
  
  @keyframes dotStretchingAfter {
    0% {
      transform: translate(0) scale(0.7, 0.7);
    }
    50%,
    60% {
      transform: translate(20px) scale(1, 1);
    }
    100% {
      transform: translate(0) scale(0.7, 0.7);
    }
  }
  
  
  .dot-gathering {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius:50%;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
  }
  
  .dot-gathering::before, .dot-gathering::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: -50px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: black;
    color: transparent;
    opacity: 0;
    filter: blur(2px);
    animation: dotGathering 2s infinite ease-in;
  }
  
  .dot-gathering::after {
    animation-delay: .5s;
  }
  
  @keyframes dotGathering {
    0% {
      opacity: 0;
      transform: translateX(0);
    }
    35%,
    60% {
      opacity: 1;
      transform: translateX(50px);
    }
    100% {
      opacity: 0;
      transform: translateX(100px);
    }
  }
  
  
  .dot-hourglass {
    position: relative;
    top: -15px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
    transform-origin: 5px 20px;
    animation: dotHourglass 2.4s infinite ease-in-out;
    animation-delay: .6s;
  }
  
  .dot-hourglass::before, .dot-hourglass::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    filter: blur(2px);
  }
  
  .dot-hourglass::before {
    top: 30px;
  }
  
  .dot-hourglass::after {
    animation: dotHourglassAfter 2.4s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
  }
  
  @keyframes dotHourglass {
    0% {
      transform: rotateZ(0deg);
    }
    25% {
      transform: rotateZ(180deg);
    }
    50% {
      transform: rotateZ(180deg);
    }
    75% {
      transform: rotateZ(360deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  @keyframes dotHourglassAfter {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(30px);
    }
    50% {
      transform: translateY(30px);
    }
    75% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(0);
    }
  }
  
 
  .dot-overtaking {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: black;
    margin: -1px 0;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px);
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
  }
  
  .dot-overtaking::before, .dot-overtaking::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: black;
    box-shadow: 0 -20px 0 0;
    filter: blur(2px);
  }
  
  .dot-overtaking::before {
    animation: dotOvertaking 2s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .3s;
  }
  
  .dot-overtaking::after {
    animation: dotOvertaking 1.5s infinite cubic-bezier(0.2, 0.6, 0.8, 0.2);
    animation-delay: .6s;
  }
  
  @keyframes dotOvertaking {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  
  .dot-shuttle {
    position: relative;
    left: -15px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    margin: -1px 0;
    filter: blur(2px);
  }
  
  .dot-shuttle::before, .dot-shuttle::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: black;
    color: transparent;
    filter: blur(2px);
  }
  
  .dot-shuttle::before {
    left: 15px;
    animation: dotShuttle 2s infinite ease-out;
  }
  
  .dot-shuttle::after {
    left: 30px;
  }
  
  @keyframes dotShuttle {
    0%,
    50%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-45px);
    }
    75% {
      transform: translateX(45px);
    }
  }
  
 
  .dot-bouncing {
    position: relative;
    height: 10px;
    font-size: 10px;
  }
  
  .dot-bouncing::before {
    content: '⚽🏀🏐';
    display: inline-block;
    position: relative;
    animation: dotBouncing 1s infinite;
  }
  
  @keyframes dotBouncing {
    0% {
      top: -20px;
      animation-timing-function: ease-in;
    }
    34% {
      transform: scale(1, 1);
    }
    35% {
      top: 20px;
      animation-timing-function: ease-out;
      transform: scale(1.5, 0.5);
    }
    45% {
      transform: scale(1, 1);
    }
    90% {
      top: -20px;
    }
    100% {
      top: -20px;
    }
  }
  

 

  .stage {
    display: flex;
    justify-content:center;
    padding: 2rem 10px;
    overflow: hidden;
}
  .dot-rolling {
    position: relative;
    height: 10px;
    font-size: 10px;
  }
  
  .dot-rolling::before {
    content: '⚽';
    display: inline-block;
    position: relative;
    transform: translateX(-25px);
    animation: dotRolling 3s infinite;
  }
  
  @keyframes dotRolling {
    0% {
      content: '⚽';
      transform: translateX(-25px) rotateZ(0deg);
    }
    16.667% {
      content: '⚽';
      transform: translateX(25px) rotateZ(720deg);
    }
    33.333% {
      content: '⚽';
      transform: translateX(-25px) rotateZ(0deg);
    }
    34.333% {
      content: '🏀';
      transform: translateX(-25px) rotateZ(0deg);
    }
    50% {
      content: '🏀';
      transform: translateX(25px) rotateZ(720deg);
    }
    66.667% {
      content: '🏀';
      transform: translateX(-25px) rotateZ(0deg);
    }
    67.667% {
      content: '🏐';
      transform: translateX(-25px) rotateZ(0deg);
    }
    83.333% {
      content: '🏐';
      transform: translateX(25px) rotateZ(720deg);
    }
    100% {
      content: '🏐';
      transform: translateX(-25px) rotateZ(0deg);
    }
  }



  .hovericon {
    width: auto;
    display: inline-block;
    float: right;
    display: none;
    margin-top: -2px;
}


.hovericon button img {
    height: 14px;
}

.hovericon button {
    border: none;
    background: none;
    width:25px; height:25px;
    border-radius:50%;
}

.hovericon button:hover { background:#2BBBEF; border-radius:50%; width:25px; height:25px;}

.hovericon button:hover img { filter: brightness(0) invert(1);}


.mesageload .stage {
    display: flex;
    justify-content:left;
    align-items: left;
    padding: 0rem 0;
    overflow: hidden;
    height:auto;
    width:auto;
   
    font-size:14px;
}

.overflowbg {
    min-height: 25px;
    position: absolute;
    bottom: 0px;
    background: rgb(3, 11, 69);
    background: linear-gradient(0deg, rgba(3, 11, 69, 0.7091430322128851) 20%, rgba(3, 11, 69, 0) 100%);
    width: 100%;
    min-height: 200px;
}


.login-logo { text-align:center; margin-bottom:50px;}


.navbar-vertical-collapsed #navbarVerticalNav a svg {
margin-right:0px;
  
}


.navbar-vertical-collapsed .navbar-vertical .navbar-vertical-content .nav-link-icon {
  margin-right: 0px;
 
}

.navbar-vertical-collapsed #navbarVerticalNav .d-flex { justify-content: center; } 


.ttt { position:absolute; z-index:-99;;}
.select2 {
  width: 100%;
  display: inline-block;
  background: #fff;
  width: 100%;
  height: auto;
  background: none;
  border-radius: 10px;
  border: 1px solid #FFF;
  padding: 12px 10px;
  color: #FFF;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 20px;
  line-height: 151%;
  letter-spacing: -0.008px;
}


.ty .select2-container {
  height: 51px;
}

.ty .selection { position:absolute !important; width:100%;}

.ty .parent { position:relative;}

.ty .select2-container--open {
  border-radius: 10px 10px 0px 0px;
  background: #fff;
  color: #000;}


.ty .select2-container--open span {
margin-top: 0px;
}


.select2-results {
  max-height: 350px !important;
  height:auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}


.select2-results::-webkit-scrollbar {
  width: 7px;
  border-radius: 4px;
}

/* Track */
.select2-results::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.select2-results::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}











.select2-search__field {
  border: none;
  /* background: #2BBBEF; */
  color: #000;
  padding: 7px 10px !important;
  border-radius: 2px;
  outline: 0px;
  border: 2px solid #ccc;
  margin-top: 10px;
}


.select2-results__options li { font-size:15px;}

.select2-dropdown { padding: 0px 10px !important; border:none !important;
}

.ty .parent span {
  margin-left: 0px;
  padding-left: 3px !important;
  outline:0px;
}

.ty .parent {
  margin-bottom: 21px;
}

.uploadboxhead a { line-height:0px; margin-top:0px; margin-bottom:0px;}



.select2-selection__rendered { position:relative; padding-top:3px;}
.select2-selection__rendered:after {
  position: absolute;
  right: 0px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-right-style: solid;
  border-right-width: 2px;
  content: "";
  display: inline-block;
  height: 12px;
  right: 20px;
  position: absolute;
  top: 3px;
  width: 12px;
  rotate: 20;
  rotate: 45deg;
  transition: all 0.3s ease-out;
}


.ty .select2-container--open .select2-selection__rendered:after {
  rotate: -136deg;
  top: 10px;
  transition: all 0.3s ease-out;
}



#promptsTable { border-radius:15px 15px 0px 0px; overflow: hidden;}

/* #promptsTable thead {
  background:#2BBBEF;
  font-weight:800;
} */


/* #promptsTable tr th {
  background:#2BBBEF;
  font-weight:800;
} */


/* #promptsTable table, th, td {
  border: 1px solid #2BBBEF;
  border-collapse: collapse;
  text-align: center;
} */

/* .rolewrap table thead tr{ background:#2BBBEF !important;} */
/* .rolewrap table tbody tr:hover { background:#2BBBEF !important;}
.rolewrap table tbody tr:hover button { background:#fff !important;} */

#promptsTable { width:100%;}
/* #promptsTable th { padding:25px 15px; color:#fff; font-weight:300;}
#promptsTable td { padding:25px 15px; color:#fff; font-weight:300;} */

.rolewrap h2 {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 300;
  margin-bottom:20px;
}

.rolewrap button {
  background: #2BBBEF;
  color: #030445;
  border: none;
  border-radius: 10px;
  padding: 3px 10px;
}
.rolewrap button:hover { background:#fff; color: #030445; border:none;}

table { width:100%;}

#promptsTable thead tr th:first-child { text-align:left; padding-left:40px;}
#promptsTable tbody tr td:first-child { text-align:left; padding-left:40px;}

.rolewrap .dataTables_length { margin-bottom:20px;}
#fileUploadsTable_filter input { background:#fff;  outline:0;}
.select-wrap { margin-bottom:20px; margin-top:20px;}

.rolewrap #fileUploadsTable { border-radius:10px 10px 0px 0px; overflow: hidden;}

.rolewrap .table-responsive {
  padding-bottom: 20px;
}

/* .rolewrap .dataTables_paginate span a {
  border:2px solid #2BBBEF !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0px 10px;
  line-height:26px;
} */

/* .rolewrap .dataTables_paginate span .current { background:#2BBBEF !important;} */

.rolewrap .dataTables_paginate {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.rolewrap .select-wrap label {
  color: #fff;
}

.rolewrap #fileUploadsTable_filter label {
  color: #fff;
}

.rolewrap .dataTables_info { margin-top: 10px !important;}

/* .rolewrap .dataTables_paginate .previous { margin:0px 10px !important; background:#2BBBEF !important; color:#fff I !important; border:1px solid #2BBBEF !important;}
.rolewrap .dataTables_paginate .next { margin:0px 10px !important; background:#2BBBEF !important; color:#fff I !important; border:1px solid #2BBBEF !important;} */

table.dataTable tbody tr td:nth-child(3) { width:200px !important; word-wrap: break-word;}

.paginate_button.disabled { color:#fff !important;}


.qprompt table tbody tr td { padding:20px !important;}
.qprompt #questionsTable textarea { resize:none; min-height:130px; font-size:15px;}

.qprompt button { padding: 11px 14px; margin:0px 1px;}

/* .qprompt .pagination li a { background:#2BBBEF;} */
/* .qprompt .pagination li {
  background:none;
  border: 2px solid #2BBBEF;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  margin: 0px 5px;
  text-align: center;
}

.qprompt .pagination li:hover {
  background:#2BBBEF;
  border: 2px solid #2BBBEF;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  margin: 0px 5px;
  text-align: center;
}


.qprompt .pagination li  a {
  color: #fff;
  padding: 0px 0px;
  line-height: 18px;
  font-size: 16px;
  background:none;
} */


/* .qprompt .previous { width:auto !important; height:auto !important; border-radius:10px !important;}
.qprompt .next { width:auto !important; height:auto !important; border-radius:10px !important;} */

.qprompt .dataTables_info { margin-top:20px !important;}

#questionsTable thead tr th { color:#fff !important; padding:20px 10px; vertical-align: middle;}
#questionsTable tr td { vertical-align: middle !important; width:60%;}


.qprompt .dataTables_wrapper .dataTables_length select { color:#000 !important;}

#questionsTable_filter label { color:#fff;}

.qprompt .table>:not(caption)>*>* { box-shadow:none;}

.qprompt table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
  border-bottom-width: 1px !important;
}


.qprompt table.dataTable.no-footer {
  border-bottom: 0px solid #fff !important;
}

.qprompt .dataTables_empty { color:#fff;}



.add-new-ques h4 {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 300;
  margin-bottom: 20px;
  font-size: 22px;
}

.qprompt h2 { font-size: 22px;}

.add-new-ques textarea {
  resize: none;
  min-height: 500px;
  border:0px;
  outline:0px;
  border-radius:10px;
  font-size: 15px;}

  .add-new-ques button {
    width: 100%;
    border-radius: 5px !important;
    padding:10px 0px;
    font-size: 15px;
}




.quicDetils #editPromptTextBtn {
  padding: 5px 9px;
  margin: 0px 1px;
  font-size: 17px;
  border-radius: 5px;
}


.quicDetils #editSystemInstructionsBtn {
  padding: 5px 9px;
  margin: 0px 1px;
  font-size: 17px;
  border-radius: 5px;
}

.quicDetils #systemInstructionsText { color:#fff;}




.rolewrap h3 {
  color: #fff;
  margin-bottom: 20px;
  font-weight: 300;
  margin-bottom: 20px;
  font-size:22px;
}


/* .quicDetils #questionsTable tr td {
  background:#030445; color:#fff; text-align:left;
} */

.quicDetils #questionsTable thead tr th:nth-child(2) { text-align:center;}
.quicDetils #questionsTable tbody tr td:nth-child(2) { text-align:center;}


.quicDetils .dataTables_paginate span a {
  padding: 10px 3px !important;
  /* margin: 0px; */
  line-height: 35px;
  color: #fff !important;
}


.questionsugg span { padding:0px; border:none; margin-bottom:5px;}
.questionsugg button { margin-bottom:15px;}

.questionsugg textarea.select2-search__field {
  padding: 0px;
  height: auto;
  margin: 0px;
  min-height: 43px;
  line-height: 28px;
}


.quicDetils table.dataTable.display tbody td { }

.CommentsExtractor .formmain { 
  padding:60px 85px !important;}

  .CommentsExtractor .formmain h1 { text-align:center;}

  .CommentsExtractor .formmain button {
   margin-left: 6px !important;
}


/* table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background:unset !important;}
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.even { background:unset !important;} */
.parent .select2 { width:100% !important;}

.table-new-design {
  border: none !important;
}

.table-new-design tbody tr td {
  border: none;
  border-bottom:1px solid rgba(201, 201, 201, 0.30) !important;
  font-weight: 300 !important;
  text-align: left;
  padding: 1.5rem !important;
  color:#fff;
}

.table-new-design tbody tr td a { color:#fff;}

.table-new-design tbody tr td { 
  
  transition: max-width 0.3s ease; /* Smooth transition on hover */
 }
  .table-new-design tbody tr:hover { 
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
           /* Remove the max-width */
          /* Allow overflow */
        /* Allow the text to wrap */
   
       /* Disable the ellipsis */}
    .table-new-design {
      background: #2bbbef38;
      transition: max-width 0.7s ease; /* Smooth transition on hover */
    }
.table-new-design tbody tr:hover td { 
/* background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important; */
       /* Remove the max-width */
 
transition: max-width 0.3s ease; /* Smooth transition on hover */    /* Disable the ellipsis */}
.table-new-design {
  background: #2bbbef38;
}

.table-new-design tr th {
  background-color: #2bbbef80 !important;
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  padding: 18px 25px !important;
  border: none;
}

.table-new-design .even {
  background-color:none !important;
}


.table-new-design .no-footer {
  border-bottom: 0px solid #fff !important;
}

.table-new-design {
  border: none !important;
}


.table-new-design thead { border-radius: 19.589px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); overflow: hidden;}

  .table-new-design tbody {
    border-radius: 19.589px !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
    margin-top: 9px;
}

.table-new-design thead th { background:none !important;
}

.table-new-design {
  background: none !important;
}


table.dataTable thead .sorting { background:none !important;}
table.dataTable thead .sorting_asc { background:none !important;}

table {
  border-radius: 20px;
  overflow: hidden;
}



.tablett tbody tr td {
 white-space: pre-line !important;
}



.rolewrap .add-new-ques label { color:#fff !important;}

.dataTables_paginate .paginate_button {
  padding: 10px 5px;

}

.rolewrap label { color:#fff !important;}


.prePopup .modal-content { background:#030445;}
.prePopup .modal-title { color:#fff;}
.prePopup select { color:#000 !important;}
.prePopup #previewTable_filter label { color:#fff !important;}

table .expand-btn {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0px;
  border-radius: 11px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  
}











.worldmap {
  width: 100%;
  position: absolute;
  z-index: 0;
}





.reportdiv .chat-input {
  width: 100%;
  box-sizing: border-box;
  align-self: flex-end;
  display: flex;
  margin-bottom: 15px;
  position: relative;
  margin-top:30px;
}

.reportdiv .chat-input textarea {
  font-family: kanit;
  padding: 10px;
  color: #fff;
  background: transparent;
  border:1px solid #fff;
  border-right: 0px;
  text-shadow: 0px 0px 0px #eee;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  transition: background .2s ease-out;
}

.reportdiv .submit-icon {
  width: 50px;
  height: 100%;
  cursor: pointer;
  flex-grow: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  color: #bbbbbf;
  box-sizing: border-box;
  border:1px solid #fff;
}

.reportdiv textarea::-webkit-input-placeholder {
  color: #fff;
  text-shadow: none;
  -webkit-text-fill-color: initial;
}

.reportdiv .chat-input textarea:focus {
  outline: none;
  background: transparent;
  background: none;
}

.reportdiv .chat-input textarea:hover {
  background:none;
  transition: background .2s ease-out;
  color:#000;
}

.reportdiv .spacing-adjuster {
  width: 100%;
  flex-grow: 1;
  height: 100%;
}

.reportdiv .draghere {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  color: #68686e;
  font-size: 1.2rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  background: transparent;
  border: 2px dashed #58585e;
  margin-top:20px;
}

.reportdiv .file-container li:hover {
  background: #3f3f45;
}

.reportdiv .performance-table {
  table-layout: fixed;
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
  font-size: 1.2rem;
  font-weight: 200;
}

.reportdiv .align-right {
  text-align: right;
  float: right;
}







.reportdiv .performance-table tr:nth-child(1) {
  color:#fff;
  font-size: 1rem;
}








.reportdiv .table-header.todo {
  background: transparent;
  margin-left: 15px;
  margin-right: 15px;
}

.reportdiv .element-header.social {
  margin-bottom: 0px;
}

.reportdiv .social-element {
  width: 66.6666%;
  flex-flow: column;
  height:100%;
  display: flex;
}

.reportdiv .todo-element {
  width: 33.3333%;
  height: 100%;
}

.reportdiv .file-container {

  color: #eee;

  border-top: 0px;
  height: 400px;
  padding: 25px;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
}

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

.reportdiv .jimmy-image {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  width: 60px;
  background: url('https://pexels.imgix.net/photos/2261/food-man-person-eating.jpg?fit=crop&w=65&h=65');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

.reportdiv .anna-image {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  width: 60px;
  background: url('https://pexels.imgix.net/photos/54204/pexels-photo-54204.jpeg?fit=crop&w=60&h=60');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

.reportdiv .chatbox-container {
 
  flex-flow: row;
  margin-top: 20px;
  display: flex;
}

.reportdiv .chatbox-left {
  background: #2BBBEF;
  line-height: 1.2em;
  max-width: 75%;
  min-height:77px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 1rem;
  padding-right: 20px;
  color: #fff;
  font-weight: 200;
}

.reportdiv .username {
  display: block;
  color: #ccc;
}

.reportdiv .username.right {
  text-align: right;
}

.reportdiv .update-number {
  display: inline-block;
  background: #386381;
  height: 1rem;
  margin-left: 30px;
  color: #ccc;
  font-size: .9rem;
  margin-top: .3rem;
  padding: 1px;
  padding-bottom: 8px;
  text-align: center;
  font-weight: 500;
  width: 1.5rem;
  border-radius: 10px;
}

.reportdiv .country-select {
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 200;
  letter-spacing: .2rem;
  margin-right: 10px;
  font-size:17px;
  padding-left:0px;
  padding-right:0px;
  border-bottom: 3px solid #44444a;
  position: relative;
  transition: border-color .2s ease-out;
}

.reportdiv .country-select:first-child {
  border-bottom-color: #5AB3D1;
  margin-left: 0px;
}

.reportdiv .country-select:hover {
  border-color: #5AB3D1;
  transition: border-color .2s ease-out;
}



.reportdiv .main-color {
  color: #5AB3D1;
}

.reportdiv .scrollbar {
  overflow-y: auto !important;
}

.reportdiv .element-header {
  color: #fff;
  font-size: 20px;
  margin-top: 20px;
}

.reportdiv td.table-desc {
  font-size: 1rem;
  text-align: center;
}

.reportdiv .navigation-elm {
  padding-left: 20px;
  box-sizing: border-box;
  color: #ccc;
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  cursor: pointer;
  font-weight: 200;
  letter-spacing: 0.05rem;
  transition: background .1s ease-out;
}

.reportdiv .sub-navigation-elm {
  padding-left: 80px;
  box-sizing: border-box;
  background: rgba(100, 100, 130, 0.1);
  color: #ccc;
  display: flex;
  align-items: center;
  height: 50px;
  width: 100%;
  cursor: pointer;
  font-weight: 200;
  letter-spacing: 0.05rem;
  font-size: .9rem;
  transition: background .1s ease-out;
}

.reportdiv .sub-navigation-elm:hover {
  background: rgba(100, 100, 130, 0.3);
}

.navigation-elm:nth-child(1) {
  background: rgba(100, 100, 130, 0.2);
}

.reportdiv .navigation-elm:hover {
  background: rgba(100, 100, 130, 0.2);
  transition: all .1s ease-out;
}

.reportdiv .navigation-elm:hover .nav-text {
  transform: scale(1.1);
  transition: transform .1s ease-out;
}

.reportdiv .nav-text {
  transition: transform .1s ease-out;
}

.reportdiv .piechart-label {
  width:60%;
  height: 100%;
  line-height: 23px;
  min-height: 100px;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 0 5% 0 0%;
}

.reportdiv .small {
  font-size: .9rem;
}

.reportdiv .label-heading {
  color: #fff;
  align-self: flex-start;
  font-size: 1.1rem;
}

.reportdiv .key-metrics {
  min-height: 80px;
  border-top: 4px solid black;
  min-width: 100px;
  padding: 0 10px 0 10px;
  color: white;
  flex-flow: column;
  line-height: 1em;
  text-align: center;
  background: #2BBBEF;
  margin: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  width: 170px;
  margin-right: 20px;
}

.reportdiv a,
.reportdiv a:active,
.reportdiv a:visited {
  color: inherit;
}



.reportdiv .madeby {
  color: #999;
  position: absolute;
  right: 15px;
  font-size: 1rem;
  top: 15px;
}

.reportdiv .white-border {
  border-top: 4px solid #5AB3D1;
}

.reportdiv .file-container.small li {
  margin-bottom:10px;
}

.reportdiv canvas#linechart {
  width: 100% !important;
  height:180px !important;
}

.reportdiv .blue-border {
  border-top: 4px solid #5AB3D1;
}

.reportdiv .fa-fw {
  margin-right: 15px;
}

.reportdiv .sidebar {
  padding-top: 10%;
  height: 100%;
  left: 0;
  width: 300px;
  display: flex;
  color: #fff;
  flex-flow: column;
  position: fixed;
  background: #222227;
  z-index: 1;
}

.reportdiv .table-header {
  margin-bottom: 20px;
}

.reportdiv .row {
  display: flex;
  width: 100%;
}

.reportdiv .stats-table td:last-of-type {
  padding-right: 15px;
}

.reportdiv .stats-table td:first-of-type {
  padding-left: 15px;
}

.reportdiv .stats-table {
  width: 100%;
  overflow: auto;

  box-sizing: border-box;
  
}

.reportdiv .piechart-element {
  width: 33.3333%;
  box-sizing: border-box;
  display: flex;
  padding-right: 20px;
  min-height: 100px;
  max-height: 200px;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom:30px;
  margin-top:30px;
  border: 1px solid #2BBBEF;
}

.reportdiv .position-marker {
  content: '';
  position: absolute;
  height: 3vw;
  width: 3vw;
  border-radius: 50%;
  background: hsla(200, 30%, 45%, 0.6);
  top: 20%;
  left: 10%;
  z-index: 4;
  position: relative;
  transition: all .2s ease-out;
}

.reportdiv .position-marker.no2 {
  top: 5%;
  width: 2vw;
  height: 2vw;
  left: 45%;
  z-index: 2;
}

.reportdiv .position-marker.no3 {
  top: 5%;
  width: 2vw;
  height: 2vw;
  left: 18%;
  z-index: 2;
}

.reportdiv .position-marker.no4 {
  top: -5%;
  width: 3vw;
  height: 3vw;
  left: 40%;
  z-index: 2;
}

.reportdiv .position-marker.no5 {
  top: -5%;
  width: 4vw;
  height: 4vw;
  left: 75%;
  z-index: 6;
}

.reportdiv .position-marker.no6 {
  top: 0%;
  width: 1.5vw;
  height: 1.5vw;
  left: 30%;
  z-index: 6;
}

.reportdiv .order-scroll {
  text-align: right;
  cursor: pointer;
  width: 100%;
  padding-right: 5px;
  padding-bottom: 3px;
  color: #ccc;
  border-top: 0px;
  box-sizing: border-box;
  transition: background .2s ease-out, color .2s ease-out;
}

.reportdiv .order-scroll:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  transition: background .2s ease-out, color .2s ease-out;
}

.reportdiv .order-container {
  height: 600px;
  overflow: hidden;
}

.reportdiv .position-marker:hover {
  background: hsla(200, 20%, 55%, 0.6);
  transform: scale(1.1);
  transition: all .2s ease-out;
}

.reportdiv .position-marker:after {
  content: '';
  background: hsla(200, 30%, 45%, 0.8);
  height: 33.33%;
  width: 33.33%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  z-index: 2;
}

.reportdiv .piechart-container {
  width: 30%;
  display: flex;
  position: relative;
}

.reportdiv .piechart-percent {
  position: absolute;
  width:40%;
  top: 0;
  right: 10px;
  font-size: 1.8vw;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.reportdiv .map-container {
  height: 22vw;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a0/World_map_with_points.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}

.reportdiv .stats-element {
  
  border-right-width: 0px;
  box-sizing: border-box;
  position: relative;
  width: 66.666%;
}

.reportdiv .order-element {
  color: #999;
  width: 33.333%;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  
}

.reportdiv .order-element h1 {
  padding-left: 20px;
}

.reportdiv .order-element br {
  line-height: 1em;
}

.reportdiv .highlight {
  color: #FFBB75;
}

.reportdiv .order-element p {
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.2em;
}

.reportdiv .order-element p:last-child {
  margin-bottom: 5px;
}



.reportdiv .order-item {
  
  width: 100%;
  padding: 10px 0 10px 0;
  color: #eee;
 border-top: 0px;
  box-sizing: border-box;
  position: relative;
}


.reportdiv .order-item h1 { color:#fff; font-size:20px;}

.reportdiv .order-item:after {
  content: '';
  background: #5AB3D1;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}

.reportdiv .order-scroll.up {
  border-bottom: 0px;
}

.reportdiv .order-item.highlight:after {
  content: '';
  background: #FFBB75;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}

.reportdiv .order-item.hold:after {
  content: '';
  background: #999;
  height: 100%;
  width: 5px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}

.reportdiv .inactive {
  color: #aaa;
}

.reportdiv .piechart-container canvas {
  margin-top: 10%;
  margin-bottom: 10%;
}



.reportdiv .ttable tbody tr td {
 font-size: 13px;
}





.reportdiv .linechart-element {
  position: relative;
  oerflow: hidden;
  transform: scale(1.02);
  height: 40%;
}



.reportdiv::-webkit-scrollbar {
  width: 8px;
}

.reportdiv::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #555;
}

.reportdiv::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #222227;
  max-height: 20p;
}


.graphpopup {
 height:100%;
}



.graphpopup .modal-dialog {
  width: 900px;
  max-width: 900px;
  display: flex !important;
  align-items: stretch;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
  justify-content: center;
  height: 100%;
}


.graphpopup .modal-body { max-height:500px; overflow-y:auto; overflow-x:hidden;}

.createrolewrap {
  width: 100%;
  height: auto;
  display: flex;
  margin-bottom: 20px;
  align-content: center;
  align-items: center;
}
.createrolewrap textarea { width:50%; border:2px solid #2BBBEF; background:#030445; resize:none; padding:15px; outline:none; color:#fff; float:left; margin-right:20px; border-radius:10px; min-height:130px;}
.createrolewrap button {
  float: left;
  padding: 10px 20px;
}

.createrolewrap textarea::placeholder { color:#fff;}
.pre-popup {
  max-width: 1050px;
}

.pre-popup .modal-title { color:#fff;}
.pre-popup .dt-row { margin-top:20px !important;}
.pre-popup .dataTables_filter label { color:#fff;}

.pre-popup .modal-content { background:#030445 !important; }

#selectedPromptList .prompt-header h2 { margin-bottom:0px;}
.uploadbox .row p { font-size:16px;}
.uploadboxhead small { font-size:16px;}






.generationwrap .tooltipsug {
  /* visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1000;
  bottom: 175%;
  left: 50%;
  margin-left: -50%;
  background: #2BBBEF;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translateX(-64%);
  height:32px; */
  visibility: visible;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px; /* Allow space around text */
    position: absolute;
    z-index: 1000;
    bottom: 175%;
    left: 50%;
    margin-left:0%;
    background: #2BBBEF;
    opacity: 1;
    transition: opacity 0.3s;
    transform: translateX(-58%);
    display: inline-block;
    white-space: nowrap; /* Prevent text from wrapping */
    width:auto;
}



.generationwrap .tooltipsug::after {
  width: 0px;
  height: 0px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #2BBBEF;
  position: absolute;
  content: '';
  left:15%;
  right: 0px;
  margin: auto;
  bottom: -9px;
}


#forgotPasswordLink {
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: Lexend;
  border-radius: 14px;
    background: none;
    width: 100%;
    border: none;
    padding: 12px 0px;
    margin-top: 0px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    font-weight:400;
    line-height:18px;
    border: 2px solid #2BBBEF;
}


#forgotPasswordLink:hover {
color:#fff;
border: 2px solid #2BBBEF;
background:#2BBBEF;
}



.backtologin {
  width: 100%;
  display: inline-block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-family: Lexend;
  border-radius: 14px;
  background: none;
  width: 100%;
  border: none;
  padding: 12px 0px;
  margin-top: 0px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  font-weight: 400;
  line-height: 18px;
  border: 2px solid #2BBBEF;
}


.backtologin:hover {
  color: #fff;
  border: 2px solid #2BBBEF;
  background: #2BBBEF;
}

.forgot-password-form h2 { text-align:center; margin:0px;}
.forgot-password-form p { text-align:center;}

.reset-password h2 { text-align:center; margin:0px;}
.reset-password p { text-align:center;}


#uploadButton1 { border:none !important; background:none !important;}







.toast-top-right .toast-success { background-color:#4AFFA8 !important; border:none !important;}
.toast {
  background-color:#4AFFA8 !important;  color:#000 !important;
}

.toast {
  background-color: #4AFFA8 !important;  color:#000 !important;
  border: none !important;
}

.ui-helper-hidden-accessible { top:40px !important; right:0px !important;}
.toast-top-right{ top:70px !important;}


#toast-container>div{
 opacity:1 !important;
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important;
filter:alpha(opacity=100) !important;
}

.toast-message a,.toast-message label{
  color:#000 !important;
}

#toast-container>.toast-success{
  background-image:none !important;
}




/* ..........tooltip css............ */


[tooltip] {
  position: relative;
}
[tooltip]::before,
[tooltip]::after {
  text-transform: none;
  font-size: 0.9em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: "";
  border: 5px solid transparent;
  z-index: 1001;
}
[tooltip]::after {
  content: attr(tooltip);
  font-family: Lexend;
  text-align: center;
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5em 1em;
  font-size:13px;
  border-radius: 5px;
  background:#2BBBEF;
  color: #fff;
  z-index: 1000;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}
[tooltip=""]::before,
[tooltip=""]::after {
  display: none !important;
}
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color:#2BBBEF;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up-left"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #111;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up-left"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip][flow^="up-left"]::before {
  left: 25%;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up-left"]::after {
  left: 50%;
}

[tooltip]:not([flow])::before,
[tooltip][flow^="up-right"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #111;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up-right"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip][flow^="up-right"]::before {
  left: 75%;
  transform: translate(-50%, -0.5em);
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up-right"]::after {
  left: 50%;
  transform: translate(-50%, -0.5em);
}

[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #020204;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

[tooltip][flow^="down-left"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #020204;
}
[tooltip][flow^="down-left"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down-left"]::before {
  left: 30%;
}
[tooltip][flow^="down-left"]::after {
  left: 50%;
}

[tooltip][flow^="down-right"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #020204;
}
[tooltip][flow^="down-right"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down-right"]::before {
  left: 70%;
  transform: translate(-85%, 0.5em);
}
[tooltip][flow^="down-right"]::after {
  left: 50%;
  transform: translate(-50%, 0.5em);
}

[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #020204;
  left: calc(0em - 5px);
  transform: translate(-0.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-0.5em, -50%);
}
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #020204;
  right: calc(0em - 5px);
  transform: translate(0.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%);
}

[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="up-left"]:hover::before,
[tooltip][flow^="up-left"]:hover::after,
[tooltip][flow^="up-right"]:hover::before,
[tooltip][flow^="up-right"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after,
[tooltip][flow^="down-left"]:hover::before,
[tooltip][flow^="down-left"]:hover::after,
[tooltip][flow^="down-right"]:hover::before,
[tooltip][flow^="down-right"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}
[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}
@-moz-keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@-webkit-keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@-o-keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@-moz-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@-webkit-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@-o-keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* ..........tooltip css end............ */








/* ..........notification css............ */

.toast-title{
  font-weight:700
}
.toast-message{
  -ms-word-wrap:break-word;
  word-wrap:break-word
}
.toast-message a,.toast-message label{
  color:#000;
}
.toast-message a:hover{
  color:#CCC;
  text-decoration:none
}
.toast-close-button{
  position:relative;
  right:-.3em;
  top:-.3em;
  float:right;
  font-size:20px;
  font-weight:700;
  color:#FFF;
  -webkit-text-shadow:0 1px 0 #fff;
  text-shadow:0 1px 0 #fff;
  opacity:.8;
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter:alpha(opacity=80);
  line-height:1
}
.toast-close-button:focus,.toast-close-button:hover{
  color:#000;
  text-decoration:none;
  cursor:pointer;
  opacity:.4;
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter:alpha(opacity=40)
}
.rtl .toast-close-button{
  left:-.3em;
  float:left;
  right:.3em
}
button.toast-close-button{
  padding:0;
  cursor:pointer;
  background:0 0;
  border:0;
  -webkit-appearance:none
}
.toast-top-center{
  top:0;
  right:0;
  width:100%
}
.toast-bottom-center{
  bottom:0;
  right:0;
  width:100%
}
.toast-top-full-width{
  top:0;
  right:0;
  width:100%
}
.toast-bottom-full-width{
  bottom:0;
  right:0;
  width:100%
}
.toast-top-left{
  top:12px;
  left:12px
}
.toast-top-right{
  top:12px;
  right:12px
}
.toast-bottom-right{
  right:12px;
  bottom:12px
}
.toast-bottom-left{
  bottom:12px;
  left:12px
}
#toast-container{
  position:fixed;
  z-index:999999;
  pointer-events:none
}
#toast-container *{
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box
}
#toast-container>div{
  position:relative;
  pointer-events:auto;
  overflow:hidden;
  margin:0 0 6px;
  padding:15px 15px 15px 50px;
  width:auto;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  background-position:15px center;
  background-repeat:no-repeat;
  -moz-box-shadow:0 0 12px #999;
  -webkit-box-shadow:0 0 12px #999;
  box-shadow:0 0 12px #999;
  color:#FFF;
  opacity:.8;
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter:alpha(opacity=100):
}
#toast-container>div.rtl{
  direction:rtl;
  padding:15px 50px 15px 15px;
  background-position:right 15px center
}
#toast-container>div:hover{
  -moz-box-shadow:0 0 12px #000;
  -webkit-box-shadow:0 0 12px #000;
  box-shadow:0 0 12px #000;
  opacity:1;
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter:alpha(opacity=100);
  cursor:pointer
}
#toast-container>.toast-info{
  background-image:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important
}
#toast-container>.toast-error{
  background-image:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important
}
#toast-container>.toast-success{
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAXCAYAAADk3wSdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKtSURBVHgBnVU9aFNhFL2VREyCSUnpDxjIy1ChHWrBBBwK0bFZGiGz0VFR2oKzVicdxDo51jg5CHaqm002RSVVMBkckmIHbYj2h6ZghHjPzbsv7yV9peSU0Hzvfd+595577peBVOtVi0x8f/CaKstr9G+nQSeFZ9BPsYUUjd/PdJ7ZCbdeFOjim7tUebZGA/w38fSaK1lpMSd7jPlZ+nrjuTxT4lO6CYTjSxkaujxJfmOYt5P8d/voe+wHGc47Mt3bqNJhtUZjcwl5eC6bpA9XHsrnKDRZnkZ1myaKWVmPpuOS7eFmjXzR4TZpvVCiMEeEPkBo2qCZ4mP6nS+RG0bTCfKa+72DATn/a/WTyCGk27wYSycch6TM60k6KSDDz9WPbVKkXeeMWqYM/aLB8u1vbFJ58SV5wslJERkla/n9AnKdnY6SJ8Ilwk4jc3EpoW9C7gs0jXCTxVLIEJ1zA2SBTHtcnhsalZpkCQgpSoeljgKef776RDSDxdymDUnBBRapZOpCCmmCHPTS+j3JBGsQd5PjPBxjkfp40XTJ4Ay/03GdWrkpd8O72G3ayhV6SH0mqfjUGwo47IQsfuTy9Cdfpij7TjMo87zre7jGjr87B07SIJdlL2eXA1SX30p0SKOumFq5RfXsN9EvaDZFAY96Qv5O+RC4yZGUWElGeKbtHcdYYvKGOMv12B1rP84CaLhDU2TUMJulN06cr8GZ4iP5DkupjkHzsK73v7QD6/B4OlkErLKauwcWkTGf4sN5CYSg9ktGSaCnBnKQgkxtFWMiNA9BcNATCliBtRnGwqxMD6Da95BKpjavRmw31PmljKUZ7s5u2D1qaQroxeI2MSB2I8TMh233xoD9h+89jyE2obTT5sgdB2gJ66FKbWgPKYBsu6fFDdAxeMGw5FH8B9qQR7/d/jHJAAAAAElFTkSuQmCC)!important
}
#toast-container>.toast-warning{
  background-image:url(data:image/png;
  base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important
}
#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{
  width:auto;
  margin-left:auto;
  margin-right:auto
}
#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{
  width:auto;
  margin-left:auto;
  margin-right:auto
}
.toast{
  background-color:#030303
}
.toast-success{
  background-color:#51A351
}
.toast-error{
  background-color:#BD362F
}
.toast-info{
  background-color:#2F96B4
}
.toast-warning{
  background-color:#F89406
}
.toast-progress{
  position:absolute;
  left:0;
  bottom:0;
  height:4px;
  background-color:#000;
  opacity:.4;
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter:alpha(opacity=40)
}
@media all and (max-width:240px){
  #toast-container>div{
      padding:8px 8px 8px 50px;
      width:11em
  }
  #toast-container>div.rtl{
      padding:8px 50px 8px 8px
  }
  #toast-container .toast-close-button{
      right:-.2em;
      top:-.2em
  }
  #toast-container .rtl .toast-close-button{
      left:-.2em;
      right:.2em
  }
}
@media all and (min-width:241px) and (max-width:480px){
  #toast-container>div{
      padding:8px 8px 8px 50px;
      width:18em
  }
  #toast-container>div.rtl{
      padding:8px 50px 8px 8px
  }
  #toast-container .toast-close-button{
      right:-.2em;
      top:-.2em
  }
  #toast-container .rtl .toast-close-button{
      left:-.2em;
      right:.2em
  }
}
@media all and (min-width:481px) and (max-width:768px){
  #toast-container>div{
      padding:15px 15px 15px 50px;
      width:25em
  }
  #toast-container>div.rtl{
      padding:15px 50px 15px 15px
  }
}


/* ..........notification css end ............ */




.videolist .input-group { border-radius: 10px; padding:6px 10px; width:60%; margin:20px auto 20px auto;
  border: 1px solid var(--Final-Gradient, #2BDAEF); overflow:hidden;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

  .videolist .input-group input { background:none; border:none; color:#fff; padding-left:0px;}
  .videolist .input-group input:focus {
    background:none !important; outline:0px !important;
  }

  .videolist .form-control:focus { background:none !important; box-shadow: none;}
  .videolist .input-group button { border:none; background:none;}


 

  .nav-item svg {
    height: 20px !important;
    margin-right: 0px !important;
    color: #fff;
}



.menuhover .parent-wrapper ul {
  background: #2BBBEF;
  border-radius: 0px;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 10px;
}










.popnewdesign .modal-content {
  background: #fff;
  color: #fff;
  border: 1px solid #4AFFA8;
  border-radius: 20px;
  padding: 15px 0px;
}

.popnewdesign .modal-body { color:#030445; font-weight:300; font-size:16px; text-align:center; padding: 0px; font-family: Lexend; margin-bottom:10px;}
.popnewdesign .modal-header { padding-bottom:20px;}

.popnewdesign .modal-footer {
  border: none;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.popnewdesign .modal-footer button { background:#2BBBEF !important; border:2px solid #2BBBEF !important; border-radius:18px; font-size:16px;}
.popnewdesign .modal-footer button:hover { background:none !important; border:2px solid #2BBBEF !important; color:#2BBBEF;}

.popnewdesign .modal-content h5 { color:#000; text-align:center; width: 100%; font-size:26px; font-weight:700;}
.popnewdesign .close {
  background: none;
  border: none;
  color: #fff;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: 1px solid #000;
  right: 10px;
  top: 10px;
}

.popnewdesign .close:hover { background:#2BBBEF;  border: 1px solid #2BBBEF; color:#fff;}
.popnewdesign .close:hover span { color:#fff;}

.popnewdesign .close span {
  color: #000;
  font-weight: 700;
  font-size: 25px;
  line-height: 30px;
}




.popnewdesign .btn-close {
  background: none;
  border: none;
  color: #fff;
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50px;
  border: 1px solid #000;
  right:21px;
  top:18px;
  box-sizing: border-box;
}

.popnewdesign .btn-close:hover { background:#2BBBEF;  border: 1px solid #2BBBEF; color:#fff;}
.popnewdesign .btn-close:hover span { color:#fff;}

.popnewdesign .btn-close span {
  color: #000;
  font-weight: 700;
  font-size: 25px;
  line-height:14px;
}










.popnewdesign .modal-header { border:none;}
.popnewdesign .modal-body { border:none;}
.popnewdesign .modal-footer button { background:#030445; border:2px solid #030445;}
.popnewdesign .modal-footer button:hover { background:#030445; border:2px solid #030445; background:none;}
.popnewdesign .modal-dialog {
  display: flex;
  height: 100%;
  flex-wrap: nowrap;
  align-content: flex-end;
  align-items: center;
}



#previewModal .btn-close {
  /* background: #fff; */
  background-color: #fff;
}

#previewTable_wrapper select {
  color: #000 !important;
}





.autpopup .modal-content {
  padding: 15px 15px !important;
}

.autpopup h5 {
  font-size:15px !important;
}

.autpopup .modal-footer {
  margin-top:0px;
}

#partsTable_wrapper select { color: #000;}



.scrollbarpre { max-height:600px; overflow: auto;}

.scrollbarpre::-webkit-scrollbar {
  width: 7px;
  border-radius: 4px;
}

/* Track */
.scrollbarpre::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.scrollbarpre::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}




.scrollbarpre::-webkit-scrollbar:horizontal {
  height: 7px;
  border-radius: 4px;
}

/* Track */
.scrollbarpre::-webkit-scrollbar-track:horizontal {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.scrollbarpre::-webkit-scrollbar-thumb:horizontal {
  background: #4EAACB;
  border-radius: 4px;
}




.dataTables_filter input {  border-radius: 10px; color:#fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; min-width:200px; padding:6px 10px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

  #gridTable_length select {   border-radius: 10px; color:#fff; text-align:center;
    border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

    #videosTable_length select {   border-radius: 10px; color:#fff; text-align:center; margin:0px 10px;
      border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

      #previewTable_length select {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
        border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;} 

.select-wrap select {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
  border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;} 


  #fileUploadsTable_length select {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
    border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}  


    #roleDropdown {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
      border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;} 
      
      #roleDropdown option { color:#000 !important;}


      #questionsTable_length select {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
        border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
        background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}  

        #questionsTable_length select:focus { box-shadow:none; outline:0px !important;} 

        .dataTables_filter input:focus { box-shadow:none; outline:0px !important;} 


        #partsTable_length select {   border-radius: 10px; color:#fff !important; text-align:center; margin:0px 10px;
          border: 1px solid var(--Final-Gradient, #2BDAEF); outline:0px; padding:6px 10px;
          background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;} 

          #partsTable_length select:focus { box-shadow:none; outline:0px !important;} 


          .dropdownmenu ul li { margin-left:0px !important;}
.dropdownmenu ul li .nav-link { padding:0px 15px !important;}

.reportdiv .row {
  --phoenix-gutter-x: 0rem;
  --phoenix-gutter-y: 0;
}

.qprompt h2 {
  margin-top: 25px;
  }


.mastertitle { color:#fff;}


.btn-phoenix-secondary { background:none;}
.master button { margin-top:15px;}


.mappingwap .form-label { padding-left:0rem; color:#fff; font-size:13px; margin-bottom:10px;}
.mappingwap select {
  border-radius: 10px;
  color: #fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  outline: 0px;
  min-width: 200px;
  padding:15px 10px;
  appearance: none !important;
  -webkit-appearance: auto !important;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
}


.mappingwap select option {
color: #000 !important;}




.mappingwap table { margin-top:40px;}

.mappingwap .dataTables_length {
  margin-bottom: 30px;
}

.mappingwap .dataTables_length select {  border-radius: 10px !important;
  color: #fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF) !important;
  outline: 0px;
  min-width: 200px;
  margin:0px 5px;
  padding: 8px 10px !important;
 
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

  .mappingwap .dataTables_filter input { border-radius: 10px !important;
    color: #fff !important;
    border: 1px solid var(--Final-Gradient, #2BDAEF) !important;
    outline: 0px;
    min-width: 200px;
    margin:0px 5px;
    padding: 8px 10px !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important; }


    .mappingwap .nav-tabs .nav-link {font-size: 15px; color:#2BBBEF;}

    .roletoggle { display:none;}

    .roletoggle button {
      background: none;
      border: none;
      padding-top: 13px;
  }



  .roletoggle { padding-bottom:10px; width:100%; height:auto; margin-bottom:10px; text-align:right; display:none; float: left; border-bottom:2px solid #2BBBEF; margin-bottom:18px;}

.roletoggle p {
  width: auto;
  float: left;
  color: #2BDAEF;
  font-size:19px;
  padding-top: 10px;
  display: inline-block;
  margin:0px;
}


.reportdata select {
  border-radius: 10px;
  color: #fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  outline: 0px;
  min-width: 200px;
  padding: 15px 10px;
  appearance: none !important;
  -webkit-appearance: auto !important;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
}

.reportdata select option { color:#000 !important;}



.reportdata select:focus { background:none !important; box-shadow: none;}

.modelwrap select {  border-radius: 10px;
  color: #fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  outline: 0px;
  min-width: 200px;
  padding: 15px 10px;
  margin-top:10px;
  appearance: none !important;
  -webkit-appearance: auto !important;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

  .modelwrap input {  border-radius: 10px;
    color: #fff !important;
    border: 1px solid var(--Final-Gradient, #2BDAEF);
    outline: 0px;
    min-width: 200px;
    padding: 15px 10px;
    margin-top:10px;
    margin-bottom:10px;
    appearance: none !important;
    -webkit-appearance: auto !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}


    .modelwrap textarea  {  border-radius: 10px;
      color: #fff !important;
      border: 1px solid var(--Final-Gradient, #2BDAEF);
      outline: 0px;
      min-width: 200px;
      padding: 15px 10px;
      margin-top:10px;
      appearance: none !important;
      -webkit-appearance: auto !important;
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}


      .modelwrap button {
        margin-top: 28px;
    }

.modelwrap textarea:focus { box-shadow:none;}
.modelwrap select:focus { box-shadow:none;}
.modelwrap select option { color:#000 !important;}


.AuditQuestionList .selected-option {
  border-radius: 10px;
  color: #fff !important;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  outline: 0px;
  min-width: 200px;
  padding: 15px 10px;
  margin-top:10px;
  appearance: none !important;
  -webkit-appearance: auto !important;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

  .AuditQuestionList .custom-dropdown { background:none; border:none;}

  .licence h1 { font-size: 32px;}

  
.licence select  {
    border-radius: 10px;
    color: #fff !important;
    border: 1px solid var(--Final-Gradient, #2BDAEF);
    outline: 0px;
    min-width: 200px;
    padding: 15px 10px !important;
    width:100% !important;
    appearance: none !important;
    -webkit-appearance: auto !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
}

.licence select option { color:#000;}


.paginate_button {
  background: none !important;
  padding: 10px 5px !important;
  border: none !important;
}

.dataTables_paginate {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}


.dataTables_paginate .current {
  border: none !important;
  box-shadow: none !important;
}

.paginate_button:active { box-shadow:none !important;}

.uploadlistmain h2 {
  margin-bottom: 0px;
}



.first-table tr td {
  width: 40%;
}


.full-description { word-break: break-all;}
table tr td { word-break: break-all;}


.chatmain .ui-autocomplete {
  background: #fff !important;
  position: absolute !important;
  top: auto !important;
  left: 0px !important;
  border: 2px solid #4AFFA8 !important;
  width: 100% !important;
  bottom:60px !important;
}

.chatmain .ui-menu-item div:hover { background:#2BBBEF !important; color:#fff !important;}

.chatmain .ui-menu-item:hover div { background:#2BBBEF !important; color:#fff !important;}

.chatmain .ui-menu-item:hover { background:#2BBBEF !important; color:#fff !important;}


.chatmain .ui-autocomplete .ui-menu-item div {
  color: var(--Dark-Blue, #010029) !important;
  font-family: Lexend !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 300 !important;}

  .chatmain .ui-autocomplete .ui-menu-item div:hover { color:#fff !important;}

.chatmain .ui-menu-item div { font-size:14px;}

.chatmain .ui-menu-item { border:none;}



.ui-autocomplete::-webkit-scrollbar {
  width: 7px;
  border-radius: 4px;
}

/* Track */
.ui-autocomplete::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}




.submenuicon {
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
  margin-right: 5px;
  /* padding: 5px; */
  text-align: center;
  padding-top: 3px;
}


#navbarVerticalNav .submenuicon svg {
  height: 16px !important;}


  .nav-item:hover .submenuicon { border:1px solid #020046;}

  .active-bt .submenuicon { border:1px solid #020046;}


  html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg .navbar-vertical-content {
    height: calc(100vh - var(--phoenix-navbar-top-height) - 0rem) !important;
}



/* 
.text-tb-wrap tr td:first-child {
white-space: nowrap;
text-overflow: ellipsis;} */

.paginate_button { cursor:pointer;}

.paginate_button:hover { color:#4AFFA8 !important;}

.rightlist .nav-tabs {
  border-bottom: 0px solid rgba(0, 0, 0, 0);
  white-space: nowrap;
  display: inline-block;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  height:60px;
}


.rightlist .nav-tabs::-webkit-scrollbar {
  height: 7px;
  border-radius: 4px;
}

/* Track */
.rightlist .nav-tabs::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
.rightlist .nav-tabs::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}


#scroll-bottom {
  position: absolute;
  z-index: 999;
  color: #fff;
  top:-43px;
  width: 30px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 30px;
  background: #2BBBEF;
  border-radius: 50px;
  padding:2px 0px 0px 6px;
  opacity: 0.6;
  cursor:pointer;
}


#scroll-bottom:hover { opacity:1;}


.anschat b .rounded-circle  { width:20px; margin-right:5px;}

.apiuser .edit-button {
  border-radius: 14px;
  background: none;
  border-radius: 14px;
  color: #FFF;
  font-family: Lexend;
  font-size: 13.249px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: #2BBBEF;
  padding:5px;
  border: 2px solid #2BBBEF;}


  .apiuser .edit-button:hover {
    border-radius: 14px;
    background: none;
    border-radius: 14px;
    color: #FFF;
    font-family: Lexend;
    font-size: 13.249px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: none;
    border: 2px solid #2BBBEF;
}





.apiuser .save-button {
  border-radius: 14px;
  background: none;
  border-radius: 14px;
  color: #FFF;
  font-family: Lexend;
  font-size: 13.249px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: #2BBBEF;
  padding:5px;
  border: 2px solid #2BBBEF;}


  .apiuser .save-button:hover {
    border-radius: 14px;
    background: none;
    border-radius: 14px;
    color: #FFF;
    font-family: Lexend;
    font-size: 13.249px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: none;
    border: 2px solid #2BBBEF;
}






.apiuser .cancel-button {
    border-radius: 14px;
    background: none;
    border-radius: 14px;
    color: #FFF;
    font-family: Lexend;
    font-size: 13.249px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    background: none;
    padding:5px;
    border: 2px solid #2BBBEF;
}



.apiuser .cancel-button:hover {
  border-radius: 14px;
  background: none;
  border-radius: 14px;
  color: #FFF;
  font-family: Lexend;
  font-size: 13.249px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: #2BBBEF;
  padding:5px;
  border: 2px solid #2BBBEF;}

  .apiuser input {
    background:none; border-radius: 10px;
    padding: 6px 10px;
    width: 60%;
    margin: 20px auto 20px auto;
    border: 1px solid var(--Final-Gradient, #2BDAEF);
    overflow: hidden;
    color:#fff;
    margin-bottom:10px !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}


.apiuser input:focus { box-shadow:none; color:#fff; outline:0px; box-shadow:none; background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}


.CommentsExtractor-new { padding:0px 150px; margin-bottom:50px; position:relative;}
.CommentsExtractor-new .CommentsExtracto-title { width:100%; height:auto; text-align:center; margin-top:20px;}
.CommentsExtractor-new .CommentsExtracto-title h1 {
  color: var(--blanco, #FFF);
  font-family: Lexend;
  font-size:35px;
  font-style: normal;
  font-weight: 400;
  line-height:40px; /* 171.428% */
  letter-spacing: 0.366px; }


  .CommentsExtractor-new .CommentsExtracto-title h2 {
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    background-clip: text;
    -webkit-background-clip: text; /* Required for WebKit-based browsers (e.g., Chrome, Safari) */
    -webkit-text-fill-color: transparent; /* Makes the text background transparent */
    text-align: center;
    font-family: Lexend;
    font-size: 39.829px;
    font-style: normal;
    font-weight: 600;
    line-height:66px; /* 171.428% */
    margin-bottom:20px;
    letter-spacing: 0.366px;}


    .CommentsExtractor-new .CommentsExtracto-title p {
      color: var(--blanco, #FFF);
      font-family: Lexend;
      font-size:18px;
      font-style: normal;
      font-weight: 400;
      line-height:0px; /* 204.934% */
      letter-spacing: 0.307px;}


      .CommentsExtractor-new .tag-search-main {
        border-radius: 29px;
        border: 2px solid rgba(255, 255, 255, 0.6);
        background: #030445;
        margin-top:20px;
        display: inline-block;
        padding:10px;
        width: 100%;
       margin-bottom:50px;
       margin-bottom:31px;}


        .CommentsExtractor-new .ss-main .ss-multi-selected { background:none; border:none;}

        .ss-main .ss-content { top:52px;}

        .ss-main .ss-content.ss-open {
          display: block;
          opacity: 1;
          transform: scaleY(1);
          border-radius:14px;
          border: none;
          overflow:hidden;
      }





  .ss-option:hover {color:#000 !important; background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%); }
  .ss-disabled:hover { background:none !important; color:#dedede !important;}


  .ss-single-selected {
    background: none !important;
    border:none !important;
}

.ss-main .ss-single-selected .placeholder { background:none; color:#fff;}

.tag-search-main .placeholder { opacity:1;}

.ss-main .ss-single-selected .ss-arrow span {
  /* border: solid #fff; */
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transition: transform .2s, margin .2s;
}




.home-page-checkbox .styled-checkbox {
  position: absolute;
  opacity: 0;
}
.home-page-checkbox .styled-checkbox + label {
  position: relative;
  cursor: pointer;
  padding: 8px 10px;
  color:#fff;
  z-index:9;
  width: 100%;
  font-size:14px;
  text-align: center;

}

.home-page-checkbox .styled-checkbox + label:before {
  content: "";
  margin-right:0px;
  display: inline-block;
  vertical-align: text-top;
  width:100%;
  height:100%;
  position:absolute;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background:none;
  font-family: Lexend;
  color:#fff;
  /* box-shadow: 0px 4px 18.7px 0px #181979; */
  left:0px;
  top:0px;
  z-index:9;
}
/* .home-page-checkbox .styled-checkbox:hover + label:before {
  background: #f35429;
  border:1px solid #f35429;
} */
.home-page-checkbox .styled-checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.home-page-checkbox .styled-checkbox:checked + label:before {
background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%);
border:2px solid #2BDAEF; z-index:-1;
}
.home-page-checkbox .styled-checkbox:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}
.home-page-checkbox .styled-checkbox:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}
.home-page-checkbox .styled-checkbox:checked + label:after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
  display:none;
}

.home-page-checkbox ul {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  text-align:center;
}

  .home-page-checkbox ul li {
    list-style: none;
    /* display: inline; */
    list-style-type: none;
    display:inline-block;
    list-style-type: none;
    width:auto;
    margin-right:5px;
}

.home-page-checkbox ul li:last-child { margin-right:0px;}


.ss-main .ss-multi-selected .ss-values .ss-value { background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%) !important;}
.tagleft { border-right:1px solid #fff;}

.placeholder { cursor: auto;}

.datasource { width:100%; height:auto; margin-top:42px; transition: all 0.3s ease;}

.datasource h2 { color: var(--blanco, #FFF);
  font-family: Lexend;
  font-size:17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom:15px;
  transition: all 0.3s ease;
  letter-spacing: 0.307px;}

  .datasource h2 b { font-weight:normal;}

  




  .datasource section {
    margin:0px auto;
    width:100%;
    text-align: center;
    font-weight: bold;
    padding-top: 0rem;
    background: rgba(255, 255, 255, 0.20) !important;
    display: inline-block;
    padding-bottom: 0rem;
    border-radius: 22px;
    overflow:visible;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    transition: all 0.3s ease;
}



.datasource .item {
    width:auto;
    float: left;
    transition: background-color 0.3s, color 0.3s;
    height:auto;
    cursor: pointer;
    margin-left:5px;
    transition: all 0.3s ease;
    position: relative;
}

.datasource .item:first-child { margin-left:0px; transition: all 0.3s ease; border-radius:23px 0px 0px 23px;}




.datasource .active {
    
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  box-shadow: 0px 4px 10.9px 0px rgba(0, 0, 0, 0.25);
  color: #ecf0f1; transition: all 0.3s ease;
}

.datasource .info {
  width: 0; /* Start collapsed */
  opacity: 0; /* Hidden by default */
  padding: 0; /* No padding for inactive sections */
  float: left;
  color: #222;
  height: auto;
  transition: width 0.5s ease, opacity 0.5s ease, padding 0.5s ease; /* Smooth padding transition */
  overflow: hidden;
}


.datasource .info input { width:100%; border-radius: 23px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  opacity:1;
  background: #030445;
  color:#fff;
  text-align:center;
  outline:0px;
  padding:10px 15px;
  margin-top:6px;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 18.7px 0px #181979;}


  .trainNow {
    width: 100%;
    text-align: center;
    height:100%;
    display: inline-block;
}

.trainNow button {
  border-radius: 15px;
  border: 2px solid var(--Final-Gradient, #2BDAEF);
  background: #030445;
  color: var(--blanco, #FFF);
  text-align: center;
  font-family: Lexend;
  font-size: 18px;
  min-width: 100%;
  font-style: normal;
  font-weight: 600;
  line-height: 151%;
  letter-spacing: -0.011px;
  display: inline-block;
  padding: 8px 0px;
  transition: 0.3s;
  height: 100%;
}

.trainNow button:hover { transition: 0.3s; color:#000; text-decoration:none; background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));}

.ss-main .ss-single-selected .ss-arrow span { border: solid #89797D !important; border-width: 0 2px 2px 0 !important;}



.ss-main .ss-content .ss-list .ss-option {
  font-family: Lexend !important;
  color: #000 !important;
  font-size:16px;
}



.ss-main .ss-content .ss-list .ss-option {
  border-radius: 10px !important;
}


.ss-main .ss-content .ss-list {
 margin-left: 10px !important;
 margin-right: 10px !important;
 margin-bottom: 10px !important;
}




.scroll-container {
  overflow: hidden; /* Hide scrollbars */
  width: 100%; /* Set the container width */
  cursor: grab; /* Show grab cursor */
  position: relative;
  margin-bottom:22px;
}

.scrollable-list {
position: relative;
  gap: 20px; 
  list-style: none; 
  margin: 0;
  padding: 0;
  overflow-x: auto; 
  scrollbar-width: none; 
}


.scroll-container::before {
  position: absolute;
  content: '';
  width: 110px;
  height: 100%;
  background: linear-gradient(90deg, #030445 27.59%, rgba(3, 4, 69, 0.00) 100%);
  z-index: 99;
  top: 0px;
  left: -50px;
}


.scroll-container::after {
  position: absolute;
  content: '';
  width: 110px;
  height: 100%;
  background: linear-gradient(270deg, #030445 45.59%, rgba(3, 4, 69, 0.00) 100%);
  z-index: 99;
  top: 0px;
  right: -33px;
}




.scrollable-list::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome/Safari */
}




.ss-main .ss-content .ss-list .ss-option.ss-disabled { background-color: #ffffff;}


.scrollable-list {
  scroll-behavior: smooth;
}


.home-page-checkbox ul li img {
  height: 18px;
}




.navbar-vertical .navbar-vertical-footer
{
    width: 100%;
    left: 0px;
    overflow:hidden;
    
}




.navbar-vertical-footer button { justify-content: center;}

#navbarVerticalCollapse .navbar-nav { margin-bottom:70px;}


.pading-remove {
  padding-left: 0px !important;
  padding-right:25px !important;
  transition: 0.3s;
}

.pading-fix {  transition: 0.3s;}

.padding-hover-remove {
  padding-left: 0px !important;
  padding-right:25px !important;
  transition: 0.3s;}


  .training-center h1 {
    color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size:25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top:30px;
    margin-bottom:40px;
    letter-spacing: 0.366px;}


 










    #blob {
      position: relative;
      margin-top: 180px;
      
  }
    #blob canvas {
      width: 1000px;
      margin-top: -7%;
      width:100%;
      height:300px;
      transform: scale(2.4);
      position: relative;
      z-index:1;
    }
    @media (max-width: 1200px) {
      #blob canvas {
        margin-top: -10%;
        width: 800px;
      }
    }
    @media (max-width: 600px) {
      #blob canvas {
        width: 800px;
      }
    }
    
    .controls {
      display: flex;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      z-index: 3;
      margin-bottom:14px;
      z-index:2;
      padding-left:0px;
      padding-right:0px;
      justify-content: space-around;
     
    }

    @media (max-width: 1200px) {
      .controls {
        margin-top: -4%;
      }
    }
    @media (max-width: 600px) {
      .controls {
        flex-direction: column;
      }
    }
    .controls label {
      color: #CDD9ED;
      font-weight: 500;
      font-size: 14px;
      display: block;
      margin-bottom: 16px;
    }
    @media (max-width: 600px) {
      .controls label {
        margin-bottom: 12px;
      }
    }
    .controls [type=range] {
      width: 160px;
    }
    @media (max-width: 600px) {
      .controls [type=range] {
        width: 280px;
      }
    }
    .controls > div:not(:last-child) {
      margin-right: 20px;
    }
    @media (max-width: 600px) {
      .controls > div:not(:last-child) {
        margin: 0 0 24px 0;
      }
    }
    
    .rangeSlider {
      position: relative;
      background: none;
      border: 1px solid #fff;
      border-radius: 6px;
      cursor: pointer;
    }
    .rangeSlider.rangeSlider__horizontal {
      height: 10px;
      width:99px;
    }
    .rangeSlider .rangeSlider__fill {
      border-radius: 7px;
      background: #2BBBEF;
      position: absolute;
    }
    .rangeSlider .rangeSlider__fill:before {
      content: "";
      left: -2px;
      top: -2px;
      bottom: -2px;
      right: -2px;
      border: 2px solid #2BBBEF;
      border-radius: 6px;
      position: absolute;
    }
    .rangeSlider .rangeSlider__fill__horizontal {
      height: 100%;
      top: 0;
      left: 0;
    }
    .rangeSlider .rangeSlider__handle {
      border: 2px solid #2BBBEF;
      cursor: grab;
      cursor: -webkit-grab;
      display: inline-block;
      width: 22px;
      height: 22px;
      position: absolute;
      background:#2BBBEF;
      border-radius: 50%;
    }
    .rangeSlider .rangeSlider__handle__horizontal {
      top: -7px;
    }


    .controls input[type="range"] {
      width: 100%;
  }

  .range-slider img { width: auto; height:250px; }

  .ai-image { width:100%; text-align:center; position:relative;}


  .line1 {
    position: absolute;
    top: 48px;
    left:274px;
    height: 180px !important;
}


.line2 {
  position: absolute;
  top: 39px;
  left: 252px;
  height: 186px !important;
}



.line3 {
  position: absolute;
  top: 110px;
  left: 273px;
  
  height: 180px !important;
}


.line4 {
  position: absolute;
  top: -50px;
  left: 257px;
  
  height: 180px !important;
}

.ai-img {
  position: relative;
  z-index: 4;
}



.desktop-hide-master { display:none;}



.trends-new { width: 100%; height:auto; margin-top:20px;}
.trends-new button { border-radius: 15.68px;
  border: 2px solid rgba(217, 217, 217, 0.6);
color: #EBEBEB;
font-family: Lexend;
font-size: 16px;
font-style: normal;
margin-right:15px;
font-weight: 400;
min-width:160px;
line-height: normal;
letter-spacing: -0.078px;
border-radius: 15.68px !important;
 }


 .trends-new button:hover { border-radius: 15.68px;
  background:none; color:#2BDAEF;  border: 2.24px solid rgba(43, 218, 239, 0.6);
 }

.trends-new #pills-tab .active { background:none; color:#2BDAEF;  border: 2.24px solid rgba(43, 218, 239, 0.6);}

.trends-new .tab-content {
  padding-top: 20px;
}

.select-industry-main {
  border-radius: 17px;
  padding:10px 20px;
  background: rgba(255, 255, 255, 0.2);
  }


  .select-industry-main .select-industry-box { border-radius: 17px;
    border:1.5px solid rgba(217, 217, 217, 0.6);
    width:100%;
    padding:10px;
    color:#fff;
    background: #030445;
    box-shadow: 0px 4px 18.7px 0px #181979;}

    .select-industry-main .select-industry-box input {  width:100%; height:auto; background:none; outline:0; border:0px; color:#fff; margin-top:20px;}









    .select-industry-main .select-hidden {
      display: none;
      visibility: hidden;
      padding-right: 10px;
    }
    
    .select-industry-main .select {
      cursor: pointer;
      display: inline-block;
      position: relative;
      font-size: 16px;
      color: #fff;
      width: 100%;
      height: 40px;
      margin-top: 26px;
  }
    
    .select-industry-main .select-styled {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
     background:none;
      padding: 8px 15px;
      -moz-transition: all 0.2s ease-in;
      -o-transition: all 0.2s ease-in;
      -webkit-transition: all 0.2s ease-in;
      transition: all 0.2s ease-in;
    }
    .select-industry-main .select-styled:after {
      /* content: "";
      width: 0;
      height: 0;
      border: 7px solid transparent;
      border-color: #fff transparent transparent transparent;
      position: absolute;
      top: 16px;
      right: 10px; */
      position: absolute;
      right: 0px;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      border-right-style: solid;
      border-right-width: 2px;
      content: "";
      display: inline-block;
      height: 12px;
      right: 20px;
      position: absolute;
      top:8px;
      width: 12px;
      rotate: 20;
      rotate: 45deg;
      transition: all 0.3s ease-out;
    }
    .select-industry-main .select-styled:hover {
      background-color:none;
    }
    .select-industry-main .select-styled:active, .select-styled.active {
      background:none;
    }
    .select-industry-main .select-styled:active:after, .select-styled.active:after {
      /* top: 9px;
      border-color: transparent transparent #fff transparent; */
    }
    
    .select-industry-main .select-options {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      z-index: 99;
      margin: 0;
      padding: 0;
      list-style: none;
      background-color: #ab3326;
    }
    .select-industry-main .select-options li {
      margin: 0;
      padding: 12px 0;
      text-indent: 15px;
      border-top: 1px solid #962d22;
      -moz-transition: all 0.15s ease-in;
      -o-transition: all 0.15s ease-in;
      -webkit-transition: all 0.15s ease-in;
      transition: all 0.15s ease-in;
    }
    .select-industry-main .select-options li:hover, .select-options li.is-selected {
      color: #030445;
      background: #fff;
    }
    .select-industry-main .select-options li[rel="hide"] {
      display: none;
    }

    .select-industry-box {
      min-height: 115px;
  }



  .compare-main {
    border-radius: 17px;
    border:1.5px solid rgba(217, 217, 217, 0.6);
    background: rgba(3, 4, 69, 0.59);
    color:#fff;
    padding:10px;
    min-height:115px;
    box-shadow: 0px 4px 18.7px 0px #181979;}

.select-box {
      margin-top: 0px;
      display: flex;
      gap: 15px;
  }




.interest-over-time { border-radius: 22px; width:100%; height:auto;
background: rgba(255, 255, 255, 0.20); margin-top:34px; padding:20px;}

.interest-over-time h1 {
  color: #EBEBEB;
  font-family: Lexend;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.066px;}

  .interest-over-time .share-icon svg { margin-right:5px;}




.select-box .select {
color: #fff;
font-family: Lexend;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.114px;
margin-top:15px;
border-radius: 12px;
box-shadow: 0px 4px 18.7px 0px #181979;}


.select-box .select-styled{border-radius: 10px;  background: #030445;
  border: 1.5px solid rgba(217, 217, 217, 0.6); }

  .select-box .select-styled.active { background: #030445; border-radius: 10px 10px 0px 0px; border-bottom:none;}

.select-box .select-options {
    background: #030445 !important;
    border: 1px solid rgba(217, 217, 217, 0.6);
    max-height: 200px;
    overflow: scroll;
    overflow-x: hidden;
}


/* width */
.select-box .select-options::-webkit-scrollbar {
  width:2px;
}

/* Track */
.select-box .select-options::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.select-box .select-options::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.select-box .select-options::-webkit-scrollbar-thumb:hover {
  background: #555; }


.select-box .select-options  li {
border:1px solid rgba(217, 217, 217, 0.6);}


.select-box .custom-dropdown {
width: 100%;
margin-top:15px;
outline:0px;
display: inline-block;}


.select-box .custom-dropdown input {
  border-radius: 10px;
  background: #030445;
  width:100%;
  padding:10px;
  color: #fff;
font-family: Lexend;
font-size:15px;
font-style: normal;
font-weight: 400;
line-height: normal;
outline:0;
letter-spacing: 0.114px;
  border: 1.5px solid rgba(217, 217, 217, 0.6);
}



.select-box #search-input:focus {border-radius:10px 10px 0px 0px;}


.select-box  #custom-dropdown-new {
  position: relative;
  width: 100%;}


  .select-box .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-top: none;
    position: absolute;
    width: 100%;
    background:#030445;
    z-index:99;
    color:#fff;
    font-family: Lexend;
font-size:14px;
border-radius: 0px;
padding-top:0px;
padding-bottom:0px;
    display: none; /* Initially hidden */
}


.select-box .dropdown-option { border-bottom: 1.5px solid rgba(217, 217, 217, 0.6);}
.select-box .dropdown-option:hover { color:#030445;}

.select-box .dropdown-menu {
  max-height: 200px;
  overflow: scroll;
  overflow-x: hidden;}

/* width */
.select-box .dropdown-menu::-webkit-scrollbar {
  width:2px;
}

/* Track */
.select-box .dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.select-box .dropdown-menu::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.select-box .dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #555; }


  #custom-dropdown-new input { border-radius: 10px;
    background: #030445;
    width: 100%;
    padding: 10px;
    color: #fff;
    font-family: Lexend;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    outline: 0;
    letter-spacing: 0.114px;
    border: 1.5px solid rgba(217, 217, 217, 0.6);}

    .select-box #custom-dropdown-new { margin-top:15px;}

    #custom-dropdown-new .dropdown-option-category:hover { color:#030445;}
    #search-input-new:focus { border-radius:10px 10px 0px 0px !important;}
    #dropdown-menu-new .dropdown-option-category { border: 1px solid rgba(217, 217, 217, 0.6) !important;}


    .compare-main button {
      border: none;
      background: none;
      padding: 0px 0px 0px 20px;
      text-align: left;
      margin-top: 32px;
  }

  .compare-main button:hover { border:none;  transform: translateY(0px) !important;}


  .region-trends {
    margin-top: 20px !important;
}



.trending-now-option { background:none !important; padding:0px; margin-bottom:25px;}
.trending-now-option .select-box .select {margin-top: 0px;}

.trending-now-chart canvas {
  border-radius: 16.437px;
  border: 1.174px solid rgba(3, 4, 69, 0.70);
  margin: 8px 0px;
  background: rgba(3, 4, 69, 0.6);}

  .trending-now-chart { background: rgba(255, 255, 255, 0.20); padding:15px; border-radius:10px; margin-bottom: 20px;}
  .trending-now-chart table { border-radius:0px;}


  .trending-now-chart td {
    font-weight: 300;
    padding-left: 20px;
    text-transform:capitalize;
}


.trending-now-chart th {
  font-weight:600;
  color:#2BBBEF;
  padding-bottom: 20px;
  padding-left:20px;
}


.trending-now-key h2 { font-size:16px; font-weight:400; margin-bottom:15px;}

.trending-now-key input {
  width: auto;
  min-width: 330px;
  margin-right: 10px;
  border-radius: 15px;
  border: none;
  border-radius: 16.067px;
  border: 2px solid rgba(217, 217, 217, 0.6);
background: #030445;
color:#fff;
outline:0;
box-shadow: 0px 4.591px 21.461px 0px #181979;
text-transform: capitalize;
}

.trending-now-key button { background:none;}
.dial-main-wrap { max-width:1300px; margin:auto;}



.share-icon button {
  background: none;
  border: none;
  width: auto;
  min-width: auto;
  margin:0px;
}


.share-icon button:hover { border:none; margin:0px;}


.select-last .select2 {
  border-radius: 10px;
    background: #030445 !important;
    border: 1.5px solid rgba(217, 217, 217, 0.6) !important;
    padding: 5px 15px !important;
    margin-top: 14px;
}


.select-last .active { border-radius: 10px 10px 0px 0px !important;}

.select-last .select2 button { display:none;}
.select-last .select2-selection { background:none !important; border:none !important;}
.select-last .select2-selection__arrow { display:none;}
.select-last .select2-results__options li { padding: 10px 10px;}





/* width */
.select-last .select2-results__options::-webkit-scrollbar {
  width:2px;
}

/* Track */
.select-last .select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.select-last .select2-results__options::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.select-last .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #555; }


.select-last .select2-search__field { margin-top: 0px;}





.select-last .select2-container {
  background: #030445 !important;
  border:2px solid rgba(217, 217, 217, 0.6);
  max-height: 200px;
  overflow: scroll;
  border-top:0px;
  overflow-x: hidden;}

  .select-last .select2-dropdown { padding:0px !important;}

.select-last .select2-results__options { background:none !important;}
.select-last .select2-results__options li { background:none !important;}
.select-last .custom-select2-dropdown .select2-results__option { background:none !important;}
.select-last .select2-results__options li:hover { background:#fff !important; color: #030445 !important;}
.select-last .select2-results__options li { border: 1px solid rgba(217, 217, 217, 0.6) !important; border-left:none I !important; border-left:none !important;}


.select-last { position: relative;}

.select-last .select { display:none !important;}

.select-last .select2-container { width:240px !important; overflow:hidden; z-index:9;}

.select-last .select2-results__options {
  max-height: 150px !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.select-last .select2-container--focus { overflow:hidden !important;}





.select-last .select2-container--open { overflow:unset !important;}

.select-last .select2-selection__rendered {
  padding: 0px !important;
  padding-top:0px !important;
  color:#fff !important;
}



.select-last .select2-selection__rendered:after {
  right:6px;
}

.select-last .select2-selection__rendered {
  padding-top: 0px !important;
}


.select-last .select-box .select2 {
 
  padding: 10px 15px !important;
}





.select-box .custom-dropdown { text-transform:capitalize;}
.select-box .dropdown-option { text-transform:capitalize;}
.select-box .select-styled { text-transform:capitalize;}
.select-box .select-options li { text-transform:capitalize;}
.select-box #custom-dropdown-new input  { text-transform:capitalize;}
.select-box .dropdown-option-category { text-transform:capitalize;}
.select-industry-box input { text-transform:capitalize !important;}

.select-box #dropdown-menu-new { z-index: 9;}


#logoutBtn:hover { color:#2BDAEF;}

#logoutBtn:hover svg { stroke:#2BDAEF;}

#logoutBtn:active {
  background:none !important;
}




.snippet .chat-container {
  width:auto;
  border-radius: 10px;
  text-align:left;
}

.snippet .chat-box {
  min-height: auto;
  padding:0px;
  border-radius:0px;
  font-size:14px;
  min-width: 100%;
  text-align:left;
  font-weight:300;
  border:0px solid #2BDAEF;
  font-family: Lexend;
  letter-spacing:3px;
  padding:0px 0px;
  
}

/* Smooth letter animation */
/* .snippet .letter {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
} */

/* Dots animation */
.snippet .dots {
  opacity: 0;
  animation: dotsFade 1.2s infinite steps(1, end);
}

@keyframes dotsFade {
  0% { content: ""; opacity: 0; }
  33% { content: "."; opacity: 1; }
  66% { content: ".."; opacity: 1; }
  100% { content: "..."; opacity: 1; }
}

.loader-wrap {
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Ensure it's not just invisible but also faded out */
}
/* Loader Styles */
.loader-wrap .loader-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Progress Bar */
.loader-wrap .progress-bar {
  width: 12%;
  height:22px;
  background: none;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  padding:4px;
  border: 2px solid #2BBBEF;
}

.loader-wrap .progress-fill {
  width: 0%;
  height: 100%;
  background: #2BBBEF;
  transition: width 0.2s ease-in-out;
  border-radius:0px;
}

/* Loader Text */
.loader-wrap .loader-wrap-heading {
  text-align: center;
  display:inline-block;
}

.loader-wrap .load-text {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* SVG Styling */
.loader-wrap svg {
  width: 100%;
  height: 150px;
}


.completed { animation: mymove ease 0.5s; animation-iteration-count: 1;
  animation-fill-mode: forwards;}

.complete-active { animation: mymove1 ease 0.5s; animation-iteration-count: 1;
  animation-fill-mode: forwards;}



@keyframes mymove {
  from {opacity: 1;
    transform: translate(0px, 0px);}
  to {opacity: 0;
    transform: translate(0px, 100px);}
}



@keyframes mymove1 {
  from {opacity: 1;
    transform: translate(0px, 0px);}
  to {opacity: 0;
    transform: translate(0px, -100px);}
}





.channel-table-newdesign .searchfild { max-width:657px; height:auto; margin:auto; border-radius: 10px;
  border: 1px solid var(--Final-Gradient, #2BDAEF); margin-bottom:30px; padding:10px; display:flex;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

  .channel-table-newdesign .searchfild input { color:#fff; min-width:95%; height:auto; background:none; border:none; outline:none;}
  .channel-table-newdesign .searchfild button { transition: all 0.3s ease-out; background:none; border:none; width:30px; height:30px; border-radius:50%; background:rgb(43, 218, 239, 0);}
  .channel-table-newdesign .searchfild button:hover { background:rgb(43, 218, 239, 1); transition: all 0.3s ease-out;}
  .channel-table-newdesign .channel-box { padding:20px;  z-index:10; border-radius: 30px; margin-bottom:32px; position:relative;
    /* border: 1px solid #FFF; 
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; */
    /* filter: blur(2px);  */ }

    .channel-table-newdesign .channel-box::after {
      position: absolute;
      content: '';
      border-radius: 30px;
      filter: blur(2px);
      border: 1px solid #FFF; padding:20px;
      /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; */
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      z-index:-1;
  }

   /* .channel-table-newdesign .channel-box div { filter: blur(0px);} */
   .channel-table-newdesign .newdesign-box {
    border-radius: 19.043px;
    border: 0.778px solid #FFF;
    padding:15px 20px;
    text-align:center;
    height:100%;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);}

  


  .channel-table-newdesign .newdesign-box h2 { text-align:center; color: #4AFFA8;
font-family: Lexend;
    font-size:24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;}

    .channel-table-newdesign .newdesign-box p {
      text-align:center; color: #FFF;
      font-family: Lexend;
      font-size: 14px;
      font-style: normal;
      font-weight: 300;
      text-transform:uppercase;
      letter-spacing:0px;
      line-height: normal;}

      .channel-table-newdesign .progressbaarmain { width:100%; height:auto; margin-top:10px; padding:0px 54px;}
      .channel-table-newdesign .progressbaar { width:100%; height:auto; background:#D9D9D9; border-radius: 3.5px; height:7px;}
      .channel-table-newdesign .progressbaar-fill { border-radius: 3.5px; background: #2BDAEF; height: 100%;}
      .channel-table-newdesign .progressbaartext { width:100%; height:auto; display:inline-block; line-height:10px;}
      .channel-table-newdesign .progressbaartext span {
        float:left; color: #FFF;
        font-family: Lexend;
        font-size:11px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;}

        .channel-table-newdesign .progressbaartext b {
          float:left; color: #FFF;
          font-family: Lexend;
          font-size:11px !important;
          font-style: normal;
          font-weight: 300;
          line-height: normal;}


      



        .channel-table-newdesign .progressbaartext b {
          font-weight: 300;
          float:right;
          color:#fff;
          }

.channel-table-newdesign .descreption-wrap { width:100%; height:auto; margin-top:20px;}
.channel-table-newdesign .descreption-wrap h3 {
  color: #2BDAEF;
  font-family: Lexend;
  font-size:16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal; }

  .channel-table-newdesign .descreption-wrap p {
    color: #FFF;
    text-align: center;
    font-family: Lexend;
    font-size: 14.9px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom:0px;
    text-transform:unset;
    line-height: normal;}

    .channel-table-newdesign .channel-confirmation-wrap { width:100%; height:auto; display:flex; align-items:center;}

    .channel-table-newdesign .channel-confirmation-wrap b img {
      height: auto;
      width: 41px;
      margin-top: 10px;}

    .channel-table-newdesign .channel-confirmation-wrap span {
      text-align:left; margin-left:10px;
      color: #4AFFA8;
      font-family: Lexend;
      font-size: 24.203px !important;
      font-style: normal;
      font-weight: 500;
      line-height: normal;}

      .channel-table-newdesign .newdesign-box h4 {
        color: #4AFFA8;
        font-family: Lexend;
        font-size:24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal; }


        .channel-table-newdesign .newdesign-box h5 {
          color: #4AFFA8;
          font-family: Lexend;
          font-size:14px;
          font-style: normal;
          font-weight: 500;
          margin-top:15px;
          margin-bottom:8px;
          line-height: normal; }

          .channel-table-newdesign .newdesign-box b { color:#fff; font-weight:300; font-size:18px;}







      .channel-table-newdesign .subData { text-align:left;}

        .channel-table-newdesign .subData p {
          color: #FFF;
         font-family: Lexend;
          font-size:19px;
          letter-spacing:0;
          font-style: normal;
          text-align:left;
          font-weight: 300;
          text-transform:unset;
          line-height: normal;}

 .channel-table-newdesign .subData p a {
          color: #FFF;
         }

.channel-table-newdesign .subData p a:hover { color:#4AFFA8}

.linkend-last .newdesign-box-data p { text-transform: none !important;}
.linkend-last .newdesign-box-data p a { text-transform: none !important; color:#fff;}
.linkend-last .newdesign-box-data p a:hover { text-transform: none !important; color:#4AFFA8;}



.channel-table-newdesign .margin-bottom-18 { margin-bottom:18px;}
.channel-table-newdesign .comment-tokens { width:100%; height:auto; margin-bottom:17px; margin-top:0px;}
.channel-table-newdesign .comment-tokens:last-child { margin-bottom:0px;}
.channel-table-newdesign .comment-tokens span {
  color: #FFF;
  font-family: Lexend;
  font-size:58px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;}

  .channel-table-newdesign .comment-tokens p {
    color: #FFF;
    font-family: Lexend;
    font-size: 15.553px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0;
    border-bottom: 1px solid #666;
    text-transform: uppercase;
    width: auto;
    display: inline;
    padding-bottom: 10px;
}


.channel-table-newdesign .newdesign-box-data h4 {
  color: #4AFFA8;
  font-family: Lexend;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  text-align:left;
  line-height: normal;}

  .channel-table-newdesign .newdesign-box-data span {
    color: #FFF;
    font-family: Lexend;
    font-size:58px;
    width:100%;
    text-align:left;
    font-style: normal;
    font-weight: 500;
    display:inline-block;
    line-height: normal;}

    .channel-table-newdesign .newdesign-box-data p {
      letter-spacing:0; color: #FFF;
      font-family: Lexend;
      font-size: 18px;
      font-style: normal;
      text-align:left;
      font-weight: 300;
      line-height: normal;
      text-transform: uppercase;}

    .channel-table-newdesign .extra-link { width:100%; height:auto;}

    .channel-table-newdesign .extra-link h5 { color: var(--Final-Blue, #2BBBEF);
      font-family: Lexend;
      font-size:14px;
      font-style: normal;
      font-weight: 500; 
      text-align:left;
      line-height: normal;}

      .channel-table-newdesign .extra-link p {
        color: #FFF;
      font-family: Lexend;
        font-size:14px;
        letter-spacing:0;
        font-style: normal;
        text-align:left;
        font-weight: 300;
        text-transform:unset;
        line-height: normal;}

        .channel-table-newdesign .extra-link p a { color: #FFF;
          font-family: Lexend;
            font-size:14px;
            letter-spacing:0;
            font-style: normal;
            text-align:left;
            font-weight: 300;
            line-height: normal;}

    .newdesign-box-data {
          margin-bottom:24px;
          margin-top:0px;
      }

.height-auto { height:auto !important;}

.padding-right-0 { padding-right:0px;}

.height-22 { height:22% !important;}
.height-73 { height:73.5% !important;}


.channel-table-newdesign .searchfild input::placeholder {
  opacity:1;
  color: rgba(255, 255, 255, 0.65);
 font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;}


  .channelDetail-new h2 {
    color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    margin-bottom:15px;
    text-align:center;
    line-height: normal;}

  .channelDetail-new .nav-tabs { text-align:center;}

  .channelDetail-new .newdesign-box h2 {
    color: #4AFFA8;
    font-family: Lexend;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;}

  .channelDetail-new .user-name { flex-direction: column;}

 .channelDetail-new .user-name h3 {
  text-align:left; 
  color: #4AFFA8;
  font-family: Lexend;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;}

  .channelDetail-new .user-name p { 
    color: #FFF;
font-family: Lexend;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    letter-spacing:0;
    text-align:left;
    margin:0px;
    line-height: normal;}


.channelDetail-new .new-box-list .comment-tokens { padding-bottom:12px;}
.channelDetail-new .new-box-list .comment-tokens span { font-size:41px;}
.channelDetail-new .new-box-list { margin-bottom:8px; text-align:center;}
.channelDetail-new .new-box-list h4 { text-align:center;}
.channelDetail-new .new-box-list span { text-align:center;}
.channelDetail-new .new-box-list h5 { text-align:center;}
.channelDetail-new .new-box-list p { text-align:center;}

.new-box-list p { padding:0px !important; margin:0px; text-align:center;}
.gopostbutton { padding-top:20px; padding-bottom:20px;}
.gopostbutton a {
  border-radius: 14px;
  min-width:49%;
  display:inline-block;
  margin:0px 0px;
  color: var(--Final-Blue, #2BBBEF);
font-family: Lexend;
font-size: 15px;
font-style: normal;
font-weight:400;
line-height: normal;
float:left;
  padding:10px 0px;
  margin-right:10px;
  border: 1px solid var(--Final-Blue, #2BBBEF);}

  .gopostbutton a:hover { background:#2BBBEF; color:#fff; text-decoration:none;}

  .gopostbutton a:last-child { float:right; margin-right:0px;}



  .training-data-form {
    width: 100%;
    height: auto;
    margin: 15px 0px;
    display: inline-block;
    padding: 60px 70px;
    position: relative;
    z-index: 1;
}


.training-data-form::after {
  position: absolute;
  content: '';
  border-radius: 30px;
  filter: blur(2px);
  border: 1px solid #FFF;
  padding: 20px;
  /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; */
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
}





.training-data-form h2 {
  color: #fff;
  text-align: center;
  font-family: Lexend;
  font-weight: 300;
  font-size: 35px;
  line-height:40px;
  margin-bottom:10px;
}

.training-data-form p {
  font-family: Lexend;
  font-weight: 300;
  text-align: center;
  font-size:19px !important;
  color:#fff;
  margin-bottom:30px;
  font-size: 30px;}

  .training-data-form form input {
    border-radius: 10px !important;
    margin-bottom: 15px;
    width:100%;
    outline:0px;
    font-family: Lexend;
  font-weight: 300;
    background:none;
    padding: 15px 20px !important;
    font-size:15px;
    border: 1.5px solid var(--Final-Gradient, #2BDAEF) !important;
    color:#fff;}

    .training-data-form form input::placeholder { opacity:1; color:#fff;}

    .training-data-form .leftselectbox {
      border-radius: 10px !important;
      padding: 15px 20px !important;
      margin-bottom: 15px;
      border: 1.5px solid var(--Final-Gradient, #2BDAEF) !important;
      color: #000;}

      .training-data-form .leftselectbox select {  width:100%; background:none; border:none; outline:0px; color:#fff; font-family: Lexend;
        font-weight: 300 !important;  font-size:16px !important; overflow:auto; overflow-x: hidden;}

      .training-data-form .leftselectbox select option { padding:5px 0px;
      font-weight: 300 !important;  font-size:16px !important;}

      .training-data-form .leftselectbox select option:first-child { font-weight:700 !important;}


      /* width */
      .training-data-form .leftselectbox select::-webkit-scrollbar {
  width:5px;
  border-radius:5px;
}

/* Track */
.training-data-form .leftselectbox select::-webkit-scrollbar-track {
  background: #fff;
  border-radius:5px;
}

/* Handle */
.training-data-form .leftselectbox select::-webkit-scrollbar-thumb {
  background: #2BBBEF;
  border-radius:5px;
}

/* Handle on hover */
.training-data-form .leftselectbox select::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.training-data-form .paymentformright {
  border-radius: 10px;
  border: 2px solid #2BBBEF;
  display:inline-block;
  }


.training-data-form .selectdatemainwrap {
    width: 100%;
    display: inline-block;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
    border-radius: 9px 9px 0px 0px;
    padding: 20px 15px 15px 15px;
    border-bottom: 2px solid #2BBBEF;
}


.training-data-form .selectdatemainwrap lable {
  width: 100%;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}

.training-data-form .selectdatemainwrap .selectdate {
  width: 48%;
  float: left;
}

.training-data-form .selectdatemainwrap .selectdate span.rty {
  color: #fff;
  margin-bottom: 9px;
  display: inline-block;
}

.training-data-form .selectdatemainwrap .radiowrap {
  width: 100%;
  float: left;
  text-align: left;
  font-size: 14px;
  margin-bottom:0px;
}


.training-data-form .checkcontainer {
  display:inline-block;
  position: relative;
  padding-left:27px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  margin-right:10px;
  font-weight: 600;
  color:#fff;
}

/* Hide the browser's default checkbox */
.training-data-form .checkcontainer input {
  position: absolute;
  opacity: 0;
cursor: pointer;}

/* Create a custom checkbox */
.training-data-form .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.training-data-form .checkcontainer:hover input ~ .checkmark {
  
}

/* When the checkbox is checked, add a blue background */
.training-data-form .checkcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.training-data-form .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.training-data-form .checkcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.training-data-form .checkcontainer .checkmark:after {
  left: 10px;
  top: 6px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create a custom radio button */
.training-data-form .radiobtn{
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.training-data-form .checkcontainer:hover input ~ .radiobtn{
background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.training-data-form .checkcontainer input:checked ~ .radiobtn{
background-color: #2BDAEF;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.training-data-form .radiobtn:after {
content: "";
position: absolute;
display: none;
}

/* Show the indicator (dot/circle) when checked */
.training-data-form .checkcontainer input:checked ~ .radiobtn:after {
display: block;
}

/* Style the indicator (dot/circle) */

.training-data-form .checkcontainer .radiobtn:after {
  top: 0px;
  left: 0px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: white;
  right: 0px;
  margin: auto;
  bottom: 0px;
}

.training-data-form .selectdateright {
  width: 48%;
  float: right;
}

.training-data-form .selectdateright span {
  color: #fff;
  margin-bottom: 9px;
  display: inline-block;
  border-radius:5px;
}








/* The container */
.training-data-form  .container {
  display:inline-block;
  position: relative;
  padding-left:27px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size:15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width:auto;
  color:#fff;
}

/* Hide the browser's default checkbox */
.training-data-form .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.training-data-form .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height:20px;
  width:20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.training-data-form .container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.training-data-form .container input:checked ~ .checkmark {
  background-color: #2BDAEF;
}

/* Create the checkmark/indicator (hidden when not checked) */
.training-data-form .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.training-data-form .container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.training-data-form .container .checkmark:after {
  left:8px;
  top:4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}



.training-data-form .audiencequestion {
  width: 100%;
  height: auto;
  padding: 15px 15px 15px 15px;
  border-bottom: 2px solid #2BBBEF;
}

.training-data-form .audiencequestion textarea { 
  border-radius: 8px !important;
  font-weight: 400;
  font-family: Lexend;
  font-size: 14px;
  width:100%;
  border: 2px solid #2BBBEF !important;
  resize: none;
  margin-top: 15px !important;
  background: none !important;
  outline:0px;
  color:#fff;
  font-family: Lexend;
  font-weight: 300;
  padding: 15px 20px !important;
  display: inline-block ! IMPORTANT;
  height: 80px !important;}

  .training-data-form .audiencequestion textarea::placeholder { opacity:1; color:#fff;}


  .training-data-form .rightwrap {
    width: 100%;
    display: inline-block;
    padding: 0px 15px 0px 15px;
    float: left;
}


.training-data-form .rightwrap .selectdate {
  width: 48%;
  float: left;
}

.training-data-form .rightwrap .selectdate input { background-image:url(../images/Calendar.svg); background-size: 25px auto;
  background-position: 95% 55%; border: 1.5px solid var(--Final-Gradient, #2BDAEF) !important;
  margin-bottom:16px;
  background-repeat: no-repeat !important;}

.training-data-form .rightwrap .selectdate lable {
  color: #fff;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.training-data-form .rightwrap .rightwrapnew {
  border-left: 2px solid #2BBBEF;
  padding-left: 30px;
  padding-bottom: 20px;
}


.training-data-form .rightwrap .selectdateright lable {
  color:#fff;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
}

.training-data-form .selectwrap {
  border-radius: 10px;
  border: 2px solid #010029 !important;
}

.training-data-form .selectwrap {
  border-radius: 15px;
  width: 100% !important;
  float: left;
  border: 1px solid #010029 !important;
  padding: 15px 20px !important;
  min-height: 135px;
  background:none;
  border-radius: 10px !important;
    padding: 10px;
    margin-bottom: 15px;
    border: 1.5px solid var(--Final-Gradient, #2BDAEF) !important;
    color: #000;
}



.training-data-form .selectwrap select {
  width: 100%;
  background: none;
  border: none;
  outline: 0px;
  color: #fff;
  font-family: Lexend;
  font-weight: 300 !important;
  font-size: 16px !important;
  overflow: auto;
}

.training-data-form .selectwrap select option { padding: 5px 0px;
  font-weight: 300 !important;
  font-size: 16px !important; }

  .training-data-form .selectwrap select option:first-child { font-weight:bold !important;}



  /* width */
  .training-data-form .selectwrap select::-webkit-scrollbar {
    width:5px;
    border-radius:5px;
  }
  
  /* Track */
  .training-data-form .selectwrap select::-webkit-scrollbar-track {
    background: #fff;
    border-radius:5px;
  }
  
  /* Handle */
  .training-data-form .selectwrap select::-webkit-scrollbar-thumb {
    background: #2BBBEF;
    border-radius:5px;
  }
  
  /* Handle on hover */
  .training-data-form .selectwrap select::-webkit-scrollbar-thumb:hover {
    background: #555;
  }



  .training-data-form .form-left textarea {
    border-radius: 8px !important;
    font-weight: 400;
    font-family: Lexend;
    font-size: 14px;
    border: 2px solid #2BBBEF !important;
    resize: none;
    margin-top: 15px !important;
    background: none !important;
    display: inline-block ! IMPORTANT;
    height: 80px !important;
    outline:0px;
    padding: 15px 20px !important;
    width:100%;
    color:#fff;
}


.training-data-form .form-left textarea::placeholder { color:#fff;}







.training-data-form .drag-file-area {
	border: 2px solid #2BBBEF !important;
	border-radius:8px;
	margin: 10px 0 15px;
	padding: 15px 20px !important;
	width:100%;
	text-align: center;
}
.training-data-form .drag-file-area .upload-icon {
	font-size:20px;
  color:#fff;
}
.training-data-form .training-data-form .drag-file-area h3 {
	font-size: 26px;
	margin: 15px 0;
}
.training-data-form .drag-file-area label {
	font-size: 19px;
  color:#fff;
}
.training-data-form .drag-file-area label .browse-files-text {
	color: #fff;
	font-weight: bolder;
	cursor: pointer;
  font-size:16px;
  text-decoration:underline;
}
.training-data-form .browse-files span {
	position: relative;
	top: -25px;
}
.training-data-form .default-file-input {
	opacity: 0;
}
.training-data-form .cannot-upload-message {
	background-color: #ffc6c4;
	font-size: 17px;
	display: flex;
	align-items: center;
	margin: 5px 0;
	padding: 5px 10px 5px 30px;
	border-radius: 5px;
	color: #BB0000;
	display: none;
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.training-data-form .cannot-upload-message span, .upload-button-icon {
	padding-right: 10px;
}
.training-data-form .cannot-upload-message span:last-child {
	padding-left: 20px;
	cursor: pointer;
}
.training-data-form .file-block {
	color: #f7fff7;
	background-color: #7b2cbf;
  	transition: all 1s;
	width: 390px;
	position: relative;
	display: none;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin: 10px 0 15px;
	padding: 10px 20px;
	border-radius: 25px;
	cursor: pointer;
}
.training-data-form .file-info {
	display: flex;
	align-items: center;
	font-size: 15px;
}
.training-data-form .file-icon {
	margin-right: 10px;
}
.training-data-form .file-name, .file-size {
	padding: 0 3px;
}
.training-data-form .remove-file-icon {
	cursor: pointer;
}
.training-data-form .progress-bar {
	display: flex;
	position: absolute;
	bottom: 0;
	left: 4.5%;
	width: 0;
	height: 5px;
	border-radius: 25px;
	background-color: #4BB543;
}
.training-data-form .upload-button {
	font-family: 'Montserrat';
	background-color: #7b2cbf;
	color: #f7fff7;
	display: flex;
	align-items: center;
	font-size: 18px;
	border: none;
	border-radius: 20px;
	margin: 10px;
	padding: 7.5px 50px;
	cursor: pointer;
}





.training-data-form .upload-area {
  width: 100%;
  padding: 68px 20px;
  border: 2px solid #2BBBEF !important;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  margin:10px 20px 10px 0px;
  font-family: Lexend;
  font-weight: 300 !important;
  font-size:25px !important;
  color: #fff;
  /* min-height: 178px; */
}


.training-data-form .upload-area span { font-size:17px;}

.training-data-form .preview {
  display: flex;
  flex-wrap: wrap;
  margin-top:0px;
  gap: 10px;
  justify-content: flex-start;
}
.training-data-form .preview img {
  width:30px;
  height:30px;
  object-fit: cover;
  border-radius: 5px;
}




.training-data-form .campaign-button { margin:30px 0px 0px 0px;}

.training-data-form .campaign-button button {
  border-radius: 15px;
  border: 2px solid var(--Final-Gradient, #2BDAEF);
  background: #030445;
  color: var(--blanco, #FFF);
  text-align: center;
  font-family: Lexend;
  font-size: 18px;
 width:auto;
  font-style: normal;
  font-weight: 600;
  line-height: 151%;
  letter-spacing: -0.011px;
  display: inline-block;
  padding: 8px 50px;
  transition: 0.3s;
  min-width:400px;
  height: 100%;}


  .training-data-form .campaign-button button:hover {
    transition: 0.3s;
    color: #000;
    text-decoration: none;
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
}





/* START TOOLTIP STYLES */
.training-data-form [tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
.training-data-form [tooltip]::before,
.training-data-form [tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
.training-data-form [tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
.training-data-form [tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background:#020046;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
.training-data-form [tooltip]:hover::before,
.training-data-form [tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
.training-data-form [tooltip='']::before,
.training-data-form [tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
.training-data-form [tooltip]:not([flow])::before,
.training-data-form [tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #020046;
}
.training-data-form [tooltip]:not([flow])::after,
.training-data-form [tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
.training-data-form [tooltip]:not([flow])::before,
.training-data-form [tooltip]:not([flow])::after,
.training-data-form [tooltip][flow^="up"]::before,
.training-data-form [tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
.training-data-form [tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #020046;
}
.training-data-form [tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
.training-data-form [tooltip][flow^="down"]::before,
.training-data-form [tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
.training-data-form [tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #020046;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
.training-data-form [tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
.training-data-form [tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #020046;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
.training-data-form [tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@-webkit-keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@-webkit-keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
.training-data-form [tooltip]:not([flow]):hover::before,
.training-data-form [tooltip]:not([flow]):hover::after,
.training-data-form [tooltip][flow^="up"]:hover::before,
.training-data-form [tooltip][flow^="up"]:hover::after,
.training-data-form [tooltip][flow^="down"]:hover::before,
.training-data-form [tooltip][flow^="down"]:hover::after {
  -webkit-animation: tooltips-vert 300ms ease-out forwards;
          animation: tooltips-vert 300ms ease-out forwards;
}

.training-data-form [tooltip][flow^="left"]:hover::before,
.training-data-form [tooltip][flow^="left"]:hover::after,
.training-data-form [tooltip][flow^="right"]:hover::before,
.training-data-form [tooltip][flow^="right"]:hover::after {
  -webkit-animation: tooltips-horz 300ms ease-out forwards;
          animation: tooltips-horz 300ms ease-out forwards;
}


.training-data-form .remove-btn {
  border: none;
  background: none;
  color: #fff;
  border-radius: 50%;
  background:#2BDAEF;
  width: 20px;
  height: 20px;
  line-height: 17px;
  position: absolute;
  top: -6px;
  z-index: 9;
  left: 20px;
}

.training-data-form .preview-item {
  position: relative;
  margin-right: 10px;
}





.ui-datepicker-header {
  background: #4AFFA8 !important;
  border: none !important;
  font-family: Lexend !important;
  font-weight: 500 !important;
}




.ui-state-default {
  border: 1px solid #c5c5c5 !important;
  background: #030445 !important;
  font-weight: normal !important;
  color: #454545 !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 29px;
  text-align: center !important;
  color: #fff !important;
  border: none !important;
  margin-bottom:8px;
}


.ui-state-highlight {  background: #4AFFA8 !important;}

.ui-datepicker-prev { outline:0px !important;}
.ui-datepicker-prev:hover { background:none !important; border:none !important; margin-top:0px !important; top:2px !important; left:2px !important;}

.ui-datepicker-next { outline:0px !important;}

.ui-datepicker-next:hover { background:none !important; border:none !important; margin-top:0px !important; top:2px !important; right:2px !important;}



.anschat .chatright {
  display: flex;
  flex-direction: column;
}


.table-new-style table {border-spacing:0 14px !important;}


.table-new-style table tr { background: linear-gradient(70deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;}

/* .table-new-style table .expanded-row { 
  background: #2BBBEF !important; border:1px solid #fff;} */
/* 
  .table-new-style table .expanded-row:hover { 
    background:#2BBBEF !important;} */


.table-new-style tbody {
  background:none !important;
}

.table-new-style table tr td:first-child {
  border-radius: 10px 0px 0px 10px;
  border-left:1px solid #fff;
}

.table-new-style table tr th:last-child {
  border-radius:0px 10px 10px 0px;
  border-right:1px solid #fff !important;
}


.table-new-style table tr th:first-child {
  border-radius: 10px 0px 0px 10px;
}

.table-new-style table tr td:last-child {
  border-radius:0px 10px 10px 0px;
  border-right:1px solid #fff !important;
}


.table-new-style table tr {
  background: linear-gradient(70deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
  overflow: hidden;
}


.table-new-style thead {
background:none !important;
}



.table-new-style .dataTables_length { display:none;}

.table-new-style #gridTable_filter { width: 100%;}
.table-new-style #gridTable_filter label { width:100%; text-align:center;}

.table-new-style #gridTable_filter input { width:70%; padding:12px 10px;}

.table-new-style tbody tr td { border-bottom:1px solid #fff !important; border-top:1px solid #fff !important;}

.table-new-style .dataTables_paginate {
  width: 100%;
  text-align: right;
  padding-bottom:.85em;
  padding-right:.85em;
  border-radius:10px;
  background: linear-gradient(70deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
}

.table-new-style .dataTables_info { display:none;}

.table-new-style .expanded-row {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}


.table-new-style .column-title {
  font-weight: bold;
  display: block;
  color:#4AFFA8;
  margin-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.table-new-style .truncated {
  display: inline;
}
.table-new-style .full-description {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.table-new-style thead { display:none;}


.table-new-style .expand-btn { height: 51px;}

.table-new-style #videosTable_wrapper table thead { display:block !important;}



.adduser .modal-content {padding: 15px 20px !important;}
.adduser label {
  text-align: left;
  width: 100%;
  padding-left: 0px;
  margin-bottom: 10px;
}

.adduser .btn-close { display:none;}

.manageVideostable h1 { text-align:center; }

.manageVideostable .input-group { margin-bottom: 37px;}
.usernewlist #gridTable { margin-top:0px !important;}

.AuditQuestionList #partsBody td {
  word-wrap: break-word;
  width: 36%;
}

.AuditQuestionList h2 { text-align:center;}

.AuditQuestionList .custom-dropdown { margin:auto;}



.commentsEx #gridTable tr td {
  background: none !important;
  width: 40%;
}


.usernewlist #gridTable tr td {
  background: none !important;
  width: 40%;
}


.page-link {
  background: none !important;
  color: #fff !important;
  font-size: 16px;
}


#systemInstructionsText {
  max-height: 164px;
  overflow: scroll;
  overflow-x: hidden;
  margin-bottom:55px;
  padding-right:10px;
}


#systemInstructionsText::-webkit-scrollbar {
  width: 7px;
  border-radius: 4px;
}

/* Track */
#systemInstructionsText::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 4px;
}

/* Handle */
#systemInstructionsText::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius: 4px;
}

#partContent select {
  margin-top: 15px;
}


.AuditQuestionList button { padding: 11px 10px;}

.AuditQuestionList .options-list li { text-align: left;}
.AuditQuestionList .col-sm-12 { padding:0px;}


.hideCol tr td:nth-child(2) { display:none;} 
.hideCol tr td:nth-child(3) { display:none;} 
.hideCol tr td:nth-child(5) { width:40%;} 




#search_grid button {
  padding: 0px 10px;
}


.select2-selection__rendered {
  padding-top: 3px !important;
}



.file-row button img {
  height: 20px;
}



.chatwrapmain .quechat textarea {
  width: 380px;
  height: auto;
  /* line-height: 18px; */
  background: none;
  border: none;
  color: #fff;
  resize: none;
  outline: 0px;
}



.autpopup {
  z-index: 9999 !important;
}




.navbar-collapse { padding:0px 5px;}


body.loaded {
  overflow: hidden !important;
  height: 100% !important;
}

.loader-wrap {
  position: fixed;
  z-index: 10;
  height: 100vh;
  width: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: transparent;
  z-index: 99999999999999;
  align-items: center;
  flex-direction: column;
}
.loader-wrap svg {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 110vh;
  fill:#2BBBEF;}


.loader-wrap .loader-wrap-heading .load-text {
  font-size: 29px;
  font-weight:800;
  letter-spacing:0px;
  /* text-transform: uppercase; */
  z-index: 20;
  color: #fff;
}

.load-text span {
  -webkit-animation: loading 0.5s infinite alternate;
  animation: loading 0.5s infinite alternate;
}
.load-text span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.load-text span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.load-text span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.load-text span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.load-text span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.load-text span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.load-text span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.load-text span:nth-child(8) {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}
.load-text span:nth-child(9) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.load-text span:nth-child(10) {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}
.load-text span:nth-child(11) {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.load-text span:nth-child(12) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
.load-text span:nth-child(13) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
.load-text span:nth-child(14) {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
.load-text span:nth-child(15) {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
.load-text span:nth-child(16) {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.load-text span:nth-child(17) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.load-text span:nth-child(18) {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}


.load-text span:nth-child(19) {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}


.load-text span:nth-child(20) {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}


.load-text span:nth-child(21) {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}


.load-text span:nth-child(22) {
  -webkit-animation-delay: 2.1s;
  animation-delay:2.1s;
}


.load-text span:nth-child(23) {
  -webkit-animation-delay:2.2s;
  animation-delay: 2.2s;
}


@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity:0.5;
  }
}




.mappingwrap table tbody tr td:first-child { width:90%;}











/* .mappingwrap input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  visibility: hidden;
  display: none;
}

.mappingwrap .check {
  position: relative;
  display: block;
  width:70px;
  height:28px;
  background-color: #2bbbef38;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  transition: ease-in 0.5s;
}

.mappingwrap input:checked[type="checkbox"] ~ .check {
  background-color: #2BBBEF;

}

.mappingwrap .check:before {
  content: 'No';
  position: absolute;
  top:4px;
  left: 4px;
  background: linear-gradient(70deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%) !important;
  width:20px;
  height:21px;
  border-radius: 50%;
  transition: all 0.5s;
}

.mappingwrap input:checked[type="checkbox"] ~ .check:before {
  transform: translateX(-50px);
}

.mappingwrap .check:after {
  content: 'Yes';
  position: absolute;
  top:4px;
  right: 4px;
  background-color: #fff;
  width:20px;
  height:21px;
  border-radius: 50%;
  transform: translateX(50px);
  transition: all 0.5s;
  
}

.mappingwrap input:checked[type="checkbox"] ~ .check:after {
  transform: translateX(0px);
} */


.yes-no input { opacity:0 !important;}

.on-off, .plus-minus-icon,
.yes-no, .yes-no-icon {
  display: inline-block;
  width:110px;
  height:40px;
  overflow:hidden;
  border-radius:20px;
  position: relative;
  font-weight: 800;
  line-height: 12px;
}
.on-off:before, .on-off:after, .plus-minus-icon:before, .plus-minus-icon:after,
.yes-no:before,
.yes-no:after, .yes-no-icon:before, .yes-no-icon:after {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 1;
  position: absolute;
}
.on-off:before, .plus-minus-icon:before,
.yes-no:before, .yes-no-icon:before {
  content: "ON";
  left: 22px;
  bottom: 13px;
}
.on-off:after, .plus-minus-icon:after,
.yes-no:after, .yes-no-icon:after {
  content: "OFF";
  right: 20px;
  bottom: 13px;
}
.on-off input, .plus-minus-icon input,
.yes-no input, .yes-no-icon input {
  opacity: 0.5;
}
.on-off input:checked + .slider, .plus-minus-icon input:checked + .slider,
.yes-no input:checked + .slider, .yes-no-icon input:checked + .slider {
  background: #9e9e9e;
}
.on-off input:checked + .slider:before, .plus-minus-icon input:checked + .slider:before,
.yes-no input:checked + .slider:before, .yes-no-icon input:checked + .slider:before {
  transform: translateX(-50px);
}
.on-off .slider, .plus-minus-icon .slider,
.yes-no .slider, .yes-no-icon .slider {
  background: #f44336;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  transition: 0.4s;
}
.on-off .slider:before, .plus-minus-icon .slider:before,
.yes-no .slider:before, .yes-no-icon .slider:before {
  content: "";
  width:50px;
  height:32px;
  background: #fff;
  position: absolute;
  right:4px;
  bottom:4px;
  transition: 0.4s;
  border-radius:20px;
}

.yes-no input:checked + .slider, .yes-no-icon input:checked + .slider {
  background: #2BBBEF;
}
.yes-no .slider, .yes-no-icon .slider {
  background:#2bbbef38;
}

.yes-no:before {
  content: "YES";
  left: 20px;
  font-size:13px;
}
.yes-no:after {
  content: "NO";
  right: 22px;
  font-size:13px;
}

.yes-no-icon:before {
  content: "✔";
  font-size: 26px;
  left: 24px;
  bottom: 5px;
}
.yes-no-icon:after {
  content: "✖";
  font-size: 26px;
  right: 25px;
  bottom: 5px;
}
.yes-no-icon input:checked + .slider {
  background: #e91e63;
}
.yes-no-icon .slider {
  background: #e91e63;
}

.plus-minus-icon:before {
  content: "+";
  font-size: 30px;
  left: 28px;
  bottom: 5px;
}
.plus-minus-icon:after {
  content: "−";
  font-size: 30px;
  right: 28px;
  bottom: 5px;
}
.plus-minus-icon input:checked + .slider {
  background: #2196f3;
}
.plus-minus-icon .slider {
  background: #2196f3;
}

.plus-minus-icon + input:checked {
  background: #000;
}



.loading07 span {
  position: relative;
  color: rgba(0, 0, 0, 0.2);
  font-family: Lexend;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  
  letter-spacing:3px;
}
.loading07 span::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-text);
  color: #fff;
  opacity: 0;
  transform: scale(1.5);
  animation: loading07 3s infinite;
}
.loading07 span:nth-child(2)::after {
  animation-delay: 0.1s;
}
.loading07 span:nth-child(3)::after {
  animation-delay: 0.2s;
}
.loading07 span:nth-child(4)::after {
  animation-delay: 0.3s;
}
.loading07 span:nth-child(5)::after {
  animation-delay: 0.4s;
}
.loading07 span:nth-child(6)::after {
  animation-delay: 0.5s;
}
.loading07 span:nth-child(7)::after {
  animation-delay: 0.6s;
}

.loading07 span:nth-child(8)::after {
  animation-delay: 0.7s;
}


.loading07 span:nth-child(9)::after {
  animation-delay: 0.9s;
}


.loading07 span:nth-child(10)::after {
  animation-delay: 1s;
}

.loading07 span:nth-child(11)::after {
  animation-delay: 1.1s;
}

.loading07 span:nth-child(12)::after {
  animation-delay: 1.2s;
}


.loading07 span:nth-child(13)::after {
  animation-delay: 1.3s;
}

.loading07 span:nth-child(14)::after {
  animation-delay: 1.4s;
}


.loading07 span:nth-child(15)::after {
  animation-delay: 1.4s;
}


.loading07 span:nth-child(16)::after {
  animation-delay: 1.5s;
}


.loading07 span:nth-child(17)::after {
  animation-delay: 1.6s;
}


.loading07 span:nth-child(18)::after {
  animation-delay: 1.7s;
}


.loading07 span:nth-child(19)::after {
  animation-delay: 1.8s;
}


.loading07 span:nth-child(20)::after {
  animation-delay: 1.9s;
}


.loading07 span:nth-child(21)::after {
  animation-delay: 2s;
}


.loading07 span:nth-child(22)::after {
  animation-delay: 2.1s;
}


.loading07 span:nth-child(23)::after {
  animation-delay: 2.2s;
}


.loading07 span:nth-child(24)::after {
  animation-delay: 2.3s;
}


.loading07 span:nth-child(25)::after {
  animation-delay: 2.4s;
}




@keyframes loading07 {
  0%, 75%, 100% {
    transform: scale(1.2);
    opacity: 0;
  }
  25%, 50% {
    transform: scale(1);
    opacity: 1;
  }
}


.sharepopupfix { display: block !important;}


.sharepopup::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 8px solid #fff;
  bottom:19px;
  position: absolute;
  left: 34px;
}


.topApplied {
  padding-top: 26px;
}

.topApplied::after {
 display:none;
}

.topApplied::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 8px solid #fff;
  bottom: 19px;
  position: absolute;
  top: 19px;
  left: 35px;
}


















.wrapper {
  position: relative;
  width: 1080px;
  height: 600px;
  display: grid;
  place-content: center;
}
.range-key {
  position: absolute;
  left: 0;
  top: 0;
}
.right-border {
  position: absolute;
  right: 0;
  top: 0;
}
.dial-wrapper {
  position: relative;
  width:250px;
  height:auto;
  z-index: 3;
  margin:auto;
  background:#2BBBEF;
  border-radius:50%;
}

.dial-ui {
  position:relative;
  top: 0;
  left: 0;
}
.dial-numbers {
  pointer-events: none;
  position: relative;
  text-align: center;
  line-height: 1;
}
.number {
  font-size: 100px;
}
.units {
  color: var(--ui-blue);
  font-weight: 400;
  display: block;
  font-size: 25px;
  letter-spacing: 4px;
}
.bounce-wrapper {
  height: 400px;
  position: absolute;
  right: 100px;
  top: 100px;
  border: 1px solid currentColor;
  border-bottom: 8px solid;
  width: 120px;
  overflow: hidden;
}
.ball {
  position: absolute;
  bottom: -2px;
  left: 30px;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  border: 3px solid var(--ui-blue);
  z-index: 10;
  will-change: transform;
}
.bounce-simulation {
  display: block;
  text-transform: uppercase;
  position: absolute;
  top: 60px;
  letter-spacing: 1px;
  right: 100px;
  width: 123px;
}
.thicc {
  font-weight: var(--weight);
}
.range-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: -8px;
  font-size: 16px;
  letter-spacing: 5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--ui-blue);
}
.gravity-range {
  position: absolute;
  color: currentColor;
  top: 0;
  left: 170px;
  width: 600px;
  height: 90px;
  cursor: pointer;
  background-color: transparent;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%);
  appearance: none;
}
.gravity-range, .gravity-range::-webkit-slider-runnable-track, .gravity-range::-webkit-slider-thumb {
  -webkit-appearance: none;
}
.gravity-range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, currentColor var(--range-gradient), #364c52 var(--range-gradient), #364c52);
}
.gravity-range::-moz-range-track {
  height: 2px;
  background: #364c52;
}
.gravity-range::-moz-range-progress {
  background-color: currentColor;
}
.gravity-range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--background);
  border: 1px solid var(--ui-blue);
  margin-top: -14px;
}
.gravity-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: var(--background);
  border: 1px solid var(--ui-blue);
}
.ring {
  position: absolute;
  top: 17px;
  left: 215px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--ui-blue);
  border-radius: 100%;
  pointer-events: none;
}
.ring--0 {
  height: 50px;
  width: 50px;
  opacity: 0.7;
}
.ring--1 {
  height: 60px;
  width: 60px;
  opacity: 0.6;
}
.ring--2 {
  height: 70px;
  width: 70px;
  opacity: 0.5;
}
.ring--3 {
  height: 80px;
  width: 80px;
  opacity: 0.4;
}
.ring--4 {
  height: 90px;
  width: 90px;
  opacity: 0.3;
}



.dial-main #grav { display:none;}
.dial-main .rangeSlider { display:none;}
.dial-main .dial-numbers { display:none;}


.dail-fild-main {
  width: 100%;
  height: auto;
  margin-top:99px;
  text-align: center;
  position:relative;
  z-index:11;
}
.dail-fild-main h2 { color:#fff;
  font-family: Lexend;
  font-size:15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.307px;}


  .dail-fild-main textarea { border-radius: 23px;
    border: 2px solid #D9D9D9;
    width:100%;
    margin-top:20px;
    background: #030445;
    resize: none;
    text-align:left;
    color:#fff;
    outline:0;
    min-height:110px;
    padding:15px;
   box-shadow: 0px 4px 18.7px 0px #181979;}

.dail-fild-main button { border-radius: 23px; width:100%; padding:10px 0px;
    border: 2px solid var(--Final-Blue, #2BBBEF); margin-top:10px; 
    color: var(--blanco, #FFF);
text-align: center;
font-family: Lexend;
font-size:15px;
font-style: normal;
font-weight: 500;
line-height: 151%; /* 30.2px */
letter-spacing: -0.01px;
background: #030445;}

.dail-fild-main button:hover { background:#2BBBEF;}


.dial-select {
  width: 100%;
  height: auto;
  background: none;
  border: 2px solid #2BBBEF;
  color: #fff;
  border-radius:10px;
  padding:2px 10px;
  outline:0;
  margin: 15px 0px 0px 0px;
}


.dial-select select {
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  outline:0;
}


.dial-select select option { color:#000;}





.ai-img {
  height:50px !important;
  position: absolute;
  z-index: 9999;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  bottom: 0px;
}

.ai-img1 {
  height:30px !important;
  position: absolute;
  z-index: 9999;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: auto;
  bottom: 0px;
}



.dial-select {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  z-index:9;
}

/* Hide the default dropdown arrow */
.dial-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding:2px 40px 2px 0px;
  border-radius: 5px;
 cursor: pointer;
}


.selected {padding-left:31px;}

/* Left check icon */
.dial-select::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color:#4AFFA8;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Right down arrow */
.dial-select::after {
  content: "\f078";
  font-family: 'FontAwesome';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color:#fff;
  pointer-events: none;
}

/* Show check icon when an option is selected */
.dial-select.selected::before {
  opacity: 1;
}




.padding-hover-remove .line1 {
  position: absolute;
  top: 41px;
  left: 208px;
  height: 180px !important;
}


.padding-hover-remove .line2 {
  position: absolute;
  top: 33px;
  left: 195px;
  height: 186px !important;
}



.prompt-item .selected {
  padding-left: 0px;
}







.datasource .item .tooltip {
  position: absolute;
  /* top: 0px !important; */
  background: #2BDAEF;
  width: 400px;
  bottom: -68px;
  z-index: 999;
  opacity: 1;
  visibility: visible;
  font-size: 15px;
  line-height: 20px;
  left: 0px;
  color: #030445;
  margin-left: 0px;
}



.datasource .item .tooltip::before {
  width: 0;
  height: 0;
  position: absolute;
  content: '';
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #2BDAEF;
  top: -10px;
}



.scroll-container h2 {
  color: var(--blanco, #FFF);
    font-family: Lexend;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom:10px;
    transition: all 0.3sease;
    letter-spacing: 0.307px;
  position: relative;
  z-index: 99;
  
}


#progress-container {
  width: 80%;
  background-color: transparent;
  padding: 4px; /* Creates the gap effect */
  border: 2px solid #2BBBEF; /* Outline border */
  border-radius:5px; /* No rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
}

#progress-bar {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 0px; /* No rounded corners */
  background-color: transparent; /* Removes the white background */
}

#progress-bar::-webkit-progress-bar {
  background-color: transparent; /* No background */
  border-radius: 0px;
}

#progress-bar::-webkit-progress-value {
  background-color: #2BBBEF; /* Progress color */
  border-radius: 0px;
}

#progress-bar::-moz-progress-bar {
  background-color: #2BBBEF; /* Progress color for Firefox */
  border-radius: 0px;
}


.load-text h1 { margin:0px; padding:0px; font-size:16px; font-family: "Lexend", Sans-serif !important; font-weight:400; color:#fff;}
#preloader { font-family: "Lexend", Sans-serif !important;}
.loader-wrap { background: rgba(3, 4, 69, 0.95);}


.data-loader {
  position:fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(3, 4, 69, 0.93);
  z-index: 9999;
  text-align: center;
  display: block;}



  
    @keyframes animateDottedLine {
      0% { stroke-dashoffset: 20; }
      100% { stroke-dashoffset: 0; }
    }
    
    #dottedLine {
      animation: animateDottedLine 1s linear infinite;
    }

    .data-loader svg {
      position: absolute;
      margin: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
      left: 0px;
      right: 0px;
  }




.modal-backdrop { z-index:99999;}
.modal { z-index:999999 !important;}
.modal-backdrop {
    background: rgba(12, 48, 101, 0.79) !important;
    backdrop-filter: blur(6px) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(6px) !important;
}


.channel-pic img { height:148px; border-radius:10px;}


.subscriber-Data p { margin-bottom:30px;}

.subscriber-Data .row .col-6 p { margin-bottom:0px;}
.sixk { position:relative;}
.sixk::after {
  position: absolute;
  width: 87px;
  height: 1px;
  background: rgba(255, 255, 255, 0.33);
  content: '';
  bottom: -2px;
  left: 0px;
  right: 0px;
  margin: auto;
}



/* .channel-detils .channel-confirmation-wrap span { font-size: 18px !important;} */
.channel-detils .channel-confirmation-wrap p { font-size:17px !important; text-transform:unset !important; font-weight:300;}
.channel-detils .channel-confirmation-wrap p a { color:#fff;}
.channel-detils .channel-confirmation-wrap p a:hover { color:#4AFFA8;}

.detils-comment-tokens span {
  color: #FFF;
  font-family: Lexend;
  font-size:45px !important;
  font-style: normal;
  font-weight: 500;
  line-height: normal;}

  .detils-comment-tokens h4 {
    color: #4AFFA8;
    text-align: center;
    font-family: Lexend;
    font-size: 14px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal;}

  .detils-comment-tokens p {
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-family: Lexend;
    font-size: 14px !important;
    font-style: normal;
    color: rgba(255, 255, 255, 0.50) !important;
    font-weight: 400;
    text-transform:unset !important;
    text-decoration:none !important;
    border-bottom:none !important;
    line-height: normal;}

    .detils-comment-tokens { border-bottom:2px dotted rgba(255, 255, 255, 0.10);}

  .detils-comment-tokens .progressbaar { margin:10px 0px 5px 0px;}
  .detils-comment-tokens { margin-bottom:5px !important;}

  .detils-comment-tokens:last-child { border:none; padding-bottom:0px !important;}

  .channel-subscribers-detils span {
    color: #FFF;
  font-family: Lexend;
    font-size: 36px !important;
    font-style: normal;
    font-weight: 500;
    line-height: normal; }

    .channel-subscribers-detils h5 {
      margin-bottom: 0px !important; margin-top:0px !important;}

.padding-bottom-top-0 { padding-top:0px !important; padding-bottom:0px !important;}
.margin-bottom-0 { margin-bottom:0px !important;}

.add-subscriber {
  border-radius: 19.043px;
  padding: 3px 15px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  /* filter: blur(0.550000011920929px); */
}

  .add-subscriber h2 {
    margin: 0px;
    padding: 0px;
    width: auto;
    color: #030445;

font-family: Lexend;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: normal;
    display: inline-block;
}


.add-subscriber p {
  margin: 0px;
  padding: 0px;
  width: auto;
  color: #030445;
 font-family: Lexend;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  display: inline-block;
}

.add-subscriber h3 {
  line-height: normal; color: #040544;
 text-align: center;
  font-family: Lexend;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin:0px;
  padding:0px;
  text-transform: capitalize;
  display: inline-block;}

  .add-subscriber a {
    width: auto !important;
    display: inline-block;
    min-width: auto;
    border: none;
    margin: 0px 0px 0px 5px;
    padding: 0px;
}



.channel-details-new h2 { margin-bottom:10px !important;}
.channel-details-new img {
  height: 28vh;
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
}


.channel-details-new img {
  height: 193px;
  border-radius: 10px;
  width: auto;
  object-fit: cover;
}


.ai-Data-tab .nav-tabs li button { border-radius: 10.905px; margin-right:10px;
  border:1px solid var(--Final-Blue, #2BBBEF); color: var(--Final-Blue, #2BBBEF);
  font-family: Lexend;
  font-size: 12.463px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;}


  .ai-Data-tab .nav-tabs li button:hover { border-radius: 10.905px; margin-right:10px;
    border:1px solid var(--Final-Blue, #2BBBEF); color: var(--Final-Blue, #2BBBEF);
    font-family: Lexend;
    font-size: 12.463px;
    font-style: normal;
    color:#fff;
    background: var(--Final-Blue, #2BBBEF);
    font-weight: 500;
    line-height: normal;}

  .ai-Data-tab .nav-tabs li .active {
    border-radius: 10.905px;
    border: 1px solid var(--Final-Gradient, #2BDAEF) !important;
    background: var(--Final-Blue, #2BBBEF);}

    .ai-Data-tab .nav-tabs li .active:hover {
      border-radius: 10.905px;
      border: 1px solid var(--Final-Gradient, #2BDAEF) !important;
      background: var(--Final-Blue, #2BBBEF);}

  



    .ai-Data-tab .tab-pane p { color: rgba(255, 255, 255, 0.80);
      text-align: center;
      font-family: Lexend;
      font-size: 14px;
      font-style: normal;
      font-weight: 300;
      line-height: 22px; /* 157.143% */
      letter-spacing: -0.007px;}


      .ai-Data-tab .tab-pane p a { color: #2BBBEF; text-decoration:underline;}
      .ai-Data-tab .tab-pane p a:hover { color: #2BBBEF; text-decoration:none;}

      .ai-Data-tab .tab-pane { margin-top:30px;}

      .ai-Data-tab .channel-detils { padding:50px 30px;}

      .mobiletoggle { height:100%;}


      .uploadbox .chatoverflowscrool1 {
        overflow-y:scroll;
        overflow-x: auto;
        height: 221px !important;
        margin-bottom: 0px;
        padding-right:10px;
    }

    .pri-seco-tag span {
      width: auto;
      background: #2BBBEF;
      padding: 3px 5px;
      display: inline-block;
      border-radius: 5px;
  }


  #prompt-text-1 input {
    border-radius: 10px;
    padding: 6px 10px;
    border: 1px solid var(--Final-Gradient, #2BDAEF);
    overflow: hidden;
    color:#fff;
    outline:0px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

    #sec-prompt-text-1 input {
      border-radius: 10px;
      padding: 6px 10px;
      border: 1px solid var(--Final-Gradient, #2BDAEF);
      overflow: hidden;
      color:#fff;
      margin-right:10px;
      outline:0px;
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

      #sec-prompt-text-1 button { margin-right:10px;}

    .channelDetail-new .rightlist button {padding: 4px !important; }

    .channelDetail-new .rightlist .nav-tabs { height: 40px;}

    #channelContainer a:hover { text-decoration:none;}


    .channel-table-newdesign #pageInfo { color:#fff; font-size:14px;}
    .channel-table-newdesign .pagination-wrap #prevPage { border: 1px solid var(--Final-Gradient, #2BDAEF); background:none;}
    .channel-table-newdesign .pagination-wrap #prevPage:hover { border: 1px solid var(--Final-Gradient, #2BDAEF); background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%)); color:#030445e3;}
   .channel-table-newdesign .pagination-wrap #nextPage { border: 1px solid var(--Final-Gradient, #2BDAEF); background:none;}
   .channel-table-newdesign .pagination-wrap #nextPage:hover { border: 1px solid var(--Final-Gradient, #2BDAEF); background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%)); color:#030445e3;}
   .channel-table-newdesign .uploaded-file {border-radius: 8px; padding:10px 15px;
   border: 1px solid var(--Final-Blue, #2BBBEF);}

   .channel-table-newdesign .uploaded-file h3 {margin-bottom: 0px !important;}

   .channel-table-newdesign .uploaded-file span { margin-bottom:10px;}

   .channel-table-newdesign .uploaded-file .btnp-pre { 
        display: flex;
       gap:10px;
    flex-wrap: nowrap;
    }

.channel-table-newdesign .uploaded-file .btnp-pre button {
  border-radius: 10.905px !important;
  padding:5px 5px;
  border: 1.5px solid var(--Final-Gradient, #2BDAEF) !important;
  background:none;
  font-size: 12.463px;
  color:#4AFFA8;
  flex-grow: 1;
}


.channel-table-newdesign .uploaded-file .btnp-pre button:hover {
border-radius: 10.905px;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
color:#010029;
}


.extralink-overflow {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 53px;
}


/* width */
.extralink-overflow::-webkit-scrollbar {
  width:4px;
}

/* Track */
.extralink-overflow::-webkit-scrollbar-track {
background:none;
}
 
/* Handle */
.extralink-overflow::-webkit-scrollbar-thumb {
  background:#2BBBEF; 
}

/* Handle on hover */
.extralink-overflow::-webkit-scrollbar-thumb:hover {
  background:#2BBBEF; 
}



.new-tag { position:relative;}

.new-tag:before {
  position: absolute;
  width: 54px;
  height: auto;
  content: 'New';
  top: -9px;
  z-index: 9999;
  left: 9px;
  color: #030445;
  text-transform: uppercase;
  border-radius: 5px;
  font-size: 11px;
  padding: 1px 0px;
  font-weight: 600;
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
}


.channel-table-newdesign .datause h3 {font-size: 17px !important;}


.channel-table-newdesign #buttonContainer { margin-top:20px;}
.channel-table-newdesign #buttonContainer button { margin:0px 8px;}

.channel-table-newdesign .button-container #viewLessBtn { border: 1px solid var(--Final-Gradient, #2BDAEF); background: none;}
.channel-table-newdesign .button-container #viewLessBtn:hover {
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  color: #030445e3;}

.channel-table-newdesign .button-container #loadMoreBtn { }

.channel-table-newdesign .button-container #loadMoreBtn { border: 1px solid var(--Final-Gradient, #2BDAEF); background: none;}
.channel-table-newdesign .button-container #loadMoreBtn:hover {
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  color: #030445e3;}



/* .channel-table-newdesign .tab-pane { min-height:338px;} */
.channel-table-newdesign .tab-pane .channel-box {}
.channel-table-newdesign .tab-pane .channel-box h4 {
  color: var(--blanco, #FFF);
  font-family: Lexend;
  font-size: 24px;
  font-style: normal;
  width:100%;
  text-align:center;
  font-weight: 400;
  margin-bottom:20px;
  margin-top:10px;
  line-height: normal; }

.channel-table-newdesign .tab-pane .channel-search-box { width:100%; text-align:center; margin-bottom:15px;}
.channel-table-newdesign .tab-pane .channel-search-box .dropdown button {
  border-radius: 10px;
  width:100%;
  height: 50px;
  text-align:left;
  color: rgba(255, 255, 255, 0.65);
font-family: Lexend;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}


.channel-table-newdesign .tab-pane .channel-search-box .dropdown input {
  border-radius: 10px;
  width:100%;
  height: 50px;
  text-align:left;
  color: rgba(255, 255, 255, 0.65);
font-family: Lexend;
font-size: 15px;
font-style: normal;
color:#fff;
font-weight: 400;
line-height: normal;
  border: 1px solid var(--Final-Gradient, #2BDAEF);
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}



.channel-search-box .dropdown svg {
    position: absolute;
    top:20px;
    right: 20px;
}



.channel-table-newdesign .tab-pane .channel-search-box .dropdown input:focus {    background: linear-gradient(75deg, rgba(43, 218, 239, 0.2) 1.38%, rgba(74, 255, 168, 0.2) 100%); box-shadow:none !important;}


.channel-table-newdesign .tab-pane .channel-search-box .dropdown input:after { display:none;}


.channel-table-newdesign .tab-pane .channel-search-box .dropdown button:after { display:none;}

  .channel-table-newdesign .tab-pane .channel-search-box .dropdown button svg { margin-right:8px;}
  .channel-table-newdesign .tab-pane .channel-search-box .dropdown button .right-down-arrow {
    float: right;
    margin-right: 0px;
    margin-top: 5px;
}

.channel-table-newdesign .tab-pane .channel-search-box {
  width: 46.4%;
  text-align: center;
  margin-bottom: 15px;
  margin: auto;
  margin-bottom:28px !important;
}

.channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu {
  width: 100%;
  top: 58px !important;
  transform: translate3d(0px, 0px, 0px) !important;
  max-height:220px;
  overflow: scroll;
  overflow-x: auto;
  z-index:9999;
}

.channel-table-newdesign .tab-pane .channel-search-box .show li a { color: #000;

  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 151%; /* 24.16px */
  letter-spacing: -0.008px; width:100%; border: 1px solid #fff; border-radius: 10px !important;}
.channel-table-newdesign .tab-pane .channel-search-box .show li a:hover {
  width: 100% !important;
  border-radius: 10px !important;
border: 1px solid #2BDAEF;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%);
}

.channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu { padding:10px !important;}




.channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu::-webkit-scrollbar {
  width: 7px;
  border-radius: 0px 4px 4px 0px;
}

/* Track */
.channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 0px 4px 4px 0px;
}

/* Handle */
.channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu::-webkit-scrollbar-thumb {
  background: #4EAACB;
  border-radius:4px;
}


.channel-table-newdesign .tab-pane .channel-search-box .show li a img {
  height: 30px !important;
  margin-right: 0px !important;
  color: #fff;
  border-radius: 50%;
  border:2px solid #4AFFAA;
  margin-right: 8px !important;
}

.channel-table-newdesign .tab-pane .channel-search-box .show li a {
  border-radius: 0px !important;
  margin-bottom: 0px !important;
  font-size: 14px !important;
  padding: 4px 5px !important;
  height:auto !important;
}

.instaprofile .rightlist .tooltip1 .tooltiptext { line-height: 22px;}

.channel-table-newdesign .tab-pane .channel-search-box .show li a span {
  float: right;
  text-transform: uppercase;
  font-size: 10px;
  background:#4AFFA8;
  margin-right: 5px;
  padding:3px 6px;
  border-radius:5px;
  margin-top:1px;
  min-width: 111px;
  text-align: center;
}


.channel-table-newdesign .tab-pane .channel-search-box .show li a span:hover {
  background:#030445e3;
  color:#fff;
}







.insta-follw { margin-bottom:0px !important;}
.insta-foll-no h5 {
  font-size:14px !important;
}

.insta-foll-no span { margin-bottom:13px;}

.confirm-btn-wrap { text-align:center; margin-bottom:20px;}
.confirm-btn-wrap .confirm-btn { border-radius: 14px; min-width:160px; border:none; padding:10px 0px;
  background: var(--Final-Green, #4AFFA8); color: var(--Dark-Blue, #010029);
  font-family: Lexend;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  margin:0px 5px;
  border: 1px solid #010029;
  line-height: normal;}

  .confirm-btn-wrap .confirm-btn:hover { background:none; border-radius: 14px;
    border: 1px solid #FFF; color:#fff;}


    .confirm-btn-wrap .reject-btn { border-radius: 14px; min-width:160px; border:none; padding:10px 0px;
      background:none;
      font-family: Lexend;
      font-size: 15px;
      font-style: normal;
      font-weight: 500;
      margin:0px 5px;
      border: 1px solid #FFF; color:#fff;
      line-height: normal;}
    
      .confirm-btn-wrap .reject-btn:hover {  border-radius: 14px;  background: var(--Final-Green, #4AFFA8); color: var(--Dark-Blue, #010029);
          border: 1px solid #010029;}

    .channel-table-newdesign .tab-pane .channel-search-box .dropdown-menu li {
            margin-bottom: 4px;
        }

        .remove-account {
          border-radius: 19.043px;
          margin: 0px 80px;
          border: 0.778px solid #FFF;
          padding: 20px 30px;
          margin-bottom:20px;
          background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
          box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
      }

  .remove-profile-pic { position:relative;}

  .remove-profile-pic img { height:58px !important;
    margin-right: 0px !important;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #4AFFAA;
    width: 58px;
    object-fit: cover;
    margin-right: 8px !important;}

    .remove-profile-pic span {
      background: #4AFFA8;
      width: 24px;
      height: 24px;
      border-radius: 50px;
      display: inline-block;
      text-align: center;
      position: absolute;
      left: -6px;
      top: 0px;
  }

  .remove-account h2 {
    color: #4AFFA8;
    font-family: Lexend;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    margin:0px 0px 5px 0px;
    text-align:left;
    line-height: normal;}

    .remove-account p {
      color: #FFF;
      font-family: Lexend;
      font-size: 18px;
      text-align:left;
      font-style: normal;
      font-weight: 300;
      margin:0px;
      line-height: normal;}

      .unlinkicon p {
        color: #FFF !important;
        text-align: center;
        font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        width: auto;
        line-height: normal;
        text-transform: capitalize;
        display: inline-block;
        padding: 0px 0px 0px 0px;
        margin: 9px 0px 0px 0px;
        opacity: 1 !IMPORTANT;
        cursor:pointer !important;
    }

.unlinkicon p a { margin-left:10px;}

.unlinkicon p svg {
    margin-left: 10px;
}

#channelContainer .no-channel {
    text-align: center;
    color: #fff;
}


#nav-instagram .channel-box { z-index:11 !important;}

.backto-channel {
  width:100%;
  display: inline-block;
  float: left;
}



.VideoDetails-new-design .video-left-main {
  border-radius: 40px;
  border: 1px solid #FFF;
  padding:30px;
  height:100%;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);}




  .VideoDetails-new-design .video-container {
    position: relative;
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

#video-container .col-lg-4 { margin-bottom:30px;}

.manage-videos-box .col-lg-4 { margin-bottom:30px;}


.videoDescription { width:100%; height:auto; margin-top:10px;}

.VideoDetails-new-design .videoDescription h2 {
  color: var(--blanco, #FFF);
  text-align: center;
  font-family: Lexend;
  text-align:left;
  font-size: 22px;
  margin:15px 0px 10px 0px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;}

  .VideoDetails-new-design .videoDescription p {
    color: rgba(255, 255, 255, 0.80);
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.007px;}



  .VideoDetails-new-design .view-count-wrap { width:100%; height:auto; border-bottom:1px solid rgba(255, 255, 255, 0.36); display:inline-block;}
  .VideoDetails-new-design .view-count-wrap span { color: #4AFFA8;
font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    float:left;
    font-weight: 500;
    line-height: normal;
    padding-top:5px;
    text-transform: capitalize;}

    .VideoDetails-new-design .view-count-wrap b {
      color: #FFF;
      text-align: right;
      font-family: Lexend;
      font-size:20px;
      font-style: normal;
      font-weight: 500;
      float:right;
      margin-bottom:10px;
      line-height: normal;}


.VideoDetails-new-design h3 {
        color: var(--blanco, #FFF);
        text-align: center;
        font-family: Lexend;
        text-align:left;
        font-size: 22px;
        margin:15px 0px 10px 0px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;}








.VideoDetails-new-design .rewind-btn, .forward-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background:none;
        border: none;
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        display: none;
    }
    .VideoDetails-new-design .rewind-btn {
        left: 30px;
    }
    .VideoDetails-new-design .forward-btn {
        right:30px;
    }
    .VideoDetails-new-design .video-container:hover .rewind-btn,
    .VideoDetails-new-design .video-container:hover .forward-btn {
        display: block;
    }


  .VideoDetails-new-design .related-channel-wrap { border-bottom:1px solid rgba(255, 255, 255, 0.17); padding-bottom:15px; padding-top:15px;}
 .border-bottom-none { border-bottom:none !important;}



    .VideoDetails-new-design .related-channel-wrap p {
      color: var(--blanco, #FFF);
      font-family: Lexend;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      padding:0px;
      margin:0px;
      line-height:24px;}

      .VideoDetails-new-design .related-channel-wrap p span {
        color: var(--Final-Green, #4AFFA8);
        font-family: Lexend;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        margin-top: 9px !important;
        margin-right: 5px;
        line-height: normal;
        display: inline-block;
    }

    .VideoDetails-new-design .related-channel-wrap img { width:100%; border-radius:12px;}

    .padding-left-0 { padding-left:0px;}

    .VideoDetails-new-design .see-all-button { margin-top:20px;}

    .VideoDetails-new-design .see-all-button button {
      border-radius: 14px;
      width:100%;
      padding:13px 10px;
      border:none;
      color: #FFF;
      transition:0.3s ease;

text-align: center;
font-family: Lexend;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
border:2px solid #2BBBEF;
background: var(--Final-Blue, #2BBBEF); }


.VideoDetails-new-design .see-all-button button:hover { background:none; border:2px solid #2BBBEF; transition:0.3s ease;}


.VideoDetails-new-design .video-right-chat {
  border-radius: 40px;
  border: 1px solid #FFF;
  padding: 30px;
  position: relative;
  height: 100%;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
  box-sizing: border-box; /* Ensures padding doesn't cause overflow */
  overflow: hidden; /* Prevents child elements from breaking out */
}

.VideoDetails-new-design .video-right-chat .video-chat-wrap {
  border-radius: 36px;
  border: 1px solid #FFF;
  padding:5px;
  background: rgba(255, 255, 255, 0.00);
  position: absolute;
  bottom: 30px;
  left: 30px; /* Aligning it inside the parent */
  right: 30px; /* Keeping space within the parent */
  width: auto; /* Avoids overflow */
  box-sizing: border-box; /* Ensures padding does not cause extra width */
  z-index:99;
  }

.VideoDetails-new-design .video-right-chat .video-chat-wrap button { background:none; border:none;}
.VideoDetails-new-design .video-right-chat .video-chat-wrap input { 
  width:30%; background:none; border:none; outline:none; color: #fff;
font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -1.325px;}

  .VideoDetails-new-design .video-right-chat .video-chat-wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #D9D9D9;
    opacity:1;
  }
  .VideoDetails-new-design .video-right-chat .video-chat-wrap input::-moz-placeholder { /* Firefox 19+ */
    color: #D9D9D9;
    opacity:1;
  }
  .VideoDetails-new-design .video-right-chat .video-chat-wrap input:-ms-input-placeholder { /* IE 10+ */
    color: #D9D9D9;
    opacity:1;
  }
  .VideoDetails-new-design .video-right-chat .video-chat-wrap input:-moz-placeholder { /* Firefox 18- */
    color: #D9D9D9;
    opacity:1;
  }


  .VideoDetails-new-design .chat-submit-button-wrap button { margin-left:5px;}

  .VideoDetails-new-design .right-chart-head { height: 40px;
    max-height: 40px; border-bottom:1px solid rgba(255, 255, 255, 0.57); padding-bottom:15px; margin-bottom:10px;}
 
  .VideoDetails-new-design .video-chat-right-wrap {
    width: 100%;
    padding: 0px 15px 15px 15px;
    overflow-y: auto;
    overflow-x: auto;
    height: auto;
    max-height: calc(400px - -427px);
    position: static;
    padding-bottom:145px;
    min-height: calc(400px - -427px);

  }
  .VideoDetails-new-design .video-chat-right-wrap .ques-wrap { width:auto; height:auto; float:right; border-radius: 46.5px;
    border: 0.873px solid #979797;
    background: rgba(255, 255, 255, 0.00); color:#fff;
    color: #FFF;
font-family: Lexend;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.32px;
margin-top:25px;
    box-shadow: 8.491px 8.491px 3.396px 0px rgba(0, 0, 0, 0.10); padding:10px 15px;}

    .VideoDetails-new-design .video-chat-right-wrap .ans-wrap {
      width: 100%;
      height: auto;
      margin-top:25px;
      color: #FFF;
      font-family: Lexend;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: -0.32px;
      display: inline-block;
  }

  .VideoDetails-new-design .video-chat-right-wrap .ans-wrap p { line-height:23px;}
  .VideoDetails-new-design .video-chat-right-wrap .ans-wrap h2 { 
    margin:0px 0px 15px 0px; padding:0px; color: #FFF;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.32px;}

    .VideoDetails-new-design .video-chat-right-wrap .ans-wrap ul {
      margin: 0px 0px 20px 0px;
      padding: 0px 0px 0px 14px;}

    .VideoDetails-new-design .video-chat-right-wrap .ans-wrap li { margin-bottom:8px;}
    

    .video-chat-right-wrap::after {
      position: absolute;
      z-index: 99;
      content: '';
      bottom: -2px;
      width: 100%;
      min-height: 110px;
      background: rgb(3, 11, 69);
      background: linear-gradient(0deg, rgba(3, 11, 69, 0.9892550770308123) 54%, rgba(3, 11, 69, 0) 100%);
      left: 0px;
      height: 250px;
      
  }






  .video-chat-right-wrap::-webkit-scrollbar {
  width:4px;
  border-radius:0px;
}

/* Track */
.video-chat-right-wrap::-webkit-scrollbar-track {
      background:none;
      border-radius:0px;
  }

/* Handle */
.video-chat-right-wrap::-webkit-scrollbar-thumb {
      background: #4EAACB;
      border-radius:0px;
  }


  .att-button svg:hover rect { fill:#2BBBEF; transition:0.3s ease;}
  .att-button svg:hover path { fill:#fff; transition:0.3s ease;}

  .svg-stock svg:hover path { fill:#2BBBEF; transition:0.3s ease;}

  .VideoDetails-new-design { transition:0.3s ease;}

  .logininnerwrap .login-message {
    border-radius:14px;
border: 1px solid #FF3A41;
background: rgba(255, 58, 65, 0.60);
    padding:20px 22px;
    text-align:center;
    margin-bottom:18px;
}

.logininnerwrap .login-message .message-icon { margin-right:10px;}
.logininnerwrap .login-message .message-text h4 {
  margin:0px;
  padding:0px;
  color: #EAEAEA;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 4px;
  display: inline-block;}

  .logininnerwrap .login-message .message-text p {
    color: #fff;
    font-family: Lexend;
    font-size: 15px;
    font-style: normal;
    font-weight: 200;
    margin:0px;
    padding:0px;
    line-height: normal;
}






.logininnerwrap .login-message .custom-message-box { display:flex;}
.logininnerwrap .login-message .message-text { text-align:left;}







#forgotPasswordForm #forgotmessage {
  padding:20px 25px;
  border-radius:14px;
  border: 1px solid #F28F1E;
  background: rgba(242, 143, 30, 0.70);
  color: #fff;
  font-family: Lexend;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  display: flex;
  margin-bottom:18px;
  margin-top:18px;
}


#forgotPasswordForm #forgotmessage .icon {
  margin-right:10px;
  color: var(--WARNING-TEXT, #856404);
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;}

  #forgotPasswordForm #forgotmessage .text strong {
color: #fff;
font-family: Lexend;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
    margin-bottom: 4px;
    display: inline-block;
}


#forgotPasswordForm #forgotmessage .text span {
    color: #fff;
    font-family: Lexend;
    font-size: 15px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

#forgotPasswordForm #forgotmessage .text {
  text-align: left;
}

#forgotmessage svg {
  margin-right: 10px;
}

#forgotPasswordForm .error { border: 1px solid #FF3A41 !important;
  background: rgba(255, 58, 65, 0.80) !important;}






  #resetPasswordForm #resetmessage
  {
    padding:20px 25px;
    border-radius:14px;
    border: 1px solid #F28F1E;
    background: rgba(242, 143, 30, 0.70);
    color: #fff;
    font-family: Lexend;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    display: flex;
    margin-bottom:18px;
    margin-top:18px;
  }
  
  
  #resetPasswordForm #resetmessage .icon {
    margin-right:10px;
    color: var(--WARNING-TEXT, #856404);
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;}
  
  #resetPasswordForm #resetmessage .text strong {
  color: #fff;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
      margin-bottom: 4px;
      display: inline-block;
  }
  
  
  #resetPasswordForm #resetmessage .text span {
      color: #fff;
      font-family: Lexend;
      font-size: 15px;
      font-style: normal;
      font-weight: 200;
      line-height: normal;
  }
  
  #resetPasswordForm #resetmessage .text {
    text-align: left;
  }
  
  #resetPasswordForm #resetmessage svg {
    margin-right: 10px;
  }
  
  #resetPasswordForm .error { border: 1px solid #FF3A41 !important;
    background: rgba(255, 58, 65, 0.80) !important;}







/* .........................new login detils........................... */

.new-login-main-wrap { display:flex; justify-content: center; height:100vh;}

.login-page-new-deaign {
  font-family: 'Lexend', sans-serif;
  width: 1050px;
  margin:auto; /* top auto bottom left-right */
  display: block;
}


.login-page-new-deaign .container{
  position: relative;
  width:100%;
  height: 550px;
  background: #fff;
  margin:0px;
  border-radius: 30px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
  overflow: hidden;
}

.login-page-new-deaign .container h1{
      font-size: 36px;
      margin:0px 0;
      text-align:center;
  }

  .login-page-new-deaign .container p{
      font-size: 14.5px;
      margin: 15px 0;
      text-align:center;
  }

  .login-page-new-deaign form{ width: 100%; margin:0px;}

  .login-page-new-deaign .form-box{
    position: absolute;
    right: 0;
    width:50%;
    background: #fff;
    display: flex;
    color: #333;
    text-align: center;
    padding: 40px;
    box-sizing: border-box; /* ensures padding doesn't increase height */
    z-index: 1;
    height:100%;
    align-items: center;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s;
    overflow: auto; /* optional: for scroll if content exceeds */
}

.login-page-new-deaign .container.active .form-box{ right:50.1%; }

.login-page-new-deaign .form-box.register{ visibility: hidden; }
.login-page-new-deaign .container.active .form-box.register{ visibility: visible; }

.login-page-new-deaign .input-box{
  position: relative;
  margin:20px 0;
}

.login-page-new-deaign .input-box input{
      width: 100%;
      padding: 13px 50px 13px 20px;
      background:#fff;
      border-radius: 8px;
      border: none;
      outline: none;
      font-size: 16px;
      color: #333;
      font-weight: 400;
      border: 3px solid #cccccc4a;
  }

  .login-page-new-deaign .input-box input::placeholder{
          color: #888;
          font-weight: 400;
          font-size: 16px;
      }
  
.login-page-new-deaign .input-box i{
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
  }

  .login-page-new-deaign .forgot-link{ margin:0px 0 20px; }
  .forgot-link a{
      font-size: 14.5px;
      color: #333;
  }

  .login-page-new-deaign .btn{
  width: 100%;
  height: 48px;
  background: #4AFFA8;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  border: none;
  font-size: 16px;
  color: #030445;
  border:2px solid #4AFFA8;
  font-weight: 600;
  
}


.login-page-new-deaign .btn:hover { background:none;  border:2px solid #4AFFA8; color:#030445;}



.login-page-new-deaign .social-icons{
  display: flex;
  justify-content: center;
}

.login-page-new-deaign .social-icons a{
      display: inline-flex;
      padding: 10px;
      border: 2px solid #ccc;
      border-radius: 8px;
      font-size: 24px;
      color: #333;
      margin: 0 8px;
      text-decoration:none;
  }

  .login-page-new-deaign .social-icons a:hover { background:#2BBBEF; color:#fff; border: 2px solid #2BBBEF;}




  .login-page-new-deaign .toggle-box{
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-page-new-deaign .toggle-box::before{
      content: '';
      position: absolute;
      left: -250%;
      width: 300%;
      height: 100%;
      background: #2BBBEF;
      /* border: 2px solid red; */
      border-radius: 150px;
      z-index: 2;
      transition: 1.8s ease-in-out;
  }

  .login-page-new-deaign .container.active .toggle-box::before{ left: 50%; }

  .login-page-new-deaign .toggle-panel{
  position: absolute;
  width: 50%;
  height: 100%;
  /* background: seagreen; */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: .6s ease-in-out;
}

.login-page-new-deaign .toggle-panel.toggle-left{ 
      left: 0;
      transition-delay: 1.2s; 
  }
  .login-page-new-deaign .container.active .toggle-panel.toggle-left{
          left: -50%;
          transition-delay: .6s;
      }

      .login-page-new-deaign .toggle-panel.toggle-right{ 
      right: -50%;
      transition-delay: .6s;
  }
  .login-page-new-deaign .container.active .toggle-panel.toggle-right{
          right: 0;
          transition-delay: 1.2s;
      }

      .login-page-new-deaign .toggle-panel p{ margin-bottom: 20px; }

      .login-page-new-deaign .toggle-panel .btn{
      width: 160px;
      height: 46px;
      background: transparent;
      border: 2px solid #fff;
      box-shadow: none;
  }


  .login-page-new-deaign .toggle-panel .btn:hover { background:#4AFFA8; color:#030445; border: 2px solid #2BBBEF;}



  .login-page-new-deaign .toggle-panel .backtologin{
    width: 160px;
    height:auto;
    background: transparent;
    border: 2px solid #fff;
    box-shadow: none;
}


.login-page-new-deaign .toggle-panel .backtologin:hover { background:#4AFFA8; color:#030445; border: 2px solid #2BBBEF;}


.linkedin-last #subscribers-box h5 {  margin-top:10px !important;}

.refrsh-button {
    padding: 5px 7px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    background:#030445 !important;
}

.refrsh-button:hover {
    background:#2BDAEF !important;
}


.social-main-icon svg {
    margin-bottom: 5px;
}


#uploadedFilesListYoutube #buttonContainer-YouTube button {
    border: 1px solid #2BBBEF;
    color:#2BBBEF;
    background:none;
    font-family:Lexend;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
   }

#uploadedFilesListYoutube #buttonContainer-YouTube button:hover { background:#2BBBEF; color:#fff;}



.ai-new-design-wrap #prompt {
    max-height:850px !important;
    
}






@media screen and (max-width: 650px){
  .login-page-new-deaign .container{ height: calc(100vh - 40px); }

  .login-page-new-deaign .form-box{
      bottom: 0;
      width: 100%;
      height: 70%;
  }

  .login-page-new-deaign .container.active .form-box{
          right: 0;
          bottom: 30%;
      }

      .login-page-new-deaign .toggle-box::before{
      left: 0;
      top: -270%;
      width: 100%;
      height: 300%;
      border-radius: 20vw;
  }

  .login-page-new-deaign .container.active .toggle-box::before{
          left: 0;
          top: 70%;
      }

      .login-page-new-deaign .container.active .toggle-panel.toggle-left{
          left: 0;
          top: -30%;
      }

      .login-page-new-deaign .toggle-panel{ 
      width: 100%;
      height: 30%;
  }
  .login-page-new-deaign .toggle-panel.toggle-left{ top: 0; }
  .login-page-new-deaign .toggle-panel.toggle-right{
          right: 0;
          bottom: -30%;
      }

      .login-page-new-deaign .container.active .toggle-panel.toggle-right{ bottom: 0; }
}

@media screen and (max-width: 400px){
  .login-page-new-deaign .form-box { padding: 20px; }

  .login-page-new-deaign .toggle-panel h1{font-size: 30px; }
}





.login-page-new-deaign .login-message {
  border-radius:14px;
  border: 1px solid #FF3A41;
  background: rgba(255, 58, 65, 0.80);
  padding: 15px 18px;
  text-align: left;
  margin-top: 18px;
  width:91%;
}

.login-page-new-deaign .login-message .message-icon { margin-right:10px;}
.login-page-new-deaign .login-message .message-text h4 {
margin:0px;
padding:0px;
color: #A4000F;
font-family: Lexend;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 4px;
display: inline-block;}

.login-page-new-deaign .login-message .message-text p {
  color: #A4000F;
  font-family: Lexend;
  font-size: 13px;
  font-style: normal;
  font-weight: 200;
  margin:0px;
  padding:0px;
  line-height: normal;
}






.login-page-new-deaign .login-message .custom-message-box { display:flex;}
.login-page-new-deaign.login-message .message-text { text-align:left;}

.forgot-link a:hover {
  text-decoration: none;
}


.resend-mail {
  flex-direction: column;
  justify-content: center;}

  .resend-mail h1 { margin-bottom:20px;}


  .boxfade { filter: blur(5px);}

  .login-btn-submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 45px;
    background-color: #2BBBEF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    
}

.login-page-new-deaign .spinner {
  width: 22px;
  height: 22px;
  border: 3px solid transparent;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 50%;
  animation: dualspin 0.6s linear infinite;
  margin:auto;
 
}

@keyframes dualspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.login-page-new-deaign .btn:disabled {
  background: #4AFFA8;
  cursor:progress;
}


#refresh-btn { margin-top:5px; background:none !important; border:none !important;}
#refresh-btn:hover { background:none !important;}


.file-list li {
    color: #fff;
}





@keyframes scan {
  0% {
    transform: translate(2px, -15px);
  }
  40% {
    transform: translate(2px, 270px);
  }
  60% {
    transform: translate(2px, -15px);
  }
  to {
    transform: translate(2px, -15px);
  }
}




@keyframes showreel {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-410px);
  }
  30% {
    transform: translateX(-410px);
  }
  40% {
    transform: translateX(-822px);
  }
  50% {
    transform: translateX(-822px);
  }
  60% {
    transform: translateX(-1240px);
  }
  70% {
    transform: translateX(-1240px);
  }
  80% {
    transform: translateX(-1240px);
  }
  90% {
    transform: translateX(-1240px);
  }
}


@keyframes insta-scan {
  0% {
    transform: translate(2px, -15px);
  }
  40% {
    transform: translate(2px, 270px);
  }
  60% {
    transform: translate(2px, -15px);
  }
  to {
    transform: translate(2px, -15px);
  }
}



@keyframes insta-showreel {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-410px);
  }
  30% {
    transform: translateX(-410px);
  }
  40% {
    transform: translateX(-822px);
  }
  50% {
    transform: translateX(-822px);
  }
  60% {
    transform: translateX(-1240px);
  }
  70% {
    transform: translateX(-1240px);
  }
  80% {
    transform: translateX(-1660px);
  }
  90% {
    transform: translateX(-1660px);
  }
  100% {
    transform: translateX(0px); /* Loop back to start */
  }
}




@keyframes linkedin-scan {
  0% {
    transform: translate(2px, -15px);
  }
  40% {
    transform: translate(2px, 270px);
  }
  100% {
    transform: translate(2px, -15px); /* Loop back to start */
  }
}

@keyframes linkedin-showreel {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-414px);
  }
  30% {
    transform: translateX(-414px);
  }
  40% {
    transform: translateX(-822px);
  }
  50% {
    transform: translateX(-822px);
  }
  60% {
    transform: translateX(-1240px);
  }
  70% {
    transform: translateX(-1240px);
  }
  80% {
    transform: translateX(-1655px);
  }
  90% {
    transform: translateX(-1655px);
  }
  100% {
    transform: translateX(0px); /* Loop back to start */
  }
}







@keyframes spotify-scan {
  0% {
    transform: translate(2px, -15px);
  }
  50% {
    transform: translate(2px, 270px);
  }
  100% {
    transform: translate(2px, -15px); 
  }
}

@keyframes spotify-showreel {
  0% {
    transform: translateX(0);
}
10% {
    transform: translateX(0);
}
20% {
    transform: translateX(-402px);
}
30% {
    transform: translateX(-402px);
}
40% {
    transform: translateX(-805px);
}
50% {
    transform: translateX(-805px);
}
60% {
    transform: translateX(-1210px);
}
70% {
    transform: translateX(-1210px);
}
80% {
    transform: translateX(-1610px);
}
90% {
    transform: translateX(-1610px);
}

100% {
    transform: translateX(0px);
} 

}






#Scanner { 
  animation: scan 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

#Cards {
animation: showreel 12.5s cubic-bezier(0.6, 1.24, 0.76, 1.07) infinite;
}


#insta-Scanner { 
animation: insta-scan 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

#insta-Cards {
animation: insta-showreel 12.5s cubic-bezier(0.6, 1.24, 0.76, 1.07) infinite;
}


#linkedin-Scanner { 
  animation: linkedin-scan 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}


#linkedin-Cards {
  animation: linkedin-showreel 12.5s cubic-bezier(0.6, 1.24, 0.76, 1.07) infinite;
  }




  #spotify-Scanner { 
    animation: spotify-scan 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  }
  
  
  #spotify-Cards {
    animation: spotify-showreel 12.5s cubic-bezier(0.6, 1.24, 0.76, 1.07) infinite;
    }













  #BottomText1,
  #BottomText2 {
    opacity: 0;
    animation: fadeInBottomText 12.5s ease-in-out infinite;
    opacity: 0;
  transform: translate(0px, 0px);
  transform-box: fill-box;
  transform-origin: center;
  animation-fill-mode: forwards;
  }



  #BottomText3,
  #BottomText4 {
    opacity: 0;
    animation: fadeInBottomText1 12.5s ease-in-out infinite;
    opacity: 0;
  transform: translate(0px, 0px);
  transform-box: fill-box;
  transform-origin: center;
  animation-fill-mode: forwards;
  }


  #BottomText5,
  #BottomText6 {
    opacity: 0;
    animation: fadeInBottomText2 12.5s ease-in-out infinite;
    opacity: 0;
    transform: translate(0px, 0px);
    transform-box: fill-box;
    transform-origin: center;
    animation-fill-mode: forwards;
  }



  #BottomText7,
  #BottomText8 {
  opacity: 0;
  animation: fadeInBottomText3 12.5s ease-in-out infinite;
  opacity: 0;
  transform: translate(0px, 0px);
  transform-box: fill-box;
  transform-origin: center;
  animation-fill-mode: forwards;
  }






  #BottomText9,
  #BottomText10 {
  opacity: 0;
  animation: fadeInBottomText4 12.5s ease-in-out infinite;
  opacity: 0;
  transform: translate(0px, 0px);
  transform-box: fill-box;
  transform-origin: center;
  animation-fill-mode: forwards;
    
  }



  
  @keyframes fadeInBottomText {
    0%, 5% {
      opacity: 0;
      transform: translate(0px, -15px);
    }
    5%, 10% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
    
  }


  @keyframes fadeInBottomText1 {
    0%, 20% {
      opacity: 0;
      transform: translate(0px, -15px);
    }
    25%, 30% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
    
  }



  @keyframes fadeInBottomText2 {
    0%, 40% {
      opacity: 0;
      
      transform: translate(0px, -15px);
    }
    45%, 50% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
    
  }  


  @keyframes fadeInBottomText3 {
    0%, 60% {
      opacity: 0;
      transform: translate(0px, -15px);
    }
    65%, 70% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
    
  } 






  @keyframes fadeInBottomText4 {
    0%, 80% {
      opacity: 0;
      transform: translate(0px, -15px);
    }
    85%, 90% {
      opacity: 1;
      transform: translate(0px, 0px);
    }
    
  } 












.svg-loader {
  position: absolute;
  width:1100px;
  height:600px;
  margin: auto;
  overflow: hidden;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
}




/* @keyframes scan {
  from { transform: translate(45px, 45px); }
  to { transform: translate(45px, 160px); }  
}

@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

#icon {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#Scanner {
  animation: scan 2s ease-out infinite alternate;
}

#Selected {
  animation: fade 4s ease infinite alternate;
} */




.data-loader #icon .icon-loader { z-index: 1;
  margin-top: 256px;
  /* position: absolute; */}


  .role-custom-message-box {
    border-radius: 14px;
    border: 1px solid #08C552;
    background: rgba(117, 255, 117, 0.70);
    padding: 15px 18px;
    text-align: left;
    margin-top: 18px;
    width: auto;
    display: flex
;
    /* display: inline-block; */
    width: 300px;
    /* float: right; */
    position: fixed;
    right: 10px;
    top: 65px;
    z-index: 999999;
}


  .role-custom-message-box .message-icon { margin-right:10px;}
  .role-custom-message-box .message-text h4 {
    margin:0px;
    padding:0px;
    color: #EAEAEA;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 4px;
    display: inline-block;}
  
    .role-custom-message-box .message-text p {
      color: #fff;
      font-family: Lexend;
      font-size: 15px;
      font-style: normal;
      font-weight: 200;
      margin:0px;
      padding:0px;
      line-height: normal;
  }
  
 .role-custom-message-box .custom-message-box { display:flex;}
  .role-custom-message-box .message-text { text-align:left;}



  .CommentsExtractor-new .CommentsExtracto-title h1 b { display:inline-block; width:auto;}

  .CommentsExtractor-new .CommentsExtracto-title p b {
    font-weight: normal;
}

.scroll-container h2 b { font-weight:normal;}

.CommentsExtractor-new .CommentsExtracto-title h2 b {
  font-weight: normal !important;
  color: #fff !important;
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.Aichat h2 b { font-weight:normal;}















/* .loader-wrap { display:none;} */




.add-loader {
  position: relative;
  overflow: hidden;
  border:none !important;
}

.Placeholder-loade {
  background: linear-gradient(90deg, #0D3066 0%, #1e4a84 50%, #0D3066 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 999;
  opacity: 1; /* Ensure it has full opacity initially */
  transition: opacity 0.4s ease; /* Add fade transition */
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.Placeholder-loade.fade-out {
  opacity: 0; /* Fade out when the class is added */
}

















/* Shimmer loader */
.Placeholder-loade {
  background: linear-gradient(90deg, #0D3066 0%, #1e4a84 50%, #0D3066 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;

}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Dim anschat while loading */
.anschat.response-loading-active {
  opacity: 0.6;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}





.letter.ultra-smooth {
  transition: 
      opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
      transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), 
      filter 0.5s ease-out;
}











#chat-message-new .bounceball {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 15px;
  margin-left:5px;
}
#chat-message-new .bounceball:before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #2BBBEF;
  transform-origin: 50%;
  -webkit-animation: bounce 500ms alternate infinite ease;
          animation: bounce 500ms alternate infinite ease;
}

#chat-message-new .text {
  width: auto;
  display: inline-block;
  margin-left:5px;
  color: #fff;
  font-family: Lexend;
  font-weight: 300;
}





@-webkit-keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}

@keyframes bounce {
  0% {
    top: 30px;
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}





.load-text .stage {
display: flex;
justify-content: center;
padding:10px 10px;
overflow: hidden;
width: 250px;
}


.dot-gathering {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color:#2BDAEF;
  color: transparent;
  margin: -1px 0;
  filter: blur(0px);
}
.dot-gathering::before, .dot-gathering::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -50px;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: #2BDAEF;
  color: transparent;
  opacity: 0;
  filter: blur(0px);
  animation: dot-gathering 2s infinite ease-in;
}
.dot-gathering::after {
  animation-delay: 0.5s;
}

@keyframes dot-gathering {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  35%, 60% {
    opacity: 1;
    transform: translateX(50px);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}


.load-text h2 {
  color: #fff;
  float: left;
  width: 100%;
  font-size: 24px;
  margin: 0px 0px 5px 0px;
  font-weight:300;
  font-family: Lexend;
}






#loadingMessage .stage {
 justify-content: start !important;
  
}



#preloader .load-text .stage {
 width: 100%;
}



#loadingMessage .loading .stage {overflow: visible !important;}

#loadingMessage .stage {overflow: visible !important;}






.loader-wrap .bounceball-container {
  display: flex;
  align-items: flex-end;
}

.loader-wrap .bounceball {
  position: relative;
  display: inline-block;
  height: 37px;
  width: 15px;
  margin: 0 2px;
}

.loader-wrap .bounceball::before {
  content: "";
  position: absolute;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #2BBBEF;
  transform-origin: 50%;
  animation: bounce 600ms alternate infinite ease;
}

.loader-wrap .delay1::before {
  animation-delay: 150ms;
}
.loader-wrap .delay2::before {
  animation-delay: 300ms;
}

.loader-wrap .text {
  margin-left: 10px;
  color: #fff;
  font-family: Lexend, sans-serif;
  font-weight: 300;
  display: inline-block;
}

@keyframes bounce {
  0% {
    top: 40px; /* increased drop */
    height: 5px;
    border-radius: 60px 60px 20px 20px;
    transform: scaleX(2);
  }
  35% {
    height: 15px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: -30px; /* higher jump */
  }
}




.skeleton { position:relative; z-index:1;  display:inline-block; font-size:unset !important; width:100%; margin-bottom:0px;}



.skeleton span {
  z-index: 2;
  /* background: linear-gradient(90deg, #1F7A94 25%, #247F8A 50%, #268284 75%); */
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  background-size: 200% 100%;
  animation: shimmer 1s infinite;
  border-radius: 6px;
}

.skeleton-title { height: 24px; width: 60%; }
.skeleton-subtitle { height: 16px; width: 40%; }
.skeleton-image { height: 140px; width: 100%; border-radius: 10px; }
.skeleton-text { height: 14px; width: 100%; }
.skeleton-icon { height: 60px; width: 60px; border-radius: 50%; margin: 10px auto; }
.skeleton-progress { height: 10px; width: 100%; border-radius: 6px; }
.skeleton-badge { height: 30px; width: 40%; }



@keyframes shimmer {
  0% { background-position: -500px 0; }
  100% { background-position: 200px 0; }
}

#channelContainer1 .sixk::after { display:none;}

#channelContainer1 .newdesign-box-data span {margin-bottom: 5px;
}


#preloader .sixk::after { display:none !important;}

#preloader .progressbaar { background:#2BBBEF;}

.loader-new-style .skeleton {height: 100%;}




.placeholder-loader {
  width: 100%;
  display: inline-block;
  font-size: 12px;
  height:17px;
}

.w100 { width:100%;}
.w90 { width:90%;}
.w70 { width:70% !important;}
.w10 { width:10%;}
.w20 { width:20%;}
.w30 { width:30%;}
.w40 { width:40%;}
.w50 { width:50%;}
.w79 { width:79%;}
.w47 { width:47%;}
.h12 {height: 12px; }
.h8 {height:8px; }
.h132 { height:132px;}
.h170 { height:170px;}
.h80 { height:80px;}
.h8 { height:8px;}
.h16 { height:16px;}
.h17 { height:17px;}
.h40 { height:40px;}
.h226 { height:226px;}
.w90 { width:90%;}
.w112 { width:112px;}
.mtop20 { margin-top:20px;}
.mbottom10 { margin-bottom:10px;}
.mbottom20 { margin-bottom:20px;}
.w65px { width:65px;}
.h65px { height:65px;}
.border-radius-50 { border-radius:50% !important;}
.border-radius-0 { border-radius:0% !important;}
.border-radius-20 { border-radius:20px !important;}
.border-top-left-right-10 { border-radius:10px 10px 0px 0px !important;}
.margin-left-0 { margin-left:0px !important;}
.margin-top-14 { margin-top:14px !important;}
.margin-top-30 { margin-top:30px;}
.float-left { float: left;}
.h100 { height:100%;}



#preloader .skeleton { border-bottom:0px;}


/* For auto add loader */

/* .loader-wrap { display:none;}

.skeleton-clone {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.skeleton-box {
  background: linear-gradient(90deg, #1F7A94 25%, #247F8A 50%, #268284 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
} */




/* Comment-Extraractor-new-design */

.extraractor-design-update-wrap { width:100%; height:auto; font-family: Lexend;}
.extraractor-design-update-wrap .promt-history { width:100%; height:100%; border-radius: 40px;
  border: 1px solid #FFF;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10); padding: 30px 20px 30px 20px;}

.extraractor-design-update-wrap .top-icon-main {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom:15px;
}

.extraractor-design-update-wrap .side-expand-icon {
  margin-right:10px;
  flex-grow:0;
 
}


.search-expand-icon .expanded {
  width: 100% !important;
  background: rgba(43, 187, 239, 1) !important;
  }


.extraractor-design-update-wrap .search-expand-icon {flex-grow:4;   transition: all 0.3s ease;}



.extraractor-design-update-wrap .search-expand-icon .search-container {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 25px;
  padding: 5px 10px;
  width:fit-content;
  transition: all 0.3s ease;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  justify-content: space-between;
  background: rgba(43, 187, 239, 0);
  float:right;
}

.extraractor-design-update-wrap .search-expand-icon .search-input {
  width: 0;
  padding: 0;
  border: none;
  outline: none;
  opacity: 0;
  background: transparent;
  color: white;
  transition: all 0.3s ease;
  font-size: 16px;
}

.extraractor-design-update-wrap .search-expand-icon .search-container.expanded .search-input {
  width:100%;
  padding: 5px 10px;
  opacity: 1;
}

.extraractor-design-update-wrap .search-expand-icon .search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

.extraractor-design-update-wrap .search-expand-icon .search-btn svg {
  width: 23px;
  height: 23px;
  fill: white;
}

.extraractor-design-update-wrap .search-expand-icon .search-container.expanded .search-input::placeholder {
  color: white;
  opacity:1;
}


.extraractor-design-update-wrap .tab-history { width:100%; height:auto;}

.extraractor-design-update-wrap .tab-history .tab-wrapper {
  position: relative;
  width: 300px;
}

.extraractor-design-update-wrap .tab-history .tab-toggle {
  display: flex;
  background: #fff;
  padding: 5px;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  margin-bottom:20px;
}

.extraractor-design-update-wrap .tab-history .tab-btn {
  flex: 1;
  border: none;
  padding: 12px 0;
  background: transparent;
  border-radius: 50px;
  font-weight:400;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.3s ease;
  z-index: 2;
  position: relative;
  color: #8A8A8A;
font-family: Lexend;
}

.extraractor-design-update-wrap .tab-history .tab-btn.active {
  color:#fff;
}

.extraractor-design-update-wrap .tab-history .slider {
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background: #4dc4f2;
  border-radius: 50px;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.extraractor-design-update-wrap .tab-history .tab-content {
  margin-top:20px;
  text-align: center;
  color: white;
  font-size: 18px;
  display: none;
}

.extraractor-design-update-wrap .tab-history .tab-content.active {
  display: block;
}


.extraractor-design-update-wrap #prompt { max-height:600px; overflow-x:visible; overflow-y:auto;}

/* width */
.extraractor-design-update-wrap #prompt::-webkit-scrollbar {
  width:2px;
}

/* Track */
.extraractor-design-update-wrap #prompt::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
}

/* Handle */
.extraractor-design-update-wrap #prompt::-webkit-scrollbar-thumb {
  background: #fff;
border-radius:10px;
}

/* Handle on hover */
.extraractor-design-update-wrap #prompt::-webkit-scrollbar-thumb:hover {
  background: #fff;
}





.extraractor-design-update-wrap #prompt h2 {
color: #FFF;
font-family: Inter;
  font-size:18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.48px;
 margin:0px 0px 10px 0px;
 padding:0px;
 text-align:left;
}


.extraractor-design-update-wrap #prompt ul { margin:0px 0px 30px 0px; padding:0px; width:95%;}
.extraractor-design-update-wrap #prompt ul:last-of-type { margin-bottom:0px;}
.extraractor-design-update-wrap #prompt ul li {
  text-align:left;
  list-style:none; color: #B6B6B6;
  margin-bottom:5px;
  position: relative;
  }

  .extraractor-design-update-wrap #prompt ul li a {
text-align:left;
list-style:none; color: #B6B6B6;
font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  padding:8px 0px;
  line-height: normal;
  width:100%;
  transition: all 0.4s ease;
  display: inline-block;
  border: 1.5px solid rgba(43, 187, 239, 0);
  border-radius: 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  padding-right: 29px !important;
  letter-spacing: -0.56px;}

  .extraractor-design-update-wrap #prompt ul li a:hover { border-radius: 12px; text-decoration:none;
    border: 1.5px solid var(--Final-Blue, #2BBBEF);
    background:linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%);
    color:#fff;
    padding:8px 10px;
    transition: all 0.4s ease;
   }


   


   .extraractor-design-update-wrap #prompt ul li a.active{ border-radius: 12px; text-decoration:none;
    border: 1.5px solid var(--Final-Blue, #2BBBEF);
    background:linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%);
    padding:8px 10px;
    color:#fff;
    transition: all 0.4s ease;
   }









.content-dropdown-toggle {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: auto;
    width: 30px;
    display: none;
    height: 100%;
    text-align: center; 
    padding-top: 10px;

border-radius: 0px 10px 10px 0px;
}

.content-dropdown-content {
  display: none;
  position: absolute;
  background:#030445 !important;
  max-width: 125px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 17px !important;
  padding: 10px 0;
  z-index: 1;
  right: 0px;
  top: 31px;
  border: 0.853px solid var(--Final-Green, #4AFFA8) !important;
  padding: 10px 10px;
}

.content-dropdown-content a {
    color: #fff !important;
    padding: 10px 8px !important;
    text-decoration: none;
    display: flex;
    font-family: Lexend;
font-size: 14px !important;
    align-items: center;
    gap: 10px;
    box-shadow:none !important;
    border:none !important;
    overflow:unset !important;
}

.content-dropdown-content a:hover {
  padding: 10px 8px !important;
    border:none !important;
    color: #fff !important;
    border-radius: 8px;
    background: #2BBBEF !important;
    box-shadow:none !important;
font-family: Lexend;
font-size: 14px !important;
font-style: normal;
}

.content-dropdown-content a svg { margin-right:8px;}

.content-dropdown-content a svg path { fill:#fff;}

.content-dropdown-content a:hover svg path { fill:#fff;}




.extraractor-design-update-wrap #prompt ul li:hover .content-dropdown-toggle {
    display: block;
}

.extraractor-design-update-wrap #prompt ul li:hover .content-dropdown-toggle svg path { fill:#4AFFA8;}


.extraractor-design-update-wrap .icon {
    width: 16px;
    height: 16px;
}

.extraractor-design-update-wrap .content-dropdown-content .delete {
    color:#EE3A3A !important;
}

.extraractor-design-update-wrap .show {
  display: block;
}

.content-dropdown-content .active { background:none !important;}

.extraractor-design-update-wrap .luara_ai-new-chat {
  width: 100%;
  height: auto;
  text-align: left;
  margin-bottom: 15px;
  font-size: 17px;
  font-family: Lexend;
}

.extraractor-design-update-wrap .luara_ai-new-chat a { color:#fff; text-decoration:none;}

.extraractor-design-update-wrap .luara_ai-new-chat svg { margin-right:5px;}






.extraractor-design-update-wrap .extraractor-right { width:100%; height:100%; border-radius: 40px; padding:50px 0px;
  border: 1px solid #FFF; position:relative;
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);}


  .extraractor-right .tag-search-main {
    background: #fff;
    padding:5px;
    border-radius: 50px;
    width:543px;
    margin: auto;
    margin-bottom:70px;
}

.full-width { width:100%; position:absolute; top:0px; height:100%; background:#030445; z-index:99;}

.extraractor-right .tag-search-main .ss-main .ss-multi-selected { border:none; color:#89797D; min-height: 39px;}
.extraractor-right .tag-search-main .ss-content {
  padding: 10px;
  
}

.extraractor-right .ss-main .ss-content .ss-list .ss-option {
padding:10px 0px 10px 0px !important; 
color: #030445;
font-family: Lexend;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.extraractor-right .ss-main .ss-content .ss-list .ss-option:hover { background:none !important; color:#4dc4f2 !important;}

.extraractor-right .ss-search input {
  border-radius: 25px !important;
  border: 1px solid rgba(0, 0, 0, 0.40) !important;
  padding: 20px 15px !important; outline:none;
}

.extraractor-right .ss-main .ss-content .ss-search input:focus {
  box-shadow:none;
}



.extraractor-right .ss-main .ss-content .ss-list {
  max-height:350px;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}



/* width */
.extraractor-right .ss-main .ss-content .ss-list::-webkit-scrollbar {
  width:5px;
}

/* Track */
.extraractor-right .ss-main .ss-content .ss-list::-webkit-scrollbar-track {
  background:none;
}

/* Handle */
.extraractor-right .ss-main .ss-content .ss-list::-webkit-scrollbar-thumb {
  background:#4dc4f2;
border-radius:10px;
}

/* Handle on hover */
.extraractor-right .ss-main .ss-content .ss-list::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

.extraractor-right .ss-main .ss-multi-selected .ss-values .ss-value { background:#4dc4f2 !important; border-radius:50px;}


.extraractor-right .ss-main .ss-single-selected .placeholder {
  color: #89797D;
font-family: Lexend;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.6px; }


.extraractor-right .ss-main .ss-multi-selected .ss-values .ss-disabled {justify-content: space-around;}

.extraractor-right .ss-main .ss-single-selected .placeholder { justify-content: space-around;}
.extraractor-right .ss-open-below {
  background: #4dc4f2 !important;
  border-radius: 20px !important;
  
}

.extraractor-right .ss-main { height:100%;}


.extraractor-right .ss-main .ss-multi-selected .ss-add {
margin: 0px 12px 0 5px;
}

.extraractor-right .ss-main .ss-multi-selected { align-items: center;}
.extraractor-right .ss-main .ss-single-selected {height: 100%; border-radius:50px;}
.extraractor-right .ss-main .ss-multi-selected { border-radius: 50px;
}

.extraractor-right .ss-open-below .ss-disabled { color:#fff !important;}

.extraractor-right .ss-main .ss-multi-selected .ss-values .ss-disabled { color: #89797D;}
.extraractor-right .ss-open-below .placeholder { color:#fff !important;}
.extraractor-right .ss-main .ss-multi-selected .ss-values {justify-content: center;}
.extraractor-right .ss-multi-selected:hover { background:#4dc4f2; color:#fff !important; overflow:hidden;}
.extraractor-right .ss-multi-selected:hover .ss-disabled { color:#fff !important;}
.extraractor-right .ss-single-selected:hover { background:#4dc4f2 !important;}
.extraractor-right .ss-single-selected:hover .placeholder { color:#fff;}




.extraractor-right .slider-container {
  width: 100%;
  margin: auto;
  overflow: hidden;
  margin-top:35px;
  position:relative;
}

.extraractor-right .cardslider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  cursor: grab;
  scroll-behavior: smooth;
  user-select: none;
}

.extraractor-right .cardslider:active {
  cursor: grabbing;
}

.extraractor-right .cardslider::-webkit-scrollbar {
  display: none;
}
.extraractor-right .cardslider {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

.extraractor-right .card {
  width: calc(36% + -100px);
  height:141px;
  border-radius: 16px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);
  color: white;
  display: flex;
  justify-content: center;
  padding: 15px;
font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  box-shadow: 9.721px 9.721px 3.888px rgba(0, 0, 0, 0.03);
}


.extraractor-right .active-card { background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%);
  border: 2px solid #2BDAEF;}



.extraractor-right .card label {
  color: #FFF;
 font-family: Lexend;
  font-size:17.716px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-right:40px;
  letter-spacing: -0.909px;}



.extraractor-right .card h2 {
  color: #FFF;
 font-family: Lexend;
  font-size:17.716px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.909px;}

  .extraractor-right .card p {
    color: #FFF;
    font-family: Lexend;
    font-size: 11.465px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.379px;}

    .extraractor-right .card-icon {
      width: 25px;
      height: 33px;
      position: absolute;
      right: 18px;
      top: 10px;
  }



  /* Invisible hover zones on left and right */
  .extraractor-right .hover-zone {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 2;
}

.extraractor-right .left-zone {
  left:-20px;
  background: linear-gradient(90deg, rgb(3, 4, 69) 27.59%, rgba(3, 4, 69, 0) 100%);}

.extraractor-right .right-zone {
  right:-20px;
  background: linear-gradient(270deg, #030445 45.59%, rgba(3, 4, 69, 0.00) 100%);
}

.extraractor-right .card-logo { border-radius: 14px; text-align:center; margin-bottom:10px;
  border: 1.438px solid #D9D9D9;
  opacity: 0.6;
  padding:0px 10px;
  background: rgba(3, 4, 69, 0.10);
  box-shadow: 0px 2.876px 13.448px 0px #181979;}

  .extraractor-right .card-logo img {
    width: auto;
    height:18px;
}


.extraractor-right .application-slider .card h2 { text-align:center;}
.extraractor-right .data-channel-wrap { width:100%; height:auto; padding:0px 62px; margin-top:90px;}
.extraractor-right .data-channel-wrap h3 {
  color: #B6B6B6;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  position: relative;
  line-height: 24px;
  letter-spacing: -0.64px;
  padding-left: 27px;
  margin-bottom:15px;
}

.extraractor-right .data-channel-wrap h3:after {
    content: '';
    width: 17px;
    height: 17px;
    border-radius: 90px;
    background: #4AFFA8;
    position: absolute;
    left: 0px;
    top: 0px;
    margin-top: 4px;
}

.extraractor-right .data-channel-wrap ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: flex-start;
}
.extraractor-right .data-channel-wrap ul li { display:flex; list-style:none; border-radius: 22px; cursor: pointer; margin-right:9.5px;
  border: 1px solid var(--Final-Blue, #2BBBEF); padding:8px 10px;
  background: rgba(74, 255, 168, 0.00); color: var(--Final-Blue, #2BDAEF);
  font-family: Lexend;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.96px;
  position:relative;
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;}

  .extraractor-right .data-channel-wrap ul li:hover { border-radius: 22px;
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); color:#030445; transition: all 0.2s ease-in-out;}

.extraractor-right .data-channel-wrap ul li:hover svg path { fill: #000;}

.extraractor-right .data-channel-wrap ul li.active { border-radius: 22px;
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); color:#030445;}

.extraractor-right .data-channel-wrap ul li.active svg path { fill: #000;}

.extraractor-right .data-channel-wrap ul li b { margin-right:5px;}

.extraractor-right .train-now-wrap {
  border-radius: 36px;
  border: 1px solid #FFF;
  margin-top: 20px;
  padding: 10px 10px 10px 30px;
  background: rgba(255, 255, 255, 0.00);
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
  display: flex;
  align-items: center;
  gap: 10px; /* spacing between input and button */
}

.extraractor-right .train-now-wrap input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  flex: 1; /* makes input fill remaining space */
  min-width: 0; /* allows shrinking if needed */
}

.extraractor-right .train-now-wrap button {
  border-radius: 30.288px;
  padding: 8px 10px;
  min-width: 134px;
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  border: none;
  border: 1px solid #4AFFA8;
  color: #000;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.extraractor-right .train-now-wrap button:hover {
  background: none;
  border: 1px solid #4AFFA8;
  color: #fff;
  transition: all 0.2s ease-in-out;
}

.extraractor-right .train-now-input {
    width: 100%;
    display: flex;
}


.extraractor-right .train-now-wrap input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#D9D9D9;
}
.extraractor-right .train-now-wrap input::-moz-placeholder { /* Firefox 19+ */
  color:#D9D9D9;
}
.extraractor-right .train-now-wrap input:-ms-input-placeholder { /* IE 10+ */
  color:#D9D9D9;
}
.extraractor-right .train-now-wrap input:-moz-placeholder { /* Firefox 18- */
  color:#D9D9D9;
}

.promt-history-wrap,
.extraractor-right-wrap {
  transition: all 0.3s ease; /* Smooth transition for width, padding, etc. */
}

.extraractor-right .ss-main .ss-content { border-radius:14px;}
.extraractor-right .right-nav-menu {
  width: 22px;
  height: 6px;
  position: absolute;
  right: 31px;
  top: 63px;
}






.width-hide { width:0px; overflow:hidden; padding:0px; transition: all 0.3s ease; opacity:0;}
.dev-full-width { width:100%; transition: all 0.3s ease;}


.dev-full-width .card {
  width: 260px;
}

.dev-full-width .data-channel-wrap ul li { margin-right: 15px;}
.dev-full-width .data-channel-wrap ul {
justify-content: flex-start;
align-items: center;
}








.extraractor-right .ss-arrow span { border: solid #89797D !important;}

.data-channel-wrap ul li .data-tooltip {
  border-radius: 5px;
  border: 4px solid #2BDAEF;
  bottom: 80px;
  font-family: Arial;
  font-size: 13px;
  height: auto;
  line-height: 18px;
  opacity: 0;
  padding: 10px;
  background: #2BDAEF;
  pointer-events: none;
  position: absolute;
  text-align: center;
  width: 200px;
  transition: all 0.2s ease-in-out;
  left: 50%;
  transform: translateX(-50%);
  text-transform: capitalize;
  letter-spacing: 0;
  z-index: 10;
}

.data-channel-wrap ul li .data-tooltip:before,
.data-channel-wrap ul li .data-tooltip:after {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #2BDAEF;
  bottom: -12px;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  width: 0;
}


.data-channel-wrap ul li .data-tooltip:after {
  border-top: 10px solid #2BDAEF;
  bottom:0px;
  margin-left:-10px;
}

.data-channel-wrap ul li:hover .data-tooltip {
  bottom: 47px;
  opacity:1;
  transition: all 0.2s ease-in-out;
}






.padding-hover-remove .extraractor-right .data-channel-wrap {padding: 0px 18px;}
.padding-hover-remove .extraractor-right .card-logo img {
  width: auto;
  height: 14px;
}


.padding-hover-remove .extraractor-right .card h2 { font-size: 14.716px;}

.padding-hover-remove .extraractor-design-update-wrap .search-expand-icon .search-container.expanded .search-input {
  width: 212px;
  padding: 5px 10px;
  opacity: 1;
}





.notification-wrap {
  width: 362px;
  height: auto;
  position: fixed;
  top: 75px;
  right: 20px;
  z-index: 9999;
  display: inline-block;
  transform: translateX(110%); /* Hidden off-screen */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.7s ease, opacity 0.7s ease;
  border-radius: 9px;
}

.notification-wrap.notification-show {
  transform: translateX(0); /* Slide in */
  opacity: 1;
  pointer-events: auto;
}



.notification-wrap .notification__box {
  animation: flyIn 0.3s ease-out;
  border-radius:9px;
border: 1px solid #00E435;
background: var(--Green, #72EE8F);
box-shadow: 0 0.5em 1em hsla(var(--hue), 10%, 10%, 0.1);
  box-shadow: 0 0.5em 1em hsla(var(--hue), 10%, 10%, 0.1);
  transition: background-color var(--transDur), color var(--transDur);
  margin-bottom:20px;
  color:#010029;
  
}

.notification-wrap .notification__content {
  padding: 0.375em 1em;
  width: 100%;
  height: 100%;
  align-items: center;
}

.notification-wrap .notification__icon {
  flex-shrink: 0;
  margin-right: 0.75em;
  width: 2em;
  height: 2em;
}



.notification-wrap .notification__text {
  line-height: 1.333;
}

.notification-wrap .notification__btns {
  border-left: 1px solid #08C552;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 4em;
 transition: box-shadow var(--transDur);
}


.notification__btns .notification__btn {border-bottom: 1px solid #08C552; }

.notification__btns .notification__btn:last-child { border-bottom:0px solid #08C552;}



.notification-wrap .notification__btn:first-of-type {
  border-radius: 0 0.75rem 0 0;
}

.notification-wrap .notification__btn-text {
  display: inline-block;
  pointer-events: none;
}

.notification-wrap .notification__btn + .notification__btn {
 
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.15);
  font-weight: 400;
}

.notification-wrap .notification__btn-text {
  display: inline-block;
  pointer-events: none;
}

.notification-wrap .notification__box, .notification__content, .notification__btns {
  display: flex;
}

.notification__btns button { background:none; border:none;}
.notification-wrap  .notification__text-title { font-weight:600; color:#010029;}


.notification-wrap .notification__text-subtitle { font-size:14px; color:#010029;}

.notification-wrap .notification__btn {
  background-color: transparent;
  box-shadow: 0 0 0 hsla(var(--hue), 10%, 10%, 0.5) inset;
  font-size:14px;
  line-height: 1;
  font-weight:800 !important;
  height: 100%;
  padding: 0 0.5rem;
  transition: background-color var(--transDur), color var(--transDur);
  -webkit-appearance: none;
  appearance: none;
  color:#010029;
  -webkit-tap-highlight-color: transparent;
}


.red-message { border: 2px solid #00A1DB !important; background: #2BBBEF !important;}

.red-message .notification__text-title {color:#fff !important;}

.red-message .notification__text-subtitle { color:#fff !important;}


.red-message .notification__btns { border-left: 1px solid #00A1DB !important;}
.red-message .notification__btn {
  border-bottom: 1px solid #00A1DB !important;
}
.red-message .notification__btn { color:#fff !important;}
.red-message .notification__btn:last-child { border-bottom:none !important;}










.brown-message { background:#fff !important; border: 1px solid #E53430 !important;}
.brown-message .notification__btns { border-left: 1px solid #E53430 !important;}
.brown-message .notification__btn {
  border-bottom: 1px solid #E53430 !important;
}
.brown-message .notification__btn:last-child { border-bottom:none !important;}


.brown-message .notification__text-title {color:#E53430 !important;}

.brown-message .notification__text-subtitle { color:#E53430 !important;}
.brown-message .notification__btn { color:#E53430 !important;}




main {
  transition: opacity 0.3s ease;
}






.topnavnew .language-dropdown {
  position: relative;
  width:140px;
  font-family: Arial, sans-serif;
  user-select: none;
  margin-right:10px;
}

.topnavnew .selected {
  padding: 10px 15px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.topnavnew .selected-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color:#fff;
}
.topnavnew .selected-left .icon {
  font-size: 1.2em;
}
.topnavnew .dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: none;
  background:#fff;
  position: absolute;
  width: 100%;
  z-index: 1000;
  max-height: 200px;
  display:none;
  overflow-y: auto;
  border-radius:0px 0px 10px 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow-x: hidden !important;
}




/* width */
.topnavnew .dropdown-list::-webkit-scrollbar {
  width:2px;
}

/* Track */
.topnavnew .dropdown-list::-webkit-scrollbar-track {
  background:rgba(255, 255, 255, 0)
}

/* Handle */
.topnavnew .dropdown-list::-webkit-scrollbar-thumb {
  background: #4dc4f2;
border-radius:0px;
}

/* Handle on hover */
.topnavnew .dropdown-list::-webkit-scrollbar-thumb:hover {
  background:#4dc4f2;
}


.dropdown-list .selected { border:none; background: #4dc4f2;}
.dropdown-item:hover { background: #4dc4f2 !important;}







.topnavnew .dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-radius:0px;
}
.topnavnew .dropdown-item:hover {
  background: #e0f7fa;
}
.topnavnew .dropdown-item .check {
  color: green;
  display: none;
}
.topnavnew .dropdown-item.selected .check {
  display: inline;
}
.topnavnew .arrow {
  font-size: 0.8em;
}


.nav-right {
  width: 190px;
  display: flex;
}



#manage-videos { width:100%; height:auto;}
#manage-videos .manage-videos-head { border-radius: 28px; padding:20px;
  border: 1px solid #FFF;}

#manage-videos .manage-videos-head .typing-effect {
  color: #FFF;
  font-family: Lexend;
  font-size: 16px;
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 400;
  transition: all 0.3s ease;
  position:relative;
  padding-left: 26px;
  line-height: normal;}


  #manage-videos .manage-videos-head .typing-effect::before {
    width: 17px;
    height: 17px;
    position: absolute;
    content: "";
    left: 0px;
    transition: all 0.3s ease;
    border-radius: 50%;
    top:2px;
    background: #4AFFA8;
  }

  #manage-videos .manage-videos-head ul {
    margin:0px;
    padding: 0px;
    transition: all 0.3s ease;
    
  }
  
  #manage-videos .manage-videos-head ul li { 
    display: inline-flex;  /* Adjusted to flex for proper alignment */
    align-items: center;   /* Center aligns the content */
    list-style: none; 
    transition: all 0.3s ease;
    margin-right: 5px;
    height: auto;  /* Ensures height adjusts to content */
  }
  
  #manage-videos .manage-videos-head ul li a {
    border-radius: 22px; 
    padding: 10px 15px; /* Adjust padding for better spacing */
    color: #2BBBEF;
    font-family: Lexend;
    font-size: 13px;
    transition: all 0.3s ease;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.48px;
    border: 1px solid var(--Final-Blue, #2BBBEF);
    background-color: transparent; /* Ensures transparent background */
   display:inline-block;
  }


  #manage-videos .manage-videos-head ul li a svg { margin-right:5px; transition: all 0.3s ease;}



  
  #manage-videos .manage-videos-head ul li a:hover { 
    background: linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
    color:#030445;
    transition: all 0.3s ease;
    text-decoration:none;
  }


  #manage-videos .manage-videos-head ul li a.active { 
    background: linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
    color:#030445;
    transition: all 0.3s ease;
    text-decoration:none;
  }


  #manage-videos .manage-videos-head ul li a.active svg path { fill:#030445; transition: all 0.3s ease;}
  #manage-videos .manage-videos-head ul li a.active svg circle { stroke:#030445; transition: all 0.3s ease;}





  #manage-videos .manage-videos-head ul li a:hover svg path { fill:#030445; transition: all 0.3s ease;}
  #manage-videos .manage-videos-head ul li a:hover svg circle { stroke:#030445; transition: all 0.3s ease;}

  #manage-videos .manage-videos-head ul li:last-child { float:right; transition: all 0.3s ease;}
  #manage-videos .manage-videos-head ul li:last-child a {
    border-radius: 50px;
    width:40px;
    height:40px;
    padding: 10px 10px;
    transition: all 0.3s ease;
}


#manage-videos .manage-videos-head ul li:last-child:hover svg { margin-right:0px; margin-left:5px; transition: all 0.6s ease;}
#manage-videos .manage-videos-head ul li:last-child:hover a {
  border-radius:22px;
  width:auto;
  height:auto;
  transition: all 0.6s ease;
}

#manage-videos .manage-videos-head ul li:last-child:hover a span {transition: all 0.3s ease; display:inline-block;}
#manage-videos .manage-videos-head ul li:last-child a span { display:none; transition: all 0.3s ease;}

#manage-videos .manage-videos-box { width:100%; height:auto; margin-top:27px;}
#manage-videos .manage-videos-inner-wrap { width:100%; height:100%; border-radius: 19.043px; position:relative; transition: all 0.6s ease;
  border: 0.778px solid #FFF; padding:18px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.00) 1.38%, rgba(74, 255, 168, 0.00) 100%);
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);}

  /* #manage-videos .manage-videos-inner-wrap h2 {
    margin:0px 25px 10px 0px;
    padding:0px; color: #4AFFA8;
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    
    text-transform:capitalize;} */


    #manage-videos .manage-videos-inner-wrap h2 {
  margin: 0px 40px 10px 0px;
  padding: 0px;
  color: #4AFFA8;
  font-family: Lexend;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5; /* Adjust as needed */
  text-transform: capitalize;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* for modern browsers */
  max-height: calc(1.5em * 2); /* 2 lines */
   min-height: 49px;
}


    #manage-videos .manage-videos-inner-wrap p {
      color: #FFF;
      font-family: Lexend;
      font-size: 14px;
      font-style: normal;
      font-weight: 300;
      line-height: normal;
      display:inline-block;
      width:100%;
      text-transform: uppercase;}

      #manage-videos .manage-videos-inner-wrap p b {
        color: #FFF;
font-family: Lexend;
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        float:right;
        line-height: normal;
        letter-spacing: 0.56px;}

        #manage-videos .manage-videos-inner-wrap img {
        width: 100%;
        height: 300px !important;
        border-radius: 11px;
       border: 0.778px solid #FFF;
       box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);
       object-fit: cover;
       object-position: top;
}


        #manage-videos .manage-videos-inner-wrap video {
    height: 300px !important;
    object-fit: cover;
    border-radius: 20px;
    border: 0.778px solid #FFF;
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);
    object-position: top;
}


          .channel-table-newdesign #manage-videos .manage-videos-inner-wrap .progressbaarmain { width:100%; height:auto; margin-top:10px; padding:0px 54px;}
          #manage-videos .manage-videos-inner-wrap .progressbaar { width:100%; height:auto; background:#D9D9D9; border-radius: 3.5px; height:7px;}
          #manage-videos .manage-videos-inner-wrap .progressbaar-fill { border-radius: 3.5px; background: #2BDAEF; height: 100%;}
          #manage-videos .manage-videos-inner-wrap .progressbaartext { width:100%; height:auto; display:inline-block; line-height:10px;}
          #manage-videos .manage-videos-inner-wrap .progressbaartext {
            width: 100%;
            height: auto;
            display: inline-block;
            line-height: 10px;
        }

        #manage-videos .manage-videos-inner-wrap .progressbaartext span {
          float: left;
          color: #FFF;
          font-family: Lexend;
          font-size: 11px;
          font-style: normal;
          font-weight: 300;
          line-height: normal;
      }


      #manage-videos .manage-videos-inner-wrap .progressbaartext b {
        color: #fff;
        font-weight: 300;
        font-size: 18px;
        float:right;
        color: #FFF;
        font-family: Lexend;
        font-size: 11px !important;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
    }

    #manage-videos .progressbaarmain {
      margin-top: 10px;
  }

  #manage-videos .detils-wrap { width:100%; height:auto;}
  #manage-videos .detils-wrap h3 {
    color: #2BDAEF;
    font-family: Lexend;
    font-size: 14px;
    margin-top:15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;}

  #manage-videos .detils-wrap p {
  color: rgba(255, 255, 255, 0.80);
  font-family: Lexend;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: -0.005px;
  text-transform: none;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: calc(16px * 2); /* 2 lines */
  min-height:32px;
}



#manage-videos .view-count-wrap { width:100%; height:auto;}
#manage-videos .view-count-wrap ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  gap: 15px;
}
#manage-videos .view-count-wrap ul li { list-style:none; display:inline-block; border-radius: 16px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%); 
  box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03); padding: 0px 0px 5px 15px; flex: 1;}

  #manage-videos .view-count-wrap ul li b {
    width:100%; display:inline-block;
    color:#fff; color: #FFF;
    text-align:center;
    font-family: Lexend;
    font-size:35px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;}

    #manage-videos .view-count-wrap ul li span { color: #4AFFA8;
      width:100%;
      text-align: center;
      font-family: Lexend;
      font-size:14px;
      font-style: normal;
      font-weight: 500;
      display: inline-block;
      line-height: normal;}




     
      #manage-videos .custom-checkbox {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 20px;
        top:23px;
    }
      
      #manage-videos .custom-checkbox input {
        display: none;
      }
      
      #manage-videos .custom-checkbox label {
        display: block;
        cursor: pointer;
        position: relative;
        width: 100%;
        height: 100%;
      }
      
      #manage-videos .custom-checkbox .outer-ring {
        width:20px;
        height:20px;
        border-radius: 50%;
        border:1px solid var(--Final-Gradient, #2BDAEF);
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        transition: opacity 0.3s;
      }
      
      #manage-videos .custom-checkbox .circle {
        width: 12px;
        height: 12px;
        background-color: #4AFFA8;
        border-radius: 50%;
        position: absolute;
        top:0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        transition: transform 0.3s, opacity 0.3s;
        transform-origin: center;
        transform: scale(0);
        opacity: 0;
    }
      
      #manage-videos .custom-checkbox input:checked + label .circle {
        transform: scale(1);
        opacity: 1;
      }
      
      #manage-videos .custom-checkbox input:checked + label .outer-ring {
        
      }

#manage-videos .box-active {transition: all 0.6s ease; background: linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%);}
      
#manage-videos .manage-videos-pagination {border-radius: 7px; text-align:right; padding:10px;
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

  #manage-videos .manage-videos-pagination h4 { 
  margin:0px;
  padding:0px; color: #FFF;
display:inline-block;
    font-family: Lexend;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.12px;
    text-transform: capitalize;}

    #manage-videos .manage-videos-pagination input {
      width: 47px;
      height: 26px;
      background:none;
      text-align:center;
      color:#fff;
      outline:0px;
      margin:0px 5px;
      flex-shrink: 0; border-radius: 4px;
      border: 1px solid #FFF;}

      #manage-videos .manage-videos-pagination p {
        color: #FFF;
        font-family: Lexend;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin:0px;
        letter-spacing: 0.12px;
        text-transform: capitalize;
        width: auto;
        display: inline-block;
    }

#manage-videos .manage-videos-pagination p b { font-weight:normal;}







.navbar-vertical-content { height: calc(100vh - var(--phoenix-navbar-top-height) - 0rem) !important; }

.content {
  margin: auto;
  width: 100%;
  padding-right: 62px;
  padding-left:87px;
}

.content .container-fluid { padding-right:0px; padding-left:0px;}

.nav-inner-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

/* .navbar-vertical {  backdrop-filter: blur(6px);} */

.navbar-vertical { backdrop-filter:blur(6px); -webkit-backdrop-filter: blur(6px) !important; }




/* End Comment-Extraractor-new-design */




.navbar-vertical.navbar-expand-lg .navbar-vertical-footer

 {
position:absolute;
border-radius:20px 20px 0px 0px;
}


.max-h-617 {
    max-height: 617px;
}


.collapsed-mid {
    padding-left: 276px;
    transition: all 0.3s ease-out;
    width: 100%;
    padding-right: 20px;
}

.content { transition: all 0.3s ease-out;}

.collapsed-mid .extraractor-right .data-channel-wrap {padding: 0px 20px;}

#close-section { margin-bottom:10px;}

.chatmain h2 {
    position: absolute;
    top: -18px;
    font-size: 10px;
    left: 0px;
    color: #535050;
}


.hover-none:hover { background:none !important;}


.extraractor-right .ss-main .ss-multi-selected .ss-values {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    
}

.extraractor-right .ss-main .ss-multi-selected {  white-space: nowrap;}

.extraractor-right .ss-values { overflow-y:hidden; overflow-x:auto;}



/* width */
.extraractor-right .ss-values::-webkit-scrollbar {
  width:2px;
  height:3px;
}

/* Track */
.extraractor-right .ss-values::-webkit-scrollbar-track {
  background:rgba(255, 255, 255, 0)
}

/* Handle */
.extraractor-right .ss-values::-webkit-scrollbar-thumb {
  background: #030445;
border-radius:0px;
}

/* Handle on hover */
.extraractor-right .ss-values::-webkit-scrollbar-thumb:hover {
  background:#030445;
}


.extraractor-right .ss-multi-selected:hover .ss-plus { background:#fff !important;}
.extraractor-right .ss-multi-selected:hover .ss-plus:after{ background:#fff !important;}


.extraractor-right .ss-open-below .ss-plus { background:#fff !important;}
.extraractor-right .ss-open-below .ss-plus:after{ background:#fff !important;}


.extraractor-right .ss-single-selected:hover .arrow-down { border: solid #fff !important; border-width: 0 2px 2px 0 !important;}
.extraractor-right .ss-main .ss-single-selected .ss-arrow span.arrow-up { border: solid #fff !important; border-width: 0 2px 2px 0 !important; }

.extraractor-right .ss-main .ss-single-selected .placeholder .ss-disabled { color: #89797D;}
.extraractor-right .ss-single-selected:hover .ss-disabled { color:#fff !important;}



.extraractor-right .train-now-wrap input:-webkit-autofill,
.extraractor-right .train-now-wrap input:-webkit-autofill:hover,
.extraractor-right .train-now-wrap input:-webkit-autofill:focus,
.extraractor-right .train-now-wrap input:-webkit-autofill:active {
    background: none !important; /* Set your desired background color */
    color: #fff !important; /* Set your desired text color */
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 0px #e0f7fa inset; /* Ensure the background color fills the input */
    transition: background-color 5000s ease-in-out 0s;
}


.content-edit input {
    width: 100% !important;
    border-radius: 0px;
    text-decoration: none;
    outline: none;
    border: 0px solid var(--Final-Blue, #2BBBEF);
    background: none;
    color: #fff;
    font-size: 16px !important;
    padding: 0px !important;
    transition: all 0.4s ease;
    margin-right: 0px !important;
}

#video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}




.data-recharge-wrap { width:100%; height:auto;}
.data-recharge-wrap .total-data-main { border-radius: 8px; display:flex; padding:12px;     align-items: center; margin-bottom:5px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);}

.data-recharge-wrap .total-data-main .total-data-leftmain { border-radius: 8px; width:65px; padding:0px 0px 5px 0px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);}

.total-data-leftmain b {
    display: inline-block;
    float: left;
    width: 100%;
    line-height: 19px;
}

.data-recharge-wrap .total-data-main .total-data-leftmain b {
color: #FFF;
text-align: right;
font-family: Lexend;
font-size:19px;
font-style: normal;
font-weight: 500;
text-align:center;
width:100%;
line-height:23px;
display:inline-block;
}

.data-recharge-wrap .total-data-main .total-data-leftmain p {
color: #FFF;
text-align: right;
font-family: Lexend;
font-size:9px;
font-style: normal;
font-weight: 400;
text-align:center;
margin-bottom:0px;
line-height: normal;}


.data-recharge-wrap .total-data-main .total-data-rightmain { width: calc(100% - 65px); height:auto; text-align:left; padding-left: 15px;} 
.data-recharge-wrap .total-data-main .total-data-rightmain h2 {
    font-family: Lexend;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 9px;
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.56px;
    line-height: 18px;
}

.data-recharge-wrap .total-data-main .total-data-rightmain .progress { width:100%; height: 6px; flex-shrink:0; border-radius:50px; background:#D9D9D9; margin-bottom:7px;}
.data-recharge-wrap .total-data-main .total-data-rightmain .progress .progress-fill { background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%)); height:100%;}
.data-recharge-wrap .total-data-main .total-data-rightmain p {
color: #FFF;
font-family: Lexend;
font-size:11px;
font-style: normal;
font-weight: 400;
margin: 5px 0px 0px 0px;
line-height: normal;}

.data-recharge-wrap .total-data-main .total-data-rightmain p b { font-weight:normal;}

.data-recharge-wrap .total-data-main .total-data-rightmain .progress-red { background:#EE3A3A !important;}


.data-recharge-wrap .plan-renewal-plan { width: 100%; height: auto; display: flex; gap: 4px; box-sizing: border-box; margin-top:13px;}
.data-recharge-wrap .plan-renewal-plan .plan-renewal-inner { 
    border-radius: 8px;
    display: flex;
    padding: 12px;
    flex: 1;
    box-sizing: border-box;
    align-items: center;
    margin-bottom: 5px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
   box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03); }

.data-recharge-wrap .plan-renewal-inner-left { width:28px; height:auto;}
.data-recharge-wrap .plan-renewal-inner-right { height:auto; width: calc(100% - 28px); padding-left: 12px;}
.data-recharge-wrap .plan-renewal-inner-right h3 {
font-family: Lexend;
font-size:14px;
font-style: normal;
font-weight:600;
text-align:left;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: normal;
margin:0px;
letter-spacing: -0.56px;}

.data-recharge-wrap .plan-renewal-inner-right p {
color: #FFF;
font-family: Lexend;
font-size: 14px;
text-align:left;
font-style: normal;
font-weight:600;
margin:0px;
line-height: normal;}





.data-recharge-wrap .swipe-button {
  position: relative;
  width:100%;
  height:50px;
  border-radius: 50px;
  border:1px solid #4affa8;
  overflow: hidden;
  font-family: sans-serif;
  user-select: none;
  margin-top:20px;
  color: var(--Final-Green, #4AFFA8);
font-family: Lexend;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.56px;
}

.data-recharge-wrap .swipe-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(135deg, #2bdaef, #4affa8);
 border-radius: 50px 10px 10px 50px;
  transition: width 0.3s ease;
  z-index: 0;
}

.data-recharge-wrap .swipe-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #4affa8;
  font-size: 18px;
  font-weight: 600;
  z-index: 1;
  pointer-events: none;
}

.data-recharge-wrap .swipe-handle {
  position: absolute;
  top:-1px;
  left:-1px;
  width: 52px;
  height:50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2bdaef, #4affa8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: left 0.2s ease;
}

.data-recharge-wrap .arrow {
  font-size: 24px;
  color: #000;
  font-weight: bold;
}


.data-recharge-wrap h4 {
color: #FFF;
font-family: Lexend;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align:left;
letter-spacing: -0.72px;
margin-top:30px;
margin-bottom:15px;
text-transform: capitalize;}

.data-recharge-wrap .graf-main {
    width: 100%;
    height: auto;
    display: flex
;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 12px;
    flex-direction: column;
}
.data-recharge-wrap .graf-inner { flex:1; border-radius: 8px; width:100%;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%);
box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03); padding:10px; border-radius:8px;}



.data-recharge-wrap .video-wrapper {
      position: relative;
      max-width: 960px;
      margin:0px auto;
      border-radius: 10px;
border:2px solid var(--Final-Gradient, #2BDAEF);
      
      overflow: hidden;
      background: #000c2d;
    }

.data-recharge-wrap video {
    width: 100%;
    display: block;
    height:auto;
}

    .data-recharge-wrap .overlay-text {
      position: absolute;
      top: 20px;
      left: 40px;
      z-index: 2;
      color: #00e0ff;
    }

    .data-recharge-wrap .overlay-text h1 {
      font-size: 3rem;
      color: #23f1bd;
      margin: 0;
    }

    .data-recharge-wrap .overlay-text h2 {
      font-size: 2rem;
      margin: 10px 0 30px;
    }

    .data-recharge-wrap .card-container {
      display: flex;
      gap: 20px;
      margin-top: 10px;
    }

    .data-recharge-wrap .card {
      background: rgba(0, 82, 122, 0.6);
      padding: 20px;
      border-radius: 12px;
      width: 160px;
      color: #fff;
      font-weight: bold;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px) !important;
      border: 1px solid #1cc5c5;
      box-shadow: 0 2px 8px rgba(0,255,255,0.1);
      font-size: 1rem;
      line-height: 1.4;
    }

    .data-recharge-wrap .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #1bcfff;
      padding: 12px 5px;
      position:relative;
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      font-size: 16px;
      z-index: 3;
      margin-bottom:0px;
      border-radius:0px;
    }

    .data-recharge-wrap .controls button {
    background: none;
    border: none;
    /* font-size: 25px; */
    cursor: pointer;
    color: #003f61;
    padding: 0px 2px;
}

.data-recharge-wrap #progressBar {
    flex-grow: 1;
    height: 10px;
    cursor: pointer;
    margin-top: 5px;
}

.data-recharge-wrap #timestamp {
    font-family: monospace;
    font-weight: bold;
    color: #FFF;
    font-family: Lexend;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.199px;
    padding-top: 6px;
}


.data-recharge-wrap .video-progress {
  width: 100%;
  height: 40px; /* Adjust to your needs */
  background: #23B5E2; /* Match your background */
  display: flex;
  align-items: center;
  justify-content: center;
}

.data-recharge-wrap .progress-track {
  width: 90%;
  height: 20px;
  border: 3px solid white;
  border-radius: 20px;
  position: relative;
  background: transparent;
}

.data-recharge-wrap .progress-thumb {
  width: 32px;
  height: 32px;
  background: #23B5E2; /* Match background */
  border: 4px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: left 0.1s ease;
}


.data-recharge-wrap #progressBar {
    -webkit-appearance: none;
    width: 100%;
    height: 11px;
    background: none;
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid #fff;
}

.data-recharge-wrap #progressBar:hover {
  background:none;
}

/* Webkit (Chrome, Safari) */
.data-recharge-wrap #progressBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:#fff; /* Thumb color */
  border:1px solid #fff;
  margin-top:0px; /* align center */
  transition: background 0.2s;
}

.data-recharge-wrap #progressBar::-webkit-slider-thumb:hover {
  background:#fff;
}

/* Firefox */
.data-recharge-wrap #progressBar::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:red;
  border: none;
  transition: background 0.2s;
}

.data-recharge-wrap #progressBar::-moz-range-thumb:hover {
  background: #1fa6d5;
}

/* Firefox track */
.data-recharge-wrap #progressBar::-moz-range-track {
  background:none;
  border-radius: 4.694px;
border: 0.704px solid #FFF;
  height: 6px;
  border-radius: 3px;
}

/* IE */
.data-recharge-wrap #progressBar::-ms-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2BBBEF;
  border: none;
  border-radius: 4.694px;
border: 0.704px solid #FFF;
}

.data-recharge-wrap #progressBar::-ms-track {
  background: transparent;
  border-color: transparent;
  color: transparent;
  height: 6px;
  border-radius: 3px;
}



.data-recharge-wrap .left-share-wrap { width:100%; height:auto; display:flex; gap:10px; margin-top:16px;}
.data-recharge-wrap .left-share-wrap button {
    background: none;
    border: 2px solid #4AFFA8;
    border-radius: 50px;
    flex: 1;
    position:relative;
    transition: 0.2s ease-in-out;
    padding: 3px 0px;
}

.data-recharge-wrap .left-share-wrap button .hover-text
 {
   opacity:0;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    font-family: Lexend;
    font-weight:600;
    position: absolute;
    font-size:13px;
   align-items: flex-end;
   top:0px;
   height:100%;
}

.data-recharge-wrap .left-share-wrap button:hover { background:#4AFFA8; transition: 0.2s ease-in-out;}
.data-recharge-wrap .left-share-wrap button:hover svg path { fill:#030445; transition: 0.2s ease-in-out;}

.data-recharge-wrap .left-share-wrap button:hover .hover-text {
    opacity: 1;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    font-family: Lexend;
    font-weight:600;
    font-size:13px;
   justify-content: center;
}

.data-recharge-wrap .left-share-wrap button:hover svg { opacity:0;}


.extraractor-design-update-wrap .data-recharge-wrap {
    max-height: 600px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right:7px;
}


/* width */
.extraractor-design-update-wrap .data-recharge-wrap::-webkit-scrollbar {
  width:2px;
}

/* Track */
.extraractor-design-update-wrap .data-recharge-wrap::-webkit-scrollbar-track {
background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
}

/* Handle */
.extraractor-design-update-wrap .data-recharge-wrap::-webkit-scrollbar-thumb {
  background: #fff;
border-radius:10px;
}

/* Handle on hover */
.extraractor-design-update-wrap .data-recharge-wrap::-webkit-scrollbar-thumb:hover {
  background: #fff;
}




.extraractor-design-update-wrap .launch-Pad {
   height:869px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right:7px;
}


/* width */
.extraractor-design-update-wrap .launch-Pad::-webkit-scrollbar {
  width:2px;
}

/* Track */
.extraractor-design-update-wrap .launch-Pad::-webkit-scrollbar-track {
background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
}

/* Handle */
.extraractor-design-update-wrap .launch-Pad::-webkit-scrollbar-thumb {
  background: #fff;
border-radius:10px;
}

/* Handle on hover */
.extraractor-design-update-wrap .launch-Pad::-webkit-scrollbar-thumb:hover {
  background: #fff;
}






















.popup-new-design .modal-content {
    background:#030445;
}

.popup-new-design .modal-header { border-bottom:1px solid #152058;}
.popup-new-design .modal-footer { border-top:1px solid #152058;}

.popup-new-design .modal-header button { background:none; border:none; color:#fff; font-size: 23px;}
.popup-new-design .modal-header h5 { color:#fff;}

.popup-new-design .modal-body p { color:#fff; }

.popup-new-design .modal-footer button { border-radius: 30.288px; color:#030445;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));}

.popup-new-design .modal-footer button:hover { background:#fff; color:#030445;}

.popup-new-design .modal-footer button.red { background:none; color:#fff; padding:0px;}
.popup-new-design .modal-footer button.red:hover { background:none; color:#030445;}



.modal .modal-dialog{
    top: 50%;
    transform: translateY(-50%) !important;
}

.content-edit {
    padding: 0px !important;
}


.edit-active { border-radius: 12px;
    text-decoration: none;
    border: 0px solid var(--Final-Blue, #2BBBEF) !important;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%);
    padding: 8px 10px !important;
    color: #B6B6B6;
    transition: all 0.4s ease;}

.edit-active:hover {color: #B6B6B6 !important; padding: 8px 10px !important; background: linear-gradient(75deg, rgba(43, 218, 239, 0.15) 1.38%, rgba(74, 255, 168, 0.15) 100%) !important; }
    
.edit-active .content-dropdown-toggle { display:none !important;}



.ai-new-design-wrap { width:100%; height:auto;}
.ai-new-design-wrap .ai-left-wrap {
    width: 100%;
    height:auto;
 
    }

    .ai-new-design-wrap .ai-right-wrap { width: 100%;
    height: 100%;
    border-radius: 40px;
    padding: 50px 0px;
    border: 1px solid #FFF;
    position: relative;
    padding:20px 50px;
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
  }

.ai-new-design-wrap .ai-top-nav { width:100%; height:auto; text-align:center;}
.ai-new-design-wrap .ai-top-nav ul {
    margin: 0px;
    padding: 0px;
    border-radius: 28px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.30) 1.38%, rgba(74, 255, 168, 0.30) 100%);
    display: inline-block;
    padding: 10px;
}
.ai-new-design-wrap .ai-top-nav ul li { list-style:none; border-radius: 32.286px; cursor: pointer;
border: 1px solid rgba(43, 187, 239, 0.40); padding: 5px 10px 5px 5px; margin-right:8px;
box-shadow: 0px 0px 26.783px 0px rgba(0, 0, 0, 0.23); float: left; font-family: Lexend;
font-size: 14px;}

.ai-new-design-wrap .ai-top-nav ul li:last-child { margin-right:0px; }

.ai-new-design-wrap .ai-top-nav ul li i {
    background: #2BBBEF;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    /* display: inline-block; */
    border-radius: 15px;
    float: left;
    padding-top:3px;
}


.ai-new-design-wrap .ai-top-nav ul li span {
    /* display: inline-block; */
    color:#2BBBEF;
    line-height: 29px;
    float: left;
}

.ai-new-design-wrap .ai-top-nav ul li:hover { background:#030445;}
.ai-new-design-wrap .ai-top-nav ul li:hover span { color:#fff;}

.ai-new-design-wrap .ai-top-nav ul li.active { background:#030445; color:#fff;}
.ai-new-design-wrap .ai-top-nav ul li.active span { color:#fff; }
.ai-new-design-wrap .ai-firstlock-wrap { width:100%; height:auto; margin-top:150px;}
.ai-new-design-wrap .ai-firstlock-wrap h2 {
font-family: Lexend;
line-height:51px !important;
font-style: normal;
font-weight: 400;
line-height: normal;
color:#2BDAEF;
font-family: Lexend;
font-size:49px;
font-style: normal;
font-weight: 500;
letter-spacing: -3.84px;}

.ai-new-design-wrap .ai-firstlock-wrap h2 span {
font-family: Lexend;
font-size:37px;
font-style: normal;
font-weight: 500;
line-height: normal;
-webkit-text-fill-color: unset;
color:#2BBBEF !important;
letter-spacing: -2.76px;}

.ai-new-design-wrap .ai-firstlock-wrap .onload-card { width:100%; height:auto; margin:40px 0px;}
.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul { margin:0px; padding:0px; display:flex; gap:10px;}
.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul li {
display:inline-block; color: #FFF;
font-family: Lexend;
font-size: 22.716px;
font-style: normal;
font-weight: 500;
position:relative;
line-height: normal;
letter-spacing: -0.909px;}

.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul li { border-radius: 16px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%); color:#fff;
box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03); padding:15px;}

.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul li h3 {
color: #FFF;
font-family: Lexend;
font-size:19px;
font-style: normal;
margin-bottom:25px;
font-weight: 500;
line-height: normal;
letter-spacing: -0.909px; }

.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul li p {
color: #FFF;
font-family: Lexend;
font-size:11px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin:0px;
letter-spacing: -0.379px;}

.ai-new-design-wrap .ai-firstlock-wrap .onload-card .card-arrow {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition:0.2s ease-in-out;
}


.ai-new-design-wrap .ai-firstlock-wrap .onload-card ul li:hover .card-arrow { right: 5px; transition:0.2s ease-in-out;
    top: 5px;}

.ai-new-design-wrap .ai-search-wrap {
    position: sticky;
    bottom: 0px;
    z-index: 10;
    width: 100%;
    height: auto;
    margin-top:0px;
    background: linear-gradient(358deg, rgba(3, 11, 69, 0.9892550770308123) 90%, rgba(3, 11, 69, 0) 100%);
    padding-bottom:0px;
}

.ai-new-design-wrap .ai-search-fild-wrap {
border-radius: 30.722px;
border: 0.853px solid #FFF;
background: #030445;
padding:10px 20px;
align-items: flex-end;
display:flex;
align-items: center;
justify-content: space-between;
box-shadow: 8.296px 8.296px 3.318px 0px rgba(0, 0, 0, 0.10);}

.ai-new-design-wrap .ai-search-fild-wrap textarea { border:none; background:none;}
.ai-new-design-wrap .ai-input-wrap .autosize {
color: rgba(255, 255, 255, 0.50) !important;
font-family: Lexend;
font-size: 16.155px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.646px;}


.ai-new-design-wrap .ai-button-wrap ul { margin:0px; padding:0px; display:inline-block;}
.ai-new-design-wrap .ai-button-wrap li { position:relative; text-align:center; width:29px; height:29px; border-radius:50px; border:1px solid #2BDAEF; border-radius:50%; display:inline-block; margin-left:5px; cursor: pointer;}
.ai-new-design-wrap .ai-button-wrap li:hover { background:#2BDAEF; transition:0.2s ease-in-out;}
.ai-new-design-wrap .ai-button-wrap li:hover svg path { fill:#fff;}
.ai-new-design-wrap .ai-button-wrap li:nth-child(3n) { border:1px solid #4AFFA8;}
.ai-new-design-wrap .ai-button-wrap li:nth-child(3n):hover {background: #4AFFA8; transition:0.2s ease-in-out;}

.ai-new-design-wrap .ai-button-wrap button { border-radius: 25.847px; color: var(--blanco, #FFF);
font-family: Lexend;
font-size: 18px;
font-style: normal;
padding:10px 15px;
display:inline-block;
font-weight: 500;
line-height: normal;
letter-spacing: -0.72px;
margin-left:5px;
border: 1px solid var(--Final-Gradient, #2BDAEF);
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%); transition:0.2s ease-in-out;}


.ai-new-design-wrap .ai-button-wrap button:hover { background:#2BDAEF; color:#030445; transition:0.2s ease-in-out;}

.ai-new-design-wrap .ai-button-wrap button:hover svg path { fill:#030445; transition:0.2s ease-in-out;}




.chat-dropdown-nav {
    position: absolute;
    width: 160px;
    bottom: 14px;
    left:-68px;
    display: none;
    padding-bottom: 19px;
}

.chat-dropdown-inner-wrap { background: #030445; border-radius: 17px;
    padding:10px;
    border: 0.853px solid var(--Final-Green, #4AFFA8);}

.chat-dropdown-nav a {
color: #F5F5F5;
font-family: Lexend;
font-size:14px;
font-style: normal;
text-align:left;
font-weight: 300;
width: 100%;
padding:5px 0px;
display: inline-block;
z-index:9;
line-height: 151%; /* 24.16px */
letter-spacing: -0.008px;}

.chat-dropdown-nav a b {
    display: inline-block;
    width: 25px;
    text-align: center;
    float:left;
}

.chat-dropdown-nav a:hover { text-decoration:none;}

#questionInput div a { color:#2BBBEF; cursor:pointer;}

.ai-autosuggestion { width:100%; height:auto;}

.ai-autosuggestion ul {
    margin: 15px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Enables wrapping */
    gap: 10px;
    width: 100%;
}

.ai-autosuggestion ul li {
    flex: 1 1 calc((100% - 20px) / 3); /* 3 items per row, 2 gaps of 10px */
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%);
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
    color: rgba(255, 255, 255, 0.60);
    font-family: Lexend, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.84px;
    padding: 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}



.current-agent-main { width:100%; height:auto;}
.current-agent-main .agent-title-wrap {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}
.current-agent-main .agent-title-wrap .agent-title-left { width:auto; display:inline-block; text-align:left;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
font-family: Lexend;
font-size:27px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.8px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

.current-agent-main .agent-title-wrap .agent-title-right { border-radius: 9px; padding:8px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);}

.current-agent-main .agent-title-right span {
color: var(--blanco, #FFF);
font-family: Lexend;
font-size:27px;
font-style: normal;
font-weight: 500;
float:right;
line-height:23px !important;
line-height: normal;
letter-spacing: -1.2px;}

.current-agent-main .agent-title-right p { color: #FFF;
font-family: Inter;
font-size:14px;
font-style: normal;
font-weight: 400;
margin-top:7px;
line-height: normal;
margin-bottom:0px;
letter-spacing: -0.36px;}


.current-agent-main .agentprocerer-wrap { width:100%; height:8px; border-radius: 12px; display:inline-block; overflow: hidden; margin-top:30px;}
.current-agent-main .agentprocerer-wrap div {
    display: inline-block;
    float: left;
}

.current-agent-main .agentprocerer-content-wrap { width:100%; height:auto;}
.current-agent-main .agentprocerer-content-wrap .agentprocerer-content-row {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}


.agentprocerer-wrap {
    height: 10px; /* Adjust as needed */
    display: flex;
    width: 100%;
    overflow: visible;
}

.agentprocerer-container {
    overflow: visible;
}
.agentprocerer-content-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    margin:10px 0px;
}

.agentprocerer-content-left,
.agentprocerer-content-right {
    display: flex;
    align-items: center;
    gap: 10px; /* optional: spacing between items */
}

.agentprocerer-content-text,
.agentprocerer-content-percentage {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
}

.agentprocerer-content-right-icon { cursor: pointer;}

.audience-insights-wrap { width:100%; height:auto; margin-top: 40px;}
.audience-insights-wrap h3 {

 width:auto; display:inline-block;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
font-family: Lexend;
font-size:27px;
font-style: normal;
font-weight: 500;
line-height: normal;
margin-bottom:10px;
letter-spacing: -0.8px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}


.popup-new-design .modal-content .modal-body p { font-size:17px;}
.popup-new-design h5 { font-size:22px;}

.popup-new-design .modal-footer { justify-content: flex-start;}

.ai-chat-wrap-main {
   width: 100%;
    height: auto;
    margin-top: 80px;
}







    /* Apply Lexend to child elements added by formatQuestion */
    .ai-chat-wrap-main .question-wrap .ques .ques-text p,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h1,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h2,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h3,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h4,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h5,
    .ai-chat-wrap-main .question-wrap .ques .ques-text h6,
    .ai-chat-wrap-main .question-wrap .ques .ques-text pre,
    .ai-chat-wrap-main .question-wrap .ques .ques-text span {
        font-family: Lexend;
        color: #FFF;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.48px;
    }

    /* Override default monospace font for pre */
    .ai-chat-wrap-main .question-wrap .ques .ques-text pre {
        white-space: pre-wrap;
        overflow-x: auto;
    }



.ai-chat-wrap-main .question-wrap { width:100%; height:auto; display:flex;}
.ai-chat-wrap-main .question-wrap .use-pic { width:20px; height:20px; margin-right:11px;}
.ai-chat-wrap-main .question-wrap .use-pic img { width:20px; height:20px; border-radius:50%;}
.ai-chat-wrap-main .question-wrap .ques .user-title {font-family: Lexend;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.54px;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}

.ai-chat-wrap-main .question-wrap .ques .ques-text {
color: #FFF;
margin-top:3px;
font-family: Lexend;
font-size: 16px;
font-style: normal;
font-weight:400;
line-height: normal;
letter-spacing: -0.48px;}

.ai-chat-wrap-main .answer-wrap{
    width: 100%;
    height: auto;
    margin-top: 30px;
    display:flex;
     margin-bottom: 30px;
}

.ai-chat-wrap-main .answer-wrap .answer .user-title { font-family: Lexend;
font-size: 18px;
font-style: normal;
font-weight: 600;
margin-bottom:5px;
line-height: normal;
letter-spacing: -0.54px;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
-webkit-background-clip: text;
text-align:left;
-webkit-text-fill-color: transparent;}
.ai-chat-wrap-main .answer-wrap .answer-user-pic { width:20px; height:20px; margin-right:11px;}
.ai-chat-wrap-main .answer-wrap .answer .answer-user-pic img { width:20px; height:20px; border-radius:50%;}
    .ai-chat-wrap-main .answer-wrap .answer .answer-text {
        color: #FFF;
        width: 100%;
        height: auto;
    }
.ai-chat-wrap-main .answer-wrap .answer .answer-text p { color: #FFF;
font-family: Lexend;
font-size: 15px;
font-style: normal;
font-weight: 400;
margin-bottom:15px;
line-height: normal;
letter-spacing: -0.48px;}

.ai-chat-wrap-main .answer-wrap .answer .answer-text h2 {
margin:0px; padding:0px; color: #FFF;
font-family: Lexend;
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom:5px;
letter-spacing: -0.48px;}

.ai-chat-wrap-main .answer-wrap .answer .answer-text ul { margin:0px; padding:0px; padding-left:14px;}

.ai-chat-wrap-main .answer-wrap .answer .answer-text ul li {
margin:0px; padding:0px; color: #FFF;
font-family: Lexend;
font-size: 15px;
font-style: normal;
font-weight: 400;
margin-bottom:5px;
line-height: normal;
letter-spacing: -0.48px;}


.chart-wrap .owl-dot span {
    background:#2BBBEF;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin: 3px;
}

.chart-wrap .owl-dots { text-align:center; margin-top:5px;}
.chart-wrap .active span { background:#4AFFA8 !important;}


.select-data-sources-wrap { width:100%; height:auto; margin-top:15px; margin-bottom:40px;}
.select-data-sources-wrap h2 {
    width:100%;
    display: inline-block;
    text-align: left;
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    background-clip: text;
    font-family: Lexend;
    font-size: 27px;
    text-align:left;
    font-style: normal;
    font-weight: 500;
    margin-bottom:10px;
    line-height: normal;
    letter-spacing: -0.8px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}


.select-data-sources-wrap .social-select-data {
width:100%;
padding:20px;
border-radius: 12px;
display:flex;
border: 1.5px solid rgba(43, 187, 239, 0.40);}


.social-icon-wrap {
  width: 50px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  direction: rtl; /* Puts scrollbar on the left */
  padding-left:55px;
  
}

.social-icon-wrap a.active svg {
  background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
  border-radius: 10px; /* So the gradient has rounded edges */
       /* Ensure background is visible */
}

/* Change path (icon) color on active */
.social-icon-wrap a.active svg path {
  fill: #000; /* Set desired icon color */
}

/* Optional: Default icon color for non-active */
.social-icon-wrap a:not(.active) svg path {
  fill: #2BBBEF;
}




/* Align inner content properly */
.social-icon-wrap > * {
  direction: ltr; /* Resets content direction */
}

/* For WebKit (Chrome, Safari, Edge) */

/* Scrollbar width */
.social-icon-wrap::-webkit-scrollbar {
  width:2px;
  border-radius:15px;
}

/* Scrollbar track */
.social-icon-wrap::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
  border-radius:15px;
}

/* Scrollbar thumb */
.social-icon-wrap::-webkit-scrollbar-thumb {
  background:#fff;
  border-radius:15px;
}

/* Scrollbar thumb hover */
.social-icon-wrap::-webkit-scrollbar-thumb:hover {
  background:#fff;
  border-radius:15px;
}







.social-icon-wrap a {
    display: inline-block;
    margin-bottom: 10px;
}

.social-icon-wrap-channel { width:100%; height: 200px;
  overflow-y: scroll;
  padding-right:13px;
  overflow-x: hidden;}


  /* Scrollbar width */
.social-icon-wrap-channel::-webkit-scrollbar {
  width:2px;
  border-radius:15px;
}

/* Scrollbar track */
.social-icon-wrap-channel::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
  border-radius:15px;
}

/* Scrollbar thumb */
.social-icon-wrap-channel::-webkit-scrollbar-thumb {
  background:#fff;
  border-radius:15px;
}

/* Scrollbar thumb hover */
.social-icon-wrap-channel::-webkit-scrollbar-thumb:hover {
  background:#fff;
  border-radius:15px;
}




.social-icon-wrap-channel {
    margin-left: 15px;
    display: flex; /* Use flex to stack children vertically */
    flex-direction: column; /* Stack items vertically */
    width: 100%; /* Ensure it takes full width of its parent */
    max-height: 300px; /* Limit height with scroll if needed */
    overflow-y: auto; /* Enable scrolling for overflow */
    box-sizing: border-box; /* Include padding and border in width */
}

    .social-icon-wrap-channel .channel-list {
        border-radius: 12px;
        width: 100%;
        padding: 5px 10px;
        line-height: 24px;
        margin-bottom: 12px;
        border: 1px solid var(--Final-Blue, #2BBBEF);
        background: rgba(74, 255, 168, 0.00);
        position: relative;
       
    }

        .social-icon-wrap-channel .channel-list.active {
            border-radius: 12px;
            width: 100%;
            padding: 5px 10px;
            line-height: 24px;
            margin-bottom: 12px;
            color: #030445;
            background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        }

        .social-icon-wrap-channel .channel-list p {
            text-align: left;
            margin: 0px;
            font-size: 15px;
            line-height: 22px;
         }

.social-icon-wrap-channel .channel-list b {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size:14px;
    cursor: pointer;
}


.ai-scroll {
    display: inline-block;
    overflow-x: hidden;
    overflow-y: auto;
    height:820px;
}


  /* Scrollbar width */
.ai-scroll::-webkit-scrollbar {
  width:0px;
  border-radius:15px;
}

/* Scrollbar track */
.ai-scroll::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
  border-radius:15px;
}

/* Scrollbar thumb */
.ai-scroll::-webkit-scrollbar-thumb {
  background:#fff;
  border-radius:15px;
}

/* Scrollbar thumb hover */
.ai-scroll::-webkit-scrollbar-thumb:hover {
  background:#fff;
  border-radius:15px;
}



.ai-search-fild-wrap .autosize {width: 440px; }

.winicon {
    margin-right: 5px;
}

.new-chat-icon { cursor: pointer; margin-left:0px;}

.expanded .search-btn svg path { fill:#fff;}

.search-expand-icon { margin-right:5px;}





.promt-gallery {
    width: 345px;
    height: 100%;
    position: fixed;
    right: -360px;
    border-radius: 0px;
    border-left: 1px solid rgba(255, 255, 255, 0.50);
    top: 0px;
    z-index: 9999999;
    background: #0E335F;
    padding: 10px 15px;
    overflow: scroll;
    transition: all 0.4s ease-out;
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.10);
}

.promt-show {right:0; transition: all 0.4s ease-out; }




.promt-gallery ul {
    margin: 0px;
    padding: 0px;
    
}

/* Scrollbar width */
.promt-gallery::-webkit-scrollbar {
  width:2px;
  height:4px;
  border-radius:15px;
}

/* Scrollbar track */
.promt-gallery::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
  border-radius:15px;
}

/* Scrollbar thumb */
.promt-gallery::-webkit-scrollbar-thumb {
  background:#fff;
  border-radius:15px;
}

/* Scrollbar thumb hover */
.promt-gallery::-webkit-scrollbar-thumb:hover {
  background:#fff;
  border-radius:15px;
}





.promt-gallery ul li { list-style:none; border-radius: 16px; padding:10px; margin-bottom:10px; color: rgba(255, 255, 255, 0.50);
line-height:20px; background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%);}

.promt-gallery ul li:hover { border-radius: 16px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%); color:#fff;}

.promt-gallery .agent-title-left { font-size:22px !important;}

.promt-gallery .agent-title-wrap {
    margin-bottom: 15px;
}

.prompt-close { float:right; margin-bottom:10px; cursor: pointer;}





















.topbaar-slider {
    /* Basic container styling if needed */
    width: 100%;
    overflow-x: auto; /* Allows horizontal scrolling if content overflows */
    white-space: nowrap; /* Prevents list items from wrapping to the next line */
    margin-bottom:20px;
    padding-bottom:10px;
    
}

.topbaar-slider ul {
    list-style: none; /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox to arrange items horizontally */
    align-items: center; /* Vertically center the items */
}

.topbaar-slider li {
    display: inline-block; /* Essential for horizontal layout, also useful for older browsers */
    margin-right:10px; /* Space between each "bar" */
    padding: 8px 15px; /* Padding inside each bar */
    border: 1px solid #ddd; /* Light border */
    border-radius:34px; /* Slightly rounded corners */
    border: 1px solid rgba(43, 187, 239, 0.40);
    cursor: pointer;
    color:#fff;
    margin-right:10px;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transitions for hover/active states */
    flex-shrink: 0; /* Prevents items from shrinking in flex container */
}

.topbaar-slider li:last-child {
    margin-right: 0; /* No margin on the last item */
}

.topbaar-slider li a {
    text-decoration: none; /* Remove underline from links */
    color: #fff; /* Text color */
    font-family: Arial, sans-serif; /* Example font */
    font-size: 12px; /* Example font size */
    display: block; /* Make the whole li clickable */
}

/* Hover effect */
.topbaar-slider li:hover {
    background-color: #4dc4f2;
    border-color: #4dc4f2;
}

/* Active/Selected Bar Styling (Optional, but common for sliders/tabs) */
.topbaar-slider li.active {
    background-color: #007bff; /* A distinct color for the active tab */
    border-color: #007bff;
}

.topbaar-slider li.active a {
    color: #fff; /* White text for active tab */
}

/* Styling for the icons within the tabs (if you have them) */
/* You would need to add <img> tags or use icon fonts (like Font Awesome)
   within your <a> tags in the HTML for these. */
.topbaar-slider li a img {
    vertical-align: middle; /* Align icon with text */
    margin-right: 5px; /* Space between icon and text */
    width: 16px; /* Example icon size */
    height: 16px;
}





 /* Scrollbar width */
.topbaar-slider::-webkit-scrollbar {
  width:2px;
  height:4px;
  border-radius:15px;
}

/* Scrollbar track */
.topbaar-slider::-webkit-scrollbar-track {
  background: linear-gradient(75deg, rgba(43, 218, 239, 0.04) 1.38%, rgba(74, 255, 168, 0.04) 100%);
  border-radius:15px;
}

/* Scrollbar thumb */
.topbaar-slider::-webkit-scrollbar-thumb {
  background:#fff;
  border-radius:15px;
}

/* Scrollbar thumb hover */
.topbaar-slider::-webkit-scrollbar-thumb:hover {
  background:#fff;
  border-radius:15px;
}



.extraractor-right .train-now-wrap input:-webkit-autofill {
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
}

.extraractor-right .train-now-wrap input:-webkit-autofill:focus {
 -webkit-text-fill-color:#fff !important;
 color:#fff !important;
}



/* Focus style */
.extraractor-right .train-now-wrap input:focus {
-webkit-text-fill-color:#fff !important;
color:#fff !important;
}

/* Autofill override for Chrome */
.extraractor-right .train-now-wrap input:-webkit-autofill {
-webkit-text-fill-color:#fff !important;
color:#fff !important;
}

/* Autofill + Focus combo */
.extraractor-right .train-now-wrap input:-webkit-autofill:focus {
-webkit-text-fill-color:#fff !important;
color:#fff !important;
}



.extraractor-right .train-now-wrap input {
  -webkit-text-fill-color: #fff !important; /* Forces white text even on spellchecked text */
}


.analytics-inner-wrap {
    padding: 5px 10px;
    margin-bottom:5px;
    cursor: pointer;
}

.analytics-inner-wrap:last-child { margin-bottom:0px;}

.analytics-inner-wrap:hover {
border-radius: 16px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%);}

.analytics-inner-wrap.active {
border-radius: 16px;
background: linear-gradient(75deg, rgba(43, 218, 239, 0.40) 1.38%, rgba(74, 255, 168, 0.40) 100%);}


.analytics-wrap {
    width: 100%;
    height: auto;
    border-top: 1px solid #8A8A8A;
    margin-top: 13px;
    padding:10px 0px;
    margin-bottom:0px;
}

.analytics-inner-wrap b {
display:inline-block;
color: var(--Final-Green, #4AFFA8);
font-family: Lexend;
font-size:17px;
margin-right:10px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.36px;}


.analytics-inner-wrap span { 
color: #FFF;
font-family: Lexend;
font-size:15px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.36px;}

.analytics-inner-wrap i { float:right; cursor: pointer;}


.impact-followers-wrap { width:100%; height:auto; margin-top:20px;}
.impact-followers-wrap h2 { text-align:left;
background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
background-clip: text;
-webkit-background-clip: text;
font-family: Lexend;
font-size:27px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: -0.72px;
-webkit-text-fill-color: transparent;}

.impact-followers-wrap h2 b { float:right; cursor: pointer;}
.impact-followers-wrap .impact-followers-box { width:100%; height:auto; border-radius: 12px; padding:8px; margin-top:15px;
border: 1.5px solid var(--Final-Blue, #2BBBEF);}

.impact-followers-title-wrap {
    padding: 6px 4px;
    border-radius: 6px;
    background: linear-gradient(75deg, rgba(43, 218, 239, 0.10) 1.38%, rgba(74, 255, 168, 0.10) 100%);
    box-shadow: 9.721px 9.721px 3.888px 0px rgba(0, 0, 0, 0.03);
}

.impact-followers-title {
    display: flex;
    align-items: center;
    padding: 0px 2px;
    margin-bottom:5px;
}

.impact-followers-title p { margin:0px; color: #FFF;
font-family: Lexend;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.36px;}

.impact-followers-title b { float:right; color: #FFF;
text-align: right;
font-family: Lexend;
font-size: 14px;
margin-left:auto;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.36px;}

.impact-followers-title svg { margin-right:5px;}


.impact-followers-title img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}


.impact-followers-box-social { width:100%; height:auto; text-align:left;}
.impact-followers-box-social ul { margin:0px; padding:0px; display:inline-block;}
.impact-followers-box-social ul li {
    list-style-type: none;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid var(--Final-Blue, #2BBBEF);
       padding: 3px 3px 3px 2px;
    font-size:10px;
}
.impact-followers-box-social ul li b {
color: #2BBBEF;
text-align: right;
font-family: Lexend;
font-size: 8.846px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.235px;}

.impact-followers-box-social span { float:right; cursor: pointer;}

.flower-bottom { margin-top:15px;}
.flower-bottom .impact-followers-title { margin-bottom:10px;}


#post-container { 
display: flex;
    flex-wrap: wrap;
    justify-content: center;}




#nav-home .channel-box { z-index:12;}



#verify-success-wrap { width:100%; text-align:center; margin:5% 0px;}

.verify-success {
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.20) 1.38%, rgba(74, 255, 168, 0.20) 100%);
      border: 1px solid rgba(255,255,255,0.1);
      padding: 50px;
      border-radius: 20px;
      text-align: center;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 0 30px rgba(77, 196, 242, 0.3);
      margin:auto;
      font-family: Lexend;
    }

    .verify-success svg {
      width: 80px;
      height: 80px;
      margin-bottom: 20px;
      fill: #4dc4f2;
    }

    .verify-success h2 {
      font-size: 28px;
      color: #ffffff;
      margin-bottom: 10px;
      font-family: Lexend;
    }

    .verify-success p {
      color: #d0d3ec;
      font-size: 16px;
      margin-bottom: 30px;
      font-family: Lexend;
    }

    .verify-success a {
      display: inline-block;
      background: #4dc4f2;
      color: #030445;
      text-decoration: none;
      font-weight: 600;
      padding: 12px 30px;
      border-radius: 30px;
      transition: background 0.3s ease;
      border:2px solid #4dc4f2;
      font-family: Lexend;
    }

    .verify-success a:hover {
      background:none;
      border:2px solid #4dc4f2;
      color:#fff;
      font-family: Lexend;
    }



    .answer-wrap .answer {
    width: 100%;
}


  .social-main-icon {
    width: 38px;
    height: auto;
    position: absolute;
    left: 31px;
}


.channel-table-newdesign .channel-confirmation-wrap img {
    height: 47px;
}




.website-main-wrap { max-width:1500px; margin:auto;}




:root {
      --base-color: #030445;
      --card-color: #0d285f;
      --accent-cyan: #00f9ff;
      --accent-green: #43e97b;
      --accent-glow: rgba(0, 255, 255, 0.35);
    }


 

    .plans h1 {
      font-size: 2.5rem;
      background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
      -webkit-background-clip: text;
      color: transparent;
      margin-bottom: 40px;
      font-family: Lexend;
    }



.plans {
    font-family: 'Segoe UI', sans-serif;
    background: var(--base-color);
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    padding-top:125px;
    font-family: Lexend;
}

    .plan-card {
      background: var(--card-color);
      border-radius: 20px;
      padding: 30px;
      width: 350px;
      box-shadow: 0 0 20px var(--accent-glow);
      transition: all 0.3s ease;
      border:2px solid #fff ;
      font-family: Lexend;
    }

.plan-card:hover { border-color: var(--accent-cyan);
      box-shadow: 0 0 30px var(--accent-glow);}





    /* .plan-card.active {
      border-color: var(--accent-cyan);
      box-shadow: 0 0 30px var(--accent-glow);
      font-family: Lexend;
    } */

    .plan-card h3 {
      font-size: 22px;
      margin-bottom: 12px;
      color: #fff;
      font-family: Lexend;
      font-weight:400;
    }

    .price-badge {
      background:#2BBBEF;
      color:#fff;
      font-weight: bold;
      border-radius:5px;
      display: inline-block;
      padding: 6px 16px;
      font-size: 16px;
      margin-bottom: 20px;
      font-family: Lexend;
    }

    .plan-card ul {
      list-style: none;
      padding: 0;
      margin: 20px 0;
      color: #c8d2ff;
      font-family: Lexend;
    }

    .plan-card ul li {
      padding: 10px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .plan-card button {
      background: linear-gradient(to right, var(--accent-cyan), var(--accent-green));
      color: #000;
      font-weight: bold;
      border: none;
      padding: 12px 28px;
      border-radius: 30px;
      font-size: 15px;
      cursor: pointer;
      transition: transform 0.3s ease;
      font-family: Lexend;
      border: 1px solid #4AFFA8;
    }

     .plan-card button:hover { background:none; border: 1px solid #4AFFA8; color:#fff;}



     .success-container {
      text-align: center;
      background: #0d285f;
      border-radius: 20px;
      padding: 60px 40px;
      box-shadow: 0 0 30px rgba(0, 255, 255, 0.15);
      max-width: 480px;
      margin:auto;
      margin-top:8%;
      border:1px solid #00f9ff;
    }

    .success-container .checkmark {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(45deg, #2BBBEF, #43e97b);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 30px;
    }

    .success-container .checkmark svg {
      width: 40px;
      height: 40px;
      fill: #000;
    }

    .success-container h2 {
      font-size: 32px;
      margin-bottom: 16px;
      background: linear-gradient(90deg, #2BBBEF, #43e97b);
      -webkit-background-clip: text;
      color: transparent;
    }

    .success-container p {
      font-size: 16px;
      color: #cce3ff;
      margin-bottom: 30px;
    }

    .success-container .btn {
      padding: 12px 28px;
      font-size: 16px;
      font-weight: bold;
      background: linear-gradient(90deg, #00f9ff, #43e97b);
      color: #000;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid #4AFFA8;
    }


.success-container .btn:hover {
    background: none;
    border: 1px solid #4AFFA8;
    color: #fff;
}






#profile-wrap { width:100%; height:auto; margin-bottom:40px;}

#profile-wrap .custom-card {
      background: linear-gradient(75deg, rgba(43, 218, 239, 0.2) 1.38%, rgba(74, 255, 168, 0.2) 100%);
      border-radius: 1.5rem;
      border: 1px solid #fff;
      font-family: Lexend;
    }

#profile-wrap .form-control-input {
    background:none;
    border: 2px solid #2BBBEF;
    color: white;
    font-family: Lexend;
    border-radius: 10px;
    padding: 15px 10px;
    outline:none;
    width:100%;
}

    #profile-wrap .form-control:focus {
      border-color: #2BBBEF;
      background-color:#030445;
      color: white;
      font-family: Lexend;
    }

    #profile-wrap .btn-cyan {
      background-color: #2BBBEF !important;
      color: #030445 !important;
      border: none;
          font-family: Lexend;
    }

    #profile-wrap .btn-cyan:hover {
      background-color: #22a7d1 !important;
          font-family: Lexend;
    }


    #profile-wrap .form-label {
    padding-left: 0rem;
    font-size:14px;
    margin-bottom:5px;
    color:#fff !important;
   
}


#profile-wrap button {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(90deg, #00f9ff, #43e97b);
    color: #000;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #4AFFA8;
}


#profile-wrap button:hover {
    background: none;
    border: 1px solid #4AFFA8;
    color: #fff;
}









































@media only screen and (max-width: 1280px) {

 
  .reportdiv html {
    font-size: 14px;
  }
  .reportdiv .position-marker {
    left: 20%;
  }
  .reportdiv .position-marker.no2 {
    left: 45%;
  }
  .reportdiv .position-marker.no3 {
    left: 25%;
  }
  .reportdiv .position-marker.no4 {
    left: 42%;
  }
  .reportdiv .position-marker.no5 {
    left: 70%;
  }
  .reportdiv .position-marker.no6 {
    left: 32%;
  }
  .reportdiv .madeby {
    top: 75px;
  }
  .reportdiv .navigation-elm:nth-child(1) {
    background: #333339;
  }
  .reportdiv .sidebar {
    width: 100%;
    flex-flow: row;
    height: 60px;
    font-size: .9rem;
    padding-top: 0px;
    position: relative;
    top: -60px;
  }
  .reportdiv .sub-navigation-elm {
    display: none;
  }
  .reportdiv .update-number {
    display: none;
  }
  .reportdiv .container {
    padding-top: 60px;
    padding-left: 0px;
  }
}



@media only screen and (max-width:920px) {
  .reportdiv .text-long {
    display: none;
  }
}



@media only screen and (max-width: 800px) {
  .reportdiv .key-metrics {
    margin-top:0px;
    width:50%;
    margin-left:auto;
    margin-right:auto;
  }
  .reportdiv .row {
    flex-direction: column;
  }
  .reportdiv .piechart-element {
    width: 100%;
  }
  .reportdiv .piechart-label {
    padding-left: 15px;
  }
  .reportdiv .stats-element {
    width: 100%;
  }
  .reportdiv .order-element {
    width: 100%;
  }
  .reportdiv .social-element {
    width: 100%;
  }
  .reportdiv .todo-element {
    width: 100%;
  }
  .reportdiv  .map-container {
    height: 40vw;
  }
  .reportdiv .piechart-percent {
    font-size: 8vw;
  }
  .reportdiv .chat-input {
    padding-right: 15px;
    padding-left: 15px;
  }
  .reportdiv .stats-table {
    border-width: 15px;
  }
}

@media only screen and (max-width: 640px) {
  .reportdiv .text-short {
    display: none;
  }
  .reportdiv .navigation-elm {
    font-size: 4.5vw;
    justify-content: center;
    text-align: center;
  }
}


@media screen and (max-width:1024px) {

.promt-history-wrap1 { margin-bottom:20px;}

.content { padding-left: 1.5rem;}

.cardslider .card {
    width: 260px;
}

.content {padding-right: 1.5rem;}
.content .container-fluid
{
    padding-right: 0px;
    padding-left: 0px;
}

.most-like-wrap { width: 100%; overflow-x: auto; overflow-y: auto;}

#manage-videos .manage-videos-head ul {display: flex; width:1020px; }

.extraractor-design-update-wrap .search-expand-icon .search-container.expanded .search-input {width: auto;}

.extraractor-design-update-wrap .extraractor-right { height: auto;}

.extraractor-design-update-wrap #close-section {margin-bottom: 10px;
  width: 30px;}

.dev-full-width {display: inline-block;}

.extraractor-design-update-wrap .container-fluid {padding: 0px;}

.extraractor-right .tag-search-main {
width: auto;
margin: 0px 20px;
border-radius:12px;
}

.promt-history-wrap {
  margin-bottom: 30px;
}

.extraractor-right .train-now-wrap {padding: 10px 10px 10px 15px;}
.extraractor-right .train-now-wrap button {min-width: 94px;font-size: 14px;}
.extraractor-right .train-now-wrap input {font-size: 12px;}





.extraractor-right .data-channel-wrap ul li {margin-right: 10px; position:relative;}
.extraractor-right .data-channel-wrap ul {overflow: scroll;}

.extraractor-right .data-channel-wrap { padding: 0px 20px; margin-top: 50px;}
  
.data-loader #icon .icon-loader {
      z-index: 1;
      margin-top: 336px !important;
      /* position: absolute; */
  } 
  
.VideoDetails-new-design .related-channel-wrap p {
      padding-left:15px !important;
      margin-top: 10px !important;
  }
  
.VideoDetails-new-design .video-chat-right-wrap {padding-bottom: 245px !important;}
.VideoDetails-new-design .video-right-chat .video-chat-wrap {left: 10px !important; right: 10px !important; bottom:10px !important;}
  
.VideoDetails-new-design .video-right-chat {padding: 30px 10px !important;}
  
    .VideoDetails-new-design .video-right-chat .video-chat-wrap {padding: 10px !important;}
    .att-button svg {
      width: 35px;
      height: 35px;
  }
    .chat-submit-button-wrap { text-align:center !important; margin-top:10px !important;}
  
    .VideoDetails-new-design .video-left-main {
      height: auto !important;
      margin-bottom: 23px !important;
  }
  
  .insta-subscriber { margin-top: 0px !important;}
  .insta-foll-no span { margin-bottom: 12px;}
  .unlinkicon { text-align:left !important;}
  .remove-profile-pic {margin-bottom: 20px;}
  
  .unlinkicon p { margin: 20px 0px 0px 0px;}
  
  .channel-table-newdesign .tab-pane .channel-search-box {width: 100% !important;}
  .unlinkicon svg { width:30px; height:30px;}
  
  .remove-account {margin: 0px 0px 20px 0px !important;}
  
  .channel-table-newdesign .tab-pane .channel-search-box { margin-bottom: 13px !important;}
  
  .confirm-btn-wrap .confirm-btn { min-width: 120px !important; }
  
    .confirm-btn-wrap .reject-btn { min-width: 120px !important; }
  
  .channel-table-newdesign .tab-pane .channel-search-box .show li a span { display:none;}
  
  #nav-instagram .gopostbutton { margin-top:20px;}
  
    .channel-table-newdesign #buttonContainer {
      margin-top: 5px !important;
  }
  
    .channel-table-newdesign .uploaded-file {
      margin: 10px 0px;
    }
  
    .channelDetail-new .rightlist {
      margin-top:0px;
  }
  
  
    .add-subscriber h2 {
   text-align: center;
      width: 100% !important;
  }
  
  .add-subscriber p { text-align: center;
    width: 100% !important; }
  
    .gopostbutton {
      padding-top: 0px;
      padding-bottom: 20px;
  }
  
    .ai-Data-tab .nav-tabs {
      text-align: center;
      white-space: nowrap;
      display: inline-block;
      width: 100%;
      height:40px;
      overflow-y:hidden;
      overflow-x: auto;
  }
  
  .ai-Data-tab .tab-pane {
    margin-top: 10px !important;
  }
  
  .channelDetail-new .nav-tabs li { width:auto; display: inline-block;}
  
    .channel-box .padding-bottom-top-0 {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
  }
  
  .ai-Data-tab .channel-detils {
    padding:20px 20px !important;
  }
  
    .channel-pic img {
      height: auto !important;
      border-radius: 10px;
      width: 100%;
  }
  
  .channel-table-newdesign .progressbaarmain {
    padding: 0px 0px;
  }
  
    .training-data-form {
     margin: 15px 0px;
    padding: 25px 25px;}
  
  .training-data-form .campaign-button button {min-width: 100%;}
  
  .training-data-form .rightwrap .selectdate {width: 100%;}
  
  .training-data-form .selectdateright {width: 100%;}
  .training-data-form .rightwrap .rightwrapnew {
    border-left: 0px solid #2BBBEF;
    padding-left: 0px;
    padding-bottom: 20px;
  }
  
  .training-data-form .campaign-button {
    margin: 10px 0px 0px 0px;
  }
  
  .training-data-form .upload-area {padding: 20px 20px;}
  
  .training-data-form .container {width: 100%;}
  
  
  
  
  
  .channel-table-newdesign .channel-box {
      padding-bottom: 0px;
  }






  
    .channel-table-newdesign .newdesign-box h4 { text-align: center;}
  
    .channel-table-newdesign .extra-link h5 { text-align: center;}
    .channel-table-newdesign .extra-link p { text-align: center;}
  
  .channel-table-newdesign .subData p {
     text-align: center;
  }
  
  .channel-table-newdesign .newdesign-box-data h4 {
    text-align: center;
  }
  
  .channel-table-newdesign .newdesign-box-data span { text-align: center;}
  
  .channel-table-newdesign .newdesign-box-data p { text-align: center;}
  
    .height-73 {
      height: auto !important;
  }
  
  .channel-table-newdesign .comment-tokens span {
     width: 100%;
    display: inline-block;
    text-align:center;
  }
  
    .channel-table-newdesign .newdesign-box {
      height: auto;
      margin-bottom: 20px;
  }
  
    .channel-table-newdesign .searchfild input {
      min-width: 91%;
     
  }
    
  
  
    .text-end button {
      min-width: auto !important;
  }
  
    .datasource .item .tooltip { width: 100% !important;}
  
    .datasource .item:first-child {
    border-radius: 23px 23px 0px 0px;
  }
  
  .data-loader svg { width:100%; padding-left:15px;}
  
    .loader-wrap .progress-bar {
      width: 44%;
  }
  
  /* #preloader div { width:178px !important;} */
  
    .select-last {
      position: relative;
      width: 100%;
  }
  
  .select-last .select2-container {
    width: 100% !important;
    overflow: hidden;
    z-index: 9;
  }
  
  
  .videodetils #videoTitle { font-size: 24px; line-height: 36.196px;}
  .bar-container {margin-left: 0px;}
  
    .compare-main {
      padding: 13px 10px;
      min-height: auto;
      margin-top: 16px;
  }
  
  .select-industry-box { margin-bottom:0px;}
    .compare-main {
      padding: 13px 10px;
      min-height: auto;
      
  }
  
  .select-industry-box {
      min-height: auto;
  }
  
  .select-industry-box input { margin-top:0px !important;}
  
  
    .compare-main button {
      padding: 10px 0px 10px 10px;
      margin-top: 0px;
  }
  .bar-container { width: 100px; margin-left: 0px;}
  
    .trending-now-key input {
      width: 174px;
      min-width: 160px;
      margin-right: 5px;
  }  
  
  .trending-now-chart thead { display:none;}
  
  .trending-now-chart td { padding-left: 0px;
  }
  #trendingTable tr { display: inline-block; }
  
  #trendingTable tr td {     width: 100%; font-weight:600;
    float: left; }
  
    .trending-now-key button {
      min-width: 114px;
      width: 159px;
      /* padding: 0px; */
      margin-right: 0px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 13px;
      padding-bottom: 13px;
  }
  
  
  .trends-new button {
    min-width: 120px;
    
  }
  
   .select-box { gap: 0; flex-wrap: wrap;}
  
   .select-industry-main { padding: 20px 20px;}
  
   .region-trends { padding: 0px !important;}
  
   .trending-now-option {
    background: none !important;
    padding: 0px;
    padding: 0px !important;
  }
  
  .trending-now-option .select { margin-bottom:15px;}
  
  
  
  .datasource .info { height: 1px;}
  
    .datasource .active-info {
      height: auto !important;
  }
  
  
    #navbarVerticalCollapse .navbar-nav {
      margin-bottom: 0px;
  }  
  
  .desktop-hide-master { display:block;} 
  
  .mobile-hide-master { display:none;}
  
  .line1 { display:none;}
  .line2 { display:none;}
  .line3 { display:none;}
  .line3 { display:none;}
  .line4 { display:none;}
  
  .navbar-vertical-footer { display:none !important;}
  
  .controls { flex-direction: row;}
  
  #blob canvas {
    transform: scale(3.1);
    width: 100% !important;
    height: 150px !important;
  }
  #blob {
    position: relative;
    margin-top:20px;
    overflow: hidden;
    min-height:321px;
  }
  
  #blob canvas {
    margin-top: 27%;
    width: 800px;
  }
  
  
  .dail-fild-main {margin-top:0px !important; margin-bottom:30px;}
  
  .dail-fild-main textarea { min-height: 160px !important; }
  .training-center h1 { text-align:center;}
  
  
  
  
    .load-text span {
      font-size: 14px;
  } 
  
  
  .loader-wrap .loader-wrap-heading .load-text {
   letter-spacing: 0px !important;
   width:100%;
   }
  
  .trainNow button {
      margin-top: 20px;
  }
  
  .datasource .item { background: rgba(255, 255, 255, 0.10); margin-bottom:0px; margin-left:0px; margin-top:5px;}
  .datasource .item:first-child {margin-top:0px;}
  .datasource .item:last-child { margin-bottom:0px !important;}
  .datasource section {
  flex-direction: column;
  }
  
  .info { width:100% !important;}
  
  .item svg {
    height: 60px;
  }
  
  .item svg path:first-child { fill:none;}
  .item svg rect { fill:none;}
  
  .datasource .active {
    background: var(--Final-Gradient, linear-gradient(75deg, #2BDAEF 1.38%, #4AFFA8 100%));
    box-shadow: 0px 4px 10.9px 0px rgba(0, 0, 0, 0.25);
    color: #ecf0f1;
  }
  
    .ss-main {
      border-bottom: 1px solid #fff;
      margin-bottom:0px;
      padding-bottom: 7px;
  }
  
  .home-page-checkbox ul li {
    /* list-style: none; */
    /* display: inline; */
    /* list-style-type: none; */
    /* display: inline; */
    /* list-style-type: none; */
    width:auto;
    margin-right:5px;
    /* float: left; */
    display: inline-block;
    white-space: nowrap;
  }
  
  
  .home-page-checkbox ul {
    overflow: scroll;
  }
  
  
  
  
  .CommentsExtractor-new {
  padding: 0px 0px;}
  
  .tagleft {
    border-right: 0px solid #fff;
  }
  
  .CommentsExtractor-new .CommentsExtracto-title h1 { font-size: 27px;}
  
  .CommentsExtractor-new .CommentsExtracto-title h2 {
  font-size: 35.829px;
  line-height: 46px;}
  
  
  .topApplied::before {
      left: 105px !important;
  }
  
    .sharepopup::after {
      left: 107px !important;
  }
  
    .mappingwrap table tbody tr td:first-child {
      width:100% !important;
  } 
  
  .chatoverflowscrool { padding-bottom:100px !important;}
  
  
  
    .apiuser input {
     margin-left:0px !important;
     margin-top:0px;
  } 
  
  #scroll-bottom { bottom: 40px; display:none !important;} 
  
  #nav-tabContent .button-container {
    text-align: center;
    margin-top: 0px;
    width: auto;
    display: inline-block;
  }
  
  .mobile-button { text-align:center;}
  
  .mobile-button .btn-primary { padding: 11px 22px;}
  
  .newbutton { min-width: 100px;}
  
  .videodetils #videoDescription p { text-align: left;}
  
  
  
  .chatwrapmain .quechat textarea {width: 250px;}
  
  
  .chatwrapmain .quechat {max-width: 85%;}
  
    .anschat b {
      display: inline-block;
      float: none;
      margin-bottom:2px;
      position:relative;
  }
  
  
  .anschat b b:after {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 13px solid #4AFFA8;
    position: absolute;
    content: '';
    bottom: -7px;
    left: 2px;
    display:none;
  }
  
  
  
  
  
  
    html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-lg .navbar-vertical-content {
      height:auto !important;
  }
  
  
  .chatwrapmain .anschat { text-align: left;}
  
  .hideCol tr td:nth-child(5) {
      width: 100% !important;
  }
  
  .dataTables_wrapper .dataTables_paginate .ellipsis {
      padding: 0 0.1em !important;
  }
  
  
  .navbar-vertical .navbar-vertical-content {
      height:auto;
  }
  
    .leftsearchbox input { margin-top: 0px;}
  
    #navbarVerticalNav a {margin-bottom: 5px;}
  
    .content { padding-bottom: 1rem;}
  
    #clearChatModal .modal-content { padding: 15px 10px !important;}
    #clearChatModal .modal-content .modal-body br { display:none;}
  
  .popnewdesign .modal-content { padding: 15px 10px;}
  
    #navbarVerticalNav a svg { margin-right: 0px;}
  
    .button-class {
      text-align: center !important;
  } 
  
  .table-new-style .dataTables_paginate { padding-bottom:10px !important;}
  
  .AuditQuestionList label {
      margin-top: 15px;
      width: 100%;
      text-align: left;
  }
  
  .AuditQuestionList #partsBody td { width: 100% !important;} 
  .add-new-ques h4 {
  margin-top: 20px;
  } 
  .usernewlist #gridTable tr td {
      width:100% !important;
  }
  
  .QPrompt label {
    margin-top: 20px;
  }
  
    .commentsEx #gridTable tr td {
      background: none !important;
      width: 100% !important;
  }
  
  #questionsTable tr td {width: 100%;} 
  .tabfilter { padding-bottom: 0px;}
  .table-new-style .full-description { word-wrap:break-word;}
  .table-new-style #gridTable_filter input {
      width:100% !important;
      padding: 12px 10px;
      margin-left: 0px;
  }
  
  
  .table-new-style #gridTable_filter {
   margin-bottom: 0px;
  }
  
  .videolist .input-group {
    margin-bottom: 0px;
  }
  
    .rolewrap .dataTables_paginate {
      padding-top: 10px;
  }
  
    table.dataTable tbody tr td:nth-child(3) {
      width: auto !important;
      word-wrap: break-word;
  }  
  .table-new-style table tr td:first-child {
      border-radius: 10px 10px 0px 0px !important;
      border-left: 1px solid #fff;
      border-right: 1px solid #fff;
      width:100%;
  }
  
  .table-new-style table tr td:last-child {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  border-radius: 0px 0px 10px 10px !important;}
  
  .table-new-style tbody tr td {
  width: 100%;
    display: block;
    border-right: 1px solid #fff;
    box-sizing: border-box;
  } 
  
  .table-new-style tbody tr td {
    border-bottom: 1px solid #fff !important;
    border-top: 1px solid #fff !important;
    border-left: 1px solid #fff;
  }
  
  
  .topnavnew {
  padding-left: 15px !important;
      padding-right: 15px !important;
  }
  
    .chatoverflowscrool::after {
      position: fixed;
      bottom: 0px;
      height: 130px;
  }
  
  .chatoverflowscrool {
    min-height: calc(400px - -168px);
  }
  
  
    .roletoggle {display:block;}
  
    .sharepopup {
      right:0px;
      left:-103px !important;
      margin:auto;
      width:250px;
  }
  
  .rowoverflow .text-end {
      text-align: left !important;
  }
  
  
    .chatoverflowscrool::-webkit-scrollbar {
      width:0.2px;
      border-radius: 4px;
  }
  
  /* Track */
  .chatoverflowscrool::-webkit-scrollbar-track {
          background: #fff;
          border-radius: 4px;
      }
  
  /* Handle */
  .chatoverflowscrool::-webkit-scrollbar-thumb {
          background: #4EAACB;
          border-radius: 4px;
      }
  
      /* Handle on hover */
      .uploadlistmain .rowoverflow::-webkit-scrollbar-thumb:hover {
          background: #4EAACB;
      }
  
  
  
  
  
  
  
    .chatwrapmain .chatmain { position:fixed;}
  
  .roletoggle { display:block;} 
  .mobiletoggle { display:none;}
  
   .mappingwap { --phoenix-gutter-x: 0rem;} 
  
   .mappingwap .nav-tabs {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    overflow: auto;
  }
  
  
  .mappingwap .paginate_button {padding: 5px !important;}
  
  .mappingwap .dataTables_length { text-align:left !important;}
  
  .mappingwap .nav-item {
    display: inline-block;
  }
  
  
   #videoDetails {
      padding: 8px 0px 20px 0px !important;
  }
  
    .custom-dropdown {
     width: 100%;
      max-width: 100% !important;
     
  }
  
    .dataTables_paginate { padding-top: 0em;}
  
    .Aichat {
      padding: 0px;
  }
  
  
    .dataTables_info {
      width: 100%;
  }
  
  .dataTables_paginate {
    width: 100%;
  }
  
    .CommentsExtractor div button {
      margin-right: 5px;
  }
  
    .rightlist .tooltip1 .tooltiptext {
      width:100%;
     top: 0px;
     left: 0px;
  }
  
  
    .videodetilswrap .nav-tabs {
      border-bottom: 0px solid rgba(0, 0, 0, 0);
      white-space: nowrap;
      display: inline-block;
      width: 100%;
      overflow: scroll;
      overflow-y: hidden;
  }
  
  
  
  .bottomtabing .nav-tabs {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    overflow: scroll;
  }
  
  
  .bottomtabing .nav-tabs li { display:inline-block;}
  
  .bottomtabing .tab-pane {
    margin-top: 0px;
  }
  
  
  
  
  .rightlist {
    margin-bottom: 0px;
  }
  
  
  
  
  .profilename { display:none;}
  
  
    .mainloginwrao {
      width: auto !important;
      padding: 0px 30px;
    }
  .padding-left-7 {
    padding-left: 15px;
  }
  
  .padding-right-7 {
    padding-right:15px;
  }
  
  
  .bottomtabing .tab-pane p {
    text-align: left;
    
  }
  
  .datause ul li {
    width: 100%;
  }
  
  
    .rightlist {
     margin-top: 32px;
  }
  
  .rightlist button { margin-bottom:10px !important;}
  
  .videodetilswrap .btn-primary {
   margin-right: 7px !important;
  }
  
    .newnacbaar .navbar-vertical {
      padding: 0px 0px;}
  
      .nav-item-wrapper {
        width: 100%;
    }
  
    #navbarVerticalNav a { border-radius: 0px !important; }
  
    .navbar-vertical-collapsed #navbarVerticalNav .d-flex {
      justify-content: left;
  }
  
  .menuhover .navbar-collapse { background: #2BBBEF;}
  
  
    .cardwrap {
      flex: unset;
  }
  
   
    .dataTables_length {
      margin-bottom: 15px;
  }
  
    .fullscreen { display:none !important;}
  
    .menuhover .show {
      background: #2BBBEF;
      border-radius: 0px;
      height: 100%;
      top: 10px;
      margin-top:0px;
  }
  
  
  .newnacbaar .navbar-vertical {
   top: 64px !important;
   
  }
  
  .newnacbaar .navbar-vertical { background:none !important;}
  .formmain { width: 100%;}
  .CommentsExtractor .formmain {
    padding: 20px 20px !important;
  }
  
  .padding-right-0 {
    padding-right: 20px;
  }
  
  .formmain input {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .CommentsExtractor h1 {
    font-family: "Lexend", Sans-serif !important;
    color: #fff;
    font-size:23px;
    margin-bottom: 13px;
    font-weight: 400;
    text-align: left;
    line-height: 35px;
  }
  
  .navbar-vertical.navbar-expand-lg {
    width:228px;
    height:auto !important;
  }
  
  .CommentsExtractor {
    padding: 20px 0px 20px 0px;
  }
  
  #gridTable { margin-top: 0px !important;}
  
  .CommentsExtractor .dataTables_wrapper {
   margin-top: 0px;
   margin: 0px 0px;
  }
  
  #gridTable_filter { margin: 20px 0px; float:left;}
  .videoList h4 {font-size: 20px;}
  
  .newbutton {
    font-size: 11px;
  }
  
  
  .videoList h4 { margin-bottom:0px;}
  
  .content .page-title span {
    font-size:20px;
  }
  
  .card-info h4 { font-size: 14px;}
  
  .leftsearchbox input {width: 77%;}
  
  .uploadboxhead .padding-right-0 {
    padding-right: 0px;
  }
  
  .chatwrapmain {
    margin-top:0px;
    border:none;
  }
  
  .chatwrapmain .row { padding:0px; margin:0px;}
  
  .chatoverflowscrool {
   overflow-x: hidden; padding:0px;}
  
   div.dataTables_wrapper div.dataTables_filter label {
    float: left;
    margin-bottom: 10px;
  }
  
  .qprompt button {
    padding: 5px 7px;
    margin: 0px 1px;
    font-size: 9px;
  }
  
  .rolewrap h2 { margin-top: 20px;}
  .dataTables_paginate .paginate_button {
    padding: 10px 3px;
  }
  
  
  .rolewrap table button { margin-bottom:0px; width: auto;}
  
  .rolewrap button {
    width:auto !important;
  }
  
  .navbar-nav { align-items: flex-start;}
  
  #navbarVerticalNav a {
    display: inline-block;
    width: 100%;
    text-align:left;
  }
  
  .navbar-toggler-humburger-icon {
   margin-right: 0rem;
  }
  
  .navbar-brand img {
    height: 25px;
  }
  
  .rightlogout li {
    font-size: 15px;
    color: #fff;
    margin-left: 9px;
    text-transform: capitalize;
  }
  
  .rightlogout li button {
   font-size: 12px;
  }
  
  #logoutBtn svg {
    height: 18px;
    width: 18px;
    margin-top: -3px;
  }
  
  .rightlogout li button {
    padding: 5px 6px;
    
  }
  
  .navbar-brand img {
    height: 28px;
    width: auto;
  }
  
  
  /* .......reposive css mearge........ */
  
  
  .createrolewrap {
      align-content: center;
      flex-wrap: wrap;
  }
  
  .createrolewrap textarea {
    width: 100%;
    margin-right: 0px;
    margin-bottom:10px;
    }
  
    .uploadsugetion {
      top: 178px;
  }
  
  
    .videotag {
     
      height: 100%;
     
  }
  
  .tagmain .col { margin-bottom:10px;}
      .navbar-brand img {
          height:37px;
          width: auto;
      }
  
  
      .videodetils #videoDescription {
       
        text-align: left;
        
    }
  
    .videolist .input-group {
      width: 100%;
      flex-direction: row;
      
  }
  
      .CommentsExtractor #channelUrlForm input {
          margin-bottom: 10px;
      }
  
      .CommentsExtractor div button {
          margin-bottom: 10px;
  
      }
  
      .rolewrap button {
        width: 100%;
    }
  
  
    .videolist .input-group button { margin-bottom:0px;}
  
    .rolewrap button {
     font-size:15px;
      margin-bottom: 20px;
  }
  
  .rolewrap select { width:100%; margin: 10px 0px;}
  
  #roleDropdown { width:100%; margin: 10px 0px;}
  
  .menuhover .parent-wrapper ul {
   border-radius: 0px;
  }
  
  #customModal .modal-content {
    width: 80%;
   
  }
  
  .rolewrap .container-fluid { --phoenix-gutter-x:0rem;}
  
  .tagmain { --phoenix-gutter-x: 1rem !important;}
  
  #videosTable_info {
    width: 100%;
    text-align: center;
    
  }
  
  .dataTables_paginate {
    text-align: center;
    width: 100%;
  }
  
  .mainloginleft {
    width: 100%;
    height: auto;
    float: left;
  }
  
  .logininnerwrap {
    width:auto;
    display: inline-block;
    border: 2px solid #2BDAEF;
    border-radius: 20px;
    padding: 30px 20px;
   
  }
  
  .login-logo {
    margin-bottom: 25px;
  }
  
  .training-data-form .selectdatemainwrap .selectdateright { width: 48%;
    float: right;}
    .training-data-form .upload-area {font-size: 19px !important;}
  }
  
  
  
  
  @media (min-width:768px) and (max-width:1024px) {
  
    .data-loader #icon .icon-loader {
      z-index: 1;
      margin-top: 424px !important;
      /* position: absolute; */
  }
  
  .insta-subscriber { margin-top: 20px !important;}
  .tab-margin-bottom-0 { margin-bottom:0px !important;}
  .channel-table-newdesign .tab-pane .channel-search-box .show li a span {
      display: block;
  }  
  
  
  .datause ul li {
      width: 47%;
  }
  
  .datause ul li:nth-child(2n) { float:right;}
  
  
  
    .training-data-form .selectdatemainwrap .selectdateright { width: 48%;
      float: right;}
  
  .training-data-form .upload-area {font-size: 19px !important;}
  
  .training-data-form p br { display:none;}
  
  .chatoverflowscrool {
      min-height: calc(400px - -344px);
  }
  
  #clearChatModal .modal-content .modal-body br { display:block;}
  
  .ss-main {
    border-bottom: 0px solid #fff;
    margin-bottom: 0px;
    padding-bottom: 0px;
  }
  
  .trainNow button {
    margin-top: 0px;
  }
  
  .mobile-button {
    text-align: left;
  }
  
  .quicDetils #questionsTable tbody tr td:nth-child(2) {
    text-align: left;
  }
  
  .compare-main { margin-top: 0px;}
  
  #blob canvas {
    margin-top: 13%;
    
  }
  
  .trainNow button {
    margin-top: 20px;
  }
  
  
  
  
  .rightlist .nav-tabs::-webkit-scrollbar {
    height:1px;
    border-radius: 4px;
  }
  
  /* Track */
  .rightlist .nav-tabs::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 4px;
  }
  
  /* Handle */
  .rightlist .nav-tabs::-webkit-scrollbar-thumb {
    background: #4EAACB;
    border-radius: 4px;
  }
  
  
  
  
  }