body {
  box-sizing: border-box;
  color:#373737;
  background: linear-gradient(135deg, #FFFFFF 0%,#F5F5F5 100%);
  font-size: 16px;
  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
header a {
  display: block;
  position: absolute;
  top:0;
  right: 10px;
  z-index: 10;
  padding: 10px 50px 10px 10px;
  color: #fff;
  background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
section h1 {
  margin-top: 150px;
  margin-bottom: 60px;
  color: #8BC34A;
  font-size: 42px;
  font-weight: 700;
  text-shadow: #FFFFFF 0px 0px 1px;
  text-align: center;
}
section h1 span{
  font-size: .8em;
  color: #00BCD4;
}
section input{
  width:80%;
  margin: 0px auto;
  display: block;
  height: 40px;
  padding: 0 10px;
  outline: none;
  border-radius: 4px;
  border: 0;
  transition : .27s all;
  box-shadow: #CECECE 0 0 4px;
}
footer{
  position: fixed !important;
  bottom: 0;
  display: inline-block;
  background: #FFF;
  width: 100%;
  padding: 0px 0 0px 10px;
}
footer p{
  color: #A9A9A9;
  display: inline-block;
}
footer p a{
  color: #3F51B5;
  padding-left:5px;
}
footer ul{
  display:block;
  float:right;
  margin: 0;
  padding: 16px 30px 10px 10px;
}
footer ul li{
  list-style:none;
  display:inline-block;
  padding-left:10px;
}
footer ul li a{
  color: #2196F3;
}
.container{
  width: 800px;
  margin: 0 auto;
}

.autocomplete-suggestions {border: 1px solid #e2e0e0;background: #FFF;overflow: auto;border-top: none;}
.autocomplete-suggestion {padding: 2px 5px;white-space: nowrap;overflow: hidden;border-bottom: 1px solid #e2e0e0;}
.autocomplete-selected { background: #F0F0F0; cursor: pointer; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }

.calc{
  border: 6px solid #1790C5;
  transition : .27s all;
}

/* formulaActionWindow styles */

.formulaActionWindow{
    width: 800px;
    height: 400px;
    z-index: 9999;
    background-color: #FFF;
    position: fixed;
    top: 20%;
    transform: translateX(50%);
    display: none;
    box-shadow: 1px 1px 8px #909090;
    margin-right: 50%;
    right: 0;
}
.formulaActionWindow #closeIcon{
    display: block;
    width: 35px;
    height: 40px;
    position: absolute;
    right: 0;
    font: 30px arial,sans-serif;
    background: #FF9800;
    padding: 6px 0px 0 10px;
    cursor: pointer;
    color: #FFF;
}
.formulaActionWindow h2{
    margin: 0;
    padding: 5px 20px;
    background-color: #03A9F4;
    color: #FFF;
}

.formulaBody{
  padding: 10px;
}

.formulaBody span{
  font-weight: bold;
  margin-top: 15px;
  display: block;
}
.formulaBody #inputBoxHTML{
    margin: 10px 0 0 10px;
}
.formulaBody input{
  width: 100px;
  position: relative;
  margin: 15px 0 0 20px;
  display: inline-block;
  height: 30px;
  padding: 0px 0px 0 10px;
 }

.formulaBody input:focus{
  box-shadow: #FF9800 0 0 5px
}
.calculatorOut{
  display:none;
  width: 326px;
  background:#FFF;
  margin: 19px auto 0 auto;
  font-size: 40px;
  padding: 50px;
  text-align: center;
  box-shadow: 1px 1px 0px #ccc;
}
