/* this is a _demo_ container. remember the importance of relative and absolute positioning */
.all{
  position: relative;
  left:0px;
  top: 0px;
  height: 750px;
  width: 1110px;
  border: 4px solid black;
  margin-top: 50;
  z-index: 1;
  background: #fff;

}

#all{
  top: 30px;
  height: 775px;
}

.drill_toolbar{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1110px;
  height: 50px;
  padding: 0;
  box-sizing: border-box;
  background: linear-gradient(#f6f6f6, #dedede);
  border-bottom: 1px solid black;
  z-index: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.drill_toolbar_btn{
  appearance: none;
  height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid black;
  background: #d3d3d3;
  color: black;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

@media (pointer: coarse){
  html,
  body{
    margin: 0 !important;
    padding: 0 !important;
  }

  .all{
    margin-top: 0px !important;
  }

  #all{
    top: 0px !important;
  }

  #all input:focus,
  #all select:focus,
  #all textarea:focus{
    font-size: 16px !important;
  }
}

.drill_toolbar_btn:hover{
  background: #dc9d00;
}

.drill_toolbar_btn:active{
  transform: translateY(1px);
}

.drill_toolbar_btn svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}
#tb_fullscreen{
    position: absolute;
    height: 38px;
    left: 1005px;
    top: 5px;
    width: 95px;
}

.dropdown_lang{
  position: absolute;
  left: 305px;
  width: 95px;
  top: 5px;
  height: 38px;
  display: inline-block;
}

#drill_toolbar .dropdown_tables{
  position: absolute;
  left: 780px;
  width: 95px;
  top: 5px;
  height: 38px;
  display: inline-block;
}

#drill_toolbar .dropdown_tables .dropbtn_tables{
  height: 38px;
  width: 95px;
  padding: 0 10px;
  border: 1px solid black;
  background: #d3d3d3;
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
}

#drill_toolbar .dropdown_tables:hover .dropbtn_tables{
  background: #dc9d00;
}

#drill_toolbar .dropdown_tables-content{
  display: none;
  position: absolute;
  top: 38px;
  width:130px;
  left: 0;
  right: 0;
  background-color: #dc9d00;
  border: 1px solid black;
  z-index: 6000;
}

#drill_toolbar .dropdown_tables-content a{
  display: block;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  color: black;
  background-color: #dc9d00;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0px 0px 0px 1px black inset;
}

#drill_toolbar .dropdown_tables-content a:hover{
  background-color: red;
}

#drill_toolbar .dropdown_tables:hover .dropdown_tables-content{
  display: block;
}

#drill_toolbar .dropdown_tables.is_open .dropdown_tables-content{
  display: block;
}

#drill_toolbar .dropdown_lang .dropbtn_lang{
  position:absolute;
  left: 0px;
  height: 38px;
  width: 95px;
  padding: 0 10px;
  border: 1px solid black;
  background: #d3d3d3;
  outline: none;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
}

#drill_toolbar .dropdown_lang:hover .dropbtn_lang{
  background: #dc9d00;
}

#drill_toolbar .dropdown_lang-content{
  display: none;
  position: absolute;
  top: 38px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;
  border: 1px solid black;
  z-index: 6000;
}

#drill_toolbar .dropdown_lang-content a{
  display: block;
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  color: black;
  background-color: #dc9d00;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0px 0px 0px 1px black inset;
}

#drill_toolbar .dropdown_lang-content a:hover{
  background-color: red;
}

#drill_toolbar .dropdown_lang:hover .dropdown_lang-content{
  display: block;
}

#drill_toolbar .dropdown_lang.is_open .dropdown_lang-content{
  display: block;
}

.drill_toolbar_select_wrap{
  height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1px solid black;
  background: #d3d3d3;
  color: black;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.drill_toolbar_select_wrap:hover{
  background: #dc9d00;
}

.drill_toolbar_select_wrap svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.drill_toolbar_select{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0px;
  margin: 0;
  height: 100%;
  line-height: 1;
  min-width: 60px;
  padding-left:15px;
}

.drill_tooltip{
  position: fixed;
  z-index: 20000;
  max-width: 340px;
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  pointer-events: none;
}

[data-drill-lang="ar"] .drill_tooltip{
  direction: rtl;
  text-align: right;
}

.drill_tooltip::after{
  content: "";
  position: absolute;
  top: var(--drill_tip_arrow_top, 18px);
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.drill_tooltip[data-side="left"]::after{
  right: -16px;
  border-left-color: rgba(20, 20, 20, 0.92);
}

.drill_tooltip[data-side="right"]::after{
  left: -16px;
  border-right-color: rgba(20, 20, 20, 0.92);
}

.drill_toolbar_btn[aria-pressed="true"]{
  background: #bcdcff;
}

.drill_toolbar_btn#tb_tooltips[aria-pressed="false"]{
  opacity: 0.6;
}

.drill_toolbar_label{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .drill_toolbar_btn{
    height: 44px;
    font-size: 14px;
    padding: 0 12px;
  }
  .drill_toolbar_btn svg{
    width: 20px;
    height: 20px;
  }
  .drill_toolbar_select_wrap{
    height: 44px;
    font-size: 14px;
    padding: 0 12px;
  }
  .drill_toolbar_select_wrap svg{
    width: 20px;
    height: 20px;
  }
  .drill_tooltip{
    font-size: 16px;
    max-width: 380px;
  }

  #drill_toolbar .dropbtn_tables,
  #drill_toolbar .dropbtn_lang,
  #drill_toolbar .dropbtn_method,
  #drill_toolbar .dropdown_tables-content a,
  #drill_toolbar .dropdown_lang-content a,
  #drill_toolbar .dropdown_method-content a{
    font-size: 14px;
  }

  #tb_details,
  #tb_global_settings{
    padding: 0 8px;
    gap: 6px;
  }

  #tb_details svg,
  #tb_global_settings svg{
    width: 18px;
    height: 18px;
  }


  #tb_fullscreen{
    height: 44px;
  }

  .dropdown_lang{
    height: 44px;
  }

  #drill_toolbar .dropdown_lang .dropbtn_lang{
    height: 44px;
  }

  #drill_toolbar .dropdown_lang-content{
    top: 44px;
  }

  #drill_toolbar .dropdown_lang-content a{
    height: 44px;
    line-height: 44px;
  }

  #drill_toolbar .dropdown_tables{
    height: 44px;
  }

  #drill_toolbar .dropdown_tables .dropbtn_tables{
    height: 44px;
  }

  #drill_toolbar .dropdown_tables-content{
    top: 44px;
  }

  #drill_toolbar .dropdown_tables-content a{
    height: 44px;
    line-height: 44px;
  }

  #drill_toolbar .dropdown_method{
    height: 44px;
  }

  #drill_toolbar .dropdown_method .dropbtn_method{
    height: 44px;
  }

  #drill_toolbar .dropdown_method-content{
    top: 44px;
  }

  #drill_toolbar .dropdown_method-content a{
    height: 44px;
    line-height: 44px;
  }
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: #fff;
}

body.tbl_popup_body{
  overflow: auto;
  margin: 10px;
  font-family: arial,sans-serif;
}

body.tbl_popup_body .tbl_popup_header{
  margin-bottom: 10px;
  
}

body.tbl_popup_body .tbl_popup_title{
  font-size: 26px;
  font-weight: 800;
  color: blue;
  line-height: 30px;
}

body.tbl_popup_body .tbl_popup_controls{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  margin-bottom: 10px;
}

body.tbl_popup_body .tbl_popup_control{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.tbl_popup_body .tbl_popup_control label,
body.tbl_popup_body .tbl_popup_control .tbl_popup_control_label{
  font-size: 14px;
  font-weight: 700;
}

body.tbl_popup_body .tbl_popup_select,
body.tbl_popup_body .tbl_popup_control input{
  font-size: 16px;
  padding: 4px 8px;
  height: 32px;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_select{
  cursor: pointer;
}

body.tbl_popup_body .tbl_popup_select_wide{
  min-width: 180px;
}

body.tbl_popup_body .tbl_popup_select_medium{
  min-width: 140px;
}

body.tbl_popup_body .tbl_popup_select_narrow{
  min-width: 80px;
}

body.tbl_popup_body .tbl_popup_switch{
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  justify-content: flex-start;
}

body.tbl_popup_body .tbl_popup_switch_text{
  font-size: 16px;
  font-weight: 800;
  user-select: none;
}

body.tbl_popup_body .tbl_popup_toggle{
  position: relative;
  width: 54px;
  height: 28px;
  display: inline-block;
}

body.tbl_popup_body .tbl_popup_toggle input{
  opacity: 0;
  width: 0;
  height: 0;
}

body.tbl_popup_body .tbl_popup_toggle_switch{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d3d3d3;
  border: 1px solid #666;
  transition: .15s;
  border-radius: 999px;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_toggle_switch:before{
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  top: 2px;
  background-color: #fff;
  border: 1px solid #666;
  transition: .15s;
  border-radius: 50%;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_toggle input:checked + .tbl_popup_toggle_switch{
  background-color: #9bbcff;
}

body.tbl_popup_body .tbl_popup_toggle input:checked + .tbl_popup_toggle_switch:before{
  transform: translateX(26px);
}

body.tbl_popup_body .tbl_popup_picker_vertical{
  width: 96px;
  display: grid;
  grid-template-rows: 32px 32px 22px 32px;
  align-items: stretch;
}

body.tbl_popup_body .tbl_popup_picker_btn{
  width: 100%;
  height: 32px;
  font-size: 18px;
  font-weight: 800;
  background: #e9e9e9;
  border: 1px solid #666;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_picker_value{
  width: 100%;
  height: 32px;
  text-align: center;
  font-weight: 800;
  border: 1px solid #666;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_picker_unit{
  width: 100%;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-weight: 800;
  background: #f3f3f3;
  border-left: 1px solid #666;
  border-right: 1px solid #666;
  box-sizing: border-box;
  cursor: text;
}

body.tbl_popup_body .tbl_popup_picker_horizontal{
  display: flex;
  align-items: stretch;
  height: 32px;
  border: 1px solid #666;
  box-sizing: border-box;
  background: #fff;
  box-shadow: inset 0 -1px 0 #666;
}

body.tbl_popup_body .tbl_popup_picker_horizontal_value{
  width: 86px;
  height: 32px;
  border: 0;
  border-bottom: 1px solid #666;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_picker_horizontal_unit{
  width: 44px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-weight: 800;
  background: #f3f3f3;
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  box-sizing: border-box;
  user-select: none;
  cursor: text;
}

body.tbl_popup_body .tbl_popup_picker_horizontal_arrows{
  display: flex;
  width: 78px;
  height: 32px;
  border-left: 1px solid #666;
  border-bottom: 1px solid #666;
  box-sizing: border-box;
}

body.tbl_popup_body .tbl_popup_picker_horizontal_arrows > button{
  flex: 1;
  border: 0;
  border-bottom: 1px solid #666;
  background: #d3d3d3;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  line-height: 32px;
  padding: 0;
  margin: 0;
}
body.tbl_popup_body .tbl_popup_picker_horizontal_arrows > button:disabled{
  cursor: default;
}

body.tbl_popup_body .tbl_popup_picker_horizontal_arrows > button:first-child{
  border-right: 1px solid #666;
}

body.tbl_popup_body .tbl_popup_picker_horizontal:hover{
  color: red;
}

body.tbl_popup_body .tbl_popup_picker_horizontal:hover .tbl_popup_picker_horizontal_value{
  color: red;
}

body.tbl_popup_body .tbl_popup_picker_horizontal:hover .tbl_popup_picker_horizontal_unit{
  color: red;
}

body.tbl_popup_body .tbl_popup_picker_horizontal:hover .tbl_popup_picker_horizontal_arrows > button{
  color: red;
}

body.tbl_popup_body .tbl_popup_error{
  border-color: red !important;
  box-shadow: inset 0 -1px 0 red !important;
}

body.tbl_popup_body .tbl_popup_error .tbl_popup_picker_horizontal_unit{
  border-left-color: red;
  border-bottom-color: red;
}

body.tbl_popup_body .tbl_popup_error .tbl_popup_picker_horizontal_arrows{
  border-left-color: red;
  border-bottom-color: red;
}

body.tbl_popup_body .tbl_popup_error .tbl_popup_picker_horizontal_value{
  border-bottom-color: red;
}

body.tbl_popup_body .tbl_popup_error .tbl_popup_picker_horizontal_arrows > button{
  border-bottom-color: red;
}

html.tbl_popup_html{
  overflow: auto !important;
  height: auto !important;
}

html.tbl_popup_html body{
  overflow: auto !important;
  height: auto !important;
}

body.tbl_popup_body div.dt-container span.select-info,
body.tbl_popup_body div.dt-container span.select-item{
  display: none !important;
}

body.tbl_popup_body div.dt-container{
  position: relative;
}

body.tbl_popup_body div.dt-container div.dt-layout-row:first-child div.dt-layout-cell.dt-layout-start{
  position: absolute;
  left: 0;
  top: 0;
}

.dt-column-title{
  font-family: system-ui;
}
  #chk_view_tooltip{
    position:absolute;
    display: block;
    left :0px;
    top: 0px;
  }
  #lbl_chk_view_tooltip{
    position:absolute;
    display: block;
    left :30px;
    top: 0px;
  }

  .tooltip-container {
    position: relative;
    display: flex;
    place-content: center;
  }

  /* styling of the tooltip display */
  p#tooltip_text {
    display: none;
    position: absolute;
    /*top: 300px;
    left:300px;*/
    z-index: 5;
    background: #00732c;
    padding: 0px;
    font-size: 1rem;
    color: #fff;
    border-radius: 2px;
    animation: fadeIn 0.6s;
  }

   /* optional styling to add a "wedge" to the tooltip */
  p#tooltip_text:before {
  content: "";
  position: absolute;

  margin-left: 0;
  border: 8px solid transparent;
  border-top: 8px solid #00732c;
  }

