:root{
    --light-color: #f5f7fa;
    --light: #b2ead9;
    --primary-color: #36d09c;
    --primary-hover-color: #29b082;
    --tertiary-color:#0E1E40;
    --text-color: #9fabb4;
    /*--second-color: #3a617e;*/
    --second-color: #000;
    --hover-color: #53758e;
    --gradient-color: linear-gradient(270deg, rgba(76,220,159,1) 0%, rgba(54,208,156,1) 100%);
    --font-family-primary: 'Inter var', sans-serif;
    --transparent-background: #ffffff6e;
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url("../fonts/Inter-roman.var.woff2") format("woff2");
}

@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
    font-named-instance: 'Italic';
    src: url("../fonts/Inter-italic.var.woff2") format("woff2");
}


body {
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #3F4254;
    text-align: left;
    background-color: #eaeaf5;
    font-feature-settings: "salt";
}
a{
    color:var(--primary-color);
}
a:hover, a.text-primary:hover, a.text-primary:focus {
    color:var(--primary-hover-color);
}
/*.btn{*/
/*    color:#333;*/
/*}*/
/*.all_video .sub-info{display:flex;align-items: center;}*/
.all_video .sub-info i{margin-left:5px; margin-top: 5px;}
button:focus{
    outline: 0;
}
.text-primary{
    color:var(--primary-color) !important;
}
.text-tertiary{
    color:var(--tertiary-color) !important;
}
.bg-primary{
    background-color:var(--primary-color) !important;
}
.bg-primary-opacity{
    background-color: rgb(53 208 156 / 70%);
}
.bg-black{
    background-color:#000000;
}
.bg-tertiary{
    background-color: var(--tertiary-color) !important;   
}
.bg-success {
    background-color: var(--primary-color) !important;
}
.fs-14 {
    font-size:14px;
}
.fw-500{font-weight:500;}
.cursor-pointer{cursor:pointer;}
.flex-1{flex:1;}
.table td, .table th{
    padding: 1rem !important;
}
.border-4x{
    border-width: 4px !important;
}
.border-t-2 {
    border-top: 2px solid #e2e8f0!important;
}
.w-12 {
    width: 3rem!important;
}
.h-1 {
    height: .25rem!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-weight:500;
}
::-webkit-scrollbar{width:8px;height: 5px;}
::-webkit-scrollbar-track{background-color:rgba(232, 232, 232, 1.0);}
::-webkit-scrollbar-thumb{border-radius:6.5px;background-color:#c6c6c6;}
svg#freepik_stories-no-data:not(.animated) .animable {opacity: 0;}svg#freepik_stories-no-data.animated #freepik--Character--inject-15 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideLeft;animation-delay: 0s;}svg#freepik_stories-no-data.animated #freepik--Folder--inject-15 {animation: 1s 1 forwards cubic-bezier(.36,-0.01,.5,1.38) slideUp;animation-delay: 0s;}@keyframes slideLeft {0% {opacity: 0;transform: translateX(-30px);}100% {opacity: 1;transform: translateX(0);}}@keyframes slideUp {0% {opacity: 0;transform: translateY(30px);}100% {opacity: 1;transform: inherit;}}
html, body {
    height: 100%;
    margin: 0px;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-family-primary);
}
.topbar .dropdown .dropdown-menu{
    z-index: 9999;
}
.full-loader {
  position: fixed;
  z-index: 9999;
  width: 50%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.full-loader .progress{
    height: 1.5rem;
    border-radius: 1.35rem;
}
.full-loader .progress-bar{
    font-size: 16px;
}
.overflow-x-hidden{
 overflow-x:hidden;
}
.logo_player_div{
    z-index: 10;
}
.overflow-y-auto{
    overflow-y:auto !important;
}
#HW_badge_cont {
    position: absolute !important;
    top: 20px;
    left: 4px;
}
/* Transparent Overlay */
.full-loader:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgb(241 241 241 / 96%), rgb(255 255 255));
  background: -webkit-radial-gradient(rgb(241 241 241 / 96%), rgb(255 255 255));
}

/* :not(:required) hides these rules from IE9 and below */
.full-loader:not(:required) {
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.progress-loader-inside {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.text-21{
    font-size: 21px;
    font-weight: 500;
}
.create-campaign-wrapper .progress{
    background-color: #acaeb4;
}
.progress-bar{
    background-color:var(--primary-color);
}
#content .container-fluid{
    padding: 0;
    margin: 0;
}

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

.left-logo h1{
    font-weight: 700;   
}

.left .form-wraper{
    box-shadow: 0 0 4px rgb(0 0 0 / 40%);
    border-radius: 10px;
    padding: 50px;
    background-color: #ffffff;
    margin-top:100px;
}

.form-group label{
    margin-bottom: 4px !important;
}

.left .form-wraper .form-group {
    margin-bottom: 25px;
}

.left .form-wraper .form-group{                
    font-family: 'Gotham-Light';
}

.left .form-wraper .form-group .form-control{
    border-color: #B7B7B7;
    padding: 10px 10px;
    color: #495057 !important;
    line-height: 1.5;
}

.form-wraper form .btn {
    background-color: #ffc107 !important;
    background-image: -webkit-linear-gradient(0deg, #f66809 0%, #ff4100 100%) !important;
    display: block;
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
    padding: 10px 10px;
    border-color: transparent !important;
    color: #343434 !important;
    font-weight: 700;
}

/* front-dashboard*/
.front-db{
    padding: 45px;
    background-image: url(../img/bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.front-db .left{
    background: #eaeff9;
    border-radius: 10px;
    padding: 30px;
}

.front-db .left .bg-img{
    border-radius: 10px;
}

.front-db .left .on-b{
    position: relative;
}

.front-db .tools{
    position: absolute;
    top: 6px;
    right: 15px;
}

.front-db .on-b .left-arrow{
    position: absolute;
    height: 20px;
    left: 10px;
    top: 10px;
}

.front-db .on-b h5{
    color: white;
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 14px;
    font-weight: 700;
}

.front-db .on-b h5 span{
    font-weight: 400;
}

.front-db .tools img{
    height: 24px;
    background:#00000040;
    border-radius: 6px;
    padding: 4px;
}


.left .radio-toolbar input[type="radio"]{
    opacity: 0;
    position: fixed;
    width: 0;
}

.left .radio-toolbar{
    position: relative;
    background: white;
    width: 80%;
    border-radius: 50px;
    padding: 10px 65px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(140,152,164,.2)!important;
}

.left .radio-toolbar label span{
    position: absolute;
    top: 10px;
    left: 20px;
    border-radius: 50%;
    padding: 1px 8px;
    text-align: center;
    background: #d3d9df;
}

.right {
    padding: 150px 100px;
}

.right h4 span{
    color: #ff4100;
}

.right button{
    border: 1px solid #fe3566;
    padding: 10px 20px;
    background: #fe3566;
    color: white;
    font-weight: 700;
    /*background-image: -webkit-linear-gradient(0deg , #f66809 0%, #ff4100 100%);*/
}

.right button a{
    color: white;
}

/*------------Ribbons----------------------- */

.ribbon.ribbon-clip.ribbon-left .ribbon-target {
    left: -10px;
    top:16px;
}
.ribbon.ribbon-left .ribbon-target {
    border-top-right-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
}
.ribbon .ribbon-target {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    background-color: #3699FF;
    -webkit-box-shadow: 0px -1px 5px 0px rgb(0 0 0 / 10%);
    box-shadow: 0px -1px 5px 0px rgb(0 0 0 / 10%);
    color: #FFFFFF;
}
.ribbon.ribbon-clip.ribbon-left .ribbon-target .ribbon-inner {
    border-top-right-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
}
.ribbon .ribbon-target > .ribbon-inner {
    z-index: -1;
    position: absolute;
    padding: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.ribbon.ribbon-clip.ribbon-left .ribbon-target .ribbon-inner:before, .ribbon.ribbon-clip.ribbon-left .ribbon-target .ribbon-inner:after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent !important;
    bottom: -10px;
}
.ribbon.ribbon-clip.ribbon-left .ribbon-target .ribbon-inner:before {
    border-width: 0 10px 10px 0;
    border-right-color: #181C32 !important;
    left: 0;
}
/*---------------- Datetime Picker --------------------*/
.datetimepicker td, .datetimepicker th{
    width: 40px !important;
    height: 40px !important;
    font-size: 16px;
}
.datetimepicker table tr td.active, .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td span.active, .datetimepicker table tr td span.active:hover, .datetimepicker table tr td span.active.disabled, .datetimepicker table tr td span.active.disabled:hover{
    background-image: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}
.datetimepicker .datetimepicker-hours span, .datetimepicker .datetimepicker-minutes span{
    height: 40px !important;
    line-height: 40px !important;
}
@media (min-width: 768px){
    .datetimepicker{
        width:300px;
    }
    .datetimepicker table.table-condensed{
        width:100%;
    }
}
.table-condensed .switch{
    display:table-cell;
}
/*------------Select2----------------------- */
.select2-container{
    width:100% !important;
}

.select2-container .select2-selection--single {
    height: 34px;
}

.select2-dropdown, .head-select2 .select2-container--default .select2-selection--single {
    border: 1px solid var(--primary-color);
}
.select2-container--default .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    padding: .375rem .75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 2px;
    font-size: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
    line-height: 1.7 !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top: 1px;
}
.select2-container .select2-search--inline .select2-search__field{
    margin-top:0;
}
.header-select2 .select2-selection{
    border-color: var(--primary-color);
}
/* new video */
.link {padding: 10px 15px;background: transparent;border:#bccfd8 1px solid;border-left:0px;cursor:pointer;color:#607d8b}
    .disabled {cursor:not-allowed;color: #bccfd8;}
    .current {background: #bccfd8;}
    .first{border-left:#bccfd8 1px solid;}
    .question {font-weight:bold;}
    .answer{padding-top: 10px;}
    #pagination{margin-top: 20px;padding-top: 30px;border-top: #F0F0F0 1px solid;}
    .dot {padding: 10px 15px;background: transparent;border-right: #bccfd8 1px solid;}
    #overlay {background-color: rgba(0, 0, 0, 0.6);z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}
    #overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}
    .page-content {padding: 20px;margin: 0 auto;}
    .pagination-setting {padding:10px; margin:5px 0px 10px;border:#bccfd8  1px solid;color:#607d8b;}

.plyr__video-wrapper{
    padding-top: 56.25%;
    height: 0;
    max-width: 100%;
}
.plyr__video-wrapper video{
    left: 0;
    position: absolute;
    top: 0;
    display: inline-block;
}

.bg-image{
    /*background-image: url(asset/image/bg1.jpg);*/
    height: 100vh; 
    box-shadow: 0px 0px 40px 20px #ddd inset;
}

.bg-image .c-b{
    border: 1px solid #ddd;   
    padding: 0;
    padding-bottom: 50px;
    position: relative;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

.c-b ul.nav.nav-tabs{
    position: absolute;
    left: -172px;
}

.bg-image .nav-tabs .nav-item{
    border: 1px solid #ddd;
}

.bg-image .nav-tabs {
    border-bottom: none;
}

.new-video{
    text-align: center;
}

.tab-2 h6, .tab-3 h6{
    margin-top: 20px;
}
/*my-video*/
.landscape-empty-wrapper {
 height: 100%;min-height: 350px;max-height: 430px; display:flex;   
}
.preview .landscape-empty-wrapper{
    max-height: calc(100vh - 0px);
}
.portrait-empty-wrapper{
    height: 100%;display:flex;max-width: 336px;width: 100%;min-height: 550px;margin: 0 auto;min-width: auto;
}
.portrait-video-wrapper, .my_v_video_vertical{
    display: block; max-width: 336px;width: 100%;min-height: 550px;
}
.realness-video-wrapper{
    display: block; max-width: 100%;width: 100%;min-height: 100%;
}
.my_v_video video{
    border-radius: 24px;
    box-shadow: rgb(0 0 0 / 15%) 0px 4px 5px;
}
.screen_view video {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.portrait-video-wrapper .video-portrait, .realness-video-wrapper .video-portrait, .my-video-video-portrait {
    position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;object-fit:cover;
    /*transform: rotateY(180deg);*/
    /*-webkit-transform:rotateY(180deg); */
    /*-moz-transform:rotateY(180deg); */
}

.r-myvideo p, .r-myvideo label{
    font-size: 14px;
    line-height: 1.25rem;
    font-weight: 400;
    margin: 0;
    margin-bottom: 10px;
    color: #6b7280;
}
/*.my-video-video-portrait{
    border-radius: 0 0 16px 16px;
}*/

.r-myvideo #tabs-2 p{
    font-weight: 400;
}

.r-myvideo h4.modal-title{
    font-size: 1.175rem;
    line-height: 1.25rem;
    font-weight: 500;
    margin: 0;
}

.r-myvideo h1.text-lg {
    font-size: 1.5rem;
}

.r-myvideo .nav-tabs{
    border: 0;
}

.r-myvideo .nav-tabs .nav-item .nav-link{
    padding: 0 4px 4px 4px;
    border: 0;
    border-bottom: 1px solid #d3d9df;
    font-weight: 500;
    color: rgba(107,114,128);
    font-size: 14px;
    line-height: 1.25rem;
}

.r-myvideo .nav-tabs .nav-item .nav-link.active, .r-myvideo .nav-tabs .nav-item .nav-link:hover{
    color: var(--primary-color);
    background: transparent !important;
}

.r-myvideo .tab-content h2#timeline-title, h2{
    color: #000;
}

.r-myvideo .res-d button , .r-myvideo .res-d button{
    padding: 5px 18px;
    background: #fff !important;
    margin: 0;
    color: var(--primary-color) !important;
}


/*custom style*/

label{
    font-size: 13px;
}
.card{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 6px;
}

.card-header h6 {
    color: #343b76 !important;
    font-size: 17px;
    font-weight: 600 !important;
}
.card-orientation{
    transition:all 0.3s ease;
    cursor:pointer;
}

.card-orientation:hover{
    background-color: var(--primary-color);
    color:#fff;
}
.disabled .card.card-orientation {
    pointer-events: none;
}

@media (min-width: 768px){
.sidebar .nav-item .nav-link span {
    font-size: 1rem;
    display: inline;
}
}


.page-header{
    font-size: 1.75rem;
    color: black;
    font-weight: 600;
    line-height: 1.2;
}

.tab-pane ul{
    text-align: center;
    border: 0;
}

.circle-i i{
    font-size: 24px;
}

/*.c-choice{
    max-height: 250px;
    overflow: hidden;
    overflow-y: scroll;
}*/

.c-choice span{
    display: flex;
    align-items: center;
}

#thumbnail-div{
    position: relative;
}

.bottomText{
    position: absolute;
    bottom: 40px;
    padding: 8px;
    left: 48%;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

.leftText{
    position: absolute;
    top: 45%;
    left: 80px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

.rightText{
    position: absolute;
    top: 45%;
    right: 80px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

#video .tab-pane .tab-content{
    height: 350px;
    background: #f1f4f9;
    border-radius: 10px;
}

#giphy.tab-pane .tab-content, #pexel.tab-pane .tab-content{
    height: 380px;
}

 /*.c-h{
     height: 460px;
 }*/

#upload, #record{
    height: 100%;
    width: 100%;
}





#video .show_result_video{
    margin-top: 10px;
}

#pexel .input-group-prepend.form-group,
#giphy .input-group-prepend.form-group{
    position: relative;
    margin-top: 17px;
}

#video figure, #giphy figure, #pexel figure{
    width: 100% !important;
    height: 80px !important;
}

#video img, #giphy img, #pexel img{
    height: 100% !important;
    object-fit: cover;
    
}


#giphy .form-group span, #pexel .form-group span{
    position: absolute;
    top: 10px;
    left: 15px;
}

#giphy .form-group input, #pexel .form-group input{
    padding-left: 36px;
}

.c-img img{
    cursor: pointer;
    overflow: hidden;
    outline: none;
    pointer-events: auto; 
    height: 100px;
    background-size: cover;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    transition: all .3s linear 0s;
    border: 0 solid #4cd982;
    background-position: 50%;
    border-radius: 10px;
    margin-bottom: 5px;
}


.c-img::-webkit-scrollbar, .c-choice::-webkit-scrollbar{
  width: 6px;
}

.c-img::-webkit-scrollbar-thumb, .c-choice::-webkit-scrollbar-thumb{
  background-color: #adadad;
  border-radius: 20px;
}


.custom-next .border{
    height: 36px;
    width: 144px;
    background: #fff !important;
    border-color: var(--primary-color) !important;
}




.c-pic i.fa-user-circle{
    background: #fbf7ec;
}


.video-left-top{
    border-bottom: 1px solid #ccc;
}
.video-left-top .nav-link{padding: .5rem 0.2rem;}

.btn-group .btn{
    margin-right: 10px;
}

.file-upload-wrapper{
    border: 2px dashed #d0d2d3 !important;
    height: 144px;
    width: 100%;
    position: relative;
    
}

.file-upload-wrapper input{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100% !important;
    width: 100%;
    opacity: 0;
    position: absolute;
    top:0;
    cursor: pointer;
}

.c-profile .c-icon{
    font-size: 16px;
    position: absolute; 
    top: 15px; 
    right: 15px;
}

.c-profile .fa-pen{
    color: var(--primary-color);
}

.bg-b.active{
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #fff;
}

.bg-b.active.disabled{
    
}

.bg-b .bg-b-i{
    background: transparent;
    height: 50px;
    width: 50px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-b.active p{
    color: #fff !important;
}

.bg-b.active i{
    color: var(--primary-color);
}

.bg-b.active .bg-b-i {
    background: #fff;
    height: 50px;
    width: 50px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-b .bg-b-t{
    margin-left: 20px;
}

.bg-b .bg-b-t h3{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.bg-b .bg-b-t p{
    margin: 0;
    font-weight: 400;
    color: #7f7f7f;
}

/*#record_div{
    height: 420px !important;
}*/

#record_div .video-js{
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

#record_div .vjs-control-bar{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#upload {
    margin-top: 50px;
}

.scr-vid #btn-stop-recording{
    opacity: 1;
    color: #fff !important;
    background: #e74a3b !important;
    border: 1px solid #e74a3b !important;
}

.scr-vid #btn-stop-recording:hover{
    color: #e74a3b !important;
    background: #fff !important;
}

.scr-vid #btn-stop-recording i{
    font-size: 20px;
}

.scr-vid #btn-stop-recording i:before{
    /*color: #fff !important;*/
    color: #e74a3b !important;
}

