/*///////////////////////////////////////////////////////////
   ___                 _           _               _   _
 / _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
 > _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_ 
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|
     
/ 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
\*-----------------------------*/

/*------------*/
/*#Background color*/
/*------------

body, .reclaimenableckeditor, .ChangeBackground, .modal-content, #loadingspinner, .Errandinfoarticles, .tab, td {
    background-color: #c4f20e !important;
  }
  
  .bordered.mer-step4-details-body
  {
    background-color: #FFF !important;
  }
  
  /*Change background-color
   .tab, td {
    background-color: #FFF !important;
  }
  
  /*Change lines
  hr, hr.h2_underline {
    background-color: rgb(255, 255, 255) !important;
    height: 1px;
  }
  
  /*This also needs to be changed using color, otherwise you will miss bootstrap generated hr classes
  .hr-bootstrap {
    color: rgb(255, 255, 255) !important;
  }*/



/*------------*/
/*#BASE LAYOUT*/
/*------------*/
@font-face {
    font-family: "Walsheim";
    src: url('fonts/GT-Walsheim-Pro-Regular.otf') format('opentype');
  }

/*Hide log in text
div.Login-style.mer-login-title h1 {
    display: none !important;
}*/


/*Example, this styles questionmark boxes in step 1. You can style the boxes for steps [1,2,4] in the same way*/
/*Hides questionmark
.glyphicon-questionmark {
    display: none !important; /* Döljer elementet helt 
}*/

/*Hides mandatory and obligatorisk everywhere*/
.col-md-12.form-group.form-group-no-margin.required.mer-login-required {
    display: none !important; /* Döljer elementet helt */
}



/*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: black !important;
}

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

/*Draggable scrolling handle*/
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(236,234,229);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .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, p, li, h1, h2, h3, h4, label, div, .select2-container--default, .select2-selection--single,
.text-danger, .select2-selection__rendered, .btn {
    font-family: 'Walsheim';
}

.form-control.text-box, input {
    font-family: 'Walsheim' !important;
    font-size: 16px;
    font-weight: 200 !important;
    border-color: rgba(0, 0, 0, 1);
}

.form-control-step-1-1, .form-control-step-1-2 {
    color: rgba(0, 0, 0, 1);
    font-weight: 600 !important;
}

/*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: 200 !important;
}

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

.control-label, input .control-label, label, .h3 {
    font-style: 'Walsheim';
}

/*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: 16px;
    font-style: 'Walsheim';
}

h2, h4 {
    text-transform: none;
}

/*Change textattributes for all headlines in the consumerflow*/
h1, .h1, .h1-searchreclaim , .container-for-headline-steps-dotted-circle-bar {
    font-family: 'Walsheim'; 
    color: rgba(0, 0, 0, 1) !important;
    font-size: 24px !important; 
    font-weight: 900 !important;
    padding-bottom: 1em;
    text-align: center;
    text-transform: none;
}

/*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*/

/*--------*/
/*#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: rgba(0, 0, 0, 1);
    opacity: 1;
    color: #FFF;
    font-weight: 400 !important;
    border-radius: 4px;
    border-color: rgba(0, 0, 0, 1);
    text-transform: none;
    font-family: 'Walsheim';
}

/*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:0px;
      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);
    padding-bottom: 10em;
}

.recipient-name-group-1 {
    display: none !important;
}

.recipient-name-group-2 {
    display: none !important;
}
/*
.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(247,246,240) !important;
}*/

/*select color/attributes of active dots for steppipe
.step-color-active {
    background-color: rgba(236,234,230) !important;
}*/

/*Select color/attributes of steppipe*/
.step-pipe-color {
    background-color: rgba(236,234,230) !important;
}

.step-line {
  background: rgba(236,234,230) !important;
  }
  
/*  select color on active stepline steps*/
.step-line.step-color-active {
  background: rgba(236,234,230) !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-for-step-2-number, .color-for-step-3-number, .color-for-step-4-number {
    font-family: 'Walsheim' !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: none !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*/



/*------*/
/*#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*/
/*---------*/

 /* Change the color or border color on the checkboxes in the flow, need !important to take effect */
  .steps-glyphiconLabel.glyphiconLabel > input[type="radio"]:checked ~ .glyphSpan {
    background: #101010;
    border-color: #101010;
  }

/*--------------------*/
/*#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;
}*/

.text-danger.field-validation-error .has-error {
    color: red !important;
    font-weight: bold; /* valfritt: gör texten tydligare */
}