/* SVG Türkiye Haritası | CSS | MIT Lisans | dnomak.com */

.svg-turkiye-haritasi {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.svg-turkiye-haritasi svg {
  width: 100%;
  height: auto;
}

#svg-turkiye-haritasi text {
  pointer-events: none;
  font-weight: bold;
  text-shadow: 0 1px 1px #000000;
  fill: #eee;
}

#svg-turkiye-haritasi g path {
  cursor: default;
  fill: #ddd;
  paint-order: stroke;
  stroke: #444;
  stroke-width: 2px;
}

#svg-turkiye-haritasi g.selectable path {
  cursor: pointer;
  fill: #c00;
  paint-order: stroke;
  stroke: #444;
  stroke-width: 2px;
  transition: fill 0.1s ease 0s;
}

#svg-turkiye-haritasi g.selectable path:hover,
#svg-turkiye-haritasi g.selectable.active path {
  fill: #e63619;
}

#guney-kibris,
#kuzey-kibris {
  pointer-events: none;
}

#table {
  padding-top: 50px;
  padding-bottom: 20px;
  width: 100%;
  overflow-x: auto;
}
#table > .table {
  width: 100%;
}

.table {
  display: table;
}
.table > .thead {
  display: table-header-group;
}
.table > .tbody {
  display: table-row-group;
}
.table > .thead > .tr {
  display: table-row;
}
.table > .thead > .tr > .th {
  display: table-cell;
  background: #e63619;
  color: #fff;
  padding: 10px 5px;
  font-weight: bold;
}
.table > .tbody > .tr {
  display: table-row;
}
.table > .tbody > .tr > .td {
  display: table-cell;
  padding: 10px 5px;
  border-bottom: 1px solid #eee;
}
.table > .tbody > .tr > .td:last-child {
  white-space: nowrap;
}
.table > .tbody > .tr > .td > .title {
  display: none;
}
@media (max-width: 1100px) {
  #table > .table {
    display: flex;
    flex-direction: column;
  }
  #table > .table > .thead {
    display: none;
  }
  #table > .table > .tbody {
    display: flex;
    flex-direction: column;
    padding: 15px;
  }
  #table > .table > .tbody > .tr {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    margin: 10px 0;
    box-shadow: 0 10px 15px #00000080;
    border-radius: 10px;
  }
  #table > .table > .tbody > .tr > .td {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
  }
  #table > .table > .tbody > .tr > .td:last-child {
    border-bottom: none;
  }
  #table > .table > .tbody > .tr > .td > .title {
    display: inline-block;
  }
}
@media (max-width: 748px) {
  #table > .table > .tbody > .tr > .td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-bottom: none;
  }
}