:root {
  --color1: #3d5a80;
  --color2: #0077b6;
  --color3: #293241;
  --color4: #ee6c4d;
  --color5: #82ce53ff;

  /* --color1: #3d5a80;
  --color2: #98c1d9;
  --color3: #e0fbfc;
  --color4: #ee6c4d;
  --color5: #293241; */

  --color6: #ddc2a5ff;
  --color7: #201e21ff;
  --color8: #e0aa6eff;
  --color9: #c83737ff;
  --color10: #a7beae;

  --clear-color: white;
}

/* @font-face {
  font-family: "Dosis-Regular";
  src: url(./assets/fonts/Dosis-Regular.ttf);
} */

@font-face {
  font-family: "Lato-Regular";
  src: url(./assets/fonts/Lato/Lato-Regular.ttf);
}

#pre-load {
  display: flex;
  flex-direction: column;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  z-index: 3000;
}

#pre-load > img {
  width: 180px;
}

body {
  padding: 0px;
  margin: 0px;
  background-color: var(--color3);
  font-family: "Lato-Regular";
}

.header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  max-height: 44px;
  overflow-y: visible;
  z-index: 500;
  background-image: linear-gradient(90deg, var(--color2) 70%, var(--color1));
  border-bottom: 4px solid var(--color4);
}

.header > .cont-left-space {
  height: 40px;
  width: 20px;
}

.header > .cont-logo {
  width: 60px;
  height: 70px;
  background-image: linear-gradient(
    var(--color2) 56px,
    rgba(255, 255, 255, 0.5)
  );
  margin: 0px;
  border-radius: 0px 0px 12px 12px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header > .cont-logo:hover {
  cursor: pointer;
  transition: 0.25s;
}

.header > .cont-logo > img {
  width: 40px;
  height: auto;
}

.header > .cont-logo:hover > img {
  transition: 0.25s;
  transform: scale(1.05);
}

.header > .cont-logo::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 40px;
  left: -12px;
  border-top-right-radius: 10px;
  box-shadow: 3px -3px 0px var(--color2);
}

.header > .cont-logo::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  top: 40px;
  right: -12px;
  border-top-left-radius: 10px;
  box-shadow: -3px -3px 0px var(--color2);
}

.header > .cont-title {
  flex: 1;
  height: 40px;
  padding: 0px 0px 0px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  color: var(--clear-color);
}

.header > .cont-title > .title-top {
  padding: 0px;
  margin: 0px;
}

.header > .cont-title > .title-top::before {
  content: "GEOMAP (Spasial Data Visual)";
  font-size: 11pt;
  font-weight: bold;
}

/* .header > .cont-title > .title-bottom {
	padding: 0px 0px 0px 0px;
	margin: -6px 0px 0px 0px;
}

.header > .cont-title > .title-bottom::before {
  content: "DISKOMINFOSANDI Kab. Poso";
  font-size: 10pt;
  font-weight: bold;
} */

.header > .cont-right-button {
  width: 60px;
  height: 40px;
  background-color: var(--color4);
  border-top-left-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}

.header > .cont-right-button::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -12px;
  width: 12px;
  height: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 4px 4px 0px var(--color4);
}

.header > .cont-right-button a {
  text-decoration: none;
}

.header > .cont-right-button .btn {
  height: 30px;
  width: 30px;
  background-color: var(--clear-color);
  vertical-align: middle;
  margin-top: 8px;
  margin: auto;
  border-radius: 50%;
  text-align: center;
  padding: 0px !important;
}

.header > .cont-right-button .btn::before {
  font-family: FontAwesome;
  content: "\f2c0";
  font-size: 14pt;
}

.cont-search-button {
  position: fixed;
  bottom: 0px;
  right: 0px;
  height: auto;
  width: 50px;
  background-color: var(--color4);
  border-radius: 25px 0px 0px 0px;
  z-index: 488;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0px 28px 0px;
  box-shadow: -1px 0px 4px var(--clear-color);
}

.cont-search-button::before {
  content: "";
  position: absolute;
  top: -16px;
  right: 0px;
  width: 16px;
  height: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 4px 4px 0px var(--color4);
}

.cont-search-button::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -16px;
  width: 16px;
  height: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 4px 4px 0px var(--color4);
}

.cont-search-button > .reload-button {
  width: 40px;
  height: 40px;
  background-color: var(--clear-color);
  border-radius: 50%;
  text-align: center;
  display: grid;
}

