/* global */

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


/* custom font icons css */

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

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

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

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

@font-face {
    font-family: 'Monoton';
    font-style: normal;
    font-weight: 400;
    src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v9/5h1aiZUrOngCibe4TkHLQg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nYivN04w.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nRivN04w.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nWivN04w.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nbivN04w.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Press Start 2P';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Press Start 2P Regular'), local('PressStart2P-Regular'), url(https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Faster One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Faster One'), local('FasterOne-Regular'), url(https://fonts.gstatic.com/s/fasterone/v11/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-family: Montserrat-Regular;
    background: transparent;
}

#wrapper {
    background-image: url('http://localhost/workplace/playerneos/images/playerNeos-wrapperbg.jpg');
    background-size: cover;
    background-position: top right;
}

.login-page-template,
.register-page-template {
    height: 80vh;
    display: flex;
    align-items: center;
    background-image: url('../images/PlayerNeo.jpg');
    background-size: cover;
    background-position: center center;
}

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

#wrapper #content-wrapper {
    position: relative;
}

.pre-loader-body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

.pre-loader-body img {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

form button {
    position: relative;
}

form button .spinner-border {
    position: absolute;
    right: -40px;
    top: 5px;
}

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


/* sidebar */

.sidebar.toggled .nav-item .submenu {
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #212529;
    z-index: 99;
}

.sidebar.toggled .nav-item .submenu .dropdown-item {
    padding: 12px 12px 12px 12px;
}

.sidebar.toggled .nav-item.hasDropdown::after {
    display: none;
}

.hasDropdown:hover #accounts_submenu {
    display: block;
}


/* login */

#loginForm,
#forgotpw_form {
    position: fixed;
    max-width: 400px;
    width: 100%;
    display: block;
    margin: 0 auto !important;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-60%);
    border: none;
}

.login_card_header {
    background-color: #343a40;
    border: solid 1px #343a40;
}

@media only screen and (min-width: 650px) {
    #sidebarToggle {
        display: none;
    }
}

#loginForm .spinner-border,
#forgotpw_form .spinner-border {
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    display: block;
    margin: 0 auto !important;
}

.form_overlay.show {
    height: 100%;
}

.form_overlay {
    position: absolute;
    width: 100%;
    display: block;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 9;
    height: 0;
}

#page-top.sidebar-toggled .navbar-brand {
    width: 73px;
}

.navbar-dark .navbar-brand {
    transition: all 0.3s ease;
    width: 200px;
}

.sidebar {
    transition: all 0.3s ease;
}

.user-side-thumbnail .user-avatar {
    max-width: 175px;
    width: 100%;
    border-radius: 100%;
    display: block;
    margin: 0 auto 18px;
    transition: all 0.3s ease;
}

#page-top.sidebar-toggled .user-side-thumbnail h5 {
    display: none
}

#userDropdown .user-avatar {
    width: 50px;
    border-radius: 100%;
    object-fit: cover;
    height: 50px;
    object-position: top;
}

.nav-item.hasDropdown {
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.nav-item.hasDropdown::after {
    content: '\f105';
    font-family: 'Custom-Fonts' !important;
    color: #ccc;
    position: absolute;
    right: 20px;
    top: 16px;
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.nav-item.showDropdown::after {
    transform: rotate(90deg);
}

.nav-item.showDropdown {
    background-color: rgba(0, 0, 0, 0.5);
}

.nav-item .submenu {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.nav-item .submenu .dropdown-item {
    padding: 12px 12px 12px 40px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    line-height: 12px;
}

.nav-item .submenu .dropdown-item:hover,
.nav-item .submenu .dropdown-item:active,
.nav-item .submenu .dropdown-item:focus {
    color: rgba(255, 255, 255, 1);
}


/* header */

#alertsDropdown {
    font-size: 24px;
    line-height: 49px;
    padding: 0;
}

.nav-item .dropdown-wrapper {
    position: relative;
}

.nav-item .dropdown-wrapper::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 15px solid white;
    position: absolute;
    top: -20px;
    right: 4px;
}


/* dashboard */

.ft-vid-wrapper {
    position: relative;
    display: block;
    padding-bottom: 57.4%;
    width: 100%;
    max-width: 810px;
    height: auto;
}

.ftr-vid-row .vid-wrapper {
    position: relative;
    height: 100%;
    padding-bottom: 63%;
    height: 608px;
}

.ftr-vid-row iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 810px;
    margin: 0 auto;
}

.ftr-vid-row img {
    width: 100%;
}


/* 
*
*
start of new player css ********************************************************************************
*
*
*/


/*form styles*/

#new-player-form {
    text-align: center;
    position: relative;
    margin-top: 30px;
    width: 100%;
    max-width: 1920px;
    margin: 30px auto 0;
}

#new-player-form fieldset,
#edit-player .vid-cutomizer {
    background: white;
    border: 0 none;
    border-radius: 0px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    box-sizing: border-box;
    width: 98%;
    margin: 0 1%;
    /*stacking fieldsets above each other*/
    position: relative;
}


/*Hide all except first fieldset*/

#new-player-form fieldset:not(:first-of-type) {
    display: none;
}


/*inputs*/

#new-player-form input::-moz-file-upload-button,
#new-player-form input::-webkit-file-upload-button {
    width: 100%;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer !important;
}

#new-player-form input,
#new-player-form textarea,
#edit-player input,
#edit-player textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Montserrat-Regular';
    color: #2C3E50;
    font-size: 13px;
}

#new-player-form input:focus,
#new-player-form textarea:focus,
#new-player-form select:focus {
    -moz-box-shadow: 0 0 5px 0 #f29ca4 !important;
    -webkit-box-shadow: 0 0 5px 0 #f29ca4 !important;
    box-shadow: 0 0 5px 0 #f29ca4 !important;
    border: 1px solid #dc3545;
    outline-width: 0;
    transition: All 0.2s ease-in;
    -webkit-transition: All 0.2s ease-in;
    -moz-transition: All 0.2s ease-in;
    -o-transition: All 0.2s ease-in;
}