.scr-vid #btn-stop-recording i:after{
    /*color: #e74a3b !important;*/
    color: #fff !important;
}

.scr-vid #btn-stop-recording:hover i:before{
    color: #fff !important;
    /*color: #e74a3b !important;*/
}

.scr-vid #btn-stop-recording:hover i:after{
    color: #e74a3b !important;
    /*color: #fff !important;*/
}
.all_video .Campaign-title h6 a{
    color: var(--primary-color);
    font-weight: 700;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before{
    background-color: rgb(54 208 156 / 50%);
}
.all_video .custom-control-input:checked~.custom-control-label::before{
    border-color: #ff960e;
    background-color: #ff960e;   
}

.all_video p{
    margin-bottom: 0;
}
.all_video .video_duration {
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
    font-weight: normal;
    font-size: 0.8rem;
    line-height: 1.2;
    color: white;
    background-color: rgb(82 82 82 / 79%);
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem;
}
.dropdown-menu{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.all_video .dropdown-menu .kt-nav{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

.all_video .dropdown-menu .kt-nav a{
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    -webkit-box-align: center;
    align-items: center;
    padding: 0.55rem 1.75rem;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    color: var(--second-color);
}

.all_video .dropdown-menu .kt-nav a:hover{
    background: #ebf7f5;
}

.all_video .dropdown-menu .kt-nav a i{
    margin-right: 10px;
}

.all_video .gallery-content {
    
    padding: 1.8rem 4.25rem;
    margin-bottom: 0;
    position: relative;
    min-height: auto;
}


.all_video .statics-count {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 0!important;
    margin-right: 15px;
    color: #4e568d;
}

.all_video .card-semisecondary-content {
    font-size: 14px!important;
    margin-bottom: 0!important;
    line-height: 1.4;
    color: #4e568d;
    font-weight: 400 !important;
}


.image-card .overlay i{
    cursor: pointer;
    color: var(--primary-color);
}

.image-card .overlay{
    position: absolute;
    background: #000000ad;
    height: 100%;
    width: 100%;
    color: #fff;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    transition: all .5s ease-out;
    opacity: 0;
}

.image-card:hover .overlay{
    opacity: 1;
}

button.confirm{
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border-color:var(--primary-color) !important;
}
button.confirm:hover, button.confirm:focus{
    border-color: var(--primary-hover-color) !important;
    background-color:var(--primary-hover-color) !important;
}
form.d-sm-inline-block input{
    border: 1px solid var(--primary-color) !important;
}

form.d-sm-inline-block button{
    background: var(--primary-color) !important;
    color: #fff !important;
    padding: 0 20px;
    font-size: 16px;
}

.row.section3 .card div.text-center{
    transition: all .5s ease-in-out;
    cursor: pointer;
}

#pagination{
    display: flex;
    justify-content: flex-end;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.view_page div.h5{
    font-size: 14px;
}

.view_page .r-bold{
    font-weight: 600;
}

.table-responsive .dataTables_length label{
    margin-bottom: 0;
}

.ctav i{
    filter: grayscale(100%);
}

.ctav i.active{
    filter: grayscale(0%);
}

video {
    margin-bottom: -4px;
}

.ser a.btn{
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 8px 12px !important;
}

.ser a.btn i{
    color: #fff !important;
}

.dashboard .section4 h4{
    font-size: 20px;
    color: var(--second-color);
    font-weight: 600;
}

.dashboard .section4 ul{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.dashboard .section4 ul li{
    padding: 7px 0;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}
.dashboard .section4 ul li a{
    color: var(--second-color);
}

.dashboard .section4 ul li a:hover {
    color: var(--primary-color);
}

#dataTable_audio_resp_list_length {
    margin-top: 10px;
}

input.form-control.form-control-sm{
    height: 34px !important;
    border-radius: 6px;
}
.center-v .nav-tabs .nav-item{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 30px;
}

.center-v .nav-tabs .nav-item .nav-link{
    border-bottom: none;
    background: #fff !important;
    width: 110px;
    height: 95px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.center-v .nav-tabs .nav-item .nav-link.active{
    background: #fff !important;
}

.center-v .nav-tabs .nav-item .nav-link .circle-i{
    margin-bottom: 10px;
}
.center-v .h3{
    color: #3F4254;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
}
.video_divs .video_player .video{
    position: relative;
}
.vjs-custom-playbutton{
    background-color:transparent;
    border:0;
}
.btn{
    border-radius: 6px;
}

.btn.disabled, .btn:disabled{
    cursor: not-allowed;
}
.btn-link{
    color: var(--primary-color);
}
.btn-link:hover{
    color: var(--primary-hover-color);
}
.btn-default {
    color: #3a3b45;
    background-color: #eff4fa;
    border-color: #eff4fa;
}
.btn-default:hover, .btn-default:focus {
    color: #3a3b45;
    background-color: #dde2f1;
    border-color: #d4daed;
}
.btn-primary, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover, .btn-primary:focus{
    border-color: var(--primary-hover-color);
    background-color:var(--primary-hover-color);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: var(--primary-color);
    background-color: var(--white-color);
    border-color: var(--primary-color);
}
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-outline-white{
    color: var(--primary-color);
    background-color: var(--white);
    border-color: var(--primary-color);
}
.btn-outline-primary:hover, .btn-outline-white:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
#content .container-fluid{
    padding: 0;
    margin: 0;
}
.left-logo{
    text-align: center;
    margin-bottom: 50px;
}

.left-logo h1{
    font-weight: 700;   
}

.left .form-wraper{
    box-shadow: 0 0 4px rgb(0 0 0 / 40%);
    border-radius: 10px;
    padding: 50px;
    background-color: #ffffff;
    margin-top:100px;
}

.shadow{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.shadow-r{
    box-shadow: .125rem 0 .25rem rgba(0,0,0,.075)!important;
}

.left .form-wraper .form-group {
    margin-bottom: 25px;
}

.left .form-wraper .form-group{                
    font-family: 'Gotham-Light';
}

.left .form-wraper .form-group .form-control{
    border-color: #B7B7B7;
    padding: 10px 10px;
    color: #495057 !important;
    line-height: 1.5;
}

.form-wraper form .btn {
    background-color: #ffc107 !important;
    background-image: -webkit-linear-gradient(0deg, #f66809 0%, #ff4100 100%) !important;
    display: block;
    width: 100%;
    margin-bottom: 15px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
    padding: 10px 10px;
    border-color: transparent !important;
    color: #343434 !important;
    font-weight: 700;
}

/* front-dashboard*/
.front-db{
    padding: 45px;
    background-image: url(../img/bg1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
}

.front-db .left{
    background: #eaeff9;
    border-radius: 10px;
    padding: 30px;
}

.front-db .left .bg-img{
    border-radius: 10px;
}

.front-db .left .on-b{
    position: relative;
}

.front-db .tools{
    position: absolute;
    top: 6px;
    right: 15px;
}

.front-db .on-b .left-arrow{
    position: absolute;
    height: 20px;
    left: 10px;
    top: 10px;
}

.front-db .on-b h5{
    color: white;
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-size: 14px;
    font-weight: 700;
}

.front-db .on-b h5 span{
    font-weight: 400;
}

.front-db .tools img{
    height: 24px;
    background:#00000040;
    border-radius: 6px;
    padding: 4px;
}


.left .radio-toolbar input[type="radio"]{
    opacity: 0;
    position: fixed;
    width: 0;
}

.left .radio-toolbar{
    position: relative;
    background: white;
    width: 80%;
    border-radius: 50px;
    padding: 10px 65px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(140,152,164,.2)!important;
}

.left .radio-toolbar label span{
    position: absolute;
    top: 10px;
    left: 20px;
    border-radius: 50%;
    padding: 1px 8px;
    text-align: center;
    background: #d3d9df;
}

.right {
    padding: 150px 100px;
}

.right h4 span{
    color: #ff4100;
}

.right button{
    border: 1px solid #fe3566;
    padding: 10px 20px;
    background: #fe3566;
    color: white;
    font-weight: 700;
    /*background-image: -webkit-linear-gradient(0deg , #f66809 0%, #ff4100 100%);*/
}

.right button a{
    color: white;
}



/* new video */

.bg-image{
    /*background-image: url(asset/image/bg1.jpg);*/
    height: 100vh; 
    box-shadow: 0px 0px 40px 20px #ddd inset;
}

.bg-image .c-b{
    border: 1px solid #ddd;   
    padding: 0;
    padding-bottom: 50px;
    position: relative;
    box-shadow: rgb(0 0 0 / 10%) 0px 4px 12px;
}

.c-b ul.nav.nav-tabs{
    position: absolute;
    left: -172px;
}

.bg-image .nav-tabs .nav-item{
    border: 1px solid #ddd;
}

.bg-image .nav-tabs {
    border-bottom: none;
}

.new-video{
    text-align: center;
}

.tab-2 h6, .tab-3 h6{
    margin-top: 20px;
}

/*my-video*/
.r-myvideo #tabs-2 p{
    font-weight: 400;
}

.r-myvideo h4.modal-title{
    font-size: 1.175rem;
    line-height: 1.25rem;
    font-weight: 500;
    margin: 0;
}

.r-myvideo h1.text-lg {
    font-size: 1.5rem;
}

.r-myvideo .nav-tabs{
    border: 0;
}

.r-myvideo .nav-tabs .nav-item, .new-video .nav-item{
    border: 0;
}

.r-myvideo .nav-tabs .nav-item .nav-link{
    padding: 0 4px 4px 4px;
    border: 0;
    border-bottom: 1px solid #d3d9df;
    font-weight: 500;
    color: rgba(107,114,128);
    font-size: 14px;
    line-height: 1.25rem;
}

.r-myvideo .nav-tabs .nav-item .nav-link.active, .r-myvideo .nav-tabs .nav-item .nav-link:hover{
    color: var(--primary-color);
    background: transparent !important;
}
.r-myvideo .shadow{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.r-myvideo .switch input{ 
    display:none;
}

.r-myvideo .switch {
    display: inline-block;
    width: 54px;
    height: 25px;
    margin: 0;
    position: relative;
    transform: scale(.8);
    
}
/* Style Wired */
.r-myvideo .slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
    transition:.4s;
}

.r-myvideo .slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
    left: 0;
}

.r-myvideo input:checked + .slider:before{
    transform:translateX(30px);
    background: var(--primary-color);
}

.r-myvideo input:checked + .slider{
    box-shadow:0 0 0 2px var(--primary-color),0 0 2px var(--primary-color);
}

/* Style Flat */
.r-myvideo .switch.flat .slider {
box-shadow:none;
}
.r-myvideo .switch.flat .slider:before {
background:#FFF;
}
.r-myvideo .switch.flat input:checked + .slider:before {
background:white;
}
.r-myvideo .switch.flat input:checked + .slider {
background:limeGreen;
}

.r-myvideo .edit-vform{
    position: relative;
}

.r-myvideo i.fas.fa-info-circle{
    margin: 0 5px;
}

.has-search{
    position: relative;
}

.has-search input{
    padding-left: 34px;
}

.has-search span{
    position: absolute;
    top: 10px;
    left: 10px;
}

.form-check label.c-i{
    font-size: 14px;
    border: 1px solid #ced4da;
    padding: 4px;
    border-radius: 4px;
    margin-left: 10px;
}


/*custom style*/

.bg-gradient-primary {
    background-color: #fff;
    background-image: none;
    border-right: 1px solid var(--light-color);
}
footer.sticky-footer{
    margin-top: 50px;
}

footer a{
    color: var(--primary-color) !important;
}

footer i.fa-heart{
    color: #ff1d25 !important;
}

.right-banner{
    padding: 20px;
}

i.fas, i.fa, i.far{
    font-family: 'Font Awesome 5 Free' !important;
}
a:hover{
    text-decoration: none;
}


.dash-subheading{
    color: var(--secondary);
    font-weight: 500;
    margin-top: 5px;
}

/*.btn{*/
/*    background: #fff ;*/
/*    border-color: var(--primary-color) ;*/
/*    color: var(--primary-color) ;*/
/*    padding: 0.6rem;*/
/*}*/

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #91d9b396;
}
.btn:hover a, .btn.active a{
    color: #fff !important;   
}
.topbar.navbar-light .navbar-nav .nav-item .nav-link{
    color:var(--text-dark);
}
.border{
    border: 1px solid #d1d3e2 !important;
}
.sidebar .sidebar-brand{
    height: 4.375rem;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 0;
    text-align: center;
    text-transform: unset;
    letter-spacing: initial;
}
.sidebar-dark .sidebar-brand{
    color: var(--primary-color);
    border-bottom: 1px solid #e8f8ef;
}

.sidebar-dark .nav-item .nav-link{
    color: var(--second-color);
    font-size: 14px;
    font-weight: 500;
    padding:0.5rem 1rem;
}

.sidebar-dark .nav-item .nav-link i{
    color: var(--second-color);
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse]::after{
    color: var(--text-color);
}

.sidebar-dark .nav-item .nav-link:hover, .sidebar-dark .nav-item .nav-link:focus{
    color: #fff;
    background: var(--gradient-color);
}

.sidebar-dark .nav-item .nav-link:hover i, .sidebar-dark .nav-item .nav-link:focus i{
    color: #fff;
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse]:hover::after{
    color: #fff;
}

.sidebar-dark .nav-item .nav-link.active{
    color: #fff;
    background: var(--gradient-color);
    border-top: 1px solid #e8f8ef;
}

.sidebar-dark .nav-item .nav-link.active i{
    color: #fff;
}

.sidebar-dark .nav-item .nav-link[data-toggle=collapse].active::after{
    color: #fff;
}

.sidebar .sidebar-heading {
    padding: 0 1rem;
    font-weight: 600;
    font-size: 12px;
    margin-top: 10px;
    color: var(--primary-color);
}


.sidebar-dark hr.sidebar-divider{
    border-top: 1px solid #e8f8ef;
}


.sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item{
    font-size: 12px;
    color: var(--second-color);
    padding: 1rem;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active, .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active{
    color: var(--primary-color);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover, .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover{
    background: var(--primary-color);
    border-radius:0;
    color:var(--white);
    margin:0;
}
.sidebar .nav-item .collapse, .sidebar .nav-item .collapsing{
    margin: 0;
}
.sidebar .nav-item .nav-link .img-profile, .topbar .nav-item .nav-link .img-profile{
    height: 3rem;
    width: 3rem;
}
.r-myvideo .res-d button:focus, .r-myvideo .res-d button:focus, .r-myvideo .res-d button.active{
    background: var(--primary-color) !important;
    color: #fff !important;
}

.r-myvideo i.fas.fa-mobile, .r-myvideo i.fas.fa-desktop{
    font-size: 16px;
    color: #000;
}

#wrapper #content-wrapper{
    background-color: var(--light-color);
    overflow:inherit;
}


.dashboard .section2 .card .h5{
    color: var(--second-color);
}
@media (min-width: 768px){
.sidebar .nav-item .nav-link span {
    font-size: 1rem;
    display: inline;
}
}


.page-header{
    font-size: 1.75rem;
    color: black;
    font-weight: 600;
    line-height: 1.2;
}

.tab-pane ul{
    text-align: center;
    border: 0;
}

.tab-pane ul li a{
    color: var(--second-color) !important;
    font-weight: 500;
    border-radius: 4px;
}

.tab-pane ul li a:hover{
    border-color: transparent !important;
}

.tab-pane ul li a.active{
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border: 0;
    border-bottom: 2px solid;
    border-radius: 0;
}

.circle-i i{
    font-size: 24px;
}

.tab-3 .c-img, .tab-2 .c-img{
    max-height: 312px;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 10px;
}

.tab-2 #video .c-img{
    max-height: 380px;
}


/*.overlay_text{*/
/*    font-size: 1.25rem;*/
/*    position: absolute;*/
/*    top: 20px;*/
/*    left: 20px;*/
/*    color: #fff;*/
/*    font-weight: 600;*/
/*    z-index: 1;*/
/*}*/

.overlay_text:not(:empty) {
        visibility: visible;
    }
.overlay_text:empty {
    visibility: hidden;
}
#thumbnail-div{
    position: relative;
}

.topText{
    position: absolute;
    top: 40px;
    padding: 8px;
    left: 48%;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
    z-index: 1;
}

.bottomText{
    position: absolute;
    bottom: 40px;
    padding: 8px;
    left: 48%;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

.leftText{
    position: absolute;
    top: 45%;
    left: 80px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

.rightText{
    position: absolute;
    top: 45%;
    right: 80px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.41); 
    border-radius: 4px;
}

.overlay_text, .inputTextThumb{
    position: absolute;
    padding: 8px;
    background: rgba(0, 0, 0, 0.41);
    border-radius: 4px;
    z-index: 1;
}

.top_left{
    top: 60px;
    left: 20px;
}

.top_right{
    top: 60px;
    right: 20px;
}

.bottom_left{
    bottom: 60px;
    left: 20px;
}

.bottom_right{
    bottom: 60px;
    right: 20px;
}




.overlay_text_pt_1{
    top: 50px;
    left: 20px  !important;
}

.overlay_text_pt_2{
    top: 50px;
    left: 50%  !important;
    transform: translateX(-50%)  !important;
}

.overlay_text_pt_3{
    top: 50px;
    right: 20px  !important;
}

.overlay_text_pt_4{
    top: calc(100% - 55%);
    left: 20px  !important;
}

.overlay_text_pt_5{
    top: 50%  !important;
    left: 50%   !important;
    transform: translate(-50%, -50%)  !important;
}

.overlay_text_pt_6{
    top: 50%  !important;
    transform: translateY(-50%);
    right: 20px  !important;
}

.overlay_text_pt_7{
    bottom: 50px ;
    left: 20px;
}
.overlay_text_pt_8{
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.overlay_text_pt_9 {
    bottom: 50px;
    right: 20px;
}

.div_cta .overlay_text{ 
    background: rgb(0 0 0 / 0%);
    padding: 0;
    display: flex;
    /*height: 100%;*/
    /*width: 100%;*/
    /*position: absolute;*/
    /*z-index: 1;*/
    /*top: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*transform: none;*/
}

.div_cta{
    position: absolute;
    width: 100%;
    height: 100%;
}

.div_cta a{
    padding: 10px 16px;
    margin: 5px;
    border-radius: 50px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    white-space: pre;
    /*background: rgba(0, 0, 0, 0.11);*/
}
./*div_cta a:hover, .div_cta .overlay_text:hover a{
    transform: translateY(-7px) !important;
}*/
.div_cta .overlay_text, .div_cta .overlay_text a {
    transition: all 0.3s ease 0s;
}
.div_cta .overlay_text_pt_1{
    top: 50px !important;
}

.div_cta .overlay_text_pt_2{
    top: 50px !important;
}

.div_cta .overlay_text_pt_3{
    top: 50px !important;
}
/*.div_cta .overlay_text_pt_4{*/
/*    align-items: center;*/
/*    justify-content: start;*/
/*}*/

/*.div_cta .overlay_text_pt_5{*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.div_cta .overlay_text_pt_6{*/
/*    align-items: center;*/
/*    justify-content: end;*/
/*}*/

/*.div_cta .overlay_text_pt_7{*/
/*    align-items: end;*/
/*    justify-content: start;*/
/*}*/

/*.div_cta .overlay_text_pt_8{*/
/*    align-items: end;*/
/*    justify-content: center;*/
/*}*/

/*.div_cta .overlay_text_pt_9 {*/
/*    align-items: end;*/
/*    justify-content: end;*/
/*}*/



#video .tab-pane .tab-content{
    height: 350px;
    background: #f1f4f9;
    border-radius: 10px;
}

#giphy.tab-pane .tab-content, #pexel.tab-pane .tab-content{
    height: 380px;
}

#upload, #record{
    height: 100%;
    width: 100%;
}


#upload label{
    height: 300px;
    width: 400px;
    border-radius: 10px;
    border: 2px dashed #a6adb7;
}

