@import url(https://fonts.googleapis.com/css?family=Muli:400,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/* purgecss start ignore */

.title.is-1{
  font-weight:800;
  font-size:3rem
}

@media screen and (max-width: 769px){
  .title.is-1{
    font-size:2rem
  }
}

.title.is-5{
  font-weight:600;
  color:#111827;
  font-size:1.5rem
}

@media screen and (max-width: 769px){
  .title.is-5{
    font-size:1rem
  }
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-show-on-hover,.sidebar:hover:not(.sidebar.is-active) .sidebar-logo .sidebar-logo-text,.sidebar:hover:not(.sidebar.is-active) .sidebar-link-content{
  opacity:1;
  transform:translateX(0)
}

.sidebar-transition,.sidebar-hidden,.sidebar .sidebar-logo .sidebar-logo-text,.sidebar:not(.is-active) .sidebar-link-content,.sidebar{
  transition:0.3s all
}

.sidebar-hidden,.sidebar .sidebar-logo .sidebar-logo-text,.sidebar:not(.is-active) .sidebar-link-content{
  opacity:0;
  transform:translateX(1rem)
}

.sidebar{
  background-color:#ffffff;
  max-width:66.666667%;
  height:100%;
  width:96px;
  color:black;
  font-family:'Open Sans', sans-serif;
  font-weight:bold;
  grid-area:sidebar;
  position:fixed;
  overflow:auto;
  -ms-overflow-style:none;
  scrollbar-width:none;
  box-shadow:0 3px 8px #00000029;
  z-index:10000
}

.sidebar .sidebar-menu{
  height:100%;
  padding-bottom:120px;
  display:flex;
  flex-direction:column
}

@media screen and (max-width: 1024px){
  .sidebar .sidebar-menu{
    height:calc(100% - 185px)
  }
}

.sidebar .logout{
  display:none
}

.sidebar .sidebar-logo{
  position:sticky;
  top:0;
  background-color:#ffffff;
  z-index:1
}

.sidebar:hover:not(.sidebar.is-active){
  width:245px
}

.sidebar::-webkit-scrollbar{
  display:none
}

.sidebar .is-divider{
  height:1.5em;
  display:flex;
  flex-direction:column;
  justify-content:center
}

.sidebar .is-divider:after{
  content:'';
  height:1px;
  background:#dbdbdb
}

.sidebar .is-spacer{
  flex:1
}

.sidebar .sidebar-burger{
  display:none
}

@media screen and (max-width: 1024px){
  .sidebar{
    transform:translateX(-100%);
    bottom:0;
    transition:transform 400ms;
    background-color:white;
    position:fixed;
    z-index:10000;
    overflow-y:scroll;
    box-shadow:1px 0 12px 1px rgba(0,0,0,0.07)
  }

  .sidebar.is-active{
    transform:translateX(0)
  }

  .sidebar.is-active .sidebar-brand{
    transform:translateX(0)
  }

  .sidebar .sidebar-links .sidebar-link-content,.sidebar .logout .sidebar-link-content,.sidebar .needHelp .sidebar-link-content{
    display:none
  }

  .sidebar .logout{
    display:block;
    padding:0
  }
}

@media screen and (max-width: 769px){
  .sidebar{
    transform:translateX(-100%);
    box-shadow:none
  }
}

.sidebar a{
  color:black
}

.sidebar a:hover{
  background-color:unset;
  color:#f8c44f
}

.sidebar .create-load{
  display:flex;
  justify-content:center
}

.sidebar .create-load img{
  margin-left:0.5rem;
  transition:transform 0.2s
}

.sidebar .create-load img:hover{
  transform:scale(1.2)
}

.sidebar .create-load a{
  display:flex;
  flex-direction:row;
  align-items:center;
  align-content:center;
  justify-content:center;
  margin-bottom:1rem;
  font-weight:bold;
  font-size:1.2rem;
  padding:0 1rem;
  color:#f8c44f
}

.sidebar .create-load a:hover{
  color:#4a4a4a
}

.sidebar .contact-info{
  display:flex;
  flex-direction:column;
  margin-top:1rem;
  margin-bottom:1rem
}

.sidebar .contact-info a{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center
}

.sidebar .contact-info .button{
  align-self:center;
  justify-content:center
}

.sidebar .social-links{
  display:flex;
  justify-content:center;
  margin-top:1rem
}

.sidebar .social-links img{
  margin-right:0.5rem;
  transition:transform 0.2s
}

.sidebar .social-links img:hover{
  transform:scale(1.2)
}

.sidebar .copyright-text{
  display:flex;
  font-size:10px;
  justify-content:center;
  transform:translateY(10px)
}

.sidebar .tech-trans{
  display:flex;
  flex-direction:row;
  justify-content:center;
  margin-top:2rem
}

.sidebar .tech-trans:hover{
  transform:scale(1.01)
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-links{
  margin-top:1rem
}

.sidebar-link-icon{
  min-width:calc(96px - 1rem);
  max-width:calc(96px - 1rem);
  padding:0 1.7rem 0 2.3rem;
  margin:1rem 0
}

.sidebar-link-content{
  min-width:149px;
  max-width:149px
}

.sidebar-link-content:only-child{
  min-width:245px;
  max-width:245px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.5rem 1rem
}

@media screen and (max-width: 1024px){
  .profile{
    margin-top:15px
  }

  .profile .sidebar-link-content:only-child{
    line-height:16px;
    min-width:100%;
    display:block;
    text-align:center;
    margin:5px 0
  }
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-item-content{
  font-family:'Open Sans', sans-serif;
  display:flex;
  align-items:center;
  justify-content:flex-start
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start
}

.sidebar-logo-icon{
  max-width:calc(96px - 1rem);
  min-width:calc(96px - 1rem);
  aspect-ratio:1/1;
  padding:1rem;
  margin-left:0.5rem
}

@media screen and (max-width: 769px){
  .sidebar-logo-icon{
    padding:1.5rem
  }
}

.sidebar-logo-text{
  min-width:100px;
  max-width:100px
}

@media screen and (max-width: 769px){
  .sidebar-logo-text{
    display:none
  }
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-header{
  background:#ffffff;
  padding:0.5rem 0;
  height:65px;
  grid-area:sidebar-header;
  z-index:10000
}

.sidebar-header .sidebar-logo{
  display:none
}

.sidebar-header .logout{
  background-color:transparent
}

.sidebar-header .logout img{
  width:2rem;
  height:2rem
}

@media screen and (max-width: 1024px){
  .sidebar-header .logout{
    display:none
  }
}

.sidebar-header-user-info{
  flex:1;
  justify-content:flex-end;
  display:flex;
  height:100%;
  align-items:center;
  margin-right:1rem
}

@media screen and (max-width: 1024px){
  .sidebar-header-user-info{
    margin-right:0
  }
}

.logout{
  padding:1rem;
  border:none;
  cursor:pointer
}

.sidebar-burger{
  display:none
}

@media screen and (max-width: 1024px){
  .sidebar-header{
    grid-area:sidebar-header;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:white;
    max-width:100%;
    height:65px
  }

  .sidebar-header .sidebar-logo{
    display:flex
  }

  .sidebar-burger{
    width:50px;
    height:65px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:0;
    left:0;
    transition:left 0.3s ease
  }

  .sidebar-burger.is-active{
    left:98px;
    transition:left 0.3s ease
  }
}

@media screen and (max-width: 980px){
  .sidebar-header-mobile{
    display:none
  }
}

/* purgecss end ignore */

/* purgecss start ignore */

.language-selection-item{
  display:grid;
  grid-template-columns:20px auto;
  align-items:center;
  justify-content:center
}

.language-selection-item.active{
  background:#f3f4f6
}

.language-selection-item:hover{
  background:#f3f4f6
}

.language-selection-item .language-element{
  padding-left:10px;
  text-transform:uppercase
}

/* purgecss end ignore */

/* purgecss start ignore */

.language-selector-container{
  justify-self:flex-start
}

.language-selector-container .transparent{
  background-color:transparent
}

.language-selector-container .white{
  color:white
}

.language-selector-container .dropdown-menu{
  min-width:4rem
}

.language-selector-container .flag-icon{
  transform:scale(1, 1)
}

.language-selector-container .dropdown-content{
  padding:0;
  min-width:94px;
  overflow:hidden
}

.language-selector-container .language-selection-button{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  justify-content:center;
  min-width:94px;
  border:none
}

.language-selector-container .language-selection-button p{
  padding-left:10px;
  text-transform:uppercase
}

.language-selector-container .language-selection-button .flag-element{
  display:flex
}

/* purgecss end ignore */

/* purgecss start ignore */

.sidebar-header-user{
  display:flex;
  align-items:center;
  margin:0 1rem
}

.sidebar-header-user-avatar{
  width:2.5rem;
  height:2.5rem
}

.sidebar-header-user-name{
  font-family:'Open Sans', sans-serif;
  font-weight:bold
}

/* purgecss end ignore */

/* purgecss start ignore */

.ticket-list-item{
  border-radius:7px;
  font-size:1.125rem;
  color:black !important
}

.ticket-list-item .width-fit-content{
  width:-moz-fit-content !important;
  width:fit-content !important
}

.ticket-list-item .overflow-hidden{
  overflow:hidden
}

.ticket-list-item .is-two-fifths-widescreen{
  width:auto !important;
  min-width:40%
}

.ticket-list-item .load-content{
  min-width:30% !important
}

.ticket-list-item .is-not-specified{
  font-size:0.9em;
  color:#58595ba0
}

.ticket-list-item .ticket-assign-truck{
  transform:translateX(-20em)
}

@media screen and (max-width: 768px){
  .ticket-list-item .ticket-assign-truck{
    transform:unset;
    right:1%;
    width:98%;
    max-width:98%
  }
}

.ticket-list-item .media{
  margin-bottom:0 !important;
  border-radius:10px;
  border:2px solid transparent
}

.ticket-list-item .media.active-media{
  background-color:#f3f4f6;
  border-color:#ffc019
}

.ticket-list-item .button{
  border-width:1px
}

.ticket-list-item .button-unpublish{
  border-color:red;
  color:red;
  margin-right:1em
}

.ticket-list-item .button-unpublish:hover{
  border-color:red;
  color:red
}

.ticket-list-item .button-publish{
  border-color:green;
  color:green;
  margin-right:1em
}

.ticket-list-item .button-publish:hover{
  border-color:green;
  color:green
}

.ticket-list-item .divider{
  min-width:1px;
  max-width:1px;
  height:100%;
  background-color:#4b5563
}

@media screen and (max-width: 769px){
  .ticket-list-item .divider{
    height:20px
  }
}

.ticket-list-item .details-container{
  width:150px
}

@media screen and (max-width: 769px){
  .ticket-list-item .details-container{
    display:flex
  }
}

@media screen and (min-width: 769px){
  .ticket-list-item .details-container>div{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden
  }
}

.ticket-list-item-car{
  width:initial !important;
  text-align:center
}

.ticket-list-item-car h4{
  font-weight:bolder !important;
  font-size:1em !important
}

.ticket-list-item-car button{
  font-size:0.8rem !important;
  max-width:105px
}

.ticket-list-item .columns{
  margin-bottom:0 !important;
  margin-top:0 !important
}

.ticket-list-item a,.ticket-list-item a:hover{
  color:#0a0a0a
}

.ticket-list-item .button-show-map{
  background:#2562ff;
  text-transform:uppercase;
  color:white
}

.ticket-list-item .arrow-container{
  display:flex;
  justify-content:center;
  width:100% !important;
  align-self:center;
  cursor:pointer;
  padding:0
}

.ticket-list-item .arrow-container>figure{
  transform:rotate(90deg)
}

.ticket-list-item .arrow-container img{
  transition:transform 300ms ease
}

.ticket-list-item .text-gray{
  color:#9d9c9d
}

.ticket-list-item .load-details-text{
  margin:12px 0;
  font-weight:bold
}

.ticket-list-item .ticket-expanded-load-contact-container{
  max-width:33%
}

.ticket-list-item .location-detailed:first-child{
  margin-bottom:1em
}

.ticket-list-item .location-detailed-title{
  display:flex;
  align-items:center;
  margin-bottom:0.5em
}

.ticket-list-item .location-detailed-title figure.image{
  margin-right:5px;
  margin-left:0;
  margin-bottom:0
}

.ticket-list-item.is-expanded .arrow-container img{
  transform:rotate(-180deg)
}

.ticket-list-item .ticket-budget>div{
  position:relative;
  font-size:1em
}

.ticket-list-item .ticket-budget>span{
  position:relative
}

.ticket-list-item .location-text{
  font-size:1.125em
}

.ticket-list-item .ticket-footer{
  margin-top:1rem;
  display:flex;
  flex-wrap:wrap
}

.ticket-list-item .ticket-footer .level-right{
  width:auto;
  flex-wrap:wrap;
  margin-left:auto;
  justify-content:unset;
  max-width:100%
}

.ticket-list-item .ticket-footer .level-right>div{
  margin-top:5px;
  margin-bottom:5px
}

@media screen and (max-width: 768px){
  .ticket-list-item .ticket-footer .level-right{
    width:100%
  }
}

.ticket-list-item .ticket-footer .status-buttons{
  display:flex;
  justify-content:center;
  margin-right:1rem;
  font-weight:400;
  width:auto;
  max-width:100%;
  flex-wrap:wrap
}

.ticket-list-item .ticket-footer .status-buttons .button-content{
  display:flex;
  flex-direction:column;
  align-items:center
}

@media screen and (max-width: 768px){
  .ticket-list-item .ticket-footer .status-buttons{
    margin-right:0
  }

  .ticket-list-item .ticket-footer .status-buttons .button{
    margin-top:3px;
    margin-bottom:3px
  }
}

.ticket-list-item .modal-title{
  margin-bottom:0 !important
}

.ticket-list-item .modal-card-foot{
  justify-content:flex-end
}

.ticket-list-item .modal-card-head{
  border-bottom:none
}

.ticket-list-item .card-content{
  padding-top:0
}

.location-arrow-container{
  display:flex;
  justify-content:center
}

/* purgecss end ignore */

/* purgecss start ignore */

@media screen and (max-width: 900px){
  .cookie-dialog{
    display:none
  }
}

/* purgecss end ignore */

/* purgecss start ignore */

.field{
  position:relative
}

.flat-input{
  box-shadow:none !important;
  text-align:start !important;
  font-size:1.2rem !important;
  border-radius:4px !important;
  border:1px solid #d1d5db !important
}

.flat-input:hover{
  box-shadow:none !important
}

.flat-input-label-container{
  position:absolute;
  top:0;
  transform:translateY(-50%);
  left:8px;
  background-color:#fff
}

.flat-input-label-container label{
  line-height:0.4;
  font-size:0.8rem;
  font-weight:400;
  color:#6b7280;
  padding-left:0.2rem;
  padding-right:0.2rem
}

/* purgecss end ignore */

/* purgecss start ignore */

.overlay{
  background-color:rgba(0,0,0,0.5);
  height:100%;
  width:100%;
  top:0;
  left:0;
  overflow:auto;
  -webkit-backdrop-filter:blur(5px);
          backdrop-filter:blur(5px);
  filter:blur(5px) grayscale(0%)
}

.centered-axis-xy{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  width:90%;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%)
}

.live-tracking-map .map canvas{
  width:100% !important;
  -o-object-fit:cover;
     object-fit:cover
}

.fleet-list-card .fleet-col:not(:last-child){
  border-bottom:1px solid #F2F2F2;
  padding-bottom:10px
}

.loadUnload-grid{
  grid-template-columns:repeat(2, minmax(10%, max-content));
  grid-gap:1rem
}

.dashboard-grid{
  grid-template-columns:repeat(4, minmax(20%, 1fr));
  grid-gap:1rem
}

@media screen and (max-width: 1400px){
  .dashboard-grid{
    grid-template-columns:repeat(2, minmax(calc(50% - 1rem), 1fr))
  }

  .dashboard-grid .coordinate-address{
    margin-top:0 !important;
    margin-left:40px;
    align-items:start !important
  }
}

@media screen and (max-width: 1023px){
  .dashboard-grid{
    grid-template-columns:repeat(3, minmax(calc(33% - 1rem), 1fr))
  }

  .dashboard-grid .coordinate-address{
    margin-top:1.25rem !important;
    margin-left:0;
    align-items:center !important
  }
}

@media screen and (max-width: 600px){
  .dashboard-grid{
    grid-template-columns:repeat(1, minmax(100%, 1fr));
    grid-gap:10px;
    margin-bottom:10px
  }

  .dashboard-grid .fleet-truck-feature,.dashboard-grid .coordinate-address{
    align-items:start !important;
    margin-left:84px;
    margin-top:0 !important
  }
}

.document-pill{
  box-shadow:0 3px 6px #00000029;
  color:#000000;
  border:1px solid #707070;
  border-radius:10px !important;
  max-width:215px;
  width:100%
}

.H_ui{
  display:none !important
}

.dashboard-orders .head-row{
  height:50px
}

.dashboard-orders .row{
  height:80px
}

.dashboard-orders .row td,.dashboard-orders .row th{
  padding-top:15px
}

.dashboard-orders .order-status-dropdown-container{
  padding:0 !important
}

@media screen and (max-width: 1200px){
  .dashboard-orders .head-row{
    height:35px
  }

  .dashboard-orders .head-row th{
    line-height:16px
  }

  .dashboard-orders .row{
    height:80px
  }

  .dashboard-orders .row td,.dashboard-orders .row th{
    padding-top:5px;
    line-height:18px
  }
}

/* purgecss end ignore */