/* ---------------------------------------------------------------------------------- Calculator */

#workspace-area
{
  top: 35px;
position: relative;
}
#result
{
height: 110px;
width: 100%;
color: #03cefa;
background-color: #121212;
padding-right: 10px;
padding-left: 10px;
}
#output
{
text-align: right;
background-color: #121212;
color: #03cefa;
height: 60px;
width: 100%;
padding-top: 25px;
outline: none;
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: thin ;
font-size: 2rem;
line-height: 0;
text-align: right;
margin-bottom: 20px;
/*direction: rtl;*/
}
#history
{
text-align: right;
font-size: 18px;
color: #09b2c9;
background-color: #121212;
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: thin ;
}

#keyboard{
position: relative;
margin-top: 0px;
display: flex;
flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: flex-end;
height: 350px;
}
.number, .operator{
width: 70px;
height: 70px;
float: left;
background-color: #262626;
border: 1px solid #4b4b4b;
font-family: Consolas, Regular, sans-serif;
font-size: 20px;
}

.operateBtn {
font-size: 30px;
background-color: #1c1c1c;
color: #0ac5ec;

}
.pointBtn {
background-color: #262626;
color: #b6b6b6;
  
  }

.button {
width: 70px;
height: 70px;
}
#clear{
width: 140px;
height: 70px;
color: #b37409;
}

#backspace{color: #b37409;}
.number{
cursor: pointer;
background-color: #262626;
color: #b6b6b6;
}
.operator:active, .number:active{
font-size: 30px;
}
.operator:focus, .number:focus{
outline: 0;
}
.number:hover{
background-color: #4b4b4b;
}
.operator:hover{
background-color: #4b4b4b;
}

.equal {
width: 140px;
height: 70px;
font-size: 30px;
background-color: #1c1c1c;
color: #0ac5ec;
}