.dialog{
  overflow: hidden;
  background-color: #5c8ab8;
  position: fixed;
  z-index: 17;
  display: grid;
  grid-template-rows: [start] 30px [content] auto [end];
  border-radius: 3px;
  border: 1px solid rgb(170, 170, 170);

  -webkit-animation: scale-in-center 0.2s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
  animation: scale-in-center 0.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}



@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes  scale-in-center {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
            opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
  }
}

.tiptool {
  background-color: #3720be;
  color:#000000;
  border-radius: 5px;
}

.dialog-content{
  grid-row: content / end;
  display: grid;
  position: relative;
  grid-template-rows: [start] 30px [tabs] auto [end];
  grid-template-columns: [start] auto [end];
  padding: 5px;
  overflow: hidden;
  z-index: 10;
}

.dialog-tabs{
  display: flex;
  gap: 5px;
  justify-content: left;
  grid-column: start / end;
}

.dialog-tab{
  cursor: pointer;
  padding: 10px;
  background-color: rgb(212, 212, 212);
  border: 1px solid grey;
  border-bottom: none;
}

.dialog-tab > label{
  display: block;
  cursor: pointer;
  height: 30px;
  font-size: 15px;
}

.dialog-tab-selected{
  background-color: #335b83;
  height: 10px;
  color: #ffffff;
  font-weight: bold;
}

.dialog-top-bar{
  height: 30px;
  background-color: #335b83;
  cursor: move;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.dialog-tab-content{
  /* box-shadow: inset rgb(0 0 0 / 24%) 0px 0px 4px 2px; */
  background-color: rgb(243, 243, 243);
  border: 1px solid grey;
  z-index: -1;
  grid-row: 2/3;
  grid-column: start / end;
  padding: 10px 5px;
  overflow-y: auto;
}

.dialog-top-bar > label{
  color: white;
  font-size: 17px;
  line-height: 31px;
  padding-left: 10px;
  top: -1px;
  cursor: move;
  position: relative;
  font-weight: 100;
}

.top-bar-items{
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 2px;
  padding: 2px;
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
}

.top-bar-items > *{
  cursor: pointer;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 1px;
  position: relative;
  line-height: 18px;
  font-size: 24px;
  font-family: sans-serif;
  margin: auto;
}

.close-btn{
  background-color: lightgrey;
  cursor: pointer;
} 

.small-btn{
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;

  line-height: 13px;
  margin: auto;
  padding: 0px;
}

.dialog-resize-bar{
  position: absolute;
  z-index: 40;
  opacity: 0%;
}

.dialog-resize-bar-x{
  grid-row: content / end;
  background: blue;
  cursor: col-resize;
  width: 8px;
  height: 100%;
}

.dialog-resize-bar-left{
  left: -2px;
}
.dialog-resize-bar-right{
  right: -2px;
}

.dialog-resize-bar-y{
  grid-row: start / end;
  background: orange;
  cursor: row-resize;
  width: 100%;
  height: 4px;
  bottom: -2px;
}

.dialog-resize-bar-y-top{
  top: -2px;
  width: calc(100% - 15px);
}
.dialog-resize-bar-y-bottom{
  bottom: -2px;
}

.dialog-resize-box{
  position: absolute;
  z-index: 40;
  opacity: 0%;
  background-color: blue;
  width: 10px;
  height: 10px;
}

.dialog-resize-box-top-right{
  top: -5px;
  right: -5px;
  cursor: ne-resize;
}

.dialog-resize-box-top-left{
  top: -5px;
  left: -5px;
  cursor: nw-resize;
}

.dialog-resize-box-bottom-right{
  bottom: -5px;
  right: -5px;
  cursor: se-resize;
}

.dialog-resize-box-bottom-left{
  bottom: -5px;
  left: -5px;
  cursor: sw-resize;
}