@keyframes fadeIn {
from {
 opacity: 0;
}
to {
 opacity: 1;
}
}
#impressum{
position: absolute;
    top: 750px;

    left: 300px;
    width:130px;
}
#tb_tooltips{
position: absolute;
    top: 5px;
    left: 84px;
    width:95px;
}
#tb_details{
position: absolute;
    top: 5px;
    left: 215px;
    width:90px;
}
#tb_print{
position: absolute;
    top: 5px;
    left: 685px;
    width:95px;
}
#tb_excel{
position: absolute;
    top: 5px;
    left: 590px;
    width:95px;
}
#tb_global_settings{
position: absolute;
    top: 5px;
    left: 495px;
    width: 95px;
}
#tb_units{
position: absolute;
    top: 5px;
    left: 400px;
    width: 95px;
}

#chk_view_p_drop{
  top:25px;
}

#btn_print_pdf{
  top:50px;
}

.Visu_Container{
  position : absolute;
  height: 610px;
  width: 550px;
  top: 85px;
  left: -80px;
  display: flex;
  justify-content: center;
  z-index: auto;
  transform: scale(0.6,0.8);
      transform-origin: top center;
 
}

#dot_neutral_point_ID
 {
   position : absolute;
   top: 0px;
   height:20px;
   width: 20px;
   /*background-color:white;*/
   justify-content: center;
   text-align: center;
   font-size: 20px;
   color: red;
   z-index: 5;
 }

.dot_BIT
 {
   position : absolute;
   top: 0px;
   height: 100%;
   width: 80px;
   background-color: #8b2f2f;
   box-shadow:0px 0px 0px 2px black inset;
   z-index: 0;
 }

 .dot_casing
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:70px;
  background-color:transparent;
  border-top:    0px solid ;
  border-right:  4px solid green;
  border-left:   4px solid green;
  border-radius: 0%;
  direction: rtl;
  z-index: 6;
 }

 #dot_collar_od
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:60px;
  background-color:blue;
  z-index: +2;
 }
 #dot_collar_id
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:60px;
  background-color:white;
  border-top:    0px solid ;
  border-right:  2px solid black;
  border-left:   2px solid black;
  z-index: +3;
 }

.dot_neutral_point{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 12px;
  width: 12px;
  background-color: red;
  border-radius: 120%;
  z-index: 80;
  display: none;
}

.dot_bsr_point{
  position: absolute;
  left: 50%;
  top: 0px;
  height: 6px;
  width: 6px;
  background-color: red;
  border-radius: 120%;
  border: 1px solid black;
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  pointer-events: auto;
}

.dot_bsr_point::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255,255,255,0);
  box-shadow: 0 0 0 6px rgba(0,0,0,0.08);
}

 #dot_hw_od
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:40px;
  background-color:yellow;

  z-index: +3;
 }
 #dot_hw_id
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:40px;
  background-color:white;
  border-top:    0px solid white;
  border-right:  2px solid black;
  border-left:   2px solid black;
  z-index: +3;
 }

 #dot_pipe_od
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:40px;
  background-color:white;
  z-index: +3;
 }
 #dot_pipe_id
 {
  position : absolute;
  top: 0px;
  height: 100%;
  width:40px;
  background-color:white;
  border-top:    0px solid ;
  border-right:  2px solid black;
  border-left:   2px solid black;
  z-index: +3;
 }

#dot_lance_id
{
 position : absolute;
 background-color:olive;
 z-index: 7;
}

#dot_dual_wall_od
{
 position : absolute;
 top: 0px;
 height: 100%;
 width:70px;
 background-color:olive;
 direction: rtl;
 z-index: 5;
}

#dot_dual_wall_id_active
{
 display:none;
 position : absolute;
 width:70px;
 background-color:transparent;
 border-right:  3px solid black;
 border-left:   3px solid black;
 border-bottom: 3px dotted black;
 z-index: 8;
}
#dot_dual_wall_id
{
 display:none;
 position : absolute;
 height: 100%;
 width:70px;
 background-color:white;
 border-right: 2px solid black;
 border-left: 2px solid black;
 direction: rtl;
 z-index: 7;
}
#dot_flange_id
{

 position : absolute;
 top: 0px;
 height: 100%;
 width:70px;
 background-color:olive;
 border-right:  3px dotted white;
 border-left:   3px dotted white;
 border-bottom: 3px solid white;
 direction: rtl;
 z-index: 7;
 display:none;

}

#dot_flange_id_id
{
 display:none;
 position : absolute;
 top: 0px;
 height: 100%;
 width:70px;
 background-color:white;
 border-right:  3px solid black;
 border-left:   3px solid black;
 border-bottom: 3px solid white;
 direction: rtl;
 z-index: 5;
}
#lbl_air_inj_depth{
  position: absolute;
  background-color: transparent;
  top: -93px;
  left: 250;
  height: 5px;
  width: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: bolder;
  color: black;
  z-index: 7;
}
#lbl_h0{
  position: absolute;
  background-color: transparent;
  top: -93px;
  left: 250;
  height: 5px;
  width: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: bolder;
  color: blue;
  z-index: 70;
}
#dot_arrow{
position:absolute;
display:block;

width: 0px;
height: 16px;
border-style: solid;
border-width: 0 6px 9px 6px;
border-color: transparent transparent blue transparent;
transform: rotate(0deg);
z-index: 70;
}
#dot_arrow_block{
  position:absolute;
  appearance: auto;
  display:block;

  width: 6px;
  height: 50px;
  background-color: blue;
  z-index: 70;
  }

.wave_fl{
  position: absolute;
  background-color: transparent;
  height: 5px;
  top: -15px;
  left: 150;
  width: 250px;
  text-align: center;
  font-size: 25px;
  font-weight: bolder;
  color: blue;
  z-index: 20;
}
.lbl_fl_depth{
  position: absolute;
  background-color: transparent;
  top: -10px;
  left: 350;
  height: 5px;
  width: 50px;
  text-align: center;
  font-size: 12px;
  font-weight: bolder;
  color: blue;
  z-index: 4;
}
#lbl_upper_pipe_length{
  position: absolute;
  background-color: transparent;
  height: 20px;
  width: 200px;
  text-align: center;
  font-size: 12px;
  font-weight: bolder;
  color: black;
  z-index: 9;
}

#output_fl_ft{
  top: 410px;
  left: 86.666px;
  width:43.333;
}
#output_fl_m{
  top: 435px;
  left: 86.666px;
  width:43.333;
}
#rao_output_loss_total{
  top: 375px;
  left: 0px;
}

#lbl_rao_airlift_mud_flow_total{
  top: 225px;
  left: 0px;
  height:25px;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  display:block;
  text-align: left;
  padding-left: 5;
}
#rao_airlift_mud_flow_total{
  top: 250px;
  left: 0px;
  height:25px;
  font-size: 18px;
  font-weight: bold;
  color:rgb(0, 4, 255);
  display:block;
}

#lbl_rao_airlift_real_flow_total{
  top: 275px;
  left: 0px;
  height:25px;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  display:block;
  text-align: left;
  padding-left: 5;
}
#rao_airlift_real_flow_total{
  top: 300px;
  left: 0px;
  height:25px;
  font-size: 18px;
  font-weight: bold;
  color:rgb(0, 4, 255);
  display:block;

}
#rao_pipe_weight_unit{
  top: 325px; 
}
#rao_pipe_weight_total{
  top: 350px; 
}

/* #########################################################  Style for all Horizontal Sliders */
 .slider_hor{
  appearance: none;
  position: absolute;
  top:75px;
  left: -2;   /* ?????? */
  width: 130px; 
  height: 25px; 
  /*box-sizing: border-box;*/
  display: inline-block;
  background: #d3d3d3; /* Grey background */
  /*outline: none;  Remove outline */
  opacity: 0.6; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  z-index: 2;
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
  
  }
  
  /* Mouse-over effects */
  .slider_hor:hover {
  opacity: 1; /* Fully shown on mouse-over */
  }
  

  .slider_hor::-webkit-slider-thumb {
  -webkit-appearance: none; 
  appearance: none;
  width: 21px;
  height: 21px;
  background: #04AA6D;
  cursor: w-resize;

  }
  
  .slider_hor::-moz-range-thumb {
  width: 21px;
  height: 21px; 
  background: #04AA6D; 
  cursor: w-resize; 
  }
  /* #########################################################  END Style for all Horizontal Sliders */
  /* #########################################################  Style for all Vertical Sliders */



  /* The slider itself */
  .slider_vert 
  {
    --sliderthumbcolor: #232725; 
    appearance: none;
    position: absolute;
    width: 312; 
    height: 130px;
    background: #d3d3d3; /* Grey background */
    box-sizing: border-box;
  
   opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;

    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    z-index: 2;  
    box-shadow: 0px 0px 0px 1px black inset;

  }


  .slider_vert:hover
  {
    opacity: 1;  
  }
  
                        
  .slider_vert::-webkit-slider-thumb 
  {
    -webkit-appearance: none;/*sliderthumb-vertical; /* Override default look */
    appearance: none;
    position: relative;
    width: 25px; /* Set a specific slider handle width */
    height: 126px; /* Slider handle height */

    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */

  }
  
  .slider_vert::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 126px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */
  }
  /* #########################################################  END Style for all Vertical Sliders */

  /* #########################################################  Style for all half Vertical Sliders */



  /* The slider itself */
  .slider_vert_half
  {
    --sliderthumbcolor: #232725; 
    appearance: none;
    position: absolute;
    width: 310; 
    height: 65px;
    background: #d3d3d3;
 
 
    

    opacity: 0.6; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    z-index: 2;  

  }


    .slider_vert_half:hover
  {
    opacity: 1;  
  }
  
                        
  .slider_vert_half::-webkit-slider-thumb 
  {
    -webkit-appearance: none;/*sliderthumb-vertical;  Override default look */
    appearance: none;
    position: relative;
    width: 25px; /* Set a specific slider handle width */
    height: 61px; /* Slider handle height */

    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */

  }
  
  .slider_vert_half::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 61px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */
  }
  /* #########################################################  END Style for all half Vertical Sliders */

  /* #########################################################   Style for all Slider Labels */
  .picker_labels
  {
    appearance: auto;
    position: absolute;
    top: 25px;
    width: 95px; /* Full-width */
    height: 25px; /* Specified height */ 
    background-color: transparent;
    background-repeat: no-repeat;
    font-size: 15px;
    -webkit-text-fill-color: black;
    font-weight: bold;
    text-align: center;
    border:none;
    z-index: 1000; 
    pointer-events: none; 
  }
  .picker_labels[title]:not([title=""]){
    pointer-events: auto;
  }
  .picker_labels[data-tooltip]:not([data-tooltip=""]),
  .picker_labels[data-i18n-tooltip]:not([data-i18n-tooltip=""]){
    pointer-events: auto;
  }

  [title]:not([title=""]){
    cursor: help;
  }

  #btn_cement_calc_mode{
    pointer-events: auto;
    cursor: pointer;
    -webkit-text-fill-color: black;
    color: black;
  }
    /* #########################################################  END Style for all Slider Labels */
 #lbl_weight_unit,
 #lbl_weight_total{
   text-align: left !important;

 }
 #lbl_weight_unit::placeholder,
