@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap");

/*--- Kullanılan renkler ---*/

:root {
  --primary-color: #343a40;
  --secondary-color: #ffb627;
  --left-menu-background: #bbb;
  --search-container: #4d4c4c;
  --search-background: #f8f8f8;
  --navigaton-button: #4f4f4f;
  --form-border: #e4e4e4;
}

div.dt-buttons {
  display: block;
}

button.dt-button.buttons-excel.buttons-html5,
button.dt-button.buttons-csv.buttons-html5,
button.dt-button.buttons-pdf.buttons-html5,
button.dt-button.buttons-print,
button.dt-button {
  width: 36px;
  height: 38px;
  border: solid 1px gray;
  background: #efefef;
  border-radius: 3px;
}

/*Kullanılan renkler >>> SON */

/* Başlangıç CSS 

Bootstrap'in kendisinden gelen düzenlemeler ile çakışma oluyor. 
Bu çakışmayı aşabilmek için bazı değişkenleri !important etiketi ile
override etmem gerekti. Tüm hizalama işlemleri flexbox yapısı kullanılarak yapıldı.
Hizala aşamasında bootstrap'in herhangi bir hazır class'ı kullanılmadı.
'*/

a,
a:visited,
a:active {
  color: white;
  text-decoration: none !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif !important;
  font-size: 12px !important;
  margin: 0;
  padding: 0;
}

button,
textarea,
input,
select {
  font-family: "Open Sans", sans-serif !important;
}

label {
  font-weight: 400;
}

img {
  cursor: pointer;
}

.disable-select {
  user-select: none;
  /* supported by Chrome and Opera */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
}

/*--- sol menü---*/

.main-menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  z-index: 2;
}

.main-menu div {
  border-radius: 10px;
  width: 32%;
  /*124px;*/
  height: 42px;
  background-color: var(--primary-color);
  font-weight: 600;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  align-items: center;
  z-index: 2;
}

.main-menu div a {
  height: 100%;
  width: 100%;
  display: block;
  display: flex;
  justify-content: center;
}

.main-menu div a span {
  align-self: center;
}

.main-menu img {
  position: relative;
  top: -2px;
}

.main-menu div:hover {
  background-color: orange !important;
}

.help-container {
  color: white;
  /*padding: 0px 10px;*/
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
}

.help-container div:first-child {
  width: 100%;
  height: 42px;
  display: block;
  display: flex;
  justify-content: center;
}

.help-container div:first-child span {
  position: relative;
  top: 8px;
  margin-left: 10px;
}

.aixm-container a:hover,
.help-container a:hover,
.suas-access a:hover,
.quick-access a:hover {
  color: orange;
  /*background-color: orange;*/
}

.aixm-container a,
.help-container a,
.suas-access a,
.quick-access a {
  display: block;
  width: 100%;
  height: 100%;
  /*letter-spacing: 2px;*/
  font-weight: 600;
}

.help-container a span {
  align-self: center;
}

.quick-container {
  color: white;
  /*padding: 0px 10px;*/
  width: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
}

.quick-container a:hover {
  color: orange;
  /*background-color: orange;*/
}

.quick-container a {
  display: block;
  width: 100%;
  height: 100%;
  letter-spacing: 2px;
  font-weight: 600;
}

.quick-container a span {
  align-self: center;
}

/*--- sol menü >>> SON ---*/

/*--- search container ---*/

.search-container {
  /*width: 900px;*/
  width: 950px;
  height: 48px;
  float: right;
  z-index: 1;
  background-color: var(--search-container);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .search-container {
    width: 400px;
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .search-container {
    width: 400px;
    /*flex-direction: column;*/
  }
}

.search-container div {
  width: 300px;
  height: 45px;
  z-index: 1;
  float: right;
}

@media screen and (max-width: 767px) {
  .search-container div {
    margin-left: 100px;
  }
}

.search-container div label {
  display: flex;
}

.search-text-label {
  border-radius: 4px 0 0 4px;
}

.search_click {
  position: fixed;
  /*margin-left: 70%;*/
  margin-top: 4px;
  height: 45px;
  width: 45px;
  border-radius: 4px 4px 4px 4px;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 1;
  background-color: orange;
  right: 3px;
}

.search_click i {
  margin-top: 10%;
  margin-left: 5%;
  font-size: 24px !important;
  color: #343a40;
  font-weight: bold;
}

.search-text-label2 {
  position: relative !important;
  left: -3px;
  margin-top: 4px;
  height: 38px;
  padding: 0 14px;
  border-radius: 0 4px 4px 0;
  outline: none;
  border: none;
  cursor: pointer;
}

.search {
  z-index: 2;
  height: 38px;
  width: 97%;
  margin-left: 5px;
  margin-top: 4px;
  border-radius: 4px;
  border: none;
  padding: 0;
  background-color: var(--search-background);
  outline: none;
}

#airport-search {
  color: #999;
}

.airport-text {
  font-weight: 600;
  cursor: pointer;
}

#lat-long-search:focus {
  border: 1px solid var(--secondary-color);
}

/*--- search container SON ---*/

/*--- profile ---*/

#profile {
  display: flex;
  flex-direction: column;
  /*height: auto;*/
  padding-bottom: 10px;
  margin-top: 10px;
  text-align: center;
  background-color: #2b2b2b;
  color: white;
  margin-bottom: 10px;
}

.profile-content {
  margin-top: 10px;
}

.profile-content2 {
  margin-bottom: 10px;
}

#user-name {
  font-size: 1.2em;
  letter-spacing: 2px;
  font-weight: 600;
}

#expire-date {
  font-size: 0.9em;
}

/* açılışta kapalı gelecek */
#admin-func {
  display: none;
}

#admin-func-foruser {
  display: none;
}

#profile button {
  background-color: inherit;
  border: none;
  cursor: pointer;
}

#profile-picture {
  height: 18%;
  width: 18%;
  border-radius: 50%;
  /*border: 2px solid white;*/
  position: relative;
}

/*--- profile SON ---*/

/*--- Navigation ---*/

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 14px 20px;
}

.header2 {
  justify-content: flex-end;
  align-items: center;
  padding: 5px;
}

@media screen and (max-width: 653px) {
  .header2 {
    padding: 9px;
  }
}

.nav-links {
  list-style: none;
}

.nav-links li {
  display: block;
  padding: 0px 6px;
}

.nav-links li a {
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-color);
  text-decoration: none;
  list-style-type: none;
  padding: 8px;
  transition: all 0.3s ease 0s;
  border-radius: 4px;
}

.nav-links li a:hover {
  background-color: var(--primary-color);
  color: white;
}

