HTML {
        overflow-x: hidden;
        width: 100vw;
        min-height: 100vh;
        font-size: 1em;
    }
   
    BODY {
        background-color: #eaedf9;
        padding: 0;
        margin: 0;
        text-size-adjust: none;
        overflow-x: hidden;
        width: 100vw;
        min-height: 100vh;
        position: relative;
    }

    DIV, P, SPAN, TD, TH, INPUT {
        font-family: Tahoma, Robot, Verdana, sans-serif;
        text-size-adjust: none;
    }

    LABEL {
        font-family: Tahoma, Robot, Verdana, sans-serif;
        text-size-adjust: none;
        margin: 0px;
        padding: 0px;
    }

    TABLE {
        width: 100%;
        border-spacing: 0px;
    }

    IMG {
        border: 0;
    }
    
    #menu {
        background: rgb(40,76,106);
        background: linear-gradient(0deg, rgba(40,76,106,1) 0%, rgba(55,99,136,1) 100%);
        display: grid;
        grid-template-columns: 100px 100px 1fr 100px;
        grid-column-gap: 20px;
        padding: 30px;
        box-shadow: 0px 5px 15px #000b43;
        position: sticky;
        top: 0;
        z-index: 3;
    }

    .menu_circle {
        width: 100px;
        height: 83px;
        background-color: #f8f8ff;
        color: #284c6a;
        border-radius: 50px;
        box-shadow: 5px 5px 15px #000b4380;
        font-size: 50px;
        text-align: center;
        padding: 17px 0 0 0;
        justify-self: center;
        cursor: pointer;
    }
    
    .menu_headline {
        color: #f8f8ff;
        padding: 17px 0 0 0;
        font-size: 50px;
        font-weight: bold;
        letter-spacing: 0.1em;
    }
    .menu_logo {
        height: 100px !important;
        padding: 0px;
        background-image: url("/img/logo.png");
        background-size: contain;
    }

    .menu_logo > img {
        width: 100%;
        height: 100%;
        border-radius: 50px;
    }

    #menu_container {
        position: absolute;
        top: 160px;
        left: -110vw;
        width: 100%;
        z-index: 3;
    }

    #profile_menu_container {
        position: absolute;
        top: 160px;
        right: -110vw;
        width: 100%;
        z-index: 3;
    }

    .menu_item {
        background-color: #f8f8ff;
        color: #284c6a;
        font-size: 2.5em;
        font-weight: bold;
        padding: 1em ;
        box-shadow: 5px 5px 15px #000b4380;
    }

    .menu_divider {
        border-top: 5px solid #284c6a;

    }

    .menu_item:hover {
        background-color: #eeeefa;
        cursor: pointer;
    }

    .headline {
        color: #284c6a;
        font-weight: bold;
        font-size: 3em;
        padding: 0.6em 1em 0.8em 1em;
        box-shadow: 0px 5px 10px #000b4380;
        background-color: #f8f8ff;
        margin-top: 1em;
    }
    
    .article {
        color: #72777d;
        font-size: 0.8em;
        margin-top: 2em;
        font-weight: normal;
        display: none;
    }

    a {
        color: #284c6a;
        text-decoration: none;
    }

    .headline_icon {
        font-size: 0.8em !important;
    }
    
    .stacked {
        margin-top: 0em !important;
    }

    INPUT.login {
        border: 0px;
        background-color: #f8f8ff;
        font-size: 1em;
        color:#72777d;
    }

    INPUT.penalty {
        font-size: 1em;
        width: 12vw;
        margin: 0px;
        padding: 0.3em;
        border: 0px;
    }

    INPUT.button {
        background-color: #f8f8ff;
        color: #284c6a;
        font-size: 2.5em;
        font-weight: bold;
        padding: 0.4em 0em 0.65em 0em ;
        border-radius: 50px;
        border: 0px;
        box-shadow: 5px 5px 15px #000b4380;
        text-align: center;     
        margin: 1em;
        width: calc(50% - 30px);   
    }

    INPUT:focus {
        outline: none;
    }

    .content_container {
        font-size: 0.9em;
    }

    #main_container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
    }
    
    .container {
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #72777d;
    }

    .switch_container {
        font-size: 2em;
        padding: 1em 1em 1em 2em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #72777d;
    }

    .left {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        text-align: center;
    }
    .right {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        text-align: center;
    }
    .red {
        color: #950000;
        font-weight: bold;
        font-size: 7em;
        padding-top: 0.5em;
        padding-bottom: 0.7em;
    }

    .icon_large {
        font-size: 7em !important;
        color: #72777d;
    }

    .material-symbols-outlined {
        font-variation-settings:
            'FILL' 0,
            'wght' 700,
            'GRAD' 200,
            'opsz' 40;
        font-size: 1.3em;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }

    .bottom_padding {
        padding-bottom: 4em;
    }

    .bg_f_good {
        background-color: #0e6d0e !important;
        color: #f8f8ff !important;
    }

    .f_active {
        color: #284c6a;
    }

    .f_inactive {
        color: #8fa3bc;
    }

    .f_good {
        color: #0e6d0e !important;
    }
    
    .active {
        font-weight: bold;
    }

    .f_bad {
        color: #950000 !important;
    }

    .tbp {
        padding-top: 4.5em;
    }

    #game_container {
        display: grid;
        grid-template-columns: 3fr auto auto;
    }

    #game_details_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .random_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3em;
        padding: 3em;
    }

    #userlist_container {
        grid-template-columns: 2fr 2fr 2fr 1fr;
    }

    #set_penalties_container {
        grid-template-columns: 1fr 5fr 2fr;
    }

    .calendar_container {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 0.3rem;
    }
    
    .beermeter_container {
        display: grid;
        grid-template-columns: 1fr 7fr 1fr;
        padding: 2em;
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
    }

    .beermeter_container > div {
        text-align: center;
        font-size: 2em;
        padding: 0.5em;
    }

    #beermeter {
        width: 100%;
        height: 30px;
        background-color: #d1d5da;
        accent-color: #284c6a;
        border-radius: 5em;
        cursor: pointer;
    }

    .penalties_container {
        grid-template-columns: 3fr 2fr 2fr 2fr 1fr;
    }
    
    #my_penalties_container {
        grid-template-columns: 3fr 2fr 2fr 2fr;
    }
    
    #penalties_details_container {
        grid-template-columns: 3fr 3fr 1fr;
    }

    #penalty_confirm_container {
        grid-template-columns: 2fr 1fr 3fr;
    }

    #penalty_picture_container {
        display: grid;
        grid-template-columns: 4fr 2fr 2fr 1fr;
    }
    
    .schedule_container {
        display: grid;
        grid-template-columns: 3fr 3fr 2fr 2fr 1fr 1fr;
        background-color: #d5ddf0;
    }
    
    #schedule_attendance_container {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
    
    #notify_devices_container {
        display: grid;
        grid-template-columns: 5fr 1fr;
    }

    #attendance_container {
        margin: 2em;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    #settings_container {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .setting_description {
        grid-column: 1 / 3 !important;
        text-align: left !important;
        padding-left: 3rem !important;
    }

    #downloads_container {
        display: grid;
        grid-template-columns: 1fr auto auto;
    }

    .helper_menu {
        padding: 2em;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
    }

    #helper_container {
        margin: 2em;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    #helper_penalty_container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5em;
        margin: 2em;
        padding: 3em;
        align-items: stretch;
    }

    #analytics_container {
        grid-template-columns: 2fr 1fr;
    }

    .helper_headline {
        text-align: center;
        font-size: 5em;
        font-weight: bold;
        color: #284c6a;
    }

    .helper_button {
        font-size: 2em !important;
    }

    #button_pay {
        font-size: 0.4em;
    }

    .helper_item {
        text-align: center;
        padding: 1em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #284c6a;
    }

    .penalty_item {
        text-align: center;
        padding: 1em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #284c6a;
    }

    .penalty_symbol {
        font-size: 10em;
        color:#72777d;
    }

    #notify_device {
        width: 70vw;
    }
    
    .penalty_inline_container {
        display: inline-block;
        margin: 0.2em;
        border: 1px solid #950000;
        border-radius: 0.4em;        
    }

    .penalty_inline_container_good {
        border: 1px solid #0e6d0e !important;
    }
    
    .penalty_inline_month {
        width: 120px !important;
        color: #ffffff;
        background-color: #950000;
        padding: 0.2em;
        margin: 0px;
        border-top-left-radius: 0.4em;
        border-top-right-radius: 0.4em;
        text-align: center;
    }     
    
    .penalty_inline_month_good{
        background-color: #0e6d0e !important;
    }    
    
    .penalty_inline_amount {
        width: 120px !important;
        color: #950000;
        padding: 0.2em;
        margin: 0px;
        text-align: center;
    }

    .penalty_inline_amount_good {
        color: #0e6d0e !important;
    }

    .penalty_picture {
        width: 20vw;
    }
    
    .padding_left {
        padding-left: 20vw !important;
    }

    .align_left {
        text-align: left !important;        
        font-size: 2em !important;
    }

    .centered {
        text-align: center;
    }

    .strong {
        font-weight: bold;
        font-size: 2em;
    }

    .profile_container {
        text-align: center;
        padding: 1em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #284c6a;
    }

    .attendance_item {
        text-align: center;
        padding: 1em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
        color: #284c6a;
    }

    .card_head {
        display: grid;
        justify-content: center;
    }

    .card_name {
        margin-top: 0.3em;
        font-weight: bold;
        font-size: 1.5em;
    }

    #home_container {
        text-align: center;
        padding: 5em;
        margin: 0px; 
        box-shadow: 0px 5px 15px #000b4340;
        background-color: #f8f8ff;
    }
    .table_container {
        display: grid;
        margin: 3em 0 0 0; 
        box-shadow: 0px 5px 15px #000b4340;
    }
    .table_head {
        text-align: center;
        background-color: #f0f0ff;
        color: #284c6a;
        font-weight: bold;
        padding: 0.7em;     
        font-size: 1.3em;   
        border-bottom: 1px solid #8fa3bc;    
    }
   
    .table_item {
        text-align: center;
        background-color: #f8f8ff;
        border-bottom: 1px solid #d5ddf0;
        padding: 1em;
        color: #72777d;
        font-size: 2em;
    }

    .table_item_game {
        text-align: left !important;
        font-weight: bold;
        color: #284c6a;
        padding-left: 2em;
    }

    .table_item_game_details {
        text-align: left !important;
        color: #284c6a;
        padding-left: 3em;
    }

    .table_item_game_description {
        text-align: left !important;
        padding: 3em;
        text-align: left;
        background-color: #f8f8ff;
        border-bottom: 1px solid #d5ddf0;
        color: #72777d;
        font-size: 2em;
    }

    .table_item_game_rating {
        padding: 0.5em;
        text-align: center;
        background-color: #f8f8ff;
        border-bottom: 1px solid #d5ddf0;
        font-size: 5em;
    }
    
    .table_item_game_divider {
        grid-column: 1 / 4;
        font-weight: bold;
        color: #284c6a;
        background-color: #f0f0ff;
    }

    .table_item_nopadding {
        padding: 0.9em 0  0 0 !important;
    }

    .team_headline  {
        background-color: #f0f0ff;
        color: #284c6a;
        font-weight: bold;
        padding: 0.7em 0.7em 0.7em 20vw;
        margin-top: 2em;
        font-size: 2em;   
        border-bottom: 1px solid #8fa3bc;    
    }

    .colspan_4 {
        grid-column: 1 / 5;
        margin-top: -2px;
    }

    .modal_bg {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 100vw;
        height: 100vh;
        background-color: #00000050;
        z-index: 5;
        backdrop-filter: blur(0px);
        padding: 0px;
        margin: 0px;
        display: none;
    }

    .modal {
        margin: 25vh 100px 25vh 100px;
        box-shadow: 0px 0px 30px #000b4350;
    }

    .grey {
        color: #72777d;
    }

    .button_green {
        background-color: #0e6d0e;
        border-radius: 50px;
        font-size: 1.5em;
        font-weight: bold;
        padding: 1em;
        color: #f8f8ff;        
        box-shadow: 5px 5px 15px #000b4350;
        cursor: pointer;
    }

    .button_red {
        background-color: #950000;
        border-radius: 50px;
        font-size: 1.5em;
        font-weight: bold;
        padding: 1em;
        color: #f8f8ff;
        margin-top: 1em;
        box-shadow: 5px 5px 15px #000b4350;
        cursor: pointer;
    }

    .button_blue {
        background-color: #284c6a;
        border-radius: 50px;
        font-weight: bold;
        padding: 1em;
        color: #f8f8ff;
        box-shadow: 5px 5px 15px #000b4350;
        cursor: pointer;
        font-size: 2em;
        margin: 1em;
        display: inline-block;
    }

    .button_centered {
        display: block !important;
        text-align: center;        
    }

    .button_right {
        float: right;
    }

    .button_img_handler {
        cursor: pointer;
        font-size: 1.5em;
        display: inline-block;
    }

    .hidden {
        display: none;
    }

    .delayed {
        display: none;
    }

    .loading {
        background-image: url("/img/loading.gif");
        background-position: center;
        background-repeat: no-repeat;
        background-color: #ffffff;
        margin-top: 3em;
        width: 100%;
        height: 150px;
        box-shadow: 5px 5px 15px #000b4350;
    } 

    .d-none {
        display: none;
    }

    .headline_switch {
        position: absolute !important;
        right: 1em !important;
        margin-top: 0.2em;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 40px;
        z-index: 1;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #72777d;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 32px;
        width: 32px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider_text {
        margin: 1.3em;
        font-size: 1.3em;
    }

    input.config_slider {
        appearance: none;
        -webkit-appearance: none;
        width: 90%;
        height: 1rem;
        background-color:#d1d5da;
        border-radius: 1rem;
        margin-left: 2rem;
        color: #284c6a;
    }

    label.config_slider {
        line-height: 5rem;
        font-weight: bold;
    }
    
    input.config_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 3rem;
        height: 3rem;
        background-color: #284c6aff;
        cursor: pointer;
        border-radius: 1.5rem;
    }

    input:checked + .slider {
        background-color: #284c6a;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #284c6a;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(60px);
        -ms-transform: translateX(60px);
        transform: translateX(60px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 26px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    .footnote {
        font-size: 2.5em;
        color: #284c6a;
        padding: 1em;
        text-align: center;
    }

    .nopadding {
        padding: 0px;
    }

    .profile_userimg {
        max-width: 483px;
    }

    .userimage {
        aspect-ratio: 1 / 1;
        width: 15vw;
        background-position: center;
        background-size: cover;
        border-radius: 10vw;
        border: 7px solid #284c6a;
        box-shadow: 5px 5px 15px #000b4350;
    }

    .random_label {
        background-color: #284c6a;
        color: #f8f8ff;
        font-size: 2em;
        font-weight: bold;
        padding: 1em;
        border-radius: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

    .random_inactive {
        background-color: #f8f8ff;
        color: #72777d;
    }

    .random_button {
        color: #72777d;
        background-color:#d1d5da;
        font-size: 3em;
        font-weight: bold;
        padding: 0.3em;
        margin-bottom: 0.3em;
        border-radius: 3em;
        text-align: center;
    }

    .random_button_inactive {
        color: #d1d5da;
        background-color:#f3f4f5;
    }

    .random_icon {
        font-size: 0.8em;
    }

    .notification_head {
        color: #284c6a;
        margin: 1.3em;
        font-size: 1.3em;
        font-weight: bold;
    }
    
    .notification_text {
        margin: 1em 1em 1em 5.5em;
    }
    
    .notify {        
        color: #72777d;
        border: 1px solid #8fa3bc;
        border-radius: 0.5em;
        font-size: 3em;
        padding: 0.5em;
        display: inline-block;
        margin: 1em 0em 1em 1em;
    }

    #chart {
        height: calc(100vh - 200px);
    }

    .table_item > a {
        text-decoration: none;
        color: #284c6a;
    }

    .bar_gap_large {
        column-gap: 3rem !important;
    }

    .bar_layout_5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .bar_layout_all {
        grid-template-columns: repeat(17, 1fr);
    }
    
    .bar_container {
        grid-template-rows: 4fr auto;
        height: 30vh;
        padding: 3rem;
        column-gap: 0.5rem;
        row-gap: 2rem;
        align-items: end;
    }

    .analytics_label {
        padding-left: 0.3em;
        padding-right: 0.5em;
        font-size: 0.7em;
        padding-top: 0.3em;
        display:grid;
    }

    .analytics_bar {
        border-radius: 0.1em;
        background-color: #284c6a;
        color: #d5ddf0;        
        font-size: 0.7em;
        min-height: 4em;
        box-shadow: 5px 5px 10px #000b4380;
        padding-bottom: 1em;
        display:grid;
        align-content: end;
    }

   .rotated {
        transform: none;
        writing-mode: vertical-lr;
        -webkit-transform: rotate(-180deg); 
        -moz-transform: rotate(-180deg);
        justify-self:center;
    }

    .small_font {
        padding-top: 1.7em;
        font-size: 1.3em;
    }

    .form_head {
        background-color: #f8f8ff;
        padding: 1em;
        color: #72777d;
        font-size: 3em;
    }

    .form_item {
        background-color: #f8f8ff;
        border-bottom: 1px solid #d5ddf0;
        padding: 0em 1em 1em 1em;
        color: #72777d;
        font-size: 3em;
    }

    .form_item > input {
        width: calc(100% - 0.6em);
        font-size: 2em;
        color: #284c6a;
        background: none;
        border: 2px solid #8fa3bc;
        border-radius: 0.3em;
        padding: 0.3em;
    }

    .red_bg {
        background-color: #950000;
        text-align: left;
        left: 0px;
    }
    
    .green_bg {
        background-color: #0e6d0e;
        text-align: right;
        right: 0px;
    }

    .schedule_action {
        height: calc(100% - 0.4em);
        padding-top: 0.4em !important;
        font-size: 3rem;
        width: 100px;
        color:#d5ddf0;
        position: absolute;
        top: 0px;
        padding: 0em 0.5em 0em 0.5em;
        z-index: 1;
    }

    .front {
        position: relative;
        z-index: 2;
    }

    .item_line {
        height: 6rem;
        position: relative;
    }

    .infobox {
        border-top: 2px solid #284c6a !important;
        border-bottom: 2px solid #284c6a !important;
        border-radius: 0.5em;
        margin: 2rem;
    }

    .button_margin_top {
        margin-top: 2rem !important;
    }

    .button_container {
        font-weight: bold;
        color: #f8f8ff;
        box-shadow: 0.3rem 0.3rem 1.5rem #000b4380;
        cursor: pointer;
        margin: 0rem 0rem 2rem 2rem;
        display:inline-flex;
        grid-template-columns: auto 1fr;
        height: 4.5rem;
        border-radius: 0.5rem;
    }

    .button_icon_container {
        height: 3rem;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
        padding: 1rem 1rem 0.5rem 1rem;
        font-size: 1.8rem !important;
        text-align: center;
        background-color: #3d4d5a;
        background-image: linear-gradient(180deg, #556a7c, #3d4d5a);

    }
    .button_name_container {
        margin-left: -1px;
        height: 3rem;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        padding: 1rem 2.5rem 0.5rem 1.5rem;
        text-align: left;
        background-color: #284c6a;
        background-image: linear-gradient(180deg, #2d5a80, #284c6a);
        font-size: 1.8rem;
    }

    .club_menu {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        background-color: #284c6a;
        color: #f8f8ff;
        font-weight: bold;
        padding-top: 1em;
        text-align: center;
        display:none;
        z-index: 10;
    }

    .club_menu_item {
        display: grid;
        grid-template-columns: 1fr 4fr;
        padding: 1em;
    }

    .headline.calendar {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        justify-items: center;
    }

    .calendar_day {
        font-size: 3rem;
        text-align: center;
        height: 10rem;
        padding: 1rem;
        background-color: #f8f8ff;
        border: 3px solid #f8f8ff;
        cursor: pointer;
    }
    
    .calendar_day_blocked {
        background-color: #e2a8a8;
        border: 3px solid #ad4242;
        color: #f8f8ff;
        border-radius: 1rem;
    }
    .calendar_today {
        background-color:#cfd9e2;
        border: 3px solid #556a7c;
        color: #000000;
        border-radius: 1rem;
    }

    .calendar_time_blocked {
        height: 2rem;
        width: 45%;
        float: left;
        background-color: #ad4242;
        color: #f8f8ff;
        font-size: 1rem;
        border-radius: 0.25rem;
        padding-top: 0.4rem;
        margin-top: 0.1rem;
        margin-right: 4%;
    }

    .calendar_time_free {
        height: 2rem;
        width: 45%;
        float: left;
        font-size: 1rem;
        border-radius: 0.25rem;
        padding-top: 0.4rem;
        margin-top: 0.1em;
        margin-right: 4%;
    }

    .calendar_user_blocked {
        background-color: #ad4242;
        color: #f8f8ff;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 1rem;
        float: left;
        padding: 0.3rem;
        margin-top: 0.3rem;
        margin-right: 0.3rem;
    }

    .calendar_day_choosen {        
        background-color:#0e6d0e;
        color: #f8f8ff;
        border-radius: 1rem;
    }    
    
    .calendar_day_choosen.calendar_user_blocked {        
        background-color:#ad4242;
        color: #f8f8ff;
        border-radius: 1rem;
    }

    .calender_number {
        float: left;
        width: 100%;
    }

    .calendar_schedule_time {
        position: absolute;
        z-index: 10;
        top: 35%;
        left: 25%;
        width: 50vw;
        text-align: center;
    }

    .calendar_time {
        font-size: 6rem;
        font-weight: bold;
        border: 0;
        margin: 3rem;
        color: #284c6a;
    }

    .availability {
        font-size: 2rem;
        font-weight: bold;
        color: #284c6a;
        padding: 1.5rem;
        margin: 2rem 3rem 0rem 3rem;
        border-radius: 2rem;
        border: 2px solid #3d4d5a;
    }

    .inactive {
        border: 2px solid #ffffff;
        color: #72777d;
    }