/*buttons*/

#new-player-form .action-button {
    width: 100px;
    background: #dc3545;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#new-player-form #customVidSubmit {
    right: 113px;
    position: relative;
}

.update-plyr #customVidSubmit {
    right: 64px !important;
}

#ui-id-14 .btn-primary {
    background-color: transparent;
    border-color: transparent;
}

#ui-id-14 .toggle-on {
    background-color: #1f953c;
    border: 1px solid #dc3545 !important;
}

#ui-id-14 .toggle-off {
    background-color: #999494 !important;
    border: 1px solid #dc3545 !important;
    color: #fff;
}

#ui-id-14 .toggle-group .btn-sm {
    border: 1px solid !important;
}

#ui-id-14 .btn-light {
    background-color: transparent;
}

#new-player-form .action-button:hover,
#new-player-form .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #ee0979;
}

#new-player-form .action-button-previous {
    width: 100px;
    background: #7B7B8A;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    position: relative;
    right: 114px;
}

#new-player-form .action-button-previous:hover,
#new-player-form .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #7B7B8A;
}

#goToCustomize[disabled] {
    cursor: auto;
    opacity: 0.5;
}

#goToCustomize[disabled]:hover {
    box-shadow: none;
}

#player_result .col {
    max-width: 555px;
    width: 100%;
}

#player_result {
    justify-content: center;
}


/*headings*/

.fs-title {
    font-size: 18px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-family: 'Montserrat-Bold';
    word-break: break-all;
}

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


/*newplayer-progressbar*/

#newplayer-progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    position: relative;
    z-index: 9;
}

#newplayer-progressbar li {
    list-style-type: none;
    text-transform: uppercase;
    font-size: 10px;
    width: 33.33%;
    float: left;
    position: relative;
    letter-spacing: 1px;
    font-weight: bold;
}

#newplayer-progressbar li::before {
    content: counter(step);
    counter-increment: step;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: block;
    font-size: 14px;
    ;
    color: #ffffff;
    background: #cccccc;
    border-radius: 25px;
    margin: 0 auto 10px auto;
}


/*newplayer-progressbar connectors*/

#newplayer-progressbar li::after {
    content: '';
    width: 100%;
    height: 12px;
    background: #cccccc;
    position: absolute;
    left: -50%;
    top: 12px;
    z-index: -1;
    /*put it behind the numbers*/
    transition: all 0.3s ease;
}

#newplayer-progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#newplayer-progressbar li.active:before,
#newplayer-progressbar li.active:after {
    background: #dc3545;
    color: white;
}

.vid-type-tabs {
    background-color: #666666;
}

.vid-type-tabs li {
    width: 33.33%;
}

.vid-type-tabs li a {
    background-color: #666;
    color: #fff;
    width: 100%;
    display: block;
    padding: 12px;
    text-decoration: none;
    text-transform: uppercase;
}

.vid-type-tabs li a:hover,
.vid-type-tabs li a.active {
    background-color: #dc3545;
}


/* step 2 */

#video-options .accord-btn {
    width: 100%;
    display: block;
    text-align: left;
    margin: 5px 0 0;
    border-radius: 5px 5px 0 0;
    background-color: #666666;
    cursor: pointer;
}

#video-options .accord-btn a {
    display: block;
    padding: 18px;
    color: #ffffff !important;
    text-decoration: none !important;
}

#video-options .accord-btn.ui-state-active {
    background-color: #dc3545 !important;
}

#video-options .ui-accordion-content {
    border: 1px solid #C8C8C8;
}

#video-options .ui-accordion-content #vid-skin-option {
    border-radius: 0;
    margin: auto;
}

#vidThumb_Preview,
#vidLogo_Preview {
    max-width: 250px;
    width: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

#removeThumbnail,
#removeLogo,
#removeytThumbnail,
#removeVimThumbnail {
    position: absolute;
    right: -15px;
    top: -10px;
    background-color: #e30f0f;
    color: #fff;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 100%;
    cursor: pointer;
    display: none;
}

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

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

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

#vid-title {
    text-transform: unset;
    word-break: break-word;
}

#vid-button-option .btn-style {
    cursor: pointer;
}

#vid-button-option .btn-style.activeBTN {
    box-shadow: 0 0 5px 0 #e30f0f;
}

.cta-vid-option {
    display: none;
}

.cta-vid-option.show {
    display: block;
}

.cta-time label {
    padding-right: 24px;
    max-width: 120px;
    width: 100%;
    display: block;
}

.cta-time input {
    max-width: 80px;
    padding: 8px 0 8px 10px !important;
    font-size: 14px !important;
}

.cta-design-options label {
    max-width: 200px;
    width: 100%;
    display: block;
    padding-right: 24px;
}

.cta-design-options .jscolor {
    max-width: 80px;
    padding: 12px 8px !important;
    font-size: 10px !important;
}

#vidOPtin-button-text-label {
    padding: 22px 12px !important;
    max-width: 280px;
}

.input-social-share {
    margin-bottom: 15px;
}

.input-social-share:last-child {
    margin-bottom: 0;
}

.input-social-share i {
    font-size: 24px;
    line-height: 32px;
    display: block;
    max-width: 42px;
    width: 100%;
    height: 42px;
    position: relative;
    overflow: hidden;
    border-radius: 100%;
    padding: 5px;
    color: #ffffff;
    margin-right: 12px;
}

.input-social-share .cf-facebook-f {
    background-color: #385596;
}

.input-social-share .cf-google-plus1 {
    background-color: #CF4C3C;
}

.input-social-share .cf-twitter {
    background-color: #1CB7EB;
}

.input-social-share .cf-linkedin2 {
    background-color: #1686B0;
}

.input-social-share .cf-youtube1 {
    background-color: #DC3545;
}

.input-social-share .cf-instagram {
    background: #f7d10c;
    background: -moz-linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    background: -webkit-linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    background: linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7d10c', endColorstr='#662b97', GradientType=1);
}

