@font-face {
    font-family: Helvetica;
    src: url("Larsseit Bold.otf") format("opentype");
}
@font-face {
    font-family: HelveticaNrml;
    src: url("Larsseit-Regular.otf") format("opentype");
}
@font-face {
  font-family: 'HelveticaThin';
  src: url("Larsseit-Light.otf") format("opentype");
}



#lang_door_code{
    font-size: 8px;
  margin-bottom: 2px;
  margin-top: 2px; 
}
#lang_floor{
    font-size: 8px;
  margin-bottom: 2px;
  margin-top: 2px; 
}
.text-xs
{
    font-size: 5px;
}
.tracking-delivery-title
{
    /*text-transform: uppercase;*/
    letter-spacing: 1px;
    font-family: Helvetica;
    font-size: 24px;
}
.top-margin-20
{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.top-margin-30
{
    margin-top: 30px;
}
.tracking-delivery-note
{
    /*font-weight: 500;*/
    font-family: HelveticaNrml;
    font-size: 16px;
    letter-spacing: 0.4px;
    padding-left: 5px;
    padding-right: 5px;
    /*text-transform: uppercase;*/
}
.tracking-delivery-addr
{
    border: 1px solid #EBEFF2;
    background: #EBEFF2;
    /*border-radius: 5px;*/
    padding: 10px;
}
.text-bold
{
  font-family: Helvetica;
  font-size: 19px;
  line-height: 1.6;
}
.btn-smart-del
{
    border-radius: 25px;
    background-color: #4bbe87;
    /*background-image: linear-gradient(315deg, #63a4ff 0%, #49d6df 74%);*/
    border-color: #4bbe87;
    font-family: HelveticaThin;
    font-size: 16px;
    letter-spacing: 0.5px;
    padding: 4px 20px;
}
.btn-smart-del:hover{
      background-color: #4bbe87;
    border-color: #4bbe87;
}
.btn-smart-del:focus{
      background-color: #4bbe87 !important;
    border-color: #4bbe87 !important;
}
.btn-smart-del:active{
      background-color: #4bbe87 !important;
    border-color: #4bbe87 !important;
}

.map {
    height: 600px;
    width: 100%;
}
.brand-logo-md
{
    margin:0 auto;
}

/** ------ STYLES RELATED WITH RATING ------------ */
.rating > input { display: none; }
.rating > label:after {
  margin: 5px;
  font-size: 1.5em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}
.rating > label {
  color: #ddd;
  float:right;
  cursor: pointer;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label
{
  color: #FFD700;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label
{
  color: #FFED85;
}

.rating {
    /*width: 155px;*/
    margin: 0 auto;
}

.myProgress {
    width: 100%;
    background-color: #4bbe87;
    height: 2px;
    display: inline-block;
    position: relative;
}

.circle-left, .circle-right {
    position: absolute;
    top: -7px;
    z-index: 9;
    color: #4bbe87;
}

.circle-right {
    right: 0;
}

#myBar {
    width: 40%;
    height: 2px;
    background-color: #c5c0c0;
    position: relative;
}

.truck {
    position: absolute;
    right: 0;
    top: -30px;
    color: #4bbe87;
}

.truck-section {
    /*margin-top: 50px;*/
}
.live-track-font{
  font-family: Helvetica;
}

.truck-text {
    position: absolute;
    top: -42px;
    right: -91px;
    font-size: 10px;
    width: 125px;
    color: gray;
}


/*tracking btns*/

.btn-track{
    /*width: calc(33.33% - 6px);*/
    width: 30%;
    margin-right: 8px;
    float: left;
    /*border: 2px solid #a9a3a3;*/
    border-radius: 5px;
    /*padding:10px;*/
}
.btn-track:last-child{
    margin-right: 0;
}
.track-btns{
    padding: 0;
}
.btn-track span{
    font-size: 10px;
    line-height: normal;
    /*margin-bottom: 5px;*/
    display: inline-block;
}
.btn-track .door-code{
    font-size: 17px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    /*padding: 5px;*/
    /*border-radius: 10px;*/
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}



/* NEW CSS 07-12-2018 */

html body {
    font-family: Helvetica;
    font-size: 16px;
    color: #4c4444fa;
    line-height: 1.3;
    background-color: #f9fafb;
}
.address-inline{
  font-family: HelveticaNrml;
  font-size: 16px;
  line-height: 1.6;
}
.btn-track, 
.btn-track span {
  font-family: Helvetica;
  font-size: 11px;
  line-height: 1.3;
  font-weight: bold;
  text-transform: uppercase;
  /* display: table; */
}
.btn-track{
  min-height: 75px;
}
.btn-track:nth-child(1) span{
  /*line-height: 26px;*/
}
.btn-track:nth-child(2) span{
  /*line-height: 26px;*/
}
.btn-track span {
  /*min-height: 26px;*/
}
.slider.round {
  min-height: auto;
}
.slider:before {
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 0;
  top: 5px;
}
input:checked + .slider::before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}
.btn-track .door-code {
   font-family: HelveticaNrml;
   /*font-size: 14px;*/
}
#lang_delivery_outside{
  font-size: 8px;
  margin-bottom: 2px;
  margin-top: 2px; 
}
button.edit_option{
   font-family: Helvetica;
   font-size: 16px; 
   background-color: transparent;
   letter-spacing: 1px;
   padding: 8.5px 20px;
   /*text-transform: uppercase;*/
   color: #4c4444fa;
   border: none;
}
button.edit_option:after{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 70%; /* Change this to whatever width you want. */
    padding-top: 7px; /* This creates some space between the element and the border. */
    border-bottom: 5px solid #fbc957; /* This creates the border. Replace black with whatever color you want. */
}
button.save_option{
   font-family: Helvetica;
   font-size: 16px; 
   background-color: transparent;
   letter-spacing: 1px;
   padding: 8.5px 20px;
   /*text-transform: uppercase;*/
   color: #4c4444fa;
   border: none;
}
button.save_option:after{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 85%; /* Change this to whatever width you want. */
    padding-top: 7px; /* This creates some space between the element and the border. */
    border-bottom: 5px solid #fbc957; /* This creates the border. Replace black with whatever color you want. */
}
.footer p{
  font-family: Helvetica;
  font-size: 14px; 
}
html body .small, html body small {
  font-family: Helvetica;
  font-size: 14px; 
}
html body .record_update_success{
  font-family: Helvetica;
  font-size: 14px;
}
.btn-track input[type="text"]{
  font-family: Helvetica;
  font-size: 13px;
  color: #636b6f;
  border: 1px solid #c5c5c5;
  /*border-radius: 4px;*/
  padding: 0px 5px 0px;
  height: 30px;
  line-height: 31px;
  text-align: left;
}
html body input:checked + .slider {
  background-color: #4bbe87;
}
.tracking-delivery-addr p {
  margin: 0 0 5px;
}
.footer-brand .small {
    display: inline-block;
    font-size: 12px;
}
.footer-brand .img-responsive.brand-logo-md
{
  max-width: 70px;
  max-height: 75px;
  display: inline-block;
}

@media screen and (max-width: 992px) {
  .margin-left-25 {
    /*margin-left: 25%;*/
  margin: 0 4%;
  }
}
.track_url_link{
cursor: pointer;
color: #55beee;
font-family: HelveticaNrml;
}