/* 

Add here your custom css styles Example: p { text-align: center; color: red; } 

*/


@font-face {
    font-family: ClashDisplay-Semibold;
    src: url("../fonts/ClashDisplay-Semibold.ttf");
}

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

@font-face {
    font-family: GeneralSans-Semibold;
    src: url("../fonts/GeneralSans-Semibold.ttf");
}

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

h1, h2, h3, h4, h5, h6, .no-content-found {
    font-family: ClashDisplay-Semibold !important;
}

body {
    font-family: GeneralSans-Regular !important;
}

label, .forgot_password {
    font-family: GeneralSans-Semibold !important;
    font-size: 16px !important;
}

.pp_mat_input label {
    background: transparent;
}


.login_page .terms label {
    font-size: 12px !important;
}

.signup__ a {
    font-family: GeneralSans-Semibold !important;
}

.remember-checkbox-wrap label, .signup__, .login__, .hide_hdr_usr_name {
    font-family: GeneralSans-Medium !important;
}

.remember-checkbox-wrap input[type=checkbox] {
    margin: 0px !important;
}

input::placeholder {
    font-family: GeneralSans-Medium !important;
    color: #C3BDBD80;
}

form.form-horizontal.contact-us-form {
    border-radius: 30px;
    overflow: hidden;
}

form.form-horizontal.contact-us-form .form-group input, form.form-horizontal.contact-us-form .form-group textarea {
    border-radius: 8px !important;
}

.membership_page {
    background: #fff;
    padding: 1rem !important;
    border-radius: 30px;
}



.modal-dialog.membership-box {
    max-width: 96%;
}


.login-page.membership-page {
    max-width: 100%;
}

.join-us {
    font-family: ClashDisplay-Semibold;
}

.plain-card-wrapper {
    flex-direction: column;
    display: flex;
    align-content: space-between;
    padding-right: 1rem;
}

.plan-card {
    min-height: -webkit-fill-available;
    border-radius: 10px;
    background: #F5FAFF;
    padding: 2.346rem;
    padding-bottom: 4rem;
    margin-top: 1.2rem;
    margin-left: 1.2rem;
}

.plan-card p {
    margin-bottom: .2rem;
}

.plan-title {
    font-size: 2rem;
    font-family: GeneralSans-Semibold;
}

p.plan-dis {
    font-size: 1rem;
    color: #AAAAAA;
    text-transform: capitalize;
    font-family: GeneralSans-Medium;
}

.plan-btn {
    border: none;
    box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
    border-radius: 10px;
    outline: none;
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
    padding: .75rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
    margin-top: 1.479rem;

}

.plan-btn span.amount {
    font-size: 2.375rem;
    font-family: GeneralSans-Semibold;
    color: #fff;
}

.plan-btn span.duration {
    font-size: 1rem;
    color: #fff;
    margin-left: 13px;
    padding-top: .4rem;
}

ul.features {
    margin-top: 2.641rem;
    list-style: none;
    padding: 0px;
    padding-right: 28px;
}

ul.features li {
    margin-bottom: 1.298rem;
    font-size: 1.25rem;
    font-family: GeneralSans-Medium;
    display: flex;
    align-items: flex-start;
}

ul.features li span {
    margin-left: 1rem !important;
    text-transform: capitalize !important;
}

ul.features li span:first-child {
    margin-left: 0px !important;
}

/* card hover state */
.plan-card:hover {
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
    color: #fff;
}

.plan-card:hover .plan-btn {
    background: #fff;
    box-shadow: none;
}

.plan-card:hover p.plan-dis {
    color: #fff;
}

.plan-card:hover .plan-btn span.amount, .plan-card:hover span.duration {
    color: #000;
}

/* card active state */

.plan-card.active:hover {
    color: #000;
}

.plan-card.active .plan-btn {
    background: #FFFFFF !important;
    border: 1px solid rgba(170, 170, 170, 0.5);
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
}

.plan-card.active p.plan-dis, .plan-card.active:hover p.plan-dis {
    color: #AAAAAA !important;
}

.plan-card.active {
    background: #FFFFFF !important;
    box-shadow: 0px 0px 20px rgba(128, 128, 128, 0.25);
}

.plan-card.active .plan-btn span.amount, .plan-card.active .plan-btn span.duration {
    color: #000;
}

@media only screen and (min-width: 1024px) {
    .modal-dialog.membership-box {
        max-width: 80%;
    }

    .plan-card {
        margin-top: 0px;
    }

    .plain-card-wrapper {
        flex-direction: row;
    }
}

@media only screen and (max-width: 767px) {
    .hero-text {
    margin-top: 0 !important;
    font-size: 20px !important;
}
}