.input-social-share input {
    margin: 0 !important;
}

.button-item {
    padding: 20px 65px 20px 20px;
    position: relative;
}

.repeater-btn-delete {
    position: absolute;
    top: 45%;
    right: 12px;
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    line-height: 0 !important;
}


/* date picker -start */

#ui-datepicker-div {
    background-color: #f1f1f1;
    max-width: 280px;
    width: 100%;
    padding: 80px 18px 18px;
    display: none;
}

.ui-datepicker-header {
    background-color: #dc3545;
    padding: 18px 42px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.ui-datepicker-prev.ui-corner-all {
    position: absolute;
    left: 10px;
    font-size: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ui-datepicker-prev::before {
    content: "\f100";
    font-family: 'Custom-Fonts' !important;
    font-size: 24px;
    line-height: 26px;
    cursor: pointer;
    color: #fff;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    display: block;
    text-align: center;
    border-radius: 100%;
    position: relative;
}

.ui-datepicker-next.ui-corner-all {
    position: absolute;
    right: 10px;
    font-size: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ui-datepicker-next::before {
    content: "\f101";
    font-family: 'Custom-Fonts' !important;
    font-size: 24px;
    line-height: 26px;
    cursor: pointer;
    color: #fff;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    display: block;
    text-align: center;
    border-radius: 100%;
}

.ui-datepicker-title {
    text-align: center;
    color: #ffffff;
    font-family: 'Montserrat-Bold';
    font-size: 18px;
    line-height: 26px;
    text-transform: uppercase;
}

.ui-datepicker-calendar {
    width: 100%;
}

.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
    text-align: center;
}

.ui-datepicker-calendar td a {
    width: 100%;
    display: block;
    max-width: 28px;
    height: 28px;
    line-height: 28px;
    border-radius: 100%;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.ui-datepicker-today a {
    background-color: #ff9b00 !important;
    color: #ffffff !important;
}

.ui-datepicker-calendar .ui-state-hover,
.ui-datepicker-calendar .ui-state-active {
    background-color: #dc3545;
    color: #ffffff;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    color: #666666;
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: normal;
}


/* date picker -end */


/* countdown style */

.cDown-options input {
    max-width: 50%;
    margin-right: 1%;
    height: 51px;
}

#cdownTime {
    width: 50%;
    padding: 5px;
    height: 51px;
}

#cdownTimeZone {
    padding: 5px;
    height: 51px;
}

.cDown-options input:last-child {
    margin-right: 0;
}

.cdownSkin {
    flex-basis: 33.3%;
    padding: 1em;
    transition: all 0.3s ease;
}

.cdownSkin.activeCSkin {
    background-color: #b9dbff;
}


/* player-preview */

.plyr__poster {
    background-size: cover !important;
}


/* .preview-wrapper {
  max-width: 580px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
} */

.step2-vid-viewer {
    max-width: 580px;
    width: 100%;
    height: auto;
    display: block;
    margin: 36px auto 0;
    transition: all 0.3s ease;
    position: relative;
}

.vid-custom-logo {
    max-width: 120px;
    max-height: 35px;
    width: auto;
    display: block;
    position: absolute;
    bottom: 60px;
    right: 10px;
    z-index: 9;
    transition: all 0.5s ease;
}

.plyr--paused .vid-custom-logo {
    bottom: 60px;
}

.plyr--hide-controls .vid-custom-logo {
    bottom: 20px;
}

[data-plyr="seek"],
[data-plyr="volume"] {
    padding: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    /* color: #00B3FF !important; */
}


/* vid-skin-default */

.video_player_box {
    max-width: 580px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

[vid-skin="vid-skin-default"] #my_video {
    background-color: #000000;
}

#my_video {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#my_video[poster] {
    object-fit: cover;
}


/* vid-skin-default - end */


/* player skin options */

.skinOption {
    padding: 14px !important;
    display: block;
    transition: all 0.3s ease;
}

.active-skin .skinOption {
    background-color: #b9dbff;
}


/* vid-skin-custom1 */

[vid-skin="vid-skin-custom1"] #my_video {
    background-color: #666666;
}

[vid-skin="vid-skin-custom1"] .plyr__control:hover {
    background-color: #E30F0F !important;
}

[vid-skin="vid-skin-custom1"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #dc3545 !important;
}

[vid-skin="vid-skin-custom1"] [data-plyr="seek"],
[vid-skin="vid-skin-custom1"] [data-plyr="volume"] {
    color: #E30F0F !important;
}

[vid-skin="vid-skin-custom1"] .vidMenuBTN {
    background-color: #E30F0F !important;
}


/* vid-skin-custom1 - end */


/* vid-skin-custom2 - start */

[vid-skin="vid-skin-custom2"] #my_video {
    background-color: #000b2b;
}

[vid-skin="vid-skin-custom2"] .plyr__control:hover {
    background-color: #CD9A11 !important;
}

[vid-skin="vid-skin-custom2"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #CD9A11 !important;
}

[vid-skin="vid-skin-custom2"] [data-plyr="seek"],
[vid-skin="vid-skin-custom2"] [data-plyr="volume"] {
    color: #CD9A11 !important;
}

[vid-skin="vid-skin-custom2"] .vidMenuBTN {
    background-color: #CD9A11 !important;
}


/* vid-skin-custom2 - end */


/* vid-skin-custom3 - start */

[vid-skin="vid-skin-custom3"] #my_video {
    background-color: #191c24;
}

[vid-skin="vid-skin-custom3"] .plyr__control:hover {
    background-color: #5411CD !important;
}

[vid-skin="vid-skin-custom3"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #5411CD !important;
}

[vid-skin="vid-skin-custom3"] [data-plyr="seek"],
[vid-skin="vid-skin-custom3"] [data-plyr="volume"] {
    color: #5411CD !important;
}

[vid-skin="vid-skin-custom3"] .vidMenuBTN {
    background-color: #5411CD !important;
}


/* vid-skin-custom3 - end */


/* vid-skin-custom4 - start */

