/*.width--50 {*/
/*width: 50%;*/
/*flex: 0.5;
}
*/

.gap--1 {
  gap: 3px;
}

.background-blue {
  background-color: deepskyblue
}

.width--100 {
  width: 100%;
  position: relative;
}

.flex--50 {
  flex: 0.5;
}

.flex--100 {
  flex: 1;
}

.cursor {
  cursor: pointer !important;
}

.sidenav {
  width: 100%;
  width: min(550px, 100%);
  position: absolute;
  top: 0px;
  left: -100%;
  transition: 0.5s;
}

/* Open/closed is a class so the stylesheet decides *how* the panel moves:
   sideways here, down from the top on mobile (see index.css). */
.sidenav.open {
  left: 0;
}

/*
.sidenav {
  height: 100%;
  width: 100%;
  max-height: calc(100vh - 50px);
  width: min(550px, 100%);
  position: absolute;
  z-index: 2;
  top: 0;
  left: -100%;
  transition: 0.5s;
  padding-top: 60px;
} */

.sidenav a {
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.5s;
}


.sidenav .closebtn {
  position: absolute;
  top: -15px;
  right: -25px;
  font-size: 38px;
  color: red;
  font-weight: 700;
}

.tab-pane button {
  display: flex !important;
  align-items: center
}


#menu_tabs .nav-link {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.nav-link {
  text-decoration: none !important;
}

#menu_tabs li a {
  text-decoration: underline;
  font-weight: 600;
  color: black;
  font-size: .8rem;
}

#menu_tabs {
  flex-wrap: wrap !important;
}

#menu_tabs li {
  width: 25%;
  /* flex: 1;*/
}




@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }
}

#myTab li {
  width: 25%;
}

#myTab li a {
  font-size: 14px;
}

#mySidenav .nav-link {
  padding: 5px !important;
  background-color: white;
}

#mySidenav .nav-link.active {
  background-color: #79a8ce !important;
}

.denture-plate-treatment-btn img,
.x-ray-btn img,
.treatment-btn img {
  width: 100%;
  max-width: 50px;
  background-color: white;
  border-radius: 5px;
  margin: 0 8px;
}

.denture-plate-treatment-btn,
.x-ray-btn,
.treatment-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding-left: 10px !important;
  border-bottom: 1px solid black !important;
}

.top-menu-btn.active {
  background-color: #79a8ce;
}

.reset-model-tooltip,
.teeth-selection-tooltip {
  position: relative;
  display: inline-block;
}

.reset-model-tooltip .reset-model-tooltip-container,
.teeth-selection-tooltip .teeth-selection-tooltip-container {
  visibility: hidden;
  color: #fff;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  background-color: lightgray;
  display: flex;
  flex-direction: column;
  text-align: center;
  left: -15px;
  top: 40px;
  gap: 2px;
  min-width: 85px;
}


.teeth-selection-tooltip-container button {
  font-weight: 700;
}

.reset-model-tooltip.active-tool-tip .reset-model-tooltip-container,
.teeth-selection-tooltip.active-tool-tip .teeth-selection-tooltip-container {
  visibility: visible;
  opacity: 1;
}

/********************plans tab**************/
#plans_tab {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}


.add-plan-button {
  display: flex;
  align-items: center;
  background-color: #ffffff00;
  color: black;
  width: 100%;
  height: 2.9em;
  border: lightgrey 0.2em solid;
  border-radius: 11px;
  text-align: left;
  transition: all 0.6s ease;
}

.add-plan-button:hover {
  background-color: #d5d5d5;
  cursor: pointer;
}

.add-plan-button span {
  /*   width: 1.6em;
        margin: -0.1em 1.5em;*/
  /*  display: flex;*/
  position: absolute;
  transition: all 0.6s ease;
}

.add-plan-button:hover span {
  transform: translateX(5px);
}

.text {
  margin: 0 0 0 50px
}


.treatment-plan-row button {}

.treatment-plan-row {
  border-radius: 5px;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid black;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.treatment-plan-row.active {
  background-color: #79a8ce;
}

.treatment-plan-row:hover {
  cursor: pointer !important;
}

#upload_xray_container_img_options {
  border-bottom: 1px solid black;
}


#upload_xray_container_img_options button,
#upload_xray_container_img_options label {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
  padding: 10px;
  border-radius: 10px;
  height: 45px;
}

#toggle_drawing_mode_btn {
  background-color: lightgray;
}

#toggle_drawing_mode_btn.active {
  background-color: lightblue !important;
}

#mouth_animation_input {
  width: 100%;
}

.middle-nerve-btn:hover {
  font-size: 20px;
  cursor: pointer !important;
}

/********************end plans tab**************/
/*.sidenav {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: -100%;
    left: 0;
    transition: 0.5s;
    padding-top: 60px;
}

    .sidenav a {
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.5s;
    }


    .sidenav .closebtn {
        position: absolute;
        font-size: 38px;
        color: black;
        font-weight: 700;
        bottom: -33px;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}
*/


/* .treatment-btn {
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }*/

/* .treatment-btn img {
      width: 100%;
      max-width: 50px;
      background-color: white;
      border-radius: 5px;
  }*/
/*   .treatment-btn img {
                            width: 100%;
                            max-width: 50px;
                            background-color: white;
                            border-radius: 5px;
                        }

                        .treatment-btn {
                            display: block;
                            width: 100%;
                            text-align: left;
                            padding-left: 15px;
                            border-bottom: 1px solid black;
                        }

                            .treatment-btn img {
                                margin: 0 8px;
                            }*/

/* #home-tab {
                            background-color: #156082;
                            color:white;
                        }*/
/* .nav-link {
                            background-color: white;
                        }

                            .nav-link.active {
                                background-color: #79a8ce !important;
                            }*/

/*  #home button {
                            background-color: #156082;
                        }*/

#treatment_text_toggle_btn {
  position: absolute;
  top: 0;
  left: 5px;
}

/* Upper controls */
.uppper-treatment-buttons {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.position-relative.gap--1 {
  flex: 1;
  display: flex;
}

.buttons-container .play_upper_btn,
.buttons-container .play_lower_btn {
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: space-evenly;
  padding-left: 8px;
  padding-right: 8px;
}

.reset-animation-btn,
#translation_play_btn,
#translation_stop_btn {
  padding: 3px !important;
}

.buttons-container button.reset-animation-btn img,
.buttons-container #translation_play_btn img,
.buttons-container #translation_stop_btn img {
  max-width: 30px;
}

.buttons-container .btn img {
  max-width: 25px;
  border-radius: 50%;
}

.transparency-row {
  display: flex;
  width: 100%;
  gap: 8px;
}

.expand-textarea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.expand-textarea-btn img {
  margin-right: 10px;
}

.transparency-row label {
  margin: 0;
}

#gun_range_input {
  padding: 0;
  height: 18px;
}

.width--100 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.width--100.expanded {
  max-height: 600px;
  transition: max-height 0.4s ease;
}