/* html {
    height: 100%;
    width: 100%;
    margin: 0px;
    overflow:auto;
} */
/* body {
    height: 90%;
    width: 90%;
    padding: 5%;
  padding-bottom: 0px;
    margin: 0px;
    display: flexbox;
    background-color: rgb(244, 244, 244);
} */

.eventlist{
    width: 98%;
    height: 98%;
    padding: 1%;
    display: flex;
    flex-direction: column;
}
#displayEvents{
    overflow: hidden auto; 
    flex-grow: 1;
    margin: 2%
}
/* .element-entry{
    width: 100%;
} */
#event-entry {
    padding: 1px 2.5% 1px 2.5%;
    position: relative;
    border-radius: 5px;
    width: 95%;
    height: 30px;
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
}

#eventTitle {
    margin: 0 0.5px 0 0;
    padding: 0;
}

#entry-title {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    vertical-align: middle;
    align-content: center;
}


#time {
    flex-shrink: 0;
    text-align: right;
    align-content: center;
    font-size: small;
}

.eventlist > #add-event {
    height: 30px;
    margin: 2%;
    flex-shrink: 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background: rgb(233,233,233);
}
  
.eventlist > #add-event:hover {
    background-color: rgb(175,175,175);
}
  
.eventlist > #add-event:active {
    background-color: rgb(75,75,75);
}

.Front_End, .Documentation, .Medium_Priority{
    background-color: #ffb3ba;
}

.Back_End, .Design, .Low_Priority {
    background-color: #ffdfba;
}
.Meeting, .Testing  {
    background-color: #ffffba;
}
.Planning, .High_Priority {
    background-color: #bcffba;
}


.Front_End-passed, .Documentation-passed, .Medium_Priority-passed{
    background-color: #ffb3bb50;
    color: rgba(0, 0, 0, 0.308);
    text-decoration: line-through;
}

.Back_End-passed, .Design-passed, .Low_Priority-passed {
    background-color: #ffdfba50 ;
    color: rgba(0, 0, 0, 0.308);
    text-decoration: line-through;
}
.Meeting-passed, .Testing-passed  {
    background-color: #ffffba50;
    color: rgba(0, 0, 0, 0.308);
    text-decoration: line-through;
}
.Planning-passed, .High_Priority-passed {
    background-color: #bcffba50;
    color: rgba(0, 0, 0, 0.308);
    text-decoration: line-through;
}


/*
 All adjustments on modal can be done on the same block since display is none
 nothing will be shown until display is not none (ie block)
*/
#modal_add_event, .modal_check_current_event {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position to stay in place when scrolling */
    z-index: 1000; /* Ensure modal is on top of other content */
    left: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    height: 40%; /* 80% of the viewport height */
    width: 50%; /* 80% of the viewport width */
    transform: translate(-50%, -50%); /* Center the modal exactly */
    overflow: auto; /* Allow scrolling if content exceeds modal size */
    background-color: #fefefe; /* Light background color */
    padding: 5px; /* Padding inside the modal */
    border: 1px solid #888; /* Border around the modal */
    flex-direction: column;
}

#modal_add_event > h5, .modal_check_current_event > h5 {
    margin: 0;
    text-align: center;
}

#modal_add_event > form, .modal_check_current_event > form {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    /*
     Splits out Each input section bottom two values are adjusted to give more to the
     information section
    */
    grid-template-rows: repeat(4,calc(100%/6)) calc((100%/6) * 1.2) calc((100%/6) * 0.3);
    overflow: hidden;
}

#modal_add_event > form > article,
.modal_check_current_event > form > article {
  display: grid;
  /* Each input section will be a grid itself to spread their parts correctly */
}

#input-time > input[type="time"]{
    /* Make Time appear on left, without this time will be justified right */
    justify-content: left;
}

#input-info > #info {
    /* User cannot resize the box, always same width and height */
    resize: none;
}

#input-accept {
    /* NEED TO CHANGE VALUE OF HEIGHT */
    margin-top: 2px;
    height: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    /* Make Cancel left half and accept right half */
}
#edit-accept {
    /* NEED TO CHANGE VALUE OF HEIGHT */
    margin-top: 2px;
    height: 30px;
    width: 100%;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    /* Make Cancel left half and accept right half */
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}