html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

#kssframe {box-sizing: border-box;border: 1px solid silver;border-radius: 4px;padding:15px;background:#fff;}

#kks h2 {text-align: center;text-align: center;font-size: 24px;line-height: 39px;}

/*paragraphs*/
#kks p {margin:8px 4px;padding:0;text-align: left; line-height: 1.3em;}
#kks p.warning {color:red;}
#kks p.warning input, #kks p.warning select, #kks p.warning textarea  { border-color: red; }
#kks p.loading { background-image: url('805.gif'); width: 100%; height: 64px; display: block; background-position: center center; background-repeat: no-repeat; }

/*fieldsets*/
#kks div.fieldsets {width: 100%; position: relative; overflow: hidden;  -webkit-transition: height 1s; /* Safari prior 6.1 */ transition: height 1s;}
#kks div.fieldsets fieldset {width: 100%;display: none; position: absolute;  border: none; float: left;box-sizing: border-box;margin:0;padding: 0;}
#kks div.fieldsets fieldset .inner-html{width: 100%;float: left;box-sizing: border-box;}
.buttons { height: 50px; clear:both;margin-top:20px;}


.inner-loading { display: none; background-repeat: no-repeat; background-image: url('images/loading.gif'); background-position: 50% 100px; background-size: 60px 60px;text-align: center; padding-bottom: 120px; font-weight: bold; }

#template { display: none; }

.rsv_company{border-bottom: none;border-top:1px solid #666;}

#kks .logo {height:38px;}

#kks .person {margin: 12px 0;clear:both;box-sizing: border-box;}
#kks .supplement1 {display:none;}

#kks .suppltotal {}
#kks .total {display:none;}

#kks .basic {margin-top:15px;box-sizing: border-box;}
#kks .supplement {margin-top:15px;box-sizing: border-box;}

#kks table, #kks table tr, #kks table td {border:none;}

#kks .rsv_annual {width:60%;color:#343848;}
#kks .rsv_annual table td.output {text-align:left;width:40%}
#kks .rsv_annual b {font-size: 1em;}

.readmore {cursor: pointer;}

.more_info table td.output {text-align:left;width:40%}
.more_info .kks_main_row td {font-weight: bold; padding-top: 25px; }

#kks .rsv_savings .positive {color:green;}
#kks .rsv_savings .negative {color:red;}
#kks .rsv_inside {min-width: 180px;}
#kks .rsv_savings { float: right; }

#kks .rsv_details .kks_main_row td {font-weight: bold;}

.output.positive {color:green;font-weight: 900;font-size:120%;}
.output.negative {color:red;font-weight: 900;font-size:120%;}

/* Inputs*/
.kkslabel {font-weight: 900;margin: 18px 0 2px 0;}

#kks input[type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#kks span.select {
	position: relative !important;
	display: block !important;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: auto;
}
#kks input[type=text], #kks input[type=number], #kks input[type=tel], #kks input[type=email], #kks select, #kks textarea {
	height: 3em;
    line-height: 1.5;
    padding: 6px 10px;
	border: 1px solid #ccc;
	margin: 3px 0 10px 0;
	width: 100%;
	box-sizing: border-box;
	color: #2C3E50;
    font-size: 16px;
    outline: none;
}

#kks input[type=range] {
    background: none;
    border:none;
    padding:0;
    margin: 6px 0 0 0;
}

#kks select {
    background: white;
    margin-right:6px;
    padding: 6px 10px;
}

#kks select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

#kks input[type="checkbox"] {display:none;}
#kks input[type="checkbox"] + label::before {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#kks input[type="checkbox"].required+ label::before {border-color: #15528c;}

#kks input[type="checkbox"].warning + label::before {border-color: red;}

#kks input[type="checkbox"]:checked+label::before {
    box-shadow: inset 0px 0px 0px 3px #fff;
    background-color: #FF135D;
}

#checkingpostcode{display:none;margin-bottom: 10px;}
#invalidpostcode{display:none;margin-bottom: 10px;color:red}

#kks ::placeholder {color: #CCCCCC;}
.entry #kks p {margin: 10 10px 4px 10px;}
#kks input[type=text]:focus, #kks textarea:focus, #kks select:focus{border: 1px solid #000 !important;}
#kks fieldset h2 {color:#FF135D;padding: 0;margin:0 0 24px 0;text-align: left;font-size: 24px;}
#kks fieldset h3 {color:#15528c;padding: 1px 0 1px 0;text-align: center;}
#kks fieldset div.left{width:100%;text-align: left;line-height: 1.1em;}
#kks fieldset div.right{width:100%;padding: 0 4px 0 4px;line-height: 1.5em;margin: 2px 0;text-align: left; font-weight: 300;}

#kks fieldset div.label{width:100%;padding: 0 4px 0 4px;text-align: left;line-height: 1.1em;margin: 10px 0 0 0;font-weight:300;}

#kks fieldset div.right .warning {border-color: red;}

#kks p.warning > label { color: red;}
#kks div.warning { color: red;}

#kks .validator {margin-left: -999px;height:0;}

