html {
    font-size: 62.5%;
}

body {
    color: #1E2019;
    font-size: 1.6rem;
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    line-height: 2.4rem;
}

@media (min-width: 768px) {
    body {
        font-size: 1.8rem;
    }
}

/* =========================================================
   KÖPVILLKOR – COMPONENT VIEW
   Mobile first
   ========================================================= */


.contentpane {
	margin: 0;
	padding: 20px;
	background: #fff;
}

.contentpane > .com-content-article.kopvillkor {
	color: #242720;
	font-family: 'Public Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

.contentpane > .com-content-article.kopvillkor h1 {
	margin: 0 0 20px;

	color: #242720;
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.contentpane > .com-content-article.kopvillkor h2 {
	margin: 28px 0 12px;

	color: #242720;
	font-family: inherit;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
}

.contentpane > .com-content-article.kopvillkor h3 {
	margin: 22px 0 8px;

	color: #242720;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.contentpane > .com-content-article.kopvillkor p {
	margin: 0 0 16px;

	font-size: 16px;
	line-height: 1.6;
}

.contentpane > .com-content-article.kopvillkor ul,
.contentpane > .com-content-article.kopvillkor ol {
	margin: 0 0 16px;
	padding-left: 24px;

	font-size: 16px;
	line-height: 1.6;
}

.contentpane > .com-content-article.kopvillkor li {
	margin-bottom: 6px;
}

.contentpane > .com-content-article.kopvillkor a {
	color: #00789c;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.contentpane > .com-content-article.kopvillkor a:hover,
.contentpane > .com-content-article.kopvillkor a:focus {
	color: #005f7c;
}

@media (min-width: 768px) {
	.contentpane > .com-content-article.kopvillkor h1 {
		font-size: 30px;
	}

	.contentpane > .com-content-article.kopvillkor h2 {
		font-size: 23px;
	}

	.contentpane > .com-content-article.kopvillkor h3 {
		font-size: 19px;
	}
}


/* =========================================================
   VIRTUEMART - ASK A QUESTION
   Mobile first
   ========================================================= */

.ask-a-question-view {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px;
    box-sizing: border-box;
}

.ask-a-question-view h1 {
    margin: 0 0 24px;
    padding: 0;
    font-size: 24px;
    line-height: 1.3;
}


/* =========================================================
   PRODUCT SUMMARY
   ========================================================= */

.ask-a-question-view .product-summary {
    display: flex;
    align-items: center;
    gap: 20px;

    margin: 0 0 28px;
    padding: 0 0 24px;

    border-bottom: 1px solid #ddd;
}

.ask-a-question-view .product-summary .width70 {
    flex: 1 1 auto;
    width: auto;
    float: none;
}

.ask-a-question-view .product-summary .width30 {
    flex: 0 0 120px;
    width: 120px;
    float: none;
}

.ask-a-question-view .product-summary h2 {
    margin: 0;
    padding: 0;

    font-size: 18px;
    line-height: 1.35;
}

.ask-a-question-view .product-summary .short-description {
    margin-top: 8px;
    font-size: inherit;
    line-height: inherit;
}

.ask-a-question-view .product-summary img.product-image {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   FORM
   ========================================================= */

.ask-a-question-view table.askform {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
}

.ask-a-question-view table.askform tbody,
.ask-a-question-view table.askform tr,
.ask-a-question-view table.askform td {
    display: block;
    width: 100%;
    border: 0;
}

.ask-a-question-view table.askform td {
    padding: 0;
}

.ask-a-question-view table.askform tr:nth-child(odd) {
    margin-top: 18px;
}

.ask-a-question-view table.askform tr:first-child {
    margin-top: 0;
}


/* =========================================================
   LABELS
   ========================================================= */

.ask-a-question-view label {
    display: block;
    margin: 0 0 7px;
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
}


/* =========================================================
   INPUTS
   ========================================================= */

.ask-a-question-view input#name,
.ask-a-question-view input#email,
.ask-a-question-view textarea.field {
    display: block;
    width: 100%;
    box-sizing: border-box;
	font-family: inherit;
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: #1E2019;
	margin: 0;
    padding: 12px 14px;
	background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
	transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.ask-a-question-view input#name:focus,
.ask-a-question-view input#email:focus,
.ask-a-question-view textarea.field:focus {
    border-color: #777;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.ask-a-question-view textarea.field {
    min-height: 170px;
    resize: vertical;
	width: 100%;
}

.ask-a-question-view input.highlight-button {
    font-weight: 600;
    color: #ffffff;
    background-color: #00a57e;
    border-radius: 6px;
    border: 0;
    padding: 15px 32px;
    font-size: 1.8rem;
    line-height: 1.3333333;
    cursor: pointer;
}

.ask-a-question-view input.highlight-button:hover { 
	background-color: #027a6a;
	
}

/* =========================================================
   CAPTCHA + SUBMIT AREA
   ========================================================= */

.ask-a-question-view .submit {
    width: 100%;
    margin-top: 22px;
}

.ask-a-question-view .cf-turnstile {
    margin-bottom: 20px;
}

.ask-a-question-view .submit > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ask-a-question-view .submit .width50 {
    width: 100%;
    float: none;
}


/* =========================================================
   BUTTON
   ========================================================= */

.ask-a-question-view input.highlight-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;
    padding: 11px 20px;

    border: 0;
    border-radius: 4px;

    cursor: pointer;
}


/* =========================================================
   CHARACTER COUNTER
   ========================================================= */

.ask-a-question-view .text-right {
    text-align: left;
}

.ask-a-question-view .text-right label {
    display: inline;
    margin: 0 6px 0 0;

    font-size: 13px;
    font-weight: 400;
}

.ask-a-question-view input.counter {
    display: inline-block;
    width: 48px;

    padding: 4px 5px;

    background: transparent;
    border: 0;

    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
}


/* =========================================================
   REMOVE LEGACY FLOAT CLEAR
   ========================================================= */

.ask-a-question-view .clear {
    display: none;
}

/* =========================================================
   FORM ERROR MESSAGE
   ========================================================= */

.ask-a-question-view .formError {
    position: static !important;
    width: 100%;
    margin: 6px 0 12px;
    opacity: 1 !important;
}

.ask-a-question-view .formErrorContent {
    width: 100%;
    box-sizing: border-box;
}

.ask-a-question-view .formErrorArrow {
    display: none;
}

.ask-a-question-view .formErrorContent {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;

    background: #fff4f4;
    border: 1px solid #d8a3a3;
    border-radius: 4px;

    color: #8b1f1f;
    font-size: 1.4rem;
    line-height: 2rem;
}

/* =========================================================
   TABLET / DESKTOP
   ========================================================= */

@media (min-width: 580px) {

    .ask-a-question-view {
        padding: 32px;
    }

    .ask-a-question-view .product-summary .width30 {
        flex-basis: 160px;
        width: 160px;
    }

    .ask-a-question-view .submit > div {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .ask-a-question-view .submit .width50 {
        width: auto;
    }

    .ask-a-question-view input.highlight-button {
        width: auto;
        min-width: 180px;
    }

    .ask-a-question-view .text-right {
        text-align: right;
    }

}


/* =========================================================
   LARGER SCREENS
   ========================================================= */

@media (min-width: 768px) {

    .ask-a-question-view {
        padding: 40px;
    }

    .ask-a-question-view h1 {
        font-size: 28px;
    }
	
	.ask-a-question-view input#name,
    .ask-a-question-view input#email,
    .ask-a-question-view textarea.field {
        font-size: 1.8rem;
    }

}