/* custom font icons css */

.cf {
    font-family: 'Custom-Fonts' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}


/* fonts */

@font-face {
    font-family: Poppins-Regular;
    src: url(fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: Nunito-SemiBold;
    src: url(fonts/Nunito-SemiBold.ttf);
}

@font-face {
    font-family: Nunito-Bold;
    src: url(fonts/Nunito-Bold.ttf);
}

@font-face {
    font-family: Nunito-ExtraBold;
    src: url(fonts/Nunito-ExtraBold.ttf);
}

@font-face {
    font-family: Poppins-Medium;
    src: url(fonts/Poppins-Medium.ttf);
}

@font-face {
    font-family: Poppins-SemiBold;
    src: url(fonts/Poppins-SemiBold.ttf);
}

@font-face {
    font-family: Poppins-Bold;
    src: url(fonts/Poppins-Bold.ttf);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    font-family: Nunito-ExtraBold;
}

.big-heading {
    font-size: 52px;
    line-break: 60px;
}

h1 {
    font-size: 40px;
    line-break: 48px;
}

h2 {
    font-size: 35px;
    line-break: 42px;
}

h3 {
    font-size: 30px;
    line-break: 38px;
}

h4 {
    font-size: 25px;
    line-break: 32px;
}

h5 {
    font-size: 22px;
    line-break: 30px;
}

h6 {
    color: white;
    font-size: 18px;
    line-break: 26px;
}

p {
    font-family: Poppins-Regular;
    font-size: 14px;
    line-height: 24px;
}


/* global */

body {
    background: rgb(0, 242, 96);
    background: -moz-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00f260', endColorstr='#0575e6', GradientType=1);
    font-family: Poppins-Regular;
}

.img-responsive {
    max-width: 100%;
    width: auto;
    display: block;
}

a:hover {
    text-decoration: none;
}

.custom_tooltip {
    visibility: hidden;
    width: 140px;
    background-color: #252525;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: -40px;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    font-size: 14px;
    line-height: 24px;
}

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


/* Login css */

#loginForm .form-label-group>label {
    top: 48px;
    opacity: 0;
}

#loginForm .form-label-group input:not(:placeholder-shown)~label {
    top: 0;
    opacity: 1;
}

#loginForm .form-label-group input::placeholder {
    color: #495057;
}


/* header */

header {
    position: relative;
}

header::after {
    content: "";
    background: rgb(6, 128, 219);
    background: -moz-linear-gradient(left, rgba(6, 128, 219, 1) 0%, rgba(6, 128, 219, 1) 50%, rgba(0, 232, 106, 1) 50%, rgba(0, 232, 106, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(6, 128, 219, 1) 0%, rgba(6, 128, 219, 1) 50%, rgba(0, 232, 106, 1) 50%, rgba(0, 232, 106, 1) 100%);
    background: linear-gradient(to right, rgba(6, 128, 219, 1) 0%, rgba(6, 128, 219, 1) 50%, rgba(0, 232, 106, 1) 50%, rgba(0, 232, 106, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0680db', endColorstr='#00e86a', GradientType=1);
    width: 100%;
    height: 9px;
    display: block;
}

header .container-fluid {
    background-color: #ececec;
    padding: 0;
}

header .container-fluid .row {
    flex-wrap: unset;
}

#site-logo {
    justify-content: flex-end;
    display: flex;
    flex-basis: 23%;
}

#site-logo img {
    max-width: 200px;
}

#main-navi {
    text-align: center;
    line-height: 15px;
    flex-basis: 50%;
}

.hnav {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 14px;
    font-family: Poppins-Regular;
    text-transform: uppercase;
    color: #057edd;
    padding: 0 15px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
}

.hnav::after {
    content: "";
    background-color: #03a0ac;
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translateY(-51%);
}

.hnav:hover {
    color: #02b995;
}

.hnav:first-child {
    padding-left: 0;
}

.hnav:last-child {
    padding-right: 0;
}

.hnav:last-child::after {
    display: none;
}

#h-admin-bar {
    flex-basis: 25%;
}

#h-admin-bar::before {
    content: "";
    background-image: url(../assets/images/h-admin-bar-after.jpg);
    width: 62px;
    height: 88px;
    display: block;
    position: absolute;
    top: 0;
    left: -47px;
}

#h-admin-bar .content-wrapper {
    justify-content: flex-start;
    background-color: #f5f5f5;
    background-image: url('../assets/images/Nav-Bar_bg_pattern.jpg');
    background-repeat: no-repeat;
    background-position: right center;
}

#alertsDropdown {
    position: relative;
    background: rgb(2, 184, 138);
    background: -moz-linear-gradient(left, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    background: linear-gradient(to right, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#02b88a', endColorstr='#0486cf', GradientType=1);
    color: #fff;
    border-radius: 50px;
}

#alertsDropdown i {
    font-size: 14px;
    line-height: 14px;
}

#alertsDropdown .notif-count {
    font-size: 14px;
    line-height: 14px;
    padding: 0;
    background: none;
}

.notifiaction-wrap {
    width: 294px;
    padding: 0;
    margin-bottom: 0;
}

.notifiaction-wrap h6 {
    font-size: 14px;
    line-height: 1;
}

.noti-item {
    position: relative;
    padding: 12px 24px 12px 58px;
    text-align: left;
}

.dropdown-menu-right a {
    text-align: center;
    opacity: .9;
    font-size: 12px;
    color: #000 !important;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

.dropdown-menu-right a:hover {
    background-color: transparent;
    opacity: 0.5;
}

.notifiaction-wrap .noti-item i {
    position: absolute;
    left: 20px;
    top: 9px;
    color: #03a2a9;
    font-size: 20px;
}

.noti-item.unread {
    background-color: #e6e6e6;
}

.noti-wrapper {
    max-height: 300px;
    overflow-y: auto;
}

.notifiaction-wrap .noti-item.noti-item4 p {
    font-size: 10px;
    /* color: #888; */
    line-height: 1;
    margin-top: -11%;
}

#userDropdown {
    position: relative;
    padding-right: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#h-admin-bar .text {
    font-size: 17px;
    line-height: 25px;
    font-family: Poppins-Regular;
    color: #252525;
}

#h-admin-bar .text span {
    color: #0581d9;
    display: block;
    font-size: 12px;
    line-height: 12px;
}

#h-admin-bar .nav-link img {
    border-radius: 100%;
    margin-right: 5px;
    width: 40px;
    height: 40px;
    border: 2px solid #02b4a2;
}

#h-admin-bar .nav-link::after {
    border-top: 0.5em solid #007BFF;
    border-right: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
}

#h-admin-bar .nav-item.dropdown.no-arrow .dropdown-toggle::after {
    display: none;
}

.dropdown-theme {
    background-color: #33ae9a;
    box-shadow: 0 0px 31px 0px rgba(0, 0, 0, 0.49);
}

.dropdown-theme a {
    color: #f5f5f5 !important;
}


/* dashboard */

#dash_vid {
    border-radius: 5px;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.5);
}

#dash_vid .plyr__controls {
    opacity: 0;
}

#dash_vid.plyr--playing .plyr__controls {
    opacity: 1;
}

#dash_vid>[data-plyr="play"] {
    background-color: transparent;
    border: 10px solid #fff;
    display: none;
}

#dash_vid>[data-plyr="play"] svg {
    transform: scale(1.6);
    transform-origin: center;
}

#dboard_sec1 .info-box {
    background-size: cover;
    padding: 15px 30px;
    min-height: 137px;
    color: #fff;
    margin-bottom: 33px;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.18);
}

#dboard_sec1 .infoBox1 {
    background-image: url('../assets/images/db_button_bg_1.jpg');
}

#dboard_sec1 .infoBox2 {
    background-image: url('../assets/images/db_button_bg_2.jpg');
}

#dboard_sec1 .infoBox3 {
    background-image: url('../assets/images/db_button_bg_3.jpg');
}

#dboard_sec1 .infoBox4 {
    background-image: url('../assets/images/db_button_bg_4.jpg');
}

.vreel-button {
    padding: 20px 36px;
    min-height: 269px;
    background-image: url('../assets/images/vreel_button_bg1.jpg');
    background-size: cover;
    text-transform: uppercase;
    align-items: flex-end;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.18);
    border-radius: 8px
}

.vreel-button span {
    color: var(--teal);
}

.vreel-button h2 {
    font-family: Poppins-Bold;
}

.visreel-button {
    padding: 20px 36px;
    min-height: 269px;
    background-image: url('../assets/images/vreel_button_bg2.jpg');
    background-size: cover;
    text-transform: uppercase;
    align-items: flex-end;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.18);
    border-radius: 8px
}

.visreel-button span {
    color: var(--orange);
}

.visreel-button h2 {
    font-family: Poppins-Bold;
}