#record, #upload, #video, #giphy, #pexel{
    background: #fff;
}


#upload label i{
    font-size: 40px;
    margin-bottom: 10px;
    transition: all .5s ease-out;
}

#record label i{
    font-size: 20px;
}

#upload label p{
    color: #6d7c90;
}

#upload label p .text-success{
    color: #bfc6d0 !important;;
}

#upload label span{
    padding: 6px 10px;
    border-radius: 4px;
}

#upload label:hover i{
    color: #000;
}

#video, #giphy, #pexel{
    height: 100%;
    overflow: hidden;
    margin-top: 10px;
}

#video .show_result_video{
    margin-top: 10px;
}

#pexel .input-group-prepend.form-group,
#giphy .input-group-prepend.form-group{
    position: relative;
    margin-top: 17px;
}

#video figure, #giphy figure, #pexel figure{
    width: 100% !important;
    height: 80px !important;
}

#video img, #giphy img, #pexel img{
    height: 100% !important;
    object-fit: cover;
    
}
#giphy .form-group input, #pexel .form-group input{
    padding-left: 36px;
}

.c-img img{
    cursor: pointer;
    overflow: hidden;
    outline: none;
    pointer-events: auto; 
    height: 100px;
    background-size: cover;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
    transition: all .3s linear 0s;
    border: 0 solid #4cd982;
    background-position: 50%;
    border-radius: 10px;
    margin-bottom: 5px;
}


