/* layout tags driven by accessibility requirements */
/* should be considered if we move towards a more accessible and responsive design */
/* these classes may be shared between apply and manage sites */
/* borrowing Bootstrap's 12 column approach */
/* https://getbootstrap.com/docs/4.0/layout/grid/ */

.sg-form-layout {
  margin-top: 0.3rem;
  overflow-x: auto;
}

.sg-form-layout.border-top {
  border-top: solid 1px #ccc;
}

.sg-form-layout .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  margin: 0.3rem 0 0 0;
}

.sg-form-layout .row > * {
  box-sizing: border-box;
  padding: 0.2rem;
}

.sg-form-layout .row > :first-child {
  padding-left: 0;
}

.sg-form-layout .row > :last-child {
  padding-right: 0;
}

.sg-form-layout .row > .col {
  flex: 1 0 0;
}

.sg-form-layout .row > .col-1 {
  flex: 0 0 8.3%;
}

.sg-form-layout .row > .col-2 {
  flex: 0 0 16.6%;
}

.sg-form-layout .row > .col-3 {
  flex: 0 0 25%;
}

.sg-form-layout .row > .col-4 {
  flex: 0 0 33.3%;
}

.sg-form-layout .row > .col-5 {
  flex: 0 0 41.6%;
}

.sg-form-layout .row > .col-6 {
  flex: 0 0 50%;
}

.sg-form-layout .row > .col-7 {
  flex: 0 0 58.33%;
}

.sg-form-layout .row > .col-8 {
  flex: 0 0 66.6%;
}

.sg-form-layout .row > .col-10 {
  flex: 0 0 83.3%;
}

.sg-form-layout .row > .col-12 {
  flex: 0 0 100%;
}

.sg-form-layout .row > .col-label {
  font-weight: bolder;
}

.sg-form-layout .row fieldset {
  width: unset;
}

.sg-form-layout .row .form-label {
  font-weight: bolder;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.sg-form-layout .row .form-control {
  box-sizing: border-box;
  display: block;
  line-height: normal !important;
  width: 100%;
}

.sg-form-layout.appform .alert { margin-top: 1em; }
.sg-form-layout.appform p { margin-top: 1em; }

/* this is to coerce the manage site and apply sites to be more consistent, as
  there are some differences in the way the form layout is rendered across the sites
  with what appears to be unnecessary padding and height on the form controls
*/

#sg-popup .sg-form-layout input.form-control,
#sg-popup .sg-form-layout select.form-control,
.sg-body .sg-form-layout input.form-control,
.sg-body .sg-form-layout select.form-control  {
  height: auto;
  padding: 4px 6px;
}

#sg-popup .sg-form-layout input.form-control,
.sg-body .sg-form-layout input.form-control {
  padding: 5px 6px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  #sg-popup .sg-form-layout select,
  .sg-body .sg-form-layout select {
    -webkit-appearance: menulist-button !important;
    height: 27px !important;
  }
}

table .sg-form-layout.sg-card.ftAbnInfo,
div.ftEditColumns .sg-form-layout.sg-card.ftAbnInfo,
div.ftViewColumns .sg-form-layout.sg-card.ftAbnInfo {
  border: 0;
  margin: 0;
}

table .sg-form-layout.sg-card.ftAbnInfo .card-body,
div.ftEditColumns .sg-form-layout.sg-card.ftAbnInfo .card-body,
div.ftViewColumns .sg-form-layout.sg-card.ftAbnInfo .card-body {
  padding: 0;
}

table .sg-form-layout.sg-card.ftAbnInfo .row,
div.ftEditColumns .sg-form-layout.sg-card.ftAbnInfo .row,
div.ftViewColumns .sg-form-layout.sg-card.ftAbnInfo .row {
  display: block;
}

table .sg-form-layout.sg-card.ftAbnInfo .card-header,
div.ftEditColumns .sg-form-layout.sg-card.ftAbnInfo .card-header,
div.ftViewColumns .sg-form-layout.sg-card.ftAbnInfo .card-header {
  display: none;
}

table .sg-form-layout.sg-card.ftAbnInfo .card-footer,
div.ftEditColumns .sg-form-layout.sg-card.ftAbnInfo .card-footer,
div.ftViewColumns .sg-form-layout.sg-card.ftAbnInfo .card-footer {
  background-color: transparent;
  margin-top: 0.5rem;
  padding: 0;
}

.sg-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border: 1px solid grey;
  border-radius: .25rem;
  margin: .25rem 0 .25rem 0;
}

.sg-card * {
  box-sizing: border-box;
}

.sg-card .card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1rem;
}

.sg-card .card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-bottom: 1px solid #c0c0c0;
}

.sg-card .card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid #c0c0c0;
}

.sg-card .card-body .row > * {
  padding: 0.1rem ;
}

table .sg-card {
  margin: 0.5rem;
}

.sg-map {
  width:100%;
  min-width:400px;
  height:300px;
  background-color:grey;
}

.card .card-body button.btn.btn-link {
  border: 1px solid;
}


/* Container */
.sg-pan-control {
  border-radius: 4px;
  box-shadow: none;
  display: flex;
  flex-direction: row;
}

/* Buttons */
.sg-pan-btn {
  display: flex;
  gap: 6px;          /* spacing between buttons */
  align-items: center;
  justify-content: center;

  padding: 0;
  line-height: 1;

  border: 1px solid #dcdcdc;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}


/* Placement */
.sg-pan-up    { grid-area: 1 / 2; }
.sg-pan-left  { grid-area: 2 / 1; }
.sg-pan-right { grid-area: 2 / 3; }
.sg-pan-down  { grid-area: 3 / 2; }

/* Hover */
.sg-pan-btn:hover {
  background: #f4f8fb;
  border-color: #2c8fb7;
  color: #2c8fb7;
}

/* Active (click) */
.sg-pan-btn:active {
  background: #e2f1f7;
  transform: scale(0.95);
}

/* Keyboard focus */
.sg-pan-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(44,143,183,0.35);
}

/* Make zoom + pan feel unified */
.leaflet-control-zoom,
.sg-pan-control {
  margin-bottom: 10px;
}