#bottom_banner {
    background-color: #02c392;
    background-image: url('../assets/images/training_banner_circle.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom left;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

#bottom_banner #btn-bnr {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 9;
    top: 0;
}

#bottom_banner .content-wrapper {
    padding: 30px 0 30px 48px;
    position: relative;
}

#bottom_banner .col2 {
    -webkit-clip-path: polygon(4% 0, 100% 0, 100% 100%, 15% 100%);
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 15% 100%);
    background-image: url('../assets/images/training_banner_img.jpg');
    background-size: cover;
}

#bottom_banner .big-heading {
    text-transform: uppercase;
    font-style: italic;
    color: #0c4e75;
    margin-bottom: 1.5rem;
    font-family: Poppins-Bold;
}

#bottom_banner .big-heading span {
    color: #ffffff;
}

#bottom_banner .big-heading small {
    font-size: 23px;
    line-height: 13px;
    font-family: Poppins-Regular;
    text-transform: lowercase;
    display: block;
}

#bottom_banner .content-wrapper img {
    display: none;
}


/* clients page */

#client-sec1 .input.text.required,
#cstream-sec1 .input.text.required {
    width: 70%;
}

.page-info-panel .card-body::after {
    content: "";
    background: rgb(25, 150, 249);
    background: -moz-linear-gradient(left, rgba(25, 150, 249, 1) 50%, rgba(1, 224, 115, 1) 50%);
    background: -webkit-linear-gradient(left, rgba(25, 150, 249, 1) 50%, rgba(1, 224, 115, 1) 50%);
    background: linear-gradient(to right, rgba(25, 150, 249, 1) 50%, rgba(1, 224, 115, 1) 50%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1996f9', endColorstr='#01e073', GradientType=1);
    width: 100%;
    height: 5px;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.page-info-panel.card {
    /* max-width: 450px; */
    width: 100% !important;
    display: block;
    border: none;
}

.page-info-panel .card-header {
    padding: 14px 12px;
}

.page-info-panel.card .card-text {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 12px;
}

.page-info-panel .card-header h4 {
    flex-grow: 1;
    width: 39%;
}

.no-data-search {
    font-size: 18px;
    color: #fff;
}

#content_stream_id .no-data-search {
    margin-left: 15px;
}

#clientSearch {
    max-width: 350px;
    width: 100%;
}

#clientSearch .input-group {
    width: 100%;
    position: relative;
}

#clientSearch .input.text.required {
    width: 100%;
}

#clientSearch input {
    border-radius: 0;
    padding: 8px 12px;
    height: auto !important;
    width: 100%;
}

#clientSearch #searchclear {
    position: absolute;
    right: 45px;
    top: 15px;
    color: #9b9494;
    font-size: 15px;
}

#clientSearch .btn {
    position: absolute;
    right: 0;
    top: 4px;
    transform: rotateY(180deg);
    z-index: 9;
}

.client-list {
    text-align: center;
    max-width: 890px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.clienBox {
    max-width: 210px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
    padding: 24px 48px 0 0;
}

.clienBox .client-avatar {
    width: 152px;
    height: 152px;
    display: block;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    border: 5px solid #1996f9;
    margin: 0 auto 12px;
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.18);
}

.clienBox .client-avatar img {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    filter: blur(0);
    object-fit: cover;
    height: 100%;
    border-radius: 100%;
    width: 100%;
}

.clienBox .client-avatar:hover img {
    filter: blur(4px);
}

.basic-option {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    transform: translateY(50%);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    text-align: center;
}

.client-avatar:hover .option {
    bottom: 50%;
}

.basic-option .btn {
    background-color: grey;
    border-radius: 100%;
    width: 35px;
    height: 35px;
    text-align: center;
    padding: 0 !important;
    -webkit-appearance: unset;
}

.basic-option .btn i {
    color: blue !important;
    display: flex;
    margin-top: 22%;
    justify-content: center;
}

i.text-primary.cf.cf-close {
    color: red !important;
}

.client-name {
    background-color: #1996f9;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
    max-width: 180px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.client-name h6 {
    color: #fff;
    padding: 8px;
}

#addClient {
    width: 60px;
    height: 60px;
    border: 3px solid #fff;
    border-radius: 100%;
    padding: 0 !important;
    display: block;
}

#addClient a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#addClient span {
    color: #fff;
    font-size: 48px;
    display: block;
    position: relative;
}

.clienBoxx.client1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-soc-popup.close {
    position: absolute;
    right: 21px;
    top: 4%;
}

#selectSocMedia .search-loader-wrapper .lds-ring {
    top: 32%;
}

#saveClient_form .loader-wrapper .lds-ring div {
    border-color: #048dcd transparent transparent transparent;
}

#saveClient_form .loader-wrapper {
    position: relative;
}

#saveClient_form .lds-ring {
    position: absolute;
    right: 0;
    left: 0;
    top: -29px;
    display: none;
}

#saveClient_form .update-loader-wrapper .lds-ring {
    left: 20px;
    top: 39px;
    z-index: 9;
}

.editctream-loader-wrapper {
    display: none;
}

.editctream-loader-wrapper .lds-ring {
    z-index: 9;
    position: absolute;
    right: 30%;
    bottom: 1%;
}

.editctream-loader-wrapper .lds-ring div {
    width: 28px;
    height: 28px;
    border-color: #057ae8 transparent transparent transparent;
}


/* content-stream css */

#select_schedule span i {
    font-size: 13px;
    position: relative;
    top: 1px;
}

#select_c_streamer a,
#selectSocMedia a,
#select_schedule a {
    cursor: pointer;
}

#cstream-sec2 .row .stream-title {
    overflow-wrap: anywhere;
}

#cstream-sec2 .row {
    display: block;
    column-count: 3;
    column-width: 99px;
    -webkit-columns: 100px 3;
    -moz-columns: 100px 3;
    columns: 100px 3;
}

#cstream-sec2 .row .col {
    max-width: 100% !important;
    min-height: 420px;
}

.stream-content {
    position: relative;
    overflow: hidden;
    border: 3px solid#31a6b6;
    border-radius: 5px;
}

.stream-content img {
    filter: blur(0);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.stream-content:hover img {
    filter: blur(4px)
}

.stream-content:hover .option {
    bottom: 50%;
}

.stream-title h6 {
    color: #fff;
    margin: 12px 0.5px 0 0;
    word-break: break-all;
    font-size: 16px;
}

.stream-description p {
    font-size: 14px !important;
}

.stream-bottom a {
    max-width: 54px;
    width: 100%;
    padding: 6px;
    display: inline-block;
    vertical-align: top;
    border-radius: 50px;
    font-size: 11px;
    line-height: 11px;
    color: #fff !important;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #31a6b6;
    margin: 3px 0;
}

.stream-bottom a:last-child {
    margin-bottom: 0;
}

#cstream-sec2 .col:last-child {
    /* display: flex; */
    align-self: flex-start;
    align-items: flex-start;
}

.stream-bottom .tag_hidden {
    display: none;
}

.stream-bottom .tag_hidden.show {
    display: inline-block;
}

#c_stream_output img {
    max-width: 900px;
    width: 100%;
}

.display-uploaded-file ul li {
    margin: 30px;
    width: 100%;
    position: relative;
    margin-bottom: 0px;
}

.display-uploaded-file ul li:last-child {
    margin-bottom: 30px;
}

.des-title {
    position: absolute;
    right: 0;
    top: 0;
    overflow: hidden;
    max-width: 435px;
    width: 100%;
    height: 100%;
}

.des-title h6 {
    color: #333;
}

.display-uploaded-file ul li #cstream_uploaded-file {
    max-width: 150px;
    width: 100%;
}

#files_uploaded .basic-option a {
    background-color: grey;
    border-radius: 100%;
    padding: 7px 12px;
}

#files_uploaded {
    margin: 0 auto;
    justify-content: center;
}

.col-btn-add-stream {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loadBtn a {
    border: none;
    background-color: transparent;
    color: #fff !important;
    font-size: 11px;
}

#cstream-sec2 .stream-bottom li {
    display: none;
    list-style: none;
    flex-basis: 22%;
}

#cstream-sec2 .stream-bottom li:first-child,
#cstream-sec2 .stream-bottom li:nth-child(2),
#cstream-sec2 .stream-bottom li:nth-child(3),
#cstream-sec2 .stream-bottom li:nth-child(4) {
    display: unset;
}

#files_uploaded .basic-option {
    width: 25%;
}

#textStream {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    background-color: #f5f5f5;
}

#textStream button {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5;
    border-radius: 0.2rem !important;
    text-transform: uppercase;
    font-family: Nunito-Bold;
    width: 100%;
}

#textStream .remove-text {
    max-width: 100%;
}

#textStream .uploader_inner {
    background-color: #f5f5f5;
    position: relative;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: none !important;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
}