#lbl_weight_total::placeholder,
#lbl_loss_total::placeholder{
   text-align: left;
  color: black !important;
  -webkit-text-fill-color: black !important;
  opacity: 1;
 }






      /* #########################################################  Style for tgl P.Drop fields only */

  .p_drop{
    appearance: none;
    display: none;
    position: absolute;
    width: 95px;
    height:25px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background: #dc9d00; /* Grey background */ 
    text-align:center; 
    border:none;
    box-shadow: 0px 0px 0px 1px black inset;  
  }
  /* #########################################################  END Style for tgl P.Drop fields only */
  /* #########################################################  Style for Velocity fields only */

  .velocity{
    appearance: none;
    position: absolute;
    width: 130px;
    height:25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background: #dc9d00; /* Grey background */ 
    text-align:center; 
    border:none;
    box-shadow: 0px 0px 0px 1px black inset;  
  }
  /* #########################################################  END Style for Velocity fields only */



    /* #########################################################  Style for all Output only */

  .output{
    appearance: none;
    position: absolute;
    width: 130px;
    height:25px;
    text-align: center;
    color:darkblue;
    font-size: 14px;
    font-weight: bold;
    background: #dc9d00;
    text-align:center; 
    border:none;
    box-shadow: 0px 0px 0px 1px black inset; 
  }
  /* #########################################################  END Style for all Output only */

  #cbo_collar_weight_unit,
  #cbo_collar_weight_total,
  #output_collar_loss_total,
  #cbo_hw_weight_unit,
  #cbo_hw_weight_total,
  #output_hw_loss_total,
  #cbo_pipe_weight_unit,
  #output_pipe_weight_total,
  #output_pipe_loss_total,
  #cbo_casing_weight_unit,
  #cbo_casing_weight_total,
  #output_casing_p_drop_total,
  #rao_pipe_weight_unit,
  #rao_pipe_weight_total,
  #rao_output_loss_total{
    color: black !important;
    -webkit-text-fill-color: black !important;
  }

  /* #########################################################  Style for all input output  */
  .input_output{
    --background:#d3d3d3;

    position: absolute;
    width: 130px;
    height:25px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    background:var(--background);
    text-align:center; 
    border:none;
    box-shadow: 0px 0px 0px 1px black inset;
    cursor: text;
    
   /* background: #d3d3d3;  Grey background */
  }

  input[type="text"],
  input[type="number"],
  input[type="numeric"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  textarea{
    cursor: text;
  }

  select{
    cursor: pointer;
  }

  a,
  [role="link"]{
    cursor: pointer;
  }
  /* #########################################################  END Style for all input output  */

  /* #########################################################  Style for all frames  */

  .frame{
    appearance: none;
    position: absolute;
    width: 130px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
  box-sizing: border-box;

    background: none;
    opacity: 0.3;
    
  }
  /* #########################################################  END Style for all frames  */ 

  /* #########################################################  Style for all Unit Labels  */ 

  .unit_labels{
    appearance: none;
    position: absolute;
    width: 95px;
    height:25px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background: #dc9d00; 
    border:none;
    box-shadow: 0px 0px 0px 1px black inset;  
    
} 
.unit_labels::placeholder {
  color: darkblue;
  
}
  /* #########################################################  END Style for all Unit Labels  */ 

  /* #########################################################   Containr Unit Labels  */ 

  .container_unit_labels{
    appearance: none;
    position: absolute;
    top: 435px; /* Grey background */
    left: 0px;
    width: 130px;
    height: 150px;
    display: flex;
    background:none; /* Grey background */
     /* outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    */
    justify-content: center;
  }
/*
  #lbl_weight_unit{top: 0px ;text-align: left;}
  #lbl_weight_total{top: 25px;text-align: left;}
  #lbl_loss_total{top: 50px;text-align: left;}
  #lbl_loss_tube{top: 75px;text-align: left;}
  #lbl_loss_tube_wall{top: 100px;text-align: left;}
  #lbl_loss_tube_casing{top: 125px;text-align: left;}
 */
  
  /* #########################################################   end Container Unit Labels  */




  /* #########################################################  Container Mixer */

  .container_Mixer{
    position: absolute;
    height: 550px;
    width: 700px;
    top: 60px;;
    left: 400px;; 
    display: flex;
    justify-content: center;
    background-color: #dc9d00;
    z-index: 0;
  
  }
   
  /* #########################################################  Container BIT */
  
  
.container_BIT{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 0px;
  width: 95px;
  height: 400px;
  display: flex;
  background:#dc9d00;
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;  
}

/*
#Link_Bit_Table{
  appearance: none;
  position: absolute;
  top: 0;
  left:0;
  width: 130px; 
  height: 25px;
  font-size: 12px;
  font-weight: bold;
  background: #d3d3d3; 
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
  
}
*/

.sel_bit_od{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3;
  cursor: pointer;  
}
                     
/*
#SEL_WOB{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 15; 
  font-size: 60%;
  font-weight: bold;
  text-align: center;
box-sizing: border-box;
  background: #d3d3d3;


}
*/

#lbl_depth{  
 top: 235px;
}


#depth_picker{
  top: 125px;
}

#coring_core_info{
  position: absolute;
  top: 100px;
  left: 0px;
  width: 130px;
  display: none;
  flex-direction: column;
}
#coring_core_info .unit_labels{
  position: relative;
  top: 0px;
  left: 0px;
  width: 130px;
  text-align: left;
}

#output_coring_core_od,
#output_coring_core_bit_od{
  text-align: center;
  font-size: 16px;
  color: blue;
}


#cbo_slider_depth_ft{
  left: 0px;
  top: 410px;
  display: none;
}

#cbo_slider_depth_m{
  left: 0px;
  top:435px;
  display: none;
}
#lbl_weight_unit{top: 325px ;text-align: left;}
#lbl_weight_total{top: 350px;text-align: left;}
#lbl_loss_total{top: 375px;text-align: left;}
#lbl_loss_tube{top: 400px;text-align: left;}
#lbl_loss_tube_wall{top: 425px;text-align: left;}
#lbl_loss_tube_casing{top: 450px;text-align: left;}
#lbl_v_tube{top: 475px;text-align: left;}
#lbl_v_tube_wall{top: 500px;text-align: left;}
#lbl_v_tube_casing{top: 525px;text-align: left;}

.container_BIT .picker_labels {
  top: 213px;
}

.container_COLLAR .picker_labels {
  top: 75px;
}

.container_HEAVYWEIGHTS .picker_labels {
  top: 75px;
}

.container_pipes .picker_labels {
  top: 75px;
}

.container_casing .picker_labels {
  display: none;
}

.container_COLLAR .picker_labels,
.container_HEAVYWEIGHTS .picker_labels,
.container_pipes .picker_labels{
  display: none;
}

.container_COLLAR,
.container_HEAVYWEIGHTS,
.container_pipes,
.container_casing{
  width: 95px;
}

.container_COLLAR > div,
.container_HEAVYWEIGHTS > div,
.container_pipes > div,
.container_casing > div{
  width: 95px;
}

.container_COLLAR input,
.container_COLLAR select,
.container_COLLAR button,
.container_HEAVYWEIGHTS input,
.container_HEAVYWEIGHTS select,
.container_HEAVYWEIGHTS button,
.container_pipes input,
.container_pipes select,
.container_pipes button,
.container_casing input,
.container_casing select,
.container_casing button{
  width: 95px;
  box-sizing: border-box;
}
 
 /* #########################################################  END Container BIT */




/* #########################################################  Container Collar  */
.container_COLLAR{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 95px;
  width: 95px;
  height: 400px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
/*
#Link_COLLAR_Table{
  appearance: none;
  position: absolute;
  top: 0;
  left:0;
  width: 130px; 
  height: 25px;
  font-size: 12px;
  font-weight: bold;
  background: #d3d3d3;
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
}
*/

.sel_collar{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3; 
  cursor: pointer;
  display: none;
}

.sel_collar_button{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px;
  height: 25px;
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3;
  cursor: pointer;
  border: none;
  box-shadow: 0px 0px 0px 1px black inset;
}

.listbox_button{
  appearance: none;
  border: none;
  box-shadow: 0px 0px 0px 1px black inset;
  background: #d3d3d3;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
}

.listbox_select{
  display: none;
}

.listbox_select.is_listbox{
  display: block;
  height: 275px;
  width: 190px;
  min-width: 190px;
  font-size: 16px;
  padding: 2px;
  z-index: 99999;
}

#SEL_BIT_OD.listbox_select.is_listbox{
  font-family: Arial, sans-serif;
  font-weight: 600;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

#SEL_COLLAR.listbox_select.is_listbox,
#SEL_pipe.listbox_select.is_listbox,
#SEL_casing.listbox_select.is_listbox,
#SEL_hw.listbox_select.is_listbox,
#SEL_HW.listbox_select.is_listbox{
  font-family: Arial, sans-serif;
  font-weight: 600;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

#SEL_pipe.listbox_select,
#SEL_casing.listbox_select,
#SEL_hw.listbox_select,
#SEL_HW.listbox_select{
  display: none;
}

#SEL_pipe.listbox_select.is_listbox,
#SEL_casing.listbox_select.is_listbox,
#SEL_hw.listbox_select.is_listbox,
#SEL_HW.listbox_select.is_listbox{
  display: block;
  height: 275px;
  width: 190px;
  min-width: 190px;
  font-size: 16px;
  padding: 2px;
  z-index: 99999;
}

.sel_collar.is_listbox{
  display: block;
  height: 275px;
  width: 190px;
  min-width: 190px;
  font-size: 16px;
  padding: 2px;
  z-index: 99999;
}

.sel_collars .dropbtn_collars.is_listbox_open{
  background-color: red;
}

.sel_bit_ods .dropbtn_bits.is_listbox_open{
  background-color: red;
}

.dropdown_heavys .dropbtn_heavys.is_listbox_open{
  background-color: red;
}

.dropdown_pipe .dropbtn_pipe.is_listbox_open{
  background-color: red;
}

.dropdown_casing .dropbtn_casing.is_listbox_open{
  background-color: red;
}



  
  #lbl_collar_length{ 
    top: 235px;
    }
    




  #cbo_collar_length_ft{
    left: 0px;
    top: 410px;
    display: none;
  }

  #cbo_collar_length_m{
    left: 0px;
    top:435px;
    display: none;
  }

  #cbo_collar_weight_unit{
    left: 0px;
    top: 325px;
 }
  
  #cbo_collar_weight_total{
      left: 0px;
      top:350px;
  }

#output_collar_loss_total{
  top: 375px;
  left: 0px;
}

#output_collar_loss_tube{
  top: 400px;
  left: 0px;
}
#output_collar_loss_wall{
  top: 425px;
  left: 0px;

}
#output_collar_loss_casing{
  top: 450px;
  left: 0px;
}

#output_collar_v_tube{
  top: 475px;
  left: 0px;
}
#output_collar_v_wall{
  top: 500px;
  left: 0px;

}
#output_collar_v_casing{
  top: 525px;
  left: 0px;

}

#output_collar_v_casing[data-rc-airlift-muted="1"],
#cbo_hw_v_casing[data-rc-airlift-muted="1"],
#cbo_pipe_v_casing[data-rc-airlift-muted="1"]{
  background: #dc9d00 !important;
  color: gray !important;
  -webkit-text-fill-color: gray !important;
}



/* ####################################  END Container Collar       */



/* ####################################  Container Heavy Weights       */
.container_HEAVYWEIGHTS{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 190px;
  width: 95px;
  height: 400px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
/*
#Link_HW_Table{
  appearance: none;
  position: absolute;
  top: 0;
  left:0;
  width: 130px; 
  height: 25px;
  font-size: 12px;
  font-weight: bold;
  background: #d3d3d3;
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
}
*/
#SEL_HW{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3; 
  cursor: pointer;
}

#SEL_hw{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3; 
  cursor: pointer;
}


  #lbl_hw_length{ 
    top: 235px;
    }
    

  


  #cbo_hw_length_ft{
    left: 0px;
    top: 410px;
    display: none;
  }

  #cbo_hw_length_m{
    left: 0px;
    top:435px;
    display: none;
  }

  #cbo_hw_weight_unit{
      left: 0px;
      top:325px;
  }
  #cbo_hw_weight_total{
    top: 350px;
    left: 0px;
  }

  #output_hw_loss_total{
    top: 375px;
    left: 0px;
  
  }
  
#output_hw_loss_tube{
  top: 400px;
  left: 0px;
}

#cbo_hw_loss_wall{
  left: 0px;
  top: 425px;
}

#cbo_hw_loss_casing{
  top: 450px;
  left: 0px;
}

#cbo_hw_v_tube{
  top: 475px;
  left: 0px;
}

#cbo_hw_v_wall{
  left: 0px;
  top: 500px;
}

#cbo_hw_v_casing{
  top: 525px;
  left: 0px;
}

/* ####################################  END Container Heavy Weights       */

/* ####################################  Container PIPES       */
.container_pipes{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 285px;
  width: 95px;
  height: 400px;
  display:flex;
  background:none;
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 

  justify-content: center;


}
/*
#Link_pipe_Table{
  appearance: none;
  position: absolute;
  top: 0;
  left:0;
  width: 130px;
  height: 25px;
  font-size: 12px;
  font-weight: bold;
  background: #d3d3d3;
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
}
*/
#SEL_pipe{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  z-index: 1;
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3;
  cursor: pointer; 
}

#SEL_pipe:disabled{
  color: black;
  background: #d3d3d3;
  opacity: 1;
  -webkit-text-fill-color: black;
}

.container_pipes .picker_labels {
  top: 75px;
}


  #frame_pipe{
    left: 0px;
    top: 50px;
    width: 130px;
    height:310px;
    background:rgb(223, 214, 224);

  }
  
  #lbl_pipe_length{ 
    top: 235px;
    }
    

  #cbo_pipe_length_ft{
    left: 0px;
    top: 410px;
    display: none;
  }

  #output_pipe_length_m{
    left: 0px;
    top: 125px;
    height: 100px;
  }

  #output_pipe_length_m .picker_vertical_value{
    height: 25px;
  }
  #output_pipe_length_m .picker_vertical_unit{
    height: 75px;
    line-height: 25px;
  }

  #output_pipe_length_m,
  #output_pipe_length_m:hover{
    cursor: default;
    color: #000;
  }
  #output_pipe_length_m:hover .picker_vertical_value{
    color: white;
  }
  #output_pipe_length_m:hover .picker_vertical_unit{
    color: #000;
  }


  #cbo_pipe_weight_unit{
    left: 0px;
    top: 325px;
 }
  
  #output_pipe_weight_total{
      left: 0px;
      top:350px;
  }


#output_pipe_loss_total{
  top: 375px;
  left: 0px;
}

#output_pipe_loss_tube{
  top: 400px;
  left: 0px;
}
#cbo_pipe_loss_wall{
  top: 425px;
  left: 0px;

}
#cbo_pipe_loss_casing{
  top: 450px;
  left: 0px;
}

#cbo_pipe_v_tube{
  top: 475px;
  left: 0px;
}
#cbo_pipe_v_wall{
  top: 500px;
  left: 0px;

}
#cbo_pipe_v_casing{
  top: 525px;
  left: 0px;
}
/* ####################################  END Container pipes       */