/* Common Classes start */
.dropdown-effect {
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(128, 128, 128, 0.25);
    border-radius: 30px;
}

.border-round {
    border-radius: 8px;
}

/* Common Classes close */

/* ===================== Add account start ========================================= */
ul.account-list {
    max-width: 238px;
    padding: 22px 0px;
    overflow: hidden;
}

ul.account-list li {
    list-style: none;
    font-family: GeneralSans-Semibold;
    font-size: 14px;
    margin-bottom: 12px;
    width: 100%;
    height: 53px;
    display: flex;
    align-items: center;
    padding: 0px 30px;
}

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

ul.account-list li a {
    margin-left: 15px;
    text-decoration: none;
}

span.account-count {
    width: 53px;
    height: 53px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.bg-color-variants-1 {
    background: linear-gradient(180deg, #9A93F1 0%, rgba(154, 147, 241, 0) 100%);
}

.bg-color-variants-2 {
    background: linear-gradient(180deg, #FF9F9F 0%, rgba(255, 159, 159, 0) 100%);
}

.bg-color-variants-3 {
    background: linear-gradient(180deg, #C4C4C4 0%, rgba(196, 196, 196, 0) 100%);
}

.bg-color-variants-4 {
    background: linear-gradient(180deg, #FFF383 0%, rgba(255, 243, 131, 0.593664) 40.63%, rgba(255, 243, 131, 0) 100%);
}


.add-account-btn-wrapper button {
    border: none;
    background: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    width: 100%;
    color: #C3BDBD;
    font-family: GeneralSans-Medium;
    margin-left: 30px;
}

.add-account-btn-wrapper button:hover {
    color: #1BA1E7;
}

.add-account-btn-wrapper button svg {
    margin-left: 10px;
}

.add-account-btn-wrapper button span {
    margin-left: 12px;
}

/* =================================================== Add account close ==================== */


/* switch Button  start*/
.switch-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.corsacast.switch {
    position: relative;
    display: inline-block;
    width: 57px;
    height: 25.8px;
}

.corsacast.switch input.corsacast-switch {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(270.49deg, #063160 3.95%, rgba(255, 255, 255, 0) 100.18%);
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input.corsacast-switch:checked+.slider {
    background-color: #188DCF;
}

input.corsacast-switch:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input.corsacast-switch:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(31px);
    transform: translateX(31px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* switch Button  close*/




/* user-dropdown-penal */
.user-dropdown-panel {
    max-width: 238px;
}

.user-dropdown-panel {
    padding: 0px 0px;
}

ul.user-dropdown-panel li:first-child {
    border-radius: 30px 30px 0 0;
    padding-top: 16px;
}

ul.user-dropdown-panel li:last-child {
    border-radius: 0 0 30px 30px;
    padding: 16px 30px 20px 30px;
}

ul.user-dropdown-panel li:last-child {
    border-radius: 0 0 30px 30px;
}

ul.user-dropdown-panel li {
    list-style: none;
    padding: 8px 30px;

}

ul.user-dropdown-panel li {
    display: flex;
    align-items: center;
}

ul.user-dropdown-panel li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: GeneralSans-Medium;
    color: #C3BDBD;
}

ul.user-dropdown-panel li a:hover {
    color: #135278;
}

ul.user-dropdown-panel li a span {
    flex: 1;
    text-indent: 13px;
}

hr.divider {
    margin: 0px;
}

ul.user-dropdown-panel li:first-child a {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    flex: 1;
    text-align: right;
}

/* message Styling */
.message-wrapper {
    max-width: 360px;
}

ul.message-wrapper {
    padding: 0px;
    margin: 0px;
}

ul.message-wrapper li {
    list-style: none;
    padding: 12px 30px;
    border-bottom: 1px solid #F2F2F2;
}

ul.message-wrapper li a {
    text-decoration: none;
}

ul.message-wrapper li:first-child {
    border-radius: 30px 30px 0 0;
    padding: 8px 42px 8px 42px;
}

.dropdown-hearder {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-hearder h1 {
    font-size: 1.257rem;
}

.dropdown-hearder span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
    box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
    border-radius: 50%;
    color: #fff;
    width: 27.56px;
    height: 27.56px;
}

ul.message-wrapper .user-profile-image {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
}

.message-content-wrapper {
    display: flex;
    align-items: center;
}

.read-more-arrow {
    flex: 1;
    display: flex;
    justify-content: end;
}

.message-info p {
    margin-bottom: 0px;
    margin-left: 13px;
}

.message-info p:first-child {
    font-family: GeneralSans-Semibold;
}

.message-info p:last-child {
    font-family: GeneralSans-Medium;
    font-size: 12px;
    color: #C3BDBD;
}

.message-action-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0px;
}

.message-action-btn a {
    color: #C3BDBD;
}

.message-action-btn a:hover {
    color: #116CA7;
}

ul.message-wrapper li:last-child {
    border-radius: 0 0 30px 30px;
}

/* <!-- Leader board start --> */

   table.leader-board-table {
      padding: 16px;
      position: relative !important;
   }
table.leader-board-table a{color:#fff;}

   table.leader-board-table,
   table.leader-board-table table,
   table.leader-board-table table tbody tr,
   table.leader-board-table table tr td {
      width: 100%;
      text-align: center;
      font-family: GeneralSans-Semibold;
   }

   table.leader-board-table tr {
      border-bottom: 1px solid #F2F2F2 !important;
   }

   table.leader-board-table tr:last-child {
      border: none !important;
   }

   table.leader-board-table tr td {
      padding: 16px 0px;
   }

   table.leader-board-table tr td:last-child {
      color: #9BC0D9;
   }

   /* .leader-score-card {
      max-height: 369.9px;
      overflow: auto;
   } */

   .card-bg-color {
      background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
      color: #fff;
      border-radius:15px;
      margin-bottom: 0 !important;
      max-height:375px;
   }

/* <!-- Leader board start --> */

/* hero_overlay */
.main_hero_overlay {
    position: absolute;
    background: linear-gradient(75.1deg, rgba(255, 255, 255, 0.81) 33.56%, rgba(255, 255, 255, 0) 99.24%);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    
}

.hero-info {
    position: absolute !important;
    top: 160px !important;
    left: 64px;
}

.hero-info button {
    border: none;
    outline: none;
    background: #fff;
    box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
    border-radius: 19.7953px;
    text-transform: capitalize;
    font-weight: 500;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    font-size: 18px !important;
    text-indent: 7px;
}

.play-wrapper {
    margin-left: -10px;
} 

.play-wrapper span {
    font-weight: 500;
    font-size: 18px !important;
}

.hero-text {
    margin-top: 24px;
    font-size: 25px;
}

.play-wrapper {
    margin-top: 26px;
}

.recent-live-wrapper {
    width: 100%;
}



.recent-live-wrapper p.video-title {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    text-transform: capitalize;
    color: #000000;
    margin-top: -18px;
}

.item.col-12.col-sm-6.col-md-4 {
    margin-bottom: 15px;
}

.dis-wrap {
    width: 100% !important;
}
.dis-wrap:hover a {
    text-decoration: none;
}
p.video-title {
    font-size: 18px;
    font-weight: bold;
    margin: 7px 0 9px 0;
    color: #000;
    text-transform: capitalize;
}

p.author {
    font-weight: bold;
    font-size: 15px;
    text-transform: capitalize;
    color: #000;
}
p.time-stamp a:hover{text-decoration:none;}

p.time-stamp {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-transform: capitalize;
    color: #AAAAAA;
    margin-top: -10px;
}

.dis-wrap {
    padding-left: 24px;
    width: 100%;
}

.leader-board-overlay {
    position: absolute;
    margin-top: -10px;
    margin-left: -10px;
    height: 100%;
    background: rgba(86, 86, 86, 0.7);
    backdrop-filter: blur(20px);
    z-index: 100;
}

.video-status {
    display: flex !important;
    justify-content: space-between;
    margin-top: -16px;
    z-index: 101 !important;
    border-bottom: 1.8px solid #F2F2F2;
    width: 98%;
}

.video-report {
    display: flex;
    flex-direction: row;
    padding: 10px 0px;
    justify-items: center;
    align-self: center;
}
.video-report span {
    margin-right: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.view-status {
    padding: 0px !important;
    margin-top: -4px;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    opacity: 0.5;

}

.profile-user-title {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #0B2737;
    padding: 0px !important;
    margin-bottom: 0px !important;
}

.subscriber-text {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #C3BDBD;
    text-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
    margin-bottom: 0px;
}

.primary-btn {
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
    box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
    border-radius: 10px;
    border: none;
    outline: none;
    color: #fff;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    padding: 10px 32px;
   /* height: 52px !important;*/
}

.wrap-subcribe-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chanel-dis {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.8);
    width: 65%;
    margin-left: 75px;
    margin-top: 15px;
}

.read-more-btn {
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.8);
    border: none;
    background: none;
    margin-left: 70px;
}

.sort-title {
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #000000CC;

}

.comment-input {
    width: 100% !important;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1.8px solid #F2F2F2;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0em;
    text-align: left;

}

.comment-wrapper button:first-child {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;

}

.Comments-btn {
font-size: 20px;
font-weight: 500;
letter-spacing: 0em;
text-align: left;
background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
box-shadow: 0px 4px 15px rgba(204, 204, 204, 0.25);
border-radius: 10px;
color: #fff;
padding: 8px 16px;
border: none;
}

.mt-32px {
    margin-top: 32px;
 }
 .mt-16px {
    margin-top: 16px;
 }
 
 .mt-44px {
    margin-top: 44px;
 }
 
 
 .video-uploading-wrap {
    height: 100%;
 }
 
 
 form.upload-video-btn{
   width: 100%;
   height: 379.2px;
    border: 3px dashed #AAAAAA;
    box-shadow: 0px 4px 10px rgba(230, 230, 230, 0.25);
    border-radius: 10px;
 }
 
 form.upload-video-btn p{
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    text-transform: capitalize;
    padding: 0px;
    margin: 12px 0px;
 }
 
 form.upload-video-btn input{
   position: absolute;
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   outline: none;
   opacity: 0;
 }
 
 
.mt-35 {
  margin-top: 55px;
}

.counter_notification {
  position: absolute;
  background: linear-gradient(180deg, #1ba1e7 0%, #063160 100%) !important;
  height: 9.77px;
  width: 9.77px;
  border-radius: 50%;
  top: 5px;
  right: 8px;
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
  display: unset !important;
}
.owl-carousel.this_week .owl-nav button.owl-prev {
  top: 41% !important;
  left: 7px !important;
}
.owl-carousel.this_week .owl-nav button.owl-next {
  top: 41% !important;
  right: 7px !important;
}
.owl-carousel .owl-nav button.owl-prev {
  position: absolute;
  top: 29%;
  left: -7px;
  background: white !important;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 29%;
  right: -7px;
  background: white !important;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  box-shadow: 0px 4px 4px 0px #00000040;
}

.notification_span {
  background: linear-gradient(180deg, #1ba1e7 0%, #063160 100%);
  box-shadow: 0px 4px 15px rgb(204 204 204 / 25%);
  border-radius: 50%;
  color: white;
  padding: 4px 9px;
}
.notification-list {
  padding: 12px;
}
.notification-list p {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 19px;
  text-transform: capitalize;
  color: #0b2737;
}
.notification-list span {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-transform: capitalize;

  color: #c3bdbd;
}

.notifcation-detail {
  height: 34px;
  width: 34px;
  background: #f4f4f4;
  border-radius: 50%;
}
.notifcation-detail svg {
  width: 8px !important;
}
.notification-option {
  display: flex;
  padding: 5px 17px;
  justify-content: space-between;
}
.notification-option a:hover {
  color: #063160 !important;
}
.mejs__overlay-play .mejs__overlay-button {
  background-image: url(/themes/youplay/img/playBtn.svg) !important;
  height: 92px !important;
  width: 85px !important;
  background-size: 110px !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.locked-info {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-inline: 74px;
  color: white;
}
.locked-info p {
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  text-transform: capitalize;
}
.d-none{display: none;}
.watch-video-show-more{
  background-color: transparent !important;
  box-shadow: none !important;
  margin-left: 15px !important;
}
.btn-subscribe {
  padding: 5px 20px !important;
  background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
  box-shadow: 0px 4px 15px rgb(204 204 204 / 25%) !important;
  border-radius: 10px !important;
  text-transform: capitalize;
}
.subs-amount{display: none !important;}
.mejs__time-handle-content{
  border: 8px solid #063160 !important;
    background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%) !important;
}
.mejs__volume-current{
  background: linear-gradient(180deg, #1B8ACC 0%, rgba(196, 196, 196, 0) 100%) !important;
}

.mejs__volume-handle {
  background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%) !important;
}
.mejs__volume-button>.mejs__volume-slider{
  background: #fff !important;
}

.mejs__time-current {
  background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%) !important;
}
.mejs__play{
  background: linear-gradient(180deg, #1BA1E7 0%, #063160 100%);
  border-radius: 50%;
  height: 34px !important;
}
.mejs__play button {
  margin: 8px 6px !important;
  background: transparent url(../img/play-bg.svg) !important;
  background-size: 85% !important;
  background-repeat: no-repeat !important;
  background-position: center 0px !important;
}
.pt_video_info .watch-video-show-more{
  margin-top: 0 !important;
}

.main-comment .user-name a {
  font-weight: 600;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-transform: capitalize;
  background: linear-gradient(180deg, #1B8ACC 0%, #0B2737 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}


.calhoun-box:hover a, .user-videos-without-login:hover{color:#fff; text-decoration:none;}
.calhoun-box a:hover{color:#fff; text-decoration:none;}