@font-face {
    font-family: sourcesans;
    src: url(fonts/SourceSansPro-Regular.ttf);
}
@font-face {
    font-family: sourcesans;
    src: url(fonts/SourceSansPro-Bold.ttf);
    font-weight:bold;
}
@font-face {
    font-family: sourcesans;
    src: url(fonts/SourceSansPro-Light.ttf);
    font-weight:300;
}

@font-face {
    font-family: muli;
    src: url(fonts/Muli-Regular.ttf);
}

/**
 * GeoMapFish - Fonts definition
 */
@font-face {
  font-family: "gmf-icons";
  src: url("fonts/gmf-icons.eot");
  src: url("fonts/gmf-icons.eot?#iefix") format("embedded-opentype"),
       url("fonts/gmf-icons.woff") format("woff"),
       url("fonts/gmf-icons.ttf") format("truetype"),
       url("fonts/gmf-icons.svg#gmf-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/**
 * GeoMapFish - Definitions for icons.
 */
.gmf-icon {
  font-style: normal;
}

.gmf-icon::after,
.gmf-icon::before {
  font-family: gmf-icons;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
};

.gmf-icon.gmf-icon-layers::after {
  content: '\e600';
}

.gmf-icon.gmf-icon-list::after {
  content: '\e602';
}

.gmf-icon.gmf-icon-map::after {
  content: '\f279';
}

.gmf-icon.gmf-icon-map-o::after {
  content: '\f278';
}

.gmf-icon.gmf-icon-check::after {
  content: '\e603';
}

.gmf-icon.gmf-icon-circle::after {
  content: '\e901';
}

.gmf-icon.gmf-icon-line::after {
  content: '\e902';
}

.gmf-icon.gmf-icon-point::after {
  content: '\e903';
}

.gmf-icon.gmf-icon-polygon::after {
  content: '\e904';
}

.gmf-icon.gmf-icon-rectangle::after {
  content: '\e905';
}

.gmf-icon.gmf-icon-text::after {
  content: '\e906';
}

.gmf-icon.gmf-icon-search-go::after {
  content: '\e908';
}


/**
 * Body, Html
 */

body, html{
    font-family:sourcesans, sans-serif;
}
html {
  height: 100%;
  width: 100%;
}

body.fullscreen {
  height: 100%;
  width: 100%;
  padding: 0px;
}

body {
  padding-top: 50px;
  height: 100%;
}

label {
  font-weight: normal;
}

h1, h2, h3, h4 {
  color: #4265AF;
  font-family: muli, sans-serif;
  display:inline-block;
}

h1{
  color: #4265AF;
}

h2{
  font-size:28px;
  color: #4265AF;
}

hr {
  margin: 10px 0px;
}

a {
  cursor: pointer;
}

.col-md-0 {
  width: 0;
}


/* -------------- *
 *      Mask      *
 * -------------- */

.mg-mask,
.mg-masked:after {
  background-color: rgba(0,0,0,0.3);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.mg-masked {
  position: relative;
}

.mg-masked:after {
  content: " ";
  display: block;
}


/* For when you want to use col- but with no padding. To be used on a .row */
.no-gutter > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}
.no-gutter {
  margin-right:0;
  margin-left:0;
}

.form-actions {
  padding: 10px 0px;
}

.form-actions .btn {
  margin-right: 4px;
}

.table-curved {
    border-collapse: separate;
}
.table-curved {
    border: solid #ccc 1px;
    border-radius: 6px;
    border-left:0px;
}
.table-curved td, .table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
.table-curved th {
    border-top: none;
}
.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}
.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}
.table-curved th:only-child{
    border-radius: 6px 6px 0 0;
}
.table-curved tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}
.table-curved tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}
table th.list-actions,
table td.list-actions {
    width:1px;
    min-width: 1px;
    white-space:nowrap;
}

table th.list-checkbox{
  width:60px;
}

table th.list-icon{
  width:10px;
}
.table > tbody > tr > td {
  vertical-align: middle;
}

.table tr.active td{
  background-color: #4265AF !important;
  color: #FFFFFF;
}

.table tr td.active{
  border-color: #4265AF;
}

.container.container-fill{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

.full.login-background{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}
#login-form{
  padding-bottom:0;
}

.login-logo {
     margin-top:50px;
}

.login-logo img{
  display:block;
  margin:auto;
  width:98%;
  max-width:500px;
}

@media (min-width: 992px){
  .login-logo {
    margin-top:50px;
    width: calc(100% - 420px);
  }
  .login{
    margin-top:60px;
    width:420px;
  }
}

@media (max-width: 992px){
    .login{
        margin-top:60px;
    }
}

.login h2 {
  text-align: center;
}

.login .forgot-password{
  display:inline-block;
  float:right;
  margin-right:15px;
  margin-top:5px;
  font-size:0.95em;

}


.form-group.danger input[type="text"],
.form-group.danger input[type="password"],
.form-group.danger select {
  border-color: #A94442;
}

.form-group.danger .help-inline {
  color: #A94442;
}

.form-group ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 999px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

footer {
  display: table;
  width: 100%;
}

.radio-description {
  color: #888888;
  margin: 0 0 10px 18px;
}

/* -------- */
.data-source-info {
  float:left;
  margin-left: 20px;
}

.data-source-info .form-group {
  width: 390px;
}

.data-sources-container {
  display: table;
  width: 100%;
}

.data-source-info input[type="checkbox"].form-control ,
.data-source-info input[type="radio"].form-control {
  width: auto;
  margin: 0px;
}

.actions-group{
    white-space:nowrap;
}
.actions-group .glyphicon,
.actions-group .fa {
  margin-right: 5px;
  width:14px;
}
.actions-group.btn-group > .btn{
  float:none;
}

/* Action responsive tweaks */

@media only screen and (max-width : 768px) {
  #preview-header .preview-header-actions .actions-group .actions-button-wrapper.btn.hidden-xs.left-borders-only {
    display:table-cell !important;
    border-right:none;
  }
  .actions-button-wrapper.btn.hidden-xs.left-borders-only > *{
    display:none;
  }
}