/* ####################################  Container casing      */
.container_casing{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 380px;
  width: 95px;
  height: 400px;
  display:flex;
  background:#dc9d00; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
/*
#Link_casing_Table{
  appearance: none;
  position: absolute;
  top: 0;
  left:0;
  width: 130px; 
  height: 25px;
  font-size: 12px;
  font-weight: bold;
  background: #d3d3d3;
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;
}
*/
#SEL_casing{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 25; 
  font-size: 75%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  background: #d3d3d3; 
  z-index: 3000;
  cursor: pointer;
}

#SEL_coring{
  appearance: none;
  position: absolute;
  top: 50px;
  left: 0px;
  width: 130px; 
  height: 175; 
  font-size: 100%;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  border-color: black;
  background: #d3d3d3; 
  z-index: 3000;
  cursor: pointer;
}

[id$="_picker_unit"]{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 13px;
}



.picker_horizontal{
  position: absolute;
  top: 25px;
  left: 0px;
  width: 95px;
  height: 75px;
  font-family: Arial, Helvetica, sans-serif;
  background: #d3d3d3;
  border: 2px solid #000;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 6000;
  cursor: pointer;
}
.picker_horizontal_with_unit{
  height: 100px;

}
.picker_horizontal_unit{
  width: 100%;
  height: 25px;
  background: lightgrey;
  border: 0;
  border-bottom: 1px solid #000;
  box-shadow: none;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 25px;
  color: #000;
  user-select: none;
  display: none;
  box-sizing: border-box;
  cursor: pointer;
}
.picker_horizontal_with_unit .picker_horizontal_unit{
  display: block;
}
.picker_horizontal:hover{
  color: red;
}
.picker_horizontal:hover button{
  color: red;
}
.picker_horizontal:hover .picker_horizontal_unit{
  color: red;
}
.picker_horizontal .listbox_button{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #000;
  box-shadow: none;
  background: transparent;

    border-bottom: 0;
}
.range_picker{
  --sel-color: brown;
}
.range_picker--bit{ --sel-color: brown; }
.range_picker--collar{ --sel-color: blue; }
.range_picker--hw{ --sel-color: yellow; }
.range_picker--pipe{ --sel-color: white; }
.range_picker--casing{ --sel-color: green; }
.range_picker .listbox_button{
  color: var(--sel-color);
  -webkit-text-fill-color: var(--sel-color);
}
.range_picker:hover .listbox_button{
  color: red;
  -webkit-text-fill-color: red;
}
/*.picker_horizontal.picker_horizontal_with_unit .listbox_button{
  border-bottom: 0;
}
*/
.picker_horizontal_arrows{
  display: flex;
  width: 100%;
  height: 50px;
  margin-top: auto;
  box-sizing: border-box;
  cursor: pointer;
}
.picker_horizontal_arrows > button{
  flex: 1;
  width: auto;
  height: 50px;
  border: 0;
  background: #d3d3d3;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 50px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.picker_horizontal_arrows > button:disabled{
  cursor: default;
}
.picker_horizontal_arrows > button:first-child{
  border-right: 1px solid #000;
}


  
  #lbl_casing_length{ 
    top: 235px;
    }
    
  



  #collar_length_picker, #hw_length_picker,#casing_length_picker{
    top: 125px;
  }

  #cbo_casing_length_ft{
    left: 0px;
    top: 410px;
    display: none;
  }

  #output_casing_length_m{
    left: 0px;
    top: 435px;
    display: none;
  }

  #cbo_casing_weight_unit{
    top: 325px;
    left: 0px;

 }
  
  #cbo_casing_weight_total{
      left: 0px;
      top: 350px;
  }



#output_casing_p_drop_total{
  top: 375px;
  left: 0px;
}

#lbl_api_grade{
  top: 400px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
#output_api_grade{
  top: 425px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

#lbl_p_collapse{
  top: 450px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
#output_p_collapse{
  top: 475px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

#lbl_pc_collapse{
  top: 500px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}
#output_pc_collapse{
  top: 525px;
  left: 0px;
  width: 95px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

#lbl_total_p_drop{
  top: 275px;
  left: -285px;
  width: 190px;
  height: 50px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding: 0 7px;
  box-sizing: border-box;
}
#output_total_p_drop{
  top: 275px;
  left: -95px;
  width: 190px;
  height:50px;
  font-size: 18px;
  font-weight: bold;
  color:rgb(0, 4, 255);
}
#lbl_total_string_weight{
  top: 225px;
  left: -285px;
  width: 190px;
  height: 50px;
  line-height: 50px;
}
#cbo_total_string_weight{
  top: 225px;
  left: -95px;
  width: 190px;
  height:50px;
  font-size: 18px;
  font-weight: bold;
  color:rgb(0, 4, 255);

}



/* ####################################  END Container casing      */




  #dc_dth_perf_block{
    position: absolute;
    top: 100px;
    left: 0px;
    width: 130px;
  }

  #tgl_auto_dc_dth{
    position: relative;
    top: 0px;
    height: 50px;
    left: 0px;
    width: 130px;
  }

  #lbl_perf_dc_dth{
    position: relative;
    top: 0px;
    left: 0px;
    width: 130px;
    height: 50px;
    padding-bottom: 30;

  }
  #lbl_perf_dc_dth::placeholder{
    color: buttontext;

    
  }
  
  #dc_dth_perf_choices{
    position: relative;
    top: -30px;
    left: 0px;
    width: 130px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
  }

  #lbl_perf_dc_dth_low{
    position: static;
    grid-column: 1;
    grid-row: 1;
    font-size: 10px;
  }

  #perf_dc_dth_low{
    position: static;
    grid-column: 1;
    grid-row: 2;
  }
  #lbl_perf_dc_dth_medium{
    position: static;
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;

  }
  #perf_dc_dth_medium{
    position: static;
    grid-column: 2;
    grid-row: 2;
  }
  #lbl_perf_dc_dth_high{
    position: static;
    grid-column: 3;
    grid-row: 1;
    font-size: 10px;
  }
  #perf_dc_dth_high{
    position: static;
    grid-column: 3;
    grid-row: 2;
  }
  #p_drop_dc_dth{
    position: absolute;
    top: 275px;
    left: 0px;
    color: blue;
    font-size: 18px;
  }
  #bit_dc_dth_min{
    position: absolute;
    top: 375px;
    width:130px;
    left: 0px;
  }
  #bit_dc_dth_max{
    position: absolute;
    top: 400px;
    width:130px;
    left: 0px;
  }
  #p_dc_dth_min{
    position: absolute;
    top: 425px;
    width: 130px;
    left: 0px;
  }
  #p_dc_dth_max{
    position: absolute;
    top: 450px;
    width: 130px;
    left: 0px;
  }
  #q_dc_dth_min{
    position: absolute;
    top: 475px;
    width:130px;
    left: 0px;
  }

  #q_dc_dth_max{
    position: absolute;
    top: 500px;
    width:130px;
    left: 0px;
    height: 25;

  }

  #lbl_recomm_choke{
    position: absolute;
    top: 200px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }
  #lbl_recomm_choke::placeholder{
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1;
  }

  #output_recomm_choke{
    position: absolute;
    top: 225px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
  }

  #lbl_dp_v_hammer{
    position: absolute;
    top: 250px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }
  #lbl_dp_v_hammer::placeholder{
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1;
  }

  #lbl_dp_v_hammer_annulus{
    position: absolute;
    top: 300px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }
  #lbl_dp_v_hammer_annulus::placeholder{
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1;
  }

  #output_dp_v_hammer_annulus{
    position: absolute;
    top: 325px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
    font-size: 18px;
    color: blue !important;
    -webkit-text-fill-color: blue !important;
  }

  #lbl_hammer_specs{
    position: absolute;
    top: 350px;
    left: 0px;
    width: 130px;
    height: 25px;
    background: transparent;
    color: black !important;
    -webkit-text-fill-color: black !important;
  }
  #lbl_hammer_specs::placeholder{
    color: black !important;
    -webkit-text-fill-color: black !important;
    opacity: 1;
  }




    /* ####################################  Dropdown dc_dth  */



    select.Dropdown_dc_dth{
      display: inline-block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 130px; 
      height: 25; 
      font-size: 80%;
      font-weight: bold;
      text-align: center;
      box-sizing: border-box;
      background: #d3d3d3;  
    }

   /* ####################################  Dropdown dc_dth   */




  #dc_dth_jpeg{
    position: absolute;
    top: 50px;
    left: 40px;
  }

/*  #lbl_sel_hammer
  { 
    position: absolute;
    display: inline-block;
    left: 0px;
    width:130px;
    height:25px;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    text-align: left;
    padding-left: 0px;
    vertical-align: middle;
    box-shadow: 0px 0px 0px 1px black inset;
    background-color: #d3d3d3;
  }
#dth_air_cons
{
  top:50px;
  position: absolute;
  display: inline-block;
  left: 0px;
  width:130px;
  height:25px;
  font-family:Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
  text-align: left;
  padding-left: 0px;
  vertical-align: middle;
  box-shadow: 0px 0px 0px 1px black inset;
  background-color: #d3d3d3;
}
*/
.specs{
  appearance: none;
  position: absolute;
  width: 130px;
  height:25px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  background: #dc9d00; /* Grey background */ 
  text-align:center; 
  border:none;
  box-shadow: 0px 0px 0px 1px black inset;  
}

/* ####################################  Container Methods      */
.container_methods{
  appearance: none;
  position: absolute;
  top: 0px; 
  left: 475px;
  width: 130px;
  height: 325px;
  background:#dc9d00; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
.slider_specs_vert{
    appearance: none;
    position: absolute;
/*     top: 235px;
    width: 430;
    height:15px;
    left: -96;
    --sliderthumbcolor: rgba(0, 0, 255, 0.566); */
    background: #d3d3d3;
    box-sizing: border-box;
    opacity: 0.5;
    -webkit-transition: .2s;
    transition: opacity .2s;
    transform: rotate(90deg);
    display: flex;
    justify-content: center;
    z-index: 1;
  }
  .slider_specs_vert:hover
  {
    opacity: 2;  
  }
  .slider_specs_vert::-webkit-slider-thumb 
  {
    -webkit-appearance: none;/*sliderthumb-vertical; /* Override default look */
    appearance: none; 
    width: 23px; /* Set a specific slider handle width */
    height: 23px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */
  }
  .slider_specs_vert::-moz-range-thumb {
    width: 23px; /* Set a specific slider handle width */
    height: 23px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    top:-55px;
    cursor: s-resize; /* Cursor on hover */
  }
  .slider_specs_hor{
    appearance: none;
    position: absolute;
/*     top: 235px;
    width: 430;
    height:15px;
    left: -96;
    --sliderthumbcolor: rgba(0, 0, 255, 0.566); */
    background: #d3d3d3;
    box-sizing: border-box;
    opacity: 0.5;
    -webkit-transition: .2s;
    transition: opacity .2s;
    /* transform: rotate(90deg);*/
    display: flex;
    justify-content: center;
    z-index: 1;
  }
  .slider_specs_hor:hover
  {
    opacity: 2;  
  }
  .slider_specs_hor::-webkit-slider-thumb 
  {
    -webkit-appearance: none;/*sliderthumb-vertical; /* Override default look */
    appearance: none; 
    width: 23px; /* Set a specific slider handle width */
    height: 23px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    cursor: s-resize; /* Cursor on hover */
  }
  .slider_specs_hor::-moz-range-thumb {
    width: 23px; /* Set a specific slider handle width */
    height: 23px; /* Slider handle height */
    background:var(--sliderthumbcolor);
    top:-55px;
    cursor: s-resize; /* Cursor on hover */
  }

.container_methods_specs_0{
  appearance: none;
  position: absolute;
  top: 200px; 
  left:0px;
  width: 130px;
  height: 285px;
  display:block;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
.container_methods_specs_1{
  appearance: none;
  position: absolute;
  top: 25px; 
  left:0px;
  width: 130px;
  height: 375px;
  display:block;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}


.container_methods_specs_2{
  position: absolute;
  appearance: none;
  top: 50px;
  display:block;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  justify-content: center;
}
  .container_methods_specs_3{
    position: absolute;
    appearance: none;
    top: 25px;
    display:block;
    background:none; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }
  .container_methods_specs_4{
    appearance: none;
    position: absolute;
    top: 0px; 
    left:0px;
    width: 130px;
    height: 460px;
    display:block;
    background:none; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }
  .container_methods_specs_5{
    appearance: none;
    position: absolute;
    top: 200px; 
    left:0px;
    width: 130px;
    height: 285px;
    display:block;
    background:none; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }


/*   .container_methods_specs_6{
    position: absolute;
    appearance: none;
    top: 25px;
    width: 130;
    height: 460px;
    display:flex;
    background:none; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }
 */


  #dot_casing_specs_id
  {
   position : absolute;
   top: 25px;
   height: 431px;
   width:90px;
   background-color:blue;
   border-top:    0px solid ;
   border-right:  4px solid brown;
   border-left:   4px solid brown;
   border-bottom: 4px solid brown;
   border-radius: 0%;
   direction: rtl;
   z-index: 1;
  }


  #dot_pipe_specs_id
  {
   position : absolute;
   top: 25px;
   height: 420px;
   width:60px;
   background-color:white;
   border-top:    0px solid ;
   border-right:  4px solid white;
   border-left:   4px solid white;
   border-radius: 0%;
   direction: rtl;
   z-index: 6;
  }
 /*###################################################### */





  
  .container_methods_specs_7{
    appearance: none;
    position: absolute;
    top: 200px; 
    left:0px;
    width: 130px;
    height: 285px;
    display:block;
    background:none; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }





/* ####################################  END Container Methods      */

/* ####################################  Container Medium (Parent) */
  .container_medium {
    appearance: none;
    position: absolute;
    top: 0px; 
    left: 605px;
    width: 95px;
    height: 400px;
    display:flex;
    background:#dc9d00; 
    outline-style: solid;
    outline-color: rgb(14, 15, 14); 
    outline-width: 1px;
    justify-content: center;
  }

/* ####################################  Container Medium Mud     */
  .container_medium_mud{
    appearance: none;
    position: absolute;
    top: 25px; 
    left: 0px;
    width: 95px;
    height: 485px;
    display:flex;
    background:none; 
    /* outline handled by parent */
    justify-content: center;
  }

    #lbl_flowrate_unit_us{
      top: 175px; 
      width: 65px; 
      left:0px;
      -webkit-text-fill-color:red;
      font-weight: bold;
      text-align: center;
      background-color: white;
      border-left: 1px solid black;
      display: none;
    }
    #lbl_flowrate_unit_metric{
      top: 175px; 
      width: 95px; 
      left:0px;
      -webkit-text-fill-color:red;
      font-weight: bold;
      text-align: center;
      background-color: white; 
    }
    #cbo_pump_rate_gpm{
      left: 0px;
      top: 200px;
      width: 65px;
      background-color: #d3d3d3; 
      display: none;

    }

    #cbo_pump_rate_l_min{
      left: 0px;
      top:200px;
      width: 95px;
      background-color: #d3d3d3; 
    }

    #pump_rate_picker{
      top: 25px;
      display: flex;
      flex-direction: column;
    }
    #pump_rate_picker .pump_rate_picker_row{
      display: flex;
      width: 100%;
      height: 25px;
      border-bottom: 1px solid #000;
      box-sizing: border-box;
    }
    #pump_rate_picker .pump_rate_picker_value{
      flex: 1;
      width: 95px;
      height: 25px;
      border: 0;
      background: transparent;
      box-shadow: none;
      color: black;
      text-align: center;
      font-weight: bold;
      font-size: 18px;
      padding-left: 2;
      margin: 0;
      appearance: textfield;
      -moz-appearance: textfield;
      outline: none;
      box-sizing: border-box;
    }
    #pump_rate_picker .pump_rate_picker_unit{
      flex: 0 0 40px;
      width: 40px;
      height: 25px;
      border: 0;
      border-left: 1px solid #000;
      background: transparent;
      box-shadow: none;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      line-height: 25px;
      color: #000;
      user-select: none;
      box-sizing: border-box;
    }
    #pump_rate_picker .pump_rate_picker_unit{
      display: none;
    }
    #pump_rate_picker:hover .pump_rate_picker_value,
    #pump_rate_picker:hover .pump_rate_picker_unit{
      color: red;
    }


    #lbl_mud_weight_lb{
      left: 0px;
      top: 435px;
      
  }
    
    #lbl_mud_weight_kg{
        left: 0px;
        top:460px;
    }


  #lbl_mud_visc_us{
    top: 485px;
    left: 0px;
  }

  #lbl_mud_visc_metric{
    top: 510px;
    left: 0px;
  }




