/*!
 * CC Portal stylesheet
 * 
 * By Roefja B.V.
 * Email: info@roefja.com
 * Website: roefja.com
 * 
 */

#main-content {


  display: flex;
  padding: 20px;
  flex-direction: row;
  flex: 0
}


/* Panels */
.panel {
  display: flex;
  flex-direction: column;
}

.panel_header {
  display: flex;
  justify-content: space-between;
  background-color: var(--cc-grey-color);
  padding: 5px 10px;
}

.panel_body {
  padding: 20px 10px;
}

.field_with_label {
  margin-bottom: 5px;
}

.field_with_label label {
  color: var(--cc-blue-color);
}

.field_with_label .span.status {
  padding-top: 3px;
  padding-bottom: 3px;
}

.field_with_label a {
  margin-left: -5px;
}

.form-group.edit-group.form-type-datetimepicker {
  flex-wrap: nowrap;
}

#create_areas .panel_body {
  display: flex;
  column-gap: 40px;
}

.areas-list {
  width: 500px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
}

.area-map {
  width: 100%;
  flex-grow: 1;
  text-align: center;
  padding: 30px;
  max-height: 60vh;
  display: flex;
}

svg g#zones * {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

svg g#zones>g.selected #outline {
  fill: yellow !important;
}

svg g#zones>g.selected #outline-stroke {
  stroke: yellow !important;
}


svg g#sensorgroups>g.active>circle {
  fill: #1DFF00 !important
}

.new_zone_wrapper {
  min-width: 300px;
  max-width: 100%;
  margin-right: var(--margin-gap);
  border-radius: var(--border-radius);
  display: flex;
  position: relative;
  height: 150px;
  padding: 10px;
  border: 1px solid var(--cc-blue-color);
  cursor: pointer;
}

.new_zone_holder {
  margin: auto;
  position: relative;
  font-size: 2em;
}


#create_areas.edit-mode svg g#zones {
  cursor: pointer;
}


/* KANBAN */

.kanban_col {
  background-color: var(--cc-grey-color);
}

.kanban_col {
  min-width: 300px;
  max-width: 100%;
  margin-right: var(--margin-gap);
  border-radius: var(--border-radius);
}

.kanban_header {
  padding: 10px;
  border-radius: var(--border-radius);
  background-color: var(--cc-blue-color);
}

.sensorgroup_header_right i,
.kanban_header i {
  margin-right: 10px;
}

.kanban_body {
  padding: var(--margin-gap);
}

.info_row label {
  color: var(--cc-blue-color);
  margin-right: 10px;
}

.info_row {
  display: flex;
}


.zone_connected-header>label {
  color: var(--cc-blue-color)
}

.zone_connected {
  background-color: var(--cc-bg-color);
  padding: var(--margin-gap);

  border-radius: var(--border-radius);
  border: 1px solid #707070
}

.zone_connected-header {
  display: flex;
  justify-content: space-between;
}

.zone_connected-header i {
  margin-left: 10px;
}

.zone_kanban:not(.editing) i.save-conn-zone,
.zone_kanban:not(.editing) i.save-conn-controller {
  display: none;
}

.zone_kanban.editing i.edit-conn-zone,
.zone_kanban.editing i.edit-conn-controller {
  display: none;
}


.zone_connected>.childs>span {
  display: block;
}

.area-map {
  position: relative;
}

.area-map .loading {
  background-color: rgba(0, 18, 60, .75);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.area-map .loading .loading_wrapper {
  margin: auto;
  display: flex;
  column-gap: 10px;
  row-gap: 10px;
}

.area-map .loading .loading_wrapper span {
  display: block;
}

.area-map .loading .loading_wrapper i {
  margin: auto;
}

#sidebar>div:not(.buttons)>a {
  flex-direction: row;
}

.zone_connected>.childs>.controller-row {
  display: flex;
  flex-direction: row;

  justify-content: space-between;

}

.zone_connected .buttons {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: auto;
  margin-bottom: auto;
}




.mojo-gate-sorter .gates {
  /* display: flex;*/
  position: relative;
}

.mojo-gate-sorter .gates>div {
  float: left;
  margin-left: 20px;
}

.mojo-gate-sorter svg {
  transform: scale(1.1);

}


.mojo-gate-sorter svg #unit-id {
  margin-left: -15px;
}