@font-face {
  font-family: "Bebas";
  src: url("./../css/Bebas_Neue.ttf");
  font-style: normal;
  font-weight: normal;
}

/* Responisve FlexBox layout main guides */
/* https://www.w3schools.com/css/css3_flexbox_responsive.asp */

body {

  margin: 0px;
  height: 100%;

  font-family: 'Bebas';
  font-weight: bold;

  background-color: #4f7090;
}



.head_bg_l {}

.head_bg_r {}

.img_head {
  height: fit-content;
  padding: 5px;
}

.flex_row {
  display: flex;
  /* root flex container */
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.new_head {
  font-size: x-large;

  margin: 0;
  background-color: lightblue;
  min-height: 200px;

  background-image: url('./../img/header_solid.jpg');
  background-size: cover;
  background-position: center;
  background-position-y: -70px;
}


.new_cell {
  flex-grow: 1;
  display: flex;
  /* header 1st level flex container */
  flex-direction: row;
  align-items: baseline;
}

.new_logo {
  align-self: center;
  width: 120px;
}

.new_title {
  flex-grow: 1;
  padding: 5px;
}

.new_title_l {
  align-self: flex-start;
}

.new_title_r {
  align-self: flex-start;
}

.new_menu {
  margin: 5px;
  align-self: flex-start;
  margin-right: 0px;
}

.new_map {
  margin: 3px;
  flex-grow: 1;
  text-align: center;
  font-weight: bold;
  background-color: lightskyblue;
  width: 100%;
  border-radius: 15px;

}

#cesiumContainer {
  display: none;
  height: 95vh;
  border-radius: 15px;
  /* VH - viewport height */
}

.cesium-viewer {
  border-radius: 0px 10px 10px 0px;
}

#map_arcgis {
  border-radius: 0px 10px 10px 0px;
}

.new_doc {
  margin: 5px;
  flex-grow: 1;
  border-radius: 15px;
  background-color: #dbc9b5;
  display: none;

  border-radius: 0px 15px 15px 0px;
  margin-left: 0px;
}

.new_doc_title {
  align-self: center;
  font-size: 18pt;
  padding: 5px;
}

.blue_border {
  border-width: 5px;
  border-style: solid;
  border-color: #4f7090;
}

.blue_border_menu {
  border-right: 0px;
  border-radius: 15px 0px 0px 15px;
  margin-right: 0px !important;
  position: relative;
  top: -1px;
}

.page_block {
  min-height: 770px;
}

.data_text {
  background-color: rgb(240, 248, 255);
  border-radius: 0px 0px 10px 0px;
}

#pdf_card{
  width: 100%;

  border: 0px;
  border-radius: 10px;
}

#pdf_card>table {
  width: 100%;
}

.cesium-infoBox-iframe {
 background-color: white;
 text-align: center;
}


.menuA_White {
  /* смещение-x | смещение-y | радиус-размытия | цвет */
  text-shadow: 1px 1px 2px black;
  color: white;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: black;
}

.menuA_Black {
  /* смещение-x | смещение-y | радиус-размытия | цвет */
  text-shadow: 1px 1px 2px white;
  color: black;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: silver;
}

.menuA_Selected {
  background-color: rgba(255, 234, 118, 0.3);
  background-blend-mode: color-burn;
}

.menuB {

  width: 90%;
  display: block;

  text-align: center;
  padding: 3px;
  
  font-size: 14pt;
  margin: 1px;

  border-radius: 5px;
  border-color: azure;
  border-style: solid;
  border-width: 3.5px;
}
.menuB:link {
  text-decoration: none;
  color: white;
}
.menuB:visited {
  text-decoration: none;
  color: white;
}
.menuB:hover {
  color: white;
  text-decoration: none;
  background-color: rgba(255, 234, 118, 0.7);
  background-blend-mode: lighten;
}

.backToMap {
  cursor: pointer;
}

.backToMap:hover {
  color: red;
}


@import url(./bucket.css);

#toolbar {
  position: absolute;
  background: rgba(42, 42, 42, 0.8);
  padding: 4px;
  border-radius: 4px;
  color: aliceblue;
}

#toolbar input {
  vertical-align: middle;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 130px;
}

#toolbar h3,
h4 {
  margin: 5px;
}



.img_outline {
  filter:
    /*  Each shadow becomes part of the image and the next filter
        adds a shadow beneath it, so we have to be very careful. */
    drop-shadow(0 -1px 0 black) drop-shadow(0 1px 0 black) drop-shadow(-1px 0 0 black) drop-shadow(1px 0 0 black);
}

@media (max-width:595px) {
  .new_menu {
    flex-grow: 1;
  }

  .menuA {
    background-size: 30%;
  }
}

@media screen and (max-width: 908px) {
  .new_head {
    background-position-y: 0px;
  }
}