@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

html {
  height: 100%;
}
body {
  height: 100%;
}
#app {
  height: 100%;
}

.scrollvert {
  overflow-y: scroll;
}
.scrollhor {
  overflow-x: scroll;
}
.scrollhw {
  overflow-x: scroll; overflow-y: scroll;
}

.fixsizevert {
  display: block; width: 100%; height: 50vh;
}

.autopos {
  position: relative;
}

.logofon1 {
  background-image: url('/images/ZastSk1.jpg'); background-size: cover;
}
.he100 {
  height: 100%;
}
.width100 {
  width: 100%;
}
.width99 {width: 99%;}
.width90 {width: 90%;}
.width80 {width: 80%;}
.width75 {width: 75%;}
.width70 {width: 70%;}
.width60 {width: 60%;}
.width50 {width: 50%;}
.width40 {width: 40%;}
.width30 {width: 30%;}
.width25 {width: 25%;}
.width20 {width: 20%;}
.width10 {width: 10%;}

.fullPage {
  display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap;
}

.mainst {
  display: block; box-sizing: border-box;
}

.btTableCell {
  box-sizing: border-box; cursor: pointer;
  text-align: center; vertical-align: middle;
  border-radius: 0.25rem; padding-left: 5px; padding-right: 5px;
  background-color: transparent; border: 1px solid #CDCBA6; color: black;
}
.btTableCell:hover {
  border: 1px solid #9B9E84; background-color:#F2F3ED; color: #212121;
}
.btTableCell:disabled {
  border: 1px solid #D0D0D0; background-color: #E5E5E5; color: #D0D0D0;
}
.btTableCell:active {
  border: 1px solid #9B9E84; background-color:#FFFFFF; color: #DDDDDD;
}

.infotable {
  border: none;
}
.infotable > tr {
  border: 1px solid #d2d6dc;
}
.infotable > tr > th {
  border: 1px solid #d2d6dc; background-color: #F2F3ED;
  font-style: bold; font-size: 1rem;
}
.infotable > tr > td {
  border: 1px solid #d2d6dc;
  padding-left: 5px; font-size: 1rem;
}

.infotable > tbody > tr {
  border: 1px solid #d2d6dc;
}
.infotable > tbody > tr > th {
  border: 1px solid #d2d6dc; background-color: #F2F3ED;
  font-style: bold; font-size: 1rem;
}
.infotable > tbody > tr > td {
  border: 1px solid #d2d6dc;
  padding-left: 5px; font-size: 1rem;
}

.toolButton {
  display: inline-block; padding-left: 8px; padding-right: 8px;
  border: 2px solid #CDCBA6;
  border-radius: 5px; background-color: white;
}
.toolButton:hover {
  display: inline-block;
  border: 2px solid #9B9E84;
  border-radius: 5px; background-color:#F2F3ED;
  box-shadow: 10px 5px 5px silver;
}
.toolButton:active {
  display: inline-block;
  border: 2px solid #9B9E84;
  border-radius: 5px; background-color: silver; color: #DDDDDD;
}
.toolButton:disabled {
  display: inline-block; border-radius: 5px; 
  background-color: #9e9e9e; border: 2px solid #515251;
}
.toolButton:disabled:hover {
  display: inline-block; border-radius: 5px; 
  background-color: #9e9e9e; border: 2px solid #515251;
  box-shadow: none;
}
.toolButton:focus {
  display: inline-block; border-radius: 5px; 
  background-color: white; border: 2px solid #CDCBA6;
} 