.cont-search-button > .reload-button::before {
  font-family: FontAwesome;
  font-size: 18pt;
  content: "\f021";
  color: var(--color1);
  position: relative;
  margin: auto;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cont-search-button > .reload-button.spin::before {
  animation-name: spin;
  animation-duration: 1s; /* Durasi putaran */
  animation-iteration-count: infinite; /* Ulangi terus menerus */
  animation-timing-function: linear; /* Putaran konstan */
}

.cont-search-button > .search-button {
  width: 40px;
  height: 40px;
  background-color: var(--clear-color);
  border-radius: 50%;
  text-align: center;
  display: grid;
}

.cont-search-button > .search-button::before {
  font-family: FontAwesome;
  font-size: 18pt;
  content: "\f00e";
  color: var(--color1);
  position: relative;
  margin: auto;
}

.cont-search-button > .search-button,
.cont-search-button > .reload-button {
  margin-bottom: 5px;
}

.cont-search-button > .search-button::before,
.cont-search-button > .reload-button::before {
  transition: 0.125s;
}

.cont-search-button > .search-button:hover::before,
.cont-search-button > .reload-button:hover::before {
  cursor: pointer;
  transition: 0.125s;
  transform: scale(1.05);
}

/* .cont-search-button:hover > .search-button {
  transition: 0.25s;
  transform: rotate(10deg), scale(1.05);
} */

.side-menu {
  position: absolute;
  width: 260px;
  height: calc(100vh - 44px);
  top: 44px;
  left: -260px;
  z-index: 490;
  transition: 0.25s;
  background-image: linear-gradient(90deg, var(--color2) 10%, var(--color7));
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: visible;
}

.bg-side-menu {
  display: none;
  visibility: hidden;
  z-index: 489;
}

.side-menu.show ~ .bg-side-menu {
  display: unset;
  visibility: visible;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(5px);
}

.side-menu > .cont-menu {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 50px 10px 10px 10px;
}

.side-menu > .cont-menu .cont-logo-employe {
  width: fit-content;
  height: fit-content;
  background-color: white;
  position: relative;
  padding: 8px;
  align-content: center;
  border-radius: 20px;
  display: flow;
  margin: auto;
}

.side-menu > .cont-menu .cont-name-employe {
  width: 100%;
  height: auto;
  font-size: 13pt;
  font-weight: bold;
  color: var(--clear-color);
  text-align: center;
  margin: 20px 0px 20px 0px;
  padding: 0px 6px 0px 6px;
  line-height: 16pt;
}

.side-menu > .cont-menu ul.cont-list-menu {
  list-style: none;
  padding: 6px 4px 12px 4px;
  background-color: var(--color1);
  border-radius: 0px 12px 12px 0px;
  position: relative;
  overflow-x: clip;
  margin-left: -8px;
  min-height: 50px;
}

ul.cont-list-menu > ul.cont-list-sub-menu {
  list-style: none;
  margin: 0px;
  height: 0px;
  width: 0px;
  overflow: hidden;
  padding-left: 20px;
  transition: 0.25s;
}

ul.cont-list-menu > ul.cont-list-sub-menu.expand {
  /* height: auto; */
  width: auto;
  transition: 0.25s;
}

ul.cont-list-menu > ul.cont-list-sub-menu.expand > li {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  height: auto;
  margin: 4px 0px 4px 0px;
  padding: 4px 2px 8px 0px;
  color: var(--clear-color);
  border-bottom: 1px solid var(--clear-color);
  border-bottom-right-radius: 8px;
}

ul.cont-list-sub-menu.expand > li:hover {
  cursor: pointer;
}

ul.cont-list-sub-menu.expand > li > .switch-check {
  height: auto;
  width: 14px;
  overflow: hidden;
  margin-right: 8px;
  position: relative;
  padding-top: 2px;
}

ul.cont-list-sub-menu.expand > li > .switch-check::before {
  font-family: FontAwesome;
  content: "\f096  \f046";
  font-size: 11pt;
  position: absolute;
  top: 2px;
  left: 0px;
  white-space: nowrap;
  transition: 0.25s;
}

ul.cont-list-sub-menu.expand > li > .switch-check.checked::before {
  transition: 0.25s;
  left: -15px;
}

ul.cont-list-sub-menu.expand > li > .icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: auto;
  width: auto;
  padding-top: 6px;
}