@media screen and (max-width: 768px) {
  .nav-links li {
    display: block;
  }
}

.active2 {
  background-color: var(--primary-color);
  color: white !important;
}

/*--- Navigation SON ---*/

/*--- Hızlı Erişim Menüsü ---*/
.quick-access {
  padding: 10px 0px;
  width: auto;
  background-color: var(--primary-color);
  font-weight: 600;
  /*letter-spacing: 2px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.quick-access.active {
  background-color: orange;
  color: var(--navigaton-button) !important;
}

.quick-access span {
  /*color: var(--primary-color);*/
  color: #fff;
}

.quick-access a {
  margin-left: 10px;
}

.quick-access-menu {
  height: auto;
  background-color: white;
  margin-left: 15px;
  margin-right: 10px;
  margin-top: 10px;
  border: none;
  display: none;
}

.quick-access-btn.active {
  width: 70%;
  /*sağdan çıkan nesne*/
  color: var(--primary-color) !important;
  background-color: orange;
}

.quick-access-menu div {
  margin-bottom: 8px;
}

.quick-access-menu.show {
  display: block;
  background-color: orange;
}

/*--- Hızlı Erişim Menüsü SON---*/

/*SUAS*/
.tab-suas {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  /*  border-radius: 5px;*/
  /*background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab-suas span {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
  transition: 0.3s;
  font-size: 12px;
  width: 50%;
  height: 100%;
  border-radius: 5px;
  text-align: center;
}

/* Change background color of buttons on hover */
.tab-suas span:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab-suas span.active {
  background-color: #ccc;
}
.active-menu-suas {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 18px solid white;
  position: relative;
  left: 0px;
  margin-top: -7px;
  transition: left 0.4s ease;
  display: none;
  z-index: -1;
}

.active-menu-suas.suasmenu {
  left: 40%; /*312px;*/
  display: block;
}
.suas-access {
  padding: 10px 0px;
  width: auto;
  /*background-color: var(--primary-color);*/
  background-color: #00b2ee;
  font-weight: 600;
  /*letter-spacing: 2px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}

.suas-access.active {
  background-color: orange;
  color: var(--navigaton-button) !important;
}

.suas-access span {
  /*color: var(--primary-color);*/
  /*color: #fff;*/
  color: #fff;
}

.suas-access a {
  margin-left: 10px;
}

.suas-access-menu {
  height: auto;
  background-color: white;
  margin-left: 15px;
  margin-right: 10px;
  margin-top: 10px;
  border: none;
  display: none;
}

.suas-access-btn.active {
  width: 70%; /*sağdan çıkan nesne*/
  color: var(--primary-color) !important;
  background-color: orange;
}

.suas-access-menu div {
  margin-bottom: 8px;
}

.suas-access-menu.show {
  display: block;
  background-color: orange;
}
.suas-container {
  background-color: white;
  height: auto;
  padding: 10px;
  display: none;
  margin-top: -2px;
}

.suas-container.show {
  display: block;
}

.suas-container div {
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
}

.suas-container > span {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-left: 10px;
}
.suas-container img {
  float: left;
  margin-left: 2%; /*10px;*/
  height: 90%;
}

.suas-container div span {
  /*border: 1px solid orange;*/
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  /*margin-left: 10px;*/
}

.suas-container button {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  padding: 5px 0px 5px 0px;
  width: 50%; /*70px;*/
  height: 40px;
  /*    margin-left: 5%; 10px
        margin-right: 5%;*/
  margin-top: 10px;
  cursor: pointer;
}
/*SUAS*/

.quick-menu {
  height: auto;
  background-color: orange;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px 10px 10px 10px;
  border: none;
  display: block;
}

.quick-menu button {
  display: block;
  border: none;
  cursor: pointer;
  background-color: inherit;
  font-size: 1em;
  text-align: left;
  margin-bottom: 5px;
  color: var(--secondary-color);
}

.quick-menu div {
  font-size: 13px;
}

.quick-menu {
  display: none;
}

.quick-menu button img {
  height: 16px;
  position: relative;
  top: -2px;
}

.quick-menu div > img {
  height: 16px;
  position: relative;
  top: -5px;
}

/*AIXM Menüsü*/
.aixm-container {
  align-self: center;
  margin-top: 10px;
  /*padding: 10px 0px;*/
  width: auto;
  background-color: var(--primary-color);
  font-weight: 600;
  /*letter-spacing: 2px;*/
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}

.aixm-container.active {
  background-color: white;
  color: var(--navigaton-button) !important;
}

.aixm-container span {
  color: var(--primary-color);
}

.aixm-container a {
  margin-left: 10px;
}

.aixm-container-menu {
  height: auto;
  background-color: white;
  margin-left: 15px;
  margin-right: 10px;
  margin-top: 10px;
  padding-bottom: 10px;
  border: none;
  display: none;
}

.aixm-container-btn.active {
  width: 70%;
  /*sağdan çıkan nesne*/
  color: var(--primary-color) !important;
  background-color: white;
}

.aixm-container-menu div {
  margin-bottom: 8px;
  text-align: center;
}

.aixm-container-menu.show {
  display: block;
  background-color: white;
}

/*AIXM Menüsü*/

/*--- Yardım Menüsü ---*/
.help-menu {
  height: auto;
  background-color: var(--primary-color);
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0 10px 10px 10px;
  border: none;
  display: block;
}

.help-menu button {
  display: block;
  border: none;
  cursor: pointer;
  background-color: inherit;
  font-size: 1em;
  text-align: left;
  margin-bottom: 5px;
  color: var(--secondary-color);
}

.help-menu div {
  font-size: 13px;
}

.help-menu {
  display: none;
}

.help-menu button img {
  height: 16px;
  position: relative;
  top: -2px;
}

.help-menu div > img {
  height: 16px;
  position: relative;
  top: -5px;
}

#first-question,
#second-question,
#last-question {
  display: none;
  font-size: 13px;
  margin-left: 18px;
}

#first-question.show,
#second-question.show,
#last-question.show {
  display: block;
}

/*--- Yardım Menüsü SON---*/

@media screen and (max-width: 700px) {
  .photo {
    margin-left: -40%;
  }
}

@media screen and (width: 280px) {
  .photo {
    margin-left: -65%;
  }
}

@media screen and (width: 768px) {
  .photo {
    margin-left: -50%;
  }
}

/*--- İkonlar ---*/
.broom-stick {
  cursor: pointer;
  height: 20px !important;
  position: relative;
  left: 20px;
}

.star-icon {
  margin-left: 30px;
  margin-top: 26px;
}

