/* Primary Colours */
#kreditkort24_form .company_box .readmore svg,
#kreditkort24_form .company_box .rating svg,
#kreditkort24_form .kreditkort24_slider svg,
#kreditkort24_form .company_box .readmore a,
.kkfilters .filterboxlabel,
.company_box .open-drop-table a {color:#000000; fill: #000000;}

.kkfilters {border: 1px solid #C3C4C6;background-color: #fff;}
.kk_filter input:checked ~ .checkmark {background-color: #0A0A0A;}
.kk_filter:hover input ~ .checkmark {background-color: #cccccc;}

/* Read more, slider fill */
#kreditkort24_form .company_box .lowrow.mobile .readmore a,
#kreditkort24_form .kreditkort24__fill,
#kreditkort24_form .filtergrid input[type=checkbox]+label,
#kreditkort24_form .sorting input[type=radio]+label {background-color: #E7E7E7;}

/* Buttons hover */
#kreditkort24_form .filtergrid input[type=checkbox]:checked+label,
#kreditkort24_form .filtergrid input[type=checkbox]:hover + label,
#kreditkort24_form .sorting input[type="radio"]:checked + label,
#kreditkort24_form .sorting input[type="radio"]:hover + label{background-color: #8A8A8A;}

/* Button labels */
#kreditkort24_form .filtergrid input[type=checkbox]:checked+label,
#kreditkort24_form .filtergrid input[type=checkbox]:hover + label,
#kreditkort24_form .sorting input[type="radio"]:checked + label,
#kreditkort24_form .sorting input[type="radio"]:hover + label,
#kreditkort24_form .company_box .lowrow.mobile .readmore a,
#kreditkort24_form .company_box .lowrow.mobile .readmore a svg,
#kreditkort24_form .company_apply a {color: #FFFFFF; fill: #FFFFFF;}

/* Output Labels and example */
.company_details span.label,
.example {color: #818181;}

/* Apply button */
.company_apply a {background: #42a31f;}
	
/* General Rules */
#kreditkort24_form {
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	margin: 20px 0;
}

/* Sets up the sliders and filters */
.filters_grid {display:block;max-width: 100%;margin: 0 auto;}

/* Number of Offers */
.companys_matches {text-align:center; padding-top: 7px; font-size: 15px}

/* Filters */
.kkfilters {padding: 6px;border-radius: 4px;text-align: left;margin: 0 auto 12px;}
.kkfilters .filterbox {display:none; margin-top: 12px;}
.kkfilters .filterset {margin-bottom: 6px;}
.kkfilters .filterboxlabel {cursor: pointer;}
.kkfilters .filterboxlabel svg {vertical-align: middle;}
.kkfilters .filterlabel {display: inline-block;margin-right:18px;font-weight: 900;}
.kk_filter {display: inline-block; position: relative; padding-left: 25px; margin: 3px 18px 3px 0; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.kk_filter input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 1px; left: 0; height: 18px; width: 18px; background-color: #eee; border: 1px solid #FFC801;}
.checkmark:after {content: ""; position: absolute; display: none;}
.kk_filter input:checked ~ .checkmark:after {display: block;}
.checkmark:after {left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.sortingrow {display:grid;grid-template-columns:30% 65% 5%;grid-column-gap: 0;}

/* Sorting */
.sorting {font-size: 100%; width:100%;}
#kreditkort24_form select {font-family: inherit;font-size: 90%;height:auto;border:1px solid #e8e8e8;box-sizing: border-box;line-height:normal;margin: 0;padding: 3px; margin-bottom: 27px; background: white;}
.sorting::after {clear: both; content: " "; display: block; }

/* Offers */
.one-offer, .no-offers {display:none;}

.kreditkort24_rates {margin-top: 10px;}

/* Company Box Rules */
.company_box {text-align: left; box-sizing: border-box;position: relative;background:#ffffff;border: 1px solid #E7E7E7;background-color: #f1f2f7; border-radius: 6px;margin-bottom: 12px;}

/* Promo Ribbon */
.company_box .ribbon {position: absolute;top: 0;left: 55%;transform: translate(-0%, -16px);padding: 4px 8px;background-color: hsl(180deg 54.39% 84.79%); border-radius: 4px; font-size: 15px;}

/* Desktop row */
.company_box .desktoprow {display:flex;}
.company_box .first {text-align:left;display: inline-block;vertical-align: text-top;padding:20px;width:260px;background-color: #ffffff;border-top-left-radius: 7px;border-bottom-left-radius: 7px;}
.company_box .first img {margin:0 !important;overflow: hidden;width: 220px;}
.company_box .second {padding:20px;flex:1;}

.company_box .company_name {display: inline-block;vertical-align: text-top;}
.company_box .company_name .companyname {font-size:140%;font-weight: 600; margin-top: -8px;}
.company_box .desktoprow .company_details {font-size:110%;display:grid;grid-template-columns:22% 22% 22% 22%;grid-column-gap: 4%;margin-top:12px;}
.company_box .desktoprow .company_details div {padding-left: 10px; padding-bottom: 5px; padding-top: 5px; margin-bottom: 7px; background-color: #ffffff; border-radius: 4px;}
.company_details span.label {display:block;font-size:15px;}

/* Features */
.company_box .desktoprow .features div {margin: 4px 0;}
.company_box .features {font-weight: 300;margin: 12px 0; margin-top: 25px;}
.company_box .features svg {vertical-align:middle;margin-right: 8px; margin-top: -3px;}
.company_box .features svg.ja_icon {fill:#42a31f;}
.company_box .features svg.nei_icon {fill:red;}

/* Mobile row */
.company_box .mobilerow {display:none;text-align: center;}
.company_box .mobilerow img {width:75%;}
.company_box .mobilerow .company_details table {width:100%;}
.company_box .mobilerow .company_details table td {width:50%;padding: 0; border:none; font-size: 15px;text-align:center;}
.company_box .mobilerow .company_details table tr:nth-child(odd) {font-weight:600;}

/* Apply Button */
.company_apply {text-align: center;width: 220px;}
.company_apply a {display: block; font-weight: 600; text-decoration: none; font-size: 90%; border-radius: 4px; padding: 18px 6px; margin-top: 10px;}
.company_apply svg {fill: #FFF;vertical-align: middle;}
.company_apply.mobile {display:none}

/* Example and Warning */
.warning img {float: left;margin: 4px 12px 0 0;}
.warning:after {content: '';display: block;clear: both;}
.warningtitle {font-size:17px; margin: 2px 0 6px 0; font-weight: 900;}
.example {font-size:15px; margin: 2px 0 30px 0;}

/* More info  */
.company_box .open-drop-table a {text-decoration: none;}
.company_box .readmore_buttons {display:grid;grid-template-columns:32% 32% 32%;grid-column-gap: 2%;}
.company_box .readmore {line-height: 36px;text-align: center;}
.company_box .readmore a {display:block;font-weight:500;text-decoration: none;border-top-left-radius: 4px;border-top-right-radius: 4px;background-color: #4fa02f;color:#ffffff;cursor: pointer;}
.company_box .readmore a:active {color: #ACE1AF;}
.company_box .readmore svg {fill: #FFF;vertical-align: text-bottom;}
.company_box .readup {display:none;}

/* Read More Content */
.company_box .drop { display: none; margin-top: 12px;text-align: left;}
.company_box .drop .featurelist ul {margin: 0;}
.company_box .drop .featurelist li {list-style: none;padding: 4px 0;display: flex;align-items: flex-start; gap: 0.5rem;}
.company_box .drop .featurelist li svg {flex-shrink: 0;width: 1em;height: 1em;margin-top: 0.2em;}
.company_box .drop .featurelist li svg.plus {height: 1em; fill: #42a31f;}
.company_box .drop .featurelist li svg.minus {height: 1em; fill: red}
.company_box .drop .infosection {border: 1px solid #41c1c9; padding: 12px;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}
.company_box table  td:nth-child(2) {width:20%}
.company_box .drop .info {font-style: italic;font-size:12px;}

.company_box .drop .nokkel {font-weight:600; margin-top: 30px; margin-bottom: 15px; font-size: 20px;}
.company_box .drop .nokkeltable {background-color: #ffffff; padding:6px; width:100%; margin-bottom: 18px; font-size:15px;}
.company_box .drop .nokkeltable table {width:100%;}
.company_box .drop .nokkeltable table td {padding: 6px;border-bottom: 1px solid #cccccc;}
.company_box .drop .nokkeltable table tr:last-child td {border:none;}
.company_box .drop .nokkeltable table td:nth-child(even) {text-align: right;width:50%}

.company_box .drop .insurancetext {margin-top: 12px;}

/* Tooltips */
.tooltip {display:inline-block;margin-left: 6px;}
.tooltip svg {fill: #000000;cursor:pointer;}

/* Show More */
#lc_show_more{text-align:center;cursor:pointer;margin:15px auto 15px auto;}

/* 900px wide screens */
@media only screen and (max-width: 900px) {
	.company_box .midrow.full .company_details {font-size:110%;}
	.company_box .midrow.full .company_details div {display:inline-block;padding-right:10px;margin-right: 10px;}
	.company_details span.label {font-size:15px;}
}

/* 600px wide screens */
@media only screen and (max-width: 600px) {
    .sortingrow {display:grid;grid-template-columns:50% 50% 0%;grid-column-gap: 0;}
    .kreditkort24-filterlabel li.check {padding-right: 0;}
	.company_box .desktoprow {display:none}
	.company_box .mobilerow {display: block;margin: 12px 0; padding-top: 30px;}
	.company_details:first-of-type {text-align: left;}
	.company_details:last-of-type {text-align: right;}
	.company_apply {display:block;margin: 16px auto 0;text-align: center;}
	.company_apply a {margin-top: 30px;}
	.company_box .open-drop-table {margin-top:12px;}
	.company_box .features {text-align: left; padding-left: 10px; font-size:15px}
	.company_box .drop .nokkel {padding-left: 12px; font-size: 18px;}
	.company_box .drop .nokkeltable table td {padding: 6px; border-bottom: 1px solid #cccccc; font-weight: 500;}
	.productname {margin-top: 15px; margin-bottom: 20px; padding-left: 5px; padding-right: 5px;}
	.company_box .company_name .companyname {margin: 5px 0 20px 0}
	.svg.readup {margin-left: 0; margin-top: 0;}
	.company_box .features svg {margin-right: 7px;}
	.kreditkort24-filterlabel .check {width:50%;}
	#kreditkort24_form .filterlabel, #kreditkort24_form .sortinglabel {padding-bottom: 0;}
	#kreditkort24_form .showfilters {display:none;}
	#kreditkort24_form .showsorting {display:none;}
	#kreditkort24_form .sortinggrid {display:block;}
	#kreditkort24_form .features {margin-top:20px;}
	#kreditkort24_form .example {margin-bottom: 18px; margin-top: 18px; line-height: 18px;}
	.company_box .drop .nokkeltable {width:100%}
	.company_box .ribbon {position: absolute; top: 0; left: 50%; transform: translate(-50%, -16px); padding: 3px 6px; background-color: hsl(180deg 54.39% 84.79%); border-radius: 4px; font-size: 15px;}

}