@font-face {
    font-family: 'RobotoLight';
    src: url('../fonts/Roboto-Light.ttf');
    src: url('../fonts/Roboto-Light.ttf') format('embedded-opentype'),
    url('../fonts/Roboto-Light.ttf') format('ttf'),
}

@font-face {
    font-family: 'RobotoRegular';
    src: url('../fonts/Roboto-Regular.ttf');
    src: url('../fonts/Roboto-Regular.ttf') format('embedded-opentype'),
    url('../fonts/Roboto-Regular.ttf') format('ttf'),
}

@font-face {
    font-family: 'RobotoMedium';
    src: url('../fonts/Roboto-Medium.ttf');
    src: url('../fonts/Roboto-Medium.ttf') format('embedded-opentype'),
    url('../fonts/Roboto-Medium.ttf') format('ttf'),
}

@font-face {
    font-family: 'RobotoBold';
    src: url('../fonts/Roboto-Bold.ttf');
    src: url('../fonts/Roboto-Bold.ttf') format('embedded-opentype'),
    url('../fonts/Roboto-Bold.ttf') format('ttf'),
}

html {
  font-family: "RobotoRegular";
}
body {
  background-color: #fff;
  margin: 0;
  font-size: 14px;
}

.disabled-scroll{
  width: 100vw;
  height: 100vh;
  overflow: hidden !important;
}

#app {
  color: #475669;
  background-color: #fff;
}

/* Enter and leave animations can use different */
/* durations and timing functions.              */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}


