$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #ecf0f1;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #b4bcc2;
$gray-600: #95a5a6;
$gray-700: #7b8a8b;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
$blue: #2C3E50;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #E74C3C;
$orange: #fd7e14;
$yellow: #F39C12;
$green: #18BC9C;
$teal: #20c997;
$cyan: #3498DB;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-200;
$dark: $gray-700;
$yiq-contrasted-threshold: 175;
$link-color: $success;
$font-family-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-size-base: 0.9375rem;
$h1-font-size: 3rem;
$h2-font-size: 2.5rem;
$h3-font-size: 2rem;
$dropdown-link-color: $gray-700;
$dropdown-link-hover-color: $white;
$dropdown-link-hover-bg: $primary;
$nav-link-padding-y: .5rem  !default;
$nav-link-padding-x: 2rem;
$nav-link-disabled-color: $gray-600  !default;
$nav-tabs-border-color: $gray-200;
$navbar-padding-y: 1rem;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $success;
$pagination-color: $white;
$pagination-bg: $success;
$pagination-border-width: 0;
$pagination-border-color: transparent;
$pagination-hover-color: $white;
$pagination-hover-bg: darken($success, 15%);
$pagination-hover-border-color: transparent;
$pagination-active-bg: $pagination-hover-bg;
$pagination-active-border-color: transparent;
$pagination-disabled-color: $gray-200;
$pagination-disabled-bg: lighten($success, 15%);
$pagination-disabled-border-color: transparent;
$progress-height: 0.625rem;
$progress-font-size: 0.625rem;
$list-group-hover-bg: $gray-200;
$list-group-disabled-bg: $gray-200;
$close-color: $white;
$close-text-shadow: none;

@import "node_modules/bootstrap/scss/bootstrap";

// Flatly 4.3.1
// Bootswatch


// Variables ===================================================================

// Navbar =======================================================================

.bg-primary {
  .navbar-nav .active > .nav-link {
    color: $success !important;
  }
}

.bg-dark {
  background-color: $success !important;
  &.navbar-dark .navbar-nav {
    .nav-link:focus,
    .nav-link:hover,
    .active > .nav-link {
      color: $primary !important;
    }
  }
}

// Buttons =====================================================================

.btn {
  &-success,
  &-success,
  &-secondary,
  &-secondary:hover,
  &-warning,
  &-warning:hover {
    color: #fff;
  }
}

// Typography ==================================================================

// Tables ======================================================================

.table {

  &-primary,
  &-secondary,
  &-success,
  &-info,
  &-warning,
  &-danger {
    color: #fff;
  }

  &-primary {
    &, > th, > td {
      background-color: $primary;
    }
  }

  &-secondary {
    &, > th, > td {
      background-color: $secondary;
    }
  }

  &-light {
    &, > th, > td {
      background-color: $light;
    }
  }

  &-dark {
    &, > th, > td {
      background-color: $dark;
    }
  }

  &-success {
    &, > th, > td {
      background-color: $success;
    }
  }

  &-info {
    &, > th, > td {
      background-color: $info;
    }
  }

  &-danger {
    &, > th, > td {
      background-color: $danger;
    }
  }

  &-warning {
    &, > th, > td {
      background-color: $warning;
    }
  }

  &-active {
    &, > th, > td {
      background-color: $table-active-bg;
    }
  }

  &-hover {

    .table-primary:hover {
      &, > th, > td {
        background-color: darken($primary, 5%);
      }
    }

    .table-secondary:hover {
      &, > th, > td {
        background-color: darken($secondary, 5%);
      }
    }

    .table-light:hover {
      &, > th, > td {
        background-color: darken($light, 5%);
      }
    }

    .table-dark:hover {
      &, > th, > td {
        background-color: darken($dark, 5%);
      }
    }

    .table-success:hover {
      &, > th, > td {
        background-color: darken($success, 5%);
      }
    }

    .table-info:hover {
      &, > th, > td {
        background-color: darken($info, 5%);
      }
    }

    .table-danger:hover {
      &, > th, > td {
        background-color: darken($danger, 5%);
      }
    }

    .table-warning:hover {
      &, > th, > td {
        background-color: darken($warning, 5%);
      }
    }

    .table-active:hover {
      &, > th, > td {
        background-color: $table-active-bg;
      }
    }

  }
}

// Forms =======================================================================

// Navs ========================================================================

.nav-tabs {
  .nav-link.active,
  .nav-link.active:focus,
  .nav-link.active:hover,
  .nav-item.open .nav-link,
  .nav-item.open .nav-link:focus,
  .nav-item.open .nav-link:hover {
    color: $primary;
  }
}

.pagination {
  a:hover {
    text-decoration: none;
  }
}

// Indicators ==================================================================

.close {
  text-decoration: none;
  opacity: 0.4;

  &:hover,
  &:focus {
    opacity: 1;
  }
}

.badge {
  &-secondary,
  &-warning {
    color: #fff;
  }
}

.alert {
  border: none;
  color: $white;

  a,
  .alert-link {
    color: #fff;
    text-decoration: underline;
  }

  @each $color, $value in $theme-colors {
    &-#{$color} {
      @if $enable-gradients {
        background: $value linear-gradient(180deg, mix($body-bg, $value, 15%), $value) repeat-x;
      } @else {
        background-color: $value;
      }
    }
  }

  &-light {
    &,
    & a,
    & .alert-link {
      color: $body-color;
    }
  }
}

// Progress bars ===============================================================

// Containers ==================================================================
.modal .close{
  color: $black;

  &:not(:disabled):not(.disabled):hover,
  &:not(:disabled):not(.disabled):focus {
    color: $black;
  }
}


// Custom

html {
  height: 100%;
}

body {
  height: 100%;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background-color: #f5f5f5;
}

svg {
  width: 20px;
  height: 20px;
  fill: lighten($secondary, 15%);
}

.svg-active {
  fill: $white;
}

.svg-inactive {
  fill: lighten($secondary, 15%);
}

.flow {
  display: none;
}

.progress-hidden {
  visibility: hidden;
}

@media (max-width: 575px) {
  #tile-area {
    display: flex;
    flex-wrap: wrap;
  }

  #tile-area > div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;

    width: 50% !important;
    padding-bottom: 33% !important;
  }

  #tile-area > div > video {
    object-fit: cover;
  }

  #tile-area > div > div,
  #tile-area > div > button {
    display: none !important;
  }

  #meeting-container {
    height: auto !important;
  }

  #roster-tile-container {
    height: auto !important;
  }

  #roster-container {
    height: auto !important;
  }

  .bs-component {
    max-height: 210px;
    height: auto !important;
  }

  #tile-container {
    height: auto !important;
  }
}