.icon-btn{
    font-size: 2.0em;
    color: var(--dark-grey);
    text-decoration: none;
    margin-left: 0.2em;
    margin-right: 0.2em;
    cursor: pointer;
}

.icon-info{
    font-size: 2.5em;
    color: var(--dark-grey);
    text-decoration: none;
    margin-left: 0.2em;
    margin-right: 0.2em;
    cursor: help;
}

.icon-btn:hover{
    color: var(--highlight-color);
}

.main-btn {
    display: inline-flex;
    border-radius: 1.0em;
    background: var(--highlight-color-on-white);
    width: fit-content;
    height: 2.8em;
    color: var(--white);
    cursor: pointer;
    margin: 0.5em;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    white-space: nowrap;
}

.main-btn span {
    padding-left: 1.2em;
    padding-right: 1.2em;
    font-size: 1.0em;
    white-space: nowrap;
}

.main-btn:hover {
    background-color: var(--dark-grey);
    color: var(--white);
}

.main-btn-two {
    display: inline-flex;
    border-radius: 1.0em;
    background: var(--highlight-color-on-white);
    width: fit-content;
    height: 2.8em;
    color: var(--white);
    cursor: pointer;
    margin: 0.5em;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    white-space: nowrap;
}

.main-btn-two span {
    padding-left: 1.2em;
    padding-right: 1.2em;
    font-size: 1.0em;
    white-space: nowrap;
}

.main-btn-two:hover {
    background-color: var(--light-grey);
    color: var(--white);
}

.second-btn {
    display: inline-flex;
    border-radius: 1.0em;
    background-color: transparent;
    border: solid var(--dark-grey) 1px;
    width: fit-content;
    height: 2.8em;
    color: var(--dark-grey);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin: 0.5em;
    white-space: nowrap;
}

.second-btn:focus {
    box-shadow: 0 0 0 0.1rem var(--highlight-color-on-white);
    border-color: var(--highlight-color-on-white);
}

.second-btn span {
    padding-left: 1.2em;
    padding-right: 1.2em;
    font-size: 1.0em;
    white-space: nowrap;
}

.second-btn:hover {
    background-color: var(--dark-grey);
    color: var(--white);
}

.admin-account-container{
    padding-left: 70em;
    padding-right: 70em;
    margin-top: 5em;
}

.admin-account-container h1{
    font-size: 3em;
    color: var(--highlight-color);
    margin-bottom: 1em;
    font-family: 'IBrand', sans-serif;
}

.admin-account-container h5{
    font-size: 1.5em;
}

.admin-account-container .input-div{
    margin-bottom: 2em;
}

.admin-account-container input{
    width: 100%;
    font-size: 1.5em;
    border-radius: 0.5em;
    background-color: white;
    border: solid 0.1em var(--inactive-grey);
    padding-left: 1em;
    padding-right: 1em;
}

.admin-account-container button{
    width: 100%;
    height: 2.0em;
    font-size: 1.5em;
    border-radius: 0.5em;
    background-color: var(--dark-grey);
    color: var(--white);
    border: 0;
    cursor: pointer;
    margin-bottom: 5em;
}

.email-notification-container{
    padding-left: 20em;
    padding-right: 20em;
}

.email-notification-container .center{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: center;
    align-items: center;
}

.email-notification-container .center h1{
    color: var(--highlight-color);
    font-size: 4em;
    white-space: pre-line;
    margin: 0;
    margin-bottom: 0.5em;
}

.email-notification-container .center h2{
    color: var(--dark-grey);
    font-size: 3em;
    white-space: pre-line;
    margin: 0;
    margin-bottom: 0.5em;
    margin-top: 3.0em;
}

.email-notification-container .statistic-container{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 30em;
    border-radius: 4em;
    overflow: hidden;
    background-color: var(--mid-white);
    text-align: center;
    align-content: center;
    align-items: center;
}

.email-notification-container .statistic-container .year-chard{
    width: 100%;
    margin-left: 1em;
    margin-right: 1em;
}


.email-notification-container .html-container{
    position: relative;
    width: 100%;
    height: 60em;
    border-radius: 4em;
    background-color: var(--white);
    border: solid 0.1em var(--inactive-grey);
}

