.metro-map-editor #paper, .metro-map-displayer #paper, .metro-map-editor .panel {
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; */
  /* box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em; */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(150, 150, 150, 0.3);
  border-radius: 4px;
}

.metro-map-editor #paper {
  background: #FFF;
  width: auto;
  display: inline-flex;
  border-top: 1px solid #eee;
  overflow: auto;
  cursor: default;
}

.metro-map-editor #sidebar {
  font-size: 11.5px;
  font-weight: bold;
  /* padding: 5px; */
}

#paper img {
  border-radius: 5px;
}

.metro-map-editor .btn-green {
  /* background-color: #fff; */
  border: 1.7px solid #4cae4c !important;
  color: inherit;
  background-color: #fff;
  transition: all 0.3s;
  margin-left: 50px;
}

.metro-map-editor .mr-10 {
  margin-right: 10px !important;
  margin-left: 10px !important;
}

.metro-map-editor .btn-cancel {
  border: 1px solid #ab0707 !important;
  color: inherit;
  background-color: #fff;
  transition: all 0.3s;
}

.metro-map-editor .btn-blue {
  border: 1.5px solid #0d6efd !important;
  color: inherit;
  background-color: white;
  transition: all 0.3s;
}

.metro-map-editor .btn-blue:hover, .metro-map-editor .btn-blue:active, .metro-map-editor .btn-blue:focus {
  background-color: #226efd1f;
}

.metro-map-editor .btn-green:hover, .metro-map-editor .btn-green:active, .metro-map-editor .btn-green:focus {
  background-color: #e6eee6;
}

.metro-map-editor .btn-cancel:hover, .metro-map-editor .btn-cancel:active, .metro-map-editor .btn-cancel:focus {
  background-color: #b9a4a454;
}

.metro-map-editor #sidebar .panel-warning>.panel-heading {
  background-image: none;
  color: #8a6d3b;
  background-color: #cc971d1c;
  border-color: #cc971d1c;
}

.metro-map-editor input[type="range"]::-moz-range-track {
  padding: 0 15px;
  background: repeating-linear-gradient(to right,
      #ccc,
      #ccc 10%,
      #000 10%,
      #000 11%,
      #ccc 11%,
      #ccc 20%);
  margin: 0;
  box-sizing: border-box;
}

.metro-map-editor input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.metro-map-editor datalist {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-top: -23px;
  padding-top: 0px;
  /* display: none; */
}

.metro-map-editor option {
  width: 2ex;
  display: flex;
  justify-content: center;
  height: 42px;
  align-items: end;
  background-image: red;
  height: 4ex;
  background-position-y: -15px;
  background-position-x: center;
  z-index: -1;
}

/* .range {
  --ticksThickness: 1px;
  --ticksHeight: 30%;
  --ticksColor: silver; */
/* max-width: 100%; */
/* display: inline-block;
  background: silver;
  background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
  background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - .1%) var(--ticksHeight);
  background-position: 0 bottom;
  position: relative;
} */
/* min / max labels at the edges */
/* .range::before, .range::after {
  font: 12px monospace;
  content: counter(x);
  position: absolute;
  bottom: -2ch;
}

.range::before {
  counter-reset: x var(--min);
  transform: translateX(-50%);
}

.range::after {
  counter-reset: x var(--max);
  right: 0;
  transform: translateX(50%);
}


.range > input {
  width: 100%;
  margin: 0 -6px;
} */
#edit_pathway label.line-type-btn, #create_pathway label.line-type-btn, #linkModal label.line-type-btn, #newStationPanel label.line-type-btn{
  padding: 0;
}

#edit_pathway .select-border-wrapper, #create_pathway .select-border-wrapper, #linkModal .select-border-wrapper, #newStationPanel .select-border-wrapper {
  margin: 0;
  border: none;
}

#edit_pathway label.btn, #create_pathway label.btn, #linkModal label.btn , #newStationPanel label.btn{
  margin-right: unset;
  border: 1px solid #ccc;
  box-shadow: 0px 0.5px #d8d8d8;
  outline: none;
  border-radius: 8px;
}

#edit_pathway label.btn svg, #create_pathway label.btn svg,  #linkModal label.btn div.select-border-wrapper, #newStationPanel  label.btn div.select-border-wrapper, #editShapePanel label.btn svg {
  pointer-events: none;
}

.metro-map-editor #sidebar label.active, #edit_pathway label.active, #create_pathway label.active, #linkModal label.active {
  /* background-color: #eee6e6; */
  color: #333;
  background-color: #e6e6e6 !important;
  /* border-color: #adadad; */
  margin-right: unset;
}

#toolbar {
  min-height: 40px;
}

#toolbar .btn-toolbar>.btn-group {
  margin-right: 20px;
}

.metro-map-editor .tableIndex {
  font-weight: bold !important;
  font-size: 16px;
  vertical-align: top !important;
  max-width: 50px;
}

