body                { font-size: 0.9em !important; }
th                  { background-color:bisque; }
td                  { background-color:#FFFFFF; }

::placeholder       { color: #e9ecef !important;}

.ypidlink           { color:  #6ca0fd !important; cursor: pointer !important; }
.ypidtableheader    { border: 0.5pt solid #dee2e6 !important; background-color: #e9ecef !important; font-size: 0.8em !important; padding: 10px 8px !important; text-align: left !important; }
.ypidtablecontent   { border: 0.5pt solid #dee2e6 !important; font-size: 0.8em !important;  padding: 10px 8px !important; text-align: left !important; vertical-align: top; }
.ypidinputtext      { font-size: 0.9em !important; border-radius: 5px !important; border: 0.5pt solid #dee2e6 !important;}
.ypidselect         { font-size: 0.9em !important; border-radius: 5px !important; border: 0.5pt solid #dee2e6 !important; padding-top: 10px !important; padding-bottom: 10px !important;}
.ypidbutton         { background-color: #6ca0fd !important; color: #FFFFFF !important; border: 1px solid #6ca0fd !important; border-radius: 8px; min-width: 50px; cursor: pointer; }
.ypidlabel          { padding: 20px 0px !important; font-weight: bold !important; font-size: 0.9em !important;  }
.ypiddisplayvalue   { font-size: 0.9em !important; font-weight: normal !important; }
.ypidwidth100pc     { width: 100%; }
.ypidmargintop10px  { margin-top: 10px; margin-bottom: 10px; }
.ypidhidden         { display: none; }
.ypidblock          { display: block; }
.ypidinlineblock    { display: inline-block; }
.ypidrow            { display: table-row; }

.ypidcompartmentCard        { display: inner-block; float: left; cursor: pointer; text-align: center; vertical-align: bottom; width: 250px; border-radius: 8px; margin: 10px; overflow: hidden; }
.ypidcompartmentCardDisabled{ display: inner-block; float: left; cursor: default; text-align: center; vertical-align: bottom; width: 250px; border-radius: 8px; margin: 10px; overflow: hidden; }
.ypidcompartmentLot         { display: inner-block; float: left; cursor: pointer; text-align: center; vertical-align: bottom; background-image: url('../img/compartment_lot.jpg'); width: 104px; height: 134px; background-repeat: no-repeat; background-position: center top; background-size: 100% auto;}
.ypidcompartmentWafer       { float: left; cursor: pointer; text-align: center; vertical-align: middle; background-image: url('../img/compartment_wafer.jpg'); width: 104px; height: 104px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.ypidcompartmentHardware    { float: left; cursor: pointer; text-align: center; vertical-align: middle;  background-image: url('../img/compartment_hardware.jpg'); width: 104px; height: 104px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.ypidcompartmentCassette    { float: left; cursor: pointer; text-align: center; vertical-align: middle;  background-image: url('../img/compartment_cassette.jpg'); width: 104px; height: 104px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.ypidcompartmentAGV         { float: left; cursor: pointer; text-align: center; vertical-align: middle;  background-image: url('../img/compartment_agv.jpg'); width: 104px; height: 104px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.ypidcompartmentagv         { float: left; cursor: pointer; text-align: center; vertical-align: middle;  background-image: url('../img/compartment_agv.jpg'); width: 600px; height: 343px; background-repeat: no-repeat; background-position: center center; background-size: cover;}

.ypidamr                                { cursor: pointer; text-align: center; vertical-align: middle;  background-image: url('../img/amr.jpg'); width: 100px; height: 100px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.ypidemptylisttext                      { border: 0.5pt solid #dee2e6 !important;  font-style: italic; font-size: 0.8em; text-align:center !important; padding: 10px 8px !important; }

.ypidsrcerackbtn                        { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(17,93,169);  background-image: url('../img/srcerack.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypidsrcerackbtn_active                 { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(5,161,23);  background-image: url('../img/selected-srcerack.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypidsrcloaderbtn                       { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(17,93,169);  background-image: url('../img/srcloader.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypidsrcloaderbtn_active                { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(5,161,23);  background-image: url('../img/selected-srcloader.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto;}

.ypiddsterackbtn                        { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(17,93,169);  background-image: url('../img/dsterack.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypiddsterackbtn_active                 { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(5,161,23);  background-image: url('../img/selected-dsterack.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypiddstloaderbtn                       { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(17,93,169);  background-image: url('../img/dstloader.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ypiddstloaderbtn_active                { float: left; vertical-align: middle; text-align: center; cursor: pointer; cursor: hand; margin: 0px; padding: 0px; width: 100%; height: 50%; background-color: rgb(5,161,23);  background-image: url('../img/selected-dstloader.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }

.ypidtab                                { font-weight: bold; color:#6ca0fd; margin: 10px 5px; }
.ypidactivetab                          { font-weight: bold; color:firebrick; margin: 10px 5px; }
.ypidvacant                             { display: inline-block; margin: auto; width: 15px; height: 15px; border-radius: 15px; border: 0px; background-color: #4CBB17 }
.ypidoccupied                           { display: inline-block; margin: auto; width: 15px; height: 15px; border-radius: 15px; border: 0px; background-color: #FF5733 }

.ypicenter                              { text-align: center; }

.ypid_status_unavailable                { background-color: firebrick; color: #FFFFFF; font-weight: bold; padding: 0px 5px;}
.ypid_status_active                     { color: #000000; font-weight: bold; padding: 0px 5px; }
.ypid_status_inactive                   { background-color: firebrick; color: #FFFFFF; font-weight: bold; padding: 0px 5px; }
.ypid_status_busy                       { background-color: #6ca0fd; color: #FFFFFF; font-weight: bold; padding: 0px 5px; }
.ypid_status_error                      { background-color: firebrick; color: #FFFFFF; font-weight: bold; padding: 0px 5px; }
.ypid_status_free                       { background-color: #6ca0fd; color: #FFFFFF; font-weight: bold; padding: 0px 5px; }