/* Adding font-family connections to customer-specific fonts */

/* 
@font-face {
  font-family: "AvenirNextMedium";
  src: url('fonts/AvenirNextMedium.ttf') format('truetype');
}
*/

@font-face {
  font-family: "AvenirNextBold";
  src: url('fonts/AvenirNextBold.ttf') format('truetype');
}

@font-face {
  font-family: "AvenirNextMedium";
  src: url('fonts/AvenirNextMedium.ttf') format('truetype');
}








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

/*------------------------------*\
INDEX
- Base layout
- Text
- Buttons
- Stepbar
- Label
- Checkbox
- Specials: Step 1,3,4
\*-----------------------------*/

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

/* Dölj "Exchange" (ReclaimTypeId_64) endast på engelska */
html[lang^="en"] .container-overall-step2
  :is(tr, .row, .form-group, .col-md-12):has(#ReclaimTypeId_64) {
  display: none !important;
}



/*Change background-color on the entire flow except for fillable fields*/
/*body, .reclaimenableckeditor, .ChangeBackground, .modal-content, #loadingspinner, .Errandinfoarticles, .tab {
  background-color: #fff0db
}*/

/*-----*/
/*#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 {
color: rgb(23, 23, 24);
font-family: 'AvenirNextMedium';
}

/*Change here for all textboxes in the consumerflow*/
.form-control.text-box{
font-family: 'AvenirNextMedium' !important;
border-radius: 8px; /* Added to make textbox round */
color: rgb(23, 23, 24);
}


/*Change here for text color and weight for all text in the consumerflow, will require !important to override*/
body, b, .text-box, strong, p, li, 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, .form-control.textareaForStep4, .article-number, .freight-label-content .item-text, .freight-label-content .item-price{
 color: rgb(23, 23, 24) !important;
 font-size: 14px;
 font-weight: 400;
}

/*Change textattributes for all headlines in the consumerflow*/
h1, .h1, .h1-searchreclaim, .container-for-headline-steps-dotted-circle-bar {
  font-family: "AvenirNextBold" !important; 
  text-transform: uppercase;
  font-size: 36px;
  line-height: 45px;
  font-weight: 200;
}

.Login-style{
  font-family: "AvenirNextBold" !important; 
  text-transform: capitalize;
  font-size: 36px;
  line-height: 45px;
  font-weight: 200;
}


/*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,
[disabled].mer-btn.mer-step-btn,
[disabled].mer-btn.mer-step-btn:hover,
.reclaim--btn-main.loading,
.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 {
  opacity: 1;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.25rem;
  letter-spacing: -0.02em;
  font-size: 14px;
  font-family: 'AvenirNextMedium';
  background-color: rgb(46, 45, 47);
  border-color: rgb(46, 45, 47);
  color: #FFF;
  border-radius: 8px; /* Added to make buttons round */
}


/*hides print recept button*/
a[href*="ReclaimReceipt"] {
  display: none;
}
/*hides new errand  button*/
button[name="NewErrand"] {
  display: none;
}



/*change the buttons in last step ladda ner returfraktsedel skriv ut kvitto*/
.links-wrapper .btn {
  padding: 15px;
  text-decoration: none !important;
}


/*greyed out next button when unavailable disabled*/
.mer-btn.mer-step-btn.disabled,
.mer-btn.mer-step-btn.disabled:hover{
  opacity: 1;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 1.25rem;
  letter-spacing: -0.02em;
  font-size: 14px;
  font-family: 'AvenirNextMedium';
  background-color: rgb(208, 208, 208);
  border-color:  rgb(208, 208, 208);
  color: #FFF;
  border-radius: 8px; /* Added to make buttons round */
}

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

/*select color on step line non active, need !important for override*/
.step-line {
background: rgb(0, 0, 0);
}

/*select color on active stepline steps*/
.step-line.step-color-active {
background: #000000;
}

/*select color on active stepline steps*/
div.mer-login-required {
  font-style: italic;
  color: gray;
}

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

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

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

/*-------*/
/*#STEP 1*/
/*-------*/
/*Changing label headers on Log in page*/
.mer-form-group-step1 {
  font-size: 12px;
  font-weight: 400;
  text-transform: none; 
  letter-spacing: 0.48px;
  line-height: 1rem;
  font-family: 'AvenirNextMedium' !important;
}

/*Style both textareas/forms in step 1*/
.form-control.form-control-step-1,
.form-control.form-control-step-1:focus {
font-weight: 400;
background-color: #FFF;
border-color: rgb(222, 222, 222);
}

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

/*#Makes square checkmark to round*/
.container-overall-step2 .steps-glyphiconLabel .glyphSpan {
    border-radius: 9999px !important;
}



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

/*changing the attributes to article names in the table */
.article-name {
  font-size: 12px;
  font-family: 'AvenirNextMedium' !important;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgb(23, 23, 24);
}

/*Changing the style of the article numbers in the table, need important only on color and display*/
.article-number {
  font-style: italic;
  font-family: 'AvenirNextMedium' !important;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-size: 1.4rem;
  color: rgb(23, 23, 24);
}

.mer-step3-table-container{
  font-style: Capitalize;
  font-family: 'AvenirNextMedium' !important;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: rgb(23, 23, 24);

}


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

/*Changing the medium size headers to another style in step 4 */
.customer-details-wrapper h2, .mer-step4-details-title-row h2, .h2-step4.mer-step4-sub-title, .mer-container-overall.mer-step4-2-container-overall h2 {
  color: rgb(23, 23, 24);
}

 /*will remove the product reciepient information in the flow*/
.recipient-name-group-1, .recipient-name-group-2 {
  display: none;
}

/* Doljer Extrainfo vid byte: i exchange-flodet. */
.mer-exchangeinfo-row {
  display: none;
}



/*.btn.btn-link.mer-step4-btn-accordion .glyphicon,
.btn.btn-link.mer-step4-btn-accordion .glyphicon:before {
    background-color: red !important;
}*/

.btn.btn-link.mer-step4-btn-accordion {
   background-color: transparent !important;
}


@media (max-width: 767px) {
  /* Tvinga rad med artikelinfo + antal att ligga i samma rad */
  .ChangeBackground.bordered .article-collapse {
    display: flex;
    width: 100%;
  }


/* Justera layout på högersidan (antal) */
  .ChangeBackground.bordered .article-collapse .col-xs-2.col-sm-2.col-md-2.p-0 {
    /* Ta bort Bootstrap-override som förstör layouten på mobil */
    padding-left: 0 !important;
    padding-top: 0 !important;
    width: auto !important;
    float: none !important;
    white-space: nowrap; /* hindra radbrytning i "Antal 1 st" */
    text-align: right;    /* valfritt – om du vill högerställa */
  }

  /* Om du vill att artikelinfo till vänster ska kunna kortas av med ... */
  .ChangeBackground.bordered .article-collapse .form-group {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ChangeBackground.bordered .article-collapse .group-receipt-article {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
 /* gör så att anledning till retur rubriken inte kortas av och får ny rad */
@media (max-width: 767px) {
  .form-group.mer-step4-cause-dropdown-title.col-xs-4 {
    width: auto !important;
    white-space: nowrap;
  }
}

/*-------*/
/*#STEP 5*/
/*-------*/