/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}
.body-container{ 
    padding: 1%;
    margin: 0 auto;
    width: 75%;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"

  }


.image-header{ 
    margin: 0 auto;
    margin-bottom: 12px;
    color: white;
        height: 85px;
    font-size: 50px;
    padding: 5px;

}
.returns-footer-note{ 
      margin-bottom: 5%;

}
.container-div{ 
  border: 3px solid;
    background: #F4F4F4;
    padding: 18px;
}
.returns-label{ 
      width: 30%;

}

.all-footer{ 
    font-size: 12px;
    text-align: center;
    margin-top: 37px;
}

.returns-top-tip{ 
  text-align: center;
  padding-bottom: 17px;
}
.returns-top-tip.success-message { display: none; }
.message-sent .returns-form-container, .message-sent .returns-content-top .top-message, 
.message-sent .all-footer, .message-sent .bs-callout, .message-sent .returns-top-tip ,
.message-sent .returns-content-bottom , .message-sent .language-selection button { display: none; }
.message-sent .returns-top-tip.success-message { display: block; }

a.btn:not([href]):not([tabindex]), a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):hover{ 
      margin-top: 20px;

}

.md-form.md-outline{ 
  background-color: transparent;
  
}
.main-container{ 
    padding: 3vw;

}
.body-container > div.card > h5{ 
    padding: 1rem !important;
    font-size: 3vw;
    background-color: #b81313;
    color: white;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.body-container > div.card > div > div.returns-form-container{ 
      padding: 20px 10px;

}

#contact-form > div.text-center.text-md-center{ 
      color: white;
}

.body-container > div.card{ 
      box-shadow: 0px 0px 19px 13px rgba(0, 0, 0, 0.17);
    border: 0;
}
.returns-content-top{ 
  font-size: 1em;
}



.datepicker-dropdown{ 
    padding: 20px;
    top: 25vw;
    left: 17vw;
}

#inputAddressMD{ 
      margin-top: 15px;

}

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label,
select:focus ~ .floating-label,
select:valid ~ .floating-label {
  left: 20px;
  font-size: 11px;
  opacity: 1;
  top: -14px;
  background: white;
  width: auto;

}

.inputText {
  font-size: 14px;
  height: 35px;
  margin-bottom: 25px;

}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
    top: 5px;
  background: white;
  width: auto;
  padding-right: 3.25px;
  padding-left: 4.25px;
}

#collapseExample{ 
    margin-left: -3%;

}

#contact-form > div:nth-child(2) > div.col-md-6.select-outline > select:not(:internal-list-box){ 
  color: white);
}

/* #collapseExample > div > div{ 
      padding: 0;

} */

#date-picker-example{ 
      margin-bottom: 30px;

}







*:focus{
    outline: none;
}

.select-css:enabled:hover, .select-css[aria-disabled=false] {
    border-color: #aaa;
    background-color: purple;
}


.dropdown-item.enabled, .dropdown-item:enabled {
    color: #6c757d;
    pointer-events: none;
    border: none;
    border-color: transparent;
    
  }
  .form-check-label{ 
        padding-bottom: 15px;

  }
  .img-logo{ 
    width: 5%;
    vertical-align: bottom;

  }
#shipping-section{ 
      margin-left: -18px;

}
.returns-top-tip{ 
    padding: 10px 10px 10px 10px;
    border: solid 1px #a8a8a8;
    background-color: #ffffde;
}

#otherreasons{ 
    display: none; 
    height: 38px;
    float: right;
    overflow: hidden;
    margin-top: -38px;
}

.other-chosen #otherreasons{ 
    display: block; 
}

.other-chosen #reason{ 
  width: 45%
}


input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  background-color: white;
  border: 2px solid #B94A48;
}

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #212529;
  background-color: white;
    border: 3px solid #D6E9C6;
}

.bs-callout {
    margin: 20px 0;
    padding: 15px;
    text-align: center;
    background-color: #f8cc8b;
}

.bs-callout p { margin-bottom: 0; }
.bs-callout .red-text { color: red; }

#dropdownMenuButton{ 
    margin: .5vw .5vw 0 .5vw;
    background-color: white;
    color: #212529;
    padding-left: 2.5vw;
    border:1px solid #ced4da; 
    background-image: url("../img/globe-xxl.png");
    background-repeat: no-repeat;
    background-size: 1vw;
    background-position: left;
    background-position: 8%;

}


#dropdownMenuButton:focus{ 
  border-color: #80bdff;
  border-top-color: rgb(128, 189, 255);
  border-right-color: rgb(128, 189, 255);
  border-bottom-color: rgb(128, 189, 255);
  border-left-color: rgb(128, 189, 255);
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); 
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #16181b;
    text-decoration: none;
}

.loading-spinner, .loading .main-submit { display: none; }
.loading .loading-spinner { display: inline-block; }


/* media queries */

@media only screen and (max-width: 767px) {    
    #datepicker{ 
      margin-top: 20px;
      margin-bottom: 20px;
    }
    #otherreasons{ 
          margin-top: 22px;
    }
    #reason{ 
          width: 100% !important; 
    }
    #contact-form{ 
          margin: -20px;

    }
    #dropdownMenuButton {
      background-size: 4vw;
      padding-left: 7.5vw;
    }
}

@media only screen and (min-width: 1200px) {
    .main-container{ 
          padding: 1.5vw;
    }
    .img-logo { 
      width: 4%;
    }
    .body-container > div.card > h5{ 
      font-size: 2.5vw;
    }
}

@media only screen and (max-width: 541px) {
    .all-footer{ 
      font-size: 2vw; 
    }
    .img-logo { 
      width: 8%;
    }
    .body-container { 
      width: 100%;
    }
    .body-container > div.card > h5{ 
      font-size: 6vw;
      padding: .5rem !important;
    }
    .returns-content-top{ 
      font-size: .9em;
    }
}



@media screen and (max-width: 1134px) and (min-width: 768px) 
 { 

.other-chosen  #otherreasons{ 
    margin:0px !important; 
    max-width: 100% !important;
  } 
.other-chosen  #otherreasons{ 
        position: initial;
  }
 .other-chosen #reason{
        display: none;
  }

}