body {
    /* background-image: url("cobblestone-bg-large.jpg"); */
    background-color: #999;
    overflow: hidden;
}

/* CSS for the popup windows */
.popup {
display: none;
background-color: #ccc;
position: absolute;
overflow: hidden;
width: auto;
height: auto;
z-index: 1; /* Set a z-index for the popups to ensure they are clickable */
}

/* CSS for the header of the popups */
.popup-header {
background-color: #36454F;
font-size: 14px;
color: #fff;
padding: 5px;
cursor: grab;
}

/* CSS for the footer with toggle buttons */
.popup-footer {
position: fixed;
bottom: 10px;
left: 10px;
width: 100%;
}

/* CSS for the individual popup buttons */
.popup-button {
background-color: #007bff;
color: #fff;
padding: 5px 10px;
border: none;
cursor: pointer;
margin-right: 10px;
}

.popup-title-button {
background-color: #005A9C;
color: #fff;
padding: 5px 10px;
border: none;
cursor: pointer;
margin-right: 10px;
}

.resizer {

display:flex; margin:0; padding:0; resize:both; overflow:hidden;
width: 853.333px;
height: 480px;

}
.resizer > .resized {

flex-grow:1; margin:0; padding:0; border:0
}


@media (max-width: 1444px) {
  .resizer {
display:flex; margin:0; padding:0; resize:both; overflow:hidden;
width: 568.319px;
height: 319.68px;
  }
}




/* Styling for the overlay */
.popup-links1 {
display: none;
position: fixed;
left: 0;
bottom: 50px;
width: 100%;
padding-top: 5px;
height: 250px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
overflow-x: hidden;
overflow-y: auto;
}

/* Styling for the overlay */
.popup-links2 {
display: none;
position: fixed;
left: 0;
bottom: 50px;
width: 100%;
padding-top: 5px;
height: 250px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
overflow-x: hidden;
overflow-y: auto;
}

.popup-links3 {
display: none;
position: fixed;
left: 0;
bottom: 50px;
width: 100%;
padding-top: 5px;
height: 250px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
overflow-x: hidden;
overflow-y: auto;
}

.popup-links4 {
display: none;
position: fixed;
left: 0;
bottom: 50px;
width: 100%;
padding-top: 5px;
height: 250px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
overflow-x: hidden;
overflow-y: auto;
}

/* Styling for the popup content */
.popup-content1 {
align-items: center;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}


/* Styling for the popup content */
.popup-content2 {
align-items: center;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

.popup-content3 {
align-items: center;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

.popup-content4 {
align-items: center;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}

.close-popup {
margin-top: 10px;
padding: 5px 10px;
background-color: #2b2a33;
color: #fbfbfe;
border: none;
cursor: pointer;
}
.scrollable-container4 {
display: flex;
}

.scroll-arrow4 {
cursor: pointer;
color: white;
background-color: #5A5A5A;
min-height: 150px;
height: 150px;
font-size: 20px;
margin-top: 20px;
text-align: center;
position: fixed;
z-index: 2;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.scrollable-div4 {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
margin-right: 10px;
margin-left: 10px;
}

.scrollable-content4 {
display: flex;
word-wrap: break-word;
padding: 5px 10px;

}

.scrollable-container3 {
display: flex;
}

.scroll-arrow3 {
cursor: pointer;
color: white;
background-color: #5A5A5A;
min-height: 150px;
height: 150px;
font-size: 20px;
margin-top: 20px;
text-align: center;
position: fixed;
z-index: 2;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.scrollable-div3 {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
margin-right: 10px;
margin-left: 10px;
}

.scrollable-content3 {
display: flex;
word-wrap: break-word;
padding: 5px 10px;

}

.scrollable-container2 {
display: flex;
}

.scroll-arrow2 {
cursor: pointer;
color: white;
background-color: #5A5A5A;
min-height: 150px;
height: 150px;
font-size: 20px;
margin-top: 20px;
text-align: center;
position: fixed;
z-index: 2;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}

.scrollable-div2 {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
margin-right: 10px;
margin-left: 10px;
}

.scrollable-content2 {
display: flex;
word-wrap: break-word;
padding: 5px 10px;

}

.scrollable-container1 {
display: flex;

}

.scroll-arrow1 {
cursor: pointer;
color: white;
background-color: #5A5A5A;
min-height: 150px;
height: 150px;
font-size: 20px;
margin-top: 20px;
text-align: center;
position: fixed;
z-index: 2;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}


.scroll-arrow-left {
    background-image: url('caret-left.svg');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
}

.scroll-arrow-right {
    background-image: url('caret-right.svg');
    background-size: 48px 48px;
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-right: 5px;
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
}

.scrollable-div1 {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}

.scrollable-content1 {
display: flex;
word-wrap: break-word;
padding: 5px 10px;
}


a.channel-link, a.channel-link:visited {

background-color: #4169E1;

color: #E0FFFF;
padding: 5px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 8px;
}


.event {
    min-width: 255px;
    max-width: 255px;
}


.event-info-bg {
background-color: #6667AB;

padding: 10px;
margin-bottom: 5px;
border-radius: 6px;
}




.event-bg {
   /*background-color: #026a20;*/
    min-height: 170px;
    padding: 10px;
    /*border: 1px solid #5C4033;*/
    margin-left: 5px;
    margin-right: 5px;
}

.event-info {
padding-bottom: 4px;
color: #e6e6fa;
}

.event-time {
padding: 2px 4px;
margin: 2px;
float: right;
font-size: 14px;
color: lightblue;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.float-right {
float: right;
}

.float-left {
float: left;
}

a.event-link, a.event-link:visited {
background-color: #008080;
color: #AFEEEE;
padding: 5px 10px;
margin: 2px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 8px;
}


a.tv-link, a.tv-link:visited {
background-color: #008080;
color: #AFEEEE;
padding: 10px 20px;
margin: 5px;
text-decoration: none;
border-radius: 12px;
white-space: nowrap;

}

.tv-link-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 5px;
  margin-right: 50px;
margin-left: 50px;
  height: 50px;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  display: none;
  z-index: 1000;
  top: 40%;
  left: 40%;
  position: absolute;
  transform: translate(-35%, -35%);
}

@media (max-width: 1444px) {
   .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  display: none;
  z-index: 1000;
  top: 40%;
  left: 40%;
  position: absolute;
  transform: translate(-35%, -35%);
}

}



/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}