@media only screen and (max-width : 992px) {
  #preview-header .preview-header-actions .actions-group .actions-button-wrapper.btn.hidden-xs.hidden-sm.left-borders-only {
    display:table-cell !important;
    border-right:none;
  }
  .actions-button-wrapper.btn.hidden-xs.hidden-sm.left-borders-only > *{
    display:none;
  }
}

/*@media only screen and (max-width : 1200px) {*/
  #preview-header .preview-header-actions .actions-group .actions-button-wrapper.btn.hidden-xs.hidden-sm.hidden-md.left-borders-only {
    display:table-cell !important;
    border-right:none;
  }
  .actions-button-wrapper.btn.hidden-xs.hidden-sm.hidden-md.left-borders-only > *{
    display:none;
  }
/*}*/
.no-margin {
  margin: 0px;
}

.group-row {
  margin-left: 50px;
}

.modal {
  overflow-y: auto;
  background-color:rgba(0,0,0,0.3);
  z-index:2002;
}

.modal-open .modal {
  overflow-y: hidden;
}

.modal-dialog{
  margin-top:70px;
}

.modal.allow-interaction {
  background-color: transparent;
  bottom: auto;
  position: absolute;
  left: auto;
  right: auto;
}

.modal.allow-interaction .modal-dialog {
  height: auto;
  margin: 0;
}

.modal.allow-interaction .modal-content {
  border: 2px solid rgba(0, 0, 0, .2);
  box-shadow: none;
  -webkit-box-shaow: none;
}

.modal .modal-header button {
  float: right;
  margin: 0 0 0 1rem;
}

#map .modal.allow-interaction {
  left: 9px;
  top: 9px;
}

.input-group[class*="col-"] {
    float: none;
    padding-left: 15px;
    padding-right: 15px;
}

.input-list input{
  float: left;
  margin-right: 15px;
}

.required-field-label::before {
    content: "*";
    display: inline;
    color: red;
}


.required-field-label {
  padding-left: 5px;
}

.invalid-field input,
.invalid-field select,
.invalid-field textarea{
    border: 1px solid #A94442;
}

.invalid-field dd{
    color: #A94442;
    padding-top: 2px;
}

#block-advanced {
    display: none;
}

/* Do not show the pyramid toolbar anymore, ever... */
#pDebug {
    display: none;
}

.progress.active .progress-bar, .progress-bar.active {
    animation: 1.5s linear 0s normal none infinite progress-bar-stripes;
}
.progress-striped .progress-bar, .progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
}

.olCurrentZoomLevelControl {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.actions-right{
    text-align:right;
    /*padding-right:0;*/
}
/*
.modal-content .select2-container {
  width: 100%;
}
*/
.select2-container {
  width: 100%;
}

.select2-drop .select2-disabled .select2-result-label {
  cursor: default;
}

.helptext{
    color:#666;
    font-size:0.95em;
}

.vertical-panel {
  position: relative;
  height: 100%;
}

.vertical-panel-inner {
  height: 100%;
}

.vertical-panel.ui-resizable .vertical-panel-inner {
  margin-right: 8px;
}

.vertical-panel-content {
    width: 100%;
    height: 100%;
}

.vertical-panel-header {
  height: 54px;
  padding: 11px 10px 10px;
  -webkit-box-shadow: 0px 2px 2px 0px #ccc;
  -moz-box-shadow: 0px 2px 2px 0px #ccc;
  box-shadow: 0px 2px 2px 0px #ccc;
}

.vertical-panel-footer {
  height: 54px;
  padding: 11px 10px 10px;
  -webkit-box-shadow: 0px -2px 2px 0px #ccc;
  -moz-box-shadow: 0px -2px 2px 0px #ccc;
  box-shadow: 0px -2px 2px 0px #ccc;
}

.vertical-panel-body {
  overflow-y: hidden;
  position: absolute;
  top: 104px;
  bottom: 0;
  left: 0px;
  right: 0px;
  padding: 10px;
}

.vertical-panel-body-two-panels {
  height: calc( 100% - 108px );
  padding: 10px;
}

.vertical-panel-body-one-panel {
  height: calc( 100% - 57px );
  padding: 10px;
  overflow-y: auto;
}

.vertical-panel.ui-resizable .vertical-panel-body {
  right: 8px;
}

.resize-handle {
    position: absolute;
    left: 1px;
    top: 50%;
    bottom: 50%;
    width: 4px;
    height: 11px;
    background-image: url('../img/resize_handle.png');
}

.ui-resizable-disabled .resize-handle {
  display: none;
}

.ui-resizable-disabled .ui-resizable-handle {
  cursor: default;
}

.vertical-panel.ui-resizable .ui-resizable-handle {
  display: block;
  width: 8px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.modal .ui-resizable {
  height: 100%;
}

.modal .ui-resizable-e {
  border-width: 0px;
  right: 10px;
}

.modal .ui-resizable-s {
  border-width: 0px;
  bottom: 10px;
}

.modal .ui-resizable-se {
  right: 10px;
  bottom: 10px;
  border-width: 0px;
}

.loading-animation{
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
  -webkit-transform-origin: 50% 48%;
  transform-origin:50% 48%;
  -ms-transform-origin:50% 48%;
}
#spinning-icon{
  color:#666;
  font-size: 80px;
  margin-bottom:15px;
  display:block;
}

.modal-body.success #spinning-icon{
    color:#3c763d;
}
.modal-body.success h1{
    color:#3c763d;
}
.modal-body.success p{
    color:#3c763d;
}
.modal-body.failure #spinning-icon{
    color:#ba2d2d;
}
.modal-body.failure h1{
    color:#ba2d2d;
}
.modal-body.failure p{
    color:#ba2d2d;
}

/* ---------------------------------- *
 * FullScreen Modal with iframe in it
 * ---------------------------------- */

.modal.modal-fullscreen-with-iframe {
  margin: 30px;
  z-index: 10000;
}

