/* --------------------------------- Layout ---------------------------------*/

.container {
    width: 400px;
    padding: 20px;
margin: 5x;

}

/* vertically center .container */
body {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

button {
padding: 15px;
    width: 65px;
    height: 54px;
        font: 400 13.3333px Arial;

    border: none;
    border-radius: 5px;
    outline: none !important;
    position:relative;
    transition: all 0.1s;
}

button.operator-group, button#equal {
    font-size: 20px !important;
}

button.operand-group, button#clear, button#ans {
    font-size: 20px !important;
}

#display1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 200 !important;
    font-size: 20px !important;
    height: 50px;
}

.button-row {
    margin-top: 12px;
}

form {
    width: 400px;
    border-radius: .25rem;
    margin: 0x;
}

 input {


    background-color: #eceff1;
    border: none;

    margin: 0px 0px 0px 5px;
    display: block;
}





/*--------------------------- Light & Dark System ---------------------------*/

/* Light Theme */
.container-light {
    background-color: #003b34;
    border: 2px solid #e0e0e0;
}

.form-light {
    background-color: #eceff1;
    box-shadow: 0 0 0 0.1rem rgba(176, 190, 197, .5);
}

.form-input-light {
    color: #263238;
}

.operand-group-light {
padding: 15px;
  width: 23%;
  margin: 1%;
  float: left;
  border: none;
  background: #006e62;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00544b), color-stop(1, #006e62));
  background: -ms-linear-gradient(bottom, #00544b, #006e62);
  background: -moz-linear-gradient(center bottom, #00544b 0%, #006e62 100%);
  background: -o-linear-gradient(#006e62, #00544b);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006e62', endColorstr='#00544b', GradientType=0);
  border-style: solid;
  border-color: #333;
  border-width: 0px 1px 1px 0px;
  color: #f0f0f0;
  cursor: pointer;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.operand-group-light:hover {
   border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}

.operand-group-light:active {

}

.operator-group-light {

    background-color: #546e7a;
    border-color: #546e7a;
    color: #ffffff;
    box-shadow: 0px 5px 0px #3f525a; /* 10% darker than bg */
}

.operator-group-light:hover {
    background-color: #455a64;
    border-color: #37474f;
    box-shadow: 0px 5px 0px #2a363c; /* 13% darker than bg */
}

.operator-group-light:active {
    background-color: #37474f;
    border-color: #37474f;
    box-shadow: 0px 2px 0px #1f292d; /* 11% darker than bg */
    top: 3px;
}

.clear-light {

 background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
font-size: 1em;
    display: inline-block;
    position: relative;
    padding: 15px;
    font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
  width: 23%;
  margin: 1%;
-webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;

    display: inline-block;
    text-align: center;
    align-items: flex-start;
  
    font: 400 13.3333px Arial;
float: left;
    border: none;
border-style: solid;
    border-color: #333;
    border-width: 0px 1px 1px 0px;
    color: #f0f0f0;
    cursor: pointer;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.3);




}

.clear-light:hover {


 border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);

}



.ans-light, .backspace-light {
padding: 15px;
 background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
font-size: 1em;
    display: inline-block;
    position: relative;
    padding: 15px;
    font-family: 'Helvetica Neue LT Pro', 'Helvetica', sans-serif;
  width: 23%;
  margin: 1%;
-webkit-appearance: button;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;

    display: inline-block;
    text-align: center;
    align-items: flex-start;
  

float: left;
    border: none;
border-style: solid;
    border-color: #333;
    border-width: 0px 1px 1px 0px;
    color: #f0f0f0;
    cursor: pointer;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.3);

}

.ans-light:hover, .backspace-light:hover {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}

.ans-light:active, .backspace-light:active {

}

.equal-light {
  background: #dfdfdf;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cdcdcd), color-stop(1, #dfdfdf));
  background: -ms-linear-gradient(bottom, #cdcdcd, #dfdfdf);
  background: -moz-linear-gradient(center bottom, #cdcdcd 0%, #dfdfdf 100%);
  background: -o-linear-gradient(#dfdfdf, #cdcdcd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#cdcdcd', GradientType=0);
  color: #00544b;
  text-shadow: 1px 1px 0px #fff;
cursor:pointer;
  width: 23%;
  margin: 1%;

}

.equal-light:hover {
     border-width: 1px 0px 0px 1px;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}

.equal-light:active {
 
}

/* Dark Theme */
.container-dark {
    background-color: #37474f;
    border: 1px solid #37474f;
}

.form-dark {
    background-color: #263238;
    box-shadow: 0 0 0 0.1rem rgba(69, 90, 100, .5);
}

.form-input-dark {
    color: #eceff1;
}

.operand-group-dark {
    background-color: #607d8b;
    border-color: #607d8b;
    color: #ffffff;
    box-shadow: 0px 5px 0px #495f69;
}

.operand-group-dark:hover {
    background-color: #546e7a;
    border-color: #455a64;
    box-shadow: 0px 5px 0px #3f525a;
}

.operand-group-dark:active {
    background-color: #455a64;
    border-color: #455a64;
    box-shadow: 0px 2px 0px #2a363c;
    top: 3px;
}

.operator-group-dark {
    background-color: #b0bec5;
    border-color: #b0bec5;
    color: #000000;
    box-shadow: 0px 5px 0px #8a9ea8;
}

.operator-group-dark:hover {
    background-color: #90a4ae;
    border-color: #78909c;
    box-shadow: 0px 5px 0px #6b8694;
}

.operator-group-dark:active {
    background-color: #78909c;
    border-color: #78909c;
    box-shadow: 0px 2px 0px #576b75;
    top: 3px;
}

.clear-dark {
    background-color: #f44336;
    border-color: #f44336;
    color: #ffffff;
    box-shadow: 0px 5px 0px #c2160a;
    color: #000000;
}

.clear-dark:hover {
    background-color: #e53935;
    border-color: #d32f2f;
    box-shadow: 0px 5px 0px #b51a17;
}

.clear-dark:active {
    background-color: #d32f2f;
    border-color: #d32f2f;
    box-shadow: 0px 2px 0px #931f1f;
    top: 3px;
}

.ans-dark, .backspace-dark {
    background-color: #ff9800;
    border-color: #ff9800;
    color: #ffffff;
    box-shadow: 0px 5px 0px #cc7a00;
    color: #000000;
}

.ans-dark:hover, .backspace-dark:hover {
    background-color: #fb8c00;
    border-color: #f57c00;
    box-shadow: 0px 5px 0px #b36200;
}

.ans-dark:active, .backspace-dark:active {
    background-color: #f57c00;
    border-color: #f57c00;
    box-shadow: 0px 2px 0px #b35900;
    top: 3px;
}

.equal-dark {
    background-color: #4caf50;
    border-color: #4caf50;
    color: #ffffff;
    box-shadow: 0px 5px 0px #367c39;
    color: #000000;
}

.equal-dark:hover {
    background-color: #43a047;
    border-color: #388e3c;
    box-shadow: 0px 5px 0px #2d6c30;
}

.equal-dark:active {
    background-color: #388e3c;
    border-color: #388e3c;
    box-shadow: 0px 2px 0px #245b27;
    top: 3px;
}

/*----------------------------- Rounded switch ------------------------------*/

.switch input {
    display: none;
}

.switch {
    position: relative;
    width: 30px;
    height: 17px;
    display: inline-block;
    margin-bottom: 5px;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    transition: .4s;
    border-radius: 50px;
    background-color: #263238;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    transition: .4s;
    border-radius: 50%;
}

#the-results {

  float: Left;
  /*min-width: 400px;*/
  margin: 0;
  /*padding: 20px;*/
  border: 2px solid #e0e0e0;
  background: #00544b;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #003b34), color-stop(1, #00544b));
  background: -ms-linear-gradient(bottom, #003b34, #00544b);
  background: -moz-linear-gradient(center bottom, #003b34 0%, #00544b 100%);
  background: -o-linear-gradient(#00544b, #003b34);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00544b', endColorstr='#003b34', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding-box;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#the-results #result_clear {
  position: absolute;
  right: 0;
  top: 550px;
}
#the-results ul {
  height: 544px;
  overflow-y: scroll;
  list-style: none;
  padding: 0;
  margin: 0 ;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 0px 64px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li {
  font-size: 0.8em;
  width: 100%;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
#the-results ul li#result_default {
  /*padding-left: 24px;*/
  text-align: center;
  color: #a9a9a9;
  font-style: italic;
  font-weight: 200;
}
#the-results ul li.result {
  display: none;
  font-size: 0.8em;
  color: #f9f9f9;
  background: rgba(255, 255, 255, 0.05);
  zoom: 1;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:before,
#the-results ul li.result:after {
  content: "";
  display: table;
}
#the-results ul li.result:after {
  clear: both;
}
#the-results ul li.result:nth-child(even) {
  background: rgba(255, 255, 255, 0.15);
}
#the-results ul li.result:nth-child(even) .answer {
  background: #103f3a;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0d332f), color-stop(1, #103f3a));
  background: -ms-linear-gradient(bottom, #0d332f, #103f3a);
  background: -moz-linear-gradient(center bottom, #0d332f 0%, #103f3a 100%);
  background: -o-linear-gradient(#103f3a, #0d332f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#103f3a', endColorstr='#0d332f', GradientType=0);
}
#the-results ul li.result .equation,
#the-results ul li.result .answer {
  display: inline-block;
  padding: 0px 12px;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 60px;
  line-height: 40px;
}
#the-results ul li.result .equation {
  float: left;
  height: 100%;
  font-style: italic;
}
#the-results ul li.result .answer {
  position: absolute;
  right: 52px;
  top: 0;
  height: 100%;
  background: #0e3733;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0b2b27), color-stop(1, #0e3733));
  background: -ms-linear-gradient(bottom, #0b2b27, #0e3733);
  background: -moz-linear-gradient(center bottom, #0b2b27 0%, #0e3733 100%);
  background: -o-linear-gradient(#0e3733, #0b2b27);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e3733', endColorstr='#0b2b27', GradientType=0);
}
#the-results ul li.result .use {
  height: 100%;
}
#the-results ul li.result .use a {
  background: #008779;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #006359), color-stop(1, #008779));
  background: -ms-linear-gradient(bottom, #006359, #008779);
  background: -moz-linear-gradient(center bottom, #006359 0%, #008779 100%);
  background: -o-linear-gradient(#008779, #006359);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#008779', endColorstr='#006359', GradientType=0);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: block;
  padding: 0px 8px;
  width: 52px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  font-size: 0.9em;
  cursor: pointer;
  border: none;
  color: #f9f9f9;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}
#the-results ul li.result .use a:hover,
#the-results ul li.result .use aactive {
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  -webkit-opacity: 0.7;
  opacity: 0.7;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  filter: alpha(opacity=70);
}



input:checked + .slider:before {
    background-color: #263238;
}

input:not(:checked) + .slider:before {
    background-color: #eceff1;
}

input:checked + .slider {
  background-color: #eceff1;
}

input:focus + .slider {
  box-shadow: 0 0 1px #eceff1;
}

input:checked + .slider:before {
  transform: translateX(13px);
}