/* LAST UPDATED: 06.26.2024 - SM */
/* 06.24.2024 - Grays were updated sparingly, re-assess colors after calendar page is live */

/* NOTE: The calendar app was built by T4 and has it's own separate CSS file - it's in the originals folder from Phase 1 */
.calendar-content {
    border-radius: 6px;
    padding: 8px 32px 8px;
    overflow: hidden;
}

.calendar-form {
    margin-bottom: 10px;
    overflow: hidden;
}

/* NOTE: So far, the panel class doesn't seem to be used for things like accordions, so it may only belong with the calendar CSS */
.calendar-content .panel {
    background: none;
}

.panel {
    border-radius: 0.5rem;
    margin-bottom: 0;
    margin-top: 0;
    overflow: hidden;
}

.calendar-form legend {
    display: none;
}

legend {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: inherit;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

.calendar-form .cal-filter-headers {
    margin-bottom: 15px;
    margin-top: 30px;
    text-align: left;
}

.calendar-filter {
    width: 300px;
}

.calendar-filter .category_group_checkboxes.category {
    height: auto;
}

.category_group_checkboxes:first-of-type {
    margin: 0 0 11px 0;
}

.calendar-filter.category_group_checkboxes {
    line-height: 1em;
}

.calendar-filter .category_group_checkboxes .category-heading {
    background-size: 7px;
    color: var(--primary-neutral-dark);
    display: block;
    font-family: inherit;
    font-size: var(--base-font-size);
    line-height: 2rem;
    padding-right: 15px;
}

/* The calendar page shares some classes with the directory page, like .select-container-directory */
.select-container-cal {
    width: 100%;
}

.select-container-cal .select-indicator::after {
    left: 40%;
}

.select-container-cal .select-indicator::before {
    left: 61%;
}

.category_group_checkboxes input[type="checkbox"] {
    margin: 0 10px 0 0;
}

.search-within {
    margin-top: 10px;
    padding-bottom: 10px;
}

.search-within .button {
    font-size: var(--med-font-size);
    margin: 0 0 0 10px;
}

.calendar-form input.hasPlaceholder[type="text"] {
    border: 1px solid var(--secondary-neutral-dark-gray);
    background: var(--primary-neutral-light);
}

.calendar-form .search {
    font-size: var(--med-font-size);
    padding-left: 5px;
}

.calendar-content #view-switchers {
    clear: both;
    text-align: center;
    padding: 0;
}

.view-switchers .ajax-loadin-link::before,
.view-switchers span::before {
    bottom: 100%;
    content: "";
    height: 60px;
    left: 5px;
    position: absolute;
    width: 60px;
}

.cal-filter-headers {
    margin-bottom: 15px;
    text-align: left;
}

.cal-grid-detail-switch {
    border: 1px solid var(--primary-neutral-gray);
    border-radius: 6px;
    margin-bottom: 15px;
    min-width: 300px;
}

.cal-grid-detail-switch-item {
    padding: 0 10px;
    width: 100%;
}

.cal-grid-detail-switch-item:first-of-type {
    border-right: 1px solid var(--primary-neutral-gray);
}

.cal-grid-detail-switch-item.active {
    background: var(--primary-color);
    color: var(--primary-neutral-light);
}

/* The actual calendar */
#calendar_page {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 16px 8px;
}

.schedule-section.month-view-table,
.schedule-section.week-view-table,
.schedule-section.year-view-table {
    background: none;
    border: none;
    padding: 20px 0 60px;
}

.month-view-table * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.month-view-table>table thead,
.month-table tbody,
.month-table tr {
    width: 100%;
}

.month-view-table .calendar-box-header {
    height: auto;
}

.month-view-table>table>thead .calendar-box-header th {
    font-size: 40px;
    padding: 0;
}

.month-view-table>table>thead .calendar-box-day-headings {
    display: table-row;
}

.month-view-table>table>thead .calendar-box-day-headings th {
    font-size: 22px;
    padding: 5px 0;
}

#calendar_box .calendar-box-day-headings th,
.month-view-table .calendar-box-day-headings th {
    font-weight: normal;
    text-align: center;
}

.month-view-table>table>tbody>tr>td {
    border: 1px solid var(--secondary-neutral-light-gray);
    max-width: 167px;
    padding: 0;
}

#calendar_box table tbody tr,
.month-view-table table tbody tr {
    background-color: var(--primary-neutral-light);
}

.month-view-table>table .events-per-day {
    min-height: 83px;
    position: relative;
}

.cal-table {
    border: none;
    display: table;
    font-family: var(--primary-font-family);
    font-size: 0.9rem;
    font-weight: normal;
    margin-bottom: 30px;
    overflow-x: auto;
    position: relative;
    width: 100%;
}

