body 
{
    background-image: url("bliss.jpg");
    background-size: cover;
    font-family: Tahoma;
    text-shadow: 1px 1px black;
}

.main-window 
{
    /*border:solid 1px;*/
    width: 400px;
    height: 360px;
    position: absolute;
    left: 25px;
    top: 25px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.title-bar 
{
    width: 100%;
    height: 38px;
    background-image: linear-gradient( rgb(88,182,244), rgb(0,86,228),rgb(0,86,228),rgb(0,86,228), rgb(4,105,253),rgb(4,105,253),rgb(4,105,253) );
    box-shadow: inset 0px 0px 4px 1px #002195;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 5px 15px;*/
}

.title-bar-left-side 
{
    margin: 0px 8px;
    display: flex;
}

.title-bar-right-side 
{
    margin: 0px 8px;
}

#app-icon 
{
    width: 24px;
    height: 24px;
}

.control-button, .control-button:disabled, .control-button:disabled:hover 
{
    width: 24px;
    height: 24px;
    color: white;
    font-weight: 800;
    border: solid 1px white;
    border-radius: 4px;
    background-image: linear-gradient(to bottom right, #55A1FF, #0025B5);
    box-shadow: inset 1px 1px 3px 0px #77A1F5;
}

.control-button:hover 
{
    background-image: linear-gradient(to bottom right, #75C1FF,#2045D5);
    box-shadow: inset 0px 0px 3px 3px #77A1F5;
}

.control-button:active 
{
    background-image: linear-gradient(to bottom right, #55A1CF, #0025B5);
    box-shadow: inset 0px 0px 3px 3px #5781F5;
    color: lightgray;
}

.control-button:disabled, .control-button:disabled:hover 
{
    /*background-image: linear-gradient(to bottom right, #55A1FF, #0025B5);
    box-shadow: inset 1px 1px 3px 0px #77A1F5;*/
    color: lightgray;
    border-color: lightgray;
}

#close-button 
{
    background-image: linear-gradient(to bottom right, #C97475, #FF3010);
    box-shadow: inset 1px 1px 3px 1px #C49A9B;
}

#close-button:hover 
{
    background-image: linear-gradient(to bottom right, #D98485, #FF3020);
    box-shadow: inset 0px 0px 3px 3px #C49A9B;
}

#close-button:active 
{
    background-image: linear-gradient(to bottom right, #D95455, #FF3020);
    box-shadow: inset 0px 0px 3px 3px #B48A8B;
}

.work-area 
{
    width: 100%;
}

.client-rect 
{
    background-color: rgb(235,233,216);
    width: 100%;
    height: 322px;
    /*border: solid 5px;
    border-image: linear-gradient(to right, #0033D7, #1969F4, #0033D7);*/
    display: flex;
    justify-content: space-between;
}

.menu-bar 
{
    width: 100%;
    display: flex;
    border-bottom: solid 1px white;
}

.menu-bar > button 
{
    width: 50px;
    height: 22px;
    margin: 1px;
    background: rgb(236,233,216);
    border: none;
}

.menu-bar > button:hover 
{
    box-shadow: 1px 1px 0 0 gray;
    background: rgb(246,243,226);
}

.menu-bar > button:active 
{
    box-shadow: inset 1px 1px 0 0 gray;
    background: rgb(226, 223, 206);
}

.display 
{
    width: 384px;
    /*width: 98.5%;*/
    display: flex;
    justify-content: center;
    margin: 5px 0;
}

.display > input[type=text] 
{
    width: 91%;
    text-align: right;
}
/*---------------------------------------------------------------------*/
.buttons 
{
    display: flex;
    justify-content: space-around;
    padding: 8px 5px;
}

.memory-buttons 
{
    display: flex;
    flex-direction: column;
    /*justify-content:center;*/
    align-items: center;
}

.buttons button 
{
    width: 48px;
    height: 40px;
    border: solid 1px darkblue;
    border-radius: 5px;
    box-shadow: inset 0 -2px 5px 1px lightgray;
}

.buttons button:hover 
{
    /*box-shadow: inset 0px 0px 5px 0px lightblue;*/
    box-shadow: inset 0px 0px 5px 0px #FFAA00;
}

.buttons button:active 
{
    background-color: lightgray;
    box-shadow: inset 0px 0px 5px 0px gray;
}

.memory-buttons > button, .control-buttons > button 
{
    color: red;
    margin: 5px;
}

.battery 
{
    width: 32px;
    height: 32px;
    margin: 8px;
    box-shadow: inset 1px 1px 0px 0px gray;
    border-right: solid 1px white;
    border-bottom: solid 1px white;
}
/*---------------------------------------------------------------------*/
.control-and-digital-buttons 
{
    width: 80%;
}

.control-buttons > button 
{
    width: 86px;
}

.digital-buttons 
{
    display: grid;
    grid-template-rows: repeat(4, 40px);
    grid-template-columns: repeat(5, 48px);
    grid-gap: 9.9px 11.99px;
    padding: 3.5px;
    /*https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Basic_concepts#:~:text=be%20written%20as%3A-,CSS,-Copy*/
    /*grid-template-rows:     40px 40px 40px 40px;*/
    /*grid-template-columns:  48px 48px 48px 48px 48px;*/
}

.digital-buttons > button 
{
    color: darkblue;
}

.digital-buttons > .operational-button 
{
    color: red;
}

button 
{
    /*font-size:17px;*/
}
/*---------------------------------------------------------------------*/
.border-left 
{
    width: 5px;
    height: 100%;
    background-image: linear-gradient(to right, #0033D7, #1969F4, #0033D7);
}

.border-bottom {
    width: 400px;
    height: 5px;
    background-image: linear-gradient( #094984, #2288AA,#0055AA);
}

.border-right 
{
    width: 5px;
    height: 100%;
    background-image: linear-gradient(to right, #094984, #2288AA,#0055AA);
}