.email-notification-container .html-container .html-result{
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    background-color: white;
    border: solid 0.1em var(--inactive-grey);
    border-radius: 4em;
    margin: 0;
    padding: 1.5em;
}

.email-notification-container .html-container .header{
    position: absolute;
    top: 6em;
    left: 4em;
    right: 4em;
    font-size: 1.2em;
    height: 2em;
    padding: 1em;
    border-radius: 1em;
    font-family: 'Open Sans', sans-serif;
    border: solid 0.1em var(--inactive-grey);
    background-color: var(--white);
}

.email-notification-container .html-container textarea{
    position: absolute;
    font-size: 1.2em;
    top: 10em;
    left: 1em;
    right: 1em;
    bottom: 10em;
    max-width: 100%;
    padding: 1em;
    border-radius: 2em;
    font-family: 'Open Sans', sans-serif;
    border: solid 0.1em var(--inactive-grey);
    background-color: var(--white);
}

.email-notification-container .email-send-btn{
    position: absolute;
    background-color: var(--highlight-color);
    width: 10em;
    height: 2.5em;
    padding: 0.5em 1em;
    border-radius: 1em;
    color: var(--white);
    border: 0;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    bottom: 1em;
    right: 2em;
}

.email-notification-container .email-send-btn:hover{
    background-color: var(--dark-grey);
}

.email-notification-container .email-send-directly-select-container{
    display: flex;
    flex-direction: row;
    position: absolute;
    width: fit-content;
    height: 2.5em;
    border-radius: 1em;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    bottom: 4em;
    right: 2em;
    border: solid 0.1em var(--inactive-grey);
    color: var(--inactive-grey);
    gap: 0.5em;
    padding: 0.5em 1em;
}

.email-notification-container .email-send-directly-select-container .email-send-directly-select{
    justify-self: flex-end;
    align-self: center;
    width: 1.5em;
    height: 1.5em;
    
}

.email-notification-container .email-send-date-select{
    position: absolute;
    width: 10em;
    height: 2.5em;
    padding: 0.5em 1em;
    border-radius: 1em;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    bottom: 4em;
    left: 2em;
    border: solid 0.1em var(--inactive-grey);
    color: var(--dark-grey);
}

.email-notification-container .email-send-time-select{
    position: absolute;
    width: 10em;
    height: 2.5em;
    padding: 0.5em 1em;
    border-radius: 1em;
    font-size: 1.5em;
    font-family: 'Open Sans', sans-serif;
    bottom: 1em;
    left: 2em;
    border: solid 0.1em var(--inactive-grey);
    color: var(--dark-grey);
}

.email-notification-container .overview-container{
    position: relative;
    width: 100%;
    height: 30em;
    border-radius: 4em;
    background-color: var(--white);
    border: solid 0.1em var(--inactive-grey);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 2em;
}

.email-notification-container .overview-container .overview-item{
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    text-align: center;
}

.calendar-container{
    padding-left: 20em;
    padding-right: 20em;
}

.calendar-container .center{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-content: center;
    align-items: center;
}

.calendar-container .center h1{
    color: var(--highlight-color);
    font-size: 4em;
    white-space: pre-line;
    margin: 0;
    margin-bottom: 2.0em;
    font-family: 'IBrand', sans-serif;
}

.calendar-container .center h2{
    color: var(--dark-grey);
    font-size: 3em;
    white-space: pre-line;
    margin: 0;
    margin-bottom: 0.5em;
    margin-top: 3.0em;
    font-family: 'IBrand', sans-serif;
}

.calendar-container .statistic-container{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border-radius: 4em;
    overflow: hidden;
    background-color: var(--light-white);
    text-align: center;
    align-content: center;
    align-items: center;
}

.calendar-container .statistic-container .year-chard{
    width: 100%;
    margin-left: 1em;
    margin-right: 1em;
}

.calendar-container .appointment-container{
    border-radius: 4em;
    background-color: var(--light-white);
    width: 100%;
    padding: 2em;
}

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

    .calendar-container{
        padding-left: 1em;
        padding-right: 1em;
    }
}