/* ####################################  END Container Medium Mud      */

/* ####################################  Container Medium Air     */
.container_medium_air{
    appearance: none;
    position: absolute;
    top: 25px; 
    left: 0px;
    width: 95px;
  height: 300px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;
}


#lbl_flowrate_air_unit_us{
  position: absolute;
  top: 190px; 
  width: 65px; 
  left:0px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  border-left: 1px solid black;
  border-bottom: none;
  display: none;
}
#lbl_flowrate_air_unit_metric{
  position: absolute;
  top: 190px; 
  width: 65px; 
  left:65px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  border-right: 1px solid black;
  border-bottom: none;
  display: none;

}
#cbo_comp_rate_cfm{
  position: absolute;
  left: 0px;
  top: 215px;
  width: 65px;
  background-color: #d3d3d3; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  display: none;
}
#cbo_comp_rate_m3_min{
  position: absolute;
  left: 65px;
  top:215px;
  width: 65px;
  background-color: #d3d3d3; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  display: none;
}

#comp_rate_picker{
  top: 0px;
}
    

#lbl_comp_pressure{
  top: 100; 
  width: 95px; 
  left:0px;
}
#lbl_pressure_air_unit_us{
  position: absolute;
  top: 435px; 
  width: 65px; 
  left:0px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  border-left: 1px solid black;
  display: none;


}
#lbl_pressure_air_unit_metric{
  position: absolute;
  top: 435; 
  width: 65px; 
  left:65px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px;
  border-right: 1px solid black;
  display: none;
}
#cbo_comp_pressure_psi{
  left: 0px;
  top: 460px;
  width: 65px;
  background-color: #d3d3d3; 
  display: none;
}
#cbo_comp_pressure_bar{
  left: 65px;
  top:460px;
  width: 65px;
  background-color: #d3d3d3; 
  display: none;
}

#output_comp_pressure_display{
  position: absolute;
  left: 0px;
  top: 125px;
  width: 95px;
  background-color:transparent;
  box-sizing: border-box;
  border: 1px solid black;
  box-shadow: none;
  font-size: 16px;
  color:blue;
}

#lbl_foam_top_air{
  position: absolute;
  left: 0px;
  top: 150px;
  width: 95px;
  height: 25px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: black;
  background-color: transparent;
  z-index: 4;
  line-height: 25px;
  border: 1px solid black;
  box-sizing: border-box;
}

#foam_rate_picker_air{
  top: 175px;
}


/* ####################################  END Container Medium Air     */


/* ####################################  Container Medium Air RC Airlift    */

.container_medium_rc_airlift{
  appearance: none;
  position: absolute;
  top: 25px; 
  left: 0px;
  width: 95px;
  height: 510px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;
}




#comp_rate1_picker{
  top: 0px;
}

#lbl_flowrate_air_unit_us1{
  position: absolute;
  top: 98px; 
  width: 65px; 
  left:0px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid black;
  display: none;
}
#lbl_flowrate_air_unit_metric1{
  position: absolute;
  top: 98px; 
  width: 65px; 
  left:65px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid black;
  display: none;

}
#cbo_comp_rate_cfm1{
  position: absolute;
  left: 0px;
  top: 123px;
  width: 65px;
  background-color: #d3d3d3; 
  box-sizing: border-box;
  border: 1px solid black;
  box-shadow: none;
  display: none;
}
#output_comp_rate_m3_min1{
  position: absolute;
  left: 65px;
  top:123px;
  width: 65px;
  background-color: #d3d3d3; 
  box-sizing: border-box;
  border: 1px solid black;
  box-shadow: none;
  display: none;
}
    
#lbl_comp_pressure1{
    top: 100;
    width: 95px;
    height: 25px;
  left:-0px;
}
#lbl_pressure_air_unit_us1{
  position: absolute;
  top: 245px; 
  width: 65px; 
  left:0px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid black;
  display: none;
}
#lbl_pressure_air_unit_metric1{
  position: absolute;
  top: 245; 
  width: 65px; 
  left:65px;
  -webkit-text-fill-color:red;
  font-weight: bold;
  text-align: center;
  background-color: white;
  box-sizing: border-box;
  border: 1px solid black;
  display: none;
}
#output_comp_pressure1{
  left: 0px;
  top: 125px;
  width: 95px;
  background-color: transparent;
  box-sizing: border-box;
  border: 1px solid black;
  box-shadow: none;
  font-size: 16px;
}

    /* #################################### container_mud_dens    */
.container_mud_weight1{
  appearance: none;
  position: absolute;
  top: 125px; 
  left:0px;
  width: 95px;
  height: 75px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;
}

#mud_weight_picker1{
  height: 75px;
}

#mud_weight_picker1 .picker_vertical_arrows{
  border-top: 1px solid #000;
}

.dot_cement_dens1{
  position : absolute;
  left:10px;
  top:83px;
  height: 5px;
  width: 5px;
  background-color: red;
  /*box-shadow:0px 0px 0px 2px black inset;*/
  z-index: +4; 
  border-radius: 100%;

}
#lbl_dot_cement_dens1{
  position : absolute;
  left:25px;
  top:70px;
  font-size: 10px;
  font-weight: bold;
  color: black;
  z-index: +4;
}

.dot_water_dens1{
  position : absolute;
  left:10px;
  top:48px;
  height: 5px;
  width: 5px;
  background-color: red;
  /*box-shadow:0px 0px 0px 2px black inset;*/
  z-index: +4; 
  border-radius: 100%;

}
#lbl_dot_water_dens1{
  position : absolute;
  left:25px;
  top:35px;
  font-size: 10px;
  font-weight: bold;
  z-index: +4;
}

.dot_cement_dens1,
#lbl_dot_cement_dens1,
.dot_water_dens1,
#lbl_dot_water_dens1{
  pointer-events: none;
}


  #lbl_mud_weight1{ 
    top: -25px;
    width: 68px;
    padding: 0.5;
    left: 0px;
    padding-left: 18px;
    }
    
  #cbo_mud_weight_ppg1{
    left: 0px;
    top: 140px;
    width: 65px;
    box-sizing: border-box;
    border: 1px solid black;
    box-shadow: none;
    display: none;
  }


.container_mud_visc1{
  appearance: none;
  position: absolute;
  top: 200px; 
  left:0px;
  width: 95px;
  height: 75px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;
}


  #lbl_mud_visc1{ 
    top: 0px;
    width: 65px;
    padding-left: 8px;
    left: 0px;
    }
  
  .dot_water_visc1{
    position : absolute;
    height: 5px;
    width: 5px;
    background-color: red;
    /*box-shadow:0px 0px 0px 2px black inset;*/
    z-index: +4; 
    border-radius: 100%;
    left:10px;
    top:16px;
  }
  #lbl_dot_water_visc1{
    position : absolute;
    left:25px;
    top:3px;
    font-size: 10px;
    font-weight: bold;
    z-index: +4;
  }

.dot_water_visc1,
#lbl_dot_water_visc1{
  pointer-events: none;
}

#cbo_mud_visc_cp1{
  left: 0px;
  top: 140px;
  width: 65px;
  Height:25;
  box-sizing: border-box;
  border: 1px solid black;
  box-shadow: none;
  display: none;
}

#mud_visc_picker1{
  top: 25px;
  height: 75px;
}

#mud_visc_picker1 .picker_vertical_arrows{
  border-top: 1px solid #000;
}

/* ####################################  END Container Medium Air RC Airlift     */



/* ####################################  Container hp     */
.container_hp{
display: flex;
  appearance: none;
  position: absolute;
  top: 325px;
  left: 0px;
  width: 95px;
  height: 175px;
  display: none;
  background: none;
  outline-style: solid;
  outline-color: rgb(14, 15, 14);
  outline-width: 1px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
}
.container_hp input{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.container_hp div{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.container_hp #lbl_power_top{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 95px;
  height: 25px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: black;
  background-color: transparent;
  z-index: 10;
  line-height: 25px;
}
.energy{
  height:25px;
  text-align: center;
  border: none;
  box-shadow: 0px 0px 0px 1px black inset;
}
#lbl_hp_us{
  position: absolute;
  top: 25px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00; 

  font-size: 14px; 
  font-weight: bold;


}
#lbl_hp_metric{
  position: absolute;
  top: 25px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00; 

  font-size: 14px;
  font-weight: bold;


}


#output_diesel_gal_h{
  position: absolute;
  top: 50px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00; 

  font-size: 14px;
  text-align: center;


}
#output_diesel_l_h{
  position: absolute;
  top: 50px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;

  font-size: 14px;

}

#lbl_diesel_dollar_unit{
  position: absolute;
  top: 75px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;

  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
  text-align: center;
}
#lbl_diesel_euro_unit{
  position: absolute;
  top: 75px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
  text-align: center;

}
#input_diesel_dollar_gal{
  position: absolute;
  top: 100px;
  left: 0px;
  width: 95px;
  background-color: #d3d3d3;

}



#input_diesel_euro_liter{
  position: absolute;
  top: 100px;
  left: 0px;
  width: 95px;
  background-color: #d3d3d3;

}
#lbl_diesel_cost_dollar_hour{
  position: absolute;
  top: 125px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;
  line-height: 25px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;

}
#lbl_diesel_cost_euro_hour{
  position: absolute;
  top: 125px;
  left: 0px;
  width: 95px;
  background-color: #dc9d00;
  line-height: 25px;
  font-size: 14px;
  font-weight: bold;
  text-align: center;


}
#output_diesel_cost_dollar_hour{
  position: absolute;
  top: 150px;
  left: 0px;
  width: 95px;
  background-color:#dc9d00;
  font-size: 14px;
  font-weight: bold;

}

#output_diesel_cost_euro_hour{
  position: absolute;
  top: 150px;
  left: 0px;
  width: 95px;
  background-color:#dc9d00;
  font-size: 14px;
  font-weight: bold;

}

/* ####################################  Container Mud weight    */
.container_mud_rheo{
  appearance: none;
  position: absolute;
  top: 125px; 
  left: 0px;
  width: 95px;
  height: 175px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
}
.mud_rheo_weight{
  position: absolute;
  top: 0px;
  width: 95px;
  height: 100px;
  display: flex;
  justify-content: center;
  background: none;
}
.mud_rheo_visc{
  position: absolute;
  top:100px;
  width: 95px;
  height: 100px;
  display: flex;
  justify-content: center;
  background: none;
    border-top: 1px solid rgb(14, 15, 14);
  box-sizing: border-box;
}


