/* (A) WRAPPER */
#numWrap, #numWrap * { box-sizing: border-box; }
#numWrap {
    /* (A1) FULL SCREEN COVER */
  /*  position: fixed;
    top: 0; left: 0; z-index: 999;*/
    /*width: 95vw;
    */
    /*height: 100vh;*/


    padding-top:0px;
    padding-bottom:5px;


    /* (A2) HIDE BY DEFAULT */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;

    /* (A3) CENTER ON SCREEN + BACKGROUND COLOR */
    display: flex;
    align-items: center; justify-content: center;
   /* background: rgba(223, 223, 223, 0.7);*/
}

/* (A3) SHOW NUMPAD */
#numWrap  {
    opacity: 1;
    visibility: visible;
}

/* (B) NUMPAD */
#numPad {
    max-width: 550px;
    /*padding: 10px;*/
  /*  background: #151515;*/
}

/* (C) DISPLAY */
#numDisplay {
    width: 100%;
    border: 0;
    padding: 5px;
    margin-bottom: 10px;
    background: #000;
    color: #fff;
    font-size: 42px !important;
    text-align: right;
    border-radius: 5px;
}
#numDisplay:focus { outline: none; }
#numDisplay::selection { background: none; }

/* (D) BUTTONS WRAPPER */
#numBWrap {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* (E) BUTTONS */
#numBWrap div {
    font-size: 24px;
    color: #fff;
    text-align: center;
    padding: 15px 0;
}
#numBWrap div:hover { cursor: pointer; }
#numBWrap .num, #numBWrap .zero, #numBWrap .dot { background: #565656; border-radius: 5px;}
#numBWrap .zero { grid-column: span 2; padding:24px;border-radius: 5px;}
#numBWrap .del, #numBWrap .clr { background: #333; border-radius: 5px;}
#numBWrap .cx { background: #333; border-radius: 5px;}
#numBWrap .plus { background: #333; border-radius: 5px;}
#numBWrap .ok { background:  #333; font-size:35px; font-weight: bold;border-radius: 5px;}

/* (F) NO DECIMAL POINTS ALLOWED */
#numWrap.noDec .dot { display: none; }
#numWrap.noDec .zero { grid-column: span 3; }