.c-img::-webkit-scrollbar, .c-choice::-webkit-scrollbar{
  width: 6px;
}

.c-img::-webkit-scrollbar-thumb, .c-choice::-webkit-scrollbar-thumb{
  background-color: #adadad;
  border-radius: 20px;
}


.custom-next .btn{
    height: 36px;
    width: 144px;
    background: #fff !important;
    border-color: var(--primary-color) !important;
}

.custom-next .btn:hover{
    background: var(--primary-color) !important;
    color: #fff !important;
}
.toast{
    opacity: 1;   
    padding: 22px 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .2px;
    position: fixed;
    right: 30px;
    top: 15px;
    z-index: 9999;
    border-radius: 4px;
}

.toast a{
    position: absolute;
    right: -5px;
    top: 4px;
    color: #fff;
}

.toast i{
    margin-right: 10px;
}

.toast.toast_name_1{
    background: var(--primary-color);
    border-bottom: 0;
    color:#ffffff;
}

.toast.toast_name_2 i{
    color: #ffd9e8;   
}

.toast.toast_name_2{
    background: #d32f2f;
    border-bottom: 0;
    color:#ffffff;
}

#formContent h1{
    color: rgba(107,114,128);
    font-size: 18px;
}

.profile-edit{
    background: #fff;
    padding: 10px;
}

#formContent h3{
    font-size: 16px;
}

#formContent input{
    border-color:rgba(209,213,219);
    color: #000;
}

/*#formContent button{*/
/*    background: var(--primary);*/
/*    color: #fff;*/
/*}*/

.c-pic{
    position: relative;
    margin-bottom: 10px;
    text-align: center;
}

.c-pic img{
    height: 100px;
}

.c-pic i.fa-user-circle{
    font-size: 120px;
    color: #cfd4dd;
}

.c-pic div{
    position: absolute;
    bottom: 0px;
    left: 78px;
    font-size: 16px;
    background: #dee7f2;
    border-radius: 50px;
    padding: 4px 8px;
    color: #3e4043;
}

.dashboard h1.h3{
    color: black;
    font-weight: 600;
}

.dashboard .s1-left h1.h3{
    color: #dbfff3;
}

.dashboard a.btn{
    font-size: 14px;
    border-radius: .35rem;
    padding: .375rem .75rem;
}

.dashboard a.btn i{
    color: var(--primary-color) !important;
}

.dashboard a.btn:hover i {
    color: #fff !important;
}


.dashboard .r1 .h3{
    color: var(--second-color);
    font-size: 14px;
    font-weight: 400;
}

.dashboard .r1 .h5{
    font-size: 22px;
}

.dashboard .c-i{
    border-radius: 50px;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.dashboard .c-i span{
    padding: 0;
    border-radius: 50px;
    background: #b4c2ea;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}


.dashboard .c1 .c-i span{
    background: #b4c2ea;
    /*color: #4e73df;*/
}

.dashboard .c1 .c-i{
    background: #edf0fa;
}

.dashboard .c2 .c-i span{
    background: #a0e2d1;
     /*color: #1cc88a;*/
}

.dashboard .c2 .c-i{
    background: #e7f8f3;
}

.dashboard .c3 .c-i span{
    background: #a4dae8;
    /*color: #36b9cc;*/
}

.dashboard .c3 .c-i{
    background: #e9f6f9;
}

.dashboard .c4 .c-i span{
    background: #ff95cf;
    /*color: #f6c23e;*/
}

.dashboard .c4 .c-i{
    background: #fdf1f8;
}

.dashboard .c5 .c-i span{
    background: #f0e0b9;
    /*color: #f6c23e;*/
}

.dashboard .c5 .c-i{
    background: #fbf7ec;
}
.dashboard .c6 .c-i span{
    background: #f0b9b9;
    /*color: #f6c23e;*/
}

.dashboard .c6 .c-i{
    background: #fbecec;
}


.dashboard .c-i i{
    font-size: 20px;
}

.dashboard .section1{
    margin-top: 50px;
}

/*.b-20{*/
/*    border-radius: 20px;*/
/*}*/

/*.dd .relative{*/
/*    height: 150px;*/
/*}*/

/*.dd .s1-left{*/
/*    position: relative;*/
/*}*/

/*.dd .s1-left img{*/
/*    position: absolute;*/
/*    height: 270px;*/
/*    bottom: -22px;*/
/*}*/

.dd .s1-right img {
    height: 50px;
}

.myvideo-cta p{
    margin: 5px 0;
    font-weight:500;
}
 
.myvideo-cta .tab-pane video{
    height: 100%;
    width: 100%;
}

.bg-b{
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    cursor: pointer;
}

.bg-b.disabled.active, .bg-b.disabled{
    border: 1px solid #E4E6EF;
    border-radius: 6px;
    padding: 15px;
    cursor: not-allowed;
    background: #F3F6F9;
    color: #b5b5c3;
}

.bg-b .bg-b-t{
    margin-left: 20px;
}

.bg-b .bg-b-t h3{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.bg-b .bg-b-t p{
    margin: 0;
    font-weight: 400;
    color: #7f7f7f;
}

.bg-b.disabled.active .bg-b-t p, .bg-b.disabled .bg-b-t p, .bg-b.disabled.active i, .bg-b.disabled i{
    color: #b5b5c3;
}

.bg-b.disabled.active p, .bg-b.disabled p{
    color: #b5b5c3 !important;
}

.bg-b.active.disabled .bg-b-i, .bg-b.disabled .bg-b-i{
    background: transparent;
}

#record_div .video-js{
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

#record_div .vjs-control-bar{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#upload {
    margin-top: 50px;
}
.table{
    color:#333;
}

.custom-table thead{
    background: #fff;
    color: #000;
}

.custom-table thead th, .custom-table tbody th{
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 40px;
    font-weight: 500;
}

.custom-table tbody{
    background: #fff;
}
.custom-table .nav-tabs .nav-item{
    padding: .5rem;
}
table td .play_btn i, table td .pause_btn i{
    font-size: 2em;
}

.rounded-tab .nav-tabs .nav-item .nav-link, .new-video a.nav-link{
    border-bottom: none;
    background: #fff;
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 400;
    color: rgba(107,114,128);
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    margin-right: 8px;
}

.rounded-tab .nav-tabs .nav-item .nav-link.active, .rounded-tab .nav-tabs .nav-item .nav-link:hover,
.new-video a.nav-link.active, .new-video a.nav-link:hover{
    background: var(--primary-color) !important;
    color: #fff;
}

.btn-xs{padding: .2rem .4rem; font-size: .75rem;}

.btn-tools .btn{
    margin-left: 6px;
    padding: 8px 14px;
}

.btn-tools a{
    color: var(--primary-color);
}

.btn-tools .btn.save{
    width: 100px;
    height: 37px;
}
.my_v_video{
    height: 414px; 
    position: relative;
}

.my_v_video video{
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.landscape-video-preview{
    height: auto;
    width: 100%;
    position: absolute;
    left: 0;
    top: -30px;
    transform-origin: left top;
    border-radius: 8px;
}
.portrait-preview{
    border-radius: 16px;
    top: -27px;
}

.c-h video{
    border: 1px solid #efefef !important;
    /*transform: rotateY(180deg);*/
    /*-webkit-transform:rotateY(180deg); */
    /*-moz-transform:rotateY(180deg); */
}

.modal .modal-body .info{
    font-size: 18px;
    margin-bottom: 20px;
}

.all_video .image-card img {
    padding: 0px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.all_video .badge{
    font-size: 12px;
    font-weight: 400;
    /*background: #ff960e;*/
    color: #fff;
}

.all_video .badge.associate{
    background: #30c1f6;
}

.all_video .Campaign-title h6 a{
    color: var(--primary-color);
    font-weight: 700;
}

.all_video .custom-control-input:checked~.custom-control-label::before{
    border-color: #ff960e;
    background-color: #ff960e;   
}

.all_video p{
    margin-bottom: 0;
}

.all_video .dropdown-menu .kt-nav{
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

.all_video .gallery-content {
    
    padding: 1.8rem 4.25rem;
    margin-bottom: 0;
    position: relative;
    min-height: auto;
}


.all_video .statics-count {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 0!important;
    margin-right: 15px;
    color: #4e568d;
}

.all_video .card-semisecondary-content {
    font-size: 14px!important;
    margin-bottom: 0!important;
    line-height: 1.4;
    color: #4e568d;
    font-weight: 400 !important;
}


.image-card {
    position: relative;
    width: 100px;
    height: 80px;
}

.image-card .overlay{
    position: absolute;
    background: #000000ad;
    height: 100%;
    width: 100%;
    color: #fff;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    transition: all .5s ease-out;
    opacity: 0;
}

.image-card:hover .overlay{
    opacity: 1;
}

.all_video .single{
    margin-bottom: 20px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 10px;
}

.all_video .single .border-bottom{
    border: 0 !important;
    border-radius: 10px;
    position:relative;
}

.all_video .table-header{
    padding-top: 15px;
    border-radius: 6px;
    color: #000;
    font-size: 13px;
    font-weight: 400;
}

.all_video .single .Action .view, .btn-custom-light{
    background: #e1f8f0d9 !important;
    color: var(--primary-color) !important;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 600;
    border-color: transparent !important;
}

.all_video .single .Action button.view:hover, .btn-custom-light:hover{
    background: var(--primary-color) !important;
    color: #fff !important;
    
}

.all_video .single .Action button.edit{
    background: #e1f8f0d9 !important;
    color: var(--primary-color) !important;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 600;
    border-color: transparent !important;
}

.all_video .single .Action button.edit:hover{
    background: var(--primary-color) !important;
    color: #fff !important;
}

.all_video .single .Action a.a-menu{
    border: 0 !important;
    font-size: 14px;
    padding: 4px 6px;
    background: #e1f8f0d9 !important;
    color: var(--primary-color) !important;
}

.all_video .single .Action a.a-menu:hover{
    background: var(--primary-color) !important;
    color: #fff !important ;
}

.all_video .single .Action a.a-menu [aria-expanded="true"]{
    background: var(--primary-color) !important;
    color: #fff !important ;
}

.all_video .single .btn.focus, .all_video .single .btn:focus{
    box-shadow: none;
}

.all_video .single p.sub-info a{
    color: var(--gray-dark);
}

.all_video .modal video{
    object-fit: cover
}

form.d-sm-inline-block input{
    border: 1px solid var(--primary-color) !important;
}

form.d-sm-inline-block button{
    background: var(--primary-color) !important;
    color: #fff !important;
    padding: 0 20px;
    font-size: 16px;
}


.row.section3 .card {
    background: var(--gradient-color);
}

.row.section3 .card h3 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
}

.row.section3 .card p {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}


.row.section3 .card p span{
    font-weight: 700;
}


.row.section3 .card i{
    font-size: 30px;
    color: #fff;
}

.row.section3 .card div.text-center{ 
    transition: all .5s ease-in-out;
    cursor: pointer;
}

.row.section3 .card div.text-center:hover{
    transform: scale(1.07);
}


#pagination .link{
    color: var(--primary-color) !important;
    border: 0 !important;
    margin-right: 8px;
    border-radius: 6px;
    background: #e1f8f0d9 !important;
}


.view_page div.h5{
    font-size: 14px;
}

.view_page .r-bold{
    font-weight: 600;
}

.table-responsive .dataTables_length label{
    margin-bottom: 0;
}

.ctav i{
    filter: grayscale(100%);
}

.ctav i.active{
    filter: grayscale(0%);
}

video {
    margin-bottom: -4px;
}

.ser a.btn{
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 100px !important;
    padding: 8px 12px !important;
}

.ser a.btn i{
    color: #fff !important;
}

.dashboard .section4 h4{
    font-size: 20px;
    color: var(--second-color);
    font-weight: 600;
}

#pagination .link:hover{
    color: #fff !important;
    background: var(--primary-color) !important;
}

#pagination .current, #pagination .current:hover{
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: 6px;   
}


#pagination .disabled:hover{
    color: var(--primary-color) !important;
    background: var(--light) !important;
}

.dashboard .section4 ul{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.dashboard .section4 ul li{
    padding: 7px 0;
    font-size: 14px;
    border-bottom: 1px solid #ddd;
}

.dashboard .section4 ul li a{
    color: var(--second-color);
}

.dashboard .section4 ul li a:hover {
    color: var(--primary-color);
}

#dataTable_audio_resp_list_length {
    margin-top: 10px;
}