#textStream .uploader_inner:hover {
    background-color: #def3ff;
}


/* create-client css */

#saveClient_form {
    max-width: 520px;
    width: 100%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.2);
    padding: 48px 24px;
}

#saveClient_form1 {
    max-width: 520px;
    width: 100%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.2);
    padding: 48px 24px;
}

#client_avatar_cont {
    border: 2px solid #00e76c;
    width: 105px;
    height: 105px;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    background-color: #000;
}

#client_avatar_cont img {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#client_avatar_cont .action {
    position: absolute;
    top: 105px;
    height: 105px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.avatar-holder {
    position: relative;
}

.avatar-holder:hover .custom_tooltip {
    opacity: 1;
    visibility: visible;
}

#client_avatar_cont:hover img {
    opacity: 0.5;
}

#client_avatar_cont:hover .action {
    top: 0;
}

#client_avatar_cont .action .btn {
    position: absolute;
    left: 28px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

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

#client_avatar_cont .action input {
    position: absolute;
    height: 105px;
    opacity: 0;
    left: 12px;
    cursor: pointer;
}

#saveClient_form .input-field {
    width: 100%;
    padding: 0 15px;
    position: relative;
}
#client_create_sec1 .eye-cross {
    position: absolute;
    top: 10px;
    right: 25px;
}
.input-field input,
.input-field select,
.text-area-cont textarea {
    width: 100%;
    display: block;
    font-family: Poppins-Regular;
    padding: 12px 15px;
    border: 1px solid #1a97f8;
    min-height: 48px;
}

.input-field select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    padding-right: 34px;
}

.input-field [type="submit"] {
    font-family: Poppins-Regular;
    border-radius: 50px;
    max-width: 100px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.drop-select {
    position: relative;
}

.drop-select select {
    cursor: pointer;
    background-color: white;
    z-index: 0;
}

.drop-select::after {
    content: "";
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    border-top: 0.7em solid #1a97f8;
    border-right: 0.4em solid transparent;
    border-bottom: 0;
    border-left: 0.4em solid transparent;
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    z-index: 0;
}

.TimeZone::before {
    height: 75% !important;
}

.TimeZone::after {
    top: 37%;
}

#select_reschedule .TimeZone {
    margin-bottom: 0 !important;
}

.drop-select::before {
    content: "";
    height: 100%;
    border-left: 1px solid #269cf8;
    position: absolute;
    right: 50px;
    z-index: 9;
}

#c_amount {
    padding-left: 50px !important;
}

#saveClient_form .number {
    position: relative;
}

#saveClient_form .number i {
    position: absolute;
    top: 0;
    left: 26px;
    font-size: 18px;
    line-height: 47px;
    border-right: 1px solid #1a97f8;
    padding-right: 12px;
    color: #1a97f8;
}

#saveClient_form textarea {
    width: 100%;
    border: 1px solid #1a97f8;
    padding: 12px;
    font-family: Poppins-Regular;
}

#client_create_sec1 .button-group {
    max-width: 250px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

#client_create_sec1 .button-group button {
    max-width: 123px;
    width: 100%;
}

#client_create_sec1 .button-group img {
    box-shadow: 12px 0 28px 0 rgba(0, 0, 0, 0.2);
    border-radius: 100%;
}

#client_accounts_wrapper {
    position: relative;
}

#client_accounts_wrapper .row:first-child {
    position: absolute;
    top: -64px;
    left: 0;
    right: 5px;
}

#client_accounts_wrapper .dataTables_length,
#client_accounts_wrapper .dataTables_info {
    display: none;
}

#client_accounts_filter {
    margin-bottom: 24px;
}

#client_accounts_filter label {
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-family: Poppins-Regular;
    color: #ffffff;
    font-size: 0;
}

#client_accounts_filter input {
    max-width: 250px;
    padding: 18px 15px;
}
#client_accounts .width-fit{
    width: 30% !important;
}
#client_accounts_wrapper .pagination {
    justify-content: flex-end;
}

#client_accounts th {
    border: 1px solid transparent !important;
width: unset;
    vertical-align: middle;
    -webkit-clip-path: polygon(1% 0, 99% 0, 99% 100%, 1% 100%);
    clip-path: polygon(1% 0, 99% 0, 99% 100%, 1% 100%);
}

#client_accounts th {
    background-color: #0bd76a;
    text-align: center;
    color: #fff;
    font: 22px/30px Nunito-ExtraBold;
}

#client_accounts td {
    text-align: center !important;
    background-color: #fff;
    font: 14px/22px Poppins-Regular;
    color: #313131;
    padding: 12px 30px;
    vertical-align: middle;
}


/*#client_accounts td:first-child, #client_accounts td:nth-child(3) {*/


/*    font: 18px/26px Poppins-SemiBold;*/


/*}*/

#client_accounts tr:first-child td {
    text-align: center !important;
    vertical-align: middle;
    /*padding-top: 40px;*/
}

#client_accounts tr:last-child td {
    text-align: center !important;
    padding-bottom: 40px;
}

#client_accounts .button-group {
    text-align: center;
}

#client_accounts button {
    border-radius: 100%;
    width: 45px;
    height: 45px;
}

#save_fanpage_submit {
    max-width: 100%;
    background-color: #17a2b8;
    /*background: rgb(5,117,230);*/
    /*background: -moz-linear-gradient(left, rgba(5,117,230,1) 0%, rgba(0,195,255,1) 50%, rgba(5,117,230,1) 100%);*/
    /*background: -webkit-linear-gradient(left, rgba(5,117,230,1) 0%,rgba(0,195,255,1) 50%,rgba(5,117,230,1) 100%);*/
    /*background: linear-gradient(to right, rgba(5,117,230,1) 0%,rgba(0,195,255,1) 50%,rgba(5,117,230,1) 100%);*/
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    background-size: 200% auto;
    transition: all 0.3s ease;
    padding: 7px 26px;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    font-family: Nunito-Bold;
}

#save_fanpage_submit:hover {
    background-position: right center;
}


/* Create Content Stream CSS */

.create-stream-content-template .app-content {
    padding-bottom: 0 !important;
}

#create_cstream_sec1::after {
    content: "";
    max-width: 900px;
    width: 90%;
    display: block;
    margin: 50px auto;
    border-bottom: 2px solid #fff;
}

#create_cstream_form {
    max-width: 720px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

#create_cstream_form .input-field [type="submit"],
#add-text {
    max-width: 100%;
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    background-size: 200% auto;
    transition: all 0.3s ease;
    padding: 12px;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.2);
    font-size: 18px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: Nunito-Bold;
}

.input-field [type="button"] {
    font-family: Poppins-Regular;
    border-radius: 50px;
    max-width: 100px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

#create_cstream_form .input-field [type="submit"]:hover,
#add-text:hover {
    background-position: right center;
}

#cstream_uploader {
    max-width: 880px;
    width: 100%;
    display: block;
    margin: 0 auto;
    background-color: #f5f5f5;
    padding: 12px;
}

.uploader_wrapper {
    background-color: #fff;
    padding: 12px;
}

.uploader_inner {
    border: 2px dashed #9e9e9e;
    padding: 12px;
    background-color: #f5f5f5;
    position: relative;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    min-height: 165px;
}

.uploader_inner:hover {
    background-color: #def3ff;
}

.uploader_inner .text {
    font-size: 20px;
    line-height: 30px;
    font-family: Poppins-Regular;
    color: #616161;
    max-width: 320px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.uploader_inner .img_uploader {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
}

#cstream_upload_preview {
    max-width: 200px;
    width: 100%;
}

.edit-option-wrapper h6 {
    color: #514d48;
}

.edit-option-wrapper {
    background: #fff;
    border: 1px solid#cbd4db;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(111, 119, 130, .15), 0 5px 20px 0 rgba(21, 27, 38, .08);
    padding: 15px;
    position: absolute;
    top: 64%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0 auto;
    top: 63%;
    display: none;
    z-index: 9;
    max-width: 571px;
}

.edit-option-wrapper input,
.edit-option-wrapper textarea {
    width: 100%;
    padding: 6px;
    margin-bottom: 11px;
}

.edit-option-wrapper .btn-cstream-close {
    position: relative;
    top: -23px;
}

.edit-option-wrapper textarea {
    height: 100px !important;
}

#c_stream_output {
    max-width: 900px;
    width: 100%;
    margin: 75px auto 0;
}

.c_stream_thumnail {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

.c_stream_thumnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    filter: blur(0);
}

