@font-face {
	font-family: "Surt";
	src: url("webFonts/Surt-Regular.otf") format("opentype");
}

/*///////////////////////////////////////////////////////////
   ___                 _           _               _   _
 / _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
 > _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_ 
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|
     
/ We turn a bad buy into a great experience  
    
///////////////////////////////////////////////////////////*/
/*Default template for Styling personalized CSS*/
/*CSS template by Reclaimit AB / www.reclaimit.com / */
/*We recommend using the rgba() color picker as a standard*/

/*Use ctrl+f and # to search a specific component, for example: #Componentname*/

/*------------------------------*\
INDEX
- Base layout
- Text
- Buttons
- Stepbar
- Questionmark-boxes
- Label
- Modal
- Checkbox
- Manual registration
- Specials: Step 1,3,4
\*-----------------------------*/

/*------------*/
/*#BASE LAYOUT*/
/*------------*/

/*Change background-color*/
body,
.reclaimenableckeditor,
.ChangeBackground,
.modal-content,
#loadingspinner,
.Errandinfoarticles,
.tab,
td {
	background-color: #fff !important;
}

/*Change lines*/
hr,
hr.h2_underline {
	background-color: rgba(0, 0, 0, 1) !important;
	height: 1px;
}

/*This also needs to be changed using color, otherwise you will miss bootstrap generated hr classes*/
.hr-bootstrap {
	color: rgba(0, 0, 0, 1) !important;
}

/*Styling the webpage scrollbar*/
::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 5px;
}

/*Draggable scrolling handle*/
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/*Alter all bodycontent */
.body-content-nopad {
	/*width: 100%;
    margin: 0 auto;*/
}

/*The container overall will make changes in every step.*/
.container-overall {
	/*padding-top:50px;
    padding-left:50px;
    padding-right:50px;*/
}

/*The container overall can be changed through individual components*/
/*Example, this styles the container overall in step one. You can style the containers in step [1-3] and [step4-1, step4-2] in the same way*/
.container-overall-step1 {
	/*padding-left: 1px;*/
}

/*Alter bottomamount*/
.BottomAmount {
	/*display: none;*/
}

/*Change footer*/
.mr-auto {
	/*padding-top: 3px;
    color:rgba(21, 124, 143, 1);
    font-size:12px;*/
}

/*Style input, textarea, buttons*/
.form-control,
.mer-table input[type="text"] {
	/*background-color: rgba(21, 124, 143, 1) !important;*/
}

/*-----*/
/*#TEXT*/
/*-----*/

/*Change here for all fonts in the consumerflow*/
body,
a,
b,
.form-control.text-box,
p,
li,
h1,
h2,
h3,
h4,
label,
div,
input,
.select2-container--default,
.select2-selection--single,
.text-danger,
.select2-selection__rendered,
.btn {
	font-family: "Surt";
}

/*Change here for text color and weight for all text in the consumerflow*/
body,
b,
.text-box,
strong,
p,
li,
h1,
h2,
h3,
.h3,
h4,
.control-label,
.select2-container--default,
.select2-selection--single,
.text-danger,
.select2-selection__rendered,
.color-for-step-1-number,
.color-for-step-2-number,
.color-for-step-3-number,
.color-for-step-4-number,
.textColor2,
.text_dbvalue,
.form-control-step3-quantity,
.tab,
label,
th {
	color: rgba(0, 0, 0, 1) !important;
	font-weight: 400;
}

/*Change here for text color and weight for small headings in the consumerflow*/
.control-label,
input .control-label,
.h3,
h3,
.form-control-step3-quantity,
h4,
h2 {
	color: rgba(0, 0, 0, 1) !important;
	font-weight: 600;
}

/*Change font-size for all bodytext in the consumerflow*/
body,
a,
b,
.form-control,
.row,
p,
li,
h1,
h2,
h3,
.h3,
h4,
label,
input,
.select2-container--default,
.select2-selection--single,
.text-danger,
.select2-selection__rendered,
.btn,
#text,
.text_dbvalue,
.tooltip,
textarea.form-control {
	font-size: 14px;
}

/*Change textattributes for all headlines in the consumerflow*/
h1,
.h1,
.h1-searchreclaim,
.Login-style,
.container-for-headline-steps-dotted-circle-bar {
	font-family: "Surt";
	color: rgba(0, 0, 0, 1) !important;
	font-size: 20px !important;
	font-weight: 700;
	text-transform: uppercase;
}

/*Styles h1 headlines. You can style h1-h4 in the same way*/
h1 {
	/*
    color: rgba(0,0,0,1) !important;
    font-size:30px !important;
    font-family:'Times New Roman', Times, serif !important;
    font-weight: 400;*/
}

