@import url("https://cdn.syncfusion.com/ej2/bootstrap5.css");
.hideContent {
    display: none !important;
  }
  .disabledInput {
    pointer-events: none;
    opacity: 0.9;
  }
  .sloganHelp{
    z-index: 13;
      font-family: Roboto;
      height: auto;
      color: rgb(255, 255, 255);
      text-decoration: none;
      white-space: normal;
      width: 273px;
      min-height: 0px;
      min-width: 0px;
      max-height: none;
      max-width: none;
      text-align: left;
      line-height: 57px;
      letter-spacing: 0px;
      font-weight: 400;
      font-size: 46px;
      transform-origin: 50% 50%;
      opacity: 1;
      transform: translate(0px, 0px);
      visibility: visible;
  }
  .sloganShip {
    z-index: 11;
    font-family: Roboto;
    font-style: italic;
    height: auto;
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: normal;
    width: 330px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 57px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 46px;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
  }
  
  .sloganColorDark{
    color: rgb(255, 255, 255);
  }
  .sloganColorLight{
    color: #e80000 !important;
  }

  .country-flag-list {
    display: inline-block; 
    width: 18px; 
    height: 18px; 
    vertical-align: middle; 
    margin-left: 0.09rem
  }

.background-gray { background: #A2A2A2!important; }
.background-light-gray { background: #dbd8d8!important }
.background-black { background: #000000!important; }

.ml-5p{ margin-left: 5px!important; }

.ml-5p{ margin-left: 5px; } .mr-5p{ margin-right: 5px; } .mt-5p{ margin-top: 5px; } .mb-5p{ margin-bottom: 5px; }
.ml-3p{ margin-left: 3px; } .mr-3p{ margin-right: 3px; } .mt-3p{ margin-top: 3px; } .mb-3p{ margin-bottom: 3px; }
.ml-10p{ margin-left: 10px; } .mr-10p{ margin-right: 10px; } .mt-10p{ margin-top: 10px; } .mb-10p{ margin-bottom: 10px; }

.font-weight-600{ font-weight: 600; font-family: arial; font-size: 12px; line-height: 10px !important;}
.font-size-20px{ font-weight: bold; font-family: 'Arial Narrow'; font-size: 20px; width: 100%;line-height: 25px;}
.font-size-20px td{padding: 0; margin: 0;}
.text-align-right{ text-align: right !important;}
.text-align-center{ text-align: center !important;}
.width-25per{width: 25%;}
.width-35per{width: 35%;}
.width-50per{width: 50%;}
.height-5px{ height: 5px;}
.height-25px{ height: 25px;}
.height-35px{ height: 35px;}

.previewTb table {  border: 1px #BFBFBF solid; }
.previewTb table td {  border: 1px #BFBFBF solid; padding-left: 3px; }
.previewTb table td:first-child {  border: 1px #BFBFBF solid; }

.shipment-details-tb table {  border: 1px #000 solid; }
.shipment-details-tb table td {  border: 0px #BFBFBF solid; padding-left: 3px; }
.shipment-details-tb table th {  border: 0px #BFBFBF solid; padding-left: 3px; background-color: black;color: white; font-family: arial; font-size: 12px;}
.shipment-details-tb table td:first-child {  border: 0px #BFBFBF solid; }

.vgm-report-header-tb table {  border: 1px #000 solid; }
.vgm-report-header-tb table td {  border: 0px #BFBFBF dashed; padding-left: 3px; }
.vgm-report-header-tb table th {  border: 0px #BFBFBF dashed; padding-left: 3px; background-color: black;color: white; font-family: arial; font-size: 12px;}
.vgm-report-header-tb table td:first-child {  border: 0px #BFBFBF dashed; }

.vgm-report-tb table {  border: 1px #000 solid; }
.vgm-report-tb table td {  border: 1px #BFBFBF dashed; padding-left: 3px; }
.vgm-report-tb table th {  border: 0px #BFBFBF dashed; padding-left: 3px; background-color: black;color: white; font-family: arial; font-size: 12px;}
.vgm-report-tb table td:first-child {  border: 1px #BFBFBF dashed; }

.row-spacing { padding-left: 2rem; padding-right: 2rem; margin-top: 2px; margin-bottom: 2px; }

.booking-preview-padding { padding-left: 3rem; padding-right: 3rem; }

.card-body-padding-override{
  padding: 4.5rem 4.5rem !important;
}
/* Modal OceanBookingList */
.modal-oblist {
  max-width: 1300px !important;
}
.hidden{
  visibility : hidden
}
.whitespace {
  white-space: pre-wrap;
}

.stuffing-report-header-bg{
  /* background-color: pink; */
  font-weight: bold;
}

.row-spacing-line { padding-left: 2rem; padding-right: 2rem; margin: 0px !important; color: #000; }

.td-font-size-20px {
  font-size: 20px;font-weight: 1000;font-family: 'Arial Narrow'; line-height: 25px; color: #000;
}

.container-details{
  font-weight: bold;
}

.booking-number-stuffing-report{
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
}
.container-number-stuffing-report{
  font-size: 16px;
  font-weight: bold;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.order-number-stuffing-report{
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
}

.reportBg{
  background-color: white;
}

.login-footer-logo-p{
  text-align: center;
  padding-top: 70px;
}

.login-footer-logo-img{
  width: 25%;
}

table.tb-unit-source tr:nth-child(even) {
  background-color: #f5f5f5;
}

@media screen and (max-width: 600px) {
  .mob-display-none{
    display: none;
    visibility: hidden;
    height: 0px;
    width: 0px;
  }
  /* table {
    width: 100%;
  }

  table thead {
    display: none;
  }

  table tr, table td {
    border-bottom: 1px solid #ddd;
  }

  table tr {
    margin-bottom: 8px;
  }

  table td {
    display: flex;
  }
  
  table td::before {
    content: attr(label);
    font-weight: bold;
  } */
}

.svg-mx-1 {
  margin-right: 1rem !important;
  margin-left: 0 !important;
}

.tag-purple{
  background-color:#7367f0; 
  border-radius: 0px !important; 
  font-weight: lighter; 
  margin-bottom: 3px; 
  cursor: pointer;
}

.bg-purple {
  background-color:#7367f0 !important; 
}

.btn-purple {
  border-color: #7367f0 !important;
  background-color: #7367f0 !important;
  color: white !important;
}

.bg-light-purple {
  color: #7367f0 !important;
  background: rgb(189, 166, 231, 0.5) !important;
}

.progress-bar-purple {
  background-color: rgb(189, 166, 231, 0.5) !important; 
}

.progress-bar-purple .progress-bar {
  background-color: #7367f0 !important; 
}

.workdone-white{
  background-color:#fff;
  color: #000 !important;
  border: 1px dashed gray !important;
  border-radius: 0px !important; 
  font-weight: lighter; 
  margin-bottom: 3px; 
  cursor: pointer;
}

.clock-header {
  height: 100%;
  width: 260px;
  height: 4.45rem;
  position: relative;
  transition: 300ms ease all, background 0s;
}
.brand-logo-clock img {
  max-width: 36px;
}
 
.brand-text-clock {
  padding-left: 10px;
  margin-bottom: 0;
  font-weight: 600;
  letter-spacing: 0.01rem;
  font-size: 1.45rem;
}

.clock-brand {
  margin-top: 1.35rem;
}
.clock-brand {
  display: flex;
  align-items: center;
  font-size: inherit;
}

.rccs__card {
  height: 182.873px;
  position: relative;
  transform-style: preserve-3d;
  transition: all .4s linear;
}
.rccs, .rccs__card {
  margin: 0 auto;
  width: 290px;
}

.rccs__card--unknown > div {
  background: linear-gradient(25deg,#999,#999);
  box-shadow: none;
}
.rccs__card--front {
  z-index: 20;
}
.rccs__card--back, .rccs__card--front {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background: linear-gradient(25deg,#939393,#717171);
  border-radius: 14.5px;
  color: #fff;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  width: 100%;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}

.rccs__card__background {
  height: 200%;
  position: absolute;
  top: -60%;
  transform: rotate(25deg);
  transition: all .5s ease-out;
  width: 150%;
  left: -170%;
}

.rccs__card--unknown .rccs__issuer {
  visibility: hidden;
}
.rccs__issuer {
  background-position: 100% 0;
  height: 23%;
  right: 10%;
  width: 40%;
}
.rccs__chip, .rccs__issuer {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 10%;
}
.rccs__cvc__front {
  font-size: 11.9px;
  opacity: 0;
  right: 10%;
  top: 38%;
  visibility: hidden;
}
.rccs__cvc, .rccs__cvc__front {
  font-family: Consolas,Courier,monospace;
  position: absolute;
}
.rccs__cvc, .rccs__expiry, .rccs__name, .rccs__number {
  opacity: .5;
  transition: opacity .3s;
}
.rccs__number {
  clear: both;
  font-family: Consolas,Courier,monospace;
  font-size: 20px;
  left: 10%;
  position: absolute;
  top: 45%;
}

.rccs__cvc, .rccs__expiry, .rccs__name, .rccs__number {
  opacity: .5;
  transition: opacity .3s;
}
.rccs__expiry, .rccs__name {
  bottom: 15%;
  line-height: 1;
  position: absolute;
}
.rccs__name {
  font-family: Consolas,Courier,monospace;
  font-size: 17px;
  left: 10%;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  width: 60%;
}

.rccs__cvc, .rccs__expiry, .rccs__name, .rccs__number {
  opacity: .5;
  transition: opacity .3s;
}
.rccs__expiry {
  font-size: 0;
  right: 10%;
}
.rccs__expiry, .rccs__name {
  bottom: 15%;
  line-height: 1;
  position: absolute;
}
*, ::before, ::after {
  box-sizing: inherit;
}
.rccs__chip, .rccs__issuer {
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 10%;
}

.rccs__chip {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9Ijc2IiB2aWV3Qm94PSIwIDAgMTAwIDc2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZGVmcz48bGluZWFyR3JhZGllbnQgeDE9IjEwMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSIgaWQ9ImEiPjxzdG9wIHN0b3AtY29sb3I9IiNGM0QwOEYiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkFENzY2IiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNOTIuNzI3IDc1LjQ1NWgtODUuNDU1Yy00IDAtNy4yNzMtMy4yNzMtNy4yNzMtNy4yNzN2LTYwLjkwOWMwLTQgMy4yNzMtNy4yNzMgNy4yNzMtNy4yNzNoODUuNDU1YzQgMCA3LjI3MyAzLjI3MyA3LjI3MyA3LjI3M3Y2MC45MDljMCA0LTMuMjczIDcuMjczLTcuMjczIDcuMjczIiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0iTTcyLjEyMyAyOC40ODVoMjcuODc4di0xLjgxOGgtMjkuNjQ4Yy0uOTY1IDAtMS44MzIuNjAxLTIuMTcyIDEuNTA0LTIuMjg3IDYuMDcyLTIuNDMzIDEyLjU5NC0uNDM4IDE5Ljg0Mi40NTUgMS42NTQuNDM1IDMuNC0uMSA1LjAzLTIuMDM2IDYuMTk1LTcuNzc5IDE5Ljk4OC0xOC41NTEgMTkuOTg4LTExLjAwOCAwLTE2LjA5Ni0xNS42OTktMTcuMzM0LTIxLjk1Mi0uMTU1LS43ODQtLjEyMi0xLjU5Mi4xMDctMi4zNTcgMS42OTUtNS42NDggMi4wOTQtMTAuNjQtLjAxNi0xOS41OS0uMjA1LS44Ny0uMTgyLTEuNzgzLjA0OC0yLjY0NiA0LjQ4LTE2Ljc1NSAxMi44ODItMjAuMTQ3IDEyLjk2NS0yMC4xNzkuMzU2LS4xMzIuNTkzLS40NzIuNTkzLS44NTJ2LTUuNDU1aC0xLjgxOHYzLjc3NmMwIC42NS0uMzMyIDEuMjUyLS44ODQgMS41OTYtMi44MDMgMS43NDItOC45MDQgNi45MzYtMTIuNTU3IDIwLjQ1Ni0uMTguNjY4LS43ODEgMS4xMzYtMS40NzMgMS4xMzNsLTI4LjcyMi0uMTM5djEuODE4bDI3LjQxNi4xMzNjMS40NjguMDA3IDIuNzM1IDEuMDQxIDMuMDM3IDIuNDc4IDEuNDE2IDYuNzQxIDEuMjE5IDExLjAzOS4wODIgMTUuNDU4LS4zMTYgMS4yMy0xLjQyIDIuMDk2LTIuNjkgMi4xMDlsLTI3Ljg0NC4yN3YxLjgxOWwyOC42MDUtLjI3OGMuNjkzLS4wMDcgMS4yOTYuNDczIDEuNDM1IDEuMTUyIDEuNDQyIDcuMDQxIDYuODg3IDIzLjA3IDE5LjA1IDIzLjA3IDYuMzY4IDAgMTIuMDYyLTQuMjUgMTYuNDY3LTEyLjI5IDIuNjQ0LTQuODI4IDQuMDY3LTkuNTkxIDQuNTQxLTExLjM0NmgyOS45MDF2LTEuODE4aC0yOC4wMTZjLTEuMTU4IDAtMi4xODMtLjc3Mi0yLjQ4OS0xLjg4OS0xLjY5Mi02LjE2NC0xLjc2MS0xMS43NTUtLjItMTYuOTU5LjM3MS0xLjIzNSAxLjUzOC0yLjA2MSAyLjgyNy0yLjA2MXptLTE3LjE1LTIxLjkxNGMuMDQ1LjAyMiA0LjUxOSAyLjMyMiA5LjI1MyAxMC4wNDEuMTcyLjI4LjQ3LjQzNC43NzYuNDM0LjE5OCAwIC4zOTktLjA2NC41NzEtLjIwMi4zNjUtLjI5Mi40MTYtLjgzNy4xNzItMS4yMzUtMy41Ny01LjgwNS03LjAyNC04LjcxLTguNzc1LTkuOTMxLS40My0uMjk5LS42OC0uNzkyLS42OC0xLjMxNXYtNC4zNjNoLTEuODE4djUuNzU4YzAgLjM0NS4xOTUuNjU5LjUwMi44MTN6IiBmaWxsPSIjMEMwMjAwIi8+PC9zdmc+");
  height: 26.36364px;
  left: 10%;
  width: 41.42857px;
}

.rccs__expiry__valid {
  font-size: 10px;
  margin-bottom: 5px;
}
.rccs__expiry > * {
  vertical-align: middle;
}

.rccs__expiry__value {
  font-family: Consolas,Courier,monospace;
  font-size: 16px;
}
.rccs__expiry > * {
  vertical-align: middle;
}