html {
    height: 100%;
    overflow: hidden;
    font-family: helvetica, "Roboto", arial, sans-serif;
    margin: 0;
}

body {
    height: 100%;
    background-color: ivory;
    margin: 0;
    background: #373737;
}

.inner-container {
    height: 100%;
    display: flex;
}

.interfaces {
    width: 265px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: #252525;
}

.rooms {
    flex: 1;
    width: 265px;
    overflow: hidden;
}

.buttons {
    display: flex;
}

.buttons button {
    flex: 1;
    font-size: 14px;
    padding: 15px 5px;
    border-radius: 0px !important;
    border: solid 1px #252525;
    cursor: pointer;
    background: #4b4b4b;
    color: white;
}

canvas {
    border: 1px solid #acacac;
    position: absolute;
    width: inherit;
    height: inherit;
    box-sizing: border-box;
    border: none;
}

#canvasWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
}

.room {
    display: flex;
    border-bottom: solid 1px #252525;
    background: #4b4b4b;
    transition: all 0.25s ease-in-out;
    width: 500px;
    color: white;
    z-index: 999;
    position: relative;
}

.room button {
    background: #868686;
    border: none;
    width: 37px;
    font-size: 25px;
    color: white;
    margin-right: 10px;
    cursor: pointer;
}

.room.open {
    transform: translateX(-229px);
    transition: all 0.25s ease-in-out;
}

.room .label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0px;
}

button.more-info {
    margin-right: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

button.more-info>span {
    transition: all .25s ease-in-out;
    transition-delay: .25s;
}

button.more-info.open>span {
    transform-origin: center;
    transform: rotate(180deg);
    transition: all .25s ease-in-out;
    transition-delay: .25s;
}

.right .content {
    display: flex;
    width: 100%;
    height: 100%;
}

.cont {
    flex: 1;
    display: flex;
    flex-direction: column;
}

input#room_name {
    border-radius: 0;
    width: 100%;
    height: 33px;
    border: solid 1px #868686;
}

button#probe {
    margin-right: 0;
    width: 37px;
    background: #18b249;
}

.mesures {
    min-width: 110px;
    padding: 5px 0px;
    display: flex;
}

.mesures>div {
    text-align: center;
}

.left {
    display: flex;
}

.right {
    width: 229px;
    background: #868686;
}

.center {
    width: 166px;
    padding-right: 15px;
}

.modal {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
    transition: all 0.25s ease-in-out;
    transition-delay: .05;
    z-index: 9999999;
}

.modal.visible {
    opacity: 1;
    pointer-events: all;
    transition: all 0.25s ease-in-out;
    transition-delay: .05;
}

.modal-window {
    min-width: 480px;
    width: 75%;
    padding: 15px;
    background: #dadada;
    z-index: 9;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
}

.modal-window .text {
    min-height: 70px;
    margin-bottom: 15px;
    background: white;
    border-radius: 3px;
    padding: 15px;
    overflow: auto;
}

button.devicesSettings {
    max-width: 40px;
    font-size: 21px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

button#probe.active {
    background: #335bd0;
}

.probe-list {
    overflow-x: auto;
    background: #4b4b4b;
    flex: 1;
}

.probe-list>button {
    width: 40px;
    background: #18b249;
    height: 100%;
    margin-right: 0 !important;
    border-right: solid 1px white;
}

.modal.yaml-export>.modal-window {
    width: 500px;
    max-height: 90%;
}

.text>.container {
    display: flex;
}

.text>.container>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    max-height: 333px;
    overflow-y: auto;
}

.text>.container>.left {
    max-width: 250px;
    margin-right: 20px;
}

.input-elem {
    display: flex;
    margin-bottom: 15px;
}

.input-elem>input {
    height: 30px;
    flex: 1;
    border-radius: 0px;
    border: solid 1px #656565;
    padding-left: 10px;
    min-width: 50px;
}

.input-elem>label {
    display: flex;
    align-items: center;
    border: solid 1px #b2b2b2;
    border-right: none;
    padding-left: 10px;
    padding-right: 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

button.delete-probe {
    background: #d21818;
    border: solid 1px #d21818;
    border-radius: 3px;
    font-size: 17px;
    color: white;
    padding: 8px 10px;
}

.danger-txt {
    color: #d21818;
}

#delete {
    background: #151515;
}

.code-area {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 100%;
    color: white;
}

.probe-modal .modal-window {
    width: 640px;
}

.input-elem>span {
    display: flex;
    align-items: center;
    border: solid 1px #b2b2b2;
    border-left: none;
    padding: 0px 10px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

button#more {
    background: #535353;
}

.interfaces>.buttons {
    flex-direction: column;
}

.side-by-side {
    display: flex;
}

.buttons button.active {
    background: #335bd0;
}

input[type="color"] {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

.buttons button:disabled {
    opacity: 0.2;
}

.left.yaml-conv {
    max-width: initial !important;
    flex: 1;
}

.container.yaml-conv>div {
    min-height: 400px;
}

.container.yaml-conv>div>textarea {
    height: 100%;
    background: #373737;
    color: white;
    padding: 15px;
}

span.title {
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
}

thead>tr>th {
    padding: 5px 15px;
    font-size: 16px;
    border-bottom: solid 1px white;
    color: white;
}

tbody>tr>td {
    padding: 5px 10px;
}

button.mqtt-connect {
    background: #335bd0;
    border: solid 1px #335bd0;
    border-radius: 3px;
    color: white;
    padding: 10px 10px;
}

.indicator {
    position: absolute;
    font-size: 90px;
    pointer-events: none;
    opacity: 0;
    transition: all .25s ease-in-out;
}

.indicator.left {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.indicator.rightt {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.indicator.top {
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.indicator.bottom {
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.indicator.visible {
    opacity: 1;
    transition: all 0.25s ease-in-out;
}

.modal-window>.title {
    text-align: center;
    font-size: 15px;
    margin-bottom: 3px;
}

.modal-window>.title.last {
    margin-bottom: 15px;
}

textarea,
pre {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

.tools-menu {
    width: 50px;
    background: #252525;
    border-right: solid 1px black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tool {
    height: 50px;
    border: none;
    margin-bottom: 2px;
    font-size: 30px;
    background: #4b4b4b;
    color: #e0e0e0;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

.tool.danger {
    color: #6d0000;
    transition: all .25s ease-in-out;
}

.tool.experimental {
    color: #cc7b00;
    transition: all .25s ease-in-out;
}

.tool:hover {
    color: #335bd0;
    transition: all .25s ease-in-out;
}

.tool.danger:hover {
    color: #6d0000;
    transition: all .25s ease-in-out;
}

.tool.experimental:hover {
    color: #cc7b00;
    transition: all .25s ease-in-out;
}

.tools-menu > div {
    display: flex;
    flex-direction: column;
}

.tools-menu > .top {
    flex:1;
}


.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    max-width: 180px;
    width: max-content;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 15px;

    font-size: 15px;
    left: 60px;
    transform: translateY(-50%);
    top: 50%;
   
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  .tooltiptext > i.fa-caret-left {
    position: absolute;
    left: 0;
    transform: translate(-75%,-50%);
    color: black;
    top: 50%;
}

.tool.active {
    background: #335bd0;
    color: white !important;
}

.rooms > .placeholder {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    color: #434343;
    position: absolute;
    pointer-events: none;
}

.separator {
    margin-top: 15px;
    margin-bottom: 15px;
}

.separator > span {
    width: 100%;
    height: 1px;
    background: white;
    display: block;
}

span.info-ft {
    text-align: center;
    margin-bottom: 15px;
    line-height: 23px;
}