@font-face {
    font-family: "Argesta";
    src: url('webFonts/argestadisplay-regular-webfont.ttf') format('truetype');
  }

@font-face {
    font-family: "Proxima-Nova";
    src: url('webFonts/Proxima Nova Font.otf') format('opentype');
  }
  @font-face{
    font-family: 'proxima-nova-lt';
    src:url("webFonts/ProximaNova-Light/font.woff") format('woff'), url("../webFonts/ProximaNova-Light/font.woff") format('woff2');
}

/*///////////////////////////////////////////////////////////
   ___                 _           _               _   _
 / _  |  ___     ___  | |   __ _  (_)  _ __ ___   (_) | |_
| (_| | / _ \   / __| | |  / _` | | | | '_ ` _ \  | | | __|
 > _  | \__  | | (__  | | | (_| | | | | | | | | | | | | |_ 
/_/ |_| |___/   \___| |_|  \__,_| |_| |_| |_| |_| |_|  \__|
     
/ 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: 0px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/*-----*/
/*#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: 'Proxima-Nova';
    border-radius: 0px !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);
    font-weight: 400;
    border-radius: 0px !important;
}

/*Change textattributes for all headlines in the consumerflow*/
h1, .h1, .h1-searchreclaim, .Login-style, .container-for-headline-steps-dotted-circle-bar {
    font-family: 'Agesta'; 
    color: rgba(0,0,0,1);
    font-size: 16px !important; 
    font-weight: 400 !important;
    text-align: center;
    padding: 10px 0 10px 0;
}
.top-container-for-steps-dotted-circle-bar {
    width: 100% !important;
}

#numberBox {
	/*will change step three box attributes*/
    padding-left: 8px !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,
.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: .04em;
    font-size: 13px;
    font-family: 'Proxima-Nova';
    border-radius: 0px;
}

/*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-stepbar-container {
    display: none;
}

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

/*Change all questionmark-boxes*/
.thumbnail-questionmark, .square, .square-text {
    background-color: rgba(0,0,0,1);
    color: #FFFF ;
    font-size: 15px !important;
    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;
    border-radius: 0px;
}

/*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;
    border-radius: 0px;
}

.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
    border-radius: 0px;
}

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

/*To controll checkbox attributes for the entire user flow*/
.glyphicon-label-back-office, .glyphiconLabel {
    border-radius: 0px;
}
    /*  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 {
    border-radius: 0px;
}
    /*  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 {
    border-radius: 0px;
}
    /* 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;*/
}
    
/*---------------------*/
/*STEP SPECIFIC STYLING*/
/*---------------------*/

/*-------*/
/*#STEP 1*/
/*-------*/
.mer-login-required {
    font-size: 12px;
    padding-left: 10px !important;
}
.mer-form-group-step1 {
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.48px;
}
.ReceiptRegistration.login-h3.h3-step1.login-group.mer-receipt-registration.mer-login-description.mer-login-group {
    text-align: center;
    font-size: 12px;
}


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


/*will change step three box attributes*/
.form-control-step3-quantity {
    background-color: inherit !important;
    padding-right: 1px !important;
    border: none !important;
    text-align: center;
}

.mer-step4-btn-edit-submit, .mer-step4-btn-edit-cancel {
    width: 100%;
}

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

.customer-details-wrapper h2, .mer-step4-details-title-row h2, .h2-step4.mer-step4-sub-title {
    text-transform: uppercase;
}
.mer-container-overall.mer-step4-2-container-overall h2 {
    text-transform: uppercase;
}
.recipient-name-group-1, .recipient-name-group-2 {
    display: none;
}
.mer-step4-edit-btn-container {
    display: none;
}
.mer-step4-cause-dropdown-title {
    width: 100%;
}
.prevent-overlap {
    background-color: transparent !important;
}
.row.mer-step4-cause-dropdown-row > .col-xs-8.col-sm-8.col-md-8.form-group.form-group-no-margin {
    width: 100%;
}

.exchange-section .mer-step4-btn-accordion { 
    display:none
}
.exchange-section .collapse ,.exchange-section .collapse.in { 
    display:block
}

.mer-change-article-title, .mer-change-article-input {
    padding-left: 0px;
    padding-right: 0px;
}

.mer-exchangeinfo-title, .mer-exchangeinfo-input {
    display: none;
}

.withdrawal-section .mer-step4-btn-accordion {
    display: none !important;
}
.withdrawal-section .collapse, .withdrawal-section .collapse.in {
    display: block;
}
.MiddleAmount {
    display: none;
  }

  .exchange-toArticle {
    display: none;
  }
  
  /*-------*/
  /*#STEP 5*/
  /*-------*/

  .mer-step-btn-row.mer-step5-btn-row {
    display: inherit;
  }
  @media only screen and (max-width: 500px) {
    .mer-step5-1-btn-container, .mer-step5-2-btn-container, .mer-step5-3-btn-container, .mer-step5-4-btn-container {
     width: 100%;
    }
   }