#calendar.calendarcontainer {
    background-color: transparent;
    display: flex;
    justify-content: left;
    align-items: top;
    z-index: 99;
}

.home #calendar.calendarcontainer {
    margin-top: 24px;
}

/* Font Awesome */
#calendar.calendarcontainer .far, .calendarcontainer .fa {
    color: black;
}

/* alle Button Elemente, auch die einzelnen Tage, das Info-Icon in der Overview, ... */
#calendar.calendarcontainer button {
    float: right;
    margin: 0; /* überschreibt die BeTheme Definition */
    padding: 0;    /* überschreibt die BeTheme Definition */
    box-shadow: none;
    background-color: transparent;
}

/* manche Buttons - Kalender Icon, prev/next */
#calendar .btn-cal {
    font-size: 1.5rem;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding-right: 0.5rem;
}

#calendar .btn-month {
    padding-top: 25rem;
}
#calendar .btn-week {
    padding-top: 5rem;
}

#calendar .calendar {
    /* width: 100%; */    
    background-color: white;
}

#calendar .month {
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 0 30px;
    text-align: center;
}

#calendar .month h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;      
}

#calendar .fa-calendar-minus, #calendar .fa-calendar-alt {
    margin-bottom: 12px;
}

/* die Class btn kommt über die calendar.js, das sind die einzelnen Tage im cal-wrapper vom Kalender */
#calendar .btn {
    color: black !important;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
}

#calendar div button.btn {
    font-size: 0.8rem;
}

#calendar .weekdays {
    width: 100%;
    height: 33px; /* 5rem; */
    display: flex;
    align-items: center;
    border-top: 1px solid black;
    font-weight: bold;
}

#calendar .weekdays div {
    font-size: 0.9rem;
    letter-spacing: 0.1rem;      
    width: 40px; /* calc(18rem / 7) */
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calendar .weekdays button {
    width: 5rem;
                                /* padding-top: 25rem; */
}

#calendar .days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 5rem;
    padding-right: 5rem;
}

#calendar #days_week, #calendar #days_month {
                    /* justify-content: center; */
}

#calendar .days div {
    font-size: 1.4rem; 
    width: 40px; /* calc(18rem / 7) */
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

#calendar .days div:hover {
    background-color: #74c270;
                                        /* cursor: pointer; */
}

#calendar .today, #calendar .current_week {
    background-color: #74c270 !important;
    color: white !important;
}
#calendar .today .btn {    
    color: white !important;
}

#calendar .current_week button {
    color: white;
}

#calendar .today button {
    color: white;
}
#calendar .currentday {
    border: 1px #74c270 solid !important;
}

#calendar .not_week {
    display: none;
}

/*#################################################*/

#calendar .overview {
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    /* text-align: center; */
    border-top: 1px solid black;
    /* padding: 3rem 1.5rem 0 1.5rem; */
}

#calendar .overview a {
    color: black;
    text-decoration: none;
}

/*#################################################*/

#calendar .collapsible {
    text-align: center;
    pointer-events: none;
    cursor: pointer;
    width: 100%;
                        /* background-color: #F9F9F9 !important; */
    padding-top: 20px !important;
}
#calendar .collapsible h2 {
    font-size: 22px !important;
    font-weight: 400 !important;  
    margin-bottom: 0;  
}
.calendar-sendungen-desktop #calendar .fa-caret-down {
    display: none;
}
#calendar .overview table {
    width: 100%;
    padding: 15px;
    border: none;
}
table tr:first-child td {
    box-shadow: none;
    border-top: 1px black solid !important;
}
#calendar .overview th, #calendar .overview td {
    font-size: 13px;
    padding: 5px 10px 5px 10px;
    border: none;
    border-bottom: 1px solid black;    
}
table tr:nth-child(2n) td {
    background: unset;
}
#calendar .overview td {
    text-align: left;
}
#calendar .overview .overview_table .sendungsbeginn {
    padding: 0 0 0 6px;
}
#calendar .overview .overview_table .sendungsende {
    padding: 0;
} 
#calendar .overview .overview_table .sendung {        
    line-height: 16px;
}
#calendar .aktuellesendung {
    background-color: #F9F9F9;
}
#calendar .aktuellesendung .sendung .sendungstitel::before {     
    content: url("equalizer_nowplaying.gif") "  ";
    white-space: pre; 
}
#calendar .overview tr:hover {
    background-color: #74c270;
}