[vid-skin="vid-skin-custom4"] #my_video {
    background-color: #1a2031;
}

[vid-skin="vid-skin-custom4"] .plyr__control:hover {
    background-color: #6D0019 !important;
}

[vid-skin="vid-skin-custom4"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #6D0019 !important;
}

[vid-skin="vid-skin-custom4"] [data-plyr="seek"],
[vid-skin="vid-skin-custom4"] [data-plyr="volume"] {
    color: #6D0019 !important;
}

[vid-skin="vid-skin-custom4"] .vidMenuBTN {
    background-color: #6D0019 !important;
}


/* vid-skin-custom4 - end */


/* vid-skin-custom5 - start */

[vid-skin="vid-skin-custom5"] #my_video {
    background-color: #1a2031;
}

[vid-skin="vid-skin-custom5"] .plyr__control:hover {
    background-color: #A849A3 !important;
}

[vid-skin="vid-skin-custom5"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #A849A3 !important;
}

[vid-skin="vid-skin-custom5"] [data-plyr="seek"],
[vid-skin="vid-skin-custom5"] [data-plyr="volume"] {
    color: #A849A3 !important;
}

[vid-skin="vid-skin-custom5"] .vidMenuBTN {
    background-color: #A849A3 !important;
}


/* vid-skin-custom5 - end */


/* vid-skin-custom6 - start */

[vid-skin="vid-skin-custom6"] #my_video {
    background-color: #1a2031;
}

[vid-skin="vid-skin-custom6"] .plyr__control:hover {
    background-color: #2c539e !important;
}

[vid-skin="vid-skin-custom6"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #2c539e !important;
}

[vid-skin="vid-skin-custom6"] [data-plyr="seek"],
[vid-skin="vid-skin-custom6"] [data-plyr="volume"] {
    color: #2c539e !important;
}

[vid-skin="vid-skin-custom6"] .vidMenuBTN {
    background-color: #2c539e !important;
}


/* vid-skin-custom6 - end */


/* vid-skin-custom7 - start */

[vid-skin="vid-skin-custom7"] #my_video {
    background-color: #1a2031;
}

[vid-skin="vid-skin-custom7"] .plyr__control:hover {
    /* background-color: #1F3B08 !important; */
}

/* [vid-skin="vid-skin-custom7"] .plyr__control.plyr__control--overlaid[data-plyr="play"] {
    background-color: #1F3B08;
} */

/* [vid-skin="vid-skin-custom7"] [data-plyr="seek"],
[vid-skin="vid-skin-custom7"] [data-plyr="volume"] {
    color: #1F3B08 !important;
} */

/* [vid-skin="vid-skin-custom7"] .vidMenuBTN {
    background-color: #1F3B08 ;
} */


/* vid-skin-custom7 - end */


/* vid menu buttons */


/* .preview-pane #player {
    position: fixed;
    width: 100%;
    max-width: 570px;
} */

.preview-wrapper {
    /* position: relative; */
    width: 100%;
    max-width: 762px;
    margin: 0 auto;
}


/* .preview-wrapper.sticky-preview {
    top: 20px;
    max-width: 700px;
    margin-left: 15px;
} */

.vid_menu_buttons {
    max-width: 320px;
    width: 100%;
    display: flex;
    text-align: left;
    position: absolute;
    top: -30px;
    left: 0;
    transition: all 0.3s ease;
}

.video_player_box:hover .vid_menu_buttons {
    top: 0;
}

.vidMenuBTN {
    max-width: 120px;
    width: 100%;
    min-height: 24px;
    display: block;
    margin: 0 2px;
    padding: 5px;
    background-color: #00b3ff;
    color: #fff !important;
    font-size: 80%;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    z-index: 99;
    word-wrap: break-word;
}

#vidMenuBTN1 {
    display: none;
}

#vidMenuBTN1.showHideMenu {
    display: block;
}

.vidMenuContent {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #e1e1e1;
    z-index: 999;
    padding: 24px;
    overflow: hidden;
    top: 0;
    display: none;
}

.vidMenuContent .vid-btn-cta {
    background-color: #00b3ff;
    color: #ffffff !important;
    max-width: 240px;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 12px;
    border-radius: 50px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.vidMenuContent .vid-btn-cta:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #00b3ff;
}

.vidMenuContent .menuContClose,
#popup-vid-cta .popupCtaClose {
    max-width: 120px;
    width: 100%;
    display: block;
    margin: 15px auto 50px;
    background-color: #666;
    padding: 8px;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    cursor: pointer;
}

.vidMenuContent .menuContClose:hover,
#popup-vid-cta .popupCtaClose:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #666;
}

#popup-vid-cta {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 24px;
    z-index: 999;
    display: none;
}

#popup-vid-cta h2 {
    text-transform: capitalize;
    color: #fff;
}

#playerneos_23 .popup-cta-button {
    text-align: center;
}

#playerneos_23 #popup-vid-cta h2 {
    flex-basis: 100%;
}

#playerneos_23 .popup-cta-button a {
    padding: 10px 15px;
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    max-width: 200px;
    margin: 0 auto;
    width: 100%;
}

#playerneos_23 .popup-cta-button a:hover {
    text-decoration: none;
}

.popup-cta-button img {
    margin: 18px auto;
}

#popup-vid-cta form {
    padding: 25px;
}

#popup-vid-cta input {
    padding: 12px;
}

#popup-vid-cta input:last-child {
    margin-bottom: 0;
}

.popup-cta-button .custButton {
    text-decoration: none;
    background-color: #fff;
    max-width: 380px;
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 12px;
    font-size: 18px;
    border-radius: 30px;
    font-family: 'Montserrat-Bold';
}

#popup-vid-cta [type="submit"] {
    border: none !important;
}

#vid-social-share {
    max-width: 32px;
    width: 100%;
    position: absolute;
    top: 8px;
    right: 3px;
    transition: all 0.3s ease;
}

#vid-social-share.showHideShare {
    right: -35px
}

