:root {
  /* Base Colors */
  --mw-light-gray: #F7F7F7;
  /* UI Colors */
  --mw-nav-bg: var(--mw-light-gray);
}

#img-logo {
  max-height: 36px;
  width: auto;
}

.navbar-horizontal .navbar-brand img {
  height: auto;
}

.bg-gradient {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 50%;
  display: block;
  background: rgb(45,206,137);
  background: linear-gradient(87deg, #5e72e4 0%, #825ee4 100%);
  }

.bg-alert, .badge-alert {
	background: #fcc008
}

.badge-alert {
  color: #967104
}

.border-gray-light {
	border-color: #b9bdc0 !important;
}

.img-profile-project {
  width: 50px
}

.shadow {
  -webkit-box-shadow: -2px 2px 2px -1px rgba(189,189,189,1) !important;
  -moz-box-shadow: -2px 2px 2px -1px rgba(189,189,189,1) !important;
  box-shadow: -2px 2px 2px -1px rgba(189,189,189,1) !important;
}

.shadow-lg {
  -webkit-box-shadow: -5px 5px 5px -1px rgba(189,189,189,1) !important;
  -moz-box-shadow: -5px 5px 5px -1px rgba(189,189,189,1) !important;
  box-shadow: -5px 5px 5px -1px rgba(189,189,189,1) !important;
}

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }


.form-group {
  margin-bottom: 1.25rem;
}

.help-block {
  font-size: small
}

.help-block-error {
  font-size: small;
  color: #f5365c !important;
}

.table-main-item {
  font-weight: bold;
}

.custom-checkbox .custom-control-input ~ .custom-control-label,
.custom-radio .custom-control-input ~ .custom-control-label {
  font-size: .875rem;
  min-height: 1rem;
  cursor: pointer;
  height: auto;
}

td.th.table-main-item,
th.table-main-item,
.table thead th {
  white-space: normal;
}

.badge-gray {
  color: #879cb0;
  background-color: #e8e3e3
}

.badge-gray[href]:focus,.badge-gray[href]:hover {
  text-decoration: none;
  color: #fff;
  background-color: #8b96a2
}

a.avatar-sm:hover {
  text-decoration: none;
  color: #FFF;
}

.custom-file-label {
  cursor: pointer;
}

.main-title {
  color: #fff;
  margin-bottom: 0;
  display: inline-block;
  font-size: 1.25rem;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 -7px -7px 0;
}

.card-actions>* {
  flex: 0 0 auto;
  margin: 0 7px 7px 0;
}

.table-light .form-th {
  color: #8898aa;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Loader animation for cards */
.card-loading {
  animation: a 1s linear infinite;
  background: transparent;
  border: 4px solid #888;
  border-bottom-color: #fff;
  border-radius: 50%;
  height: 50px;
  left: 50%;
  margin: -25px 0 0 -25px;
  opacity: .7;
  padding: 0;
  position: absolute;
  top: 50%;
  width: 50px;
}

/* Link icons */
.fa-youtube.colored-icon,
.fa-youtube.colored-icon::before {
  color: #FF0000 !important;
}

/* Radio/checkbox borders */
.custom-control-label::before {
  border: 1px solid #b9c2ca;
}

/* Radio/checkbox cpacing */
.content-choice {
  margin-bottom: 0.25em;
}

/* Fix "wierd" disposition of buttons due to margins */
.action-buttons .btn {
  margin-right: 0;
}
.action-buttons .btn:not(:first-child) {
  margin-left: 0.5em;
}

/* Fix form selection dropdown overlapping action button when form name is too large (Variable list) */
#form-dropdown {
  white-space: normal;
}

/* Normal internal anchors get positioned behind the header, so we need hidden anchors that can be positioned with an offset */
a.internal-anchor {
  display: block;
  position: relative;
  top: -75px;
  visibility: hidden;
}

/* Link to trigger the app tour */
.apptour-link {
  font-size: 1.4rem;
  line-height: 0.4;
  color: white;
  vertical-align: middle;
}

/* Fix the element size for correct display of the app tour */
#progress-row {
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
}

.cards-row {
  margin-bottom: 30px;
}

.cards-row .card {
  height: 100%;
  margin-bottom: 0;
}

@media screen and (min-width:768px) {
  .full-dashboard #progress-row .card {
    margin-bottom: 0px;
    height: 100%;
  }
  .full-dashboard #progress-row > div:first-child {
    padding-left: 0px;
  }
  .full-dashboard #progress-row > div:last-child {
    padding-right: 0px;
  }
}

@media screen and (min-width:991.98px) {
  .collab-dashboard #progress-row > div {
    padding-left: 0;
    padding-right: 0;
  }
  .collab-dashboard #progress-row > div:last-child .card {
    margin-bottom: 0px;
    height: 100%;
  }
}

@media screen and (min-width:768px) and (max-width:991.98px) {
  .collab-dashboard #progress-row .card {
    margin-bottom: 0px;
    height: 100%;
  }
  .collab-dashboard #progress-row > div:first-child {
    padding-left: 0px;
  }
  .collab-dashboard #progress-row > div:last-child {
    padding-right: 0px;
  }
}

@media screen and (max-width:768px) {
  .full-dashboard #progress-row > div,
  .collab-dashboard #progress-row > div {
    padding-left: 0;
    padding-right: 0;
  }
  .full-dashboard #progress-row > div:last-child .card,
  .collab-dashboard #progress-row > div:last-child .card {
    margin-bottom: 0px;
    height: 100%;
  }
}