/*You can also style these in the same way:
.h1-searchreclaim  //Search errand top-headline
.h2-searchreclaim  //Text in search errand
.h2-reclaim        //Indexpage top-headlines
.h3-step1          //Style h3 headlines in step 1*/

.index-container {
	padding-bottom: 5em;
}

/*--------*/
/*#BUTTONS*/
/*--------*/

/*This is where you enter CSS for styling all buttons in the consumerflow*/
.mer-btn.mer-step-btn,
.mer-btn.mer-step-btn:focus,
.mer-btn.mer-step-btn:hover,
.mer-btn.mer-step-btn.disabled,
[disabled].mer-btn.mer-step-btn,
[disabled].mer-btn.mer-step-btn:hover,
.mer-btn.mer-step-btn.disabled:hover,
.mer-btn.mer-step-btn:visited,
a.mer-btn.mer-step-btn:visited,
.mer-btn.mer-step-btn:visited:hover {
	background-color: rgb(0, 0, 0);
	opacity: 1;
	color: #fff;
	font-weight: 700;
	border-radius: 1px;
	border-color: rgb(0, 0, 0);
	text-transform: uppercase;
	letter-spacing: 1.68px;
}

/*You can style these in the same way:
.mer-step-btn-next   // Button "next" in the consumer flow
.mer-step-btn-prev   // Button "previous" in the consumer flow
.mer-step-btn-submit // Button "submit" in the consumer flow
.mer-step-btn-cancel // Button "cancel" in the consumer flow*/

/*Hover effect for buttons*/
.mer-btn.mer-step-btn:hover,
.mer-btn.mer-step-btn:visited:hover {
	/*background-color: rgba(17, 101, 116, 1);*/
}

/*Styling all disabled buttons*/
.mer-btn.mer-step-btn.disabled .mer-btn.mer-step-btn.disabled:hover {
	/*background-color: rgba(172, 176, 177, 1);
    border-color: rgba(172, 176, 177, 1);*/
}

/*Container for styling the button "next"*/
.mer-btn-container-next {
	/*width: 50%;*/
}

/*Container for styling the button "previous"*/
.mer-btn-container-prev {
	/*width: 50%;*/
}

/*Container-row for buttons "next" and "previous". You can style button rows for specific steps as well [1-5]*/
.mer-step-btn-row {
	/*width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-right: 0px !important;*/
}

/*----------------*/
/*SPECIFIC BUTTONS*/
/*----------------*/

/*You can style the buttons for specific steps*/

/*Example, this styles the buttons in step 2. You can style the buttons for all steps [1-5] in the same way*/
.mer-btn.mer-step2-btn,
.mer-btn.mer-step2-btn:focus,
.mer-btn.mer-step2-btn:hover,
.mer-btn.mer-step2-btn.disabled,
.mer-btn.mer-step2-btn.disabled:hover,
.mer-btn.mer-step2-btn:visited,
a.mer-btn.mer-step2-btn:visited,
.mer-btn.mer-step2-btn:visited:hover,
.mer-btn.mer-step-btn.mer-step2-btn {
	/*font-family: 'Roboto';
    background-color: rgba(255, 99, 71, 1);
    color: #FFFF;
    font-weight: 100;
    border-radius: 1px;
    border-color: rgba(255, 99, 71, 1);*/
}

/*You can also style these in the same way:
.mer-step1-btn-next       // Step 1 - button "next"
.mer-step1-btn-prev       // Step 1 - button button "prev"
.mer-btn-to-step1         // Index - button for clicking to step 1
.mer-btn-to-search        // Index - button for clicking to search errand
.mer-step4-btn-edit       // Step 4  - "Edit" button
.mer-step4-btn-attachment // Step 4 - claims. "Attach" button*/

/*Container for both buttons in indexpage*/
.mer-index-btn-container-footer {
	padding: 5px;
	wdith: 100%;
}

/*You can style these in the same way:
.mer-index-btn-container-footer  //Index - button container for both buttons in index
.mer-btn-container-to-manual-reg // Step 1 - button container for clicking into manual registration*/

/*--------*/
/*#STEPBAR*/
/*--------*/

/*This container consists of the entire dotted circle class, may be used to change placement of the group*/
/*The two code blocks below will center the group*/
.top-container-for-steps-dotted-circle-bar {
	/*width: 100% !important;
    text-align: center;
    margin-bottom: 10px;
    color: rgba(0,0,0,1);*/
}

.top-stepbar-container {
	/*display: inline-block;
    padding-left: 68px;*/
}

/*Container for the headline above the stepbar*/
.container-for-headline-steps-dotted-circle-bar {
	/*padding-bottom: 8px;*/
}

/*select color/attributes of dots for steppipe*/
.step-color {
	/*background-color: rgba(183, 203, 203, 1) !important;*/
}

