html, body {
    font-family: Verdana, Tahoma, Helvetica, Serif;
}
@media (min-width: 1200px) {
    .container {
    width: 970px;
  }
}

/*-----------------------------------*/

#calculator {
    padding: 8px 5px 5px 5px; /*4px 1px 1px 1px; 8px 5px 5px 5px;*/
    box-sizing: border-box;
    color: rgba(255, 255, 255, .8);
    font-family: Verdana, Tahoma, Helvetica, Serif;;
    /*border-top-left-radius: 100% 10px;
    border-top-right-radius: 100% 10px;
    border-bottom-left-radius: 100% 40px;
    border-bottom-right-radius: 100% 40px;
    border: 1px solid blue;*/
    border: 1px solid black;
    border-radius: 10px;
    background-color: #595458; 
}

/*-----------------------------------*/

#displayContainer {
    height: 46px;
    box-sizing: border-box;
    display: block;
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4),
                0 -1px 1px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    background-color: #bccd95; /*#7D8C73;*/ /*#bccd95*/
    border-left: 5px solid #bccd95;
    border-right: 5px solid #bccd95;
    border-top: none;
    border-bottom: none;
    text-align: right;
}
#calcDisplay {
    height: 42px;
    background-color: transparent;    
    text-align: right;
    cursor:text;    
    overflow: hidden;
    unicode-bidi: embed;    
    /*letter-spacing: 0px;*/
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    border: none;
    resize: none;
    outline: none;
    color: black;
    /*white-space: normal;*/
}

/* fitty */
.fit {
    font-weight: normal;
    line-height:1;
    margin:0;
}
[contenteditable] {
    outline:none;
}
[contenteditable] * {
    display:inline;
    font-size:inherit !important;
}
/* end of fitty */

/*-----------------------------------*/

.calcBtn {  
    height: 50px !important;
    margin: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    font-family: Verdana, Tahoma, Helvetica, Serif;
    color: white;
    border-radius: 7px;
    outline: none;
    background-color: #4c5356;
    text-shadow: 0 0 2px rgba(255, 255, 255, .2);    
    border: 1px solid black;
    box-shadow: 0 1px rgba(255, 255, 255, 0.2);
}
.calcBtn:active {
    box-shadow: inset 1px -1px 1px 0 rgba(0, 0, 0, .3),
    inset -1px 1px 1px 0 rgba(0, 0, 0, .3),
    0 1px rgba(255, 255, 255, 0.2),
    0 -1px rgba(255, 255, 255, 0.2),
    1px 0 rgba(255, 255, 255, 0.2),
    -1px 0 rgba(255, 255, 255, 0.2);
    color: yellow;
    text-shadow:
		0px  0px  8px  rgb(255, 230, 186),
		0px  0px 22px  rgb(255, 255, 255),
		0px -1px  0px rgba(  0,   0,   0, 0.5);
}
.calcBtn:hover { 
    filter: brightness(110%); 
}
#firstlayout,
#basicLayout {
    display: block;
}
#secondlayout,
#statisticslayout ,
#trigonometryLayout,
#constantsLayoutOne, 
#constantsLayoutTwo {
    display: none;
}
#statisticsLayoutSwitch ,
#trigonometryLayoutSwitch,
#constantsLayoutOneSwitch, 
#constantsLayoutTwoSwitch {
    background-color: #724aa1 !important;
    font-size: 16px !important;
}
#firstlayout .calcBtn,
#secondlayout .calcBtn,
#basicLayout .calcBtn,
#trigonometryLayout .calcBtn,
#statisticslayout .calcBtn,
#constantsLayoutOne .calcBtn,
#constantsLayoutTwo .calcBtn {
    height: 40px;
    font-size: large;
    padding: 5px 2px;
    background-color: #656e72;
}
#trigonometryLayout .calcBtn {
    font-size: 16px;
}

#numericlayout .calcBtn {
    padding: 0;
    font-size: xx-large;
}
#divide {
    padding: 0;
    font-size: 25px !important;
    font-weight: bold;
}
#lp, #rp, #comma {
    padding: 0;
    font-size: x-large !important;
}
#unaryMinus {
    padding: 0;
    font-size: large !important;
}
#pow {
    padding:0 2px !important;
    font-size: x-large !important;
}
.memory {
    font-size: large !important;
}
#polToRect {
    font-size: 22px !important;
}
#toggleComplexForm {
    font-size: 20px !important;
}
#pluscmplx, #minuscmplx {
    font-size:medium !important;
}
#i {
    font-size: x-large !important;
}
#quadEquation {
    font-size: 13px !important;
}
#quantumOfCirculation {
    font-size: 16px !important;
}