.cal-table .calendar-box-header {
    background: var(--primary-dark);
    color: var(--primary-neutral-light);
}

#pbc_prev_month,
#pbc_next_month {
    position: relative;
    /*! width: 25%; */
}

#calendar_box .calendar-box-day-headings,
[class*="view-table"] .calendar-box-day-headings {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-neutral-light);
    height: 21px;
}

#calendar_box .calendar-box-header th,
[class*="view-table"] .calendar-box-header th,
[class*="-view-table"] .calendar-box-day-headings th {
    text-align: center;
    vertical-align: middle;
}

[class*="view-table"]>table>thead>tr>th,
.month-view-table>table>tbody>tr>td {
    width: 14.28571428571429%;
}

[class*="view-table"]>table>tbody>tr>td {
    text-align: center;
}

#calendar_box a,
.month-view-table a {
    display: inline-block;
    text-decoration: none;
}

#calendar_box .thismonth,
.month-view-table .thismonth {
    text-align: center;
}

/* [Katey] Removing rotate and transparent color so that content shows properly with new layout - original styles copied below for reference */
/*.cal-table .calendar-box-header th#pbc_prev_month a {
    float: left;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.cal-table .calendar-box-header th a {
    border: 1px solid var(--primary-neutral-light);
    border-radius: 5em;
    color: transparent;
    display: block;
    height: 1.0em;
    margin: 0 15px;
    position: relative;
    width: 1.0em;
}

.cal-table .calendar-box-header th a::after,
.cal-table .calendar-box-header th a::before {
    background: var(--primary-neutral-light);
    border-radius: 0.1em;
    content: "";
    left: 10px;
    position: absolute;
    top: 10px;
}
*/

.cal-table .calendar-box-header th#pbc_prev_month a {
    float: left;
    text-indent: -5px;
}

.cal-table .calendar-box-header th a {
	border: 1px solid var(--primary-neutral-light);
    border-radius: 5em;
    color: var(--primary-neutral-light);
    height: 1.3em;
    margin: 15px;
    position: relative;
    width: 1.3em;
    line-height: 1.3em;
    text-decoration: none;
}

.cal-table .calendar-box-header th a::after,
.cal-table .calendar-box-header th a::before {
    background: var(--primary-neutral-light);
    border-radius: 0.1em;
    left: 10px;
    position: absolute;
    top: 10px;
}

/*.cal-table .calendar-box-header th a::before {
    height: 50%;
    width: 0.1em;
}*/

.cal-table thead th {
    border: none;
}

#calendar_box,
.calendar-box-header {
    color: var(--primary-neutral-light);
}

.cal-table .calendar-box-header th#pbc_next_month a {
    float: right;
/*    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  */
}

.cal-table tbody tr:nth-child(2n+1) {
    background: var(--primary-neutral-light);
}

.cal-table .calendar-dayrow td {
    height: 8.5rem;
    min-height: 8.5rem;
    vertical-align: top;
    width: 14.28571%;
    min-width: 14.28571%;
}

.cal-table .calendar-dayrow td span {
    background: none;
    color: var(--primary-dark);
    display: block;
    font-size: 0.9em;
    padding: 0.1rem 0.5rem 0;
    text-align: center;
}

