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);
}