﻿
:root {
    --button-color: #078bb9;
}

.main-panel {
    background-image: linear-gradient(#ffffff, #e3e4e5);
    display: grid;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 2fr 2fr 1fr;    
   
}

.main-container {    
    align-items: flex-start;   
}

.B1 {
    grid-template-rows: 195px auto 65px 130px;
    grid-template-columns: 288px 235px auto 235px 288px;
}

.B2 {
    grid-template-rows: 195px 250px 67px 67px auto;
    grid-template-columns: 1fr 235px 1fr;
}

.M1 {
    grid-template-rows: 70px 230px 20px 235px auto;
    grid-template-columns: 288px 235px auto 235px 288px;
}

.M2 {
    grid-template-rows: 195px 250px 67px 67px auto;
    grid-template-columns: 0.33fr 235px 0.33fr 235px 0.33fr;
}

.btnOk{
    float:left;
}

.btnCancel{
    float:right;
}

.btnOk, .btnCancel {
    opacity:0.0;
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: opacity ease 2.0s;
    width:65px;
    height:65px;
}

    .btnOk:hover, .btnCancel:hover {
        border-color: #005C71;
    }

.m_button_wrapper {
    grid-row: 6;   
    display: flex;
    justify-content: space-around;
    margin-top: -12px;
}


.med-numbers-bar {
    grid-row: 4;
   
    grid-column: 1/4;
    display: flex;
    justify-content: space-evenly;
    width:500px;
    margin: 0px auto;
}

.med-tight-numbers-bar{
    width:350px;
}

.med-round-number-btn {
    width: 68px;
    height: 68px;
    font-family: sans-serif;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    background: var(--button-color);
    background: linear-gradient(45deg, rgba(0,164,222,1) 60%, var(--button-color) 90%);
}

.med-round-number-btn:hover, .med-round-number-highlight {
    cursor: pointer;
    color: var(--button-color);
    border-color: var(--button-color);
    background: white;
}


/*  .m_button_wrapper img {
        width: 72px;
        height: 72px;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 36px;
    }

        .m_button_wrapper img:hover {
            border-color: #005C71;            
        }*/
  

