body{
background: #f8f8f8;
}
.educationcal{
font-family: "Roboto";
}
.topmostheading{
border-bottom: 2px solid #00AEEB;
margin-top: 30px;
width: 110%;
margin-left: -5%;
margin-bottom: 20px;
}
.topmostheading h2{
font-size:40px;
display: inline-block;
vertical-align: bottom;
padding-top: 10px;
}
.topmostheading img{
display: inline-block;
float: right;
vertical-align: bottom;
}
.resultheading{
margin-top:5px;
}
.resultheading h2{
display: inline-block;
font-size:40px;
vertical-align: -webkit-baseline-middle;
margin-left: 5px;
}
.resultheading img{
display: inline-block;
}
.educationinputs{
margin-top: 20px;
background: #FFFFFF;
padding: 18px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
}
.educationinputs input{ 
background: #ffffff;
width: 80%;
margin-top: 4px;
margin-bottom: 14px;
margin-left: 0px;
padding: 5px;
padding-left: 10px;
font-size: 16px;
color:#565FE7;
border: 2px solid #565FE7;
border-radius: 6px;
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
transition:background 0.5s ease;
}
.educationinputs input[type="button"]{
border-left: 2px solid #565FE7;
font-weight: bold;
color: #fff;
background: #07afee;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
transition:background 0.5s ease;
}
.educationinputs input[type="button"]:hover{
background: #2984FF;
}
.educationinputs input:hover{ 
background: #f1f6f1;
}
.inputbtn{
width:150px;
}
.inputbtn input[type="button"]{
background: #ECEDFF;
color:#565FE7;
width: 20%;
border-top-right-radius: 0px;
border-right: none;
box-sizing: border-box;
border-bottom-right-radius: 0px;
transition:background 0.5s ease;
}
.inputbtn input[type="button"]:hover{
background:  #ECEDFF;
}
.ageelement{
width: 100%;
}
.ageelement1{
width: 50%;
display: inline-block;
}
.educationinputs .topheading{
padding: 6px;
margin-left: -18px;
margin-right: -18px;
background: #2E1B6C;
margin-top: -18px;
padding-top: 12px;
padding-bottom: 12px;
}
.calculatebutton img{
width: 13%;
display: inline-block;
}
.calculatebutton p{
width: 75%;
margin-left: 10px;
display: inline-block;
margin-bottom: 0px;
}
.calculatebutton button{
width:240px;
color: #fff;
background: #07afee;
border:none;
padding: 10px;
font-size: 26px;
font-weight:bold;
padding-bottom: 10px;
transition:background 0.5s ease;
}
.pdfbutton img{
width: 20%;
}
.pdfbutton p{
}
.pdfbutton button{
width:240px;
color: #343844;
background: #fff;
border:none;
padding: 10px;
font-size: 18px;
font-weight:bold;
padding-bottom: 10px;
transition:color 0.5s ease;
margin-top: 20px;
}
.pdfbutton button:hover{
background: #fff;
color:red;	
}
.twobuttons{
width: 100%;
margin-bottom: 15px;
}
.addbutton1{
width: 37.5%;
display: inline-block;
}
.addbutton2{
width: 37.5%;
display: inline-block;
}
.addbutton1 button{
width: 100%;
display: inline-block;
color: #fff;
background: #2dba44;
border: none;
font-size: 18px;
height: 40px;
transition:background 0.5s ease;
}
.addbutton2 button{
width: 100%;
display: inline-block;
color: #fff;
background: #ba1f13;
border: none;	
font-size: 18px;
height: 40px;
transition:background 0.5s ease;
}
.addbutton1 button:hover{
background: #0d9a34;
}
.addbutton2 button:hover{
background: #9a0003;
}
button:hover{
background: #1470ea;
}
.addbutton1 p{
width: 100%;
font-size: 15px;
margin-bottom: 0px;
text-align: center;
font-weight: bold;
}
.addbutton2 p{
width: 100%;
font-size: 15px;
margin-bottom: 0px;
text-align: center;
font-weight: bold;
}
.tablebuttons{
margin-bottom: 20px;
padding: 10px;
}
.tablebuttons input{
color:#fff;
background: #2E1B6C;
width: 250px;
border: none;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
font-size: 22px;
transition: background 0.5s ease;
}
.tablebuttons input:hover{
background: #3F2C7D;
}
.inactivebuttons{
background: #aaa!important;
transition: background 0.5s ease;
}
.inactivebuttons:hover{
background: #3F2C7D!important;
}
.educationinputs .topheading h3{
margin-bottom: 0px;
font-size: 25px;
}
.educationinputs h5{
color: #343844;
font-size: 18px;
text-align: left;
}
.educationinputs select{
background: #ECEDFF;
color:#565FE7;
border: 2px solid #565FE7;
border-radius: 6px;
text-align-last: center;
width: 100%;
padding: 5px;
}
.maincontrols{
padding: 10px;
}
.elements{
margin-top:5px;
margin-bottom: 5px;
}
.educationgraphs{
background: #FFFFFF;
opacity: 0.2;
padding: 18px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
margin-bottom: 20px;
}
.summary{
background: #FFFFFF;
opacity: 0.2;
padding: 18px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1), 0 5px 5px 0 rgba(0, 0, 0, 0.14);
margin-bottom: 20px;
}
.childhead{
padding: 5px;
margin-bottom: 10px;
}
.staticresults span{
font-size: 20px;
font-weight: bold;
color: #2E1B6C;
}
.staticresults h5{
}
.row1 {
display: table-row;
background: #f6f6f6;
}
.row1:nth-of-type(odd) {
background: #e9e9e9;
}
.row1.green {
background: #2E1B6C;
color: #fff;
}
@media screen and (max-width: 580px) {
.row1 {
padding: 14px 0 7px;
display: block;
}
.row1.header {
padding: 0;
height: 6px;
}
.row1.header .cell {
display: none;
}
.row1 .cell {
margin-bottom: 10px;
}
.row1 .cell:before {
margin-bottom: 3px;
content: attr(data-title);
min-width: 98px;
font-size: 10px;
line-height: 10px;
font-weight: bold;
text-transform: uppercase;
color: #969696;
display: block;
}
}
.cell {
padding: 6px 12px;
display: table-cell;
}