input.form-control.form-control-sm{
    height: 34px !important;
    border-radius: 6px;
}
.form-control{
    height: calc(1.5em + .75rem + 5px);
}
.big-search {
    height: calc(1.5em + .75rem + 25px);
}
.big-search #search-clear{
    display:none !important;
    opacity:0 !important;
}
input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button {
    opacity: 0 !important;
}
ul.pagination{
    margin-top: 12px !important;   
}

ul.pagination .paginate_button .page-link, ul.pagination .paginate_button.disabled .page-link{
    margin-left: 10px;
    background: #e1f8f0d9;
    color: #000;
    border: 0;
    padding: 10px 20px;
    font-size: 13px;
    border-radius:4px;
}

ul.pagination .paginate_button.active .page-link{
    background: var(--primary-color);
    color: #fff !important;
    border-radius:4px;
}

ul.pagination .paginate_button:hover .page-link{
    color: #fff !important;
    background: var(--primary-color) !important;
}

ul.pagination .paginate_button.disabled:hover .page-link{
    color: #000;
}

ul.pagination .paginate_button.active:hover .page-link{
    color: #fff !important;   
}


.center-v .nav-tabs .nav-item{
    display: flex;
    justify-content: center;
    text-align: center;
    padding-bottom: 30px;
}

.center-v .nav-tabs .nav-item .nav-link{
    border-bottom: none;
    background: #fff !important;
    width: 110px;
    height: 95px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.center-v .nav-tabs .nav-item .nav-link.active{
    background: #fff !important;
}

.center-v .nav-tabs .nav-item .nav-link .circle-i{
    margin-bottom: 10px;
}


.center-v .h3{
    color: #3F4254;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
}

.u-submit{
    height: 100%;
    padding: 0;
    background: #fff;
}

.u-submit button{
    background: var(--primary-color) !important;
    color: #fff !important;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.3)!important;
    line-height: 20px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: bold;
    border: none;
    padding: 14px 24px;
    height: 50px;
}

.thankyou i{
    color: var(--primary-color);
    font-size: 30px;
    border: 1px solid var(--primary-color);
    border-radius: 100px;
    height: 60px;
    width: 60px;
    padding-top: 17px;
    background: #d1e6e8;
    box-shadow: 0px 0px 24px 10px #d1e6e8;
}

.video_divs .video_player .video{
    position: relative;
}

.btn.ctn{
    background: var(--primary-color) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
}

.btn.ctn:hover{
    opacity: .8;
}

.all_tools{
    height: 100%;
    position: relative;
    width: 100%;
}


/*.video-p{*/
/*    object-fit: cover;*/
/*}*/


.reply_divs.choice-c input {
	width: auto;
	height: 100%;
	appearance: none;
	outline: none;
	cursor: pointer;
	border-radius: 2px;
	padding: 4px 8px;
	background: #454857;
	color: #bdbdbdbd;
	font-size: 14px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	transition: all 100ms linear;
}

.reply_divs.choice-c input:checked {
	background-image: linear-gradient(180deg, #95d891, #74bbad);
	color: #fff;
	box-shadow: 0 1px 1px #0000002e;
	text-shadow: 0 1px 0px #79485f7a;
}

.reply_divs.choice-c input:before {
	content: attr(label);
	display: inline-block;
	text-align: center;
	width: 100%;
}

.first, .dot{
    border: 0 !important;
}

/*#pagination a.link:nth-child(1), #pagination a.link:nth-child(2),*/
/*#pagination a.link:nth-last-child(1) , #pagination a.link:nth-last-child(2) {*/
/*    color: var(--primary-color) !important;*/
/*}*/

.banner h5{
    font-size: 14px;
    color: var(--second-color);
    margin-top: 5px;
}

.reply-l{
    height: 300px;
}

.reply-l video{
    height: 100%;
    object-fit: cover;
}

.res-view{
    margin-right: 6px;
}

.res-view{
    background: #e1f8f0d9 !important;
    color: var(--primary-color) !important;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 600;
    border-color: transparent !important;
    opacity: .8;
}

.res-delete{
    background: #f320131f !important;
    color: #f32013 !important;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 600;
    border-color: transparent !important;    
    opacity: .8;
}


.res-view:hover{
    background: var(--primary-color) !important;
    color: #fff !important;   
}

.res-delete:hover{
    background: #f32013 !important;
    color: #fff !important;   
}

.dropdown-item.active, .dropdown-item:active{
    background-color: var(--primary-color);    
}

footer.sticky-footer .copyright {
    line-height: 1;
    font-size: 0.9rem;
}

.dropdown-menu.dropdown-menu-right .dropdown-item{
    font-size: 13px;
    padding: 7px 10px;
}

.dropdown-menu.dropdown-menu-right .dropdown-item:focus, .dropdown-menu.dropdown-menu-right .dropdown-item:hover{
    color: #fff;
    text-decoration: none;
    background-color: var(--primary-color);
}

.dropdown-menu.dropdown-menu-right .dropdown-item:hover i{
    color: #fff !important;
}

#logoutModal .logout{
    background: var(--primary-color) !important;
    color: #fff !important;
}

.sweet-alert .btn-danger:focus{
    box-shadow: none !important;
}

.joy-s{
    position: relative;
    height: 205px;
    width: 205px;
    margin: 0 auto;
}

.joy-s .btn{
    border-color: transparent !important;
    color: var(--secondary) !important;
    background: #fff !important;
    font-size: 14px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.joy-s .btn:hover, .joy-s .btn.active{
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

.joy-s .btn i {
    font-size: 20px;
    margin-bottom: 6px;
}

.joy-s .btn.disabled, .joy-s .btn.disabled:hover, .joy-s .btn.active.disabled{
    background: #F3F6F9 !important;
    color: #b5b5c3 !important;
    border: 1px solid #E4E6EF !important;
}

.joy-s .btn.disabled i:after{
    color: #b5b5c3 !important;
}

.joy-s .v1{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 100px;
    border-top-left-radius: 50px;
}

.joy-s .a1{
    position: absolute;
    right: 0;
    top: 0;
    height: 100px;
    width: 100px;
    border-top-right-radius: 50px;
}

.joy-s .t1{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100px;
    border-bottom-left-radius: 50px;
}

.joy-s .e1{
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100px;
    width: 100px;
    border-bottom-right-radius: 50px;
}



.btn-tools .modal .modal-body .nav{
    text-align: left;
}

.preview.navbar a.sidebar-brand{
    color: var(--primary-color);
    height: 4.375rem;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    padding: 1.5rem 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    z-index: 1;
}

.preview.navbar a.sidebar-brand i{
    font-size: 2rem;
}

.preview-video .video-p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    /*cursor: pointer;*/
    /*object-fit: cover;*/
    animation: 0.3s ease-out 0s 1 normal forwards running jBcSpD;
    background: transparent;
}

.preview-video .card{
    border-radius: 10px;
}
.preview .modal .modal-body{
    padding: 1rem;
}
.audio-clip-plyr .plyr--full-ui {box-shadow: 0 2px 4px rgb(0 0 0 / 10%);}
.plyr--audio .plyr__controls{
    background: linear-gradient(118deg, var(--primary-color) 60%, #0e1e40 60.5%) !important;
    color: var(--white) !important;
    border-radius: 4px !important;
}
.plyr--audio .plyr__control.plyr__tab-focus, .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true] {
    background: var(--tertiary-color) !important;
}
.plyr__controls .plyr__volume .plyr__control:hover, .plyr__controls .plyr__menu .plyr__control:hover {
    background: var(--primary-color) !important;
}
.plyr--full-ui input[type=range] {
    color:var(--white) !important;
}
.plyr__controls .plyr__controls__item.plyr__time {
    visibility:hidden;
}
.audio_span{
    position: absolute;
    left: 57%;
    color: #fff !important;
    top: 50%;
    transform: translateY(-50%);   
}
.resp-title-bar{
    background-color: var(--primary-color); width: 100%; padding: 5px 15px; color: #fff;text-align:center;
}
.response-preview-text{
    font-size:21px;
}
.bg-response-custom {
    position: absolute;
    fill: var(--primary-hover-color);
    opacity: 0.25;
    z-index: 0;
    width: 330px;
    height: 330px;
    bottom: 0;
    right: 0;
}
.bg-response-custom-audio {
    transform: rotate( -150deg );
}
/*.preview .c-s1 button:hover, .preview .c-s2 button:hover{*/
/*    opacity: 0.8;*/
/*}*/

.emojionearea .emojionearea-button>div, .emojionearea .emojionearea-picker .emojionearea-wrapper:after{
    transform: scale(1.2);
}

.emojionearea .emojionearea-picker{
    top: 404px !important;
    left: -15px;
    bottom: auto;
    right: auto !important;
    transform: scaleX(1);
}

.emojionearea .emojionearea-picker.emojionearea-picker-position-top{
    margin: 0 !important;
    position: absolute !important;
    top: auto !important;
    left: auto !important;
    bottom: 90px !important;
    right: 65px !important;
    
}

.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{
    transform: rotate(180deg);
    top: -12px;
    left: 23px;
    bottom: auto !important;
    right: auto !important;
}

.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{
    margin-top: 10px;
}

.emojionearea .emojionearea-picker .emojionearea-search>input{
    height: 36px !important;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.tool_cc{
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.nav-pills .nav-link{
    margin-bottom: 10px;
    color: var(--primary-color);
    
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--primary-color);
}

.nav-pills .nav-link:hover {
    background-color: var(--primary-color);
    color: #fff;
}


.vertical-tabs .tab-pane .h5{
    font-weight: 600;
    font-size: 16px;
    color: var(--second-color);
}

.vertical-tabs .size_opt{
    position: relative;
}

.vertical-tabs .size_opt input{
    position: absolute;
    height: 100% !important;
    width: 100% !important;
    visibility: hidden;
}

.vertical-tabs .size_opt input + h4{
    background: #fff;
    font-size: 14px;
    padding: 15px 20px;
    color: var(--primary-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s ease-out;
}

.vertical-tabs .size_opt input:checked + h4, .size_opt input:hover + h4{
    background: var(--primary-color);
    color: #fff;
}

.vertical-tabs select.custom-select{
    height: 50px;
}

.shareandembed__lock {
    padding: 1rem 1.2rem 0;
    position: relative;
}
.lockcheckbox input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    outline: none;
}
.lockcheckbox span {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5rem;
    width: 2.5rem;
    background: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIj48Zz48Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yNTQuMTYsMjQxLjE0VjEyNy4wOEMyNTQuMTYsNTYuODk1LDE5Ny4yNjUsMCwxMjcuMDgsMFMwLDU2Ljg5NSwwLDEyNy4wOHY1OC45MjRoNDcuODA0VjEyNy4wOCAgICBjMC00My43MTIsMzUuNTYzLTc5LjI3NSw3OS4yNzYtNzkuMjc1YzQzLjcxMywwLDc5LjI3NiwzNS41NjMsNzkuMjc2LDc5LjI3NXYxMTQuMDZoLTQxLjYyMlY1MTJINTEyVjI0MS4xNEgyNTQuMTZ6ICAgICBNMzY5LjA5NSwzNzguMDY0djY3LjM2NWgtNjEuNDU1di02Ny4zNjZjLTExLjg3NS05LjM3NS0xOC44NTMtMjMuNjM1LTE4Ljg1My0zOC45MDZjMC0yNy4zMzksMjIuMjQyLTQ5LjU4LDQ5LjU4MS00OS41OCAgICBjMjcuMzM5LDAsNDkuNTgsMjIuMjQyLDQ5LjU4LDQ5LjU4QzM4Ny45NDcsMzU0LjQyOSwzODAuOTcsMzY4LjY4OSwzNjkuMDk1LDM3OC4wNjR6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIiBzdHlsZT0iZmlsbDojMTE2QkYyIj48L3BhdGg+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPg==") center center/2.5rem 1.5rem no-repeat;
}
.lockcheckbox input:checked ~ span {
    background: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTExLjk5OSA1MTEuOTk5IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTEuOTk5IDUxMS45OTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiI+PGc+PGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMzg1LjAwMiwyNDEuMTM5aC0xLjkyM1YxMjcuMDhDMzgzLjA3OSw1Ni44OTUsMzI2LjE4NCwwLDI1NS45OTksMGMtNzAuMTg0LDAtMTI3LjA4LDU2Ljg5NS0xMjcuMDgsMTI3LjA4djExNC4wNTkgICAgaC0xLjkyM2gtMC42MjVINzcuNTV2MjcwLjg2aDM1Ni44OTl2LTI3MC44NkgzODUuMDAyeiBNMjg3LjQzMiwzODcuMzR2NjkuMjk0aC02Mi44NjVWMzg3LjM0ICAgIGMtMTIuMjM0LTkuNjE2LTE5LjQyNS0yNC4yNzQtMTkuNDI1LTM5Ljk3N2MwLTI4LjA0MywyMi44MTUtNTAuODU4LDUwLjg1OC01MC44NThzNTAuODU4LDIyLjgxNSw1MC44NTgsNTAuODU4ICAgIEMzMDYuODU3LDM2My4wNjcsMjk5LjY2NiwzNzcuNzI1LDI4Ny40MzIsMzg3LjM0eiBNMzM1LjI3NSwyNDEuMTM5SDE3Ni43MjNWMTI3LjA4YzAtNDMuNzEzLDM1LjU2My03OS4yNzYsNzkuMjc2LTc5LjI3NiAgICBzNzkuMjc2LDM1LjU2Myw3OS4yNzYsNzkuMjc1VjI0MS4xMzl6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIHN0eWxlPSJmaWxsOiMxMTZCRjIiIGRhdGEtb2xkX2NvbG9yPSIjMDAwMDAwIj48L3BhdGg+Cgk8L2c+CjwvZz48L2c+IDwvc3ZnPg==") center center/1.2rem 1.5rem no-repeat;
}
.page-title .page-header {
    color: var(--primary-color);
}

.v_wrapper{
    position: absolute;
    animation: 0.3s ease-out 0s 1 normal none running jBcSpD;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    
}

button.play-default{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #0000;
    border: 0;
    transform: translate(-50%, -50%);
    outline: 0;
    z-index:9;
}

.fad:after{
    color: var(--light) !important;
    opacity:var(--fa-secondary-opacity, 0.9);
}

button#play:focus, button#respplay:focus {
    outline: 0;
}
.playbutton_grid {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.playbutton_active {
    padding: 4px;
    background-color: var(--white);
    /*border: 0.0625rem solid #dde7f0;*/
    /*box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1), 0px 0px 1px 0px rgba(0,0,0,0.1)!important;*/
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    border-radius: 4px;
}
.playbutton_active:before {
    content: '';
    height: 89px;
    width: 90px;
    position: absolute;
    border: 0.0625rem solid #dde7f0;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1), 0px 0px 1px 0px rgba(0,0,0,0.1)!important;
    border-radius: 10px;
    top: 0;
}
.page-title {
    border-left: 3px solid var(--primary-color);
    padding-left: 20px;
}

.email_page .section1{
    background: #fff;
    padding: 20px 20px;
    align-items: center;
}

.email_page .section1 div.h3{
    font-size: 16px;
}

.email_page .section1 select{
    height: 40px;
}

.email_page .section1 h4{
    font-size: 16px;
}

.email_page .section1 h4 span{
    color: var(--primary-color);
}

.all_v_loader{
    position: relative;
}

.all_v_loader #load_btn{
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 30px;
}

.preview .modal-footer{
    justify-content: space-between;
}

#load_btn{
    color: var(--primary-color);
}

#u_video_error i:before{
    color: #fff !important;
}