#calendar .overview td.notclickable:hover {
    color: white;
} 
#calendar .overview td.notclickable {
    color: #74c270 !important;
}

#calendar .overview .music a:hover {
    color: white !important;
} 
#calendar .overview .music a{
    color: #74c270 !important;
}

/* 2 Buttons im Overview Bereich */
#calendar .btn .fa-info-circle {
    padding-right: 6px;
    background-color: transparent;
}
#calendar .btn .fa-volume-up {
    padding-right: 2px;
    background-color: transparent;
}

/*#################################################*/

@media screen and (max-width: 479px) {
  #calendar .content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
}

/* über das BeTheme Backend ist für mobile eine Klasse vergeben, beim einbindenden BeTheme Item */
.calendar-sendungen-mobile #calendar {
                                /* border: 1px orange solid; */
}


.calendar-sendungen-mobile #calendar.calendarcontainer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.calendar-sendungen-mobile #calendar .month {
    padding: 0 13px 0 6px;
}

.calendar-sendungen-mobile #calendar .month h2 {
    font-size: 14px;
    font-weight: 600;
}

.calendar-sendungen-mobile #calendar .btn-cal {
    font-size: 20px;
}

.calendar-sendungen-mobile #calendar .weekdays button {
    width: 20px;
}

.calendar-sendungen-mobile #calendar .days {
    padding-left: 20px;
    padding-right: 20px;
}

.calendar-sendungen-mobile #calendar .fa-caret-left, .calendar-sendungen-mobile #calendar .fa-caret-right {    
    font-size: 20px;
    font-weight: 600; 
}

.calendar-sendungen-mobile #calendar .collapsible {
    text-align: right;
    padding-top: 8px !important;
    padding-right: 4px;
    pointer-events: unset;
    cursor: unset;    
}
.calendar-sendungen-mobile #calendar h2.programmam {
    font-size: 12px !important;
    margin-bottom: 0;
                                /* border: 1px orange solid; */    
}
.calendar-sendungen-mobile #calendar .fa-caret-down {    
    font-size: 20px;
    font-weight: 600; 
    padding: 0 10px 0 10px;
}

.section_wrapper .column.calendar-sendungen-mobile {
    margin: 0;
}
.calendar-sendungen-mobile.column_sidebar_widget .widget {
    padding-bottom: 0;
}

.calendar-sendungen-mobile #calendar .sendung, .calendar-sendungen-mobile #calendar .sendungsbeginn, .calendar-sendungen-mobile #calendar .sendungsende {
    font-size: 11px;
}

/*#################################################*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    padding-top: 375px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    z-index: 500;
}

.modal p, .modal span {
    font-family: inherit !important;
    line-height: unset !important;
}

/* Modal Content */
.modal-content {
    background-color: white;
    margin: auto;
    padding: 0 50px 50px 50px;
    border: 1px solid #74c270;
    width: 85%;
    position: relative;
    max-height: 450px;
    overflow: auto;
}

.modal h1 {
    position: absolute;
    left: -2px;
    top: 35px;
}

/* The Close Button */
.modal button.close {
    color: #74c270;
    font-size: 28px;
    font-weight: bold;
    line-height: 25px;
    width: 25px;
    position: absolute;
    right: -25px;
    top: 30px;
    box-shadow: none;
    background-color: transparent;
}

.modal .broadcast-sticky-part {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 100px;
    background-color: white;
}

.modal #special {
    padding-bottom: 25px;
}

.modal .broadcast-content {
    padding-top: 25px;
}

.modal .close:hover, .close:focus {
    color: #000;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
/* The Modal (background) */
.modal {
    padding-top: 200px !important; /* Location of the box */
}
/* Modal Content */
  .modal-content {
      padding: 20px;
  }  
  .modal button.close {
      top: -5px;
      right: -30px; 
  }
  
  .modal .broadcast-sticky-part {
      top: -20px;
  }  
}