.loading{
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.2);  
  cursor: progress;
}
.loading img{
  position:relative;
  top: 50vh;
  left: 50vw;
}

select option:checked {
  background-color: rgb(186 227 242) !important
}

.eco{
  font-weight: bold;
  color: #008355;
  position:relative;
  left: 4px;
}
.eco+span{
  font-weight: bold;
}

table tr:hover, .metricsOrdersWrapper table tr:hover > th{
  cursor:default;
  background-color:rgb(219, 253, 154) !important;
}

.clicked{
  background-color: #ddd;
  color:#000;
}
.table-responsive{
  height:400px;  
  overflow:scroll;
}
thead tr:nth-child(1) th{
  background: white;
  top: 0px;
  z-index: 10;
}
table tr th{
  font-weight:normal !important;
  background-color: #b0c7ca !important;
  text-align: center;
  vertical-align: middle !important;
  /*background-color: rgba(44, 130, 201, 1) !important;*/
  /*color: #eee;*/
  cursor: ns-resize;
}

table.md-form{
  table-layout: fixed;
  font-size: 0.9em;
}
table tbody tr th:hover{
  cursor: default;
  background-color: transparent;
}
.table-bordered th,
.table-bordered tr,
.table-bordered td {
  border: 1px solid #888 !important;
  text-align: center;
}
.table-bordered td select{
  width: 100%;
}
th.sortingAsc,th.sortingDesc {
  background-color: #9dbed2   !important;
  /*background-color: rgba(44, 130, 201, 1)   !important;*/
}
tr select {
  border-radius: 4px;
  padding: 1px;
  font-size: 0.9rem;
  height: 24px;
}
ul{
  list-style: none;
}

.dash-container {
  font-size: 0.9em;
}

.jumbotron * {
  font-size: 0.85rem;
}

h4{
  color: rgb(8, 20, 21);
}

#tblsdoc .imo, #tblsdoc .issuers_name{
  cursor: zoom-in;
  max-width: 13rem;
}

.jumbotron span {
    background-color: whitesmoke;
}

.missing, td.missing{
  border:1px solid red !important;
}
/*.missing::after{
  content: "*";
  color: red;
}*/

.finalize_blink {
  animation: blinker 2s linear infinite;
  font-size: 1.5rem;
}

.modal .required{
  position: relative;
  left: 1px;
  color: red;
  top: 8px;
  font-size: 1.1rem;
}
.modal input[required=required]::after {
  content: "* " !important;
  color: red;
}

.manageShipCompanies table thead th{
  position: sticky; top: -1px; z-index: 1;
}

.manageShipCompanies table td {
  padding: 0px 5px !important;
  font-size: 0.9em;
  /*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
}

.manageShipCompanies button.showPwdRules {
  padding: 0px 5px !important;
  margin-left: 5px;
}

.manageShipCompanies td.address {
  max-width: 20em;
}
.manageShipCompanies td.division {
  max-width: 15em;
}
.counter{
  display: inline-block;
  /*color: blue;*/
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  padding: 2px 8px;
  background-color: powderblue;
  border-radius: 10px;
  margin: 5px 0px;
}



table .dt{
  min-width: 6rem !important;
  text-align: left;
}
table .short-text{
  max-width: 6rem !important;
  text-align: left;
  /*overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
}
table .med-text{
  max-width: 9rem !important;
  text-align: left;
  font-size: 0.8em;
  /*overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;*/
}
table .long-text{
  max-width: 15rem !important;
  text-align: left;
  font-size: 0.8em;
}



.pdfLinks{
  display: block;
}

.add_ocean{
  line-height: 1.0em;
}


.btnShowImoPerSupplier{
  min-width:2.5em;
}

ul.imoPerSuppliers {
  width:20em;
}

ul.imoPerSuppliers li{
  color: blueviolet;
}

#tblSuppliers table tbody td:nth-child(1){
  max-width: 5em;
}

.metrix-container h5{
  color:steelblue;
}

.metrix-container td img{
  float:right;
}

#tblOrders span.legend {
  display: block;
  color: darkviolet;
  font-weight: 500;
  margin-right: 8px;
}

/*************** Orders ***************/
tr.delClass {
  text-decoration: line-through;
  color: red;
  opacity: 0.4;
}
.opr:hover{
  cursor: pointer;
  background-color: lightblue;
}
#frmOrderDetails *{
  font-size: 0.9rem;
}
.contact_overdue:after{
  content: url(../images/warning-sm.webp);
  vertical-align: middle;
  position: relative;
  top: 2px;
}
.completed:after{
  content: url(../images/contact-completed-sm.webp);
  vertical-align: middle;
  position: relative;
  top: 2px;
}
img.contactIcon.muted {
  opacity: 0.3;
}
/***************************************/

/******* S O R T E R *********************/
.tablesorter-headerAsc > .tablesorter-header-inner{
  background-color:chartreuse;
}
.tablesorter-headerDesc > .tablesorter-header-inner{
  background-color:chartreuse;
}
/* rows hidden by filtering (needed for child rows) */
.tablesorter .filtered {
  display: none;
}
/*****************************************/


/**************  e M A I L  *******************/
#tbl_emails tbody tr {
  font-size: 13px;
}
#tbl_emails th{
  text-align: left;
}
#tbl_emails tbody td .addr{
  display: block;
  white-space: nowrap;
}
#tbl_emails tbody tr{
  color: #777;
}
#tbl_emails tbody tr.unseen{
  color: #000;
  font-weight: 600;
}
#tbl_emails tbody td .messageBody{
  display: none;
  background-color: azure;
}
#tbl_emails tbody td .messageBody *:hover{
  background-color: azure;
}
#tbl_emails tbody tr p {
    line-height: 1em;
}
/*****************************************/


/**********************************************/
/**************   Co2   ***********************/
/**********************************************/
.vesselPics img {
  max-width: 400px;
}


/**********************************************************/
/********************   media   ***************************/
/**********************************************************/

@keyframes blinker {
  40% {
    opacity: 0.3;
    transform: scale(1.5); 
  }
}

@media screen and (max-width: 1440px) {
  tr select{
    max-width: 20em;
  }
}
@media screen and (max-width: 1280px) {
  tr select{
    max-width: 15em;
  }
}
@media screen and (max-width: 1024px) {
  tr select{
    max-width: 11em;
    font-size: 0.7em;
  }
  option{
    font-size: 0.8em;
  }
}
@media screen and (orientation: landscape) and (max-width: 1024px) {
  tr select{
    max-width: 17em;
    font-size: 0.7em;
  }
  option{
    font-size: 0.8em;
  }
}