ul.cont-list-sub-menu.expand > li > .icon > .icon-item {
  height: 28px;
  width: 28px;
  margin-right: 6px;
  border-radius: 4px;
  padding: 2px;
  box-shadow: 2px 2px 4px var(--color1);
  background-color: white;
}

ul.cont-list-sub-menu.expand > li > .text {
  width: 194px;
}

ul.cont-list-sub-menu.expand > li > .text > .btn-just-this {
  height: 30px;
  width: 30px;
  background-color: var(--color2);
  border-radius: 50%;
}

.side-menu > .cont-menu ul.cont-list-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0px;
  width: 12px;
  height: 12px;
  border-bottom-left-radius: 11px;
  box-shadow: -4px 4px 0px var(--color1);
}

.side-menu > .cont-menu ul.cont-list-menu::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0px;
  width: 12px;
  height: 12px;
  border-top-left-radius: 11px;
  box-shadow: -4px -4px 0px var(--color1);
}

ul.cont-list-menu > li {
  margin: 4px 0px 4px 4px;
  padding: 4px 2px 4px 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  height: auto;
  color: var(--clear-color);
  list-style: none;
  align-items: center;
  border-left: 4px solid var(--color4);
}

ul.cont-list-menu > li:hover {
  cursor: pointer;
}

ul.cont-list-menu > li > .arrow {
  height: 18px;
  width: auto;
  margin-right: 8px;
  transition: 0.25s;
}

ul.cont-list-menu > li:hover > .arrow {
  transition: 0.25s;
  transform: rotate(90deg);
}

ul.cont-list-menu > li.expand > .arrow {
  transition: 0.25s;
  transform: rotate(180deg);
}

ul.cont-list-menu > li > .arrow::before {
  font-family: "FontAwesome";
  content: "\f078";
}

ul.cont-list-menu > li > .icon {
  width: 24px;
  height: auto;
  max-height: 24px;
  margin-right: 8px;
  background-color: white;
  border-radius: 4px;
  padding: 1px;
}

ul.cont-list-menu > li > .text {
  height: auto;
  flex: 1;
  margin-right: 8px;
}

/* ul.cont-list-menu > li > .switch {

} */

.side-menu > .cont-show-button {
  position: absolute;
  margin-top: auto;
  margin-bottom: auto;
  width: 50px;
  height: 50px;
  right: -50px;
  background-color: var(--color7);
  border-radius: 0px 25px 25px 0px;
  display: flex;
  align-items: center;
  align-content: center;
  align-self: center;
  box-shadow: 1px 0px 4px var(--clear-color);
}

.side-menu > .cont-show-button > .show-button {
  margin: auto;
  width: 40px;
  height: 40px;
  background-color: var(--color2);
  border-radius: 40px;
  position: relative;
  display: flex;
  justify-content: center;
  transition: 0.15s;
}

.side-menu > .cont-show-button:hover > .show-button {
  transition: 0.15s;
  transform: scale(1.025);
  cursor: pointer;
}

.side-menu > .cont-show-button > .show-button > .icon {
  margin: auto;
  color: var(--clear-color);
  font-size: 16pt;
  line-height: 12pt;
}

.side-menu > .cont-show-button > .show-button > .icon::before {
  font-family: FontAwesome;
  content: "\f0c9";
}

.side-menu.show > .cont-show-button > .show-button > .icon::before {
  font-family: FontAwesome;
  content: "\f053";
}

.side-menu > .cont-show-button::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0px;
  width: 20px;
  height: 20px;
  border-bottom-left-radius: 10px;
  box-shadow: -4px 4px 0px var(--color7);
}

.side-menu > .cont-show-button::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0px;
  width: 20px;
  height: 20px;
  border-top-left-radius: 10px;
  box-shadow: -4px -4px 0px var(--color7);
}

.side-menu.show {
  transition: 0.25s;
  transform: translateX(260px);
}

#peta-data-cont-base-fp {
  position: relative;
  width: 100%;
  height: calc(100vh - 44px);
  overflow-y: clip;
  /* background-color: yellow; */
}

#peta-data-cont-fp {
  z-index: 0;
  position: relative;
  height: 100%;
  width: 100%;
}

.cont-switch-layer-top-over {
  height: 38px;
  width: 100%;
  position: absolute !important;
  top: 0px;
  left: 0px;
}

