/* CSS Document */
*{
box-sizing:border-box; 
}
body, p, table, td, input, select{
font-family:roboto, sans-serif; 
font-size:0.85em; 
vertical-align:top; 
}
body{margin:0; padding:0; background-color:#f9f9f9;}
h2{color:lightseagreen;text-transform:capitalize;}
.page{display:flex; flex-direction:column; justify-content:space-between; height:95%; max-width:100%; overflow-x:hidden; margin:0; padding:0;}
.page-header{background-color:lightseagreen;}
.page-body{height:100%; width:100%; max-width:1200px; padding:20px; margin:auto;}
.page-footer{padding:5px; display:flex; flex-direction:row; justify-content:space-evenly;}

.mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:1rem!important;}
.mt-4{margin-top:1.5rem!important;}

.mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mb-4{margin-bottom:1.5rem!important;}

.m-2{margin-top:.5rem!important; margin-bottom:.5rem!important;}
.m-3{margin-top:1rem!important; margin-bottom:1rem!important;}
.m-4{margin-top:1.5rem!important; margin-bottom:1.5rem!important;}

.breadCrumbs {
display: flex;
align-items: center;
}
/**** scroll to top ****/
#scroll{position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; z-index:999;}
#scroll span{position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff}
#scroll:hover{background-color:#e74c3c; opacity:1; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)";}
.menu1{top:0; width:100%; display:flex; justify-content:space-between; border-left:1px solid darkseagreen; border-right:1px solid darkseagreen; border-bottom:1px solid darkseagreen; color:white; background-color:inherit;}
.menu1 ul{display:flex; justify-content:left; list-style-type:none; margin:0; padding:0; overflow:hidden;}
.menu1 li{font-size:14px; border-right:1px solid darkseagreen;}
.menu1 li a, .dropbtn{display:block; color:white; text-align:center; padding:8px 10px; text-decoration:none;}
.menu1 li a:hover, .dropdown:hover .dropbtn{text-decoration:none; background-color:white; color:seagreen;}
.menu1 li.dropdown{display:inline-block;}
.dropdown-content{position:absolute; background-color:lightseagreen; min-width:120px; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content img, .menu1 img, .dropdown-content i, .menu1 i{margin-right:6px; float:left;}
.dropdown-content a{padding:12px 16px; text-decoration:none; display:block; text-align:left;}
.dropdown-content a:hover{background-color:lightgray}
.dropdown-content.hidden{display:none !important;}
.dropdown:hover .dropdown-content{display:block !important; z-index: 100000;/* This ensures the hover effect works even if the .hidden class is applied */}
.userMenu{display:flex;}
.notification-icon, .user-icon{padding:10px; cursor:pointer;}
.notification-icon:hover, .user-icon:hover{background-color:white; color:seagreen;}
.notificationHeader {
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 16px;
box-shadow: 0px 1px 2px var(--neutral-stroke-divider-rest);
background:#dbe9f7;
}
.notification-header-title {
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: var(--neutral-foreground-rest);
}
.markAllasRead{
background: 0;
padding: 3px 12px;
color: darkgreen;
border: 0;
}
.markAllasRead:hover{
color: darkgreen;
border: 1px solid green;
box-shadow:1px 1px 2px silver;
cursor:pointer;
}

.fa-window-close:hover{color:red;}
.notification-dropdown {
position: fixed;
top:30px;
right:30px;
background-color: white;
color:black;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 420px;
max-width:80%;
display: none; /* Initially hidden */
z-index: 1;
}

.notification-dropdown ul {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto; max-height: 400px;
}

.notification-dropdown ul li {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
padding: 10px;
border-right: 0px;
border-bottom: 1px solid #ddd;
width:100%;
}

.notification-dropdown ul li:last-child {
border-bottom: none;
}

.notification-icon {
position: relative;
padding:10px;
cursor: pointer;
float:right;
}

.pod-label {
    color: darkcyan;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 13px;
}

.podcast-labels {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.badge {
position: absolute;
top: 0;
right: 0;
background-color: red;
color: white;
border-radius: 50%;
padding: 2px 5px;
font-size: 12px;
display: none; /* Initially hidden */
}
#notification-list a{color:revert;display:inline;text-align:left;padding:revert;}
#notification-list a:hover{color:darkblue;background-color:revert;}
#notification-list a .fas{float:right;}

label{color:darkcyan; font-weight:700; text-transform:capitalize;}
.card{ width:1200px; max-width:95%; max-height:95%; margin:auto;}
.card-header{display:flex; align-items:center}
.card-title{display:flex; justify-content:space-between; width:100%; font-size:120%; font-weight:600;color:slategray;}
.card-header select{width:50%;}
.card-body{display:flex; flex-direction:column;  overflow-y:auto;  overflow-x:hidden;  background-color:#ffffff;}
.card-footer{padding:10px; display:flex; justify-content:space-between;}
.container {display: flex;flex-direction: column;height: 100%;}
.footer { padding: 10px;text-align: center;flex-shrink: 0;}

.tab-menu {display: flex;justify-content: space-between;list-style-type: none;padding: 0;margin: 0;overflow-x: auto; scrollbar-width: none;-ms-overflow-style: none;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.tab-menu::-webkit-scrollbar {display: none; }
.tab-menu-container {position: relative;width: 100%;overflow: hidden;}
.tab-content {display: flex;flex-direction: column;height: 100%;}
.subtab-container {display: flex;flex-direction: column;height: 100%;}
#tabContent {flex-grow: 1;overflow-y: auto;padding: 10px;}
#widgetContent {flex-grow: 1; padding: 10px; height: 600px;}
.subtab-menu {display: flex;justify-content: space-between;padding: 0;margin: 0 0 20px 0;border-bottom: 1px solid #dee2e6;flex-shrink: 0;}
.subtab-content-container {flex-grow: 1;overflow-y: auto;padding: 20px;}
.subtab-content {display: none;padding: 20px;border: 1px solid #ddd;border-radius: 5px;}
.subtab-content.active {display: block;}
.codemirror-wrapper {border: 1px solid #ddd;height: 200px;}
.right{float:right;}
.form-control{display:block; width:100%; padding:.375rem .75rem; font-weight:400; line-height:1.5; color:#212529; background-color:#fff; background-clip:padding-box; border:1px solid #ced4da; 
-webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:.25rem; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.textCenter{text-align:center;}
.input-group{display:flex;}
.column-group{flex-direction:column;width:48%;}
.larger{font-size:larger}
.infoContent.form-control, .sourcesContent.form-control{width:inherit;}
.button-group.form-control{display:flex; justify-content:space-between; border:0; background:0;}
.btn{display:inline-block; font-weight:400; line-height:1.5; color:#212529; text-align:center; text-decoration:none; vertical-align:middle; cursor:pointer; 
-webkit-user-select:none; -moz-user-select:none; user-select:none; background-color:transparent; border:1px solid transparent; padding:.375rem .75rem; border-radius:.25rem; transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.btn-small{font-size:small;}
.btn-larger{font-size:larger;}
.btn-default{padding:6px; border:0; background:0;}
.btn-outline-primary{color:#0d6efd; border-color:#0d6efd;}
.btn-outline-primary:hover{color:#ffffff; background-color:#0d6efd;}
.btn-outline-secondary{color:#6c757d; border-color:#6c757d;}
.btn-outline-secondary:hover{color:#ffffff; background-color:#6c757d;}
.btn-outline-secondary.form-control.active{color:#ffffff; background-color:#6c757d;}
.btn-outline-default, .btn-default{color:#6c757d;}
.btn-default:hover{color:black;}
.btn-outline-default:hover{color:black; border-color:#6c757d;}
.btn-outline-danger{color:#ec407a;}
.btn-outline-danger:hover{border-color:#ec407a;}
.btn:disabled { display:none;}

.editListTable{width:700px; max-width:90%;margin:6px auto;}
.editListTable thead{ color: #6c757d; background-color: #b0e0e64a;}
.editListTable tr{text-align:center;}
.editListTable tbody tr:hover{background-color:#b0e0e61f;}
.editListTable td{padding:5px;font-size:inherit;vertical-align: middle;}
.editListTable .fa-trash-alt{color: palevioletred;}
.editListTable th{padding:10px 0px;}
#addNewCountry, #addNewUser {width:fit-content;margin:auto;}
input.formInput{margin: auto; text-align: center;}


.imageContent button{margin-top:1em;}
textarea.form-control{min-height:calc(1.5em + .75rem + 2px);}
.audioRow, .websiteRow{max-width:100%;}
.audioRow:hover, .websiteRow:hover{background-color:#b0e0e64a; cursor:pointer;}
.audioRow.active{background-color:powderblue;}
.audioRow, .episodeRow, .websiteRow{padding:10px; display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.episodeRow{width:inherit;}
.episodeRow.active{ background-color:#b4d7dc66; border:1px solid darkseagreen; border-bottom:0;}
.audioRow > *{padding:5px;}
.audioTitle{width:25%;}
.audioDate{margin:10px 0px;}
.audioIcon{height:50px; width:auto; border-radius:50%;}
.audioIcon.episodeIcon{height:40px; margin-left:20px;}
.audioElement{height:30px;}
.scriptContent, .summaryContent, .episodesContent{height:400px; overflow-y:auto;}
.originalImage{max-width:300px;}
.podcastDescription{height:100px;}
.podcastMenu, .tab-menu{display:flex; flex-direction:row; justify-content:space-evenly; background:#b0e0e64a;}
.podcastMenu button, .tab-menu li{margin:0px 10px 3px 10px; opacity:0.7;cursor:pointer;}
.podcastMenu button.active, .tab-menu li.active{font-weight:700; color: #000;}
.podcastMenu button:hover, .tab-menu li:hover{opacity:1;}
.subtab-button{border-left:none;border-radius:10px 10px 0px 0px;}
.imageContent{display:flex; justify-content:space-evenly; padding:1rem;}
.fas.fa-bars:hover{cursor:move;}
textarea{font-family:inherit;}
#fullScreen{position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.5); z-index:2000;}
#loader{position:absolute; left:50%; top:50%; z-index:2001; width:120px; height:120px; margin:-76px 0 0 -76px; 
border:32px solid #c8e6ea87;
border-radius:50%; 
border-top:32px solid lightsalmon; 
border-bottom:32px solid lightseagreen;
opacity:0.5;
-webkit-animation:spin 2s linear infinite; animation:spin 2s linear infinite;}
@keyframes spin{0%{ transform:rotate(0deg);}100%{ transform:rotate(360deg);}
}
#podcastMenu, .editorPanels{max-width:100%;}
.d-none{display:none;}
.accountSelection, .userSelection{max-height:25rem;overflow-y:auto;}
.accountSelection{padding:0 1em;}
#copyright{opacity:1; color:#6c757d !important;}
.form-group{
opacity:0; 
height:0; 
margin:auto; 
overflow:hidden; 
transition:opacity 1s ease, height 1s ease; 
}
.form-group.active{
display:block; 
width:100%; 
opacity:1; 
height:auto; 
}
.button-group button{font-size:larger; margin:5px; padding:5px; display:none;}
.button-group button + .active{display:block; opacity:1; height:auto; 
}
.rowInput{border:1px solid #ced4da; border-radius:0.25rem;}
.rowInput input, .rowInput select, .rowInput textarea{border:0;}
.flexRow{display:flex; flex-direction:row; justify-content:space-between;align-items:center;}
.wrap{flex-wrap: wrap;}
.register:hover, .login:hover{opacity:1; cursor:pointer; text-decoration:underline;}
.memberMenu fas{font-size:x-large; margin:5px;}
.memberMenu a{}
a{cursor:pointer; text-decoration:none;}
#siteInfo, #newsSources{margin:0px auto;}
.mainFrame{width:100%; max-width:1200; margin:auto; height:100%;}
.button-group, .buttonGroup{display:flex; flex-direction:row; justify-content:space-between;}
.productCard{width:100%; margin:5px; text-align:center;}
.productCard:hover{border-color:blue; background-color:#f3fcff; box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;}
.planPrice{font-size:2em;}
form, .button-group{width:95%; max-width:600px; margin:auto;}
.xx-large{font-size:xx-large;}
button .fas, button span{font-size:larger; margin:7px;}
.f-left{float:left;}
.f-right{float:right;}
.featureList{list-style-type:none; padding:0; font-size:small;}
.broadcastPlans{display:flex; flex-direction:row;}
.broadcastPlans div{text-align:center;}
@media screen and (max-width:600px){
.broadcastPlans{flex-direction:column;}
}
.headerLogo{width:40px; height:40px; margin:5px; opacity:0.7;}
.countDown{color:green; font-weight:bold;}
.dropZone{width:100%; height:100%; text-align:center; padding:30px 20px; margin:5px; border-radius:5px;}
.dragover{background-color:#f0f0f0;}
.socialChannelDivs{margin-bottom:15px;}
.text-muted{opacity:1; color:#6c757d !important;}
.registerOptions{display:flex; flex-direction:row; justify-content:center;}
.registerOptions a{color:blue;}
.registerOptions label{margin-right:10px;}
.form-label{margin-bottom:.5rem;}
.form-text{margin-top:.25rem; font-size:.875em; color:#6c757d;}
.loginForm{width:600px; max-width:95%; margin:auto;}
#addCustomerForm{display:flex;flex-direction:row;justify-content:space-between;margin-top:20px;font-size:smaller;}
/* popup alerts */
.modal-overlay{
z-index: 10;
position:fixed; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background-color:#e5e4e480; 
display:flex; 
justify-content:center; 
align-items:center; 
}

.alertCard{
border-color:#105955; 
width:auto;
min-width:350px;
max-width:600px; 
background-color:aliceblue; 
border-radius:10px; 
box-shadow:3px 3px 10px #00000059; 
z-index:999; /* Ensure modal is above other content */
}
.alert-card-header{color:darkslategrey;}
.alert-card-header,.alert-card-body{padding:10px 15px;}
.alert-card-body{
background-color:white; 
margin:0px 15px; 
border-radius:3px; 
}
.alert-card-footer{margin:10px 15px; display:flex; 
justify-content:flex-end;flex-direction:row-reverse;}
.alert-card-footer .btn{margin:0px 5px;}
#popup, #pop-up {

z-index: 3;

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
background-color: white;
overflow: auto;
border-radius: 10px;
}
.saveMe {
border-color: orange;
}

#actualWidgetPanel {display: flex; align-items: center; gap: 10px; justify-content: space-between;}
.WidgetSetting {display: flex; flex-direction:column;}
.WidgetSetting i {font-size: 18px;}
.WidgetSetting .flexRow {justify-content: flex-end; align-items: center;gap: 10px; margin-right: 30px;}

.iconRow {display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 6px; background: white; margin: 5px;}
.iconsList {display:flex;flex-direction:column; min-height:300px; width:100%;background-color:#f0faf9;justify-content:space-between;padding:20px;}
.logoGroup {display:flex;flex-direction:row;justify-content:space-evenly;width:100%;background-color:#f0faf9;}
.iconHolder {width: 50%;text-align: center;}

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px; text-align: center; border: 1px solid #ddd; }
th { background-color: #f2f2f2; }
tr:nth-child(even) { background-color: #f9f9f9; }
tr:hover { background-color: #f1f1f1; }
.search-button { display: flex; align-items: center; gap: 5px; padding: 8px 16px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; }
.search-button:hover { background-color: #e0e0e0; }
.search-button span { font-size: 16px; }
.search-button i { font-size: 16px; }
#mask { position: fixed; left: 0; top: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.8); display: none; width: 100%; height: 100%; }
#screen { background-color: #ffffff80; position: fixed; z-index: 10000; width: 100%; height: 100%; top: 0px; }
.mask { position: fixed; left: 0; top: 0; z-index: 11; background-color: rgba(0, 0, 0, 0.8); display: none; width: 100%; height: 100%; }
.seo-pop-up {
    z-index: 4;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background-color: white;
    overflow: auto;
    border-radius: 10px;
}
.CodeMirror-scroll {max-height: 300px; overflow-y: auto !important;}
#social-container {
    width: 100%;
    display: flex;
    align-items: center;
  justify-content: center;
}
.social-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 16px !important;
}

/* Apply fixed width for the first child elements (<span> or <select>) */
.social-entry > span,
.social-entry > select {
  width: 150px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 5px;
  margin-right: 10px;
}

/* Apply fixed width for the second child elements (<a> or <input>) */
.social-entry > a,
.social-entry > input {
  width: 200px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 5px;
  text-decoration: none;
}

/* Icon styles (for both add and remove buttons) */
.removeSocialLinksBtn,
.addSocialLinksBtn {
  background-color: white;
  cursor: pointer;
  border: none;
  font-size: 16px;
}

.removeSocialLinksBtn {
  color: #f44336 !important;
}

.addSocialLinksBtn {
  color: #4CAF50 !important;
}

.podbar {
    display: flex;
    justify-content: space-between;
    padding: 0;
    flex-shrink: 0;
}

.podtab-button {
    border: 1px solid #ced4da;   /* fixed typo: #ced4d → #ced4da */
    border-radius: 10px 10px 0 0;
    width: 100%;
    background: none;
    min-height: 30px;
    max-height: 30px;
}

.podtab-button.active {
    color: #008b8b;
    font-weight: bold;
    background-color: #e8f6f7;
}


.podtab-button:hover {
    color: #008b8b;
    font-weight: bold;
    background-color: #e8f6f7;
    cursor: pointer;
}




.resource-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.resource-entry select {
    flex: 1;
    padding: 5px;
    margin-right: 10px;
}

.removeResourceBtn {
    color: red;
    cursor: pointer;
    font-size: 1.2em;
}

.addResourceBtn {
    color: green;
    cursor: pointer;
    font-size: 1.2em;
    margin-left: 10px;
}