﻿.b-container {
    display               : grid;
    width                 : 100%;
    background-color      : #FFF; /*#049cd7; #1481C5*/
    grid-template-columns : 1fr 14fr;
    grid-template-rows    : auto;
    grid-template-areas   : "body-left body-right";
}

.b-left {
    grid-area             : body-left;
    padding               : 0 10px 10px 10px;
    border-right          : 3px solid #a4b7c6;
    background-color      : #049cd7;
}

.b-right {
    grid-area             : body-right;
    text-align            : left;
/*  align-self            : start; */
/*  justify-self          : end;   */
/*  padding-right         : 20px;  */
}

.menu-container {
    display               : block;
}

.menu {
    font                  : 900 12px "Open Sans", Helvetica, Arial, sans-serif;
    display               : inline-block;
    white-space           : nowrap;
    cursor                : pointer;
    user-select           : none;
    color                 : #049cd7;
    border                : 3px solid #a4b7c6;
    border-radius         : 8px;
    background-color      : white;
    padding               : 5px 5px;
    margin-bottom         : 5px;
    width                 : 100%;
    text-align            : center;
    text-decoration       : none;
}

.m1:before, .m2:before, .m3:before, .m4:before, .m5:before,
.m6:before, .m7:before, .m8:before, .m9:before, .ma:before {
    font                  : 900 38px 'Font Awesome 5 Free';
    color                 : #049cd7;
    text-decoration       : none;
}

.m1:before { content      : "\f509"; }
.m2:before { content      : "\f291"; }
.m3:before { content      : "\f2b9"; }
.m4:before { content      : "\f494"; }
.m5:before { content      : "\f4df"; }
.m6:before { content      : "\f249"; }
.m7:before { content      : "\f468"; }
.m8:before { content      : "\f4ce"; }
.m9:before { content      : "\f4fa"; }
.ma:before { content      : "\f249"; }

.menu:hover:before,
.menu:focus:before {
    color                 : white;
    text-decoration       : none;
    border                : 3px solid #049cd7;
    border-radius         : 8px;
    background-color      : #049cd7;
    text-shadow           : none;
}

.menu:focus {
    outline               : none;
}

.menu:hover, 
.menu:focus  {
    color                 : white;
    text-decoration       : none;
    border                : 3px solid #049cd7;
    border-radius         : 8px;
    background-color      : #049cd7;
    text-shadow           : none;
}

.menu:active, 
.menu.active {
    background-image      : none;
    outline               : none;
    box-shadow            : inset 0 3px 5px rgba(0,0,0,0.125);
}

.menu.disabled, 
.menu[disabled], 
fieldset[disabled] .menu {
    pointer-events        : none;
    cursor                : not-allowed;
    opacity               : .65;
    filter                : opacity(65%);
    box-shadow            : none;
}

