.carleton-academic-dates * {
    box-sizing: border-box;
}

.carleton-academic-dates .datesListing {
    overflow:auto;
    margin-bottom: 40px;
}

/* a container for one specific date */
.carleton-academic-dates .academic-dates-container {
    clear:both; 
    display:block; 
    padding-bottom:20px; 
    padding-top: 20px;
    border-top: 1px solid #efefef;
}

/*left column*/
.carleton-academic-dates .childLeft {
    float:left;
    width:30%;

}

/*make text inside left column bold*/
.carleton-academic-dates .childLeft span {
    font-weight: bold;
}

/*right column*/
.carleton-academic-dates .childRight {
    float:right;
    width:70%;
    margin-top:0em;
}

/*event description if it has a modal window*/
.carleton-academic-dates .eventListModal{
    margin-bottom:1em;

}

/*force the color to be crimson inside the event description that has a modal window */
.carleton-academic-dates .eventListModal a {
    color: crimson;
    font-weight: bold;
    text-decoration: underline !important;
}



/*event description if it doesn't have a modal window*/
.carleton-academic-dates .eventList{
    margin-bottom:1em;
}

/*force the color to be crimson inside the container that all the events with descriptions are in if not specified*/


/* The Modal (background) */
.carleton-academic-dates .modal-bg {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 500; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal Content */
.carleton-academic-dates .modal-content {
background-color: #fefefe;
margin: 12% auto; /* 5% from the top and centered */
padding-top: 25px;
padding-left: 40px;
padding-bottom: 60px;
padding-right: 40px;
border: 1px solid #888;
width: 35%; /* Could be more or less, depending on screen size */
border-radius: 8px;
height:50%;
position:relative;
display:flex;
flex-direction: column;
justify-content: space-between;
}


.carleton-academic-dates .modal-content-text {
    overflow:auto;
}


.carleton-academic-dates .modal-content-text::-webkit-scrollbar {
width: 12px;
height: 12px;
}

.carleton-academic-dates .modal-content-text::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 8px;
}

.carleton-academic-dates .modal-content-text::-webkit-scrollbar-thumb {
border-radius: 8px;
background: #ccc;  
}

.carleton-academic-dates .modal-content-text::-webkit-scrollbar-thumb:hover {
background: #999;  
}



/*.modal-content:overflow*/

.carleton-academic-dates .modal-content a{
    text-decoration: underline !important;
}




/* The Close Button */
.carleton-academic-dates .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.carleton-academic-dates .close:hover,
.carleton-academic-dates .close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.carleton-academic-dates .closeButton {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 3px;
    border: 1px solid grey;
    color: black;
    text-decoration: none;
    position: absolute;
    bottom: 20px;
}

.carleton-academic-dates .closeButton:hover,
.carleton-academic-dates .closeButton:focus {
border: 1px solid black;
background-color: rgb(240, 240, 240);
cursor: pointer;
}


/* when mobile */
@media screen and (max-width: 900px) {
    .carleton-academic-dates .modal-content {
        width: 90%; /* Could be more or less, depending on screen size */
        height:60%;
        padding-right:30px;
        margin: 30% auto;
        }

    .carleton-academic-dates .childRight,
    .carleton-academic-dates .childLeft {
        width:100%;
    }

    .carleton-academic-dates ul {
        padding-left: 10px !important;
    }
}

@media screen and (max-width: 500px) {
    .carleton-academic-dates .modal-content {
        margin: 50% auto;
    }
}