@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{background-image:url('../img/bg1.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;  font-family: 'Poppins', sans-serif;}
.home {margin:3% 18%; position: relative;}
.bot_gap{margin-bottom:2.5em;}
.overlayBox {border-radius:16px; background: rgba(255, 255, 255, 0.62); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border: 1px solid rgba(255, 255, 255, 0.13); height:315px; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.podcastInfo {padding:2.5em;}
.podcastInfo h1 {font-size: 23px;}
.coverArt {width: 110px; border-radius: 8px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.episodeInfo{padding:2.5em;}
.episodeInfo h2 {margin: 0; font-size: 14pt;}
.episodeInfo h3 {font-size: 12pt;}
.detailsInfo{padding:2.5em;}
.detailsInfo h2 {margin: 0; font-size: 14pt;}
.episodes {width: 100%; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); height: 210px; margin-top: 1em; border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; overflow-y : scroll;}
.episodesPage {width: 100%; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); margin-top: 1em; border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.episode {padding:1em;}
.episodeimg {width: 60px; border-radius: 8px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.seasonT {margin:0;padding:0;}
.titleT {margin:0;padding:0;}
.episodeT {font-size:9pt; margin-bottom:0;}
.showEpi {padding-left: 3em;}
hr {margin:1em 0 0 0;padding:0; border-top: 0.3px solid #9a9a9a!important;}
.btn {background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; text-align:center; font-size:9pt; transition: 0.2s;}
.btn:hover {backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); background: rgba(255, 255, 255, 0.92);}
.btnEpi{padding-left: 3em;}
::-webkit-scrollbar {display:none;}
.header{height:54px; margin-bottom:2em;}
.logo {width:100px;}
.logopro {width:166px;}
.listeners {padding:1.5em; width: 100%; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); height: 210px; margin-top: 1em; border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.monthBar {width:100%; height:140px; background: rgba(0, 118, 255, 0.31); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: 15pt; font-weight: 700;}
.monthStat {line-height: 140px; text-align: center;}
.monthText {text-align: center; margin-top:0.8em; font-size: 14px;}
.connectImg {width:100%; border-radius:16px; margin-bottom:1.5em; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}
.powerImg {width:100%; border-radius:16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;}
.rightFloat {float:right;}
.add {color:#000; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); padding: 8px 13px; border-radius:5000px; box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; transition: 0.4s; cursor:pointer;}
.add:hover {background:#000; color:#fff; cursor: pointer;}
.admin {float:right; color:#fff;margin-top: 0.6em; transition: 0.3s; height:40px;}
.adminHover {display:none; position: absolute; z-index: 100; transition: 0.3s; top: 40px; right: 0; background: rgba(255, 255, 255, 0.62); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); padding:1.3em; color:#000;}
.logout{margin:0;}
.admin:hover .adminHover {display:block;}

.hidden {display:none;}
.show{display:block;}

/* PAGES */
.menu {padding:2em; width: 100%; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); height: 210px; margin-top: 1em; border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.menuBar {width:100%; height:120px; background: rgba(0, 55, 255, 0.11); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); font-weight: 700; transition: 0.4s; cursor: pointer;}
.menuBar:hover {background: rgba(0, 255, 140, 0.11); transition: 0.4s; cursor: pointer; text-decoration: none;}
.menuIcon {font-size: 29pt; text-align: center; padding-top: 0.95em; color: #555;}
.menuText {text-align: center; margin-top:0.8em;}
.navAct {background:rgba(0, 255, 140, 0.11);}
.contentBox {border-radius:16px; background: rgba(255, 255, 255, 0.62); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;}
.newEpisode {padding:1.5em; width: 100%; background: rgba(255, 255, 255, 0.42); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); margin-top: 1em; border-radius: 16px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}
.form-control{display: block; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background: rgba(255, 255, 255, 0.62); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; border-radius: 8px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; width: 100%;}
.formLabel {font-weight:300; padding-left:3px;}
.formSmall {font-weight:300; padding-left:3px; padding-top:8px;}
.formSelect {appearance: none;}
input[type=date].form-control, input[type=datetime-local].form-control, input[type=month].form-control, input[type=time].form-control{line-height: 17px!important;}
.btn_gap{margin-top:1em; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;}

.uploader {position:fixed; z-index:110; padding:2em; bottom:1em; right:1em; background: rgba(255, 255, 255, 0.62); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(8.5px); -webkit-backdrop-filter: blur(8.5px); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; text-align:center;}
.uploaderGif{width: 210px;height: 127px; object-fit: none;}
.uploaderText {position: absolute; margin:0; font-size:20pt; color:#fff; bottom: 70px; right: 50px; letter-spacing: 2; text-shadow:1px 1px 51px #000, 1px 1px 16px #000;}

.loginHome {margin:3% 38%; text-align:center;}
.copyright{color:#fff!important; margin: 1em 0 0 0; font-size:9pt;}
.footerNav{float:right;}
.footerNav a {color:#fff!important;}
.formExplain{margin-top:7px; margin-bottom:0; font-size: 8pt;}
.row {z-index:7; position: relative;}
.highlightDiv {z-index:190; box-shadow: 0 0 0 1000px rgba(0,0,0,.3);box-shadow: 0 0 0 100vmax rgba(0,0,0,.3);position: relative;}
.contentVmid {display:flex;align-items:center;}
.disabled {opacity:0.6;}
.margin0 {margin:0!important;}
.w100 {width:100%;}

.analyticsDashNumber {font-size: 22pt; margin: 0.2em 0 0 0; font-weight: 500; margin-block-end: 0!important;}
.analyticsExplain {font-size: 6pt; margin: 0.2em 0 0 0; font-weight: 500; margin-block-end: 0!important;}

.mt-1 {margin-top:1em;}
.mt-2 {margin-top:2em;}
.mt-3 {margin-top:3em;}
.mt-4 {margin-top:4em;}
.mt-5 {margin-top:5em;}

.mb-1 {margin-bottom:1em;}
.mb-2 {margin-bottom:2em;}
.mb-3 {margin-bottom:3em;}
.mb-4 {margin-bottom:4em;}
.mb-5 {margin-bottom:5em;}

.m-1 {margin:1em;}
.m-2 {margin:2em;}
.m-3 {margin:3em;}
.m-4 {margin:4em;}
.m-5 {margin:5em;}

.ticket h3 {margin: 1em 0 0 0;}

.podcastBox {padding:1.5em; background-color: #0f0f0f; border-radius:30px; margin-bottom:1.3em;}
.pageArt {width:100%; border-radius:18px;}
.epiTitle {color:#fff; margin-top: 6px; height:50px; font-size:24px; margin-bottom: 1.3em;}
.seasonTitle {margin-block-start: 0em;margin-block-end: 0em; margin: 1.3em 0 0 0; color:#fff!important; font-size:14px;}
.buttonAP {color:#fff;}
.bounce {background-color: rgba(214, 244, 255, 0.65); text-align: center; width: 100%; padding: 1em; font-size: 22pt; border-radius: 1em; margin-bottom: 1em;}

@media only screen and (max-width: 1570px) {
    .overlayBox {height:315px;}
    .btnEpi {padding-left:1em;}
    .podcastInfo h1 {font-size: 19px;}
    .monthText {margin-top: 1.5em; font-size: 10px;}
    .detailsInfo {padding: 3.5em 2.5em;}
}

@media only screen and (max-width: 1400px) {
    .epiTitle {font-size:18px; margin-bottom:0;}
}
@media only screen and (max-width: 1060px) {
    .epiTitle {font-size:15px; height:30px; margin-bottom:1.3em;}
    .seasonTitle {font-size:12px;}
}
@media only screen and (max-width: 900px) {
    .epiTitle {font-size: 12px; height: 25px;}
    .seasonTitle {font-size:10px;}
}