.modal.modal-fullscreen-with-iframe .modal-dialog {
  height: 100%;
  margin: 0;
  width: 100%;
}

.modal.modal-fullscreen-with-iframe .modal-content {
  height: 100%;
  position: relative;
}

.modal.modal-fullscreen-with-iframe .modal-body {
  height: calc(100% - 130px);
  max-height: 100%;
  position: relative;
}

.modal.modal-fullscreen-with-iframe iframe{
  height: calc(100% - 10px);
  width: 100%;
}


/* ------------- *
 * Picture Modal *
 * --------------*/

.modal.mg-modal-picture {
  margin: 30px;
  z-index: 10000;
}

.modal.mg-modal-picture .modal-dialog {
  height: 100%;
  margin: 0;
  width: 100%;
}

.modal.mg-modal-picture .modal-content,
.modal.mg-modal-picture .modal-body {
  height: 100%;
  width: 100%;
  position: relative;
}

.modal.mg-modal-picture .modal-body {
  max-height: calc(100% - 7.5rem);
  text-align: center;
}

@media screen and (max-width: 640px) {
  .mg-modal-picture .modal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 12rem;
  }
}

/* --------------- *
 * Modal with Flex *
 * ----------------*/

.modal-dialog.mg-modal-dialog-flex {
  height: calc(100% - 100px);
}

.modal-dialog.mg-modal-dialog-flex .modal-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.modal-dialog.mg-modal-dialog-flex .modal-body {
  flex: 1;
  max-height: 100%;
  overflow-x: hidden;
  flex-basis: auto;
}

.modal-dialog.mg-modal-dialog-flex .modal-footer,
.modal-dialog.mg-modal-dialog-flex .modal-header {
  flex: 0 0 auto;
}


/* export application modal */

.exportdata-msg-container div {
  padding-top: 10px;
  padding-bottom: 10px;
}

.exportdata-msg-container .warn {
  background:
  radial-gradient(#EDC00E 15%, transparent 16%) 0 0,
  radial-gradient(#EDC00E 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#F1C40F;
  background-size:16px 16px;
  color:black;
}

.exportdata-msg-container .info {
  background:
  radial-gradient(#3A9DE0 15%, transparent 16%) 0 0,
  radial-gradient(#3A9DE0 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#3498DB;
  background-size:16px 16px;
  color:white;
}

.exportdata-msg-container .danger {
  color:white;
  background:
  radial-gradient(#E54739 15%, transparent 16%) 0 0,
  radial-gradient(#E54739 15%, transparent 16%) 8px 8px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
  radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
  background-color:#E74C3C;
  background-size:16px 16px;
}

#import_ogr_log  {
  width: 100%;
  font-family: monospace;
}
#import_ogr_log_msg {
  color:grey;
  font-style: italic;
  font-size: 12px;
  text-align: left;
}
#import_ogr_log_title {
  text-align: left;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes spin-reverse {
  0% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.has-spinner .spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s;
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

.has-spinner.active {
  cursor:progress;
}

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

.spinner-container {
  display: inline-block;
  margin-bottom: 0;
  float: left;
  width: 30px;
  padding: 8px 8px;
}

#about-modal .about-custom-html {
  margin: 5px 0;
}

#about-modal .about-modal-poweredby {
  border: 1px solid #c0c0c0;
  margin: 12px;
  padding: .35em .625em .75em;
  position: relative;
}

#about-modal .about-modal-poweredby legend {
  border: 0;
  font-size: 1em;
  width: auto;
}

#about-modal .about-modal-poweredby-text {
  background: white;
  padding: 4px;
  position: absolute;
  top: -14px;
}

#about-modal .about-modal-poweredby-content {
  position: relative;
  padding: 10px 0 0 0;
}

/*---- popover ----*/

.popover {
  max-width: none;
}

.arrow {
  overflow:visible;
}

.arrow::after{
  top:auto;
  left:auto;
}

a[role=menuitem]{
    cursor:pointer;
}

.checked-dropdown a[role=menuitem]:before{
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  width:25px;
  content: " ";
}

.checked-dropdown a[role=menuitem].active:before{
    content: "\e080";
}

.list-images {
  text-align: center;
}

.list-images img {
  width: 22px;
}

.mg-bootstrap-table {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: auto;
  /*overflow-y: hidden;*/
}

.mg-bootstrap-table.no-pagination {
  border: 1px solid #ddd;
  border-radius: 4px;
}

.mg-bootstrap-table .bootstrap-table {
  height: 100%;
  position: relative;
}

/* Datatables are ridiculously specific */
.table tbody tr.active td, .table tbody tr.active th,
.table tbody tr.active td:hover, .table tbody tr.active th:hover,
.table tbody tr.active:hover,
.table-striped tbody tr.active:nth-child(2n+1) td:hover,
.table-striped tbody tr.active:nth-child(2n+1) td:hover,
.table tbody tr.active:hover td, .table tbody tr.active:hover th
.table-striped tbody tr.active:nth-child(2n+1) th,
.table-striped tbody tr.active:nth-child(2n+1) th {
    background-color:#4265AF!important;/* datatables has an important -__- */
    background-color:rgba(60, 100, 188, 0.4) !important;
}

.fixed-table-toolbar {
  height: 60px;
}

.fixed-table-container {
  border: none;
  min-width: 100%;
  height: 100%;
  height: calc(100% - 60px);
  position: absolute;
}

.mg-bootstrap-table.no-toolbar .fixed-table-container {
  height: 100%;
}

.mg-bootstrap-table.no-toolbar .fixed-table-toolbar {
 display: none;
}

.fixed-table-header {
  border-style: solid;
  border-color: #ddd;
  border-width: 1px 1px 0 1px;
  border-radius: 0;/*4px 4px 0px 0 0;*/
  height: 40px;
}

.mg-bootstrap-table.no-pagination .fixed-table-header {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ddd;
}