@media (max-width: 991.98px) {
  .navbar-horizontal .navbar-brand {
    position: absolute;
    top: 5px;
    left: 50%;
    margin-left: -65px;
  }
}


@media screen and (max-width:768px) {
  .table-responsive-2 table,
  .table-responsive-2 thead, .table-responsive-2 tbody, .table-responsive-2 th, .table-responsive-2 td, .table-responsive-2 tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .table-responsive-2 table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .table-responsive-2 table tr {
    margin: 0 0 1rem 0;
    border-bottom: 3px solid #ccc;
  }

  /*.table-responsive-2 tr:nth-child(odd) {
    background: #ccc;
  }*/

  .table-responsive-2 table tr td{
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding: 5px 5px 5px 50% !important;
    width: 100% !important;
    min-height: 35px;
  }

  .table-responsive-2 table tr td p {
    padding-top: 8px;
    display: inline-block;
  }

  .table-responsive-2 table tr td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 5px;
    left: 6px;
    width: 45%;
    max-width: 45%;
    padding-right: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    font-weight: bold;
  }

  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .table-responsive-2 table tr td:before { content: attr(data-th); }
  /*.table-responsive-2 table tr td:before { content: "Last Name"; }*/
}

header.navbar {
  background-color: var(--mw-nav-bg) !important;
}

/**
 * Add numbered list-group
 */
.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}

.list-group-numbered>li::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}

/**
 * Row gaps
 */
.row-gap-0 {
  row-gap: 0!important
}

.row-gap-1 {
  row-gap: .25rem!important
}

.row-gap-2 {
  row-gap: .5rem!important
}

.row-gap-3 {
  row-gap: .75rem!important
}

.row-gap-4 {
  row-gap: 1rem!important
}

.row-gap-5 {
  row-gap: 1.25rem!important
}

.row-gap-6 {
  row-gap: 1.5rem!important
}

.row-gap-7 {
  row-gap: 1.75rem!important
}

.row-gap-8 {
  row-gap: 2rem!important
}

.row-gap-9 {
  row-gap: 2.25rem!important
}

.row-gap-10 {
  row-gap: 2.5rem!important
}

.row-gap-11 {
  row-gap: 2.75rem!important
}

.row-gap-12 {
  row-gap: 3rem!important
}

.row-gap-13 {
  row-gap: 3.25rem!important
}

.row-gap-14 {
  row-gap: 3.5rem!important
}

.row-gap-15 {
  row-gap: 3.75rem!important
}

.row-gap-16 {
  row-gap: 4rem!important
}

.row-gap-17 {
  row-gap: 4.25rem!important
}

.row-gap-18 {
  row-gap: 4.5rem!important
}

.row-gap-19 {
  row-gap: 4.75rem!important
}

.row-gap-20 {
  row-gap: 5rem!important
}

/**
 * Column gaps
 */
.column-gap-0 {
  column-gap: 0!important
}

.column-gap-1 {
  column-gap: .25rem!important
}

.column-gap-2 {
  column-gap: .5rem!important
}

.column-gap-3 {
  column-gap: .75rem!important
}

.column-gap-4 {
  column-gap: 1rem!important
}

.column-gap-5 {
  column-gap: 1.25rem!important
}

.column-gap-6 {
  column-gap: 1.5rem!important
}

.column-gap-7 {
  column-gap: 1.75rem!important
}

.column-gap-8 {
  column-gap: 2rem!important
}

.column-gap-9 {
  column-gap: 2.25rem!important
}

.column-gap-10 {
  column-gap: 2.5rem!important
}

.column-gap-11 {
  column-gap: 2.75rem!important
}

.column-gap-12 {
  column-gap: 3rem!important
}

.column-gap-13 {
  column-gap: 3.25rem!important
}

.column-gap-14 {
  column-gap: 3.5rem!important
}

.column-gap-15 {
  column-gap: 3.75rem!important
}

.column-gap-16 {
  column-gap: 4rem!important
}

.column-gap-17 {
  column-gap: 4.25rem!important
}

.column-gap-18 {
  column-gap: 4.5rem!important
}

.column-gap-19 {
  column-gap: 4.75rem!important
}

.column-gap-20 {
  column-gap: 5rem!important
}

/**
 * Gaps
 */
.gap-0 {
  gap: 0!important
}

.gap-1 {
  gap: .25rem!important
}

.gap-2 {
  gap: .5rem!important
}

.gap-3 {
  gap: .75rem!important
}

.gap-4 {
  gap: 1rem!important
}

.gap-5 {
  gap: 1.25rem!important
}

.gap-6 {
  gap: 1.5rem!important
}

.gap-7 {
  gap: 1.75rem!important
}

.gap-8 {
  gap: 2rem!important
}

.gap-9 {
  gap: 2.25rem!important
}

.gap-10 {
  gap: 2.5rem!important
}

.gap-11 {
  gap: 2.75rem!important
}

.gap-12 {
  gap: 3rem!important
}

.gap-13 {
  gap: 3.25rem!important
}

.gap-14 {
  gap: 3.5rem!important
}

.gap-15 {
  gap: 3.75rem!important
}

.gap-16 {
  gap: 4rem!important
}

.gap-17 {
  gap: 4.25rem!important
}

.gap-18 {
  gap: 4.5rem!important
}

.gap-19 {
  gap: 4.75rem!important
}

.gap-20 {
  gap: 5rem!important
}

/**
 * Fix styling for DataTables
 */

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
  opacity: 0.5!important;
}

.dt-length label,
.dt-search label,
.dt-info {
  font-size: 0.875rem !important;
}