#u_video_error i:after{
    color: #e74a3b!important;
}

.keywords_c{
    background: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 100px;
    padding: 6px 20px;
    position: relative;
    transition: all .3s ease-out;
    margin-right: 10px;
}

.keywords_c:hover {
    padding-right: 25px !important;
}

.keywords_c i{
    position: absolute;
    color: #000;
    display: none;
    right: 6px;
    top: 8px;
    cursor: pointer;
}

.keywords_c:hover i{
    display: block !important;
}

.preview-s, .preview-s:hover{
    color: var(--primary-color);
}
f
.shareandembed__closepopup{
    position: static !important;
}

button#btn-stop-recording-video, button#btn-stop-recording-audio{
    color: #e74a3b !important;
    background: #fff !important;
    border: 1px solid #e74a3b !important;
}

button#btn-stop-recording-video:hover, button#btn-stop-recording-audio:hover{
    background: #e74a3b !important;
    color: #fff !important;
}

button#btn-stop-recording-video i:before{
    color: #fff !important;
}

button#btn-stop-recording-video i:after, button#btn-stop-recording-audio i:after{
    color: #e74a3b !important;
}

button#btn-stop-recording-video:hover i:before, button#btn-stop-recording-audio:hover i:before{
    color: #fff !important;
}

button#btn-stop-recording-video:hover i:after, button#btn-stop-recording-audio:hover i:after{
    color: #fff !important;
}

.modal-body .fa-trash-alt{
    cursor: pointer;
}

.dashboard .s1-right p{
    color: var(--text-color);
    font-weight: 600;
}

.dashboard .s1-right i{
    font-size: 20px;
}

.dashboard .s1-right .banner:hover {
    transform: scale(1.08);
    transition: all .5s ease-out;
    cursor: pointer;
}

.dashboard .s1-right .banner:hover h5{
    color: var(--primary-color);
}

.music-table tbody tr:nth-of-type(odd) {
    background-color: rgb(0 0 0 / 2%);
}

/*.music-table tbody td.sorting_1 a{*/
/*    color: #000;*/
/*}*/

.dashboard .s1-left h1.h3 span{
    font-size: 28px;
    color: #fff;
}