/*select color/attributes of active dots for steppipe*/
.step-color-active {
	/*background-color: rgba(21, 124, 143, 1) !important;*/
}

/*Select color/attributes of steppipe*/
.step-pipe-color {
	/*background-color: rgba(183, 203, 203, 1) !important;*/
}

/*Select color/attributes of active steppipe*/
.step-pipe-color-active {
	/*background-color: rgba(21, 124, 143, 1) !important;*/
}

/*--------*/
/*STEPTEXT*/
/*--------*/

/*Select color/attributes for all steptext*/
.color-for-step-1-number,
.color-for-step-2-number,
.color-for-step-3-number,
.color-for-step-4-number {
	/*color: rgba(0,0,0,1) !important;*/
}

/*------------------*/
/*SPECIFIC STEPTEXTS*/
/*------------------*/

/*Here you can style specific steptext-numbers*/

/*Example, this styles the text for steptext "1". You can style all numbers in the stepbar [1-4] in the same way*/
.color-for-step-1-number {
	/*color: rgba(46,46,46,1) !important;*/
}

/*-----------------------------*/
/*SPECIFIC SECTIONS FOR STEPBAR*/
/*-----------------------------*/

/*Here you can style specific sections of the stepbar*/

/*Example. You can style [1-4] in the same way*/
.Step1-SectionWrap {
	/*margin-left: 0px !important*/
}

/*-------------------*/
/*#QUESTIONMARK-BOXES*/
/*-------------------*/

/*Change all questionmark-boxes*/
.thumbnail-questionmark,
.square,
.square-text {
	background-color: rgba(0, 0, 0, 1) !important;
	color: #ffff !important;
	font-size: 30px !important;
	border-radius: 1px;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	font-weight: bold;
}

/*Can be used to move the questionmark-icon*/
.square {
	padding-left: 0px !important;
}

/*The square-text is a small div that is inside the div, as we want this to be switched to background-color inherit, as to make it blend in with the thumbnail questionmark*/
/*Step one does not differentiate thumbnail-questionmark unlike step two. In order to change the text color in step two we must change the square text*/
.square-text {
	background: none !important;
	color: #fff;
}

/*Style tooltip box (informationbox that appears when hovering questionmark boxes)*/
.tooltip-inner {
	/*color: rgba(0,0,0,1);
    background-color: rgba(21, 124, 143, 1);
    font-size: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 400;*/
}

/*---------------------------*/
/*SPECIFIC QUESTIONMARK-BOXES*/
/*---------------------------*/

/*Here you can style specific questionmark-boxes*/

/*Example, this styles questionmark boxes in step 1. You can style the boxes for steps [1,2,4] in the same way*/
.thumbnail-questionmark-step1 {
	/*background-color: rgba(0, 0, 0, .5) !important;
    color: rgba(0, 0, 0, .5) !important;
    border-radius: 75px;*/
}

/*------*/
/*#LABEL*/
/*------*/

/*Style all labels*/
label,
.control-label {
	/*display: inline-block;
    max-width: 100%;
    font-weight:800;
    */
}

/*---------------*/
/*SPECIFIC LABELS*/
/*---------------*/

/*Here you can style specific labels*/

/*Example, this styles a label in step 5.*/
.label-text-step-5-1 {
	/*color: rgba(0, 0, 0, 1) !important;*/
}

/*You can style these in the same way:
.label-text-step-5-2             //Label-text in step 5
.label-text-step-5-3             //Label-text in step 5
.step-5-text-thishappensnow      //Text "this happens now with your errand" in step 5
.step-4-Customertext-shared      //Customer text in step 4*/

/*----------------*/
/*#MODAL/POPUP BOX*/
/*----------------*/

/*Here you can style all modals/popup-boxes*/

/*Modal/popup*/
.modal {
	/*overflow: scroll;*/
}

/*Change modal background*/
.modal-body {
	/*background-color: rgba(241, 252, 255, 0.8);*/
}

/*Modal backdrop*/
.modal-backdrop {
	/*z-index: 998;
    background-color: rgba(217, 226, 255, 0.8)*/
}

/*---------*/
/*#CHECKBOX*/
/*---------*/

/*To controll checkbox attributes for the entire user flow*/
.glyphicon-label-back-office,
.glyphiconLabel {
	position: relative;
	margin-left: 0px;
	border: 1px solid rgba(0, 0, 0, 1);
	border-radius: 0px;
	background-color: #ffffff !important;
}

/*Style the box before ticked*/
.glyphicon-label-back-office > .glyphSpan-back-office,
.glyphiconLabel > .glyphSpan,
.selectedBackground .glyphiconLabel .glyphSpan {
	width: 100%;
	text-align: center;
	margin: 0;
	height: 100%;
	color: #fff; /*Color has to be the same as the background-color in order to blend in with the background*/
}

