/* variables */
:root {
  --blue-color: #26B0D1;
  --viloet-color-darker: #7E62A7;
  --violet-color-lighter: #8A7BB5;
  --grey-darker: #434342;
  --grey-menu: #898989;
}

/* variables end */
body {
  border: 1px solid transparent;
  font-family: "Open Sans", sans-serif;
  background: url(/img/bg.jpg) no-repeat center center;
  /* background: url(/img/testt.jpg) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin: 0px;
}

.logo {
  margin-top: 15px;
}

/*   navbar     */
.navbar-collapse {

  justify-content: center;
}

.navbar-nav {
  font-size: 14px;
  font-weight: bolder;

}

.nav-item {
  margin-left: 25px;
  color: var(--grey-menu);
}


.mail {
  padding-bottom: 5px;
}

/*   navbar   end  ***/
/* *******************index page******************** */
/* heading */
.mid3 {
  letter-spacing: 3px;
  font-size: 35px;
  text-align: center;
}

.mid4 {
  font-size: 16px !important;
  text-align: center;
  margin-top: -65px;
}

.cont {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.head-middle {
  padding-top: 70px;
  color: rgb(131, 129, 129);
  margin-bottom: 10px;
  font-size: 28px;
}

.loads-btn {
  width: 520px !important;
  text-align: center;
  background-color: var(--blue-color) !important;
  color: #ffffff;
  border: none;
  height: 54px;
  padding-top: 15px;
  font-size: 20px;
  padding-right: 75px;
}

.loads-btn:hover {
  background-color: #1e9bbb !important;
}

.arrow {
  position: absolute;
  vertical-align: bottom;
  margin-top: 15px;
  margin-left: 250px;
}

.small-arrow-transport {
  margin-left: 175px;
  position: absolute;
  margin-top: 14px;
}

.small-arrow {
  margin-left: 175px;
  position: absolute;
  margin-top: 14px;
}

.loads-img {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  margin-bottom: 20px;
  padding-bottom: 8px;

}

.forklift {
  padding-bottom: 13px !important;
}

.text-main-btns {
  position: absolute;
  margin-bottom: 15px;
}

.storage {
  width: 255px;
  height: 54px;
  margin: 5px !important;
  text-align: left;
  margin-right: 5px !important;
  padding-top: 15px;
  font-size: 20px;
}

.storage:hover {
  border: 1.2px solid #26b1d2 !important;

  background-color: transparent !important;
  color: #26b1d2;



}

.overview {
  text-align: center;
  font-size: 14px;
  font-weight: lighter !important;
  color: #9a9d9e !important;
  background-color: transparent !important;
  border: 1.2px solid var(--viloet-color-darker) !important;
  vertical-align: middle !important;
}

.overview:hover {
  border: 1.2px solid rgb(57, 50, 70) !important;
  background-color: unset !important;
  font-size: 15px;
}

.free {
  color: #39b4d3;
  font-weight: bolder;
}

.looking-glass {
  width: 16px;
  margin-right: 5px;
}

.mag-glass {
  width: 15px;
}

.storage2 {
  width: 255px;
  height: 54px;
  text-align: center;

}

.asapbtn {
  width: 255px !important;
  height: 55px;
  margin: 5px;
  color: var(--grey-darker) !important;
  border: 1px solid #434342 !important;
}

.asapbtn:hover {
  border: 1.2px solid rgb(53, 44, 44) !important;

  background-color: transparent !important;
  color: rgb(131, 118, 118);
}

.reg {
  width: 255px !important;
  background-color: var(--viloet-color-darker);
  height: 55px;
  margin: 5px;
  color: #ffffff !important;
  border: 1px solid #434342 !important;
}

.reg2 {
  width: 255px !important;
  background-color: var(--blue-color);
  height: 55px;
  margin: 5px;
  color: #ffffff !important;
  border: 1px solid #434342 !important;
}

.reg2:hover {
  background-color: var(--blue-color) !important;
}

.indexcont {
  justify-content: center;
  display: flex;
}

/* divider */
.divider {
  /* minor cosmetics */
  display: table;
  font-size: 17px;
  text-align: center;
  width: 520px;
  /* divider width */
  margin: 10px auto;
  /* spacing above/below */
}

.divider span {
  display: table-cell;
  position: relative;
}

.divider span:first-child,
.divider span:last-child {
  width: 50%;
  top: 13px;
  /* adjust vertical align */
  -moz-background-size: 100% 2px;
  /* line width */
  background-size: 100% 2px;
  /* line width */
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.divider span:first-child {
  /* color changes in here */
  background-color: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#25b0d1));
  background-image: -webkit-linear-gradient(180deg, #25b0d1, #25b0d1);
  background-image: -moz-linear-gradient(180deg, transparent, #25b0d1);
  background-image: -o-linear-gradient(180deg, transparent, #25b0d1);
  background-image: linear-gradient(90deg, #25b0d1, #25b0d1);
}

.divider span:nth-child(2) {
  color: var(--blue-color);
  padding: 0px 5px;
  width: auto;
  white-space: nowrap;
  font-weight: bold;
}

.divider span:last-child {
  /* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(180deg, #25b0d1, transparent);
  background-image: -moz-linear-gradient(180deg, #25b0d1, transparent);
  background-image: -o-linear-gradient(180deg, #25b0d1, transparent);
  background-image: linear-gradient(90deg, #25b0d1, #25b0d1);
}

/* ******************************************************************************* */
.dividerr {
  /* minor cosmetics */
  display: table;
  font-size: 17px;
  text-align: center;
  width: 520px;
  /* divider width */
  margin: 10px auto;
  /* spacing above/below */
}

.dividerr span {
  display: table-cell;
  position: relative;
}

.dividerr span:first-child,
.dividerr span:last-child {
  width: 50%;
  top: 13px;
  /* adjust vertical align */
  -moz-background-size: 100% 2px;
  /* line width */
  background-size: 100% 2px;
  /* line width */
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.dividerr span:first-child {
  /* color changes in here */
  background-color: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#25b0d1));
  background-image: -webkit-linear-gradient(180deg, #434342, #434342);
  background-image: -moz-linear-gradient(180deg, transparent, #434342);
  background-image: -o-linear-gradient(180deg, transparent, #434342);
  background-image: linear-gradient(90deg, #434342, #434342);
}

.dividerr span:nth-child(2) {
  color: var(--grey-darker);
  padding: 0px 5px;
  width: auto;
  white-space: nowrap;
  font-weight: bold;
}

.dividerr span:last-child {
  /* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#434342), to(transparent));
  background-image: -webkit-linear-gradient(180deg, #434342, transparent);
  background-image: -moz-linear-gradient(180deg, #434342, transparent);
  background-image: -o-linear-gradient(180deg, #434342, transparent);
  background-image: linear-gradient(90deg, #434342, #434342);
}

/* divider 1.2 endddddddddddddddddddddddddddd */

/* divider 2!!!*************/
.divider2 {
  /* minor cosmetics */
  display: table;
  font-size: 12px;
  text-align: center;
  width: 652px;
  /* divider width */
  margin: 10px auto;
  /* spacing above/below */
}

.divider2 span {
  display: table-cell;
  position: relative;
}

.divider2 span:first-child,
.divider2 span:last-child {
  width: 50%;
  top: 13px;
  /* adjust vertical align */
  -moz-background-size: 100% 2px;
  /* line width */
  background-size: 100% 1px;
  /* line width */
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.divider2 span:first-child {
  /* color changes in here */
  background-color: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#8A7BB5));
  background-image: -webkit-linear-gradient(180deg, #8A7BB5, #8A7BB5);
  background-image: -moz-linear-gradient(180deg, transparent, #8A7BB5);
  background-image: -o-linear-gradient(180deg, transparent, #8A7BB5);
  background-image: linear-gradient(90deg, #8A7BB5, #8A7BB5);
}

.divider2 span:nth-child(2) {
  color: var(--viloet-color-darker);
  padding: 5px 5px;
  width: auto;
  white-space: nowrap;
  font-weight: bold;
}

.divider2 span:last-child {
  /* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(180deg, #8A7BB5, transparent);
  background-image: -moz-linear-gradient(180deg, #8A7BB5, transparent);
  background-image: -o-linear-gradient(180deg, #8A7BB5, transparent);
  background-image: linear-gradient(90deg, #8A7BB5, #8A7BB5);
}



/* divider end***/


/********** index page end *******************/



/* Service page */
/* middle buttons */


.buttons-list-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.btn {
  border-radius: 0px;

}

.btn-outline-primary {
  color: rgb(73, 182, 211);
  border: solid 1px rgb(73, 182, 211);
  font-weight: 600;
}

.btn-outline-primary:hover {
  background-color: rgb(125, 98, 167);
  border: solid 1px rgb(125, 98, 167);
}

.btn-outline-primary:active {
  border: solid 1px rgb(125, 98, 167);
  background-color: #7d62a7;
}

.form-middle {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  margin-left: 45px;
  margin-right: 40px;

}



.vacancies-btn {
  margin-top: 17px;
  color: rgb(131, 129, 129);
  font-weight: normal;

}

.vacancies-btn:hover {
  background-color: #26b1d2;
}

.mid-inp {


  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1.2px solid rgb(125, 98, 167);
  text-align: center;
  font-size: 17px;
  width: 300px;
}

#city_input2 {
  margin-right: 45px;
}

#city_input2 {
  margin-right: 45px;
}

.up {
  margin-right: 50px;
}

.upinp {
  margin-left: 40px;
}

/* middle buttons end */

/* footer */
.mid2 {
  text-align: center;
  font-size: 15px;
  color: rgb(131, 129, 129);
  margin-bottom: 15px;
}

.mid2>span {
  font-size: 20px;
}

.foot-btn {
  color: gray;
  margin-left: 5px;
  margin-right: 5px;
  font-size: 12px;
}

.foot-btn:hover {
  color: #afada9;
  text-decoration: none !important;
}

.footer-copyright {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}

.line {
  padding-left: 5px;
}

.bottom-contact-info {
  font-size: 11px;
  color: #afada9;
}

.index-bottom {
  margin-top: 33px;
}

/* footer end ***/

/* Service page end***/


/* Loads-Cargo page */

.streched {
  width: 650px;
  margin-left: 10px;
}

.smaller {
  margin-left: -26px;
}

.flex-dropdown {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 40px;
}

.cstm-drop {
  width: 317px;
  height: 55px;
  padding-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  background-color: transparent;
  color: var(--viloet-color-darker);
  border: solid 1px #7d62a7;
  font-size: 10px;

}

.cstm-drop:hover {

  color: var(--viloet-color-darker);
}

.dropdown-item {
  border-bottom: 2px solid var(--viloet-color-darker);
  background-color: rgba(rgb(236, 231, 231), rgb(255, 255, 255), rgb(255, 255, 255), 0.7);
  color: var(--viloet-color-darker);
  font-size: 20px;
}

.rotate {
  display: inline-block;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: var(--viloet-color-darker);
  font-size: 20px;


}

.dropdown-toggle::after {
  display: none;
}

.drop {

  width: 415px;
  color: white;
}

.lft {
  width: 323px;
  height: 50px;
  margin: 15px;
}

.service {
  height: 60px !important;
  font-size: 15px;
}

.purple {
  background-color: var(--viloet-color-darker);
  color: white;
}

.btn-outline-primary:active {
  background-color: var(--viloet-color-darker) !important;
}



.box {
  width: 30px;
  display: inline-block;
  margin-bottom: 5px;

}

.cargo-text {
  padding-left: 20px;
  padding-right: 10px;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bolder;
}



/* Ruler forms */
.ruler {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  text-align: left;
}

.dimension {
  display: flex;
  color: var(--violet-color-lighter);
  justify-content: start;
  width: 655px;
  margin-bottom: -10px;
  margin-top: 10px;
}

.dim {
  display: flex;
  justify-content: center;
}

.cargo-ruler {
  margin-top: 15px;
}

.ruler-form {
  display: flex;
  height: 95px;
  width: 655px;
  background-color: var(--viloet-color-darker);
  justify-content: center;
  align-items: center;
  background-image: url(/img/ruler.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
}

.ruler-icons {
  height: 27px;
  width: 25px;
  margin-right: 3px;
  margin-left: 29px;
  margin-bottom: 5px;
}

.topr {
  background-position: top;
  background-image: url(/img/ruler2.jpg);
}

.r-input {
  width: 115px;
  height: 42px;
  background-color: #9881b9;
  border: solid 0px;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  margin-right: 20px;
}

.epll {
  margin-right: 26px;


}

.r-input::placeholder {
  color: #cabdd7;
  text-align: center;
}

.selectpicker {
  height: 35px;
  color: rgb(255, 255, 255);
  margin-right: 5px;
  padding: 5px;
  border: 1px solid white;
  width: 85px;
  text-align: left;
  background: url(/img/basic-app.svg) #7d62a7 no-repeat;
  background-position: 50px 13px;
  background-size: 10px;
}

.r-3 {
  margin-top: 15px;
  height: 70px;
  align-items: center;
  width: 525px;
}

.form-weight {

  margin-top: 25px;
  background-color: #6988be;
  background-image: unset;
  height: 60px;
  margin-bottom: 25px;
}

.weight2 {
  background-color: #87a0c9;
  height: 40px;
  width: 155px;
}

.weight2::placeholder {
  color: #a3b6d4;
}

.weight {
  width: 75px;
  background-color: #6988be;
  border: 1px solid white;
  display: inline-block;
  margin-right: 25px;
}

.weight-arrow {
  width: 20px;
}

.load {
  padding-right: 60px;
  color: white;
  font-size: 17px;

}

.weight::placeholder {
  color: #ffffff;
}

option {
  color: #ffffff;
}

.img-date {
  width: 35px;

  margin-right: 20px;
}

.arrowbox {
  width: 25px;
  margin-right: 5px;
  margin-left: 10px;
}

.calendar {
  width: 20px;
  height: 20px;
  margin-left: 30px;
}

.calendar2 {
  width: 20px;
  height: 20px;
  margin-left: 15px;
}

.c2 {
  padding-right: -20px;
}

.selectdate {
  margin-left: 15px;
  border: 0;
  outline: 0;
  background: transparent;
  border: 1px solid rgb(125, 98, 167);
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  width: 150px;
  color: #7d62a7;
  margin-right: 30px;
  margin-left: 20px;
}

.select-up {
  margin-left: 10px;
}

.select-down {
  margin-left: 55px;
}

.option {
  background-color: transparent;
}

.flex-dates {
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-rows: 2fr 2fr;
  grid-template-columns: 3fr;
  gap: 20px;
  grid-template-areas: "collection"
    "delivery";
}

.collection-date {
  grid-area: "collection";
  justify-self: center;
  margin-left: 10px;
}

.delivery-date {
  grid-area: "delivery";
  justify-self: center;
}

.time {
  width: 55px;
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 1.2px solid rgb(125, 98, 167);
  font-size: 14px;
  text-align: center;
  margin-right: 12.5px;
  margin-left: 12.5px;

}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearence: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
  /* Firefox */
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  border: 1px solid #7860a0;
}

.hide {
  display: none;
}

/* seperator */


.coin {
  width: 15px;
  margin-right: 10px;
  padding-bottom: 1px;
}

.optional {
  background-color: transparent;
  border: 0;
  outline: 0;
  margin-left: 10px;
  border-bottom: 1px solid #7d62a7;
  text-align: center;
  width: 80px;
  font-size: 13px;
}

.shipping-cost {
  margin-top: 25px;
  display: flex;
  justify-content: center;
}

.shcost {
  font-size: 13px;
  color: #777679;
}

.hide-lg {
  display: none;
}

.free-days {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  flex-direction: column;
  color: #777679;
}

.days-text {
  font-size: 15px;
  text-align: center;
}

.other {
  font-size: 15px;
  text-align: center;
  color: #777679;
}

.credit-grid {
  display: grid;
  justify-content: center;
}

.credit-cards {
  width: 325px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.credit-cards>img {
  justify-self: center;
  align-content: space-between;
}

.creditimg {
  width: 60px;
  margin-right: 15px;
}

/* seperator end ***/
/* Ruler forms end ***/
/* Loads-Cargo page end ****/
/* contacts page */
.contacts-middle {
  display: flex;
  justify-content: center;
  color: var(--grey-menu);
  margin-top: 100px;


}

/* contacts page end */
/* Transport page */


.up-transp {
  margin-bottom: 17px;
}

.transp {
  padding-top: 85px;
  padding-bottom: 23px;
}

.cstm-width {
  width: 155px !important;
  margin-bottom: 10px;
  margin-right: 5px;
  height: 53px;
}

.cstm-width:hover {
  background-color: #7d62a7;
}

.thicc-hr {
  width: 655px;
  border: solid 1px #7d62a7;
  margin-bottom: 20px;
}

.cstm-width2 {
  width: 323px;
  margin-bottom: 10px;
  margin-right: 5px;
  height: 53px;
}

.direction-text {
  display: flex;
  justify-content: center;
  font-size: 13px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: var(--violet-color-lighter);
  letter-spacing: 1px;
  font-weight: lighter;
}

.directionh1 {
  text-align: center;
  font-weight: 350;
  color: rgb(125, 98, 167);
}

.dropdown-menu {
  justify-content: center;
  width: 415px;
  background-color: rgba(244, 247, 247, 0.9);
  text-align: center;



}

.loading-availability {
  margin-left: 195px;
  font-weight: lighter;
  letter-spacing: 0.5px;
  color: var(--violet-color-lighter)
}

.lg-hide {
  display: none;
}

.dots {
  color: var(--viloet-color-darker);
}

.btn-free {
  background-color: #26d0c3;
  width: 325px;
  height: 55px;
  color: white;
  font-weight: bold;
  margin: 15px;
}

.btn-free:hover {
  color: var(--grey-menu);
}

.text-under-cards {
  text-align: center;
  font-size: 19px;
  color: rgb(131, 129, 129);

}

.two-buttons-center {
  display: flex;
  justify-content: center;
}


#city_input,
#country_input2 {
  margin-left: 10px;
}

.form {
  margin-left: 25px;

}

.form2 {
  margin-left: 60px;
}

#city_input2 {
  margin-left: -12px;
}

/*********************** Transport page end **************************************/
/* log-in */

.mid5 {
  padding-top: 0px;
  margin-bottom: 90px;
  margin-top: 45px;
  font-size: 30px;
}

.transparent-window {
  background-color: rgba(73, 182, 211, 0.3);
  width: 655px;
  height: 90px;
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.margin {
  margin-right: 50px;
}

.transparent-window img {
  width: 30px;
  height: 30px;
  display: flex;
  margin-right: 5px;

}

.arrow-transparent {
  padding-right: 22px;
  color: var(--blue-color);
}

.log-in {
  height: 55px;
  width: 320px;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 22px;
}

.blue {
  background-color: var(--blue-color);
}

.blue:hover {
  background-color: #1e9bbb;
}

.purple {
  background-color: var(--viloet-color-darker);
}

.log-overview {
  width: 650px !important;
}

.log-divider {
  width: 645px;
}

.rmarg {
  margin-left: 10px;
}

/* manufacturer page */
.center-area {
  display: flex;
  justify-content: center;

}

.textfield {
  display: flex;
  justify-content: left;
  width: 620px;
}

.manufacturer-dropdown {
  width: 317px;
}

.contact {
  margin-top: 50px;
}

#marketProduct {
  background-color: transparent;
  border: solid 1px var(--viloet-color-darker);
}

.image-btn {
  width: 160px;
  border: solid 1px var(--viloet-color-darker);
  margin-left: 6px;
  color: var(--grey-menu) !important;
  font-size: 12px;
}

.color {
  border-bottom: 1px solid var(--blue-color);
  color: var(--grey-menu);
  margin-top: -30px;
}

.no-marg {
  margin: unset;
}

.img1 {
  background: url(/img/telephone.svg) no-repeat;
  background-size: 20px;
}

.img2 {
  background: url(/img/cursor.svg) no-repeat;
  background-size: 15px;
}

.img3 {
  background: url(/img/iconfinder-icon.svg) no-repeat;
  background-size: 20px;
}

.divider3 {
  /* minor cosmetics */
  display: table;
  font-size: 14px;
  text-align: center;
  width: 620px;
  /* divider width */
  margin: 10px auto;
  /* spacing above/below */
}

.divider3 span {
  display: table-cell;
  position: relative;
}

.divider3 span:first-child,
.divider3 span:last-child {
  width: 50%;
  top: 16px;
  /* adjust vertical align */
  -moz-background-size: 100% 2px;
  /* line width */
  background-size: 100% 1px;
  /* line width */
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
}

.divider3 span:first-child {
  /* color changes in here */
  background-color: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#26B0D1));
  background-image: -webkit-linear-gradient(180deg, #26B0D1, #26B0D1);
  background-image: -moz-linear-gradient(180deg, transparent, #26B0D1);
  background-image: -o-linear-gradient(180deg, transparent, #26B0D1);
  background-image: linear-gradient(90deg, #26B0D1, #26B0D1);
}

.divider3 span:nth-child(2) {
  color: var(--blue-color);
  padding: 5px 5px;
  width: auto;
  white-space: nowrap;
  font-weight: bold;
}

.divider3 span:last-child {
  /* color changes in here */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
  background-image: -webkit-linear-gradient(180deg, #26B0D1, transparent);
  background-image: -moz-linear-gradient(180deg, #26B0D1, transparent);
  background-image: -o-linear-gradient(180deg, #26B0D1, transparent);
  background-image: linear-gradient(90deg, #26B0D1, #26B0D1);
}

/* manufacturer page end */
/* ASAP list page */
.asap {
  width: 80vw;
  margin: unset;
  padding: unset;
  text-align: center;
  font-size: 15px;
  text-indent: 25px;
  background: url(/img/magnifying-glass.svg) no-repeat;
  background-size: 15px;
}



.flag {
  width: 14px;
  text-align: center;
}

.table-picture {
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* asap grid */
.asapgrid {
  display: grid;
  grid-template-columns: 130px 130px 1fr 1fr 1fr 1fr 1fr;
  font-size: 15px;
  color: var(--viloet-color-darker);
  justify-items: center;
  height: 80px;
  border-bottom: solid 1px var(--violet-color-lighter);
  margin-left: 100px;
}

.asapgrid-list-items {
  display: grid;
  grid-template-columns: 130px 130px 1fr 1fr 1fr 1fr 1fr;
  justify-items: center;
  font-size: 15px;
  border-right: solid 1px var(--violet-color-lighter);
  border-bottom: solid 2px var(--violet-color-lighter);
  margin-left: 100px;
  height: 40px;
}

.country-grid {
  margin-right: 3px;
}

/* new table */
.new-table {
  margin-top: -25px;
  display: grid;
  grid-template-columns: 20px 200px 200px 1fr 1fr 1fr 1fr 2fr;
  margin-left: 6vw;
  width: 90vw;

}

.new-table>span {
  text-align: center;

  /* border: solid 1px var(--violet-color-lighter); */
}

.table-headings {
  height: 80px;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  color: var(--violet-color-lighter);
}


.contact-info {
  display: unset !important;
  text-align: left !important;
  color: var(--blue-color) !important;
}

.table-picture {
  display: inline;
  margin-right: 5px;
  margin-left: 5px;

}

.right-border {
  border-right: solid 1px var(--viloet-color-darker);
  border-bottom: solid 1px var(--viloet-color-darker);
  border-left: solid 1px var(--viloet-color-darker);
  border-top: solid 1px var(--viloet-color-darker);
}

.no-border {
  border-bottom: solid 1px var(--viloet-color-darker);
  border-right: none !important;
  border-top: solid 1px var(--viloet-color-darker);

}

.change-color {
  color: var(--blue-color)
}

.flag {
  margin: 6px;
  width: 20px;
}

.arrow-spin {
  background-color: rgba(93, 95, 97, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

}

.spin {
  color: white;
}

#shown {
  display: none;

}

.show {
  font-size: 14px;

}

.country-grid,
.zip-grid,
.from-to,
.zipcode {
  border-right: solid 2px var(--violet-color-lighter);
  padding-right: 5px;
  width: 100px;
}

.btn-showhide {
  float: left;
  margin: 0px !important;
  padding: 0px !important;
  color: var(--blue-color) !important;
}

.left-contact {
  text-align: left !important;
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* new table end*/
.from-to {
  font-weight: bold;
}


.right-border,
.no-border {
  display: flex;
  align-items: center;
  justify-content: center;
}

.zipcode {
  font-size: 12px;
}

.contactinfo {
  color: var(--blue-color);
}

.stils {

  transform: rotate(90deg);
}

.white {
  color: #ffffff;
  font-size: 13px;
}

.contactpic {
  margin-right: 4px;
  width: 20px;


}

.loading-grid,
.type-grid,
.load-grid,
.transport-grid {
  display: grid;
  justify-items: center;
}

/* .zipcode,
.loadingdate,
.typeofcargo,
.loaddimension {} */

#myDIV {
  display: none;
}

@media (max-width: 992px) {
  .asapgrid {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 130px 130px 1fr 1fr 1fr 1fr 1fr;
    font-size: 15px;
    color: var(--viloet-color-darker);
    justify-items: center;
    border-bottom: solid 1px var(--violet-color-lighter);
    margin-left: 100px;
  }

  .asapgrid-list-items {
    display: grid;
    grid-template-columns: 100vw;
    grid-template-rows: 130px 130px 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    font-size: 15px;
    border-right: solid 1px var(--violet-color-lighter);
    border-bottom: solid 2px var(--violet-color-lighter);
    margin-left: 100px;

    height: 50px;
  }
}


/* asap grid end*/
/* ASAP list page */

/* log in end */
/* mobile view */
@media (max-width: 992px) {
  .transport-mid {
    display: flex !important;
    align-items: center;
  }

  .navbar {
    margin-top: 5px !important;
    display: flex;
    justify-content: center;
  }

  .logo-flex {
    display: inline-block;

  }

  .left-mob {
    justify-self: start;
  }

  .navbar-toggler {
    left: 2%;
    position: absolute;
    top: 2px;
    width: 50px;
    background-color: #dcdddf;
  }

  .logo {
    width: 150px;
    margin-top: 5px;

  }

  .navbar-toggler-icon {
    width: 25px
  }

  .storage {
    width: 200px;
  }

  .collapse {
    display: unset;
  }

  .buttons-list-middle,
  .form-middle {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mid3 {
    margin: 10px;
  }

  .lft {
    margin: 5px;
    width: 250px;
    height: 40px;
  }

  .up {
    justify-self: center;
  }

  .mid-inp {
    display: flex;
  }

  .hide-mob {
    color: transparent !important;
  }

  .dropdown-menu {
    justify-content: center;
    width: 250px;

  }

  .r-3 {
    width: 300px;
  }

  .r-input {
    width: 40px;
    height: 30px;
    font-size: 10px;
    margin-right: 10px;
  }

  .load {
    font-size: 12px;
  }

  .mid-inp {
    margin: 15px;
  }

  .country-inp {
    margin: 10px;
  }

  .navbar {
    margin-top: 15px;

  }

  .mid2 {
    margin: 5px;
    font-size: 18px !important;
  }

  #city_input,
  #country_input2 {
    margin-left: 15px;
    margin-top: -5px;
  }

  .ruler-form {

    width: 490px;
  }

  .have {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: #39b4d3;
    font-size: 12px;
    font-weight: bold;
    margin: 8px 18vw;
  }

  .have::before,
  .have::after {
    content: "";
    flex-grow: 1;
    background: #39b4d3;
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 16px;
  }

  .navbar-collapse {
    justify-content: start;
  }

  .loads-btn {
    width: 200px !important;
    text-align: left;
  }

  .overview {
    text-align: center;
    font-size: 12px;
    width: 200px !important;
    margin-top: 10px;
  }

  .collection-date {
    display: flex;
    justify-content: center;
    padding-left: 10px;
    margin-top: 15px;
    align-items: center;
  }

  .flex-dates {
    display: none;
  }

  .thicc-hr {
    display: none;
  }

  .hide-lg {
    display: unset;
  }

  .arrow {
    margin-left: 85px;
  }

  .small-arrow {
    margin-left: 60px;
  }

  .small-arrow-transport {
    margin-left: 45px;
  }

  .mob-hide {
    display: none;
  }

  .hidden {
    display: none;
  }

  .logsticky {
    right: 5% !important;
    position: absolute !important;

  }



  .dividerr {
    display: table;
    font-size: 15px;
    text-align: center;
    width: 200px;
    /* divider width */
    margin: 5px auto;
    /* spacing above/below */
  }

  .divider2 {
    /* minor cosmetics */
    display: table;
    font-size: 10px;
    text-align: center;
    width: 350px;
    /* divider width */
    margin: 10px auto;
    /* spacing above/below */
  }

  .divider2 span {
    display: table-cell;
    position: relative;
  }

  .divider2 span:first-child,
  .divider2 span:last-child {
    width: 50%;
    top: 13px;
    /* adjust vertical align */
    -moz-background-size: 100% 2px;
    /* line width */
    background-size: 100% 1px;
    /* line width */
    background-position: 0 0, 0 100%;
    background-repeat: no-repeat;
  }

  .divider2 span:first-child {
    /* color changes in here */
    background-color: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#8A7BB5));
    background-image: -webkit-linear-gradient(180deg, #8A7BB5, #8A7BB5);
    background-image: -moz-linear-gradient(180deg, transparent, #8A7BB5);
    background-image: -o-linear-gradient(180deg, transparent, #8A7BB5);
    background-image: linear-gradient(90deg, #8A7BB5, #8A7BB5);
  }

  .divider2 span:nth-child(2) {
    color: var(--viloet-color-darker);
    padding: 5px 5px;
    width: auto;
    white-space: nowrap;
    font-weight: bold;
  }

  .divider2 span:last-child {
    /* color changes in here */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    background-image: -webkit-linear-gradient(180deg, #8A7BB5, transparent);
    background-image: -moz-linear-gradient(180deg, #8A7BB5, transparent);
    background-image: -o-linear-gradient(180deg, #8A7BB5, transparent);
    background-image: linear-gradient(90deg, #8A7BB5, #8A7BB5);
  }



  /* divider end***/

  .transparent-window {
    background-color: rgba(73, 182, 211, 0.3);
    width: 318px;
    height: 70px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .margin {
    display: none;
  }

  .box {
    margin-left: 30px;
  }

  .transparent-window img {
    width: 30px;
    height: 30px;
    display: flex;
    margin-right: 5px;

  }

  .arrow-transparent {
    padding-left: 15px;
    color: var(--blue-color);
  }

  .small-marg {
    margin-right: 30px;
  }

  .right-margin {
    margin-right: 25px;
  }

  .log-in {
    height: 55px;
    width: 320px;
    color: #ffffff !important;
    font-weight: 900 !important;
    font-size: 22px;
  }

  .log-overview {
    width: 320px !important;
  }

  .arrow {
    margin-left: 125px;
  }

  .small-arrow-transport {
    margin-left: 125px;
  }

  .small-arrow {
    margin-left: 125px;
  }

  .overview {
    padding-bottom: 10px;
  }

  .select-up {
    width: 40px;
    height: 30px;
    font-size: 12px;
  }

  .calendar {
    margin-left: 5px;


  }

  .footer-copyright {
    margin-top: -15px;
  }

  .transport-mid {
    display: flex;
    flex-direction: row;
    width: 45px;
    padding-left: 1px;
    padding-right: 1px;
  }

  .cstm-width {
    font-size: 12px;
  }

  .lg-hide {
    display: unset;
    display: flex;
    font-size: 15px;
    justify-content: center;

    color: var(--viloet-color-darker);

  }

  .dropdown-drop {
    display: flex;
    justify-content: center;
  }

  .drop {
    width: unset;
  }

  .cstm-drop {
    display: block;
    width: 250px;
    margin-right: 50%;
  }

  .streched {
    width: 300px;
  }

  .box {
    position: absolute;
    width: 25px;
    margin-left: -25px;
    margin-top: 5px;

  }

  .lds-cargo-drop {
    width: 250px;
    height: 45px;
    padding: 5px;
    margin: 5px;
  }

  .cargo-text {
    padding: 5px;
    display: inline-block;
    font-size: 15px;
    margin-right: 10px;
    margin-left: 10px;

  }

  .rotate {
    position: absolute;

  }

  .arrowbox {
    width: 20px;
    margin-right: 2px;
  }

  .selectpicker {
    width: 50px;
    font-size: 12px;
  }

  .load {
    padding-right: 15px;
  }

  .weight {
    margin-right: 15px;
  }

  .weight2 {
    font-size: 10px;
  }

  .divider {
    width: 200px;
  }

  .mid3 {
    padding-top: 20px;
    font-size: 20px;
  }

  .mid4 {
    font-size: 10px;
    margin-top: -20px;
  }

  .overview {
    padding: 10px;
  }

  .logsticky {
    top: 0;
  }

  .log-overview {
    padding: 15px;
  }

  .box-transparent {
    margin-left: 20px;
  }



  .ruler-icons {
    margin-right: 10px;
    margin-left: 10px;
  }

  .head-middle {
    padding-top: 25px;
  }

  .selectdate {
    margin-right: 10px;
  }

  .two-buttons-center {
    flex-direction: column;
    align-items: center;
  }

  .img-date {
    margin-left: 10px;
  }

  .new-table {
    overflow-y: scroll;
    overflow-x: scroll;
    margin-left: 10px;
    font-size: 10px;
  }

  .asapbtn {
    width: 200px !important;
  }

  #marketProduct {
    width: 80vw;

  }

  .textfield {
    display: flex;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;

  }

  .image-btn {
    margin-top: 15px;
  }

  .divider3 {
    width: 300px;
  }

  .industry-button {
    width: 200px !important;
  }


  .manufacturer-dropdown {
    width: 200px !important;
  }

  .transport-mid {
    width: unset;
  }

  .shorter {
    width: 300px;
    margin: unset;
    display: flex;
    justify-content: center;
    margin-top: -20px;
  }

  .contact {
    margin-top: -50px;
  }

  .reg {
    width: 200px !important;
    background-color: var(--viloet-color-darker);
    height: 55px;
    margin: 25px 5px 5px 5px;
    color: #ffffff !important;
    border: 1px solid #434342 !important;
  }

  .reg2 {
    width: 200px !important;
    background-color: var(--blue-color);
    height: 55px;
    margin-bottom: 25px;
    color: #ffffff !important;
    border: 1px solid #434342 !important;
  }

  .reg2:hover {
    background-color: var(--blue-color) !important;
  }

  .shipping-cost {
    margin-top: 25px;
    display: flex;
    justify-content: center;
  }


  .creditimg {
    width: 50px;
    margin-right: 10px;
  }

}

/* mobile view end */
/* sticky */



.sticky {
  transform: rotate(90deg);
  margin-left: -27px !important;
  top: 395px;
  ;
  background-color: var(--viloet-color-darker);
  color: white;
  height: 70px;
  position: fixed;
  width: 120px;

}



.sticky:hover {
  text-decoration: underline;
  color: #ffffff;
}

.logsticky {
  right: 25%;
  background-color: var(--blue-color);
  font-weight: bold;
  color: white;
  font-size: 12px;
  text-align: center;
  position: absolute;
  width: 80px;
}

.logsticky:hover {
  text-decoration: underline;
  color: #ffffff;

}

/* Google location dropdown style */
.pac-container {
  background-color: var(--viloet-color-darker);


}

.pac-item-query {
  color: white;
  text-align: center;

}

.pac-item {
  color: #ffffff;
  text-align: center;

}

.pac-item:hover {
  background-color: var(--violet-color-lighter);
}

.pac-icon {
  display: none;

}

.pac-container:after {
  /* Disclaimer: not needed to show 'powered by Google' if also a Google Map is shown */

  background-image: none !important;
  height: 0px;
}

/* Google location dropdown style  end*/
/* time and date picker*/
.mtr-row {
  display: inline-block !important;
}




/* time and date picker end*/