/* ---------------------------------------------------------------------------------------- */

.memory {
    background-color: #B03060 !important;
}
.reciprocal, .exp, .ln,	.log, .square, .cube, .sqrt, .nthRoot, .nthRoots .pow {    
}
.number, .point, .unaryMinus, .lp, .rp, .allclear {
    background-color: #2166AC;
}
.pluscmplx, .minuscmplx, .i, .polToRect, .ee {
    background-color: #146464 !important;
}
.plus, .minus, .mul, .divide {
    background-color: #67001F;
}
.execute {
    background-color: #BF5B16 !important; /*#4B0082;*/
}
.basicLayoutSwitch,
.moreLayoutSwitch{
    color:yellow;
    background-color: #948007 !important;
}
.anglesUnitSwitch {
    color: #00ffff !important;
    background-color: #6c7f00 !important;
}
.data {
    background-color: #474d4f !important;
}
.allclear,
.clearEntry,
.comma {
    background-color: #18497b;
}
#clearEntry {
    display: none;
}

/*--------------------------------*/

.moreLayoutSwitch,
.pressedBinOperatorBtn,
.availableData {
  border-width: 1px solid black;
  border-color: red;
  animation-name: flash_border;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_border;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_border;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}
@keyframes flash_border {
0% { border-color: White }
25% { border-color: Aqua }
50% { border-color: Fuchsia }
75% { border-color: Yellow }
100% { border-color: White }
}
@-webkit-keyframes flash_border {
0% { border-color: White }
25% { border-color: Aqua }
50% { border-color: Fuchsia }
75% { border-color: Yellow }
100% { border-color: White }
}
@-moz-keyframes flash_border {
0% { border-color: White }
25% { border-color: Aqua }
50% { border-color: Fuchsia }
75% { border-color: Yellow }
100% { border-color: White }
}

/*----------------------*/

.openedParentheses {
  border-width: 1px solid black;
  animation-name: flash_color;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: flash_color;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: flash_color;
  -moz-animation-duration: 2s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
}
@keyframes flash_color {
0% { color: White }
25% { color: Aqua }
50% { color: Fuchsia }
75% { color: Yellow }
100% { color: White }
}
@-webkit-keyframes flash_color {
0% { color: White }
25% { color: Aqua }
50% { color: Fuchsia }
75% { color: Yellow }
100% { color: White }
}
@-moz-keyframes flash_color {
0% { color: White }
25% { color: Aqua }
50% { color: Fuchsia }
75% { color: Yellow }
100% { color: White }
}

.activeSwitch {
    box-shadow: inset 1px -1px 1px 0 rgba(0, 0, 0, .3),
    inset -1px 1px 1px 0 rgba(0, 0, 0, .3),
    0 1px rgba(255, 255, 255, 0.2),
    0 -1px rgba(255, 255, 255, 0.2),
    1px 0 rgba(255, 255, 255, 0.2),
    -1px 0 rgba(255, 255, 255, 0.2);
    color: yellow;
    text-shadow:
		0px  0px  8px  rgb(255, 230, 186),
		0px  0px 22px  rgb(255, 255, 255),
		0px -1px  0px rgba(  0,   0,   0, 0.5);
}

/* ------------------------------------------------------ */

.calcDescription,
#calcManual {
    margin: auto;
    width: 90%;
}

#calcManual .subject h2 {
    text-align: center;
}

.examples > div {
    float: left;    
    display: block;    
}

.examples > div {
    width: 100%;
}

#shortSyntaxExamples > div {
    padding: 2px;
    border-top: 1px solid #fff;
}

#examples > div {
    padding: 5px;
    border-top: 1px solid #bbb;
}

.examples .calcBtn {
    float: left;
    width:45px;
    height:30px !important;
    font-size:16px;
    cursor: default;
}

.examples .quadEquation
{
    width:72px !important;
    font-size:14px !important;
}

.examples .data,
.examples .stat,
.examples .const
{
    width:55px !important;
    font-size:15px !important;
}

.examples .vatPercent,
.examples .toggleComplexForm
{
    width:60px !important;
    font-size:14px !important;
}

.examples .memory,
.examples .minuscmplx,
.examples .pluscmplx,
.examples .nthRoot,
.examples .nthRoots
{
    font-size:14px !important;
}

.examples .pow,
.examples .polToRect,
.examples .execute
{
    font-size:16px !important;
}

.examples .unaryMinus
{
    font-size:14px !important;
}

.examples .i
{
    width:35px !important;
    font-size:16px !important;
}