.container_mud_weight{
  appearance: none;
  position: absolute;
  top: 225px; 
  left:0px;
  width: 65px;
  height: 260px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;
}

.dot_cement_dens{
  position : absolute;
  left:10px;
  top:120px;
  height: 5px;
  width: 5px;
  background-color: red;
  /*box-shadow:0px 0px 0px 2px black inset;*/
  z-index: +4; 
  border-radius: 100%;

}
#lbl_dot_cement_dens{
  position : absolute;
  left:25px;
  top:108px;
  font-size: 10px;
  font-weight: bold;
  z-index: +4;
}

.dot_water_dens{
  position : absolute;
  left:10px;
  top:70px;
  height: 5px;
  width: 5px;
  background-color: red;
  /*box-shadow:0px 0px 0px 2px black inset;*/
  z-index: +4; 
  border-radius: 100%;

}
#lbl_dot_water_dens{
  position : absolute;
  left:25px;
  top:58px;
  font-size: 10px;
  font-weight: bold;
  z-index: +4;
}

.dot_cement_dens,
#lbl_dot_cement_dens,
.dot_water_dens,
#lbl_dot_water_dens{
  pointer-events: none;
}


.picker_vertical{
  position: absolute;
  left: 0px;
  width: 95px;
  height: 100px;
  font-family: Arial, Helvetica, sans-serif;
  background: #d3d3d3;
  border: 2px solid #000;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  z-index: 3;
}
.picker_vertical:hover{
  color: red;
  cursor: pointer;
}
.picker_vertical:hover button,
.picker_vertical:hover .picker_vertical_value,
.picker_vertical:hover .picker_vertical_unit{
  color: red !important;
}

#comp_rate1_picker_value,
#comp_rate1_picker:hover #comp_rate1_picker_value,
#comp_rate1_picker:hover .picker_vertical_value{
  color: #000 !important;
}
.picker_vertical_arrows{
  display: flex;
  width: 100%;
  height: 50px;
  order: 3;
  margin-top: auto;
  border-top: 0;
  box-sizing: border-box;
  align-items: center;
}
.picker_vertical_arrows > button{
  flex: 1;
  cursor: pointer;
}
.picker_vertical_arrows > button:disabled{
  cursor: default;
}
.picker_vertical_arrows > button:first-child{
  border-right: 1px solid #000;
}
.picker_vertical button{
  position: relative;
  top: 0px;
  width: auto;
  height: 50px;
  background: #d3d3d3;
  border: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 50px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.picker_horizontal_arrows > button{
  cursor: pointer;
}
.picker_vertical_value{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 25px;
  order: 1;
  background: lightgrey;
  border: 0;
  box-shadow: none;
  color:black;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 0;
  margin: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: none;
  box-sizing: border-box;
}
.picker_vertical_value:focus{
  color: red;
  outline: none;
}
.picker_vertical_unit{
  position: relative;
  width: 100%;
  height: 25px;
  order: 2;
  background: lightgrey;
  border: 0;
  border-bottom: 1px solid #000;
  box-shadow: none;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  line-height: 25px;
  color: #000;
  user-select: none;
  cursor: text;
}
#mud_weight_picker{
  top: 0px;
  display: flex;
  flex-direction: column;
}

#mud_weight_picker .pump_rate_picker_row{
  display: flex;
  width: 100%;
  height: 25px;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}
#mud_weight_picker .pump_rate_picker_value{
  flex: 1;
  width: 95px;
  height: 25px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: black;
  text-align: left;
  font-weight: bold;
  font-size: 18px;
  padding-left: 2;
  margin: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: none;
  box-sizing: border-box;
}
#cbo_mud_weight_kg_l{
  text-align: center !important;
  padding-left: 0 !important;
}
#mud_weight_picker .pump_rate_picker_unit{
  display: none;
}
#mud_weight_picker:hover .pump_rate_picker_value,
#mud_weight_picker:hover .pump_rate_picker_unit{
  color: red;
}

  #lbl_mud_weight{ 
    top: -25px;
    width: 95px;

    }
    #lbl_pump_rate{
top: 0;
width: 95;
    }

  
  #frame_mud{
    left: 0px;
    top: 75px;
    width: 65px;
    height:310px;
    background:yellow;
  pointer-events: none;
  }

#cbo_mud_weight_ppg{
  left: 0px;
  top: 210px;
  width: 65px;
  display: none;
}




/* ####################################  END Container Mud  weight    */

/* ####################################  Container Mud visc    */
.container_mud_visc{
  appearance: none;
  position: absolute;
  top: 225px; 
  left:65px;
  width: 65px;
  height: 260px;
  display:flex;
  background:none; 
  outline-style: solid;
  outline-color: rgb(14, 15, 14); 
  outline-width: 1px; 
  justify-content: center;


}


#mud_visc_picker{
  top: 0px;
  display: flex;
  flex-direction: column;
}

#mud_visc_picker .pump_rate_picker_row{
  display: flex;
  width: 100%;
  height: 25px;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}
#mud_visc_picker .pump_rate_picker_value{
  flex: 1;
  width: 95px;
  height: 25px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: black;
  text-align: left;
  font-weight: bold;
  font-size: 18px;
  padding-left: 2;
  margin: 0;
  appearance: textfield;
  -moz-appearance: textfield;
  outline: none;
  box-sizing: border-box;
}
#cbo_mud_visc_marsh{
  text-align: center !important;
  padding-left: 0 !important;
}
#mud_visc_picker .pump_rate_picker_unit{
  display: none;
}
#mud_visc_picker:hover .pump_rate_picker_value,
#mud_visc_picker:hover .pump_rate_picker_unit{
  color: red;
}

  #lbl_mud_visc{ 
    top: -25px;
    width: 95px;

    }
  
  #frame_mud_visc{
    left: 0px;
    top: 75px;
    width: 65px;
    height:310px;
    background:yellow;
  }
  .dot_water_visc{
    position : absolute;
    height: 5px;
    width: 5px;
    background-color: red;
    /*box-shadow:0px 0px 0px 2px black inset;*/
    z-index: +4; 
    border-radius: 100%;
    left:10px;
    top:16px;
  }
  #lbl_dot_water_visc{
    position : absolute;
    left:25px;
    top:3px;
    font-size: 10px;
    font-weight: bold;
    z-index: +4;
  }

.dot_water_visc,
#lbl_dot_water_visc{
  pointer-events: none;
}

#cbo_mud_visc_cp{
  left: 0px;
  top: 210px;
  width: 65px;
  Height:25;
  display: none;
}



/* ####################################  END Container Mud  visc    */

/* ####################################  END Container Mixer      */

/* ####################################   Container Tables     */

.container_Tables{
position : absolute;
height: 585px;
width: 1470px;
top: 675px;;
left: 0px;; 
display: flex;
justify-content: center;
z-index: +1;
}
.tables_headline{
  position : absolute;
  top: -25px;
  left: 25px;
  font-size:25px; 
  font-family: Arial, sans-serif;
  color: black;
}
#tbl_wob_container{
  position : absolute;
  height: 585px;
  width: 100%;
  top: 0px;;
  left: 10px;; 
  justify-content: center;
  display: none;
  }


  #maximize_table{
    position : absolute;
    height: 25px;
    width :25px;
    left:260px;
    top: 15px;
    }
  #maximize_table:hover{
      background-color:red;
      height:30px;
      width :30px;
      top:10px;

     }
  

   #tbl_dual_wall_container{
    position : absolute;
    height: 585px;
    width: 50%;
    top: 0px;;
    left: 10px;; 
    justify-content: center;
    display: none;
   }
   #tbl_flange_container{
    position : absolute;
    height: 585px;
    width: 50%;
    top: 0px;;
    left: 10px;; 
    justify-content: center;
    display: none;
   }
   .btn_close_table{
    height:25px;
    color:blue;
    font-size:14px;
    font-family: Arial, sans-serif"
   }
   .btn_close_table:hover{
    color:red;
    font-size:18px;
    font-family: Arial, sans-serif"
   }


  /* ####################################  NAV BAR on TOP   */
   .navbar {
    position:absolute;
    /*background-color: #333;*/
    height: 50px;
    top: 35px;
    left:0px;
  }
  /*
  .navbar a {
    position:absolute;
    left: 100px;
    width:130px;
    float: left;
    font-size: 16px;
    color: #d3d3d3;
    text-align: center;

    text-decoration: none;
  }
*/
  /* ####################################  Dropdown Bit   */
  .sel_bit_ods {
    position:absolute;
    left: 0px;
    top: 0px;
    width:95px;
    height: 25px;
    z-index: 8000;

  }
  
  .sel_bit_ods .dropbtn_bits {
    width:95px;
    height: 25px;
    font-size: 16px;  
    border: none;
    outline: none;
    color: #8b2f2f;
    /*padding: 14px 16px;*/
    background-color: #d3d3d3;
    font-family:Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    z-index: +2;
    outline-style: solid;
    outline-color: rgb(14, 15, 14);
    outline-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    cursor: pointer;
  }

  .sel_bit_ods .dropbtn_bits:hover{
    background-color: red;
  }

  .sel_bit_ods .dropbtn_bits.suspend_hover:hover{
    background-color: #d3d3d3;
  }
  
  .navbar a:hover{
    background-color: red;
  }

  .sel_bit_ods.is_open .dropbtn_bits{
    background-color: red;
  }
  
  .sel_bit_ods-content {
    position: absolute;
    left: 0px;
    top: 25px;
    width: 130px;
    height: auto;
    display: none;
    background-color: #f9f9f9;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    z-index: 1001;
    justify-content: center;

  }
  
  .sel_bit_ods-content a {
    position: relative;
    top: 0px;
    width: 130px;
    height:25px;
    left: 0px;
    float: none;
    color: black;
    background-color: #dc9d00;
    /*padding: 12px 16px;*/
    text-decoration: none;
    display: block;
    line-height: 25px;
    text-align: center;
    box-shadow: 0px 0px 0px 1px black inset; 
    font-family:Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  }
  
  .sel_bit_ods-content a:hover {
    background-color: red;
    width: 130px;
  }
  
  .sel_bit_ods.is_open .sel_bit_ods-content{
    display: block;
    width: 130px;
  }



 /* ####################################  Dropdown Collar   */

  .sel_collars {
    position:absolute;
    left: 0px;
    top: 0px;
    width:95px;
    height: 50px;
    z-index: 4000;
  }
  
  .sel_collars .dropbtn_collars {
    width:95px;
    height: 50px;
    font-size: 16px;  
    border: none;
    outline: none;
    color: blue;
    /*padding: 14px 16px;*/
    background-color: #d3d3d3;
    font-family:Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    outline-style: solid;
    outline-color: rgb(14, 15, 14);
    outline-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
  
  .navbar a:hover, .sel_collars:hover .dropbtn_collars {
    background-color: red;
  }
  
  .sel_collars-content {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 95px;
    height: auto;
    display: none;
    background-color: #f9f9f9;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    z-index: 1001;
    justify-content: center;

  }
  
  .sel_collars-content a {
    position: relative;
    top: 0px;
    width: 95px;
    height:25px;
    left: 0px;
    float: none;
    color: black;
    background-color: #dc9d00;
    /*padding: 12px 16px;*/
    text-decoration: none;
    display: block;
    line-height: 25px;
    text-align: center;
    box-shadow: 0px 0px 0px 1px black inset; 
    cursor: pointer;
    font-family:Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  }
  
  .sel_collars-content a:hover {
    background-color: #ddd;
    width: 95px;
  }
  
  .sel_collars:hover .sel_collars-content {
    display: block;
    width: 95px;
  }

   /* ####################################  Dropdown Heavys   */

  .dropdown_heavys {
    position:absolute;
    left: 0px;
    top: 0px;
    width:95px;
    height: 50px;
    z-index: 4000;
  }
  
  .dropdown_heavys .dropbtn_heavys {
    width:95px;
    height: 50px;
    font-size: 16px;  
    border: none;
    outline: none;
    color: yellow;
    /*padding: 14px 16px;*/
    background-color: #d3d3d3;
    font-family:Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
    outline-style: solid;
    outline-color: rgb(14, 15, 14);
    outline-width: 1px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    cursor: pointer;
  }
  
  .navbar a:hover, .dropdown_heavys:hover .dropbtn_heavys {
    background-color: red;
  }
  
  .dropdown_heavys-content {
    position: absolute;
    left: 0px;
    top: 50px;
    width: 95px;
    height: auto;
    display: none;
    background-color: #f9f9f9;
    font-family:Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
    /*min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    */

    z-index: 1001;
    justify-content: center;

  }
  
  .dropdown_heavys-content a {
    position: relative;
    top: 0px;
    width: 95px;
    height:25px;
    left: 0px;
    float: none;
    color: black;
    background-color: #dc9d00;
    /*padding: 12px 16px;*/
    text-decoration: none;
    display: block;
    line-height: 25px;
    text-align: center;
    box-shadow: 0px 0px 0px 1px black inset; 
    font-family:Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  }
  
  .dropdown_heavys-content a:hover {
    background-color: #ddd;
    width: 95px;
  }
  
  .dropdown_heavys:hover .dropdown_heavys-content {
    display: block;
    width: 95px;
  }

     /* ####################################  Dropdown Pipe   */

     .dropdown_pipe {
      position:absolute;
      left: 0px;
      top: 0px;
      width:95px;
      height: 50px;
      z-index: 4000;
    }
    
    .dropdown_pipe .dropbtn_pipe {
      width:95px;
      height: 50px;
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      /*padding: 14px 16px;*/
      background-color: #d3d3d3;
      font-family:Arial, sans-serif;
      font-size: 18px;
      font-weight: bold;
      margin: 0;
      outline-style: solid;
      outline-color: rgb(14, 15, 14);
      outline-width: 1px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
    }
    
    .navbar a:hover, .dropdown_pipe:hover .dropbtn_pipe {
      background-color: red;
    }
    
    .dropdown_pipe-content {
  position: absolute;
  left: 0px;
  top: 50px;
  width: 95px;
  height: auto;
  display: none;
  background-color: #f9f9f9;
  font-family:Arial, sans-serif;
font-size: 14px;
font-weight: bold;
  /*min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  */

  z-index: 5001;
  justify-content: center;

}
    
    .dropdown_pipe-content a {
      position: relative;
      top: 0px;
      width: 95px;
      height:25px;
      left: 0px;
      float: none;
      color: black;
      background-color: #dc9d00;
      /*padding: 12px 16px;*/
      text-decoration: none;
      display: block;
      line-height: 25px;
      text-align: center;
      box-shadow: 0px 0px 0px 1px black inset; 
      font-family:Arial, sans-serif;
      font-size: 12px;
      font-weight: bold;
    }
    
    .dropdown_pipe-content a:hover {
      background-color: #ddd;
      width: 95px;
    }
    
    .dropdown_pipe:hover .dropdown_pipe-content {
      display: block;
      width: 95px;
    }

         /* ####################################  END Dropdown Pipe   */
         /* ####################################   Dropdown Casing   */

         .dropdown_casing {
         position:absolute;
         left: 0px;
         top: 0px;
         width:95px;
         height: 50px;
         z-index: 4000;
          
        }
        
        .dropdown_casing .dropbtn_casing {
          width:95px;
          height: 50px;
          font-size: 16px;  
          border: none;
          outline: none;
          color: green;
          /*padding: 14px 16px;*/
          background-color: #d3d3d3;
          font-family:Arial, sans-serif;
          font-size: 18px;
          font-weight: bold;
          margin: 0;
         /*box-shadow: 0px 0px 0px 3px black inset;*/
         outline-style: solid;
         outline-color: rgb(14, 15, 14);
         outline-width: 1px;
         display: flex;
         flex-direction: column;
         align-items: stretch;
         justify-content: center;
        }
        
        .navbar a:hover, .dropdown_casing:hover .dropbtn_casing {
          background-color: red;
        }
        
        .dropdown_casing-content {
          position: absolute;
          left: 0px;
          top: 50px;
          width: 95px;
          height: auto;
          display: none;
          background-color: #f9f9f9;
          font-family:Arial, sans-serif;
          font-size: 14px;
          font-weight: bold;
          /*min-width: 160px;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          */
      
          z-index: 1001;
          justify-content: center;
      
        }
        
        .dropdown_casing-content a {
          position: relative;
          top: 0px;
          width: 95px;
          height:25px;
          left: 0px;
          float: none;
          color: black;
          background-color: #dc9d00;
          /*padding: 12px 16px;*/
          text-decoration: none;
          display: block;
          line-height: 25px;
          text-align: center;
          box-shadow: 0px 0px 0px 1px black inset; 
          font-family:Arial, sans-serif;
          font-size: 12px;
          font-weight: bold;
        }
        
        .dropdown_casing-content a:hover {
          background-color: red;
          width: 95px;
        }
        
        .dropdown_casing:hover .dropdown_casing-content {
          display: block;
          width: 95px;
        }
                /* #################################### END Dropdown Casing   */

                /* ####################################  Dropdown Method   */

                .dropdown_method {
                  position:absolute;
                  left: 0px;
                  top: 0px;
                  width:130px;
                  height: 50px;
                  z-index: 4000;
                  
                }
                
.dropdown_method .dropbtn_method {
  width:130px;
  height: 50px;
  font-size: 18px;
                  border: none;
                  outline: none;
                  color: black;
                  /*padding: 14px 16px;*/
                  background-color: #d3d3d3;
                  font-family:Arial, sans-serif;
                  font-size: 18px;
                  font-weight: bold;
                 margin: 0;
                 /*box-shadow: 0px 0px 0px 3px black inset;*/
                 outline-style: solid;
                 outline-color: rgb(14, 15, 14);
                 outline-width: 1px;
                 display: flex;
                 flex-direction: column;
                 align-items: stretch;
                 justify-content: center;
                }

#method_display.dropdown_method{
  width: 130px;
  height: 25px;
}