.c_stream_thumnail .action {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.c_stream_thumnail:hover .action {
    opacity: 1;
}

.c_stream_thumnail .action .btn {
    position: relative;
    border-radius: 100%;
}

.c_stream_thumnail .action .btn:hover .custom_tooltip {
    opacity: 1;
    visibility: visible;
}

.c_stream_item .title-area {
    display: flex;
    justify-content: center;
}

.c_stream_item .order-label {
    font-size: 20px;
    line-height: 26px;
    font-family: Nunito-Bold;
    color: #fff;
    margin: 0 8px;
}

#c_stream_title {
    background-color: transparent;
    border: none;
    width: 90%;
    display: block;
    font-size: 20px;
    line-height: 26px;
    font-family: Nunito-Bold;
    color: #fff;
    margin: 0 8px 0 0;
}

.image-video_uploader_files #files_upload {
    overflow-y: scroll;
    padding: 50px !important;
    margin: 0;
    min-height: 365px;
}

.image-video_uploader_files .files-wrap {
    border: none;
    border-radius: 0 !important;
}

#files_upload li img {
    max-width: 80px;
    width: 100%;
    height: 55px;
    object-fit: cover;
}

.order-label {
    padding: 10px;
    position: absolute;
    left: 14px;
}

#content_stream_id img {
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    min-height: 200px;
    height: 200px;
}

#files_uploaded li:hover .option {
    bottom: 50%;
}

#files_uploaded li .cstream-cont {
    position: relative;
    overflow: hidden;
}

.btn-editdesctit {
    max-width: 100%;
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    background-size: 200% auto;
    transition: all 0.3s ease;
    padding: 8px 20px;
    box-shadow: 0 0 29px 0rgba(0, 0, 0, 0.2);
    font-size: 13px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: Nunito-Bold;
    color: #fff;
}

.btn-editdesctit:hover {
    background-position: right center;
}


/* create/edit report agency css */

.title-page {
    font-size: 27px;
    text-align: center;
    margin-bottom: 22px;
    color: #f8f9fa;
}

#c_agecyReport_form {
    max-width: 520px;
    width: 100%;
    display: block;
    border-radius: 8px;
    box-shadow: 0 0 26px 0 rgba(0, 0, 0, 0.2);
    padding: 48px 24px;
    margin: 0 auto;
}

#c_agecyReport_form .input-field {
    width: 100%;
    padding: 0 15px;
}


/* create report css */

#c_report_sec1 .title-area {
    align-items: center;
}

#c_report_sec1 .title-area .client-avatar {
    border: 2px solid green;
    width: 60px;
    height: 60px;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    margin-right: 12px;
}

#c_report_sec1 .title-area .agency-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

#c_report_sec1 .title-area .basic-option .btn {
    background: none;
}

#c_report_sec1 .title-area .basic-option .btn i {
    text-shadow: 0 0 5px #000;
}

#c_report_sec1 .title-area h2 {
    /* max-width: 378px;
    width: 100%; */
    color: #ffffff;
    font-family: Nunito-Bold;
    text-transform: uppercase;
    position: relative;
}

#c_report_sec1 .title-area h2 input {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    margin: 12px 0 0;
}

#c_report_sec1 .title-area h2 button {
    font-size: 12px;
    background: #fff;
    border: 1px solid#898989;
    padding: 0 2px;
    outline: none;
    position: absolute;
    bottom: 8px;
    right: 0;
}

#c_report_sec1 .title-area h2 button i {
    color: #898989;
}

#c_report_sec2 .clienBox {
    max-width: 203px;
}

#c_report_sec2 .clienBox .client-avatar:hover img {
    filter: blur(0);
}

#c_report_sec2 .clienBox button a {
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    padding: 12px 15px;
}


/* scheduler css */

#sched_sec_1 .fc-today-button {
    display: none;
}

#scheduler_data .btn-danger {
    font-size: 12px;
}

.scheduler-page-template footer {
    display: none;
}

#calendar-container {
    background-color: #fff;
    padding: 15px;
    margin: 0 0 50px;
}

.scheduler .modal-dialog {
    border: 10px solid #fff;
    border-radius: 8px;
}

.scheduler.fade .modal-dialog {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
}

.scheduler.show .modal-dialog {
    transform: none !important;
}

.scheduler .modal-content {
    border: none;
}

.scheduler .modal-header {
    background-color: #2580db;
}

.scheduler .modal-title {
    text-align: center !important;
    width: 100%;
    color: #fff;
}

.scheduler .modal-header .close {
    z-index: 99999;
    position: absolute;
    float: none;
    top: -20px;
    right: -20px;
    background-color: #d3d3d3;
    opacity: 1 !important;
    text-shadow: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.scheduler .modal-header .close span {
    color: #d81717;
    /* width: 53%; */
    display: block;
    text-align: center;
    margin: 0 auto;
}

.scheduler .timezone-label label {
    position: absolute !important;
    left: 0 !important;
}

.sched_post_cstream {
    position: relative;
    top: 43px;
    background-color: #01e073;
    padding: 6px;
    display: block;
    border-radius: 5px;
    max-width: 80%;
    width: 100%;
    margin: 0 auto;
    word-break: break-all;
    font-size: 12px;
}

.scheduler .modal-body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: baseline;
    margin-top: 24px;
    overflow-y: scroll;
    height: 310px;
    padding: 30px 12px;
    margin-top: 10px;
}

.scheduler .label {
    position: relative;
    top: 6px;
}

.scheduler .label label {
    position: absolute;
    top: -28px;
    left: 14px;
}

#update_scheduler .label label {
    top: -33px;
}

#select_schedule #sched_hour,
#select_schedule #sched_minutes {
    cursor: pointer;
    background-color: transparent;
    z-index: 10;
}

.scheduler .modal-body .col {
    margin-bottom: 12px;
    text-align: center;
}

.scheduler .modal-body button {
    background: none;
    /*display: none;*/
    border: none;
    outline: none;
}

#selectSocMedia .modal-body button {
    position: relative;
}

#selectSocMedia .modal-body button::before {
    content: "\f00c";
    font-family: 'Custom-Fonts' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 35px;
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: green;
    color: #fff;
    max-width: 35px;
    width: 100%;
    height: 35px;
    margin: 0 auto;
    border-radius: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}

#selectSocMedia .modal-body .selected::before {
    opacity: 1;
}

#select_c_streamer .modal-body button::before {
    content: "\f00c";
    font-family: 'Custom-Fonts' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 35px;
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: green;
    color: #fff;
    max-width: 35px;
    width: 100%;
    height: 35px;
    margin: 0 auto;
    border-radius: 100%;
    opacity: 0;
    transition: all 0.3s ease;
}

#select_c_streamer .modal-body .selected {
    position: relative;
}

#select_c_streamer .modal-body .selected::before {
    opacity: 1;
}

.scheduler .modal-body .btn-primary {
    background-color: #007bff;
    cursor: pointer;
    color: #fff !important;
    text-align: center;
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
    border-radius: 50px;
}

.scheduler .modal-body .btn-primary:hover {
    background-color: #3487e0;
    border-color: #007bff;
}

.scheduler .modal-body button img {
    border: 2px solid #1a97f8;
    border-radius: 100%;
    width: 90px;
    height: 90px;
    position: relative;
    overflow: hidden;
    object-fit: cover;
}

#add_schedule_form .modal {
    overflow-y: scroll;
}

.scheduler .modal-body p {
    font-family: Nunito-Bold;
    line-height: 16px;
}

.scheduler .modal-footer .btn {
    display: block;
    margin: 0 auto;
    border-radius: 50px;
    max-width: 180px;
    width: 100%;
    color: #fff;
    z-index: 9999999;
}

.scheduler .custom-checkbox {
    text-align: left;
    margin-top: 12px;
}

.scheduler .custom-checkbox label {
    font-family: Poppins-Regular;
}

.scheduler .social-btn {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 2px solid #1a97f8;
    overflow: hidden;
    margin: 0 auto;
}

.scheduler .fb-btn {
    background-color: #3a559f !important;
}

.scheduler .linkedin-btn {
    background-color: #0274B3 !important;
}

.scheduler .twitt-btn {
    background-color: #1DA1F2 !important;
}

.scheduler .youtube-btn {
    background-color: #d62121 !important;
}

.scheduler .pint-btn {
    background-color: #CB2027 !important;
}

.scheduler .cf {
    font-size: 80px;
    line-height: 90px;
    color: #ffffff;
}

.scheduler .fb-btn .cf {
    position: relative;
    left: 8px;
    top: 8px;
}

.scheduler .linkedin-btn .cf {
    font-size: 60px;
    line-height: 70px;
}

.scheduler .twitt-btn .cf {
    font-size: 58px;
    line-height: 70px;
}

.scheduler .youtube-btn .cf {
    font-size: 58px;
    line-height: 70px;
}

.scheduler .pint-btn .cf {
    font-size: 60px;
    line-height: 70px;
}

.fc-past {
    background-color: rgba(0, 0, 0, 0.025);
}

.fc-past .addContent_btn {
    display: none;
}