.metro-map-editor div.badgesContainer, #toolTip div.badgesContainer {
  background: #c7c8e04f;
  /* padding: 4px; */
  border-radius: 5px;
  width: intrinsic;
  width: -moz-max-content;
  width: -webkit-max-content;
  margin: auto -10px;
}

.metro-map-displayer {
  padding: 15px;
  #paper,.joint-paper {cursor: default !important}
  .joint-element{cursor:pointer}
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  max-width: 500px;
  min-width: 50%;
  max-height: 100%;
  min-height: 500px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog {
  left: -320px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

#table-placeholder.table-placeholder {
  font-weight: bold;
  font-size: 16px;
}

.metro-map-editor #tableContainer>.panel {
  max-height: 600px;
  overflow: auto;
}

.metro-map-editor .settings-icon {
  /* font-size: 22px; */
  color: #f2dede;
  /* margin: 5px 4px; */
}

.metro-map-editor .info-icon {
  /* font-size: 22px; */
  color: #211d63;
  /* margin: 5px 4px; */
}

.metro-map-editor .delete-icon {
  color: white;
  /* margin: 5px 4px; */
}

.metro-map-editor .icon-container {
  width: 20px;
  border-radius: 50%;
  height: 20px;
  display: inline-block;
  text-align: center;
  margin: 0 3px;
}

.metro-map-editor .icon-container.black {
  background-color: black;
}

.metro-map-editor .icon-container.white {
  background-color: #fff;
  border: 1px solid #333;
}

.metro-map-editor .icon-container.red {
  background-color: #ff1d00;
  /* border: 1px solid #333; */
}

.metro-map-editor .svg-edit-icon {
  font-family: FontAwesome;
  font-size: 11px;
}

.color-box {
  height: 25px;
  width: 25px;
  border-radius: 4px;
  margin: 0 4px;
  border: 1px solid #1110132e;
}

.color-box-long {
  height: 30px;
  width: 90%;
}

.color-box-container {
  padding: 10px;
}

#selectLinkcolormenu {
  padding: 10px;
}

#tooltip {
  font-family: 'Roboto';
  z-index: 100000;
  margin-top: 10px;
  padding: 8px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: normal;
  white-space: nowrap;
  /* color: #E6E6E6;
  background-color: #323232; */
  color: black;
  background-color: white;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.07);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 1;
  transition: all 0.2s ease-in-out;
  max-width: 500px;
  min-width: 250px;
  white-space: normal;
}

#container.metro-map-editor div.panel {
  /* margin: 2px 10px; */
}

#container.metro-map-editor div.panel #aboutHTMLblock, #tooltip #aboutHTMLblock {
  margin: 10px auto;
}

#metro label, #metro button {
  outline: none;
}

#metro .btn-default {
  padding: 5px;
}

#tableContainer.panel {
  margin-top: 20px;
}

/* .metro-map-editor table .settings-container {
  display: flex;
  flex-direction: row;
  justify-content: end;
} */
.metro-map-editor #stationList img, #tooltip img {
  /* width: 40px; */
  /* height: 40px; */
  padding: 3px;
  /* margin-right: 5px; */
}

#metro #stationList td {
  font-weight: normal;
  vertical-align: middle;
}

#stationList tr.activetr {
  background: #cc971d1c;
}

.metro-map-editor table .resourceContainer {
  font-weight: bold;
}

#metro .panel-body {
  padding: 5px 15px;
}

#metro .btn {
  font-size: 14px;
  padding: 6px 12px;
  margin-bottom: 0;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  margin-right: unset;
}

/* #tool .btn:focus,
#metro .btn:active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
} */
#toolbar .btn:hover,
#toolbar .btn:focus {
  color: #333;
  text-decoration: none;
}

.metro-map-editor .btn:active, .metro-map-displayer .btn:active, #toolbar .btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

/* default
---------------------------- */
.metro-map-editor .btn-default, .metro-map-displayer .btn-default, #toolbar .btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc !important;
}

.metro-map-editor .btn-default:focus, .metro-map-displayer .btn-default:focus, #toolbar .btn-default:focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

.metro-map-editor .btn-default:hover, .metro-map-displayer .btn-default:hover, #toolbar .btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.metro-map-active .btn-default:active, .metro-map-displayer .btn-default:active, #toolbar .btn-default:active {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
}

#toolbar span.icon-container {
  width: 40px;
  border-radius: 50%;
  display: inline-block;
  background-color: inherit;
  height: 40px;
  //padding: 14px 6px;
  transition: all 0.5s ease-in-out;
  text-align: center;

  i {
    font-size: 24px !important;
    margin-top: 11px;
    color: $text-color;
  }

  .fa-user-plus {
    color: $text-color;
  }

  &:hover {
    background-color: gainsboro;
  }
}

.metro-map-editor span.icon-container.active {
  background-color: #bf927778 !important;
}

.metro-map-editor span.icon-container.active i {
  color: #000 !important;
}

.metro-map-editor span.icon-container i {
  font-size: 24px !important;
  margin-top: 9px !important;
}