#settings-button {
  float: right;
  margin-right: 10px;
}

#aerodromes-info-button {
  float: right;
  margin-right: 5px;
  margin-top: 2px;
}

#team-register-button {
  float: right;
  margin-right: 10px;
}

#admin-button {
  float: left;
  margin-left: 10px;
}

#user-button {
  float: left;
  margin-left: 10px;
}

#thunder-icon {
  float: right;
  width: 12px;
  height: auto;
  margin-right: 16px;
  margin-top: 1px;
}

#refresh-icon {
  float: right;
  margin-right: 10px;
  cursor: pointer;
}

#bell-icon {
  float: left;
  margin-left: 10px;
}

#bell-icon2 {
  float: left;
  margin-left: 10px;
}

#edit-icon {
  height: 16px;
  width: 16px;
}

#renew-icon {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

#info-icon {
  float: right;
  margin-top: 5px;
  margin-right: 5px;
}

.help-icon {
  float: right;
  margin-right: 5px;
  margin-top: 2px;
  width: 16px;
}

.info-icon {
  float: right;
  margin-right: 5px;
  margin-top: 2px;
}

/*--- İkonlar SON ---*/

/* ---- Modal ----*/
.harita-evi-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 400px;
  height: 320px;
  top: 30%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.harita-evi-modal.show {
  display: block;
}

@media screen and (max-width: 700px) {
  .harita-evi-modal {
    left: 2.5%;
    width: 95%;
    top: 37%;
    /*        height: auto;
                overflow-y: scroll;*/
  }
}

.harita-evi-modal div div {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  /*450px*/
  align-items: center;
}

.harita-evi-modal div div img {
  /*background-color: orange;*/
  box-sizing: border-box;
  margin: auto;
}