.video_player_box:hover #vid-social-share.showHideShare {
    right: 3px;
}

#vid-social-share a {
    max-width: 30px;
    width: 100%;
    height: 30px;
    margin-bottom: 3px;
    border-radius: 5px;
    display: block;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    border-radius: 100%;
}

#vid-social-share #fb-share {
    background-color: #385596;
    font-size: 22px;
    line-height: 45px;
}

#vid-social-share #fb-share i {
    position: relative;
    left: 2px;
}

#vid-social-share #gplus-share {
    background-color: #cf4c3c;
    font-size: 16px;
    line-height: 34px;
}

#vid-social-share #twitt-share {
    background-color: #1cb7eb;
    font-size: 16px;
    line-height: 34px;
}

#vid-social-share #linke-share {
    background-color: #1686B0;
    font-size: 16px;
    line-height: 34px;
}

#vid-social-share #yt-share {
    background-color: #DC3545;
    font-size: 16px;
    line-height: 34px;
}

#vid-social-share #insta-share {
    background: #f7d10c;
    background: -moz-linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    background: -webkit-linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    background: linear-gradient(45deg, #f7d10c 0%, #e10e1f 48%, #662b97 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7d10c', endColorstr='#662b97', GradientType=1);
    line-height: 36px;
    font-size: 20px;
}

.step3-vid-viwer .video_player_box {
    max-width: 800px;
    padding-bottom: 32%;
}

.video_player_box #countDown-cont {
    display: block;
}

#countDown-cont {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    color: #ffffff;
    z-index: 99;
    display: none;
}

#vidCdowntimer {
    max-width: 350px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

#vidCdowntimer[cdown-skin="cdown-skin-default"] {
    background: rgb(255, 0, 0);
    background: -moz-linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    background: linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffef68', GradientType=1);
    padding: 12px;
}

.wickedpicker__controls__control-up::before {
    content: "\f106";
    font-family: 'Custom-Fonts' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.wickedpicker__controls__control-down::after {
    content: "\f107";
    font-family: 'Custom-Fonts' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom1"] .cdown-element {
    position: relative;
    margin: 0 5px;
    background-color: rgba(0, 0, 0, 0.8);
    max-width: 80px;
    width: 100%;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom1"] #days {
    margin-left: 0;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom1"] #seconds {
    margin-right: 0;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom1"] .count {
    font-size: 38px;
    line-height: 48px;
    font-family: 'Montserrat-Regular';
}

#vidCdowntimer[cdown-skin="cdown-skin-custom1"] .text {
    padding: 4px 10px;
    background-color: rgba(0, 0, 0, 0.9);
    font-size: 10px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom2"] .cdown-element {
    max-width: 80px;
    width: 100%;
    margin: 0 4px;
    padding: 10px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom2"] #days {
    background-color: #e30f0f;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom2"] #hours {
    background-color: #f64b09;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom2"] #minutes {
    background-color: #dea50d;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom2"] #seconds {
    background-color: #666;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom3"] .cdown-element::after {
    top: 15px;
    color: #666
}

#vidCdowntimer[cdown-skin="cdown-skin-custom3"] .count {
    color: #e30f0f !important;
    font-size: 50px;
    line-height: 50px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom3"] .text {
    color: #000;
    text-transform: uppercase;
    font-family: 'Montserrat-Bold';
}

#vidCdowntimer[cdown-skin="cdown-skin-custom4"] .cdown-element {
    background-color: rgba(220, 53, 69, 0.8);
    max-width: 80px;
    width: 100%;
    margin: 0 1px;
    padding: 8px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom4"] .count {
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 40px;
    line-height: 40px;
    color: gold;
    font-family: 'Montserrat-SemiBold';
    margin-bottom: 5px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom4"] .text {
    text-transform: uppercase;
    font-size: 12px;
    line-height: 12px;
}

[cdown-skin="cdown-skin-custom5"] {
    padding: 12px;
    background: rgb(30, 87, 153);
    background: -moz-linear-gradient(45deg, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(125, 185, 232, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(125, 185, 232, 1) 100%);
    background: linear-gradient(45deg, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(125, 185, 232, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1);
}

#vidCdowntimer[cdown-skin="cdown-skin-custom5"] .cdown-element {
    max-width: 80px;
    width: 100%;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom5"] .cdown-element::after {
    content: "";
    padding: 0;
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: -10px;
    border-right: 1px solid #ccc;
    height: 100%;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom5"] .cdown-element:nth-child(4)::after {
    display: none !important;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom5"] .count {
    margin-top: 16px;
    font-size: 32px;
    line-height: 32px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom5"] .text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 10px;
    text-transform: uppercase;
}

[cdown-skin="cdown-skin-custom6"] {
    padding: 12px;
    background-color: #000;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom6"] .count {
    font-size: 32px;
    line-height: 32px;
    font-family: 'Monoton';
    color: #00a1c7;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom6"] .text {
    font-size: 10px;
    line-height: 10px;
    text-transform: uppercase;
    margin-top: 8px;
}

[cdown-skin="cdown-skin-custom7"] {
    background: rgb(0, 183, 234);
    background: -moz-linear-gradient(45deg, rgba(0, 183, 234, 1) 0%, rgba(0, 158, 195, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(0, 183, 234, 1) 0%, rgba(0, 158, 195, 1) 100%);
    background: linear-gradient(45deg, rgba(0, 183, 234, 1) 0%, rgba(0, 158, 195, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00b7ea', endColorstr='#009ec3', GradientType=1);
    padding: 12px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom7"] .count {
    font-family: 'Press Start 2P', cursive;
    font-size: 30px;
    line-height: 36px;
    color: #dc3545;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom7"] .text {
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    text-transform: uppercase;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom8"] .count {
    color: #dc3545;
    font-family: 'Faster One', cursive;
    font-size: 42px;
    line-height: 42px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom8"] .text {
    display: block;
    color: #000;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 20px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom9"] {
    background-image: url('http://localhost/workplace/playerneos/images/playerNeos-wrapperbg.jpg');
    padding: 10px 12px 12px 12px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom9"] .count {
    font-family: 'Montserrat-Regular';
    font-size: 42px;
    line-height: 42px;
    color: #353535;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom9"] .text {
    font-size: 8px;
    line-height: 8px;
    text-transform: uppercase;
    color: #000;
    font-family: 'Montserrat-SemiBold';
    letter-spacing: 2px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom9"] .cdown-element::after {
    color: #000;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom10"] {
    background-color: #000;
    padding: 6px 12px;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom10"] .cdown-element::after {
    top: 18%;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom10"] .cdown-element {
    padding: 3px;
    border: 1px solid #f00;
    display: block;
    border-radius: 100%;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom10"] .count {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background: rgb(255, 0, 0);
    background: -moz-linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    background: linear-gradient(45deg, rgba(255, 0, 0, 1) 0%, rgba(255, 123, 0, 1) 47%, rgba(255, 239, 104, 1) 100%);
    background-clip: border-box;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffef68', GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#vidCdowntimer[cdown-skin="cdown-skin-custom10"] .text {
    display: none;
}

#vidCdowntimer .cdown-element {
    position: relative;
    margin: 0 12px;
}

#vidCdowntimer .cdown-element::after {
    content: ":";
    padding: 0 10px;
    font-size: 24px;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: -25px;
}

#vidCdowntimer #seconds::after {
    content: "";
    padding: 0;
    font-size: 24px;
}

#vidCdowntimer .cdown-element span {
    display: block;
}

