@font-face {
    font-family: "GT Walsheim Pro";
    src:url('/assets/fonts/gt walsheim/GTWalsheimPro-Regular.woff') format('truetype');
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src:url('/assets/fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}

body, h1, h2, h3, h4, h5, h6, button {
    font-family: "GT Walsheim Pro";
    color: #fff;
}

.site-header {
    transition: all 0.2s ease-out 0s;
}
.site-header.nav-active {
    background: #000;
}


/*start sidebar*/
.sidebar-card .list-group .list-group-item {
    color: #000 !important;
    letter-spacing: 0.2px;
    border-bottom: 1px solid black;
}
.sidebar-card .list-group .list-group-item.active {
    background: #132F38;
    border: 1px solid #132F38;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.10);
    color: #8DFDF7 !important;
    font-weight: 700;
}
/*end sidebar*/

.text-secondary {
    color: #7B7979 !important;
}

/*start dashboard*/
.nav-pills .nav-link {
/*    padding: 0.5rem 2.5rem;*/
    border: 1px solid #D3D3D3;
    font-weight: 500;
}
.nav-pills .nav-link.active {
    background: #8DFDF7;
    color: #010101 !important;
    border: 1px solid #8DFDF7;
}
.audio-list, .video-list {
    max-height: 26.5rem;
    overflow: hidden;
    overflow-y: auto;
}
.audio-card .audio-title h3 {
    letter-spacing: 1.49px;
}
.player-card .player-action .push-audio {
    background: linear-gradient(180deg, #A6F3FF -15.18%, #00C2CB 84.82%);
    filter: drop-shadow(0px 0px 2.496px #00C2CB);
}
/*end dashboard*/

/*start profile*/
.profile-from-group .form-control, .rendered-form.formbuilder-embedded-bootstrap .form-control{
    height: auto !important;
    padding: 0.9rem !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    color: #000 !important;
    font-family: "GT Walsheim Pro";
    font-weight: 500;
}
.bg-aqua {
    background: #8DFDF7;
    color: #000;
    border: 1px solid #8DFDF7;
}
.custom-btn, .custom-btn:hover, .custom-btn:active, .custom-btn:focus {
    padding: 0.4rem 3rem;
    border-radius: 12px;
    color: #000;
    background: #8DFDF7;
    border: 1px solid #8DFDF7;
}
/*end profile*/

/*start rendered form*/

.rendered-form.formbuilder-embedded-bootstrap .form-group {
    margin-bottom: 0.75rem !important;
}
.rendered-form label {
    display: none;
}

/*end rendered form*/

/*start save card*/
.credit-card {
    background-color: #2E3030;
}
.credit-card .action-title {
    color: #57ABE8;
}
/*end save card*/

/*start current plan*/
.setting-card {
    padding: 20.978px;
    border-radius: 18.356px;
    background: url("/assets/images/setting-card-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #171717;
    border: 6px solid #2E2E2E;
}
.current-plan-status {
    border-radius: 13px;
}
.current-plan-status .plan-expier-duration {
    color: #000 !important;
    font-size: 28px;
    letter-spacing: 0.744px;
}
.cancel-subscription-btn {
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid #F00;
    cursor: pointer;
}
.cancel-subscription-btn .danger-btn {
    color: #F00;
}
.text-container {
    width: 40%;
}
.line {
    flex-grow: 1;
    border-top: 1px solid #fff;
}
.plan-card {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.plan-month, .plan-duration, .plan-title, .plan-price {
    color: #8DFDF7;
    letter-spacing: 0.744px;
}
.plan-month {
    font-size: 27px;
}
.plan-price {
    font-size: 27px;
}
.choose-plan {
    padding: 0.8rem 0.8rem 0.8rem 1rem;
    background-color: #8DFDF7;
    cursor: pointer;
}

.carousel-inner {
    display: flex;
}
.carousel-item {
    display: block;
    margin-right: 0;
   flex: 0 0 calc(100%/3);
}
.carousel-control-prev,
.carousel-control-next {
    width: 30px;
    height: 30px;
    top: -7%;
    border-radius: 100%;
    background: #FFF;
    opacity: 1;
}
.carousel-control-prev {
    left: 0.5rem;
}
.carousel-control-next {
    left: 3rem;
}
.carousel-control-prev-icon {
    background-image: url("/assets/images/scroll-right.svg");
}
.carousel-control-next-icon {
    background-image: url("/assets/images/scroll-left.svg");
}
/*end current plan*/

/*start choose plan*/
.setting-card .title {
    font-size: 30px;
    letter-spacing: -0.6px;
}
#step-3 .plan-price {
    font-size: 36px !important;
}
.vertical-divider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background-color: #8DFDF7;
}
/*end choose plan*/

/*start blog*/
.bolg-card .img-wrapper {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bolg-card .img-wrapper img{
    max-height: 100%;
    border-top-left-radius: 23px;
    border-top-right-radius: 23px;
}
.bolg-card, .bolg-card .card-body {
    border-radius: 23px;
}
/*end blog*/

.icon-dual {
    top: 1.1rem;
    left: 0.9rem;
    width: 17px;
    height: 17px;
}

/*start setting*/
.switch {
    visibility: hidden;
    position: absolute;
    margin-left: -9999px;
}

.switch + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.switch--shadow + label {
    padding: 2px;
    width: 2.743rem;
    height: 1.668rem;
    background-color: #dddddd;
    border-radius: 60px;
}
.switch--shadow + label:before,
.switch--shadow + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
}
.switch--shadow + label:before {
    right: 1px;
    background-color: #78788029;
    border-radius: 60px;
    transition: background 0.4s;
}
.switch--shadow + label:after {
    width: 24px;
    background-color: #fff;
    border-radius: 100%;
    transition: all 0.4s;
}
.switch--shadow:checked + label:before {
    background-color: #34C759;
}
.switch--shadow:checked + label:after {
    transform: translateX(18px);
}
/*end setting*/

/*start swal2*/
.swal2-popup.swal2-modal.swal2-icon-warning {
    background: url("/assets/images/setting-card-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #171717;
}
.swal2-icon.swal2-warning {
    color: #8DFDF7;
    border-color: #8DFDF7;
}
#swal2-title {
    color: #8DFDF7;
}
.swal2-styled.swal2-confirm{
    background-color: #8DFDF7 !important;
    color: #000 !important;
}
/*end swal2*/

/*start modal*/
.modal-content {
    border-radius: 18.356px;
    background: url("/assets/images/setting-card-bg.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #171717;
    border: 6px solid #2E2E2E;
}
.modal-content .modal-header .modal-title {
    color: #8DFDF7;
    font-family: "GT Walsheim Pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 26.222px;
}
.btn-close, .btn-close:hover {
    box-sizing: content-box;
    color: #8DFDF7;
    background: url("/assets/images/btn-close.svg") center/1em auto no-repeat;
    opacity: 1;
}
/*end modal*/
@media only screen and (max-width: 1024px) {
    body[data-sidebar-size=condensed]:not([data-layout=compact]){
        min-height: 100vh !important;
    }
    .text-container {
        width: 65%;
    }
    .carousel-item {
        display: block;
        margin-right: 0;
       flex: 0 0 calc(100%/2);
    }
}

/*scrollbar*/
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: grey; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8DFDF7; 
}

@media only screen and (max-width: 768px) {
    body[data-sidebar-size=condensed]:not([data-layout=compact]){
        padding-bottom: 20px !important;
    }
    .text-container {
        width: 100%;
    }
    .carousel-item {
        display: block;
        margin-right: 0;
       flex: 0 0 calc(100%/1);
    }
    .subscription-btn {
        margin-top: 0.9rem;
        width: 66%;
        margin-left: 0 !important;
    }
}