/* Кнопка на заголовке окна диалога */
.btn-smd {
  cursor: pointer; display: inline-block; text-align: center; padding-left: 5px; padding-right: 5px;
  vertical-align: middle; font-size: 1rem; box-sizing: border-box; border-radius: .25rem; border-width: 1px;
  border-color: #CDCBA6; background-color: #FFFFFF; color: #212529; 
}
.btn-smd:hover {
  border-color: #9B9E84; background-color:#F2F3ED; color: #212121; border-width: 1px;
}
.btn-smd:active {
  border-width: 1px; color: #DDDDDD;
}
.btn-smd:disabled {
  border-color: #CCCCCC; background-color: #EEEEEE; color: #777777;
}
.btn-smd-close {
  cursor: pointer; display: inline-block; text-align: center; padding-left: 5px; padding-right: 5px;
  vertical-align: middle; font-size: 1rem; box-sizing: border-box; border-radius: .25rem; border-width: 1px;
  border-color: #CDCBA6; background-color: #FFFFFF;  color: #212529; font-weight:normal;
}
.btn-smd-close:hover {
  border-color: #FF0000; background-color:#F2F3ED; color: #BF3030; border-width: 1px; font-weight: bold;
}
.btn-smd-close:active {
  border-width: 1px; color: #ff7777;
}
.btn-smd-close:disabled {
  border-color: #CCCCCC; background-color: #EEEEEE;  color: #777777;
}

/* Элементы окна диалога */
.dialogDivHeader {
  display: flex; flex-direction: row; flex-wrap: nowrap; 
  justify-content: space-between;
  border-bottom: 1px solid gray;
  box-sizing: border-box;
  width: 100%; height: 40px;
  padding: 5px 5px 5px 5px;
}

/* Элементы ввода */
.profileInput {
  border-radius: 0.25rem; border: 1px solid #CDCBA6;
  padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px;
}
.profileInput:hover {
  border-radius: 0.25rem; border: 1px solid #9B9E84;
}
.profileInput:disabled {
  border-radius: 0.25rem; border: 1px solid #D0D0D0;
}
.profileInput:active {
  border-radius: 0.25rem; border: 1px solid #CDCBA6;
}
.profileInput:focus {
  border-radius: 0.25rem; border: 2px solid #CDCBA6;
}

.profileInputCenter {
  border-radius: 0.25rem; border: 1px solid #CDCBA6; text-align: center;
}
.profileInputCenter:hover {
  border-radius: 0.25rem; border: 1px solid #9B9E84; text-align: center;
}
.profileInputCenter:disabled {
  border-radius: 0.25rem; border: 1px solid #D0D0D0; text-align: center;
}
.profileInputCenter:active {
  border-radius: 0.25rem; border: 1px solid #CDCBA6; text-align: center;
}
.profileInputCenter:focus {
  border-radius: 0.25rem; border: 2px solid #9B9E84; text-align: center;
}

.bolder {
  font-weight: bold;
}
.noselect {
  user-select: none;
}

.fontStroke {
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}