.fixed-table-body {
  height: calc(100% - 130px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #ddd;
  border-radius: 0;
}

.fixed-table-body table {
  background-color: white;
  width: 100%;
}

.fixed-table-body thead {
  background-color: white;
}

.fixed-table-body thead th {
  border: none !important;
}

@-moz-document url-prefix() {
  .fixed-table-body thead .th-inner {
    margin-left: -1px;
  }
}

.fixed-table-body thead .th-inner {
  line-height: 30px;
  position: absolute;
  text-align: left;
  top: 0;
  border-left: 1px solid #ddd;
  max-width: 120px
}

.fixed-table-body thead th:first-child .th-inner {
  border-left: none;
}

.fixed-table-body td,
.fixed-table-body th {
  min-width: 100px;
  max-height: 30px;
}

.fixed-table-container .bs-checkbox .th-inner {
    padding: 8px;
}

.fixed-table-body td.bs-checkbox,
.fixed-table-body th.bs-checkbox {
    max-width: 30px;
    min-width: 30px;
}

.fixed-table-pagination {
    padding: 10px;
    /*width: 100%;*/
    position: fixed;
}

.mg-bootstrap-table.no-pagination .fixed-table-pagination {
  display: none;
}

.fixed-table-pagination .pagination-detail {
  margin-right: 20px;
}

.fixed-table-pagination .pagination-detail button {
  padding: 3px 6px;
}

.fixed-table-pagination .pagination {
  float: left !important;
}

.fixed-table-pagination .pagination,
.fixed-table-pagination .pagination-detail {
    margin: 0 4px 0 0;
}

span.current:not(.prev):not(.next):not(.first):not(.last)[data-records]::after,
.page-link:not(.prev):not(.next):not(.first):not(.last)[data-records]::after {
    content: attr(data-records);
    position: absolute;
    right: -30%;
    background-color: red;
    border-radius: 4px;
    border: 1px solid #777;
    min-width: 16px;
    height: 16px;
    text-align: center;
    z-index: 1;
    font-size: 0.8em;
    line-height: 14px;
    color: white;
    padding: 0 3px;
    transform: translateY(-50%);
}

.simple-pagination li * {
  position: relative;
}

.simple-pagination ul {
  padding-top: 8px;
}

.simple-pagination .ellipse[data-records] {
    background-color: rgba(100%, 0%, 0%, 0.5);
    border-radius: 4px;
}

/* responsive stuff, edit at your own risks */
@media screen and (max-width: 1200px) {
    .pagination .page-number,
    .pagination .page-first,
    .pagination .page-last{
       display:none;
    }
    .pagination{
        text-align:center;
        /*width:100%;*/
    }
    .fixed-table-pagination .pagination, .fixed-table-pagination .pagination-info {
        line-height:12px;
    }
    .fixed-table-pagination .pagination, .fixed-table-pagination .pagination-detail {
        margin-top:0;
        font-size:12px;
    }
    .pagination .dropdown-toggle{
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        margin-bottom:2px;
    }
}

@media screen and (max-width: 864px) {
    .fixed-table-body {
      height: calc(100% - 140px);
    }

    .fixed-table-pagination .pagination, .fixed-table-pagination .pagination-detail {
        width: 100%;
    }

    .fixed-table-pagination .pagination  li a {
        width: 50%;
    }
}

.mg-bootstrap-table.no-pagination .fixed-table-body {
  height: calc(100% - 40px);
  border: none;
}

/* Fix to make the search field appear on only
 * one line. See below why this is needed
 */
.mg-search-component.freesearch .select2-container .select2-search-field,
.mg-search-component.freesearch .select2-container .select2-input {
  width: 1px !important;
}

.select2-container .select2-search-field,
.select2-container .select2-input{
  font-size: 13px;
}

.mg-controlcontainer {
  position: absolute;
  width: 50%;
}

.mg-controlcontainer-topright {
  top: 0;
  right: 0;
}

.mg-controlcontainer-bottomright {
  bottom: 1.3em;
  right: 0;
}

.mg-controlcontainer .ol-control,
.mg-controlcontainer .mg-control-quickzoom {
  position: static;
  float: right;
  clear: both;
  margin: .5em 10px 0 0;
}

.mg-controlcontainer .ol-control.has-switcher {
  position: relative;
}

.mg-controlcontainer .ol-control.has-switcher .dropdown-toggle {
  width: 20px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: -2px;
}

/* Dropdown component */
.mg-component-dropdown .selected {
    font-weight: bold;
}

/* no select class to prevent text selection in certain case */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* draw geometry modal */
.drawgeometrymodal-mapcontainer {
  width: 100%;
  height: 370px;
}

.drawgeometrymodal-mapcontainer .mg-control-singledraw {
  position: absolute;
  top: 10px;
  right: 5px;
}


/* ------------------------ *
 *      Resource tile       *
 * ------------------------ */

.mg-tile.clickable:hover {
    box-shadow: 0 0 6px 0 rgba(100, 100, 100, 0.25);
}

.mg-tile.clickable {
    cursor: pointer;
}

.mg-tile {
    display: inline-block;
    vertical-align: middle;
    cursor: default;
}

.mg-tile-full-width {
  width: 100%;
}

.mg-tile-container {
    height: 3em;
    margin: 8px;
    overflow: hidden;
    width: 100%;
    display: inline-block;
}

img.mg-tile-thumbnail {
    height: 100%;
    vertical-align: middle;
    max-width: 60px;
}

.mg-tile-text {
    display: inline-block;
    vertical-align: middle;
    max-height: 3em;
    line-height: 1.5em;
    width: calc(100% - 68px);
}

.mg-tile-name, .mg-tile-desc {
  margin-left: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.mg-tile-desc {
    color: #aaa;
}

/* ------------------------ *
 * Handsontable for eVouala *
 * ------------------------ */

.mg-table-container-default {
  width:100%;
  height:100%;
  position: relative;
}

.mg-table-container-default-top-panel > .mg-table-container-default-left-col .form-group.row,
.mg-table-container-default-top-panel > .mg-table-container-default-right-col .form-group.row{
  margin-bottom:0;
}
.mg-table-container-default-top-panel .mg-table-container-default-left-col> *,
.mg-table-container-default-top-panel .mg-table-container-default-right-col> *{
  float:left;
}
.mg-media-modal .modal-body .mg-table-container-default {
  height: 320px;
}

.mg-media-modal .modal-body .mg-table-container-default + form{
  padding: 0
}

.modal-body .mg-table-container-default {
  height: 370px;
}

.modal-body .mg-datasourcebrowser-tabular-editable .mg-table-container-default {
  height: 335px;
}


.mg-table-container-default .mg-table-handsontable {
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.mg-table-container-default .list-images img {
  height: 20px;
  width: auto;
  margin: 2px 0;
}

.mg-qwiz-component-evouala-filter{
  width:100%;
}
.mg-qwiz-component-evouala-filter form,
.mg-qwiz-component-evouala-filter .form-horizontal{
  padding: 0;
}
.mg-qwiz-component-advanced-filter .mg-qwiz-component-advanced-filter-button,
.mg-qwiz-component-clear .mg-qwiz-component-clear-button {
    border-radius: 2px;
    float: right;
    font-size: 1em;
    font-weight: normal;
    padding: 0px 5px 0px 5px;
    width: auto;
}
@media (max-width: 1020px) {
  .mg-qwiz-component-advanced-filter .mg-qwiz-component-advanced-filter-button,
  .mg-qwiz-component-clear .mg-qwiz-component-clear-button {
      font-size: small;
  }
}
.mg-qwiz-component-advanced-filter-panel .mg-qwiz-component-export,
.mg-qwiz-component-advanced-filter-panel .mg-qwiz-component-text-filter,
.mg-qwiz-component-advanced-filter-panel .mg-qwiz-component-spatial-filter,
.mg-qwiz-component-advanced-filter-panel .mg-qwiz-component-buttoncompactfilter {
  margin-left:0;
  margin-right:0;
}
.mg-qwiz-component-advanced-filter-panel .mg-qwiz-component-text-filter{
  width:auto;
}
.mg-table-container-default-top-panel .mg-qwiz-component-evouala-filter .form-group.row .control-label.col-md-0{
  position: absolute;
  left: 20px;
  bottom: 28px;
  font-size: 12px;
  color: #666;
  width: calc(100% - 40px);
  line-height:10px;
  text-align:left;
}

.mg-qwiz-component-text-filter {
  width: 100%;
}

.mg-qwiz-component-resourcetext-filter{
  width: 100%;
}

.has-search-component .mg-table-container-default-left-col {
  width: 70%;
}

.has-search-component .mg-table-container-default-right-col {
  width: 30%;
}

.has-search-component .col-md-12 {
  padding-left:8px;
}

.mg-table-container-default-top-panel .mg-qwiz-component-evouala-filter .form-group.row .mg-qwiz-component-select-label.col-md-0{
  bottom:38px;
}

.mg-table-container-default-top-panel .mg-qwiz-component-evouala-filter .form-group.row .mg-qwiz-component-date-label.col-md-0{
  bottom:38px;
}

.mg-table-container-default-top-panel .ol-control{
  margin-top: -1px;
  padding: 0;
  position: relative;
}

.mg-qwiz-component-advanced-filter.ol-control,
.mg-qwiz-component-clear.ol-control {
  float:right;
}
.mg-qwiz-component-advanced-filter-panel {
  margin-top: -2px;
  max-width: 100%;
  width: 450px;
  position: absolute;
  top: 40px;
  right:0;
  z-index: 200;
  display:none;
  background-color:white;
  background-color:rgba(255,255,255,0.93);
  padding: 13px;
  border: solid 1px #ccc;
  border-radius: 0 0 4px 4px;
}
@media (max-width: 1084px) {
  .mg-qwiz-component-advanced-filter.ol-control {
    margin-left: -13px;
  }
  .mg-qwiz-component-advanced-filter-panel {
    top: 70px;
  }
}
.mg-table-container-default-bottom-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.has-text-filter .mg-table-handsontable,
.has-result-count .mg-table-handsontable {
  top: 40px;
}

.has-pagination .mg-table-handsontable,
.has-per-page .mg-table-handsontable {
  bottom: 50px;
}

@media (max-width: 991px) {
  .has-text-filter.has-result-count .mg-table-handsontable {
    top: 74px;
  }
}

@media (max-width: 1199px) {
  .has-pagination.has-per-page .mg-table-handsontable {
    bottom: 90px;
  }
}

/* Here be pagination dragons */

.mg-qwiz-component-pagination > div {
  display: none;
}

/**
 * The order of appearance of the paginations is a little strange.
 * When the bottom panel is in two lines, it goes
 *   x-small -> small -> medium -> x-large -> xx-large
 * Then, the pagination and per page collapse in one line and the order goes
 *   large -> x-large -> xx-large
 * This means we downgrade paginations when going from two lines to one
 * but the transition from xx-large to large is less jarring than the one from
 * xx-large to medium
 */
@media (max-width: 459px) {
  div.mg-qwiz-component-pagination-x-small {
    display: block;
  }
}

@media (min-width: 460px) and (max-width: 599px) {
  div.mg-qwiz-component-pagination-small {
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  div.mg-qwiz-component-pagination-medium {
    display: block;
  }
}

@media (min-width: 1200px) and (max-width: 1299px) {
  div.mg-qwiz-component-pagination-large {
    display: block;
  }
}

@media (min-width: 900px) and (max-width: 1099px),
       (min-width: 1300px) and (max-width: 1559px) {
  div.mg-qwiz-component-pagination-x-large {
    display: block;
  }
}

@media (min-width: 1100px) and (max-width: 1199px),
       (min-width: 1560px) {
  div.mg-qwiz-component-pagination-xx-large {
    display: block;
  }
}

/* Dragons be dead */

.simple-pagination ul {
  white-space: nowrap;
}

.simple-pagination li {
  float:none;
  display: inline-block;
}

.simple-pagination a,
.simple-pagination span {
  padding: 0 6px;
  margin: 0 4px 0 0;
}

.simple-pagination span.ellipse {
  padding: 0 3px;
}

.mg-qwiz-component-per-page {
  white-space: nowrap;
}

.mg-qwiz-component-per-page-select {
  width: auto;
  display: inline-block;
  margin-right: 4px;
}

.mg-table-container-default .mg-qwiz-component-result-count {
  height: 34px;
  line-height: 16px;
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
  width: 100px;
}

.mg-table-container-default .mg-qwiz-component-result-count .spinner {
  margin-right: 6px;
}

.mg-table-container-default .mg-qwiz-component-result-count .mg-qwiz-component-result-count-text {
  display: inline-block;
  width: 74px;
  float: right;
}

@media screen and (max-width:500px){
  .mg-table-container-default .mg-qwiz-component-result-count {
    width:40px;
  }
  .mg-table-container-default .mg-qwiz-component-result-count .mg-qwiz-component-result-count-text {
    width: auto;
    position:fixed;
    bottom: 76px;
    left: 8px;
  }
}

.mg-table-container-default-right-col .mg-qwiz-component-export {
  float:right;
}

.mg-qwiz-plugin-handsontable-rowhighlight td {
  /*
   * !important because handsontable.bootstrap.css defines the background-color
   * as 'inherit!important'
   */
   background-color: #d7e4f9 !important;
}

/* ------------------------ *
 * Media for eVouala *
 * ------------------------ */

.mg-media-image-fitwidth {
  width: 100%;
}

.mg-media-image-fitheight {
  height: 100%;
}

/* ------------------------ *
 * Toast component          *
 * ------------------------ */

.mg-component-toast {
  position: absolute;
  bottom: 5px;
  right: 5px;
  max-width: 800px;
  white-space: pre-wrap;
}

/* ------------------------ *
 * Seach component          *
 * ------------------------ */

.mg-search-component .select2-container-multi .select2-choices {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container-multi .select2-choices .select2-search-field {
  width: 1px !important;
  height: 32px;
}

.select2-container-multi .select2-choices{
  max-height: 200px;
  overflow-y: auto;
}

.mg-control-datasourcebrowser-container .select2-choices{
  max-height: 34px;
  overflow-y: auto;
}

.mg-qwiz-component-evouala-filter .select2-choices {
  max-height: 34px;
  overflow-y: auto;
}

.select2-search-choice {
  max-width: 100%;
}

.select2-search-choice > div {
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

form .mg-search-component .form-group {
  margin-bottom: 0px;
}

form .mg-search-component .input-container {
  padding: 0px;
}

.mg-search-component .select2-container .select2-search-field {
  height: 32px;
}

.mg-search-component-space {
  background-image: linear-gradient(to bottom, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%) !important;
}

.mg-search-component-keyword {
  background-image: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%) !important;
}

.mg-search-component-user {
  background-image: linear-gradient(to bottom,  #b4ddb4 0%,#008a00 100%) !important;
}

.mg-search-component-group {
  background-image: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%) !important;
}

/* ---------------------------------- *
 * TabList - ngm.SummarylistDirective *
 * ---------------------------------- */
 .ng-summary-list {
  list-style:none;
  padding-left:0;
  margin-top: 5px;
  word-wrap: break-word;
  overflow-y: scroll;
  height: 800px;
 }

 .ng-summary-list-item {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  background-color: #f1f1f1;
  margin: 10px;
  padding: 5px;
 }

 .ng-summary-list-item:hover {
   box-shadow: 0 1px 10px rgba(1,1,1,0.25), 0 10px 10px rgba(0,0,0,0.10);
 }


/* --------------------- *
 * TabForm - mg.form.Tab *
 * --------------------- */

.mg-form-tab-label-w-icon {
  padding: 0 0 0 3px;
}

/* --------------------- *
 * Home page             *
 * --------------------- */

.mg-home-watermark {
  width: 375px;
  height: 375px;
  opacity: 0.5;
  position:absolute;
  left:50%;
  top: 120px;
  margin-left: -138px;
}

.mg-home-container .mg-home-swatch .super-title {
  font-size: 36pt;
  margin-top: 100px;
}
.mg-home-container {
  padding-bottom:50px;
  padding-top:20px;
}
.mg-home-container .mg-home-swatch .h2 {
  display:block;
}

.mg-home-container .mg-home-swatch {
  text-align: center;
}
.mg-home-container .mg-home-swatch p{
  max-width: 200px;
  margin: auto;
  font-family: muli, sans-serif;
}
.mg-home-container .mg-home-swatch img{
  display:block;
  margin:auto;
  height: 160px;
}

@media only screen and (max-width : 992px) {
  .mg-home-container .mg-home-swatch .super-title {
    margin-top: 50px;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 1);
  }
  .mg-home-watermark {
    display:none;
  }
}

/* ---------------------------- *
 * Button groups in table cells *
 * ---------------------------- */
td.btn-group {
  display: table-cell;
}

td.btn-group button {
  float: none !important;
}


/* ---------------- *
 * mg.modal.Spinner *
 * ---------------- */

.mg-modal-spinner {
  z-index: 3000;
}

.mg-modal-spinner .modal-body {
  text-align: center;
}

.mg-modal-spinner-spinning-icon {
  color: #666;
  font-size: 150px;
}

.mg-modal-spinner h3 {
  display: block;
}


/* -------- *
 * Log page *
 * -------- */

.mg-log-head {
  position: relative;
}

.mg-log-actions {
  position: absolute;
  right: 0;
  bottom: 0;
}


/* ------------------------------------------ *
 * DataSourceBrowser (Core, Spatial, Tabular) *
 * ------------------------------------------ */

.mg-datasourcebrowser-switcher,
.mg-datasourcebrowser-core,
.mg-datasourcebrowser-core-container,
.mg-datasourcebrowser-spatial,
.mg-datasourcebrowser-tabular {
  height: 100%;
}

/** Switcher */

.mg-datasourcebrowser-switcher > select {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: #4265AF;
  display: none;
  margin: 0 0 20px 0;
}

@media screen and (max-width:991px){
  .mg-datasourcebrowser-switcher > select {
    font-size: 16px;
    height: 24px;
    padding: 0;
    margin: 0 0 15px 0;
  }
}

.mg-datasourcebrowser-switcher-many-dsb > select {
  display: block;
}

.mg-datasourcebrowser-switcher-many-dsb .mg-datasourcebrowser-spatial {
  height: calc(100% - 64px);
}

.mg-datasourcebrowser-switcher-many-dsb .mg-datasourcebrowser-spatial .mg-datasourcebrowser-core {
  height: 100%;
}

.mg-datasourcebrowser-switcher-many-dsb .mg-datasourcebrowser-spatial-with-title .mg-datasourcebrowser-spatial-title {
  display: none;
}


/** Spatial */

.mg-datasourcebrowser-spatial {
  margin: 5px 0 0 0;
}

.mg-datasourcebrowser-spatial .mg-datasourcebrowser-core {
  height: 100%;
}

.mg-datasourcebrowser-spatial-with-title {
  margin: 0;
}

.mg-datasourcebrowser-spatial-with-title .mg-datasourcebrowser-core {
  height: calc(100% - 6.3rem);
}

@media screen and (max-width:1084px){
  .mg-datasourcebrowser-spatial-with-title .mg-datasourcebrowser-core {
    height: calc(100% - 3.5rem);
  }
}

h2.mg-datasourcebrowser-spatial-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

@media screen and (max-width:1084px){
  h2.mg-datasourcebrowser-spatial-title {
    font-size: 18px;
    margin: 1rem 0 0 0;
  }
}

/** Tabular */

.mg-datasourcebrowser-tabular-editable .mg-datasourcebrowser-core {
  height: calc(100% - 6.3rem);
}

.mg-datasourcebrowser-tabular-btn-create {
  float: right;
}


/* -------------------- *
 * OpenLayers overrides *
 * -------------------- */

.ol-control button {
  background-color: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #333333;
  height: 34px;
  line-height: 26px;
  width: 34px;
}

.ol-control button:hover {
  background-color:#4265AF;
  color:white;
}


.ol-control button:disabled, .ol-control button:hover:disabled {
  background-color:#eee;
  color:#555;
  cursor: not-allowed;
}


/* ------------------- *
 * Accordion component *
 * ------------------- */

.mg-component-accordion .panel-title {
  cursor: pointer;
}

.mg-component-accordion-item-title-text {
  text-decoration: underline;
}

.mg-component-accordion-item-title-text {
  text-decoration: underline;
}

.panel-heading .mg-component-accordion-item-close-btn {
  float: right;
}

.panel-heading.collapsed > .panel-title > .mg-component-accordion-item-close-btn {
  display: none;
}


.mg-hide {
  display: none;
}


/* ----------------------- *
 * Overlay featyre control *
 * ----------------------- */

.mg-control-featureOverlay {
  position: relative;
  overflow: visible;
}

.mg-control-featureOverlay-feature-counter {
  position: absolute;
  top: -8px;
  right: -8px;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: red;
  color: white;
  font-size: 11px;
  line-height: 18px;
  font-weight: bold;
  text-align: center;
}


/* ------- *
 * Loading *
 * ------- */

.mg-loading {
  background-color: white;
  height: 100%;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
}

.mg-loading #spinning-icon,
.mg-loading-spinner {
  color: #666;
  display: block;
  font-size: 80px;
  left: calc(50% - 25px);
  margin: 0;
  position: absolute;
  top: calc(50% - 50px);
}

.mg-loading-message {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  display: block;
  font-size: 14pt;
  font-weight: bold;
  margin: 0;
  padding: 0.5rem;
  position: absolute;
  text-align: center;
  top: calc(50% + 35px);
  width: 100%;
  z-index: 1;
}


/* ------------------ *
 * Area drag and drop *
 * ------------------ */

.mg-component-areadraganddrop-dragbox {
  cursor: pointer;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  padding: 5px;
  border-bottom-left-radius: 5px;
  background-color: #444;
  color: white;
}

.mg-component-areadraganddrop-dragable, .mg-component-areadraganddrop-drop-area-active {
  position: relative;
}

.mg-component-areadraganddrop-drop-area-active::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(40, 40, 40, 0.4);
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  padding-top: calc(50% - (25px/2));
  font-size: 25px;
  border-radius: 20px;
  margin: 5px;
  content: "Drop here";
  font-weight: bold;
  color: white;
  text-align: center;
}

.mg-component-areadraganddrop-drop-area-hover::after {
  background-color: rgba(0, 0, 0, 0.7);;
}


/* --------------------- *
 * QWIZ pattern renderer *
 * --------------------- */

.mg-qwiz-renderer-pattern {
  height: 100%;
  overflow-y: auto;
}


/* --------------- *
 * Records pattern *
 * --------------- */

.mgpa-record-no-edit *[data-mgp-record-actions~="edit"] {
  display: none;
}


/* --------------------- *
 * Filters (filter tool) *
 * --------------------- */

.mg-layer-tree .mg-qwiz-component-filters {
  margin: 5px 0 0 0;
}

.mg-qwiz-component-filters input.form-control {
  width: calc(100% - 5px);
}

.mg-qwiz-component-filters > * {
  position: relative;
}

.mg-qwiz-component-filters .mg-qwiz-component-clear.ol-control {
  float: none;
}

.mg-qwiz-component-filters > *:after {
  clear: both;
  content: "";
  display: table;
}

.mg-qwiz-component-filters .form-group {
  margin: 0;
}

.mg-qwiz-component-filters .col-md-3,
.mg-qwiz-component-filters .col-md-9,
.mg-qwiz-component-filters .col-md-12 {
  float: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.mg-qwiz-component-filters .select2-choices {
  max-height: 30px;
}

.mg-qwiz-component-filters .select2-container-multi .select2-choices .select2-search-choice {
  line-height: 11px;
  margin: 1px;
}

.mg-wiz-component-filters .select2-search-choice-close {
  top: 2px;
}

.mg-qwiz-component-filters .select2-container-multi .select2-choices .select2-search-field {
  height: 18px
}

/* ------------------- *
 * Navigation Sub-page *
 * ------------------- */

.mg-navigation-subpage {
  display: flex;
  flex-direction: column;
}

.mg-navigation-subpage-header {
  background-color: white;
  border-bottom: 1px solid #ccc;
  display: flex;
  flex: 0 0 auto;
}

.mg-navigation-subpage-body {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.mg-navigation-subpage-backbtn {
  border-right: 1px solid #ccc;
  border-radius: 0;
  padding: 1rem 1.65rem;
  display: inline-block;
  font-size: 15pt;
  flex: 0 0 auto;
}

.mg-navigation-subpage-header-title {
  display: inline-block;
  flex: 1;
  font-size: 18pt;
  margin: 1rem 0.6rem 0.4rem 0.6rem;
}

/* --------------------- *
 * Progressbar Component *
 * --------------------- */
.mg-component-progress {
  display: flex;
  align-items: center;
  padding: 0.4em;
}

.mg-component-progress label {
  flex: 0 0 auto;
  margin-left: .4em;
}

.mg-component-progress progress {
  flex: 1 1 auto;
}


/* ------------------------ *
 * EditFeature modal        *
 * Used in: maps, data apps *
 * ------------------------ */
.mg-modal-editfeature .mg-modal-editfeature-left,
.mg-modal-editfeature .mg-modal-editfeature-right {
  float: left;
  left: 0;
  position: relative;
  top: 0;
  width: 50%;
  overflow: auto;
}

.mg-modal-editfeature-onefeature .mg-modal-editfeature-left {
  float: left;
  left: 0;
  position: relative;
  top: 0;
  width: 0%;
  overflow: auto;
}
.mg-modal-editfeature-onefeature .mg-modal-editfeature-right {
  float: left;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  overflow: auto;
}
.mg-modal-editfeature-onefeature .mg-modal-editfeature-btn-saveall {
  display: none;
}
.mg-modal-editfeature-onefeature .mg-modal-editfeature-btn-deleteall {
  display: none;
}

.mg-modal-editfeature-manyfeatures .mg-modal-editfeature-left,
.mg-modal-editfeature-manyfeatures .mg-modal-editfeature-right {
  float: left;
  height: 300px;
  left: 0;
  position: relative;
  top: 0;
  width: 50%;
  max-height: 300px;
  overflow: auto;
}
.mg-modal-editfeature-manyfeatures .mg-modal-editfeature-btn-save {
  display: none;
}
.mg-modal-editfeature-manyfeatures .mg-modal-editfeature-btn-delete {
  display: none;
}

/************************************************************************/
/* Start Of Player GUI                                                  */
/* Original source: https://codepen.io/nlfonseca/pen/MwbovQ             */
/* Modified source: https://codepen.io/anon/pen/LrXMbP                  */
/* The scss file is in darcee/static/dev/js/src/mg/video/playergui.scss */
/************************************************************************/

.mg-video-player-gui {
  height: 40px;
  width: 100%;
  display: flex;
}

.mg-video-player-gui-play-button {
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
  margin: 3px;
}

input[type="range"].mg-video-player-gui-slider {
  width: auto;
  flex: 1 0 auto;
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  cursor: pointer;
  height: 100%;
  min-height: 40px;
  overflow: hidden;
  margin: 3px;
  max-width: 1000px;
  /** Needed to remove drop shadow problems */
}
input[type="range"].mg-video-player-gui-slider:focus {
  box-shadow: none;
  outline: none;
}
input[type="range"].mg-video-player-gui-slider::-webkit-slider-runnable-track {
  background: #c7c7c7;
  content: '';
  height: 8px;
  pointer-events: none;
  overflow: hidden;
}
input[type="range"].mg-video-player-gui-slider::-webkit-slider-thumb {
  height: 10px;
  width: 10px;
  -webkit-appearance: none;
          appearance: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: -1000px 0 0 calc(1000px + -3px) #c33d44;
  margin-top: -1px;
  border: 1px solid #777;
}
input[type="range"].mg-video-player-gui-slider::-moz-range-track {
  width: 100%;
  height: 4px;
}
input[type="range"].mg-video-player-gui-slider::-moz-range-thumb {
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #777;
  position: relative;
}
input[type="range"].mg-video-player-gui-slider::-moz-range-progress {
  height: 4px;
  background: #c33d44;
  border: 0;
  margin-top: 0;
}
input[type="range"].mg-video-player-gui-slider::-ms-track {
  background: transparent;
  border: 0;
  border-color: transparent;
  border-radius: 0;
  border-width: 0;
  color: transparent;
  height: 4px;
  margin-top: 10px;
  width: 100%;
}
input[type="range"].mg-video-player-gui-slider::-ms-thumb {
  height: 10px;
  width: 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #777;
}
input[type="range"].mg-video-player-gui-slider::-ms-fill-lower {
  background: #c33d44;
  border-radius: 0;
}
input[type="range"].mg-video-player-gui-slider::-ms-fill-upper {
  background: #c7c7c7;
  border-radius: 0;
}
input[type="range"].mg-video-player-gui-slider::-ms-tooltip {
  display: none;
}

/************************************************************************/
/* End of Player GUI                                                    */
/************************************************************************/


/* ------------------------ *
 * MiniPagination Component *
 * ------------------------ */

.mg-component-minipagination {
  display: flex;
  flex-direction: row;
}

.mg-component-minipagination-btn-previous,
.mg-component-minipagination-btn-next {
  flex: 0 0 auto;
}

.mg-component-minipagination-label {
  flex: 1;
  flex-basis: auto;
  margin: 1rem;
  text-align: center;
}