#addContent_btn i {
    font-size: 13px;
    margin-right: 5px;
}

#addContent_btn {
    z-index: 9999999999;
    max-width: 120px;
    width: 69%;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    font-size: 13px;
}

.fc-day-top {
    position: relative;
}

.info-title {
    padding: 10px;
    text-align: center;
}

.info-title p {
    margin: 0;
    font-weight: bold;
}

#select_schedule a {
    padding: 7px;
    font-size: 15px;
    color: #fff;
}

.actions {
    display: flex;
}

#client_accounts_wrapper .actions button {
    border-radius: 5px;
    height: auto;
    width: 100%;
    margin: 0 4px;
    font-size: 12px;
}

.btn-resched {
    border-radius: 0 !important;
    height: auto !important;
    width: 22% !important;
    margin: 0 4px;
    font-size: 15px;
    background-color: transparent !important;
    color: #0bd76a !important;
    border: none;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.btn-resched:hover {
    color: #048ad0 !important;
}


/*#select_reschedule-btn.disabled {*/


/*    pointer-events: none;*/


/*    cursor: default;*/


/*}*/

#select_c_streamer-btn.disabled,
#selectSocMedia-btn.disabled,
#select_schedule-btn.disabled {
    pointer-events: none;
    cursor: default;
}

#select_reschedule .reschedule-date-body:last-child {
    height: 160px !important;
}

#select_reschedule .modal-body {
    overflow-y: unset !important;
}

#resched-date {
    cursor: pointer;
}

#update_scheduler .modal-body {
    height: 315px;
}

#update_scheduler .update-repurpse {
    padding: 0 14px;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 40%;
}

.input-group-cont .input-group {
    margin-right: 13px;
}

.input-group-cont .input-group:last-child select {
    margin-left: 12px;
}

.input-group-cont .input-group:last-child .drop-select::before {
    right: 23px;
}

.input-group-cont .input-group:last-child .drop-select::after {
    right: 2px;
}

.input-group-cont .input-group:first-child .drop-select::before {
    right: 34px;
}

.input-group-cont .input-group:first-child .drop-select::after {
    right: 14px;
}

.input-group-cont .input-group label {
    left: 1px;
}

.input-group-cont .input-group:last-child label {
    left: 11px;
}

#update_scheduler .input-field select,
#update_scheduler .input-field #resched-date {
    padding-right: 5px;
    z-index: 9999999 !important;
    background-color: transparent !important;
}

#update_scheduler .modal-body .col {
    margin-bottom: 35px;
}

#ui-datepicker-div {
    background: rgb(2, 184, 138);
    background: -moz-linear-gradient(left, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    background: linear-gradient(to right, rgba(2, 184, 138, 1) 0%, rgba(4, 134, 207, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#02b88a', endColorstr='#0486cf', GradientType=1);
}

.ui-datepicker .ui-datepicker-header {
    background: #0680db;
    border: none;
    color: #fff;
}

.ui-datepicker th {
    color: #fff;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #fff url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
}

.ui-icon {
    text-indent: unset;
    overflow: unset;
}

.ui-datepicker {
    width: 19em;
}

.ui-datepicker .ui-datepicker-next {
    right: 25px;
}

.ui-datepicker-next:hover {
    right: 25px;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-next:hover,
.ui-datepicker-prev:hover {
    right: 25px;
    background-color: transparent !important;
    border: none;
    transition: all .3s ease-in-out;
}

#addSchedule_btn {
    position: absolute;
    right: 40%;
    top: -56px;
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background-position-x: 0;
    background-position-y: 0;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.2);
    font-size: 14px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: Nunito-Bold;
    color: #fff;
    padding: 12px;
}

#addSchedule_btn:hover {
    background-position: right center;
}


/* training */

.vid-list-wrap iframe {
    width: 100%;
}

#training h6 {
    font-size: 20px !important;
}

#training .colored-bg {
    border-radius: 0 !important;
}

.site-container {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

#training .walk-through-vid-wrap {
    align-items: unset;
}


/* #training .walk-through-vid-wrap .col {
    background-color: #e7e7e7;
} */

#training .wt-vid-wrap {
    width: 100%;
    max-width: 1080px;
    height: auto;
    display: block;
    padding-bottom: 57%;
}

#training .walk-through-vid-wrap .desc-wrap {
    padding: 45px 20px 45px 20px;
    height: 100%;
    background-color: #e7e7e7;
}

#training .walk-through-vid-wrap .desc-wrap p {
    padding: 5px;
}

#training .vid-wrap-text{
    overflow-y: auto;
    max-height: 334px;
}

#training .vid-list-wrap,
#training .docs-list-wrap {
    padding: 25px;
    background-color: #e7e7e7;
}

#training .vid-list-wrap .col,
#training .docs-list-wrap .col {
    padding: 3px;
}

#training .vid-list-wrap .content-wrap,
#training .docs-list-wrap .content-wrap {
    padding: 15px 15px 40px 15px;
    border: 1px solid #d7d7d7;
}

#training .vid-list-wrap p,
#training .docs-list-wrap p {
    font-family: 'Poppins-Medium';
    color: #222;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#training .tut-vid-wrap i:hover {
    background-color: #00adef;
}

#training .tut-vid-wrap img~i {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 18px;
    color: #fff;
    line-height: 35px;
    padding: 0px 18px;
    border-radius: 8px;
}

#training i {
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

#dashboard-sec-1 .ftr-vid iframe,
#training .wt-vid-wrap iframe {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 745px;
}

#account .colored-bg,
#training .colored-bg {
    padding: 15px;
    margin-bottom: 30px;
    background-color: rgba(119, 119, 119, 0.1);
    border-radius: 8px;
    justify-content: flex-start;
    width: 100%;
}

#main-content .flex-box {
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-flex;
    display: -moz-box;
    display: -ms-flexbox;
    /* justify-content: center; */
    -webkit-box-align: center;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    display: flex;
    align-items: center;
}

#account .title-area i.fa-tachometer,
#training .title-area i.fa-tachometer {
    font-size: 20px;
}

#account .title-area i,
#account .title-wrap i,
#training .title-area i {
    font-size: 45px;
    background: rgb(6, 128, 219);
    background: -moz-linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background: -webkit-linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background: linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background-clip: border-box;
    background-clip: border-box;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0680db', endColorstr='#00e86a', GradientType=1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#training .docs-list-wrap .content-wrap i {
    font-size: 150px;
    color: #333;
}

#training .vid-list-wrap p,
#training .docs-list-wrap p {
    font-family: 'Poppins-Medium';
    color: #222;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#training .docs-list-wrap i:hover {
    color: #0578e2cf;
}

#main-content .title-area h3 {
    font: 30px/40px 'Poppins-Bold';
    color: #fff;
}


/* footer css */

footer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
}

.footr-cont {
    max-width: 1995px;
    margin: 0 auto;
    width: 100%;
}

.fnav-links {
    text-align: left;
}

.fnav {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 14px;
    text-transform: capitalize;
    font-family: Poppins-Regular;
    color: #252525;
    padding: 0 5px;
    border-right: 1px solid;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.fnav:hover {
    color: #02b995;
}

.fnav:first-child {
    padding-left: 0;
}

.fnav:last-child {
    padding-right: 0;
    border-right: none;
}


/* repsonsive menu and button */

#res_menu_btn {
    width: 45px;
    display: none;
    background: rgb(0, 242, 96);
    background: -moz-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00f260', endColorstr='#0575e6', GradientType=1);
    position: absolute;
    top: -4px;
    right: 20px;
    padding: 9px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 999;
}

#res_menu_btn span {
    border: 2px solid #fff;
    width: 100%;
    display: block;
    border-radius: 50px;
    margin: 6px 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#res_menu_btn::before {
    content: "";
    border: 2px solid #fff;
    width: 100%;
    display: block;
    border-radius: 50px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#res_menu_btn::after {
    content: "";
    border: 2px solid #fff;
    width: 100%;
    display: block;
    border-radius: 50px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#res_menu_btn.resmenu-open span {
    opacity: 0;
}

#res_menu_btn.resmenu-open::before {
    position: relative;
    transform: rotate(45deg);
    top: 10px;
}

#res_menu_btn.resmenu-open::after {
    position: relative;
    transform: rotate(-45deg);
    bottom: 10px;
}

#resposnive-menu {
    max-width: 420px;
    width: 100%;
    display: block;
    height: 100%;
    position: fixed;
    top: 0;
    left: -500px;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.5);
    padding: 20px 0 50px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    overflow-y: auto;
}

#resposnive-menu.show {
    left: 0;
}

#resposnive-menu .site-logo img {
    display: block;
    margin: 0 0 24px;
}

#resposnive-menu .h-admin-bar {
    justify-content: flex-start;
    margin-bottom: 12px;
}