.stDisaster { color: #FF2225; }
.stAllowRed { color: #e91e63; }
.stBun {color: #4070ff;}
.stNoLink { color: #EEEEEE; }
.stOffTraf { color: #999999; }
.stYellowTraf { color: #FFCA28; }
.stAutoProgram { color: #76ff03; }
.stAutoControl { color: #558b2f; }
.stAutomationProgram { color: #76ff03; }
.stAutomationControl { color: #558b2f; }
.stCUProgram { color: #00e5ff; }
.stCUCoordUpr { color: #039be5;}
.stCUAdaptiv { color: #81d4fa; }
.stCUPhase { color: #7c4dff; }

.stAutoProgram { color: #76ff03; }
.stAutoControl { color: #558b2f; }
.stIngOffTraf { color: #999999; }
.stIngYellowTraf { color: #FFCA28; }
.stIngAllowRed { color: #e91e63; }
.stCenterCircleRed { color: #e91e63; }
.stCenterUProgram { color: #76ff03; }
.stCenterUControl { color: #558b2f; }
.stCenterUAutoUpr { color: #00e5ff; }
.stCenterUPhase { color: #7c4dff; }
.stVPUAllowRed { color: #e91e63; }
.stVPUOffTraf { color: #999999; }
.stVPUYellowTraf { color: #FFCA28; }
.stVPUCUPhase { color: #7c4dff; }
.stEchoOnly { color: #FFCA28; }


div .leaflet-control-attribution .leaflet-control {
  display: none;
}
svg .leaflet-attribution-flag {
  display: none;
}

.handcur {
  cursor: pointer;
}
.togglemark {
  display: block; box-sizing: border-box; border: 1px dotted #d2d2d2; cursor: pointer; flex-shrink: 0;
}
.flexwrap {
  flex-wrap: wrap;
}

.navstmin {
  width: 30px;
}
.mainstmin {
  width: calc(100% - 30px);
}

.fsection {
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;
}

.margin-left-5 {
  margin-inline-start: 1rem;
}

@media (min-width: 480px) {
  .navst {
    width: 50%;
  }
  .mainst {
    width: 50%;
  }
  .bolder {
    font-size: 12px;
  }
  .headCaption {
    font-size: 12px;
  }
  .text-xs2 {
    font-size: 0.73rem;
  }
  .text-sm2 {
    font-size: 0.73rem;
  }
  .smmlborder {
    margin-left: 0.4rem;
  }
  .widthrescontrol {
    display: inline-block; width:55%;
  }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
  .navst {
    width: 45.14%;
  }
  .mainst {
    width: 54.86%;
  }
  .bolder {
    font-size: 13px;
  }
  .headCaption {
    font-size: 13px;
  }
  .text-xs2 {
    font-size: 0.73rem;
  }
  .text-sm2 {
    font-size: 0.75rem;
  }
  .smmlborder {
    margin-left: 0.5rem;
  }
  .widthrescontrol {
    display: inline-block; width:55%;
  }
}

@media (min-width: 640px) {
  .navst {
    width: 45%;
  }
  .mainst {
    width: 55%;
  }
  .bolder {
    font-size: 13px;
  }
  .headCaption {
    font-size: 13px;
  }
  .text-xs2 {
    font-size: 0.73rem;
  }
  .text-sm2 {
    font-size: 0.75rem;
  }
  .smmlborder {
    margin-left: 0.5rem;
  }
  .widthrescontrol {
    display: inline-block; width:60%;
  }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  .navst {
    width: 42%;
  }
  .mainst {
    width: 58%;
  }
  .bolder {
    font-size: 16px;
  }
  .headCaption {
    font-size: 16px;
  }
  .text-xs2 {
    font-size: 0.8rem;
  }
  .text-sm2 {
    font-size: 0.85rem;
  }
  .smmlborder {
    margin-left: 0.7rem;
  }
  .widthrescontrol {
    display: inline-block; width:65%;
  }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .navst {
    width: 34%;
  }
  .mainst {
    width: 66%;
  }
  .bolder {
    font-size: 18px;
  }
  .headCaption {
    font-size: 18px;
  }
  .text-xs2 {
    font-size: 0.83rem;
  }
  .text-sm2 {
    font-size: 0.875rem;
  }
  .smmlborder {
    margin-left: 0.7rem;
  }
  .widthrescontrol {
    display: inline-block; width:65%;
  }
}

@media (min-width: 1000px) {
  .navst {
    width: 35%;
  }
  .mainst {
    width: 65%;
  }
  .bolder {
    font-size: 18px;
  }
  .headCaption {
    font-size: 18px;
  }
  .text-xs2 {
    font-size: 0.83rem;
  }
  .text-sm2 {
    font-size: 0.875rem;
  }
  .smmlborder {
    margin-left: 0.8rem;
  }
  .widthrescontrol {
    display: inline-block; width:65%;
  }
}

@media (min-width: 1200px) {
  .navst {
    width: 28%;
  }
  .mainst {
    width: 72%;
  }
  .bolder {
    font-size: 18px;
  }
  .headCaption {
    font-size: 18px;
  }
  .text-xs2 {
    font-size: 0.83rem;
  }
  .text-sm2 {
    font-size: 0.875rem;
  }
  .smmlborder {
    margin-left: 0.8rem;
  }
  .widthrescontrol {
    display: inline-block; width:65%;
  }
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1600px) {
  .navst {
    width: 22%;
  }
  .mainst {
    width: 78%;
  }
  .bolder {
    font-size: 18px;
  }
  .headCaption {
    font-size: 18px;
  }
  .text-xs2 {
    font-size: 0.83rem;
  }
  .text-sm2 {
    font-size: 0.875rem;
  }
  .smmlborder {
    margin-left: 0.9rem;
  }
  .widthrescontrol {
    display: inline-block; width:65%;
  }
}