﻿.table-wrapper {
    /*width: 49% !important;*/
    height: 150px  !important;
    height: 10%  !important;
    overflow: hidden  !important;
    /*flex: 0 0 50% !important;*/
    /*max-width: 50% !important;*/
}

    .table-wrapper > th {
        text-align: center  !important;
        line-height: 1.1em  !important;
        font-size: 15px  !important;
        color: #222  !important;
        padding-bottom: 0.7em  !important;
        border-bottom: 1px solid #eee  !important;
    }

.navigation-button {
    width: 38px  !important;
    padding: 0  !important;
    padding-bottom: 5em  !important;
}

.button-right {
    position: absolute  !important;
    /* width: 60px !important; */
    /* height: 60px !important; */
    /* bottom: 40px !important; */
    right: 50%  !important;
    /* background-color: #0C9 !important; */
    /* color: #FFF !important; */
    /* border-radius: 50px !important; */
    text-align: center  !important;
    /* box-shadow: 2px 2px 3px #999 !important; */
}

.navigation-right {
    float: right  !important;
    position: absolute  !important;
    top: 65%  !important;
    z-index: 1  !important;
    margin-left: 90%  !important;
}

.navigation-left {
    float: left  !important;
    position: absolute  !important;
    top: 65%  !important;
    z-index: 1 !important;
    margin-left: -20px !important;
}

.hour-btn {
    padding: 8px  !important;
    cursor: pointer  !important;
}

.timeslot {
    margin-top: 5px !important;
}

.cursor-pointer {
    cursor: pointer  !important;
}

.right {
    float: right !important;
    max-width: 10%  !important;
    /*top: 9% !important;
                            position: relative !important;*/
}

.left {
    float: left !important;
    max-width: 10%  !important;
    /*top: 9% !important;
                            position: relative !important;*/
}

.appointments-container {
    overflow-y: scroll !important;
    height: 100% !important;
    width: 50% !important;
    float: right !important;
    margin: 0px auto !important;
    display: inline-block !important;
    padding: 0px !important;
    border-bottom-right-radius: 3px !important;
    border-top-right-radius: 3px !important;
    padding: 0 !important;
}

.calendar-container {
    position: relative !important;
    margin: 0 auto !important;
    height: 100% !important;
    width: 50% !important;
    background: #fff !important;
    font: 13px Helvetica, Arial, san-serif !important;
    display: inline-block !important;
    padding: 20px !important;
    float: left !important;
}

.calendar {
    width: 100% !important;
    padding: 0 !important;
}

.calendar-header {
    background: #fff !important;
    height: 40px !important;
    text-align: center !important;
    position: relative !important;
    color: #fff !important;
    border-top-left-radius: 3px !important;
    margin-top: 20px !important;
}

.days-table, .dates-table, .months-table, .hour-slots-table {
    border-collapse: separate !important;
    text-align: center !important;
}

.time-slot-container {
    overflow-x: scroll !important;
}

.card-header > .control-right {
    float: right !important;
    margin-right: -.625rem !important;
}

*, ::after, ::before {
    box-sizing: border-box !important;
}

.pagination-month .page-item:first-child .page-link, .pagination-month .page-item:last-child .page-link {
    height: 100% !important;
    font-size: 1.25rem !important;
}

.pagination-month .page-item .page-link {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    box-shadow: none !important;
}

.starter-container {
    border-radius: 0 0 3px 3px !important;
    background-color: #17a2b8  !important;
}

    .starter-container, .starter-container > a {
        color: #fff  !important;
    }
