/*
 * BODY
 */
 html, body {
    width: 100%;
    /*
        When a fullscreen overlay modal is opened, Fomantic-UI is adding a height
        to the body element that is 100px taller than the actual inner window height.
        This triggers a reload of vendors because the map bounds change.

        !important is used to prevent this.
     */
    height: 100% !important; 
    margin: 0;
  }
  
  /* Inverted */
  body.inverted {
      background: #333;
      color: #fff;
  }
  
  /*
   * GRID
   */
  .ui.fullscreen.grid {
      width: 100%;
      margin: 0;
  }
      .ui.fullscreen.grid .unpadded.column {
          padding: 0;
      }
  
      .ui.fullscreen .fluid.text.container {
          max-width: 100%;
          padding: 0;
      }
      
      @media (min-width: 768px) {
          .ui.fullscreen.grid > .column {
              max-height: 100vh;
              overflow: auto;
          }
  
          .ui.fullscreen .fluid.text.container {
              padding: 0 3em;
          }
      }
  
  /*
   * GRID CONTAINER
   */
  .ui.text.container {
      margin-top: 90px;
      margin-bottom: 30px;
  }
  @media (min-width: 768px) {
      .ui.text.container {
          margin-top: 110px;    
      }
  }
  
  /* 
   * HEADERS
   */
  .ui.header {
      font-weight: 500;
  }
      .ui.header > p:last-child {
          margin-bottom: 1.5em;
      }
  
  /*
   * FORMS
   */
  @media (max-width: 767px) {
      .ui.form .unstackable.fields {
          margin-bottom: 1em;
      }
  }
  
  .ui.form label .icon,
  .ui.form p .icon {
      margin: 0 1px 2px;
  }
  
  .ui.form .ui.selection.dropdown {
      font-size: 1rem;
      white-space: nowrap;
  }
  
  /* Inverted */
  .ui.inverted.form .field > label {
      color: currentColor;
  }
  .ui.inverted.form input,
  .ui.inverted.form textarea {
      background: #333 !important;
      color: #fff !important;
      border-color: rgba(255, 255, 255, 0.1);
  }
  .ui.inverted.dropdown,
  .ui.inverted.selection.dropdown {
      background: #333;
  }
      .ui.inverted.dropdown .menu {
          background: #333;
      }
          .ui.inverted.dropdown .menu > .item:first-child {
              border-top-width: 1px;
          }
          .ui.inverted.selection.dropdown .menu > .item {
              border-top: 1px solid #424242;
          }

/*
 * Modals
 */
@media (max-width: 767.98px) {
    .ui.overlay.fullscreen.modal > .scrolling.content.content.content {
        max-height: calc(100vh - 1rem);
    }
    .ui.overlay.fullscreen.modal > .content.content.content {
        min-height: calc(100vh - 1rem);
    }
}

/*
 * Utilities
 */
@media (max-width: 767px) {
    [class*="not mobile"] {
        display: none !important;
    }
}
@media (min-width: 768px) {
    [class*="mobile only"] {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    [class*="not tablet"] {
        display: none !important;
    }
}