#method_display .dropbtn_method{
  width: 130px;
  height: 25px;
}

                #btn_method_settings,
                #btn_bits_settings,
                #btn_heavys_settings,
                #btn_collars_settings,
                #btn_pipe_settings,
                #btn_casing_settings,
                #btn_medium_settings,
                #btn_global_settings{
                  display:inline-block;
                  font-size:30px;
                  color:black;
                  margin-left:auto;
                  margin-right:4px;
                  cursor:pointer;
                }

#method_display #dropbtn_method_label{
  cursor: pointer;
}

                #btn_global_settings{
                  position:absolute;
                  top:25px;
                  left:300px;
                  z-index:5;
                  font-size:50px;
                }
                
                #btn_method_reset{
                  position:absolute;
                  top:30px;
                  left:350px;
                  z-index:5;
                  font-size:50px;
                }

.method_header{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  font-size:18px;
  line-height:18px;
  padding:2px 4px 0 4px;
}

#method_display .method_header{
  height: 25px;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

#method_display #dropbtn_method_label{
  flex: 0 0 auto;
  text-align: center;
  font-size: 16px;
  line-height: 25px;
  padding: 0;
}

                .method_caption{
                  margin-right:4px;
                }

.sel_collars .dropbtn_collars .method_header,
.sel_bit_ods .dropbtn_bits .method_header,
.dropdown_heavys .dropbtn_heavys .method_header,
.dropdown_pipe .dropbtn_pipe .method_header,
.dropdown_casing .dropbtn_casing .method_header{
  justify-content: center;
}

.sel_collars .dropbtn_collars .method_caption,
.sel_bit_ods .dropbtn_bits .method_caption,
.dropdown_heavys .dropbtn_heavys .method_caption,
.dropdown_pipe .dropbtn_pipe .method_caption,
.dropdown_casing .dropbtn_casing .method_caption{
  margin-right: 0;
}

                .method_arrow{
                  margin-right:4px;
                }

.method_name{
  flex:1;
  text-align:center;
  font-size:16px;
  line-height:20px;
  padding-top: 5px;
  padding-bottom:1px;
}

#dropbtn_bits_label{
    color: #8b2f2f;
    position: absolute;
    white-space: normal;
    top: 225px;
    width: 95px;
    left: 0px;
    height: 50px;
    background: #dc9d00;
    box-shadow: 0px 0px 0px 1px black inset;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    z-index: 10;
    cursor: pointer;
}

#dropbtn_bits_nozzles{
    color: #8b2f2f;
    position: absolute;
    white-space: normal;
    top: 275px;
    width: 95px;
    left: 0px;
    height: 50px;
    background: #dc9d00;
    box-shadow: 0px 0px 0px 1px black inset;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 14px;
    line-height: 16px;
    z-index: 9;
    cursor: pointer;
}
                
                .navbar a:hover, .dropdown_method:hover .dropbtn_method {
                  background-color: red;
                }
                
                .dropdown_method-content {
                  position: absolute;
                  left: 0px;
                  top: 50px;
                  width: 130px;
                  height: auto;
                  display: none;
                  background-color: #f9f9f9;
                  font-family:Arial, sans-serif;
                  font-size: 14px;
                  font-weight: bold;
                  text-align: left; 
                  text-indent: 5px; 
                  /*min-width: 160px;
                  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                  */
              
                  z-index: 1001;
                  justify-content: center;
              
                }
                
                .dropdown_method-content a {
                  position: relative;
                  top: 0px;
                  width: 130px;
                  height:25px;
                  left: 0px;
                  float: none;
                  color: black;
                  background-color: #dc9d00;
                  /*padding: 12px 16px;*/
                  text-decoration: none;
                  display: block;
                  line-height: 25px;
                  text-align: center;
                  box-shadow: 0px 0px 0px 1px black inset; 
                  font-family:Arial, sans-serif;
                  font-size: 14px;
                  font-weight: bold;
                  text-align: left;
                }
                
                .dropdown_method-content a:hover {
                  background-color: red;
                  width: 130px;
                }
                
                .dropdown_method:hover .dropdown_method-content {
                  display: block;
                  width: 130px;
                }

                #method_display:hover .dropbtn_method{
                  background-color: red;
                }

                #drill_toolbar .dropdown_method{
                  position: absolute;
                  left: 875px;
                  top: 5px;
                  width: 130px;
                  height: 38px;
                  z-index: 60;
                }

                #drill_toolbar .dropdown_method .dropbtn_method{
                  width: 130px;
                  height: 38px;
                  padding: 0 10px;
                  border: 1px solid black;
                  background: #d3d3d3;
                  outline: none;
                  font-family: Arial, sans-serif;
                  font-size: 14px;
                  font-weight: 700;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                  gap: 8px;
                  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15) inset;
                }

                #drill_toolbar .dropdown_method:hover .dropbtn_method{
                  background-color: #dc9d00;
                }

                #drill_toolbar .dropdown_method-content{
                  top: 38px;
                  width: 130px;
                  z-index: 6000;
                }

                #drill_toolbar .dropdown_method.is_open .dropdown_method-content{
                  display: block;
                  width: 130px;
                }

                #drill_toolbar .dropdown_method-content a{
                  width: 130px;
                  height: 38px;
                  line-height: 38px;
                }

                @media (pointer: coarse) {
                  #drill_toolbar .dropdown_method{
                    height: 44px;
                  }
                  #drill_toolbar .dropdown_method .dropbtn_method{
                    height: 44px;
                  }
                  #drill_toolbar .dropdown_method-content{
                    top: 44px;
                  }
                  #drill_toolbar .dropdown_method-content a{
                    height: 44px;
                    line-height: 44px;
                  }
                }

                   /* ####################################  End Dropdown Method   */
                   /*
                   .method_selected_special_option{
                    position: absolute;
                    top: 0px;
                    width: 130px;
                    height: 25px;
                    }
                    */
                   /* ####################################  Dropdown Method Submenue   */

 /* ####################################  Dropdown special_options   */
 .container_special_option_airlift{
    position: absolute;
    top: 0px;
    height: 635px;
    width: 130px;
    left: 0px;
    display: block;
    z-index: +3;

  }

.container_special_option_cementing{
  position: absolute;
  top: 25px;
  height: 635px;
  width: 130px;
  left: 0px;
  display: block;
  z-index: +3;
}
/*
#lbl_cementing_title{
  top: 0px;
  left: 0px;
}
#lbl_cement_shoe_depth{
  top: 25px;
  left: 0px;
}
#cbo_cement_shoe_depth_m{
  top: 45px;
  left: 0px;
  width: 65px;
}
#cbo_cement_shoe_depth_ft{
  top: 45px;
  left: 65px;
  width: 65px;

#lbl_cement_bhct{
  top: 70px;
  left: 0px;
}}*/
#input_cement_bhct_c{
  top: 25px;
  left: 0px;
  width: 130px;
}
#lbl_cement_target_density{
  top: 50px;
  left: 0px;
}
#input_cement_target_density{
  top: 70px;
  left: 0px;
  width: 130px;
}
#lbl_cement_float_collar_depth{
  top: 95px;
  left: 0px;
}
#input_cement_float_collar_depth{
  top: 115px;
  left: 0px;
  width: 130px;
}
#lbl_cement_string_volume{
  top: 140px;
  left: 0px;
}
#output_cement_string_volume_m3{
  top: 160px;
  left: 0px;
}
#lbl_cement_annulus_volume{
  top: 185px;
  left: 0px;
  color: black !important;
  -webkit-text-fill-color: black !important;
}
#output_cement_annulus_volume_m3{
  top: 205px;
  left: 0px;
}
#lbl_cement_total_volume{
  top: 230px;
  left: 0px;
    color: black !important;
  -webkit-text-fill-color: black !important;
}
#output_cement_total_pumped_m3{
  top: 250px;
  left: 0px;
}
#lbl_cement_time{
  top: 275px;
  left: 0px;
}
#output_cement_total_time_min{
  top: 295px;
  left: 0px;
}
#lbl_cement_classg{
  top: 320px;
  left: 0px;
}
#output_cement_classg_kg{
  top: 340px;
  left: 0px;
}
#lbl_cement_water{
  top: 365px;
  left: 0px;
}
#output_cement_water_l{
  top: 385px;
  left: 0px;
}
#lbl_cement_wcr{
  top: 410px;
  left: 0px;
  background: transparent;
}
#output_cement_wcr{
  top: 430px;
  left: 0px;
}
#lbl_cement_sacks{
  top: 455px;
  left: 0px;
  background: transparent;
}
#output_cement_sacks{
  top: 475px;
  left: 0px;
}
#lbl_cement_tt{
  top: 500px;
  left: 0px;
}
#output_cement_thickening_min{
  top: 520px;
  left: 0px;
}
#lbl_cement_additives{
  top: 545px;
  left: 0px;
  background: transparent;
}
#output_cement_additives{
  top: 565px;
  left: 0px;
}