#vidCdowntimer .count {
    font-size: 28px;
    line-height: 28px;
    font-family: 'Montserrat-Bold';
}

#vidCdowntimer .cf-window-close {
    position: absolute;
    right: -5px;
    top: -5px;
    color: #f00;
    font-size: 24px;
    cursor: pointer;
    display: none;
}

.vidSettings label {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */

.vidSettings label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


/* Create a custom checkbox */

.vidSettings label .checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}


/* On mouse-over, add a grey background color */

.vidSettings label:hover input~.checkmark {
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */

.vidSettings label input:checked~.checkmark {
    background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */

.vidSettings label .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the checkmark when checked */

.vidSettings label input:checked~.checkmark:after {
    display: block;
}


/* Style the checkmark/indicator */

.vidSettings label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* 
** end of new player css ********************************************************************************
*/

#videoResult {
    position: relative;
    max-width: 1280px;
    width: 100%;
    display: block;
    margin: 36px auto 0;
    padding: 24px;
    background-color: #212529;
    text-align: left;
    list-style: none;
    display: none;
}

.videoResult {
    position: relative;
    max-width: 1280px;
    width: 100%;
    display: block;
    margin: 36px auto 0;
    padding: 24px;
    background-color: #212529;
    text-align: left;
    list-style: none;
    display: none;
}

#playerEmbedCode {
    margin: 0 !important;
    padding: 22px 18px !important;
    height: auto;
    border-radius: 5px 0 0 5px !important;
    font-size: 15px !important;
    line-height: 24px;
}

#playerEmbedCode1 {
    margin: 0 !important;
    padding: 22px 18px !important;
    height: auto;
    border-radius: 5px 0 0 5px !important;
    font-size: 15px !important;
    line-height: 24px;
}

#copyEmbed {
    position: relative;
    right: 0;
    bottom: 0;
    background-color: #dc3545;
    color: #fff;
    max-width: 450px;
    height: auto;
    font-size: 20px;
    display: block;
    text-align: center;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    line-height: 32px;
    border: none;
    padding: 19px 8px;
    width: 100%;
}

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

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

#copyEmbed:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
}

#copyEmbed1 {
    position: relative;
    right: 0;
    bottom: 0;
    background-color: #dc3545;
    color: #fff;
    max-width: 450px;
    height: auto;
    font-size: 20px;
    display: block;
    text-align: center;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    line-height: 32px;
    border: none;
    padding: 19px 8px;
    width: 100%;
}

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

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

#copyEmbed1:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
}



.social-share-buttons {
    margin-top: 24px;
}

.social-share-buttons .button {
    border-radius: 100%;
    box-shadow: none;
    border: none;
    width: 50px;
    height: 50px;
    font-size: 28px;
    line-height: 54px;
    display: inline-block;
    text-align: center;
    background-color: #e30f0f;
    color: #fff;
    margin: 0 6px;
}

.social-share-buttons [data-sharer="facebook"] {
    background-color: #385596;
}

.social-share-buttons [data-sharer="google-plus"] {
    background-color: #CF4C3C;
}

.social-share-buttons [data-sharer="twitter"] {
    background-color: #1CB7EB;
}

.social-share-buttons [data-sharer="linkedin"] {
    background-color: #1686B0;
}


/* my-account page */

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

#ma-sec .accountIcon {
    font-size: 20px;
    line-height: 20px;
    background: #ff0004;
    background: -moz-linear-gradient(45deg, #ff0004 0%, #fb955e 50%, #ecff60 100%);
    background: -webkit-linear-gradient(45deg, #ff0004 0%, #fb955e 50%, #ecff60 100%);
    background: linear-gradient(45deg, #ff0004 0%, #fb955e 50%, #ecff60 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0004', endColorstr='#ecff60', GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#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;
}

#ma-sec .btn .tooltiptext {
    visibility: hidden;
    background-color: #252525;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 12px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 24px;
    transform: translateX(-50%);
    max-width: 220px;
    width: 100%;
}

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

#ma-sec .btn:hover .tooltiptext {
    opacity: 1;
    visibility: visible;
}

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

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

.modal-body i {
    font-size: 35px;
    position: relative;
    top: 8px;
}

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

.action-button {
    width: 100px;
    background: #dc3545;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 25px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    transition: all 0.3s ease;
}

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

#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: #dc3545;
}

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

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

#UserImage .upload-btn-wrapper,
#UserImage .btn {
    max-width: 100%;
    width: 100%;
}

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

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

#UserImage .upload-btn-wrapper .btn {
    padding: 3px;
}