/* Arrows
#kks select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    radial-gradient(#ddd 70%, transparent 72%);
  background-position:
    calc(100% - 20px) calc(13px),
    calc(100% - 12px) calc(13px),
    calc(100% - .5em) 4px;
  background-size:
    8px 8px,
    8px 8px,
    1.5em 1.5em;
  background-repeat: no-repeat;
}
 */
/* Buttons */
#kks .checkradio {display: grid;
    grid-template-columns: 48.5% 48.5%;
    grid-gap: 2%;
    grid-row-gap: 10px;
}

#kks .checkradio.franchisehigh {display: grid;
    grid-template-columns: 15% 15% 15% 15% 15% 15%;
}

#kks .checkradio.franchiselow {display: grid;
    grid-template-columns: 12.57% 12.57% 12.57% 12.57% 12.57% 12.57% 12.57%;
}

#kks #franchiselow {display:none;}

#kks .checkradio input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
#kks .checkradio label {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #979797;
    opacity: .5;
    color: #000;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    padding: 7px 0;
    transition: all .2s linear;
}

#kks .checkradio label span {font-weight: 900;}

#kks .checkradio label:hover, #kks .checkradio input[type="radio"]:checked + label {background: #e61b1b;color: #fff;border: 1px solid #e61b1b;opacity: 1;}

.results {display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 1%;
    margin: 12px 0 12px 0;
    text-align: left;
}

.results .thebox {padding: 10px;border: 1px solid #f0f0f0;border-radius: 10px;color:#8b8b8b;}
.results .lowrepayment, .results .highrepayment {color: #a71e22;;font-size:20px;font-weight: 900;padding: 6px 0;}

.results span {font-size:22px;}

.outputs {text-align: left;background: #009ACE;padding:12px;margin-top: 25px;}
.outputs .monatesrate {font-weight: 900;}

.dategrid {display: grid;
    grid-template-columns: 32.66% 32.66% 32.66%;
    grid-gap: 1%;
}

#kks .ort {font-style: italic;color:#666;margin: -6px 0 12px;}

/*buttons*/
#kks .action-button {
	width: 150px;
	background: #e61b1b;;
	color: white;
	border: 0 none;
	cursor: pointer;
	padding: 12px 5px;
	margin: 0;
	bottom: 0;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

#kks .submit a {
	width: 150px;
	background: #e61b1b;;
	color: white;
	border: 0 none;
	cursor: pointer;
	padding: 12px 5px;
	margin: 0;
	bottom: 0;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    display:inline-block
}

#kks .changefilter {margin-bottom:24px;}

#kks .changefilter a {
	background: #FF135B;
	color: white;
	border: 0 none;
	cursor: pointer;
	padding: 7px 20px;
    text-decoration: none;
    display:inline-block;
    font-size: 12px;
}

#kks .changefilter a:hover {
    background: #555555;
}

#kks .nextslide, #kks .submit {position:absolute;right:0;bottom:15px;-webkit-appearance: none;}
#kks .previousslide {position:absolute; left:0;bottom:15px;}

/*progressbar*/
#progressbar {
	margin: 10px 0 25px 0;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
    line-height: 30px;
}

#progressbar ul {padding-inline-start: 0;}

#progressbar li {
	list-style-type: none;
	color: white;
	font-size: 16px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	font-weight: 600;
	width: 30px;
	line-height: 30px;
	display: block;
	color: #000000;
	background: #ccc;
	border-radius: 15px;
	margin: 0 auto;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: calc(100% - 30px);
	height: 2px;
	background: #ccc;
	position: absolute;
	left: -50%;
    margin: 0 15px;
	top: 14px;
}
#progressbar li.active:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
    background: #15528c;
	color: white;
}

/* Submitting Animation */
.working_loading {
	
	font: 300 4em/150% Impact;
	color: rgba(6, 115, 152, 1);
	text-align: right;
	position: relative;
	left: calc(100% - 30px);
	bottom: 18px;
	
}

.buttons_working { display: none; }

.working_loading:after {
	content: ' .';
	animation: dots 1s steps(5, end) infinite;
	color: rgba(6, 115, 152, 1);
}

@keyframes dots {
	0%, 20% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 0);
	}
	40% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 0),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	60% {
		color: rgba(6, 115, 152, 0);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
	80%, 100% {
		color: rgba(6, 115, 152, 1);
		text-shadow:
			-.25em 0 0 rgba(6, 115, 152, 1),
			-.5em 0 0 rgba(6, 115, 152, 1);
	}
}

/*cell phone*/
@media only screen and (max-width: 800px) {
    #kks div.fieldsets fieldset {padding: 8px;}
    #kks fieldset h2 {8px 0;text-align: left;font-size: 18px;}
    .kkslabel {margin: 8px 0 2px 0;}
    #kks .person {padding: 8px;margin: 8px 0;}
    .checkradio li {display:block;padding: 0 8px 0 0;margin-bottom: 8px}
    #kks .rsv_annual {width:100%;}
    #kks .rsv_box table {font-size: 14px;} 
    .more_info .kks_main_row td {padding-top: 12px;font-size: 16px;}
}

.error { border: 1px solid red !important; }