#container_special_option_cementing .picker_labels,
#container_special_option_cementing .input_output,
#container_special_option_cementing .output{
  height:25px;
  line-height:25px;
  padding:0px;
  margin:0px;
  box-sizing:border-box;
}

#container_special_option_cementing .picker_labels{
  appearance:none;
  -webkit-appearance:none;
  width:130px;
  text-align: left;
  padding-left: 5;
}

#container_special_option_cementing input[id^="lbl_cement_"],
#container_special_option_cementing input[id^="input_cement_"],
#container_special_option_cementing input[id^="output_cement_"]{
  border: none;
  box-shadow: 0px 0px 0px 1px black inset;
  box-sizing: border-box;
}

#lbl_cement_bhct{ top:25px; left:0px;color: black !important; -webkit-text-fill-color: black !important; pointer-events:auto; cursor: help;}
#input_cement_bhct_c{ top:50px; left:0px; width:130px;background: lightgray; }
#lbl_cement_target_density{ top:75px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#input_cement_target_density{ top:100px; left:0px; width:130px;background: lightgray; }
#lbl_cement_float_collar_depth{ top:475px; left:0px;color: black !important; -webkit-text-fill-color: black !important;background: white;}
#input_cement_float_collar_depth{ top:500px; left:0px; width:130px;background: lightgray; }
#lbl_cement_float_collar_depth,
#input_cement_float_collar_depth{
  display:none;
}
#lbl_cement_total_volume{ top:125px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_total_pumped_m3{ top:150px; left:0px; }
#lbl_cement_classg{ top:175px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_classg_kg{ top:200px; left:0px; }
#lbl_cement_water{ top:225px; left:0px;color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_water_l{ top:250px; left:0px; }
#lbl_cement_tt{ top:275px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_thickening_min{ top:300px; left:0px; }
#lbl_cement_time{ top:325px; left:0px;color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_total_time_min{ top:350px; left:0px; }
#lbl_cement_string_volume{ top:375px; left:0px;color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_string_volume_m3{ top:400px; left:0px; }
#lbl_cement_annulus_volume{ top:425px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#output_cement_annulus_volume_m3{ top:450px; left:0px; }
#lbl_cement_spacer{ top:525px; left:0px;height:0px; display:none }
#lbl_cement_wcr{ top:485px; left:0px; width:130px; }
#output_cement_wcr{ top:510px; left:0px; width:130px; }
#lbl_cement_sacks{ top:535px; left:0px; width:130px; }
#output_cement_sacks{ top:560px; left:0px; width:130px; }
#lbl_cement_additives{ top:475px; left:0px; width:130px; text-align: left; padding-left: 5; }
#output_cement_additives{ top:500px; left:0px; width: 130px;text-align: left; padding-left: 5; }

#lbl_cement_wcr,
#output_cement_wcr,
#lbl_cement_sacks,
#output_cement_sacks{
  display:none !important;
}

#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_spacer{top:460px; left:0px;height:0;display:none}

#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_total_volume{top:125px; left:0px;color: black !important; -webkit-text-fill-color: black !important;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_total_pumped_m3{top:150px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_classg{top:175px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_classg_kg{top:200px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_water{top:225px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_water_l{top:250px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_tt{top:275px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_thickening_min{top:300px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_time{top:325px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_total_time_min{top:350px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_string_volume,
#container_special_option_cementing[data-cement-mode="float"] #output_cement_string_volume_m3{
  display:none;
}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_float_collar_depth{
  display:block;
  top:375px;
  width: 130px;
  background: transparent;
}
#container_special_option_cementing[data-cement-mode="float"] #input_cement_float_collar_depth{
  display:block;
  top:400px;
}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_annulus_volume{top:425px; left:0px; color: black !important; -webkit-text-fill-color: black !important;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_annulus_volume_m3{top:450px; left:0px;}

#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_wcr{top:485px; left:0px;background:transparent;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_wcr{top:510px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_sacks{top:535px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_sacks{top:560px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #lbl_cement_additives{top:475px; left:0px;}
#container_special_option_cementing[data-cement-mode="float"] #output_cement_additives{top:500px; left:0px;}
/*
.rao_option_section{
    position:absolute;
    top:0px;
    left:25px;
    width:390px;
    height:40px;
    z-index:5;
  }
  .rao_option_caption{
    position:absolute;
    top:0px;
    left:0px;
    font-family:Arial, sans-serif;
    font-size:14px;
    font-weight:bold;
  }
  .rao_option_buttons{
    position:absolute;
    top:18px;
    left:0px;
  }
  .rao_option_button{
    display:inline-block;
    margin-right:5px;
    padding:2px 8px;
    min-width:90px;
    background-color:#d3d3d3;
    color:black;
    font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    border:1px solid rgb(14,15,14);
    cursor:pointer;
  }
  .rao_option_button:hover{
    background-color:red;
    color:black;
  }
  .rao_option_button_active{
    background-color:blue;
    color:white;
  }
  #btn_special_option_1{
    position: absolute;
    top: 0px;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    text-indent: 5px;
  }
  #btn_special_option_1:hover{
    background-color:red !important;
    color:black !important;
  }
  #btn_special_option_2{
    position: absolute;
    top: 25px;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    text-indent: 5px;
  }
  #btn_special_option_2:hover{
    background-color:red !important;
    color:black !important;
  }
  #btn_special_option_3{
    position: absolute;
    top: 50px;
    font-family:Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    text-indent: 5px;
  }
  #btn_special_option_3:hover{
    background-color:red !important;
    color:black !important;
  }
*/
  #rao_sel_values{
    appearance: none;
    position: absolute;
    top: 50px;
    left: 0px;
    width: 130px;
    height: 25px;
    font-size: 75%;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    background: #d3d3d3;
    z-index: 3000;
    cursor: pointer;
  }
  #rao_sel_values.listbox_select{
    display: none;
  }
  #rao_sel_values.listbox_select.is_listbox{
    display: block;
    height: 275px;
    width: 130px;
    min-width: 130px;
    font-size: 15px;
    padding: 2px;
    z-index: 99999;
    overflow-y: auto;
  }
  #btn_rao_sel_values{
    border-bottom: 1px solid #000;
  }
  #rao_upper_pipe_picker{
    position: absolute;
    top: 50px;
    left: 0px;
    width: 130px;
  }
  #lbl_rao_upper_pipe_mode{
    position: absolute;
    top: 25px;
    left: 0px;
    width: 130px;
    height: 25px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1001;
  }
  #lbl_special_option{
    position: absolute;
    top: 75px;
    height: 25px;
    width: 130px;
  }

  #upper_pipe_length_picker{
    top: 125px;
    left: 65px;
    width: 65px;
    height: 100px;
    touch-action: none;
  }

  #air_injection_depth_picker{
    top: 125px;
    left: 0px;
    width: 65px;
    height: 100px;
    touch-action: none;
  }
/*
  .dropdown_special_options {
    display:none;
  }
*/








                   /* ####################################  End Dropdown Method     #container_medium{ display:none;} */

  
              
  
                   /* ####################################  Dropdown Medium   */

                   .dropdown_medium {
                   position:absolute;
                   left: 0px;
                   top: 0px;
                   width:95px;
                   height: 25px;
                   z-index: 4000;
                   
                  }
                  
                  .dropdown_medium .dropbtn_medium {
                    width:95px;
                    height: 25px;
                    font-size: 16px;  
                    border: none;
                    outline: none;
                    color: black;
                    /*padding: 14px 16px;*/
                    background-color: #d3d3d3;
                    font-family:Arial, sans-serif;
                    font-size: 18px;
                    font-weight: bold;
                    margin: 0;
                   /*box-shadow: 0px 0px 0px 3px black inset;*/
                   outline-style: solid;
                   outline-color: rgb(14, 15, 14);
                   outline-width: 1px;
                   display: flex;
                   flex-direction: column;
                   align-items: stretch;
                   justify-content: center;
                  }
                  
                  .navbar a:hover {
                    background-color: red;
                  }
                  
                  .dropdown_medium:hover .dropbtn_medium {
                    background-color: #d3d3d3;
                  }
                  
                  .dropdown_medium-content {
                    position: absolute;
                    left: 0px;
                    top: 50px;
                    width: 130px;
                    height: auto;
                    display: none;
                    background-color: #f9f9f9;
                    font-family:Arial, sans-serif;
                    font-size: 14px;
                    font-weight: bold;
                    z-index: 1001;
                    justify-content: center;
                
                  }
                  
                  .dropdown_medium-content a {
                    position: relative;
                    top: 0px;
                    width: 130px;
                    height:25px;
                    left: 0px;
                    float: none;
                    color: black;
                    background-color: #dc9d00;
                    /*padding: 12px 16px;*/
                    text-decoration: none;
                    display: block;
                    line-height: 25px;
                    text-align: center;
                    box-shadow: 0px 0px 0px 1px black inset; 
                    font-family:Arial, sans-serif;
                    font-size: 12px;
                    font-weight: bold;
                  }
                  
                  .dropdown_medium-content a:hover {
                    background-color: red;
                    width: 130px;
                  }
                  
                  .dropdown_medium:hover .dropdown_medium-content {
                    display: block;
                    width: 130px;
                  }
                                  /* ####################################  End Dropdown Medium   */    

                                   /* ####################################  Popup rc_airlift_adds  */ 
                                   

                  #lbl_upspeed{
                    position:absolute;
                    top: 50px;
                    height: 45px;
                    line-height: 45px;
                    width: 300px;
                    left: 25px;
                    font-size: 18px;
                    -webkit-text-fill-color: black;
                    font-weight: bold;
                    text-align: center;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    z-index: 3;
                  }       
                  #input_output_upspeed{
                    top: 50px;
                    height: 45px;
                    width: 65px;
                    left: 350px; 
                    background: #dc9d00; 
                  }
                  #lbl_rop{
                    position:absolute;
                    top: 100px;
                    height: 45px;
                    line-height: 45px;
                    width: 300px;
                    left: 25px;
                    font-size: 18px;
                    -webkit-text-fill-color: black;
                    font-weight: bold;
                    text-align: center;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    z-index: 3;
                  }  
                  #input_output_rop{
                    top: 100px;
                    height: 45px;
                    width: 65px;
                    left: 350px;  
                    background: #dc9d00;
                  }
                  #lbl_ratio_mud_air{
                    position:absolute;
                    top: 150px;
                    height: 45px;
                    line-height: 45px;
                    width: 300px;
                    left: 25px;
                    font-size: 18px;
                    -webkit-text-fill-color: black;
                    font-weight: bold;
                    text-align: center;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    z-index: 3;
                  }
                  #input_output_relation_mud_air{
                    top: 150px;
                    height: 45px;
                    width: 65px;
                    left: 350px;  
                    background: #dc9d00;
                  }
                  #lbl_rho_cuttings{
                    position:absolute;
                    top: 200px;
                    height: 45px;
                    line-height: 45px;
                    width: 300px;
                    left: 25px;
                    font-size: 18px;
                    -webkit-text-fill-color: black;
                    font-weight: bold;
                    text-align: center;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    z-index: 3;
                  }
                  #input_output_rho_cuttings{
                    position:absolute;
                    top: 200px;
                    height: 45px;
                    width: 65px;
                    left: 350px;  
                    background: #dc9d00;
                  }

                  /* Altitude Slider Styles */
                  #lbl_altitude {
                    position:absolute;
                    top: 250px;
                    height: 45px;
                    line-height: 45px;
                    width: 300px;
                    left: 25px;
                    font-size: 18px;
                    -webkit-text-fill-color: black;
                    font-weight: bold;
                    text-align: center;
                    background-color: transparent;
                    background-repeat: no-repeat;
                    z-index: 3;
                  }
                  #input_output_altitude {
                    position:absolute;
                    top: 250px;
                    height: 45px;
                    width: 65px;
                    left: 350px;  
                    background: #dc9d00;
                  }

                  #reset_to_recomm{
                    position:absolute;
                    top: 400px;
                    height: 45px;
                    width: 300px;
                    left: 25px;
                  }
                  #tgl_units{
                    position:absolute;
                    top: 400px;
                    left: 350px;
                    height: 45px;
                    width: 65px;
                  }

                  #img_settings{
                    position:absolute;
                    top:0px;
                    width:30px;
                    left:1100px;
                  }           

                  #drill_overlay {
                    position: fixed;
                    inset: 0;
                    z-index: 10000;
                    display: none;
                  }

                  #drill_overlay .drill_overlay_backdrop {
                    position: absolute;
                    inset: 0;
                    background: rgba(0, 0, 0, 0.55);
                  }

                  #drill_overlay .drill_overlay_panel {
                    position: absolute;
                    inset: 20px;
                    background: #f9f9f9;
                    border: 1px solid #000;
                    display: flex;
                    flex-direction: column;
                  }

                  #drill_overlay .drill_overlay_header {
                    height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 12px;
                    background: #d3d3d3;
                    border-bottom: 1px solid #000;
                    font-family: Arial, sans-serif;
                    font-size: 16px;
                    font-weight: bold;
                  }

                  #drill_overlay .drill_overlay_close {
                    width: 44px;
                    height: 36px;
                    border: 1px solid #000;
                    background: #dc9d00;
                    font-size: 22px;
                    line-height: 22px;
                    cursor: pointer;
                  }

                  #drill_overlay iframe {
                    width: 100%;
                    flex: 1;
                    border: 0;
                    background: #fff;
                  }