.cont-switch-layer-top-over .os-scrollbar-horizontal {
  bottom: -2px;
}

.cont-switch-layer {
  position: absolute;
  width: auto;
  min-height: 30px;
  height: auto;
  left: 0px;
  bottom: 2px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.cont-switch-layer.top {
  position: absolute;
  width: auto;
  min-height: 30px;
  height: auto;
  left: 0px;
  padding-left: 90px;
  top: 2px;
  bottom: unset;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.cont-switch-layer .item {
  height: 30px;
  width: auto;
  margin-left: 8px;
  padding-right: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  width: auto;
  height: 100%;
}

.cont-switch-layer > .cont-item-left {
  left: 0px;
  height: auto;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  padding-left: 8px;
  z-index: 200;
}

.cont-switch-layer > .cont-item-left > .item-left {
  height: 24px;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  background-color: var(--color2);
  color: var(--color3);
  padding: 2px 8px 2px 8px;
  border-radius: 12px;
  margin-right: 8px;
  box-shadow: 1px 1px 4px black;
}

.cont-switch-layer > .cont-item-left > .item-left:hover {
  cursor: pointer;
  transition: 0.25s;
  color: white;
  background-color: var(--color3);
}

.cont-switch-layer > .cont-item-left > .item-left > .icon {
  font-size: 10pt;
  margin-right: 4px;
}

.cont-switch-layer > .cont-item-left > .item-left > .text {
  font-size: 10pt;
}

.cont-switch-layer .item .text {
  font-family: Dosis;
  font-size: 11pt;
  font-weight: bold;
  line-height: 20pt;
  letter-spacing: 1.2pt;
  color: white;
  white-space: nowrap;
  text-shadow: 1px 1px 0px black, -1px 1px 0px black, -1px -1px 0px black,
    1px -1px 0px black;
}

.cont-switch-layer .item .cont-toggle {
  height: 30px;
  min-width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 6px;
  transition: 0.5s;
}

.cont-switch-layer .item .cont-toggle .toggle {
  position: relative;
  height: 20px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color10);
  border-radius: 10px;
  box-shadow: 1px 1px 0px black, -1px 1px 0px black, -1px -1px 0px black,
    1px -1px 0px black;
}

.cont-switch-layer .item .cont-toggle .toggle:hover {
  cursor: pointer;
}

.cont-switch-layer .item .cont-toggle .toggle .button {
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: var(--color9);
  top: 0px;
  left: 0px;
  right: unset;
  transition: 0.5s;
}

.cont-switch-layer .item .cont-toggle .toggle .button.active {
  transition: 0.5s;
  transform: translateX(12px);
  background-color: var(--color1);
}

.cont-panel-data-features {
  display: none;
  visibility: hidden;
}

.cont-panel-data-features .panel-data-features {
  display: none;
  visibility: hidden;
}

.cont-panel-data-features.show {
  display: unset;
  visibility: visible;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 500;
}

.cont-panel-data-features.show::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 260px;
  width: 20px;
  height: 20px;
  border-top-right-radius: 20px;
  box-shadow: 5px -5px 0px 5px var(--clear-color);
}

.cont-panel-data-features.show::after {
  font-family: "fontAwesome";
  font-size: 16pt;
  content: "\f00d";
  color: var(--clear-color);
  position: absolute;
  top: 10px;
  right: 274px;
}

.cont-panel-data-features.show .panel-data-features {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  visibility: visible;
  position: relative;
  right: 0px;
  top: 0px;
  width: 260px;
  height: auto;
  padding: 16px;
  background-color: var(--clear-color);
  border-bottom-left-radius: 20px;
  float: right;
}

.cont-panel-data-features.show .panel-data-features::before {
  content: "";
  position: absolute;
  bottom: -20px;
  right: 0px;
  height: 20px;
  width: 20px;
  border-top-right-radius: 20px;
  box-shadow: 5px -5px 0px 5px var(--clear-color);
}

.my-hr {
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}

#btn-show-media {
  margin-bottom: 4px;
}

.cont-media-peta {
  display: none;
  visibility: hidden;
}

.cont-media-peta.show {
  display: flex;
  flex-direction: column;
  visibility: unset;
  position: fixed;
  overflow-y: auto;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1200;
}

.cont-media-peta.blur {
  transition: 0.3s;
  backdrop-filter: blur(6px);
}

