/* General Rules */
#sht_form {
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
	margin: 0px 0;
	padding:0px;
	font-size:16px;
	color: #000000;
}
.offers {
		font-size: 15px;
}
.sht_search {text-align:center;}

.sht_grid {display:grid;grid-template-columns:39% 59%;grid-column-gap: 2%;margin: 0 auto;}
.filters_grid {display:none;}

/* Circle Rules */
.circle-down { height: 25px; width: 25px; position: absolute; top: 0; left: 0; border-radius: 12.5px; border: 2px solid #6300e2; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
.circle-down:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #6300e2;
	top: 50%;
	margin-top: -1.5px;
	left: 50%; 
	margin-left: -7.5px;
}
.circle-up { height: 25px; width: 25px; position: absolute; right: 0; top: 0; border-radius: 12.5px; border: 2px solid #6300e2; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
.circle-up:after {
	content: "";
	width: 15px;
	position: absolute;
	height: 3px;
	background-color: #6300e2;
	top: 50%;
	left: 50%; 
	margin-top: -1.5px;
	margin-left: -7.5px;
}
.circle-up:before {
	content: "";
	width: 3px;
	position: absolute;
	height: 15px;
	background-color: #6300e2;
	top: 50%;
	left: 50%;
	margin-top: -7.5px;
	margin-left: -1.5px;
}

.output-number {color: #000000;font-size:18px;text-align: center;}
.output-number output {color: #000000;font-weight: 500;}
.output-pad	{ padding: 0 0px; line-height: 25px; min-height: 25px; text-align: center;position: relative;}
.circle-up:hover, .circle-down:hover { background-color: #d2b0ff; cursor: pointer; }
.circle-control {touch-action: none;}

/* Sliders */
.sht,
.sht__fill {
	background: #FFFFFF;display: block;height: 1em;
	-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
-webkit-border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-ms-border-radius: 0.3em;
	-o-border-radius: 0.3em;
	border-radius: 0.3em;
}

.sht {
	position: relative;
	height: 0.7em;
	width: 100%;
	margin:0.8em 0;
}
.sht--disabled {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	opacity: 0.4;
	background-color:#ffff;
}

.sht__fill {
	height: 0.7em;
	width: 100%;
	background: #8e43f0;
	position: absolute;
	top: 0;
}

.sht__handle {
	background: #6300e2;
	cursor: pointer;
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	position: absolute;
	top: -0.4em;
 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	border-radius: 1em;

	}

input[type="range"]:focus + .sht .sht__handle {
	-webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
	-moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
	box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}

.sht-range {margin-bottom: -10px; padding:15px; border-radius:8px;}

/* Inputs */

.inputs {display:none;}

#sht_form input[type=text] {
	width:100%;
	border: 1px solid #020025;
	margin-left: 5px;
	padding: 6px;
	box-sizing: border-box;
	color: #000000;
	background:#FFFFFF;
	font-size: 16px;
	outline: none;
	border-radius:6px;
	text-align: center;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add a slight shadow for depth */
}

/* Number of Offers */
.companys_matches {text-align:center; margin-bottom: 12px; color:#585858;}

/* Sorting */
#sht_form .sortingbuttons {display:none}
#sht_form .sortingbuttons svg {height:11px;width:11px;margin-top: -2px; display: inline-block;vertical-align: middle;color: #585858;}
#sht_form .sortingbuttons svg .arrows {stroke: #b32566; fill: #585858;}
#sht_form .sorting input[type=radio]+label {margin: 0 6px 6px 0; cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;border: 2px solid #347fff;background-color: #F0F8FF; border-radius: 4px;padding:3px 6px;line-height: 20px;white-space: nowrap;display: inline-block; font-size: 14px;text-align: center;width:100%;}
#sht_form .sorting input[type="radio"] {display: none;}
#sht_form .sorting input[type="radio"]:checked + label {background-color: #0da1ed;outline: 0;}

/* Filters */
.shtfilters {text-align:center;width:100%;display:block;margin-bottom: 12px;padding:5px; border-radius:80x;margin-top:20px;
}

.shtfilters .filterboxlabel {
    color: #0A0A0A; /* Retain text color for readability */
    margin-right: 12px;
    font-weight: 600;
	font-size:14px;
	margin-top:15px;
    background-color: #ffffff; /* Use a more vibrant background color for visibility */
    border: none; /* Opt for a cleaner look without a border */
    padding: 8px 16px; /* Increase padding for better touch interaction */
    border-radius: 20px; /* Use a larger border-radius for a more modern, pill-like shape */
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center content horizontally */
    cursor: pointer; /* Indicate it's clickable */
    transition: background-color 0.3s ease, box-shadow 0.2s ease; /* Smooth transition for hover effect */
    text-shadow: 0 1px 0 rgba(0,0,0,0.1); /* Subtle text shadow for depth */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);  /* Soft shadow for depth */
}

.shtfilters .filterboxlabel:hover {
    background-color: #d3d3d3; /* Darken the background on hover for interaction feedback */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Enhance shadow for a raised effect on hover */
}

.shtfilters .filterboxlabel:after {
    content: '\25BC'; /* Add a downward triangle (or arrow) to indicate "expand" */
    font-size: 0.8em; /* Adjust size of the icon */
    margin-left: 8px; /* Space between text and icon */
    transition: transform 0.3s ease; /* Smooth transition for rotation */
}

/* Rotate icon when active/expanded (assuming a class is added dynamically) */
.shtfilters .filterboxlabel.active:after {
    transform: rotate(180deg); /* Flip the icon to indicate "collapse" */
}

.shtfilters .filterbox {margin: 12px 0;}
.shtfilters .filterslabel {color:#0A0A0A;margin-right:12px;font-weight: 900;}

.shtfilters .filterslabel:after{
    content: "\a";
    white-space: pre;
}

.container {
	display: inline-block;
	position: relative;
	padding: 10px 8px 10px 35px; /* Adjusted padding for top, right, bottom, and more space on left */
	margin: 6px 8px 6px 0;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: white; /* Set the background color to white */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add a slight shadow for depth */
	border-radius: 4px; /* Optional: adds rounded corners */
	width:146px;
}

.container:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow for lift effect */
}


.container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

.checkmark {
	position: absolute;
	top: 50%; /* Center vertically */
	left: 10px; /* Adjust as necessary to align with text */
	height: 18px;
	width: 18px;
	background-color: #eee;
	border: 1px solid #6300e2;
	transform: translateY(-50%); /* This will perfectly center it vertically */
}

.container:hover input ~ .checkmark {
	background-color: #ccc;
}

.container input:checked ~ .checkmark {
	background-color: #0A0A0A;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.container input:checked ~ .checkmark:after {
	display: block;
}

.container .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);
}

.ribbon {
  position: absolute;
  right: -3px;
  top: -10px; /* position above the box */
  padding: 5px 10px;
  background: #FF0000;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14.5px;
  color: #ffffff;
  border-radius: 3px; /* add rounded corners */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;     
}


/* Bank Box Rules */
.companys_header {border: 2px solid #f4f4f4;background-color: #f4f4f4;padding: 0 20px;}
.companys_header div {text-align: center;line-height: 30px;}



.sht_box {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    margin-top: 35px;
    text-align: center;
    padding: 25px;
    background: #FFF;
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow and transform */
}

.sht_box:hover {
    box-shadow: rgba(50, 50, 93, 0.3) 0px 3px 10px -2px, rgba(0, 0, 0, 0.35) 0px 2px 4px -1px; 
}

/* Media query for screens smaller than 768px (mobile devices) */
@media (max-width: 768px) {
    .sht_box:hover {
        /* More prominent shadow change for mobile */
        box-shadow: rgba(50, 50, 93, 0.35) 0px 5px 15px -3px, rgba(0, 0, 0, 0.4) 0px 3px 6px -2px; 
    }
}

.sht_box.sc_promoted {
    /* specific styles for sht_box with sc_promoted */
    border: 2px solid #8e43f0;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    /* other specific styles */
}

.company_apply {
    line-height: 50px;
}

.company_apply a, .company_apply span {
    display: block;
    background: #8e43f0;
    font-size: 18px;
    font-weight: 700;
    color: #FFF !important;
    text-decoration: none;
    box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for background color, shadow, and transform */
}

.company_apply a:hover, .company_apply span:hover {
    background: #7629c1; /* Darkened background color */
    box-shadow: rgba(240, 46, 170, 0.6) 5px 5px, rgba(240, 46, 170, 0.5) 10px 10px; /* More prominent shadow */
    transform: translateY(-2px); /* Slightly raise the button */
}

.company_apply.mobile {
    display: none;
}




.sht_box .toprow {display: grid;grid-template-columns: 18% 60% 18%;grid-column-gap: 2%;margin-bottom: 10px;align-items: center;}

.company_logo img {
	vertical-align: middle;
	width: auto !important;
	max-height: 70px !important;
	margin-left: auto;
	max-width: 80%;
	padding-top: 15px;
}

.company_results {display:grid;grid-template-columns: 23.5% 23.5% 23.5% 23.5%;grid-column-gap: 2%}




.product {
	color: #2E2E2E;
	text-align: center;
	font-size: 14px !important;
	font-weight: bold !important;
	margin-top:6px;
	display:none;
}

.sourceclass {padding: 10px;border-radius: 10px;font-size:13px;}
.sourceclass.all {background-color: #f2f5f7;display:none}
.sourceclass.cf {background-color:	#90EE90;}
.sourceclass.ren {background-color: #90EE90;}

.campaigndata {
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    background-color: #CBC3E3; /* Replace with your desired color */
}

.sht_box .midrow {
	display: none;
	grid-template-columns: 25% 25%;
}

.sht_box .lowrow {display:grid;grid-template-columns: 18% 60% 18%;grid-column-gap: 2%;line-height: 40px;}

.company_details {color:#2E2E2E; display: inline-block; vertical-align: middle;font-size:17px ;padding:6px;border-radius: 6px;}
.company_details br {line-height: 150%;}
.company_details span {font-size:14px;}

.company_details.one {background: #d2b0ff; font-size:23px;padding:1px;margin-bottom:-8px;}
.company_details.two {background: #f3f1f6;}
.company_details.three {background: #f3f1f6;}
.company_details.four {background: #f3f1f6;}

.company_price b {font-size:24px;}

.company_inside {text-align: center;display:none}
.company_inside a.applylink {text-decoration: none;color:#004183;}

/* Features */
.sht_box .features { font-size: 13px;font-weight: 300;line-height: 18px;text-align: left;padding-left: 35px;}

/* More Info Link */
.readmore { color: #8e8e8e; text-decoration: none;margin: 0 16px 0 0; font-size: 14px;}
.sht_box .drop { display: none;text-align:left;}
.sht_box .drop .grid{ display: grid;grid-template-columns: 49% 49%;grid-column-gap: 2%;}
.sht_box .drop div {padding: 12px;background-color: #f2f5f7;border-radius:8px;}

/* Company Page Link*/
.reviews { color: #0da1ed; text-decoration: none; }

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

/* Show More */
#lc_show_more {
  display: block; /* Will make the element behave like a block-level element */
  position: relative; /* Added for positioning context */
  width: fit-content; /* Makes the width of the element fit its content */
  margin: 30px auto; /* Increased top margin, auto horizontally centers the block */
  padding: 10px 20px; /* Padding inside the button */
  font-size: 18px; /* Font size for clarity */
  border: 1px solid #000; /* Border around the button */
  background-color: #ffffff; /* White background color */
  border-radius: 5px; /* Rounded corners for a button-like appearance */
  font-weight: bold; /* Bold font for the text */
  text-align: center; /* Centers the text inside the button */
  cursor: pointer;
}

#lc_show_more:hover {box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);}


/* Radio */
.searchbox {margin-top: 12px;}
.searchbox .container {display: block; font-size:17px; margin: 25px 0;}
.searchbox .container input[type=radio	 ]:not(old) {width: 2em; margin: 0; padding: 0; font-size: 1em; opacity: 0;}
.searchbox .container input[type=radio	 ]:not(old) + label { display: inline-block; margin-left: -2em; line-height: 18px;}
.searchbox .container input[type=radio	 ]:not(old) + label > span {display: inline-block; width: 18px; height: 18px; margin: 0 10px 0 10px; border: 1px solid rgb(27,152,224); border-radius: 9px; background: rgb(255,255,255); vertical-align: bottom;}
.searchbox .container input[type=radio]:not(old):checked + label > span > span {display: block; width: 18px; height: 18px; border-radius: 9px; background: rgb(27,152,224);}

/* Font Awesome */
/*@font-face {font-family: FontAwesome;src: url("webfonts/fa-solid-900.ttf") format("truetype"); }*/

.sht_box .fas.fa-star, .sht_box .fas.fa-star-half-alt, .sht_box .far.fa-star	{padding: 1px;color: #f89426;}
.sht_box .fas.fa-check {color: #347fff;}

.company_details.one {
  position: relative;
}

.tooltip-container {
  cursor: pointer;
  display: inline-block; /* Encapsulate the clickable area */
}

.tooltip-question-mark {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  background-color: #f2f5f7; /* Slightly lighter to contrast with hover state */
  color: #000000;
  width: 30px; /* Adjusted for a more circular appearance */
  height: 30px; /* Adjusted for a more circular appearance */
  line-height: 30px; /* Adjusted for a more circular appearance */
  text-align: center;
  border-radius: 50%; /* Make it round */
  margin-left: 5px; /* Space between the text and the question mark */
  display: inline-block; /* Ensure it respects width and height */
  padding: 0; /* Adjust padding if necessary */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
  border: 2px solid #cccccc; /* Subtle border */
}

.tooltip-question-mark:hover {
  background-color: #e8e8e8; /* Slightly darker on hover for a button-like feel */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
}

/* Hide tooltip by default */
.tooltip-question-mark::after {
  display: none;
  content: attr(data-tooltip);
  position: absolute;
  background-color: rgba(255,255,255,0.86);
  font-weight: normal;
  color: #000000;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  text-align: left;
  white-space: normal;
  width: 450px;
  right: 100%;
  top: -100px;
  transform: translateX(0);
  z-index: 1000;
}

/* Show tooltip when .active class is present on the container */
.tooltip-container.active .tooltip-question-mark::after {
  display: block;
}



/* 600px wide screens */
@media only screen and (max-width: 800px) {
	.ribbon {font-size: 13px;position: relative;display: inline-block;right:0px;}
	 .tooltip-question-mark:hover::after {
      display: none; /* Hide the tooltip on mobile */}
	.tooltip-question-mark {
		display:none;}
	.tooltip-container {cursor:default;}
	.sht_grid, .titlerowsht {display:block !important;}
	.sht_box .toprow {display:grid;grid-template-columns:50% 50%;}
	.sht_box .company_results {display:none;}
	.sht_box .midrow {display:grid;grid-template-columns:49% 49%;grid-column-gap: 2%;grid-row-gap: 4%;}
	.sht_box .lowrow {display:block;font-size:13px;margin-top:10px}
	.filters_grid {display:block;max-width: 600px;margin: 0 auto;}
	.output-number	{font-size:22px;}
	.payment {font-size:24px;}
	.annonselenke {line-height: 14px; margin: 7px 0; padding: 0px;}
	.output-number {font-size: 18px;}
	.searchbox .container {display: block; font-size:17px; margin: 25px 2rem;}
	.readmore {margin:0; font-size: 14px;}
	.shtfilters .filterboxlabel {}
	
	.shtfilters .filterbox {display:none; margin-top: 12px;}
	.shtfilters .filterboxcolumns {display:block;}
	.sht_box .drop .grid{display:block; padding: 5px}
	.sht_box .drop div {padding: 5px;background-color: #f2f5f7;border-radius:8px;font-size:13px}
	.company_details {color:#2E2E2E; display: inline-block; vertical-align: middle;font-size:15px ;padding:6px;border-radius: 6px;}
    .company_details br {line-height: 150%;}
    .company_details span {font-size:12px;}
	.company_details.one {font-size:18px;margin-bottom:0px;}
	.container {font-size:15px;}
}

/* CSS for SHT Contract Card Shortcode */
.sht-card-wrapper-unique {
    background-color: #ffffff;
    border: 1px solid #8e43f0;
    padding: 20px;
    margin: 20px auto;
    color: #150e1f;
    position: relative;
    overflow: hidden;
    max-width: 400px;
    box-sizing: border-box;
	border-radius: 10px;
	min-width: 330px;
}

.sht-card-title-unique h3 {
    background-color: #8e43f0;
    color: #ffffff;
    padding: 8px;
    margin: -20px -20px 15px -20px;
    text-align: center;
    font-size: 1.2em;
}

.sht-card-content-unique {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sht-card-header-unique {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Updated logo styling */
.sht-card-logo-unique {
    width: auto;              /* Let the width adjust automatically */
    height: 70px;             /* Set a fixed height (adjust as needed) */
    margin-bottom: 15px;
    object-fit: contain;      /* Ensure the logo scales proportionally */
}


.sht-card-productname-unique {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.sht-card-pricing-section-unique {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 10px;
}

.sht-price-block {
    text-align: center;
}

.sht-card-price-unique,
.sht-card-perusmaksu-unique {
    font-size: 1.2em; /* Smaller font size for prices */
    font-weight: bold;
}

.sht-price-unit {
    font-size: 0.8em; /* Smaller font size for units */
    margin-left: 2px;
}

.sht-price-label {
    font-size: 0.8em;
    color: #150e1f;
    margin-top: 5px;
}

.sht-card-footer-unique {
    margin-top: 20px;
    text-align: center;
}

.sht-cta-button {
    background-color: #8e43f0;
    color: #ffffff;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    display: inline-block;
}

.sht-cta-button:hover {
    background-color: #6300e2;
}

.sht-card-ribbon {
    margin-top: 15px;
    background-color: #f0e6ff;
    padding: 10px;
    border-left: 5px solid #8e43f0;
    width: 100%;
    box-sizing: border-box;
	
}

.sht-card-ribbon p {
    margin: 0;
    font-weight:bold;
	font-size:16px;
    color: #150e1f;
}

.sht-card-extra-content {
    margin-top: 20px;
}

.sht-card-extra-content ul {
    list-style: none;
    padding-left: 0; /* Remove padding from the list */
    margin: 0; /* Remove default margins */
}

.sht-card-extra-content ul li {
    position: relative;
    padding-left: 30px; /* Increase padding to add space after the lightning bolt */
    margin-bottom: 10px;
}

.sht-card-extra-content ul li:before {
    content: '\26A1'; /* Unicode character for lightning bolt */
    position: absolute;
    left: 0; /* Align lightning bolt at the left edge */
    top: 0;
    color: #8e43f0;
    font-size: 14px;
}


@media (max-width: 600px) {
    .sht-card-pricing-section-unique {
        flex-direction: column;
        align-items: center;
    }
    .sht-price-block {
        margin-bottom: 10px;
    }
}

/* --- Uniform logo footprint for contract card ------------------- */
.sht-card-logo-box {
    width: 150px;            /* same width for every card             */
    height: 90px;            /* matches the height you were using      */
    display: flex;           /* centres the image inside               */
    justify-content: center;
    align-items: center;
    flex-shrink: 0;          /* grid will never squeeze this column    */
    margin-bottom: 15px;     /* keep the old spacing below the logo    */
}

.sht-card-logo-box img,
.sht-card-logo-unique {      /* belt-and-braces in case of overrides   */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;     /* keeps aspect ratio, no distortion      */
}