/*
 * Calculator css
 */


::-webkit-datetime-edit { padding: 1em; }
/*::-webkit-datetime-edit-fields-wrapper { background: silver; }*/
::-webkit-datetime-edit-text { color: #333; padding: 0 0.3em; }
::-webkit-datetime-edit-month-field { color: #333; }
::-webkit-datetime-edit-day-field { color: #333; }
::-webkit-datetime-edit-year-field { color: #333; }
::-webkit-inner-spin-button { display: none; }
::-webkit-calendar-picker-indicator { border: 1px solid #333; }
::-webkit-clear-button {padding-right: 5px;}

.result-inp{
	position: relative;
	margin-bottom: 10px;
}
.result-inp .placeholder{
    padding: 7px;
    color: #5f5f5f;
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
}

#calc_form h5, .calc-results h5, .daily-min h5, .Amortization h5 {font-size:18px; color:#4c4c4c; font-weight:400; font-family: 'Montserrat', sans-serif !important; height:42px;}
#calc_form label {font-size:14px; color:#4b4b4b; font-weight:300;font-family: 'Montserrat', sans-serif !important;}
#calc_form input {background-color:transparent; border:1px solid #e4e4e4; box-shadow:none; border-radius:0px; color:#686868; font-weight:300; margin-bottom:13px;}
#calc_form input:focus {box-shadow:none;}
#calc_form .text-center{border-bottom:1px solid #e4e4e4; padding-bottom:38px; padding-top:20px;}
#calc_form #calc-btn {background-color:#1189fa;border:0px; border-radius:0px; padding-left:35px; padding-right:35px;padding-top:9px; padding-bottom:9px; text-transform: uppercase; font-size:13px; font-weight:700;}
#calc_form #calc-btn:focus {box-shadow:none;}
#calc_form #calc-btn:hover {background-color:#3f89cf;}
.calc-results h5 {height:auto;}
.payoff_date, .money_saved {justify-content:space-between;}
.payoff_date input, .money_saved input {padding:10px 12px;height:auto; font-family: 'Montserrat', sans-serif !important;font-weight:300; font-size:14px; background-color:#ebebeb !important; border:0px; box-shadow:none; border-radius:0px; color:#686868;}
.payoff_date input:focus, .money_saved input:focus {box-shadow:none;}
.calc-results .placeholder {color:#686868; font-size:14px;padding-right:12px !important; padding-top:10px !important; font-family: 'Montserrat', sans-serif !important;font-weight:300; }
.money_saved_min {padding-top:10px;}
.payoff_date_min {padding-top:14px;}
.daily-min h5, .Amortization h5 {height:auto;}
.daily-min h5 {padding-top:7px;}
.Amortization h5 {padding-top:12px;}
.daily-min table, .Amortization table {margin-top:25px;}
table {-webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);
box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.10);}
table th { background-color:transparent!important;; font-size:13px;font-family: 'Montserrat', sans-serif !important; font-weight:400;}
table#daily-tabular th {padding:10px 11px!important;}
table tbody tr:nth-child(1){display: none!important;}
table#daily-tabular td{padding-top:14px!important; padding-bottom:14px!important; font-size:14px; color:#647485!important;font-family: 'Montserrat', sans-serif !important;}
table tbody td {background-color:transparent!important;}
table tbody tr:nth-child(even) {background: #f9f9f9}
table tbody tr:nth-child(odd) {background: #FFF}
table thead th:hover, table thead th:focus{background-color:#fff !important;}
.calc-load-more a { width:148px; margin:0px auto; background-color:#1189fa; font-size:14px; text-transform: uppercase; border-radius:0px; padding-left:35px; padding-right:35px;padding-top:10px; padding-bottom:10px; text-transform: uppercase; font-size:13px; font-weight:700; color:#fff;}
.calc-load-more a:hover {color:#fff;text-decoration: none; background-color:#3f89cf;}
.tab {display: none;}
td:hover::after, th:hover::after {background-color:#fff !important;}
.calc-load-more {margin-top:40px;}
tbody tr:hover{background-color:#eff7ff!important;}
@media (max-width:968px) {
  .calc-results .placeholder, .payoff_date input, .money_saved input {font-size:12px;}
  #daily {overflow-x:scroll;}
}
@media (max-width:850px) {
  #calc_form h5 {height:auto;}
  .calc-results .placeholder, .payoff_date input, .money_saved input {font-size:11px;}
  #amort {overflow-x:scroll;}
}
@media screen and (max-width: 540px) {
	.result-inp input{
		margin-bottom: 0px;
		text-align: center;
	}
	.result-inp .placeholder{
    	padding: 2px 0px 12px;
		position: inherit;
	    color: #5f5f5f;
	    text-align: center;
	    font-size: 12px;
	}
}

table#daily-tabular th{
	padding:2px 3px;
	text-align: center;
}
table#daily-tabular td{
	padding:5px 20px;
}

/*table effects*/
body:not(.nohover) tbody tr:hover {
  background-color: #ffa;
}

td:hover::after,
thead th:not(:empty):hover::after,
td:focus::after,
thead th:not(:empty):focus::after { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  top: -5000px;
  width: 100%;
  z-index: -1;
}

td:hover::after,
th:hover::after {
  background-color: #ffa;
}

td:focus::after,
th:focus::after {
  background-color: lightblue;
}

/* Focus stuff for mobile */
td:focus::before,
tbody th:focus::before {
  background-color: lightblue;
  content: '';  
  height: 100%;
  top: 0;
  left: -5000px;
  position: absolute;  
  width: 10000px;
  z-index: -1;
}


table {
  overflow: hidden;
}

td, th {
  position: relative;
  outline: 0;
}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.row.calc-results{
  margin-bottom: 10px;
}

button.tablinks{
  width: 50%;
}

tr { display:none; }

tr:nth-child(1), tr:nth-child(2), tr:nth-child(3), tr:nth-child(4) { display:table-row; }

.calc-load-more a:focus{
  outline: none;
}