.dashboard .s1-left img{
    height: 250px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.dashboard .s1-left .card{
    background: var(--primary-color);
    border-radius: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.dashboard .s1-right .card{
    border-radius: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.border-bottom-danger {
    border-bottom: .25rem solid #ff95cf!important;
}

/*-----------------------
Teams
-------------------------*/
.teamfname {
    color: #fff;
    margin: 0 auto;
    font-size: 81px;
    text-transform: uppercase;
}
.teamview-title-wrap h1{
    font-size:24px;
}
.settingszone__integrationentry:last-child {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.settingszone__integrationentry:last-child p {
    margin-bottom: 0 !important;
}
.teamlist li {
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}
.teamlist li:hover, .team_active {
    background-color: var(--light-color);
}
.team-wrapper .nav-tabs .nav-item.show .nav-link,.team-wrapper .nav-tabs .nav-link {
    background: var(--white);
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 400;
    color: var(--primary-color);
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}
.team-wrapper .nav-tabs .nav-item.show .nav-link, .team-wrapper .nav-tabs .nav-link.active{
    color: var(--white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.singleteambox-create:hover {
    border: 1px solid var(--primary-color) !important;
}
.tagify__tag{margin: 0 0 3px 3px;}
.tagify__input{margin:0;}
.engagement_table .section1{
    align-items: center;
}

.engagement_table .section1 div.h3{
    font-size: 16px;
}

.engagement div.h4{
    font-size: 20px;
}

.engagement #time[disabled="disabled"], .engagement #d_from[disabled="disabled"], .engagement #d_from:disabled, .engagement #d_to[disabled="disabled"],.engagement #d_to:disabled{
    cursor: not-allowed;
}

.s_vd .select2.select2-container{
    width: 100%;
}

.cta_custom .v_ab_close, .cta_custom .a_ab_close, .cta_custom .t_ab_close, .cta_custom .e_ab_close{
    color: #fff;
    font-size: 18px;
    background: #00000059;
    border-radius: 20px;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .v_ab_close:hover, .cta_custom .a_ab_close:hover, .cta_custom .t_ab_close:hover, .cta_custom .e_ab_close:hover{
    background: #000000a6;
    transform: scale(1.1);
}

.cta_custom .v_ab, .cta_custom .a_ab{
    position: absolute;
}

/*.cta_custom .v_ab.section1, .cta_custom .a_ab.section1{*/
/*    bottom: 40px;*/
/*    left: 40%;*/
/*}*/

/*.cta_custom .v_ab.section2, .cta_custom .a_ab.section2{*/
/*    bottom: 40px;*/
/*    left: 36%;*/
/*}*/

.cta_custom .v_ab.section1, .cta_custom .a_ab.section1, .cta_custom .v_ab.section2, .cta_custom .a_ab.section2{
    animation: 0.3s ease-out 0s 1 normal none running jBcSpD;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -45%);
    min-width: 100%;
    width: 100%;
}

.cta_custom .a_ab_audio, .preview_type{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    animation: 0.3s ease-out 0s 1 normal forwards running jBcSpD;
    background: #fff;
}

.preview_type{
    z-index: 1;
}

.cta_custom .a_ab_audio audio{
    position: absolute;
    left: 30%;
    top: 40%;   
}

.cta_custom .v_ab_title, .cta_custom .a_ab_title{
    z-index: 10;
    bottom: 150px;
    left: 44%;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 20px;
}

.cta_custom .v_ab_title2, .cta_custom .a_ab_title2{
    z-index: 10;
    bottom: 150px;
    color: #fff;
    left: 44%;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 20px;
}


.cta_custom .a_ab_title, .cta_custom .a_ab_title2{
     color: #000;
}

.cta_custom .v_ab_title span, .cta_custom .a_ab_title span{
    color: var(--primary-color);
}


.cta_custom .v_ab_start button, .cta_custom .a_ab_start button {
    font-size: 40px;
    border-radius: 20px;
    background: var(--primary-color);
    border-color: transparent;
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    color: #fff;
    transition: all .3s ease-in-out;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .v_ab_stop button#btn-stop-recording-video, .cta_custom .a_ab_stop button#btn-stop-recording-audio{
    font-size: 40px;
    border-radius: 20px;
    border: 1px solid transparent !important;
    background: #e74a3b !important;
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    transition: all .3s ease-in-out;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .v_ab_stop button#btn-stop-recording-video i:before, .cta_custom .a_ab_stop button#btn-stop-recording-video i:before{
    color: #fff !important;
}

.cta_custom .v_ab_start button:hover, .cta_custom .a_ab_start button:hover,
.cta_custom .v_ab_stop button:hover, .cta_custom .a_ab_stop button:hover,
.cta_custom .v_ab_next button:hover, .cta_custom .a_ab_next button:hover,
.cta_custom .v_ab_retry:hover, .cta_custom .a_ab_retry:hover{
    transform: scale(1.07);
}

.cta_custom .v_ab_next button, .cta_custom .a_ab_next button{
    font-size: 40px;
    border-radius: 20px;
    border: 1px solid transparent !important;
    background: var(--primary-color) !important;
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    transition: all .3s ease-in-out;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .v_ab_retry, .cta_custom .a_ab_retry{
    color: var(--primary-color);
    font-size: 18px;
    background: #fff;
    border-radius: 20px;
    height: 60px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    border: 0;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .a_ab_start button, .cta_custom .a_ab_stop button#btn-stop-recording-audio, .cta_custom .a_ab_next button{
    background: var(--primary-color);
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
}

.cta_custom .t_ab, .cta_custom .e_ab{
    position: absolute;
}

.cta_custom .t_ab_text, .cta_custom .e_ab_text{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
    animation: 0.3s ease-out 0s 1 normal forwards running jBcSpD;
    background: #fff;
    padding: 25px;
}

.cta_custom .t_ab_text textarea, .cta_custom .e_ab_text .emojionearea{
    height: 70%;
    font-size: 20px;
    color: rgb(17, 17, 17);
    border: 0;
    box-shadow: none;
    position: relative;
}

.cta_custom .t_ab_text textarea{
    padding: 20px;
}

/*.cta_custom .t_ab_text textarea + i.blink, .cta_custom .e_ab_text .emojionearea + i.blink{*/
/*    position: absolute;*/
/*    width: 1px;*/
/*    height: 24px;*/
/*    background-color: #000;*/
/*    left: 46px;*/
/*    top: 47px;*/
/*    animation-name: blink;*/
/*    animation-duration: 800ms;*/
/*    animation-iteration-count: infinite;*/
/*    opacity: 1;*/
/*}*/

/*.cta_custom .t_ab_text textarea:focus + i.blink, .cta_custom .e_ab_text .emojionearea.focused + i.blink{*/
/*    display: none;*/
/*}*/

/*@keyframes blink {*/
/*    from { opacity: 1; }*/
/*    to { opacity: 0; }*/
/*}*/

.cta_custom .t_ab_text textarea::-webkit-scrollbar-track, .cta_custom .e_ab_text .emojionearea .emojionearea-editor::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

.cta_custom .t_ab_text textarea::-webkit-scrollbar, .cta_custom .e_ab_text .emojionearea .emojionearea-editor::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

.cta_custom .t_ab_text textarea::-webkit-scrollbar-thumb, .cta_custom .e_ab_text .emojionearea .emojionearea-editor::-webkit-scrollbar-thumb
{
	background-color: var(--primary-color);
}


.cta_custom .e_ab_text .emojionearea-editor{
    height: 90%;
    max-height: 100%;
    padding: 0;
    color: #000;
    position: absolute;
    width: 100%;
    padding: 20px;
    z-index: 4;
}

.cta_custom .t_ab_text textarea.form-control:focus,.cta_custom .e_ab_text .emojionearea.form-control.focused {
    border: 0;
    box-shadow: none;
    background: #fff;
}
.form-control:focus{
    box-shadow:0 0 0 0.2rem rgb(54 208 156 / 25%);
    border-color:var(--primary-color);
}
.form-label-group .form-control:disabled, .form-label-group .form-control[readonly]{
    background-color: transparent;
}
.cta_custom .t_ab.section2, .cta_custom .e_ab.section2{
    animation: 0.3s ease-out 0s 1 normal none running jBcSpD;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    width: 100%;
    z-index: 10;
}


.cta_custom .t_ab_title1, .cta_custom .e_ab_title1{
    z-index: 10;
    top: 60px;
    color: #000;
    left: 50px;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 20px;
}

.cta_custom .t_ab_title2, .cta_custom .e_ab_title2{
    color: #000;
    text-transform: capitalize;
    font-size: 16px;
    letter-spacing: 1.2px;
    text-align: center;
    margin-bottom: 20px;
}

.cta_custom .t_ab_title2 span, .cta_custom .e_ab_title2 span{
    color: var(--primary-color);
    font-weight: 600;
}

.cta_custom .t_ab_next button, .cta_custom .e_ab_next button{
    font-size: 40px;
    border-radius: 20px;
    border: 1px solid transparent !important;
    background: var(--primary-color) !important;
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    transition: all .3s ease-in-out;
    box-shadow: rgb(0 0 0 / 10%) 0px 10px 30px 0px;
    margin-right: 24px;
}

.cta_custom .t_ab_next button:hover, .cta_custom .e_ab_next button:hover{
    transform: scale(1.1);
    box-shadow: rgb(0 0 0 / 20%) 0px 10px 30px 0px; 
    opacity: 1;
}

.cta_custom .emojionearea .emojionearea-button>div, .cta_custom .emojionearea .emojionearea-picker .emojionearea-wrapper:after{
    background-image: url(../img/smile.svg)!important;
    background-size: cover;
}

.preview .emojionearea .emojionearea-button {
    left: auto;
    bottom: 60px;
    top: auto;
    right: 60px;
}

.preview video::-webkit-media-controls-container, .preview video::-webkit-media-controls, .no-controls video::-webkit-media-controls, .all_video video::-webkit-media-controls {
    display: none !important;
}

.preview .card-orientation{
    background: #f8f9fc;
}

.preview .card-orientation:hover{
    background: var(--primary-color);
}

.preview .card-orientation:hover label{
    color: #fff;
}
.preview .c-radio{
    padding-left: 10px;
    padding-right: 10px;
}
.cta_custom .v_ab_video #no_vid_load.portrait-empty-wrapper{
    height: 100%;
    display:flex;
    max-width: 400px;
    width: 100%;
    min-height: calc(100vh - 0px);
    margin: 0 auto;
    min-width: auto;
}

.cta_custom .v_ab_video .video_file.portrait-video-wrapper{
    display: block;
    max-width: 50%;
    width: 100%;
    height: 100%;
}

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

.overview_e .left-section{
    background: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.overview_e .left-section ul li.navi-item a{
    font-size: 24px;
    background: #f1f5f9;
    margin-bottom: 20px;
    padding: 4px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    flex-direction: column;
    height: 90px;
}

.overview_e .left-section ul li.navi-item:nth-last-child(1) a {
    margin-bottom: 0;
}

.overview_e .right-section{
    width: 100%;
}

.overview_e .right-section table{
    /*width: 100% !important;*/
}

.overview_e .right-section h2{
    color: #000;
    font-weight: 500;
    margin-bottom: 20px;
}

.overview_e .right-section .bg_tab{
    padding: 20px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

.overview_e .right-section .table .thead-light th {
    color: #000;
    background-color: #fff;
}

.overview_e .table-hover tbody tr:hover {
    color: #000;
    /*background-color: rgb(229 249 242);*/
    background-color: transparent;
}

.overview_e .fa-4x {
    font-size: 2em;
}

.overview_e .text-box h3{
    font-weight: 500; 
}

.overview_e .custom_card .bg_img{
    margin-bottom: 6px;
}


.overview_e .custom_card h5{
    margin-bottom: 6px;
    font-size: 14px;
    color: #000;
}

.overview_e .custom_card{
    padding: 14px!important;
    border: 0;
    overflow: hidden;
}

.overview_e .custom_card .icon1{
    position: absolute;
    right: 20px;
    bottom: 50%;
    transform: rotate(180deg) translateY(-50px);
    font-size: 80px;
}

.overview_e .red_card{
    background: #fef5f6;
}
.overview_e .red_card .bg_img i:before{
    color: #fb3d4e !important;
}
.overview_e .red_card .bg_img i:after{
    color: rgb(251 60 76 / 40%) !important;
}
.overview_e .red_card h3 span{
    color: #fb3d4e !important;
}
.overview_e .red_card .icon1:before{
    color: rgb(251 60 76 / 5%) !important;   
}
.overview_e .red_card .icon1:after{
    color: rgb(251 60 76 / 3%) !important;
}

.overview_e .voilet_card{
    background: #f5f3fb;
}
.overview_e .voilet_card .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .voilet_card .bg_img i:before{
    color: #2717a5 !important;
}
.overview_e .voilet_card .bg_img i:after{
    color: rgb(39 23 165 / 40%) !important;
}
.overview_e .voilet_card h3 span{
    color: #2717a5 !important;
}
.overview_e .voilet_card .icon1:before{
    color: rgb(39 23 165 / 5%) !important;   
}
.overview_e .voilet_card .icon1:after{
    color: rgb(39 23 165 / 3%) !important;
}

.overview_e .blue_card{
    background: #e6f2ff;
}
.overview_e .blue_card .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .blue_card .bg_img i:before{
    color: #047ef9 !important;
}
.overview_e .blue_card .bg_img i:after{
    color: rgb(4 126 249 / 40%) !important;
}
.overview_e .blue_card h3 span{
    color: #047ef9 !important;
}
.overview_e .blue_card .icon1:before{
    color: rgb(4 126 249 / 5%) !important;
}
.overview_e .blue_card .icon1:after{
    color: rgb(4 126 249 / 3%) !important;
}

.overview_e .green_card{
    background: #e9f4ee;
}
.overview_e .green_card .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .green_card .bg_img i:before{
    color: #2b8854 !important;
}
.overview_e .green_card .bg_img i:after{
    color: rgb(40 138 84 / 40%) !important;
}
.overview_e .green_card h3 span{
    color: #2b8854 !important;
}
.overview_e .green_card .icon1:before{
    color: rgb(40 138 84  / 5%) !important;   
}
.overview_e .green_card .icon1:after{
    color: rgb(40 138 84  / 3%) !important;
}

.overview_e .orange_card{
    background: #fbf4e8;
}
.overview_e .orange_card .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .orange_card .icon1:before{
    color: rgb(216 144 31  / 5%) !important;   
}
.overview_e .orange_card .icon1:after{
    color: rgb(216 144 31 / 5%) !important;
}
.overview_e .orange_card .bg_img i:before{
    color: #d8901f !important;
}
.overview_e .orange_card .bg_img i:after{
    color: rgb(216 144 31 / 40%) !important;
}
.overview_e .orange_card h3 span{
    color: #d8901f !important;
}

.overview_e .skyblue{
    background: rgb(238 251 252);
}
.overview_e .skyblue .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .skyblue .icon1:before{
    color: rgb(43 186 197 / 20%) !important;   
}
.overview_e .skyblue .icon1:after{
    color: rgb(43 186 197 / 10%) !important;
}
.overview_e .skyblue .bg_img i:before{
    color: #2bbac5 !important;
}
.overview_e .skyblue .bg_img i:after{
    color: rgb(43 186 197 / 40%) !important;
}
.overview_e .skyblue h3 span{
    color: #2bbac5 !important;
}

.overview_e .dark{
    background: rgb(240 240 240);
}
.overview_e .dark .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .dark .icon1:before{
    color: rgb(83 79 79 / 5%) !important;
}
.overview_e .dark .icon1:after{
    color: rgb(83 79 79 / 5%) !important;
}
.overview_e .dark .bg_img i:before{
    color: #534f4f !important;
}
.overview_e .dark .bg_img i:after{
    color: rgb(83 79 79 / 40%) !important;
}
.overview_e .dark h3 span{
    color: #534f4f !important;
}


.overview_e .pink{
    background: rgb(254 237 255);
}
.overview_e .pink .icon1{
    transform: rotate(0deg) translateY(50px);
}
.overview_e .pink .icon1:before{
    color: rgb(225 38 224 / 10%) !important;
}
.overview_e .pink .icon1:after{
    color: rgb(225 38 224 / 5%) !important;
}
.overview_e .pink .bg_img i:before{
    color: rgb(225 38 224) !important;
}
.overview_e .pink .bg_img i:after{
    color: rgb(225 38 224 / 40%) !important;
}
.overview_e .pink h3 span{
    color: #e126e0 !important;
}

.button_display .pause_button{
    visibility: hidden;
}

.button_display:hover .pause_button{
    visibility: visible;
}
.v_wrapper #respplay i.fa-pause{
    visibility: hidden;
}

.v_wrapper:hover #respplay i.fa-pause{
    visibility: visible;
}

.animate-iteration-infinte {animation-iteration-count: infinite; }
.myBar {
    height: 14px;
    border-radius: 2px 0 0 2px;
    background: #1439cd;
    background: linear-gradient( 86deg, var(--primary-color) 60%, var(--primary-hover-color) 90%);
}

.winner_card{
    /*box-shadow: 0 3px 10px 0 rgb(21 35 158 / 9%);*/
    border: 0.5px solid #e7e8f1;
    border-radius: 10px;
}

.winner_card .l-w, .winner_card .r-w{
    padding: 30px 0;   
}

.winner_card .l-w{
    background-image: url(../img/ribbon.png);
    background-size: 300px;
    background-repeat: no-repeat;
}

.winner_card .l-w img{
    background: #fef2f4;
    padding: 30px 20px;
    border-radius: 20px;
}

.winner_card h3{
    font-weight: 700;
    margin-bottom: 20px;
}

.winner_card .r-w .h5{
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: 600;
}

.poll_card{
    padding: 12px;
    border-radius: 20px;
}

.poll_card.s1{
    background: #fef5f6;
}

.poll_card.s2{
    background: #f5f3fb;
}

.poll_card.s3{
    background: #e9f4ee;
}

.poll_card i{
    font-size: 28px;
}

.poll_card span h5{
    font-size: 30px;
    margin-top: auto;
    margin-bottom: auto;
}

.button_tools{
    position: absolute;
    display: flex;
    right: 10px;
    top: 10px;
    z-index: 5;
}

button.default-btn-tools{
    height: 40px;
    width: 40px;
    border-radius: 10px;
    border: 0px solid #fff;
    background-color: #00000070;
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 6px;
    outline: 0;
}
.video-landscape button.default-btn-tools{
    background-color: #bfb9b970;
}
.glyphicon{
    position: relative;
    font-family: 'Font Awesome 5 Duotone';
    font-weight: 900;
    font-style: normal;
}
    
.glyphicon:before{   
    position: absolute;
    color: var(--fa-primary-color, inherit);
    opacity: var(--fa-primary-opacity, 1);
}

.glyphicon:after{
    color: var(--light) !important;
    opacity: var(--fa-secondary-opacity, 0.9);
}

.glyphicon-arrow-left:before{
    content: "\f053";
}

.glyphicon-arrow-left:after{
    content: "\10f053";   
}

.glyphicon-arrow-right:before{
    content: "\f054";
}

.glyphicon-arrow-right:after{
    content: "\10f054";   
}

.modal-footer button.btn-primary.save{
    width: 110px;
}

.br-16{
    border-radius: 16px;
}
button.play-default svg{
    position: absolute;
    left: 50%;
    top: 50%;
    background: #0000;
    border: 0;
    transform: translate(-50%, -50%); 
    outline: 0;
}
button.play-default .play_btn_1, button.play-default .play_btn_default{
    height: 100px;
    width: 100px;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 20px);
}

button.play-default .play_btn_2, button.play-default .play_btn_3, button.play-default .play_btn_4,
button.play-default .play_btn_6, button.play-default .play_btn_7, button.play-default .play_btn_5{
    height: 120px;
    width: 120px;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 20px);
}

button.player-buttons .play_btn_default, button.player-buttons .play_btn_1{
    height: 70px;
    width: 70px;
}

button.player-buttons .play_btn_3{
    height: 90px;
    width: 90px;
    margin-top: 5px;
}

button.player-buttons .play_btn_2{
    height: 97px;
    width: 97px;
}

button.player-buttons .play_btn_6, button.player-buttons .play_btn_4{
    height: 95px;
    width: 95px;
}

button.player-buttons .play_btn_5{
    height: 90px;
    width: 90px;
}

button.player-buttons .play_btn_7 {
    height: 100px;
    width: 100px;
    margin-top: -5px;
}

.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
    color: #99999961 !important;
}

.resp_table{
    display: flex;
    width: 100%;
}

.resp_table .l_resp_table{
    width: 10%;
    margin-right: 10px;
}

.resp_table .r_resp_table{
    width: 90%;
}

.modal_c_video{
    height: 435px;
    width: 100%;
}

.prev_flow{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-radius: 6px;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e6f0;
    padding: 1.25rem;
    /*height: 500px;*/
    overflow: auto;
}   
    
#horizontal_view ul:nth-child(1) img{
    border-radius: 10px;
    box-shadow: rgb(0 0 0 / 15%) 0px 4px 5px;
}


#horizontal_view ul:nth-child(1):not(:empty):before, #horizontal_view ul:nth-child(1):not(:empty):after,
#horizontal_view ul:nth-child(1) ul:not(:empty):before, #horizontal_view ul:nth-child(1) ul:not(:empty):after,
#horizontal_view ul:nth-child(1) li:not(:empty):before, #horizontal_view ul:nth-child(1) li:not(:empty):after {
    display:block;
    position:absolute;
    content:"";
}

