/*///////////////////////////////////////////////////////////
   ___                 _           _               _   _
 / _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
 > _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_ 
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|
     
/ 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: rgb(58, 47, 74) !important;
    height: 1px;
}

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

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

/*Draggable scrolling handle*/
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgb(58, 47, 74);
    -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, .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: 'Manrope';
}

/*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: rgb(58, 47, 74) !important;
    font-weight: 500;
}

/*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: rgb(58, 47, 74) !important;
    font-weight: 700;
}

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

/*Change textattributes for all headlines in the consumerflow*/
h1, .h1, .h1-searchreclaim, .Login-style, .container-for-headline-steps-dotted-circle-bar {
    font-family: 'Manrope'; 
    color: rgb(58, 47, 74) !important;
    font-size: 24px !important; 
    font-weight: 700;
}

.alert-message, .alert, .alert-dismissable, .alert-info {
    color: rgb(58, 47, 74) !important;
}

/*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: rgb(20, 7, 40);
    opacity: 1;
    color: #FFF;
    font-weight: 700;
    border-radius: 20px;
    border-color: rgb(20, 7, 40);
    font-size: 14px;
}

.close {
    background-color: rgb(58, 47, 74) !important;
    border-color: rgb(58, 47, 74) !important;
}

input.form-control-step-1 {
    border-color: rgb(58, 47, 74) !important;
    border-right: 1px solid rgb(58, 47, 74) !important;
}

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

.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: 5em !important;*/
}

/*select color/attributes of dots for steppipe*/
.step-color {
    background-color: rgb(223, 221, 226) !important;
}

/*select color/attributes of active dots for steppipe*/
.step-color-active {
    background-color: rgb(20, 7, 40) !important;
}

/*Select color/attributes of steppipe*/
.step-pipe-color {
    background-color: rgb(223, 221, 226) !important;
}

/*Select color/attributes of active steppipe*/
.step-pipe-color-active {
    background-color: rgb(20, 7, 40) !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: rgb(92, 229, 120) !important;
    color: #FFFF !important;
    font-size: 20px !important;
    border-radius: 20px;
    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;
    */
}


@media (min-width: 576px) and (max-width: 991px) {    
    .sm-nopad-leftright{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
   
}

/*.mer-customer-fault-description-wrapper .mer-fault-description-body{
    width: 100%; padding-left: 0; padding-right: 0; padding-bottom: 0; margin-bottom: 15px;
    }*/