#updateProPic {
    left: -100px;
}

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

#show-pass {
    position: absolute;
    right: 20px;
    bottom: 5px;
    cursor: pointer;
}

#show-pass .cf {
    font-size: 24px;
    color: #666;
}

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


/* my players css */

#my-players-header {
    margin: 50px 0;
}

#my-players-header .fs-title {
    font-size: 35px;
    line-height: 42px;
}

#my-players-header .fs-subtitle {
    font-size: 18px;
    line-height: 26px;
}

#playerSearch {
    justify-content: center;
    margin-bottom: 50px;
}

#playerSearch .input-group {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 100%;
}

#playerSearch input {
    padding: 25px 12px;
    font-size: 12px;
    line-height: 24px;
}

#playerSearch input:focus {
    box-shadow: 0 0 5px 0 rgb(220, 53, 69);
    border-color: transparent;
}

#created-players .player {
    background-color: #fafafa;
    padding: 24px;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    max-width: 520px;
    width: 100%;
}

.player-item-wrapper {
    position: relative;
    overflow: hidden;
}

.player-item-wrapper::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    left: 0;
    opacity: 0;
}

.player-item-wrapper:hover::before {
    opacity: 1;
}

.player img {
    width: 100%;
    display: block;
    margin: 0 auto;
    /* max-height: 300px; */
    height: 300px;
    object-fit: contain;
}

#player {
    width: 100%;
}

#player iframe {
    height: 90%;
}

#created-players .myPlayerOptions {
    width: 100%;
    display: block;
    margin: 15px auto;
    text-align: center;
    height: auto;
    position: absolute;
    bottom: -100%;
    z-index: 9;
    transition: all 0.3s ease;
}

#created-players .player:hover .myPlayerOptions {
    bottom: 50%;
    transform: translateY(100%)
}

#created-players .btn-group .btn {
    font-size: 16px;
    padding: 2px;
    max-width: 40px;
    width: 100%;
    height: 40px;
}

#created-players #linkedinShare {
    background-color: #1686B0 !important;
}

#created-players .player_title {
    max-width: 470px;
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 26px;
    margin: 22px auto;
    text-align: center;
}

.player_title span {
    display: ruby-base;
}

.player:hover .player_title span {
    display: block;
}

.err_message_yut,
.err_message_vim,
.err_message_oth {
    display: none;
    color: red;
    left: 45px;
    position: absolute;
}

.modal-err-msg {
    position: absolute !important;
    left: 23px;
    top: 19px !important;
    font-size: 40px !important;
}

.vid-msg {
    width: 78%;
    margin: 0 auto;
    font-size: 15px;
}

#player1 .shareOptions {
    position: relative;
    top: -205px;
    display: flex;
    justify-content: center;
}

#player1 .shareOptions button {
    padding: 10px !important;
    border-radius: 0;
}

.shareOptions::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #17a2b8;
    position: absolute;
    top: 40px;
}

.player-item-wrapper #shareOptions-ply.hover {
    opacity: 1;
}

.player-item-wrapper #shareOptions-ply {
    opacity: 0;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.info-create-player {
    text-align: center;
    font-weight: normal;
    font-size: 16px;
    color: #666;
    margin: 24px;
}


/* trainings page */

#trainings .fs-title {
    margin-bottom: 18px;
}

#trainings img,
#trainings video {
    width: 100%;
    display: block;
}

#dl_lesson_Pdf {
    margin-top: 24px;
    display: block;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    color: #333;
}

#dl_lesson_Pdf .cf-file-pdf {
    color: #f00;
    font-size: 20px;
}

#trainings .videoTraining iframe {
    width: 100%;
    height: 325px;
}

#trainings .videoTraining {
    max-width: 590px;
    width: 100%;
    margin: 0 auto;
}

#trainings .plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
    padding-bottom: unset !important;
    transform: unset !important;
}

/* clients account page */

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

#ca-sec input[type="text"]:hover,
#ca-sec input[type="password"]:hover,
#ca-sec text-area:hover,
#ca-sec input[type="text"]:focus,
#ca-sec input[type="password"]:focus,
#ca-sec text-area:focus,
#ca-sec input[type="text"]:active,
#ca-sec input[type="password"]:active,
#ca-sec text-area:active,
#ca-sec input[type="email"]:active,
#ca-sec input[type="email"]:focus,
#ca-sec input[type="email"]:hover {
    border-bottom-color: #dc3545;
}

#assignClientCampaign {
    color: #218838;
    text-decoration: none;
    font-size: 28px;
    line-height: 28px;
}

#deleteClient {
    background-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    line-height: 28px;
    width: 28px;
    height: 28px;
    text-align: center;
    border-radius: 100%;
    position: relative;
    top: -1px;
}

/* auto responder*/

.responder-wrapper img {
    border-radius: 50%;
    width: 100%;
    max-width: 120px;
    margin: 0 auto;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.responder-wrapper img:hover {
    opacity: .6;
}

.responder-wrapper {
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

#send_grid_account input,
#send_lane_account input {
    display: block;
    width: 100%;
}

.respondericon-warpper h3 {
    text-align: center;
    font-size: 20px;
}

.camp-err {
    display: none;
    position: absolute;
    left: 24px;
    color: red;
}


/* footer css -start */

footer {
    background-color: #fff;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 13px 0;
    border-top: 1px solid #21252912;
}

footer .menu-links a {
    font-size: 14px;
    line-height: 24px;
    color: #252525;
    border-right: 1px solid #ccc;
    padding: 0 12px;
}

footer .menu-links a:first-child {
    padding-left: 0px;
}

footer .menu-links a:last-child {
    border-right: none;
}

footer .copyright {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
}

.login-page-template footer {
    position: absolute;
}


/* footer css - end */

@media screen and (max-width:1900px) {
    #player_result .col {
        max-width: 400px;
    }
}

@media screen and (max-width:1600px) {
    /* .ftr-vid-row iframe {
        max-width: 664px;
    } */
}