#horizontal_view ul:nth-child(1), #horizontal_view ul:nth-child(1) ul, #horizontal_view ul:nth-child(1) li {
    margin: 0;
    padding: 0;
    position: relative;
}



#horizontal_view ul:nth-child(1){
    margin: 0 0 1em;
    text-align: center;
}

#horizontal_view ul:nth-child(1), #horizontal_view ul:nth-child(1) ul{
    display: table;
}

#horizontal_view ul:nth-child(1) ul{
    width: 100%;
}

#horizontal_view ul:nth-child(1) li{
    display: flex;
    align-items: center;
    margin-left: calc(60px * 2);
}

#horizontal_view ul:nth-child(1) li:before{
    border-left: 2px solid #000;
    height: 106%;
    width:0;
    top:0;
    left: -60px;
}

#horizontal_view ul:nth-child(1) li:first-child:before{
    height:55%;
    top:50%;
}
#horizontal_view ul:nth-child(1) li:last-child:before{
    height:55%;
    bottom:50%;
    top:auto;
}

#horizontal_view ul:nth-child(1) li:after, #horizontal_view ul:nth-child(1) li ul:after{
    border-top: 2px solid #000;
    height: 0;
    width: 60px;
    top: 50%;
    left: -60px
}

#horizontal_view ul:nth-child(1) li:only-child:before {
    content:none;
}

#horizontal_view ul:nth-child(1) li ul:after {
    left: 0;
}

#horizontal_view ul:nth-child(1) li >li:only-child {
    margin-left:0;
}

#horizontal_view ul:nth-child(1) li >li:only-child:before, #horizontal_view ul:nth-child(1) li >li:only-child:after {
    content:none;
}

#horizontal_view ul:nth-child(1) li {
    margin-top: 5px;
    margin-bottom: 5px;
}

#horizontal_view ul:nth-child(1) > li:nth-child(1):after{
    display: none;
    content:"";
}

#horizontal_view ul:nth-child(1) > li:nth-child(1){
    margin-left: 40px;
}

#horizontal_view ul:nth-child(1) li:not(:last-child), #horizontal_view ul:nth-child(1) li:not(:first-child){
    padding: 20px 0;
}

#horizontal_view ul:nth-child(1) li:not(:empty) .dot_li_before{
    position: relative;
}

#horizontal_view ul:nth-child(1) li:not(:empty) > .dot_li_before .circle{
    width: 18px;
    height: 18px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: -8px;
    top: -8px;
    border: 3px solid #fff;
}

#horizontal_view ul:nth-child(1) > li:nth-child(1) > .dot_li_before .circle{
    display: none;
}

#horizontal_view ul:nth-child(1) li.active:not(:empty) > .dot_li_before .circle{
    border: 0;
    height: 14px;
    width: 14px;
    left: -6px;
    top: -7px;
    background: var(--primary-color);
}

#horizontal_view ul:nth-child(1) li.active:not(:empty) > .dot_li_before .ringring{
    border: 3px solid var(--primary-color);
    height: 26px;
    width: 26px;
    position: absolute;
    opacity: 0.0;
    z-index: 2;
    left: -12px;
    top: -14px;
    border-radius: 50%;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
}

@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

.steps_div, .response_count{
    font-size: 12px;
    background: var(--primary-color);
    height: 22px;
    width: 22px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #fff;
    margin-bottom: 8px;
}

#horizontal_view ul:nth-child(1) li.active:not(:empty) > .active_img img {
    border: 3px solid var(--primary-color);
    padding: 2px;
}

span.badge.badge-warning{
    color: #000;
    background-color: #FED800;
    padding: 5px 7px;
    font-size: 12px;
}

span.badge.badge-warning svg{
    margin-right: 2px;
}

.blur_n_readonly{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #fff;
    opacity: .5;
    z-index: 10;
}

.funnel_cta_dv .overlay_text{
    background: transparent;
    padding: 0;
}

.funnel_cta_dv .overlay_text a{
    padding: 10px 16px;
    border-radius: 50px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
}
/*.funnel_cta_dv .overlay_text a:hover{
    transform: translateY(-7px) !important;
}*/

.custom-control-input[type="checkbox"]{
    z-index: 2;
}

@media (max-width: 768px){
    .sidebar .sidebar-heading {
        padding: 0 0.1rem;
    }
    .cta_custom .v_ab_video #no_vid_load.portrait-empty-wrapper{
        max-width: 100%;
        min-width: 100%;
    }
    
    .cta_custom .v_ab_video .video_file.portrait-video-wrapper {
        max-width: 100%;
    }
    
    .preview_type h2{
        font-size: 20px;
    }
    
    .resp_table .l_resp_table{
        width: 25%;
        margin-right: 10px;
    }
    
    .resp_table .r_resp_table{
        width: 75%;
    }
    .top_right, .bottom_right{
        left:50px !important;
        right:auto !important;
    }
    .top_left, .bottom_left{
        right:50px !important;
        left:auto !important;
    }
    
    .dashboard .s1-left h1.h3 {
        font-size: 15px;
    }
    
    .dashboard .s1-left h1.h3 span {
        font-size: 22px;
    }

    .dashboard .s1-left img {
        height: 150px;
    }

}
@media (max-width: 767.98px) {
.button_display:hover .pause_button{
    opacity: 0;
}    
.scroll-down-animation {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: absolute;
    bottom: 20%;
    left: 50%;
    }
 .chevron {
	 position: absolute;
	 width: 2.1rem;
	 height: 0.48rem;
	 opacity: 0;
	 transform: scale(0.3);
	 animation: move-chevron 3s ease-out infinite;
}
 .chevron:first-child {
	 animation: move-chevron 3s ease-out 1s infinite;
}
 .chevron:nth-child(2) {
	 animation: move-chevron 3s ease-out 2s infinite;
}
 .chevron:before, .chevron:after {
	 content: '';
	 position: absolute;
	 top: 0;
	 height: 100%;
	 width: 50%;
	 background: #ffffff;
}
 .chevron:before {
	 left: 0;
	 transform: skewY(30deg);
}
 .chevron:after {
	 right: 0;
	 width: 50%;
	 transform: skewY(-30deg);
}
}
 @keyframes move-chevron {
	 25% {
		 opacity: 1;
	}
	 33.3% {
		 opacity: 1;
		 transform: translateY(2.28rem);
	}
	 66.6% {
		 opacity: 1;
		 transform: translateY(3.12rem);
	}
	 100% {
		 opacity: 0;
		 transform: translateY(4.8rem) scale(0.5);
	}
}
 

.upload_box_div{
    background: #fff;
}
.upload_box_div label{
    height: 300px;
    width: 400px;
    border-radius: 10px;
    border: 2px dashed #a6adb7;
}
.upload_box_div label i{
    font-size: 40px;
    margin-bottom: 10px;
    transition: all .5s ease-out;
}

.upload_box_div label p{
    color: #6d7c90;
}

.upload_box_div label p .text-success{
    color: #bfc6d0 !important;;
}

.upload_box_div label span{
    padding: 6px 10px;
    border-radius: 4px;
}

.upload_box_div label:hover i{
    color: #000;
}

.funnel-rmv-btn{
    position: absolute;
    top: 14px;
    right: 10px;
    background: #eee;
    border-radius: 6px;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.funnel_cta_opts{
    border: 1px solid #ccc;
    padding: 50px 10px 10px 10px;
    border-radius: 6px;
    position: relative;
    margin-bottom: 20px;
}
.btn_group .active{
    background-color: var(--primary-color);
    color: #fff;
}
.wl-modal {
    background-color: rgba(48, 48, 48, 0.75) !important;
    background-image: radial-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));
    width: 100%;
    height: auto;
    position: absolute !important;
    top: 0;
    bottom: 0;
    z-index: 9;
}

.left_form_f{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 70%);
    z-index: 1;
}

.left_form_f #t_msg svg{
    margin-top: auto;
    height: 350px;
}

.left_form_f .wl-modal {
    background-color: #fff !important;
    background-image: none;
    position: relative !important;
    width: 90%;
    border-radius: 6px;
}

.left_form_f .right_text{
    text-align: center;
}

.left_form_f .right_text i{
    font-size: 50px;
    color: #000;
    margin-bottom: 10px;
}

.left_form_f .right_text h4{
    color: #000;
    font-size: 24px;
}

.left_form_f .right_text h5{
    color: #000;
    font-size: 16px;
}

.team_container table thead th{
    border: 0;
}

.team_container table tbody td, .team_container table tbody th{
    border: 1px solid #ced4da;
}

.prev_demo{
    height: 100%;
    border-radius: 6px;
    position: relative;
    background-image: url(../img/wireframe.svg);
}

.prev_position{
    border: none;
    position: absolute;
    padding: 4px;
    margin: 0;
    border-radius: 6px;
    background: var(--primary-color);
}

.prev_position.left_prev_position{
    bottom: 40px;
    left: 20px;   
}

.prev_position.right_prev_position{
    bottom: 40px;
    right: 20px;   
}

.prev_position .vid_prev{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    cursor: pointer;
    object-fit: cover;
    margin-top: 0;
    visibility: visible;
    border-radius: 6px;
    object-position: 50% 50%;
    padding:4px;
}

.prev_position.circle_prev{
    border-radius: 100%;
    height: 150px;
    width: 150px;
}

.prev_position.circle_prev .vid_prev{
    border-radius: 50%;
}

.prev_position.rec_prev{
    height: 165px;
    width: 150px;
}

.prev_position.square_prev{
    width: 226px;
    height: 151px
}

.prev_position.text_prev{
    display: flex;
    border-radius: 20px;
    align-items: center;
}
.square-button-outer-layer{
    justify-content: center; position: absolute; top: 8px; right: 8px; width: 32px; height: 20px; display: flex; z-index: 1049; border-radius: 4px; align-items: center;box-shadow:-1px 1px 2px rgb(0 0 0 / 25%) !important; 
}
.square-button-inner-layer{
    display: block; background: white; width: 16px; height: 3px; box-shadow: 0 0 10px rgb(0 0 0 / 40%);
}
.text_prev .square-button-outer-layer{
    top: 2px; right: -14px;
}
.i-text-dark.fad:before{
    color:#ffffff;
}
.i-text-dark.fad:after{
    color:#000000 !important;
}
.vid_duration {
    font-size: 14px !important;
    width: auto !important;
}
.prev_position.text_prev .vid_prev{
    height: 50px;
    width: 50px;
    min-height: 50px; 
    min-width: 50px; 
    border-radius: 100%; 
    position: static; 
    transform: inherit; 
    padding: 0; 
    margin: 1px 2px;
}

.prev_position.text_prev .h4{
    color: #fff;
    margin: 0 4px;
    font-size: 15px;
    font-weight: 600;
}


.prev_position.rec_prev .h4, .prev_position.square_prev .h4, .prev_position.circle_prev .h4{
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.prev_position.square_prev .h4, .prev_position.rec_prev .h4{
    padding: 0 4px;
}
.modal_wcode pre{
    display:flex;
    flex-direction: column;
}
.modal_wcode pre code {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    font-family: 'Inter var';
}
.widget_div{
    position: relative;
    height: 44px;
    width: 44px;
    margin-right: 7px;
}

.widget_div input[type="radio"] {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.widget_div svg{
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.widget_div svg .solid{
    fill: #d5d5d5;
}

.widget_div input[type="radio"]:checked ~ svg .solid{
    fill: #000;
}


.switch input{ 
    display:none;
}

.switch {
    display: inline-block;
    width: 54px;
    height: 25px;
    margin: 0;
    position: relative;
    transform: scale(.8);
    
}
/* Style Wired */
.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow:0 0 0 2px #777, 0 0 4px #777;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
    transition:.4s;
}

.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
    left: 0;
}

input:checked + .slider:before{
    transform:translateX(30px);
    background: var(--primary-color);
}

input:checked + .slider{
    box-shadow:0 0 0 2px var(--primary-color),0 0 2px var(--primary-color);
}
.sticky-video-box{
    top: 0px;
    position: fixed;
    font-size: 40px;
    z-index: 2;
    transition: all 0.3s ease;
}
.p-btn-cta{
    position: absolute;
    top: 4px;
    left: 0;
    border-radius: 6px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
}
.left_app_form_f{
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 70%);
    z-index: 1;
}

.left_app_form_f #t_msg svg{
    margin-top: auto;
    height: 350px;
}

.left_app_form_f .wl-modal {
    background-color: #fff !important;
    background-image: none;
    position: relative !important;
    width: 90%;
    border-radius: 6px;
}

.left_app_form_f .right_text{
    text-align: center;
}

.left_app_form_f .right_text i{
    font-size: 50px;
    color: #000;
    margin-bottom: 10px;
}

.left_app_form_f .right_text h4{
    color: #000;
    font-size: 24px;
}

.left_app_form_f .right_text h5{
    color: #000;
    font-size: 16px;
}