#resposnive-menu .h-admin-bar .text {
    font-size: 17px;
    line-height: 25px;
    font-family: Poppins-Regular;
}

#resposnive-menu .h-admin-bar .text span {
    color: #0581d9;
    display: block;
    font-size: 12px;
    line-height: 20px;
}

#resposnive-menu .h-admin-bar img {
    border-radius: 100%;
    margin-right: 8px
}

#resposnive-menu .userDropdown {
    position: relative;
    padding-right: 15px;
    display: flex;
    align-items: center;
}

#resposnive-menu .userDropdown::after {
    content: "";
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    border-bottom: 0;
    border-top: 0.5em solid #007bff;
    border-right: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    position: absolute;
    top: 50%;
    right: 0;
}

.resnav {
    font-size: 14px;
    line-height: 22px;
    font-family: Poppins-Regular;
    color: #252525;
    padding: 12px 15px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: block;
}

.resnav:hover {
    background-color: #0494c5;
    color: #ffffff;
}


/* My Account css*/

#ma-sec .accountIcon {
    font-size: 20px;
    line-height: 20px;
    background: rgb(6, 128, 219);
    background: -moz-linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background: -webkit-linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background: linear-gradient(to bottom, rgb(6, 128, 219) 0%, rgb(6, 128, 219) 50%, rgb(0, 232, 106) 100%);
    background-clip: border-box;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0680db', endColorstr='#00e86a', GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#ma-sec .fs-title {
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
    max-width: 480px;
}

.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

#ma-sec .btn-group {
    width: 100%;
    display: block;
}

#ma-sec .btn {
    position: relative;
    max-width: 250px;
    width: 100%;
    font-size: 14px;
    line-height: 22px;
    padding: 12px;
    border-radius: 5px;
    text-transform: uppercase;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

#ma-sec input[type="text"],
#ma-sec text-area,
#ma-sec input[type="password"] {
    width: 100%;
    display: block;
    padding: 12px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
}

#ma-sec input[type="text"]:hover,
#ma-sec input[type="password"]:hover,
#ma-sec text-area:hover,
#ma-sec input[type="text"]:focus,
#ma-sec input[type="password"]:focus,
#ma-sec text-area:focus,
#ma-sec input[type="text"]:active,
#ma-sec input[type="password"]:active,
#ma-sec text-area:active {
    border-bottom-color: #039dbc;
}

.action-button {
    width: 100px;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    transition: all 0.3s ease;
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background-size: auto;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    background-size: 200% auto;
}

.action-button:hover {
    background-position: right center;
}

form button .spinner-border {
    position: absolute;
    right: -28px;
    top: 22%;
    border-width: 3px !important;
    width: 1.4rem;
    height: 1.4rem;
    display: none;
}

#UserImage .fs-title {
    border: none;
    margin: 12px auto;
}

#UserImage .image-cont {
    position: relative;
    overflow: hidden;
    max-width: 250px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#ma-sec .alert {
    position: fixed;
    top: 15px;
    left: 0;
    right: 0;
    max-width: 550px;
    width: 100%;
    display: none;
    margin: 0 auto;
}

#ProPicPreview {
    max-width: 250px;
    max-height: 100%;
    height: auto;
    width: 100%;
    display: block;
    margin: 12px auto 0;
    object-fit: cover;
}

#UserImage .upload-btn-wrapper {
    position: absolute;
    right: -40px;
    top: 20px;
    max-width: 30px;
    width: 100%;
    height: 30px;
    border-radius: 100%;
    background-color: #02bc99;
    transition: all 0.3s ease;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

#UserImage .image-cont:hover .upload-btn-wrapper {
    right: 10px;
}

#UserImage .upload-btn-wrapper .btn {
    padding: 3px;
    background-color: transparent;
    border-color: transparent;
}

.upload-btn-wrapper .btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

#updateProPic {
    left: -100px;
}

#ma-sec #UserImage img {
    max-width: 250px;
    width: 100%;
    height: 250px;
    margin: 0 auto;
    object-fit: cover;
}

.upload-btn-wrapper input[type="file"] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.show-pass {
    position: absolute;
    right: 20px;
    top: 45px;
    bottom: 5px;
    cursor: pointer;
    font-size: 24px;
    color: #666;
}

#updateAcntPW {
    max-width: 220px;
    width: 100%;
    padding: 12px;
    margin-top: 36px;
}

.action-button:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #02c195;
}

#changeEmailadd .fs-subtitle,
#changeEmailadd input {
    width: 100%;
    display: block;
}

#change_email_address .btn-save {
    background: #02bc99;
    border: none;
}

#ma-sec .modal-footer .btn {
    width: auto;
    padding: 8px 28px;
}

#ma-sec .btn-group {
    text-align: center;
}

#changeEmailadd .modal-content {
    border: none;
}

#changeEmailadd .modal-header {
    background-color: #2580db;
}

#changeEmailadd .modal-dialog {
    border: 10px solid #fff;
    border-radius: 8px;
}

#changeEmailadd h5 {
    text-align: center !important;
    width: 100%;
    color: #fff;
}

#changeEmailadd .modal-dialog .modal-footer button {
    background-color: #17a2b8;
    border-color: #17a2b8;
    border-radius: 25px;
    font-size: 12px;
}

#changeEmailadd span {
    color: white;
}

#changeEmailadd #my_account_form_email input {
    border: 1px solid #1a97f8;
}


/* loading css*/

#ma-sec .bg-light .userprof-update {
    position: absolute;
    left: 20%;
    top: 56%;
}

#ma-sec .bg-light .userpass-update {
    position: absolute;
    left: 25%;
    top: 75%;
}

#UserImage~.loader-wrapper .lds-ring div,
#ma-sec .loader-wrapper .lds-ring div {
    border-color: #048dcd transparent transparent transparent;
}

.loader-wrapper .lds-ring {
    display: none;
    margin: 0 auto;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* Preloader css*/

.search-loader-wrapper .lds-ring div {
    border-color: #048dcd transparent transparent transparent;
}

.search-loader-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    height: 100vh;
    top: 0;
    z-index: 99;
    display: none;
}

.search-loader-wrapper .lds-ring {
    top: 50%;
}

.del-loader-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #0a0b0b5e;
    height: 100vh;
    top: 0;
    z-index: 99;
    display: none;
}

.del-loader-wrapper .lds-ring {
    top: 50%;
}

.preloader-wrapper {
    position: fixed;
    height: 100vh;
    background-color: #fff;
    left: 0;
    right: 0;
    z-index: 99;
}

.loader {
    width: 250px;
    height: 80px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: helvetica, arial, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    color: #02c194;
    letter-spacing: 0.2em;
}

.loader img {
    animation: loadimg .7s infinite alternate ease-in-out;
}

.loader::after {
    bottom: 27px;
}

.loader::before {
    top: -14px;
}

.loader::before,
.loader::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    animation: load .7s infinite alternate ease-in-out;
    background: rgb(0, 242, 96);
    background: -moz-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(0, 242, 96, 1) 0%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00f260', endColorstr='#0575e6', GradientType=1);
}
.h-custom-fit iframe{
height: fit-content;
}
@keyframes loadimg {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5
    }
    100% {
        opacity: 1;
    }
}

@keyframes load {
    0% {
        left: 0;
        height: 30px;
        width: 15px;
        opacity: 0;
    }
    50% {
        height: 8px;
        width: 40px;
        opacity: 0.5
    }
    100% {
        left: 235px;
        height: 30px;
        width: 15px;
        opacity: 1;
    }
}


/* responsive */

@media screen and (max-width:1366px) {
    #site-logo {
        flex-basis: 0;
    }
    #main-navi {
        position: relative;
        top: 3px;
    }
    .hnav {
        font-size: 12px;
        line-height: 14p
    }
    #h-admin-bar {
        flex-basis: 4%;
    }
    #h-admin-bar .nav-link img {
        border-radius: 100%;
        max-width: 40px;
    }
    #h-admin-bar .text {
        font-size: 14px;
        line-height: 14px;
    }
    #h-admin-bar .text span {
        font-size: 10px;
        line-height: 15px;
    }
    .page-info-panel.card .card-text {
        font-size: 14px;
        line-height: 24px;
    }
}

