html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* --- Navigation Tabs --- */

.nav-tabs.main {
    /*background-color: white;*/
    margin-bottom: 8px;
}

.nav-tabs .nav-title {
    margin-right: 16px;
    align-self: center;
    font-weight: bold;
    margin-left: 8pt;
    white-space: nowrap;
    max-width: 200px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.nav-tabs .nav-link {
    background-color: transparent;
    color: gray;
}

    .nav-tabs .nav-link:hover {
        color: black;
    }

    .nav-tabs .nav-link.active {
        background-color: #f4f6f9;
        border-bottom-color: #f4f6f9;
    }

.nav-tabs.main .nav-item:first-child {
    margin-left: 24px;
}

/* --- Calendard --- */

.calendar-headers {
    width: 100%;
    display: flex;
}

.calendar-header {
    font-size: 14px;
    font-weight: bold;
    border: 1px solid black;
    width: 14.28%;
    padding: 0 4px;
    text-align: center;
}

.calendar-days {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.calendar-day {
    border: 1px solid black;
    width: 14.28%;
    min-height: 100px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

    .calendar-day.empty {
        border: 1px solid transparent;
    }

    .calendar-day .day-number {
        font-size: 16pt;
        font-weight: bold;
        color: grey;
    }



.monitor-email {
    position: relative;
    display: inline-block;
}

    /* Tooltip text */
    .monitor-email .tooltipBody {
        border: 1px solid black;
        background-color: #fff;
        color: black;
        box-shadow: 5px 5px 5px lightblue;
        visibility: hidden;
        width: 400px;
        text-align: left;
        border-radius: 6px;
        padding: 8px;
        /*Postion the tooltip*/
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 50%;
        margin-left: -200px;
        opacity: 0;
        transition: opacity 0.5s;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .monitor-email:hover .tooltipBody {
        visibility: visible;
        opacity: 1;
    }


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

    .calendar-day {
        width: 100%;
        min-height: auto;
    }

        .calendar-day.empty {
            display: none;
        }

    .monitor-email .tooltipBody {
        margin-left: 0;
    }

    .calendar-headers {
        display: none;
    }
}