.cal-table .calendar-dayrow td .hasEvents,
.cal-table .calendar-dayrow td .hasEvents span {
    color: var(--primary-accent);
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info {
    background-color: var(--primary-neutral-light);
    border: 1px solid var(--secondary-neutral-light-gray);
    border-radius: 6px;
    color: var(--primary-neutral-dark);
    display: none;
    font-size: 1em;
    left: 0;
    margin-left: 166px;
    margin-top: 0;
    min-height: 100px;
    opacity: 0;
    padding: 15px;
    position: absolute;
    text-align: left;
    top: 0;
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    width: 350px;
    z-index: 5;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info:after,
#calendar_page table tbody tr.calendar-dayrow .tooltip-info:before {
    border: solid transparent;
    content: "";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 100%;
    top: 26px;
    width: 0;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info:after {
    border-color: transparent;
    border-left-color: transparent;
    border-right-color: var(--secondary-neutral-light-gray);
    border-width: 9px;
    margin-top: -6px;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: transparent;
    border-right-color: var(--primary-neutral-light);
    border-width: 8px;
    margin-top: -5px;
    z-index: 1;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info .h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info div.info {
    font-size: var(--med-font-size);
    margin-bottom: 15px;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info div.info p {
    color: var(--primary-neutral-dark);
    font-size: inherit;
    line-height: 20px;
    margin: 0;
    padding-bottom: 0;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info div.short-desc {
    font-size: var(--med-font-size);
    line-height: 20px;
}

#calendar_page table tbody tr.calendar-dayrow .tooltip-info.active {
    border: 1px solid var(--secondary-neutral-light-gray);
    -moz-box-shadow: 5px 6px 17px var(--secondary-neutral-dark-gray);
    -webkit-box-shadow: 5px 6px 17px var(--secondary-neutral-dark-gray);
    box-shadow: 5px 6px 17px var(--secondary-neutral-dark-gray);
    display: block;
}

.cal-table .outperiodday {
    opacity: 0.3;
}

.event-day-date {
    background-color: var(--secondary-light) !important;
    border-bottom: 1px solid var(--secondary-neutral-light-gray);
    min-height: 40px;
}

.events-per-day {
    width: 100%;
}

.events-per-day .event {
    font-weight: normal;
    line-height: 23px;
}

/* For the modals that pop out when a calendar event link is clicked on */
.overlay_content {
    margin-left: -250px;
}

.overlay_content--calendar {
    background: var(--primary-neutral-light);
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: block;
    padding-bottom: 35px;
    position: fixed;
    top: 20%;
    z-index: 99999;
}

.overlay_content--calendar .close_button {
    right: 1%;
    top: 12px;
}

div.close_button {
    background: url("https://www.evms.edu/media/evms_public/content/style_assets/images/responsiveimages/modalCloseBtn.png") no-repeat top right;
    background-size: contain;
    cursor: pointer;
    float: right;
    height: 21px;
    margin: 7px 8px;
    text-indent: -9000em;
    width: 21px;
}

.overlay_content--content .overlay_contents {
    max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 25px 9 15px;
}

.overflow_content--calendar .right.button {
    visibility: hidden;
}

.overlay_content--calendar .overlay-module .info-box {
    float: left;
    margin: 0 0 0 20px;
    width: 100%;
}

.overlay_content--calendar .overlay-module .info-box .lightbox-calendar-title {
    color: var(--primary-color);
    font-weight: bold;
}

.overlay_content--calendar .overlay-module .info-box .lightbox-calendar-department-category {
    color: var(--primary-color);
}

.overlay_content--calendar .overlay-module .info-box .lightbox-calendar-description-container {
    font-size: var(--base-font-size);
    margin: 10px 0 0 0;
}

.overlay_content--calendar .overlay-module .info-box .lightbox-calendar-description p:last-of-type {
    margin-bottom: 15px;
}

.overlay_content--calendar .overlay-module .info-box .lightbox-calendar-actions a {
    background-color: transparent;
    border: 1px solid var(--primary-accent);
    border-radius: 10px;
    color: var(--primary-accent);
    cursor: pointer;
    display: inline-block;
    font-size: var(--med-font-size);
    font-weight: 600;
    line-height: 1.2;
    margin: 15px 15px 0 0;
    max-width: 14em;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out;
}

.overlay_bottom {
    height: auto;
}

.info-box h2 {
    font-size: 24px;
    line-height: 1.2;
}

/* An h5 shouldn't follow an h2, but here we are. */
.lightbox-calendar-organiser h5 {
    font-size: 20px;
    font-weight: normal;
}

.lightbox-calendar-organiser h5::before {
    content: "Organizer: ";
}

.overlay_content--calendar a {
    color: var(--primary-accent);
}




/***** MEDIA QUERIES *****/
@media screen and (min-width: 576px) {
    .calendar-form .cal-filter-headers {
        margin-top: 15px;
    }

    .cal-grid-detail-switch.grid-switch {
        margin-bottom: 15px;
    }
}

@media screen and (min-width: 768px) {
    .calendar-form .cal-filter-headers {
        margin-top: 0;
    }
}

@media screen and (max-width: 1010px) {

    .schedule-section.month-view-table,
    .schedule-section.week-view-table,
    .schedule-section.year-view-table {
        min-width: 0;
    }
}

@media screen and (max-width: 767px){
  .cal-table .calendar-dayrow td {
  width: 80vw;
  min-width: 80vw;
  min-height: 2.5rem;
  height: 5.5rem;
}
}
@media screen and (max-width:767px){
  .month-view-table table tbody tr {  
      display:flex;
      flex-direction:column;
      
}
    .month-view-table .calendar-box-header {
    height: auto;
    width: 80vw;
        
    display: flex;
    justify-content: space-between;
}
    .month-view-table>table>thead .calendar-box-day-headings {
    display: none;
}
    .cal-table .outperiodday {
    opacity: 0.3;
        display:none;
}
    .month-view-table>table>thead .calendar-box-header th {
    font-size: 20px;
    padding: 0;
}
    #pbc_current_month {
  width: 75%;
  padding-top: 10px;
}
}