@media screen and (max-width:1500px) {
    #player_result .col {
        max-width: 365px;
    }
}

@media screen and (max-width:1400px) {
    #player_result .col {
        max-width: 330px;
    }

    #video-options .ui-accordion-content #vid-skin-option {
        padding: 9px 5px;
    }
}

@media screen and (max-width:1366px) {
    body {
        font-size: 0.775em;
    }

    .sidebar .nav-item .nav-link span,
    .dropdown-item {
        font-size: 13px !important;
        line-height: 22px !important;
    }

    .sidebar.toggled {
        width: 80px !important;
    }

    .sidebar.toggled .nav-item .nav-link {
        max-width: 80px;
        width: 100% !important;
        font-size: 18px;
    }

    .sidebar.toggled .nav-item .nav-link span {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    .card-body-icon {
        font-size: 2rem;
    }

    footer .menu-links a,
    footer .copyright {
        font-size: 12px;
        line-height: 22px;
    }

    .preview-wrapper {
        max-width: 500px;
    }

    #player1 .shareOptions {
        top: -202px;
    }

    .player img {
        object-fit: cover;
        height: 300px;
    }

    .ftr-vid-row .vid-wrapper {
        height: 427px;
    }
}

@media screen and (max-width:1199px) {
    .ftr-vid-row .vid-wrapper {
        height: 363px;
    }

    #player_result .col {
        max-width: 314px;
    }

    .player img {
        height: 220px;
    }

    .responder-wrapper .col {
        flex-basis: 20%;
    }

    #video-options .ui-accordion-content #vid-skin-option {
        padding: 0;
    }

    #trainings .videoTraining iframe {
        height: 200px;
    }
}

@media screen and (max-width:991px) {
    .player img {
        height: 170px;
    }

    .ftr-vid-row .vid-wrapper {
        height: 284px;
    }

    #player_result .col {
        max-width: 320px;
    }

    #trainings .videoTraining iframe {
        height: 186px;
    }
}

@media screen and (max-width:980px) {
    #created-players .flex-wrap .col {
        flex: 0 0 50%;
        max-width: 50%;
    }

    footer {
        position: relative;
    }

    footer .col {
        display: block;
        flex: unset !important;
        max-width: 100%;
        width: 100%;
        text-align: center;
        margin: 12px 0;
    }

    footer .col .img-responsive.ml-auto {
        margin: 0 auto;
    }

    #my_account_form .loader-wrapper {
        width: 42%;
    }

    #client_accounts .loader-wrapper,
    #virtual_accounts .loader-wrapper {
        width: 25%;
    }

    #change_password .loader-wrapper {
        width: 44%;
    }

    .login-page-template footer .container-fluid {
        display: block !important;
    }
}

@media screen and (max-width:767px) {

    .sidebar .nav-item .nav-link span,
    .dropdown-item {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child {
        padding-left: 0 !important;
    }

    #dataTable_length label,
    #dataTable_filter label {
        width: 100% !important;
    }

    #client_accounts .loader-wrapper,
    #virtual_accounts .loader-wrapper {
        width: 30%;
    }

    #my_account_form .loader-wrapper {
        width: 30%;
    }

    #change_password .loader-wrapper {
        width: 50%;
    }

    .ftr-vid-row .vid-wrapper {
        height: 250px;
    }

    .respondericon-warpper .col {
        margin: 0 auto;
        max-width: 435px;
        width: 100%;
    }

    #ma-sec .col-prof {
        margin-left: 0 !important;
    }

    .ft-vid-wrapper {
        padding-bottom: 65.5%;
    }
}

@media screen and (max-width:640px) {
    #sidebarToggle {
        order: 4 !important;
    }

    .sidebar {
        position: absolute;
        left: 0;
        z-index: 9;
        overflow: hidden;
    }

    .sidebar.toggled {
        width: 0 !important;
    }

    .sidebar .nav-item .nav-link span,
    .dropdown-item {
        font-size: 10px !important;
        line-height: 14px !important;
    }

    #second_row .col {
        flex: 100%;
    }

    #my_account_form .loader-wrapper {
        width: 35%;
    }

    #change_password .loader-wrapper {
        width: 55%;
    }

    .preview-wrapper.sticky-preview {
        position: unset;
        width: 100%;
        margin: 0 auto;
    }

    #new-player-form .action-button,
    #new-player-form .action-button-previous {
        position: unset;
        right: 0;
    }

    #new-player-form #customVidSubmit {
        right: 0px;
    }
}

@media screen and (max-width:575px) {
    #created-players .flex-wrap .col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .responder-wrapper .col {
        flex-basis: 30%;
        flex-grow: 0;
    }

    #change_password .col {
        flex-basis: 100%;
    }

    #trainings .videoTraining iframe {
        height: 100%;
    }
}

@media screen and (max-width:440px) {
    #change_email_address .loader-wrapper {
        width: 57%;
    }

    #my_account_form .loader-wrapper {
        width: 47%;
    }

    #change_password .loader-wrapper {
        width: 80%;
    }

    .respondericon-warpper .col {
        max-width: 365px;
    }

    .ft-vid-wrapper {
        padding-bottom: 72.5%;
    }
}


/* Adi */

.loader {
    display: none;
    position: absolute;
    right: 0;
    bottom: 8px;
}

#send_grid_account .loader,
#sendLanePopup .loader {
    right: -227px;
}

.loader-wrapper {
    position: relative;
    width: 29%;
}

#client_accounts .loader-wrapper,
#virtual_accounts .loader-wrapper {
    width: 16%;
}

#change_email_address .loader-wrapper {
    width: 65%;
    top: -5px;
}

#UserImage .loader-wrapper {
    width: 100%;
}

#UserImage .loader {
    position: relative;
    margin: 0 auto;
}

.update-plyr .loader-wrapper {
    width: 50%;
}

.col-save-plyr {
    display: flex;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.col-save-plyr .loader-wrapper {
    position: unset;
    width: unset;
}

.col-save-plyr .loader {
    position: unset;
}