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;
    /*margin: 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 rigth, #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 rigth, #75C1FF, #2045D5);
        box-shadow: inset 0px 0px 3px 3px #77A1F5;
*/      color: lightgray;
        border-color: lightgray;
    }

#close-button
{
    background-image:linear-gradient(to bottom right, #C97475, #FF3010);
    box-shadow:inset 3px 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 0px 0px 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: 383px;
    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;
/*    gap: 10px;*/
    align-items: center; 
}

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

    .buttons button:hover 
    {
        /*box-shadow:inset 0px 0px 5pz 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, 40);
    grid-template-columns: repeat(5, 48px);
    grid-gap: 9.9px 11.99px;
    padding: 3.5px;
}

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

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

/*---*/
.border-left 
{
    width: 5px;
    height: 100%;
    background-image: linear-gradient(to right, #0033D7, #1969F4, #0033D7);
}
.border-right 
{
    width: 5px;
    height: 100%;
    background-image: linear-gradient(to right, #0033D7, #1969F4, #0033D7);
}
.border-bottom 
{
    width: 400px;
    height: 5px;
    background-image: linear-gradient(#55BBFF, #094984, #0077CC);
}