@media screen and (max-width:1199px) {
    .page-info-panel .card-header h4 {
        width: 49%;
    }
    input#searchinput {
        margin-left: 10% !important;
    }
    .big-heading {
        font-size: 42px;
        line-break: 50px;
    }
    h1 {
        font-size: 35px;
        line-break: 42px;
    }
    h2 {
        font-size: 32px;
        line-break: 40px;
    }
    h3 {
        font-size: 28px;
        line-break: 36px;
    }
    h4 {
        font-size: 24px;
        line-break: 32px;
    }
    h5 {
        font-size: 20px;
        line-break: 30px;
    }
    .hnav {
        padding: 0 5px;
    }
    .hnav::after {
        right: -4px;
    }
    #dboard_sec1 .info-box {
        min-height: 153px;
    }
    .vreel-button,
    .visreel-button {
        min-height: 220px;
    }
    #client_avatar_cont {
        border: none;
        display: flex;
        /* overflow: visible; */
    }
    #client_avatar_cont img {
        border-radius: 100%;
        border: 2px solid #00e76c;
        background-color: #000;
    }
    /* #client_avatar_cont .action {
        position: relative;
        top: 0;
        height: auto;
    } */
    /* #client_avatar_cont .action .btn {
        position: absolute;
        left: 15px;
        top: 0;
        transform: translateY(0);
        background-color: #0577e4;
    } */
    /* #client_avatar_cont .action input{
        height: 40px;
        width: 48px;
    } */
    input#q {
        margin-left: 10% !important;
    }
    #client-sec1 .input.text.required,
    #cstream-sec1 .input.text.required {
        width: 90%;
    }
    .fnav {
        padding: 0 10px;
    }
    #addContent_btn {
        font-size: 11px;
    }
    #training .vid-wrap-text {
        max-height: 240px;
    }
    #dashboard-sec-1 .ftr-vid iframe,
    #training .wt-vid-wrap iframe {
        max-width: 624px;
    }
}

@media screen and (max-width:991px) {
    button#go-to-btcs {
        width: 100%;
        max-width: 300px;
    }
    #cstream-sec2 .row .col {
        flex-basis: 50%;
    }
    #resposnive-menu .site-logo img {
        max-width: 200px;
    }
    #resposnive-menu .h-admin-bar img {
        max-width: 75px;
        width: 100%;
        height: 75px;
    }
    input#searchinput {
        margin-left: 0% !important;
    }
    .big-heading {
        font-size: 38px;
        line-break: 48px;
    }
    h1 {
        font-size: 32px;
        line-break: 40px;
    }
    h2 {
        font-size: 28px;
        line-break: 36px;
    }
    h3 {
        font-size: 26px;
        line-break: 36px;
    }
    header .container-fluid {
        padding: 20px;
    }
    #site-logo {
        flex-basis: auto;
        justify-content: flex-start;
    }
    #main-navi,
    #h-admin-bar {
        display: none !important;
    }
    #res_menu_btn {
        display: block;
        top: 50%;
        transform: translateY(-50%);
    }
    #dboard_sec1 .ftr-vid {
        border: 18px solid #1c1c1c;
    }
    #dboard_sec1 .info-box h2 {
        font-size: 22px;
        line-height: 30px;
    }
    #dboard_sec1 .info-box {
        min-height: 105px;
    }
    .vreel-button h2,
    .visreel-button h2 {
        font-size: 22px;
        line-height: 30px;
    }
    .vreel-button,
    .visreel-button {
        min-height: 180px;
    }
    #bottom_banner .content-wrapper {
        padding: 0 0 0 48px;
    }
    #client-sec1 .col2,
    #cstream-sec1 .col2 {
        padding-left: 15px !important;
    }
    .fnav {
        font-size: 12px;
        line-height: 12px;
        padding: 0 5px;
    }
    .copyright {
        font-size: 13px;
    }
    /* Myaccount css*/
    #ma-sec .btn {
        max-width: 292px;
    }
    input#q {
        margin-left: 1% !important;
    }
    #client-sec1 .input.text.required,
    #cstream-sec1 .input.text.required {
        width: 100%;
    }
    #addContent_btn {
        width: 59%;
    }
    .des-title {
        max-width: 416px;
    }
    #training .walk-through-vid-wrap .col {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }
    #training .walk-through-vid-wrap .desc-wrap {
        height: unset;
    }
    #training .vid-list-wrap .col,
    #training .docs-list-wrap .col {
        flex-basis: 50%;
        width: 100%;
        max-width: 100%;
    }
    #dashboard-sec-1 .ftr-vid iframe,
    #training .wt-vid-wrap iframe {
        max-width: 100%;
    }
    #training .walk-through-vid-wrap .desc-wrap {
        margin-top: 20px;
    }
    #c_report_sec1 .title-area {
        width: 100%;
        max-width: 100%;
        flex-basis: 100%;
    }
}

@media screen and (max-width:767px) {
    #sched_sec_1 h2 {
        margin: 0 !important;
    }
    .big-heading {
        font-size: 35px;
        line-break: 42px;
    }
    h1 {
        font-size: 30px;
        line-break: 40px;
    }
    h2 {
        font-size: 26px;
        line-break: 36px;
    }
    h3 {
        font-size: 24px;
        line-break: 34px;
    }
    h4 {
        font-size: 22px;
        line-break: 32px;
    }
    .vreel-button {
        margin-bottom: 36px;
    }
    #bottom_banner .content-wrapper {
        padding: 0 36px;
    }
    #bottom_banner .content-wrapper img {
        display: block;
    }
    #bottom_banner .col2 {
        display: none;
    }
    #client-sec1 .col1,
    #cstream-sec1 .col1 {
        margin-bottom: 24px;
        padding: 0 15px !important;
    }
    #clientSearch .input-group {
        max-width: 100%;
    }
    #cstream-sec2 .row {
        text-align: center;
    }
    #client_create_sec1 {
        margin-bottom: 0 !important;
    }
    #client_create_sec1 .col1 {
        margin-bottom: 50px;
    }
    #client_create_sec2 h2 {
        margin-bottom: 19px;
        text-align: left;
        font-size: 19px;
    }
    /* #client_accounts_wrapper .row:nth-child(2) {
        position: relative !important;
        overflow: scroll !important;
    } */

    #client_accounts {
        width: 525px !important;
    }
    #client_accounts th {
        font: 16px/30px Nunito-ExtraBold;
    }
    /* #c_report_sec1 .row {
        max-width: 320px;
        width: 100%;
        display: block;
        margin: 0 auto;
    } */
    #c_report_sec1 .title-area .agency-avatar {
        display: block;
        margin: 0 auto 12px;
    }
    footer .col {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }
    .fnav-links {
        margin-bottom: 0;
        display: flex;
        justify-content: center;
    }
    #vineasx_logo {
        margin: 24px auto 0;
    }
    .btn-socmedia {
        margin: -12px auto auto;
        position: relative;
        right: 0;
    }
    /* myaccount css*/
    .ma-sec2 .prof-col {
        margin-left: 0 !important;
    }
    #cstream-sec2 .stream-bottom li {
        margin: 0 auto;
    }
    #cstream-sec2 .row .col {
        max-width: 50% !important;
    }
    #client_accounts_filter input {
        margin: 0 0 auto;
    }
    footer .col img {
        margin: 12px auto 0;
    }
    .fnav {
        font-size: 11px;
        padding: 0 3px;
    }
    .stream-title h6 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stream-title h6,
    .stream-description p {
        text-align: left;
    }
    #calendar .fc-center {
        font-size: 10px;
    }
    #addSchedule_btn {
        right: unset;
        top: -46px;
    }
    .des-title {
        max-width: 100%;
        position: relative;
        margin-top: 10px;
    }
    .des-title p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: -moz-pre-space;
        white-space: pre;
    }
    #hs-beacon iframe {
        bottom: 2px !important;
    }
    #training .vid-wrap-text {
        max-width: 100%;
    }
    .forms-wrapper .col1 {
        flex-basis: 100%;
        order: 1;
        margin-right: 0 !important;
    }
    .forms-wrapper .col2 {
        margin-bottom: 20px;
    }
    #training .vid-list-wrap .col, #training .docs-list-wrap .col {
        max-width: 50%;
    }
    #viewscheduler {
        position: unset !important;
    }
    .stream-description p {
        word-break: break-all;
    }
}

@media screen and (max-width:640px) {
    #resposnive-menu .h-admin-bar img {
        max-width: 75px;
        height: 75px;
    }
    #files_uploaded .basic-option {
        width: 38%;
    }
    #resposnive-menu {
    max-width: 80%;
    }
}

