/*--Calendar Head------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.calendar-head{
    justify-content:flex-start;
    align-items:center;
    user-select:none;
    display:flex;
   
    width:calc(100% - 2rem);
    padding-right:1rem;
    padding-left:1rem;
    height:3rem;
}
#calendar-today{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    margin-right:0.5rem;
    font-weight:bold;
    border:none;
    height:2rem;
    width:7rem;
    font-size:1.25rem;
}
.calendar-page-arrow{
    transition:ease-in-out 0.1s;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    display:flex;

    color:var(--dark-blue);
    margin-left:0.5rem;
    font-size:1rem;
    aspect-ratio:1;
    height:1rem;
}
.calendar-page-arrow:hover{
    transform:scale(1.1);
}
.calendar-page-arrow:active{
    transform:scale(1);
}
.calendar-date{
    transform:translateY(2rem);
    opacity:0;
    height:0;
    width:0;
}
.calendar-date-display{
    color:var(--dark-blue);
    padding-right:0.25rem;
    padding-left:0.25rem;
    font-size:1rem;
    height:100%;

    justify-content:center;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.calendar-date-display:hover{
    background-color:var(--background-gray-2);
}

/*--Calendar Body------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.calendar-body{
    height:calc((100vh - 5rem) - 4rem);
    width:100%;
}
.calendar{
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    width:calc(100% - 2rem - 2px);
    color:var(--dark-blue);
    overflow:hidden;
    margin-left:1rem;
    height:100%;
  
}
.calendar-row{
    border-bottom:1px solid var(--background-gray-1);
    height:calc((100% - 2rem) / 5);
    width:100%;

    justify-content:flex-start;
    align-items:center;
    display:flex;
}
.calendar-day-row{
    border-bottom:none;
    height:2rem;
}
.calendar-day-title{
    justify-content:center;
    align-items:center;
    display:flex;

    height:100%;
    width:100%;
}
.calendar-day{
    border-left:1px solid var(--background-gray-1);
    width:calc(100% / 7);
    height:100%;

    justify-content:center;
    align-items:flex-start;
    flex-direction:column;
    display:flex;
}
.day-display{
    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1rem;
    height:1.5rem;
    width:100%;
}
.day-display-unfocus{
    color:var(--background-gray-3)
}
.calendar-today{
    background-color:var(--accent-blue-1);
    color:var(--background-white);
    border-radius:100%;
    aspect-ratio:1;
    width:1.5rem;

    justify-content:center;
    align-items:center;
    display:flex;
}
.event-display{
    justify-content:flex-start;
    align-items:flex-start;
    flex-direction:column;
    display:flex;

    height:calc(100% - 1.5rem);
    width:100%;

    overflow-x:hidden;
    overflow-y:auto;
}
.calendar-event{
    border-radius:var(--border-radius-1);
    color:var(--background-white);
    width:calc(100% - 1.2rem);
    margin-top:0.25rem;
    margin-left:0.1rem;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:0.75rem;
    height:1rem;
    cursor:pointer;
}

/*--Calendar Event-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.calendar-event-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%);
    position:absolute;
    overflow:hidden;
    display:none;
    height:12rem;
    width:35rem;
    left:0px;
    top:0px;
    max-width:calc(100% - 1rem);
}
.calendar-event-window-head{
    background-color:var(--accent-blue-1);
    width:calc(100% - 1rem);
    padding-right:0.5rem;
    padding-left:0.5rem;
    user-select:none;
    height:2rem;

    justify-content:flex-end;
    align-items:center;
    display:flex;
}
.calendar-event-head-button{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    cursor:pointer;

    transition:ease-in-out 0.05s;
    transform:scale(1);
    margin-left:1rem;
    aspect-ratio:1;
    width:1rem;
}
.calendar-event-head-button:hover{
    transform:scale(1.15);
}
.calendar-event-head-button:active{
    transform:scale(1);
}
#calendar-event-edit{
    background-image:url("../assets/icons/edit.png");
}
#calendar-event-delete{
    background-image:url("../assets/icons/delete.png");
}
#calendar-event-close{
    background-image:url("../assets/icons/x.png");
    background-size:80%;
    margin-left:2rem;
}
.calendar-event-window-body{
    height:calc(100% - 2rem);
    width:100%;

    justify-content:flex-start;
    align-items:flex-start;
    display:flex;
}
.calendar-event-color-holder{
    position:relative;
    height:100%;
    width:20%;
}
.calendar-event-color{
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-1);
    transform:translate(-50%);
    position:absolute;
    aspect-ratio:1;
    width:2.5rem;
    left:50%;
    top:20%;
}
.calendar-event-data{
    color:var(--dark-blue);
    width:calc(80% - 1rem);
    height:100%;
}
.calendar-event-data-title{
    justify-content:flex-start;
    align-items:center;
    font-weight:bold;
    display:flex;

    margin-top:0.5rem;
    font-size:1.5rem;
    height:2.5rem;
    width:100%;
}
.calendar-event-data-date{
    justify-content:flex-start;
    align-items:center;
    display:flex;
    
    height:2.5rem;
    width:100%;
}
.calendar-event-data-desc{
    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:wrap;
    display:flex;
    
    height:3.5rem;
    width:100%;
}

/*--Edit Calendar Event------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.edit-calendar-event-window{
    box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
    background-color:var(--background-white);
    border:1px solid var(--border-gray-1);
    border-radius:var(--border-radius-2);
    transform:translate(-50%, -50%);
    color:var(--dark-blue);
    position:absolute;
    padding:1rem;
    left:50%;
    top:50%;
}
.edit-calendar-event-window-head{
    justify-content:center;
    align-items:center;
    font-weight:bold;
    display:flex;

    padding-bottom:1rem;
    font-size:2rem;
    height:3rem;
}

.edit-calendar-event-window-body{
    padding-bottom:5rem;
    width:20rem;
}
.edit-calendar-event-window-row{
    margin-bottom:1rem;
    width:100%;
}
.edit-calendar-event-window-row-titile{
    margin-bottom:0.25rem;
    font-size:1rem;
}
.edit-calendar-event-text{
    width:calc(100% - 0.5rem);
}

.edit-calendar-event-window-foot{
    justify-content:space-evenly;
    align-items:center;
    display:flex;
}