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

@font-face {
    font-family: "CraftSans";
    src: url('fonts/CraftSans-Regular.ttf') format('truetype');
  }
  
  @font-face {
    font-family: "NyghtSerif";
    src: url('fonts/NyghtSerif-Regular.otf') format('opentype');
  }

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

/*body {
  background-image: url("https://d3k81ch9hvuctc.cloudfront.net/company/XKtYpz/images/2f917560-19d5-4cb2-bc72-ca2203e8f495.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* 📱 För telefoner (smala skärmar) */
/*@media (max-width: 768px) {
body {
    background-size: auto 120%; /* Zoomar in bilden vertikalt */
    /*background-position: center top; /* Flyttar fokus till toppen
}*/

/* 📟 För iPads eller mellanstora skärmar 
@media (max-width: 1024px) and (min-width: 769px) {
body {
    background-size: cover; /* Behåller helskärmsläge
    background-position: center center;
}
}*/

/* 🖥️ För extra breda skärmar 
@media (min-aspect-ratio: 16/9) {
body {
    background-size: 130% auto; /* Zoomar in bilden horisontellt på breda skärmar 
}
}/*

/* 📏 För extra långa skärmar (t.ex. telefoner i stående läge)
@media (max-aspect-ratio: 9/16) {
body {
    background-size: auto 150%; /* Zoomar in mer vertikalt
    background-position: center center;
}
}*/


/*.container-overall {
  position: relative; /* Behövs för att pseudo-elementet ska fungera 
  background: rgba(255, 255, 255, 0.3); /* Semi-transparent vit 
  padding: 20px; /* Lägger till utrymme inuti 
  border-radius: 0; /* Rundade hörn 
  max-width: 620px;
  margin: 0 auto; /* Centrerar 
  z-index: 1; /* Håller den över suddig bakgrund 
}

/* Skapar en större suddig bakgrund runt containern 
.container-overall::before {
  content: "";
  position: absolute;
  top: -10px;  /* Utökar blurren 10px ovanför 
  left: -10px; /* Utökar blurren 10px åt vänster 
  right: -10px; /* Utökar blurren 10px åt höger 
  bottom: -10px; /* Utökar blurren 10px nedåt 
  background: white; /* Använder samma bakgrundsfärg 
  backdrop-filter: blur(10px); /* Suddig effekt 
  border-radius: 0; /* Ser till att den följer huvudcontainerns rundade hörn 
  z-index: -1; /* Ser till att den ligger bakom innehållet 
}

.col-md-12.padding0 {
  position: relative;
  background: rgba(255, 255, 255, 0.3); /* Semi-transparent vit 
  padding: 20px;
  border-radius: 0;
  z-index: 1;
}

/* Skapar en suddig bakgrund runt hela containern 
.col-md-12.padding0::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: inherit;
  backdrop-filter: blur(10px);
  border-radius: 0;
  z-index: -1;
}

.Errandinfoarticles {
  position: relative;
  background: transparent !important; /* Helt transparent bakgrund 
  backdrop-filter: blur(10px); /* Blurr-effekt 
  padding: 20px;
  border-radius: 0;
  z-index: 1;
}

/* Skapar en suddig bakgrund utan att det blir en vit ruta 
.Errandinfoarticles::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(255, 255, 255, 0.1); /* Lätt vit transparent för mjukare sudd 
  backdrop-filter: blur(10px); /* Blurr-effekt 
  border-radius: 0;
  z-index: -1;
}
  /*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 {
    font-family: 'CraftSans';
    font-size: 16px !important;
    font-weight: 400 !important;
  }
  
  /*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, 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, .form-control.textareaForStep4, .article-number, .freight-label-content .item-text, .freight-label-content .item-price{
   color: rgb(0,0,0);
  }
  
  /*Change textattributes for all headlines in the consumerflow*/
  h1, .h1, .h1-searchreclaim, .Login-style, .container-for-headline-steps-dotted-circle-bar {
    font-family: 'NyghtSerif'; 
    font-size: 32px !important;
    font-weight: 400 !important;
  }
  
  
  /*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,
  .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: 400;
    text-transform: uppercase;
    letter-spacing: 0.64px !important;
    font-size: 16px;
    font-family: 'CraftSans';
    border-radius: 0 !important;
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
  }

  
  /*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: rgba(183, 203, 203, 1);
  }
  
  /*select color on active stepline steps*/
  .step-line.step-color-active {
  background: rgb(0, 0, 0);
  }
  
  /*---------*/
  /*#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, .form-control-step-1-1 {
    font-size: 16px !important;
    font-weight: 400 !important;
    text-transform: none;
  }
  
  /*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;
  }
  
  /*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*/
  /*-------*/
  
  
  /*-------*/
  /*#STEP 3*/
  /*-------*/
  
  /*changing the attributes to article names in the table */
  /*.article-name {
    text-transform: uppercase;
  }
  
  /*Changing the style of the article numbers in the table, need important only on color and display*/
  /*.article-name {
    font-style: italic;
    color: #525250 !important;
    display: none !important;
  }*/
  
  /*-------*/
  /*#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 {
    text-transform: none;
  }
  
   /*will remove the product reciepient information in the flow*/
  .recipient-name-group-1, .recipient-name-group-2 {
    display: none;
  }
  
  /*-------*/
  /*#STEP 5*/
  /*-------*/
  
  /*Changing all h2 headers in step 5 */
  #step5Wrapper .medium-title {
    text-transform: none;
  }