.cont-media-peta.show > .top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 0px;
  overflow-y: visible;
  transition: 0.3s;
  z-index: 200;
}

.cont-media-peta.show > .top > .right {
  top: -50px;
  height: 50px;
  width: 50px;
  background-color: white;
  border-bottom-left-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

.cont-media-peta.blur > .top > .right {
  transition: 0.3s;
  top: 0px;
}

.cont-media-peta.show > .top > .right > .close-media {
  font-weight: bold;
  font-size: 16pt;
  color: black;
}

.cont-media-peta.show > .top > .right > .close-media:hover {
  cursor: pointer;
}

.cont-media-peta.show > .top > .right::before {
  position: absolute;
  left: -12px;
  top: 0px;
  width: 12px;
  height: 12px;
  content: "";
  border-top-right-radius: 12px;
  box-shadow: 12px -12px 0px 12px white;
}

.cont-media-peta.show > .top > .right::after {
  position: absolute;
  right: 0px;
  bottom: -12px;
  width: 12px;
  height: 12px;
  content: "";
  border-top-right-radius: 12px;
  box-shadow: 12px -12px 0px 12px white;
}

.cont-media-peta.show > .bottom {
  width: 100%;
  height: auto;
  overflow-y: auto;
  z-index: 100;
}

.cont-media-peta.show > .bottom > .my-row {
  padding-top: 60px;
  padding-bottom: 20px;
  max-width: 1250px;
  margin: auto;
}

.cont-media-peta.show > .bottom > .my-row > div.empty {
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  position: absolute;
  top: 50px;
  left: 0px;
  bottom: 0px;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.cont-media-peta.show > .bottom > .my-row > div.empty::before {
  font-size: 18pt;
  font-weight: bold;
  content: "Media Kosong";
  text-shadow: 2px 2px 2px black;
}

.cont-media-peta.show > .bottom > .my-row .box-media {
  margin: 14px 0px 14px 0px;
  height: 0px;
  padding-top: 100%;
  position: relative;
}

.cont-media-peta.show > .bottom > .my-row .box-media > .box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0px;
  height: 0px;
  background-color: rgba(0, 0, 0, 0.65);
  border: 1px solid white;
  border-radius: 16px;
  transition: 0.2s;
  overflow: hidden;
}

.cont-media-peta.show > .bottom > .my-row .box-media > .box.expand {
  transition: 0.2s;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

/* .my-row .box-media > .box a {
  text-decoration: none;
} */

.my-row .box-media > .box .media-cont {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
}

.my-row .box-media > .box .media-cont > .text-label {
  top: 12px;
  left: 40px;
  width: auto;
  height: auto;
  position: absolute;
  font-size: 11pt;
  color: white;
  text-shadow: 2px 2px 2px black;
  right: 12px;
  line-height: 13pt;
  font-weight: bold;
  z-index: 100;
}

.my-row .box-media > .box .media-cont:hover {
  cursor: pointer;
}

.my-row .box-media > .box .media-cont:hover .item-vid img {
  transition: 0.25s;
  transform: scale(1.05);
}

.my-row .box-media > .box .media-cont:hover .item-img img {
  transition: 0.25s;
  transform: scale(1.05);
}

.my-row .box-media > .box .media-cont:hover .item-link img {
  transition: 0.25s;
  transform: scale(1.05);
}

.my-row .box-media > .box .media-cont > .item-add {
  width: 80px;
  height: 80px;
  background-color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border-radius: 80px;
}

.my-row .box-media > .box .media-cont:hover > .item-add {
  transition: 0.25s;
  transform: scale(1.05);
}

.my-row .box-media > .box .media-cont > .item-add::before {
  font-family: "fontAwesome";
  content: "\f055";
  font-size: 50pt;
  line-height: 0pt;
  color: var(--color2);
}

.label-shape-map {
  /* font-family: Dosis-Bold; */
  font-size: 10pt;
}

.label-shape-map td {
  padding: 2px;
}

.info-vertex .row-cont-button {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.info-vertex .row-cont-button > .vert-button {
  width: 36px;
  height: 36px;
  border-radius: 36px;
  outline: none;
  border: 1px solid black;
  margin: 0px 6px 4px 0px;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
  align-items: center;
  font-size: 14pt;
}

.info-vertex .row-cont-button > .vert-button:hover {
  transition: 0.25s;
  transform: scale(1.055);
}