/*Changes the checkbox icon to ✕*/
.glyphiconLabel > span:before {
	/*content: "✕";*/
}

/*Style checked checkboxes*/
.glyphicon-label-back-office
	> input[type="radio"]:checked
	~ .glyphSpan-back-office,
.glyphiconLabel > input[type="checkbox"]:checked ~ .glyphSpan,
.glyphiconLabel > input[type="radio"]:checked ~ .glyphSpan {
	width: 100%;
	text-align: center;
	margin: 0;
	height: 100%;
	color: rgba(0, 0, 0, 1) !important;
	font-size: 19px;
}

/*Hover effect*/
.glyphicon-label-back-office:hover
	> input[type="radio"]:not(:checked)
	~ .glyphSpan-back-office,
.glyphiconLabel:hover > input[type="checkbox"]:not(:checked) ~ .glyphSpan,
.glyphiconLabel:hover > input[type="radio"]:not(:checked) ~ .glyphSpan {
	color: rgba(0, 0, 0, 1) !important;
}

/*--------------------*/
/*#MANUAL REGISTRATION*/
/*--------------------*/

/*Style all groups for manual registration forms together with label*/
.manualreg-group {
	/*padding-left: 1px;*/
}

/*Style all forms for manual registration*/
.form-control-manualreg {
	/*background-color: #FFFFFF;*/
}

/*--------------------------------*/
/*SPECIFICS IN MANUAL REGISTRATION*/
/*--------------------------------*/

/*Here you can style specific groups and forms in manual registration*/

/*Example, this styles a group in manual registratión. You can style all groups [1-9] in the same way*/
.manualreg-group-1 {
	/*padding-left:1px !important;*/
}

/*Example, this styles a form in manual registration. You can style all forms [1-9] in the same way*/
.form-control-manualreg-1 {
	/*padding-left:1px !important;*/
}

/*---------------------*/
/*STEP SPECIFIC STYLING*/
/*---------------------*/

/*-------*/
/*#STEP 1*/
/*-------*/

/*Here you can center-align in step one*/
.Login-style.login-group {
	/*text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: .1em;
    text-align: center;*/
}

/*Login group is located at the top headlines of step one. */
.login-group {
	/*margin-bottom: 0px;*/
}

/*Style specifcally the Login header in step one */
.Login-style {
	/*padding-top: 0px !important;*/
}

/*Style specifcally h3-text in step one */
.login-h3 {
	/*color:rgba(0,0,0,1) !important;*/
}

/*Style both textareas/forms in step 1*/
.form-control.form-control-step-1,
.form-control.form-control-step-1:focus {
	/*background-color: rgba(227, 251, 255, 0.8);
    border-color: rgba(21, 124, 143, 1);
    color: rgba(60, 60, 63, 1) !important;*/
}

/*You can style the forms individually as well:

.form-control-step-1-1   //Style form for entering order-number in step one
.form-control-step-1-2   //Style form for entering e-mail in step one*/

/*-------*/
/*#STEP 3*/
/*-------*/

/*Style tablehead*/
.table > thead:first-child > tr:first-child > td {
	/*font-size: 10px;
text-transform: uppercase;*/
}

/*Style productimage*/
img.step3-td-image {
	/*width: 10% !important;
    border-top: 0px !important;*/
}

/*will change step three box attributes*/
.form-control-step3-quantity {
	/*background-color: inherit !important;
    padding-right: 1px !important;
    border: 1px solid rgba(0,0,0,1) !important;*/
}

/*-------*/
/*#STEP 4*/
/*-------*/

/*Style the textarea/form for customer fault description in step 4/warranty/transportdamage*/
textarea.textareaForStep4,
textarea.form-control-step-4-warranty {
	/*background-color: rgba(227, 251, 255, 0.8);
    border-color: rgba(21, 124, 143, 1);
    color: rgba(60, 60, 63, 1);*/
}

/*Change the placeholder for customer fault description*/
.form-control-step-4-warranty::placeholder,
.textareaForStep4::placeholder {
	/* font-size: 10px;
    color: rgba(0, 0, 0, 0.38);
    font-style: italic;
    padding-top: 7px;*/
}

/*You can style these in the same way:
.form-control-step-4-exchange-1   //First form in exchange in step four
.form-control-step-4-exchange-2   //Second form in exchange in step four

/*Style section for contactinformation*/
.customer-details-wrapper {
	/*margin-top: 50px;*/
}

img.step4-img-image {
	/*width: auto;
    height: 120px;
    */
}

.index-container-body.mer-index-container-body {
	height: auto !important;
}