.text-center{
  text-align: center !important;
}
.text-left{
  text-align: left !important;
}
.text-right{
  text-align: right !important;
}
.text-justify{
  text-align: justify !important;
}
.text-top{
  vertical-align: top !important;
}
.text-middle{
  vertical-align: middle !important;
}
.text-bottom{
  vertical-align: bottom !important;
}
.text-baseline{
  vertical-align: baseline !important;
}
.text-truncate{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-break{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.text-bold{
  font-weight: bold;
}
.text-italic{
  font-style: italic;
}
.text-nomal{
  font-style: normal;
}
.text-underline{
  text-decoration: underline;
}
.text-line-through{
  text-decoration: line-through;
}
.text-remove-decoration{
  text-decoration: none;
}
.text-uppercase{
  text-transform: uppercase;
}
.text-capitalize{
  text-transform: capitalize;
}
.text-normal-case{
  text-transform: none !important;
}
.text-lowercase{
  text-transform: lowercase;
}
.text-red {
  color: #db2828 !important;
}
.text-orange {
  color: #FE9A76 !important;
}
.text-yellow {
  color: #FFD700;
}
.text-olive {
  color: #b5cc18;
}
.text-green {
  color: #32CD32;
}
.text-teal {
  color: #008080;
}
.text-blue {
  color: #0E6EB8;
}
.text-violet {
  color: #6435c9;
}
.text-purple {
  color: #B413EC;
}
.text-pink {
  color: #FF1493;
}
.text-brown {
  color: #a5673f;
}
.text-grey {
  color: #A0A0A0;
}
.text-black {
  color: #000000;
}
.text-white {
  color: #fff;
}
.bg-red {
  background-color: #db2828;
}
.bg-orange {
  background-color: #FE9A76;
}
.bg-yellow {
  background-color: #FFD700;
}
.bg-olive {
  background-color: #b5cc18;
}
.bg-green {
  background-color: #32CD32;
}
.bg-teal {
  background-color: #008080;
}
.bg-blue {
  background-color: #0E6EB8;
}
.bg-violet {
  background-color: #6435c9;
}
.bg-purple {
  background-color: #B413EC;
}
.bg-pink {
  background-color: #FF1493;
}
.bg-brown {
  background-color: #a5673f;
}
.bg-grey {
  background-color: #A0A0A0;
}
.bg-black {
  background-color: #000000;
}
.pull-left{
  float: left;
}
.pull-right{
  float: right !important;
}
.clear-both{
  clear: both;
}
.clear-left{
  clear: left;
}
.clear-right{
  clear: right;
}
.float-none{
  float: none;
}
.remove-margin{
  margin: 0 !important;
}
.remove-margin-top{
  margin-top: 0 !important;
}
.remove-margin-right{
  margin-right: 0;
}
.remove-margin-bottom{
  margin-bottom: 0 !important;
}
.remove-margin-left{
  margin-left: 0 !important;
}
.remove-padding{
  padding: 0 !important;
}
.remove-padding-top{
  padding-top: 0 !important;
}
.remove-padding-right{
  padding-right: 0 !important;
}
.remove-padding-bottom{
  padding-bottom: 0 !important;
}
.remove-padding-right{
  padding-right: 0 !important;
}
.margin-all{
  margin: 10px !important;
}
.margin-top{
  margin-top: 10px !important;
}
.margin-bottom{
  margin-bottom: 10px !important;
}
.margin-left{
  margin-left: 10px !important;
}
.margin-right{
  margin-right: 10px;
}
.margin-sm-all{
  margin: 5px !important;
}
.margin-sm-top{
  margin-top: 5px !important;
}
.margin-sm-bottom{
  margin-bottom: 5px !important;
}
.margin-sm-left{
  margin-left: 5px !important;
}
.margin-sm-right{
  margin-right: 5px;
}
.margin-md-all{
  margin: 15px !important;
}
.margin-md-top{
  margin-top: 15px !important;
}
.margin-md-bottom{
  margin-bottom: 15px !important;
}
.margin-md-left{
  margin-left: 15px !important;
}
.margin-md-right{
  margin-right: 15px;
}
.margin-lg-all{
  margin: 20px !important;
}
.margin-lg-top{
  margin-top: 20px !important;
}
.margin-lg-bottom{
  margin-bottom: 20px !important;
}
.margin-lg-left{
  margin-left: 20px !important;
}
.margin-lg-right{
  margin-right: 20px;
}
.padding-all{
  padding: 10px !important;
}
.padding-top{
  padding-top: 10px !important;
}
.padding-bottom{
  padding-bottom: 10px !important;
}
.padding-left{
  padding-left: 10px;
}
.padding-right{
  padding-right: 10px !important;
}
.padding-sm-all{
  padding: 5px !important;
}
.padding-sm-top{
  padding-top: 5px !important;
}
.padding-sm-bottom{
  padding-bottom: 5px !important;
}
.padding-sm-left{
  padding-left: 5px;
}
.padding-sm-right{
  padding-right: 5px !important;
}
.padding-md-all{
  padding: 15px !important;
}
.padding-md-top{
  padding-top: 15px !important;
}
.padding-md-bottom{
  padding-bottom: 15px !important;
}
.padding-md-left{
  padding-left: 15px;
}
.padding-md-right{
  padding-right: 15px !important;
}
.padding-lg-all{
  padding: 20px !important;
}
.padding-lg-top{
  padding-top: 20px !important;
}
.padding-lg-bottom{
  padding-bottom: 20px !important;
}
.padding-lg-left{
  padding-left: 20px;
}
.padding-lg-right{
  padding-right: 20px !important;
}
.display-inline{
  display: inline !important;
}
.display-block{
  display: block !important;
}
.display-inline-block{
  display: inline-block !important;
}
.cursor-pointer {
  cursor: pointer;
}
.display-inline .el-tooltip__rel{
  display: inline !important;
}
.width-100 {
  width: 100% !important;
}
.pointer{
  cursor: pointer;
}

.el-table .cell{
  padding: 0px 10px !important;
  line-height: 1em !important;
}

.input-search {
  width: 280px !important;
  height: 36px;
}
.input-search .el-input__inner {
  border-radius: 4px;
  background-color: #1f2d3d;
  border: none;
  color: #c0ccda;
}
.gs-mail-dot .el-badge__content.is-fixed {
  top: 15px !important;
  border: none;
}
.gs-mail-dot .el-badge__content.is-fixed.is-dot {
  right: 0;
}
.gs-menu .el-menu--horizontal>.el-submenu:hover .el-submenu__title {
  border-bottom: transparent !important;
}
/* shipment */
.shipment-code-display {
  font-family: "Courier New";
  font-weight: bold;
  color: #659f13;
  border-bottom: 1px dotted #999;
  text-transform: uppercase;
}

/*status-listting*/
.status-listting .el-radio-button__inner{
  border: none;
  font-size: 12px;
  margin-top: 5px;
  padding: 10px;
}
.status-listting .el-radio-button:not(:last-child) {
  margin-right: 0px;
}
.status-listting .el-radio-button__inner{
  border-radius: 5px !important;
  border-left: none !important;
}

.status-listting .el-radio-button__orig-radio:checked+.el-radio-button__inner {
  box-shadow: none;
}

.status-listting .el-badge__content{
  font-size: 10px;
  height: 14px;
  line-height: 14px;
  padding: 0 5px;
}

.status-listting .el-badge__content.is-fixed{
  top: 7px;
  right: 15px;
}

/*shipment history*/
.shipment-history {
  list-style: none;
  padding: 0;
}
.shipment-history li {
  position: relative;
  padding-left: 20px;
  padding-bottom: 50px;
}
.shipment-history li:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 20px;
  background-color: #b8e986;
  top: 3px;
  left: -4px;
}
.shipment-history li:after {
  content: "";
  position: absolute;
  height: 110px;
  width: 2px;
  background-color: #b8e986;
  top: 12px;
  left: 3px;
}
.shipment-history li:last-child:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
}
.gs-font-20 {
  font-size: 20px;
}
.shipment-history-status {
  font-weight: bold;
  color: #f5a623;
}

/*ring bell*/

.ring-bell{
  -webkit-animation: ring 3s 1s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 3s 1s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 3s 1s ease-in-out infinite;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}


.adddon-1 .el-select .el-input {
  width: 60px;
}

.adddon-2 .el-select .el-input {
  width: 120px;
}

.adddon-3 .el-select .el-input {
  width: 80px;
}
/*logo carrier*/
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/*gs table row statuses*/
.row-red {
  background-color: rgba(219, 40, 40, .5) !important;
}
.row-like-header{
  background: #eef1f6 !important;
}
.row-orange {
  background-color: rgba(254, 154, 118, .3) !important;
}
/* tags */
.input-new-tag {
  width: auto !important;
}
.input-new-tag input{
  width: 100px;
  height: 28px !important;
}

.debug-text{
  font-size: 10px;
}
.el-table__expanded-cell{
  padding: 5px !important;
}
.table td, .table th{
  padding: 5px;
}