@media screen and (max-width:575px) {
    #resposnive-menu .userDropdown::after {
        top: 60%;
        right: -10px;
    }
    .display-uploaded-file ul li #cstream_uploaded-file{
        max-width: 100%;
    }
    .big-heading {
        font-size: 32px;
        line-break: 40px;
    }
    h1 {
        font-size: 28px;
        line-break: 36px;
    }
    h2 {
        font-size: 25px;
        line-break: 32px;
    }
    h3 {
        font-size: 22px;
        line-break: 32px;
    }
    h4 {
        font-size: 20px;
        line-break: 32px;
    }
    h5 {
        font-size: 18px;
        line-break: 26px;
    }
    h6 {
        font-size: 16px;
        line-break: 24px;
    }
    #dboard_sec1 .ftr-vid {
        margin-bottom: 36px;
    }
    #saveClient_form .initial {
        flex-wrap: wrap;
        justify-content: center;
        padding-left: 0 !important;
    }
    #client_accounts_wrapper .row:nth-child(2) {
        margin: 0 0 0 -15px;
    }
    #client_avatar_cont {
        margin-bottom: 24px;
    }
    /* myaccount css*/
    .ma-sec1 {
        text-align: center;
    }
    #change_password #inputBox {
        flex-basis: 100%;
    }
    #change_email_address .fs-subtitle {
        text-align: left;
    }
    #training .walk-through-vid-wrap,
    #training .training-vid-row,
    #training .training-docs-row {
        padding: 18px !important;
    }
    #training .vid-list-wrap .col, #training .docs-list-wrap .col {
        flex-basis: 100%;
        max-width: 100%;
    }
    .vid-list-wrap iframe {
        height: 250px;
    }
    button#go-to-btcs {
        font-size: 13px !important;
    }
}

@media screen and (max-width:440px) {
    .display-uploaded-file ul li {
        margin: 0;
        margin-bottom: 15px;
    }
    #editPassword #inputBox {
        flex-basis: 100%;
    }
    .uploader_inner {
        display: block !important;
    }
    .uploader_inner .text {
        font-size: 16px;
        text-align: center;
    }
    #cstream_upload_preview {
        max-width: 100%;
    }
    #cstream-sec2 .row .col {
        max-width: 70% !important;
        margin: 0 auto;
        flex-basis: 100%;
    }
    #resposnive-menu .site-logo img {
        max-width: 200px;
    }
    #dboard_sec1 .info-box {
        min-height: 85px;
    }
    #dboard_sec1 .info-box h2 {
        font-size: 18px;
        line-height: 28px;
    }
    .vreel-button h2,
    .visreel-button h2 {
        font-size: 18px;
        line-height: 28px;
    }
    .vreel-button,
    .visreel-button {
        min-height: 160px;
    }
    .scheduler .label label {
        position: relative;
        top: 0;
    }
    .scheduler .modal-header .close {
        top: -10px;
        right: -10px;
    }
    .scheduler .modal-body .col {
        flex-basis: auto;
    }
    .fnav {
        max-width: 200px;
        width: 100%;
        display: inline-block;
        border: none;
        padding: 15px 12px !important;
    }
    .search-loader-wrapper .lds-ring {
        top: 54%;
    }
    /* myaccount css*/
    #my_account_form .col {
        flex-basis: 100%;
    }
    .clienBox {
        padding: 24px 0 0 0;
        margin: 0 auto;
    }
    #client_accounts_filter input {
        max-width: 194px;
    }
    #client_create_sec2 h2 {
        font-size: 17px;
    }
    #calendar .fc-right {
        font-size: 11px;
    }
    #calendar .fc-left {
        font-size: 11px;
    }
    #calendar .fc-center {
        font-size: 8px;
    }
    #calendar .fc-right button {
        display: block;
        max-width: 300px;
        width: 100%;
        margin: 12px auto;
    }
    #client_accounts_wrapper .pagination {
        justify-content: center;
    }
    #addSchedule_btn {
        right: 0;
        top: 0;
    }
    #files_uploaded .basic-option {
        width: 42%;
    }
    #training .vid-list-wrap .col,
    #training .docs-list-wrap .col {
        padding: 3px;
        flex-basis: 100%;
        width: 100%;
    }
    #training .docs-list-wrap .content-wrap i {
        font-size: 90px;
    }
    #training .content-wrap {
        max-width: 100%;
    }
    .vid-list-wrap iframe {
        height: 172px;
    }
}

@media screen and (max-width:375px) {
    .editableform .editable-input input {
        padding-right: 0;
        max-width: 230px;
        width: 100%;
    }
    #cstream_upload_preview {
        max-width: 45%;
        margin: 0 auto;
        display: flex;
    }
    #client_create_sec2 h2 {
        font-size: 14px;
    }
    #client_accounts_filter input {
        max-width: 340px;
    }
    #calendar .fc-left {
        font-size: 10px;
    }
    #client_accounts_wrapper {
        margin-top: 70px;
    }
    #addSchedule_btn {
        left: 0;
        max-width: 251px;
        margin: 0 auto;
    }
        #updateAcntPW {
        max-width: 100%;
    }
        #training .vid-list-wrap, #training .docs-list-wrap {
        padding: 5px;
    }
}

@media screen and (max-width:320px) {
    .search-loader-wrapper .lds-ring {
        top: 62%;
    }
    #training .vid-list-wrap,
    #training .docs-list-wrap {
        padding: 0;
    }
    #cstream-sec2 .row .col {
        padding: 0;
    }
    #resposnive-menu .h-admin-bar .text {
        font-size: 13px;
    }
    #training .vid-list-wrap .content-wrap, #training .docs-list-wrap .content-wrap {
        padding: 4px;
        margin-bottom: 10px;
    }
    #training .walk-through-vid-wrap, #training .training-vid-row, #training .training-docs-row {
        padding: 8px !important;
    }
}

button.btn.btn-info.loading {
    display: none;
}

input#q {
    border-radius: 0;
    padding: 8px 12px;
    height: auto !important;
    width: 100%;
    margin-left: 43%;
}

input#searchinput {
    border-radius: 0;
    padding: 8px 12px;
    height: auto !important;
    width: 100%;
    margin-left: 42%;
}

span.badge {
    position: absolute;
    transform: translate(-50%, -41%);
    border-radius: 2em;
    font-size: 11px;
}

span.badge.notif-count.abc {
    transform: translate(0%, 0%) !important;
    border-radius: 0 !important;
    position: unset !important;
    padding: 3px !important;
}

#hs-beacon iframe {
    bottom: 90px !important;
}


/*p.extra_class {*/


/*    margin-top: -3%;*/


/*    margin-bottom: -1rem !important;*/


/*}*/

.editable-click,
a.editable-click,
a.editable-click:hover {
    text-decoration: none;
    border-bottom: dashed 0 #0088cc !important;
}


/*i.cf.cf-pencil.checkleft {*/


/*    margin-left: 95% !important;*/


/*}*/

img.messenger {
    position: fixed;
    z-index: 99999;
    bottom: 4%;
    right: 8%;
    width: 55px;
    margin: 0 35px;
}

button#go-to-btcs {
    
    /* max-width: 100%; */
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    background-size: 200% auto;
    transition: all 0.3s ease;
    padding: 12px;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.2);
    font-size: 18px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: Nunito-Bold, serif;
}


/*a.editable-click {*/


/*    color: #b4c4d6 !important;*/


/*}*/

span.fc-title {
    color: white !important;
}

#viewscheduler {
    position: absolute;
    left: 79%;
    top: -111px;
    background: rgb(5, 117, 230);
    background: -moz-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background: linear-gradient(to right, rgba(5, 117, 230, 1) 0%, rgba(0, 195, 255, 1) 50%, rgba(5, 117, 230, 1) 100%);
    background-position-x: 0;
    background-position-y: 0;
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#0575e6', endColorstr='#0575e6', GradientType=1);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.2);
    font-size: 14px;
    border-radius: 8px;
    text-transform: uppercase;
    font-family: Nunito-Bold;
    color: #fff;
    padding: 12px;
}

.labelsm {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

h5.text-white.i {
    font-style: italic;
}

.ui {
    width: 100%;
    display: block;
    font-family: Poppins-Regular;
    padding: 12px 15px;
    border: 1px solid #1a97f8;
    min-height: 48px;
}

input.btn.btn-primary.ml-0.ml-sm-auto.va {
    max-width: 50% !important;
}

.eye-cross{
    position: absolute;
    top: 13px;
    right: 10px;
}

.eye-show{
    position: absolute;
    top: 10px;
    right: 25px;
    display: none;
}

.alert-info{
    text-align: center;
    color: white;
    background-color: #0f368a;
}
.alert-danger{
    text-align: center;
    color: white;
    background-color: red;
}

.alert-warning{
    text-align: center;
    color: white;
    background-color: #d1d145;
}

.wel-vid{
    background-color: rgba(0, 0, 0, 0.4);
}

.wel-vid .modal-dialog {
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) !important;
}

.wel-vid .training-box {
    position: relative;
    display: block;
    padding-bottom: 58.3%;
}


.wel-vid .iframe-cookies {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.showw{
    padding-right: 15px;
    display: block;
}

.agency.section .row {
    padding: 10px;
    border: 1px solid #bfbfbf;
    box-shadow: 5px 5px 5px #dedede;
    margin: 10px auto;
    height: 10%;
    background-color: white;
}

.col-md-2 {
    width: 16.66666667%;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

.col-md-9 {
    width: 75%;
}

.agency.section .content {
    font-size: 16px;
}