.harita-evi-modal div div div:last-child {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.harita-evi-modal3 {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 400px;
  height: 200px;
  top: 30%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.harita-evi-modal3.show {
  display: block;
}

.harita-evi-modal3 div div {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  /*450px*/
  align-items: center;
}

.harita-evi-modal3 div div img {
  /*background-color: orange;*/
  box-sizing: border-box;
  margin: auto;
}

.harita-evi-modal3 div div div:last-child {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.harita-evi-modal4 {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 400px;
  height: 180px;
  top: 30%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

@media screen and (max-width: 700px) {
  .harita-evi-modal4 {
    width: 95%;
    left: 2.5%;
    top: 40%;
  }

  .harita-evi-modal3 {
    position: fixed;
    z-index: 999;
    /*height: auto;*/
    width: 300px;
    height: 200px;
    top: 30%;
    left: 10%;
    overflow: auto;
    background-color: white;
    border-radius: 10px;
    display: none;
  }
}

.harita-evi-modal4.show {
  display: block;
}

.harita-evi-modal4 div div {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  /*450px*/
  align-items: center;
}

.harita-evi-modal4 div div img {
  /*background-color: orange;*/
  box-sizing: border-box;
  margin: auto;
}

.harita-evi-modal4 div div div:last-child {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.modal3 {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal3.show {
  display: block;
}

.modal3 h2 {
  color: var(--primary-color);
}

@media screen and (max-width: 700px) {
  .modal3 {
    left: 2.5%;
    width: 95%;
  }

  .modal-inf {
    left: 2.5%;
    width: 95%;
  }

  .modal4 {
    left: 2.5%;
    width: 95%;
  }
}

.modalETOD {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal4 {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal4.show {
  display: block;
}

.modal4 h2 {
  color: var(--primary-color);
}

.notification_modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 400px;
  height: 320px;
  top: 30%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

@media screen and (max-width: 700px) {
  .notification_modal {
    left: 4%;
    width: 350px;
    top: 37%;
  }
}

.notification_modal.show {
  display: block;
}

.notification_modal div div {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  /*450px*/
  align-items: center;
}

.notification_modal div div img {
  /*background-color: orange;*/
  box-sizing: border-box;
  margin: auto;
}

.notification_modal div div div:last-child {
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}

.modal2 {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 45%;
  bottom: 4%;
  right: 2%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal2.show {
  display: block;
}

@media screen and (max-width: 700px) {
  .modal2 {
    left: 2.5%;
    width: 95%;
    overflow-y: scroll;
  }
}

.modal-content2 {
  background-color: #fefefe !important;
  padding: 10px 20px 20px 10px;
}

.modal-content2 div {
  margin-bottom: 2px;
}

.modal-content2 p {
  text-align: left;
}

.modal2 h2 {
  color: var(--primary-color);
}

.modal-content2 table {
  border-collapse: collapse;
  width: 100%;
}

.modal-content2 th,
td {
  text-align: left;
  padding: 5px;
}

.modal-content2 tr:nth-child(even) {
  background-color: #f2f2f2;
}

.modal-inf {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal3 {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

@media screen and (max-width: 700px) {
  .modal3 {
    left: 2.5%;
    width: 95%;
  }

  .modalETOD {
    left: 2.5%;
    width: 95%;
  }

  .modal-inf {
    left: 2.5%;
    width: 95%;
  }

  .modal4 {
    left: 2.5%;
    width: 95%;
  }
}

.modal3.show {
  display: block;
}

.modalETOD.show {
  display: block;
}

.modal-inf.show {
  display: block;
}

.modal4.show {
  display: block;
}

.modal3 h2 {
  color: var(--primary-color);
}

.modalETOD h2 {
  color: var(--primary-color);
}

.modal-inf h2 {
  color: var(--primary-color);
}

.modal4 h2 {
  color: var(--primary-color);
}

.modal-common {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.modal-common.show {
  display: block;
}

.modal-common h2 {
  color: var(--primary-color);
}

.modalSurfaceAnalysis {
  position: fixed;
  z-index: 999;
  height: 75%;
  /*auto;*/
  width: 55%;
  bottom: 4%;
  right: 4%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

@media screen and (max-width: 700px) {
  .modalSurfaceAnalysis {
    left: 2.5%;
    width: 95%;
  }
}

.modalSurfaceAnalysis.show {
  display: block;
}

.modalSurfaceAnalysis h2 {
  color: var(--primary-color);
}

.modal-surface {
  background-color: #fefefe !important;
  padding: 10px 20px 20px 10px;
}

.modal-surface div {
  margin-bottom: 2px;
}

.modal-surface table {
  border-collapse: collapse;
  width: 100%;
}

.modal-surface th,
td {
  text-align: left;
  padding: 5px;
}

.modal-surface tr:nth-child(even) {
  background-color: #f2f2f2;
}

.mania-new-registry {
  display: block;
}

.mania-new-registry.hide {
  display: none;
}

.mania-kml-modal {
  height: auto;
  width: auto;
  top: 20%;
  left: 35%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.mania-kml-modal.show {
  display: block;
}

.mania-modal-nav {
  display: flex;
}

.mania-modal-nav button {
  width: 200px;
  height: 40px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  margin-right: 20px;
}

/*.mania-modal-nav button:first-child {
    border-bottom: 2px solid orange;
}*/

.mania-modal-nav button:first-child.firstBorder {
  border-bottom: 2px solid orange;
}

.mania-modal-nav button:nth-child(2).secondBorder {
  border-bottom: 2px solid orange;
}

.mania-modal-nav button:hover {
  background-color: #e9e9e9;
}

/*-- notam model*/

.notam-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 540px;
  height: 38%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.ols-create-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 540px;
  height: 38%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.etod-create-modal {
  position: fixed;
  z-index: 999;
  width: 540px;
  height: 38%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.tfpa-create-modal {
  position: fixed;
  z-index: 999;
  width: 540px;
  height: 38%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.peak-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 540px;
  height: 55%;
  top: 30%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.aerodrome-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 640px;
  height: 55%;
  top: 25%;
  left: 40%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
  text-align: left;
}

.kml-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 540px;
  height: 32%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

.aixm-modal {
  position: fixed;
  z-index: 999;
  /*height: auto;*/
  width: 540px;
  height: 32%;
  top: 30%;
  left: 30%;
  overflow: auto;
  background-color: white;
  border-radius: 10px;
  display: none;
}

@media screen and (max-width: 700px) {
  .notam-modal {
    left: 2.5%;
    width: 95%;
    top: 40%;
    height: 50%;
  }
}

@media screen and (max-width: 700px) {
  .peak-modal {
    left: 2.5%;
    width: 95%;
    top: 36%;
    height: 55%;
  }
}

@media screen and (max-width: 700px) {
  .kml-modal {
    left: 2.5%;
    width: 95%;
    top: 40%;
    height: 40%;
  }

  .aixm-modal {
    left: 2.5%;
    width: 95%;
    top: 40%;
    height: 40%;
  }
}

.kml-modal.show,
.aixm-modal.show,
.notam-modal.show,
.peak-modal.show,
.aerodrome-modal.show {
  display: block;
}

.mania-header {
  margin-top: 8px;
  padding: 10px;
  width: 100%;
  border-radius: 4px;
  background-color: var(--secondary-color);
  display: flex;
  justify-content: space-between;
}

.form-airport-select {
  display: flex;
}

.form-airport-select div select {
  width: 452px;
  /*background-color: orange;*/
  margin-left: 115px;
  border-radius: 4px;
  color: #999;
}

.close {
  color: var(--primary-color);
  float: right;
  font-size: 30px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*--- modal >>> SON ---*/

/*Page Layout (Sayfa Düzeni)*/

.container2 {
  display: flex;
  width: 100vw;
  height: calc(100vh - 63px);
}

.ana-navigation {
  overflow: auto;
}

.main-navigation {
  background-color: var(--left-menu-background);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/*  MASAUSTU ICIN   */
@media (min-width: 768px) {
  .fa-user {
    display: none;
  }

  #left-menu-text {
    z-index: 1000;
    font-size: 2rem;
    padding-left: 8rem;
    padding-bottom: 0rem;
    padding-top: 2rem;
  }

  .side-bar-hide-btn {
    text-align: center;
    cursor: pointer;
    z-index: -3;
    transition: left 0.1s ease;
    background-color: #bbbbbb !important;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: sticky;
    width: 137px;
    height: 56px;
    border-radius: 10%;
    margin-left: -97px;
    margin-top: -12px;
    overflow: hidden;
  }

  .side-bar-hide-btn span {
    font-weight: bold;
    font-size: 18px;
    margin-top: 15%;
    margin-left: 20%;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  /*--- sol menü acma tuşu ---*/
  .side-bar-hide-btn.click {
    background-color: orange !important;
    margin-left: -97px; /*270px;*/
    position: sticky;
    overflow: hidden;
  }
  .side-bar-hide-btn.click span {
    /*    font-size: 43px !important;
        line-height: 40px !important;*/
    font-weight: bold;
    font-size: 18px;
    margin-top: 15%;
    margin-left: 20%;
  }

  .sidebar-full {
    position: absolute;
    display: flex;
    flex-direction: row;

    top: 6rem;
  }

  .ana-navigation {
    top: 6rem;
    /* 350px; 24%*/
    min-height: calc(100vh - 6rem);
    display: flex;
    position: absolute;
    z-index: 1000;
  }
  #leftMenu {
    width: 35rem;
  }
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    width: 100vw;
  }
}

.ana-navigation.show {
  background-color: orange !important;
  width: 0px;
}

.ana-navigation nav > div {
  margin-left: 3%;
  /*10px*/
  margin-right: 3%;
  /*10px*/
  border-radius: 10px;
}

.main-navigation {
  height: calc(100vh - 63px);
  overflow-y: auto;
}

@media screen and (max-width: 768px) {
  .ana-navigation {
    max-height: 50vh;
    min-width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
  }

  body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }

  .sidebar-nav {
    display: none;
    flex-direction: column;
    padding-top: 0rem;
    padding-bottom: 8.5rem;
    height: 25rem;
    overflow: auto;
  }

  .side-bar-hide-btn {
    background-color: #bbbbbb !important;
    align-self: center;
    position: fixed;
    min-width: 100vw;
    min-height: 7rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 1rem;
  }

  #profile {
    display: none;
  }

  .quick-access {
    display: none;
  }

  .help-container {
    display: none;
  }

  .side-bar-hide-btn.click {
    align-self: center;
    text-align: center;
    cursor: pointer;
    z-index: 3;
    transition: bottom 0.3s ease;
    background-color: orange !important;

    position: fixed;
    min-width: 100vw;
    min-height: 7rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #left-menu-text {
    font-size: 20px;
    padding: 1.5rem;
    border-radius: 50%;
    background-color: orange;
    margin-left: 30px;
  }

  .side-bar-hide-btn i {
    color: #2b2b2b;
    font-size: 20px;
    padding: 1.5rem;
    border-radius: 50%;
    background-color: orange;
  }
}

/*@media screen and (max-width: 720px) {
    .ana-navigation {
        width: 400px;
    }
}*/

/*@media screen and (min-width: 800px) {
    .search-container {
        /*width: 33.3333333%;
        flex-direction: row;
    }
    .search-container:nth-child(3n+1) {
        clear: left;
    }
    .search-container:nth-child(odd) {
        clear: none;
    }
}

@media screen and (min-width: 1120px) {
    .search-container {
        /*width: 60.3%;
        float: right;
        flex-direction: row;
    }
    .search-container:nth-child(odd), .search-container:nth-child(3n+1) {
        clear: none;
    }
}*/

#map {
  width: 100vw;
  background-color: white;
  /*map arka plan*/
}

@media screen and (max-width: 700px) {
  #map {
    width: 100vw;
  }
}

#cesiumContainer {
  width: 100vw;
  background-color: white;
  /*map arka plan*/
}

@media screen and (max-width: 700px) {
  #cesiumContainer {
    width: 100vw;
  }
}

/*Page Layout (Sayfa Düzeni) >>> SON*/

/*---- Mania Kaydı Formu ----*/

.form-container {
  padding: 10px 20px;
  border: 1px solid var(--secondary-color);
  margin-top: -5px;
}

/*.form-container div{
    border: 1px solid orangered;
    width: 100%;
}*/

/*.form-container div div{
    border: 1px solid yellow;
    width: 25%;
}*/

textarea {
  width: 100%;
  min-height: 100px;
  border-color: var(--secondary-color);
  font-size: inherit;
  font-family: inherit;
  resize: vertical;
  max-height: 200px;
}

.form-message {
  margin-top: 20px;
  color: var(--navigaton-button) !important;
}

.form-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.form-buttons button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px;
  font-size: 1em;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.2s ease 0s;
}

.form-buttons button:hover {
  color: var(--secondary-color);
}

.form-container > div {
  border-bottom: 1px solid var(--form-border);
}

.form-container > div:last-child {
  border: none;
}

.form-adjust {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.form-adjust div {
  width: 25%;
  /*border: 1px solid yellow;*/
}

.form-adjust div select {
  width: 80%;
  color: #999;
}

/*.form-adjust div input {
    width: 80%;
    border: 1px solid blue;
}*/

/*.form-adjust input[type=radio] {
    width: 80%;
    border: 1px solid greenyellow;
}*/

/*--- Mania Kaydı Formu >>> SON ---*/

/*--- mania-container ---*/

.mania-container {
  background-color: white;
  height: auto;
  padding: 10px;
  display: none;
  margin-top: -2px;
}

.mania-container.show {
  display: block;
}

.mania-container div {
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
}

.mania-container > span {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-left: 10px;
}

.mania-container img {
  float: left;
  margin-left: 2%;
  /*10px;*/
  height: 90%;
}

.mania-container div span {
  /*border: 1px solid orange;*/
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  /*margin-left: 10px;*/
}

.mania-container button {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  padding: 5px 0px 5px 0px;
  width: 30%;
  /*70px;*/
  height: 40px;
  /*    margin-left: 5%; 10px
        margin-right: 5%;*/
  margin-top: 10px;
  cursor: pointer;
}

.aerodrome-container {
  background-color: white;
  height: auto;
  padding: 10px;
  display: none;
  margin-top: -2px;
}

.aerodrome-container.show {
  display: block;
}

.aerodrome-container div {
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  text-align: justify;
}

.aerodrome-container div > div {
  height: auto;
  width: 75%;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  position: relative;
  margin: auto;
}

.aerodrome-container > span {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-left: 10px;
}

.aerodrome-container img {
  float: left;
  margin-left: 2%;
  /*10px;*/
  height: 90%;
}

.aerodrome-container div span {
  /*border: 1px solid orange;*/
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  /*margin-left: 10px;*/
}

.aerodrome-container button {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  padding: 5px 0px 5px 0px;
  width: 30%;
  /*70px;*/
  height: 40px;
  /*    margin-left: 5%; 10px
        margin-right: 5%;*/
  margin-top: 10px;
  cursor: pointer;
}

.silsil {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  padding: 5px 0px 5px 0px;
  width: 10%;
  /*70px;*/
  height: 40px;
  margin-left: 3%;
  /*10px*/
  /*margin-right: 5%;*/
  margin-top: 10px;
  cursor: pointer;
}

.mania-container2 {
  background-color: white;
  height: auto;
  padding: 10px;
  display: none;
  margin-top: -2px;
}

.mania-container2.show {
  display: block;
}

.mania-container2 div {
  height: auto;
  /*padding: 10px;*/
  /*    border: 1px solid orange;
        border-radius: 10px;*/
  /*margin-top: 5px;*/
}

/*.mania-container2 td {
    padding: 0px 0px 0px 2px;
    border: 1px solid grey;
    margin-left: 2px;
}*/

.mania-container2 table {
  border-collapse: collapse;
  width: 100%;
}

.mania-container2 th,
td {
  text-align: left;
  padding: 5px;
}

.mania-container2 tr:nth-child(even) {
  background-color: #f2f2f2;
}

.mania-container2 > span {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-left: 10px;
}

.mania-container2 img {
  float: left;
  margin-left: 2%;
  /*10px;*/
  height: 90%;
}

.mania-container2 div span {
  display: inline-block;
  /*    margin-top: 10px;
        margin-left: 10px;*/
}

.mania-container2 button {
  /*background: var(--secondary-color);*/
  border: none;
  border-radius: 5px;
  /*color: white;*/
  /*width: 30px;*/
  height: 30px;
  cursor: pointer;
}

.mania-container2-button {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  /*padding: 5px;*/
  color: white;
  width: 30px;
  height: 30px;
  /*width: 90px;*/
  /*    margin-left: 5px;
        margin-top: 5px;*/
  cursor: pointer;
}

.chck-obstacle {
  overflow: auto;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
}

.mania-view-container2 {
  background-color: white;
  height: auto;
  padding: 10px;
  display: none;
  margin-top: -2px;
}

.mania-view-container2.show {
  display: block;
}

.mania-view-container2 div {
  height: auto;
}

.mania-view-container2 table {
  border-collapse: collapse;
  width: 100%;
}

.mania-view-container2 th,
td {
  text-align: left;
  padding: 5px;
}

.mania-view-container2 tr:nth-child(even) {
  background-color: #f2f2f2;
}

.mania-view-container2 > span {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 2px;
  margin-top: 10px;
  margin-left: 10px;
}

.mania-view-container2 img {
  float: left;
  margin-left: 2%;
  /*10px;*/
  height: 90%;
}

.mania-view-container2 div span {
  display: inline-block;
}

.mania-view-container2 button {
  background: var(--secondary-color);
  border: none;
  border-radius: 5px;
  color: white;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

/*---- mania-container >>> SON ---*/

/*---- layer container(katmanlar menüsü) ----*/
.layers-container {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
  margin-top: -2px;
  display: none;
}

.layers-container button {
  margin-bottom: 10px;
}

.layers-container.show {
  display: block;
}

.manialar-container {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 10px;
  margin-top: -2px;
  display: none;
}

.manialar-container button {
  margin-bottom: 10px;
}

.manialar-container.show {
  display: block;
}

/*---- layer container(katmanlar menüsü) >>> SON ----*/

/*upload from file ve manual input için frame eklendi*/
.frame-upload-from-file {
  /*height: auto;*/
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

.navaid-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.navaid-content.show {
  display: block;
}

.navaid-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}
@media screen and (min-width: 768px) {
  .navaid-content div div {
    width: 60px;
    align-self: center;
  }
}

@media screen and (max-width: 768px) {
  .navaid-content div div {
    width: 38px;
    align-self: center;
  }
}
.navaid-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.navaid-content > div:first-of-type div:nth-child(2) {
  /*max-width: 100%;*/
  width: 240px;
}

.navaid-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

/*ekleme bitis mucella*/
/*.navaid-content div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 6px;
}
.navaid-content div div {
    width: 33%; 60px;
    align-self: center;
}*/

.navaid-content span {
  display: block;
  font-size: 12px;
  text-align: center;
  margin-top: 14px;
}

/*upload from file ve manual input için frame eklendi*/
.frame-upload-from-file2 {
  /*height: auto;*/
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

/* Yuzey analizi */
.surface-analyze-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.surface-analyze div {
  width: 100%;
  /*350px;*/
}

.surface-analyze-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
}

.surface-analyze-content.show {
  display: block;
}

/*--- layer mania content---*/

.layer-mania-content {
  /*display: none;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.layer-mania-content.show {
  display: block;
}

.layer-mania-content div {
  /*display: flex;*/
  flex-direction: row;
  /*justify-content: center;*/
}

.layer-mania-content div div {
  width: 100%;
  /*104px;*/
  /*align-self: center;*/
  margin-left: 10px;
}

/*.layer-mania-content div div:first-child {
    width: 104px;
    align-self: center;
}*/

/*.layer-mania-content div div  div:nth-child(2) {
    align-self: center;
}*/

.layer-mania-content span {
  display: block;
  font-size: 0.9em;
  text-align: center;
  margin-top: -10px;
}

/*--layer mania plan content--*/

.layer-mania-plan-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.layer-mania-plan-content.show {
  display: block;
}

.layer-mania-plan-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

.layer-mania-plan-content div div {
  width: 60px;
  align-self: center;
}

.layer-mania-plan-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.layer-mania-plan-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.layer-mania-plan-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

.layer-mania-plan-content2 {
  display: none;
  width: auto;
  overflow: auto;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.navaid-content2 {
  display: none;
  width: auto;
  overflow: auto;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

/*----- An 15 Yüzeyleri*/

.an-15-surface-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.an-15-surface-content.show {
  display: block;
}

.an-15-surface-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

.an-15-surface-content div div {
  width: 60px;
  align-self: center;
}

.an-15-surface-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.an-15-surface-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.an-15-surface-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

.an-4-surface-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.an-4-surface-content.show {
  display: block;
}

.an-4-surface-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

.an-4-surface-content div div {
  width: 60px;
  align-self: center;
}

.an-4-surface-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.an-4-surface-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.an-4-surface-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

/*---- layer container(katmanlar) >>> SON*/

/*--- functions container(fonksiyonlar) ---*/

.notam-div {
}

.butImgTriangle {
  float: right;
  margin-right: 5px;
  margin-top: 4px;
}

.functions-container {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  display: none;
  margin-top: -2px;
}

/*.functions-container div {
    height: auto;
    padding: 10px;
    border: 1px solid orange;
    border-radius: 10px;
    margin-top: 5px;
}*/

.functions-container.show {
  display: block;
}

.functions-container button {
  margin-bottom: 10px;
}

.functions-container div button:first-child,
/*.manialar-container div button:first-child,*/
.layers-container div button:first-child {
  background-color: var(--form-border);
  border: none;
  height: 30px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.mContainerButton {
  background-color: var(--form-border);
  border: none;
  height: 30px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.functions-container button:hover,
.manialar-container button:hover,
.layers-container div button:hover {
  background-color: #e9e9e9;
}

.functions-container div img,
.manialar-container div img,
.layers-container div img {
  /*float: right;*/
  /*margin-right: 14px;*/
  /*margin-top: 2px;*/
  /*height: 12px;*/
}

.functions-container div div a:hover {
  color: orange !important;
}

.functions-container2 {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  display: none;
  margin-top: -2px;
}

.functions-container2.show {
  display: block;
}

.functions-container2 button {
  margin-bottom: 10px;
}

.functions-container2 div button:first-child {
  background-color: var(--form-border);
  border: none;
  height: 30px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.functions-container2 button:hover {
  background-color: #e9e9e9;
}

.functions-container2 div img {
  float: right;
  margin-right: 14px;
  margin-top: 2px;
  height: 12px;
}

.functions-container2 div div a:hover {
  color: orange !important;
}

.functions-container-userpanel {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  display: none;
  margin-top: -2px;
}

.functions-container-userpanel.show {
  display: block;
}

.functions-container-userpanel button {
  margin-bottom: 10px;
}

.functions-container-userpanel div span {
  /*    display: inline-block;
        font-weight: 600;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-left: 10px;*/
}

.functions-container-userpanel div button:first-child {
  background-color: var(--form-border);
  border: none;
  height: 30px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.functions-container-userpanel button:hover {
  background-color: #e9e9e9;
}

.functions-container-userpanel div img {
  float: right;
  margin-right: 14px;
  margin-top: 2px;
  height: 12px;
}

.functions-container-userpanel div div a:hover {
  color: orange !important;
}

.mania-container-userpanel {
  background-color: white;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  display: none;
  margin-top: -2px;
}

.mania-container-userpanel.show {
  display: block;
}

.mania-container-userpanel button {
  margin-bottom: 10px;
}

.mania-container-userpanel div span {
  /*    display: inline-block;
        font-weight: 600;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-left: 10px;*/
}

.mania-container-userpanel div button:first-child {
  background-color: var(--form-border);
  border: none;
  height: 30px;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
}

.mania-container-userpanel button:hover {
  background-color: #e9e9e9;
}

.mania-container-userpanel div img {
  float: right;
  margin-right: 14px;
  margin-top: 2px;
  height: 12px;
}

.mania-container-userpanel div div a:hover {
  color: orange !important;
}

/*--- functions container (fonksiyonlar) >>> SON ---*/

/*--- KML Yükle ---*/

.load-kml-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.load-kml div {
  width: 100%;
  /*350px;*/
}

.load-kml-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  /*margin-bottom: 10px;*/
}

.load-kml-content.show {
  display: block;
}

.load-kml div input {
  margin-left: 5px;
}

.load-kml-content a {
  color: var(--primary-color) !important;
}

/*--- KML Yükle >>> SON---*/

/*--- AIXM Yükle ---*/

.load-aixm-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.load-aixm div {
  width: 100%;
  /*350px;*/
}

.load-aixm-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  /*margin-bottom: 10px;*/
}

.load-aixm-content.show {
  display: block;
}

.load-aixm div input {
  margin-left: 5px;
}

.load-aixm-content a {
  color: var(--primary-color) !important;
}

/*--- AIXM Yükle >>> SON---*/

/*--- InfringementYükle ---*/

.load-inf-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.load-inf div {
  width: 100%;
  /*350px;*/
}

.load-inf-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  /*margin-bottom: 10px;*/
}

.load-inf-content.show {
  display: block;
}

.load-inf div input {
  margin-left: 5px;
}

.load-inf-content a {
  color: var(--primary-color) !important;
}

/*--- Infringment Yükle >>> SON---*/

/*Create OLS*/

.create-surface-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.icLabel {
  width: 64%;
}

.araLabel {
  margin-top: 10px;
  font-weight: bold;
  /*width: 100%;*/
}

.create-surface div {
  width: 100%;
  /*350px;*/
}

.create-surface-content div {
  margin-top: 4px;
  /*aşağıdaki özellik açılınca br etiketi ile div de aşağı inemedim */
  /*display: flex;*/
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  margin-bottom: 10px;
}

.create-surface-content.show {
  display: block;
}

.create-surface div input {
  margin-left: 5px;
}

.create-surface-content a {
  color: var(--primary-color) !important;
}

/*Create OLS*/

/*Create eTOD*/
.create-etod-surface-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.create-etod-surface div {
  width: 100%;
  /*350px;*/
}

.create-etod-surface-content div {
  margin-top: 4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  margin-bottom: 10px;
}

.create-etod-surface-content.show {
  display: block;
}

.create-etod-surface div input {
  margin-left: 5px;
}

.create-etod-surface-content a {
  color: var(--primary-color) !important;
}

/*Create eTOD/

/*Create TFPA*/
.create-tfpa-surface-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.create-tfpa-surface div {
  width: 100%;
  /*350px;*/
}

.create-tfpa-surface-content div {
  margin-top: 4px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
  margin-bottom: 10px;
}

.create-tfpa-surface-content.show {
  display: block;
}

.create-tfpa-surface div input {
  margin-left: 5px;
}

.create-tfpa-surface-content a {
  color: var(--primary-color) !important;
}

/*Create TFPA/

/*--- Notam Yükle ---*/

.load-notam-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.select-file {
  margin-top: 10px;
}

.load-notam-content.show {
  display: block;
}

.load-notam-content div {
  width: 100%;
  /*350px;*/
  display: flex;
  justify-content: center;
  align-self: center;
  /*margin-bottom: 10px;*/
}

.load-notam-content a {
  color: var(--primary-color) !important;
}

hr {
  color: #d8d8d8;
  margin: 10px 0px;
}

/*-----Tepe Analizi ---------*/
.peak-analyze-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.peak-analyze-content.show {
  display: block;
}

.peak-analyze-content div {
  width: 100%;
  /*350px;*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.peak-analyze-content div div {
  /*width: 180px;*/
  width: 50%;
}

.peak-analyze-content div label {
  margin-right: 10px;
}

.peak-analyze-content div:nth-of-type(2) div:nth-of-type(2) input {
  /*background-color: red !important;*/
  /*width: 120px;*/
  height: 22px;
}

.peak-analyze-content a {
  color: var(--primary-color) !important;
}

.analyze-button {
  background-color: var(--primary-color) !important;
  color: white !important;
  letter-spacing: 2px;
  width: 160px !important;
  height: 40px;
  border-radius: 4px;
  border: none;
  margin-top: 10px;
}

.analyze-button:hover {
  color: orange !important;
}

.obstcl-button {
  background-color: var(--primary-color) !important;
  color: white !important;
  letter-spacing: 2px;
  width: 100px !important;
  height: 40px;
  border-radius: 4px;
  border: none;
  margin-top: 10px;
  margin: 5px;
}

.obstcl-button:hover {
  color: orange !important;
}

.textarea-content {
  margin-bottom: 10px;
}

/*-----Tepe Analizi >>> SON*/

/* Yuzey analizi */
.surface-analyze-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.surface-analyze div {
  width: 100%;
  /*350px;*/
}

.surface-analyze-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
}

.surface-analyze-content.show {
  display: block;
}

.surface-analyze div input {
  /*margin-left: 5px;*/
  width: 70%;
}

/*.surface-analyze label {
    width: 100%; text-align: right;
     border: 1px solid orange;
}*/

.mania_logo {
  width: 8%;
}

@media screen and (max-width: 700px) {
  .mania_logo {
    /*width: 75%;*/
  }
}

@media screen and (width: 414px) {
  .mania_logo {
    width: 10%;
  }
}

.select-airport-surface {
  z-index: 2;
  border: 1px solid #999;
  height: 30px;
  width: 85%;
  margin-left: 5px;
  margin-top: 4px;
  border-radius: 4px;
  /*border: none;*/
  padding: 0;
  background-color: var(--search-background);
  outline: none;
}

/* Yuzey analizi */

/*--- mapbox.css override
Harita üzerinde görünmesini istediğimiz ikonlar ile ilgili değişiklikleri
burada yaptım. display:none olarak atananlar haritada üzerinde görünmüyor.
Bu ikonlar ilk etapta harita üzerine eklenirken eklenmese daha iyi olacağını düşünüyorum.
Haritanin üzerine hangi fonksiyon ile eklendiğini bulamadığım için bu şekilde bir çözüm
uyguladım.
---*/

.leaflet-right {
  margin-top: 5rem;
}

@media screen and (max-width: 700px) {
  .leaflet-right {
    margin-top: 20rem;
  }
}

.leaflet-draw a,
.leaflet-control-locate,
.leaflet-bar button:last-of-type {
  display: none;
}

/*--- Aktif Menü (Anismasyonlar)
Animasyonların ayarları buradan yapılabilir. left 38, 166, 312px 
kodları sırasıyla manialarım, fonksiyonlar, katmanları temsil ediyor.
--- */
.active-menu {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 18px solid white;
  position: relative;
  left: 0px;
  margin-top: -7px;
  transition: left 0.4s ease;
  display: none;
}

.active-menu.maniamenu {
  left: 8%;
  /*38px;*/
  display: block;
}

.active-menu.functionsmenu {
  left: 40%;
  /*166px;*/
  display: block;
}

.active-menu.layersmenu {
  left: 70%;
  /*312px;*/
  display: block;
}

.active-menu-aerodrome {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 18px solid white;
  position: relative;
  left: 0px;
  margin-top: -7px;
  transition: left 0.4s ease;
  display: none;
  z-index: -1;
}

.active-menu-aerodrome.menu {
  left: 40%;
  /*312px;*/
  display: block;
}

.active-menu2 {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 18px solid white;
  position: relative;
  left: 0px;
  margin-top: -7px;
  transition: left 0.4s ease;
  display: none;
}

.active-menu2.layersmenu {
  left: 10%;
  /*312px;*/
  display: block;
}

.active-menu2.maniamenu {
  left: 43%;
  /*38px;*/
  display: block;
}

.active-menu2.functionsmenu {
  left: 75%;
  /*166px;*/
  display: block;
}

.active-menu-userpanel {
  height: 0;
  width: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 18px solid white;
  position: relative;
  left: 0px;
  margin-top: -7px;
  transition: left 0.4s ease;
  display: none;
}

.active-menu-userpanel.maniamenu {
  left: 20%;
  /*38px;*/
  display: block;
}

.active-menu-userpanel.functionsmenu {
  left: 70%;
  /*166px;*/
  display: block;
}

/*--- Aktif Menü (Anismasyonlar) >>> SON ---*/

/*Takım*/
.load-team-content {
  /*background-color: #F0F0F0;*/
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
}

.load-team div {
  width: 100%;
  /*350px;*/
}

/*.load-team-content div div {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%; 350px;
}
.load-team-content.show {
    display: block;
}
.load-team-content div input {
    margin-left: 5px;
}*/

/*.load-team-content table {
    border-collapse: collapse;
    width: 100%;  bootstrap table için kapandı 
}*/

/*.load-team-content th, td {
    text-align: left;
    padding: 5px;
}*/

.load-team-content tr:nth-child(even) {
  background-color: #f2f2f2;
}

/*takım oluştur*/
.create-team-content {
  /*background-color: #F0F0F0;*/
  display: none;
  margin-bottom: 10px;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
}

.create-team div {
  width: 100%;
  /*350px;*/
}

.create-team-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
}

.create-team-content.show {
  display: block;
}

.create-team div input {
  margin-left: 5px;
}

/*Takım*/

.file-obstacle-content {
  /*background-color: #F0F0F0;*/
  display: none;
  margin-bottom: 10px;
}

.file-obstacle-content div {
  margin-top: 4px;
  /*    display: flex;
        flex-direction: row;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
}

.file-obstacle-content.show {
  display: block;
}

.form-obstacle-content {
  /*background-color: #F0F0F0;*/
  display: none;
  margin-bottom: 10px;
}

.form-obstacle-content div {
  margin-top: 4px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*350px;*/
}

.form-obstacle-content.show {
  display: block;
}

/*--- Sorgu Sonuç Ekranı
Sorgu yapıldığında çıkan sonuçları gösteren ekranın kodları.
Burada bulunan kodlar eski style.css kodlarından direk aktarıldı.
Üzerinde herhangi bir değişiklik yapılmadı.
*/

.ui-button-snap {
  position: relative;
  top: 11px;
  right: -35px;
  z-index: 1000;
  border-radius: 3px;
  padding: 2px 6px;
  background: #fff;
  color: #444;
  border: 1px solid #999;
  float: left;
}

.ui-button-print {
  position: relative;
  top: 11px;
  right: -45px;
  z-index: 1000;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  background: #fff;
  color: #444;
  border: 1px solid #999;
  float: left;
}

.ui-button-share {
  position: relative;
  top: 11px;
  right: -55px;
  z-index: 1000;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  background: #fff;
  color: #444;
  border: 1px solid #999;
}

.popupContainer {
  /*font-size: 1.2em ;*/
  font-weight: 500;
  text-align: center;
}

.bs-tab {
  position: relative;
}

.panel-footer {
  position: relative;
  height: 50px;
}

.tab-pane {
  position: absolute;
  top: 42px;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: auto;
}

td.rb {
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: #eeeeee;
  text-align: center;
}

/*--- Sorgu Sonuç Ekranı >>> SON*/

/*Fonksiyonlardaki Havalimanı Uyarıları
Menülerin altında bulunan havalimanı notları buradan düzenelenebilir*/

.airport-note {
  font-size: 0.8em;
}

.airport-note a {
  color: black !important;
  cursor: pointer;
}

.airport-note img {
  float: left !important;
  height: 14px !important;
  margin-right: 3px !important;
}

/*--- Fonksiyonlardaki Havalimanı Uyarıları >>> SON*/
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  /*  border-radius: 5px;*/
  /*background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab span {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px;
  transition: 0.3s;
  font-size: 12px;
  width: 33%;
  height: 100%;
  border-radius: 5px;
  text-align: center;
}

/* Change background color of buttons on hover */
.tab span:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab span.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

@media screen and (min-width: 767px) {
  /*1279*/
  .search_click {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  /*1279*/
  .gizle1 {
    display: none;
  }

  .gizle2 {
    display: none;
  }

  .gizle3 {
    display: none;
  }
}

/*Aeronautical and shielding study*/
.aero-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.aero-content.show {
  display: block;
}

.aero-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

.redbox {
  height: 20px;
  width: 20px;
  background-color: #ff7f27;
  opacity: 0.5;
}

/*.aero-content div div {
    width: 50%;
    align-self: center;
}*/

.aero-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.aero-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.aero-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

.shield-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.shield-content.show {
  display: block;
}

.shield-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

.greenbox {
  height: 20px;
  width: 20px;
  background-color: #00ff00;
  opacity: 0.4;
}

/*.shield-content div div {
    width: 60px;
    align-self: center;
}*/

.shield-content > div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.shield-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.shield-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}

/*Aeronautical and shielding study*/

/*natural terrain*/
.terr-content {
  display: none;
  height: auto;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.terr-content.show {
  display: block;
}

.terr-content div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 6px;
}

/*.terr-content>div:first-of-type {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}*/

.terr-content > div:first-of-type div:nth-child(2) {
  width: 240px;
}

.terr-content span:last-child {
  display: block;
  font-size: 10px;
  text-align: center;
}
/*natural terrain*/