/**
* Bootstrap Overrides
*/
.modal-header {
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close {
        order: 2;
        margin: 0;
        font-size: 35px;
        font-weight: 100;
        text-shadow: none;
        float: none;
        margin-left: auto;
    }
}

.modal-header.sticky-header, .sticky-element {
    position: sticky;
    background-color: $light-background-color;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    z-index: 999;
    top: 22px;
    &.is-stuck {
        border-bottom: 1px solid #24262A;
        margin-bottom: 10px;
        box-shadow: 0 6px 9px -2px #0000004d;
    }
}

.modal-footer {
    border-top: none;

    &.sticky-footer {
        position: sticky;
        bottom: 0;
        z-index: 999;
        background-color: $light-background-color;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        &.is-stuck {
            border-top: 1px solid #24262A;
            margin-top: 10px;
            box-shadow: 0 -6px 9px -2px #0000004d;
        }
    }
}

.effect-footer-sentinel, .fb-scroll-sentinel {
    width: 100%;
}

.modal-content {
    border-radius: 8px;
    background-color: $light-background-color;
    position: relative;
    border: 1px solid transparent;
}
.modal-title {
    font-weight: 100;
    font-size: 25px;
    word-wrap: break-word;
}

.modal:focus {
    outline: none;
}


.modal-sm {
    width: 400px;
}

.modal-md {
    width: 500px;
}

.modal-body {
    padding-top: 0;
    overflow-wrap: break-word;
}

.sub-command,
.general-button-settings {
    .input-group-addon:first-child {
        min-width: 150px;
    }
}

.panel-group {
    margin-bottom: 0px;
}

.well {
    margin-bottom: 0px;
    background: #586163;
    border: none;
}

.well-dark {
    margin-bottom: 0px;
    background: #25282b;
    border: none;
}

/* Tabs */

.nav-tabs {
    border-bottom: 1px solid #b1b1b1;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #ffffff;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 1px solid #ffffff;
}

.nav-tabs .nav-link {
    color: #c5c5c5;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}

.nav-tabs>li>a:hover {
    border-color: transparent;
    border-bottom: 1px solid #e4e4e4;
}

.nav-tabs .nav-link:hover {
    color: #e4e4e4;
}

// Buttons

.btn {
    border-radius: 8px;
    padding: 9px 12px;
    transform: scale(1.0) translateZ(0);
    transition-property: transform;
    transition-duration: 0.3s;
    &.btn-lg {
        height: 40px;
        font-size: 14px;
    }
    &.btn-sm {
        padding: 5px 10px !important;
        font-size: 12px;
        line-height: 1.5;
    }
    &.btn-xs {
        padding: 3px 6px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
    &:hover {
        // transform: scale(1.02) translateZ(0);
    }

}

.btn.dropdown-toggle, .btn.form-control {
    &:hover {
        transform: none;
    }
}

.btn-link {
    &:hover {
        transform: none;
    }
}

.btn-danger:hover,
.btn-default:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover {
    border-color: transparent;
}

.btn-primary {
    background-color: #16809c;
    border-color: transparent;
    &:hover {
        background-color: #1f849e;
    }
}

.btn-default {
    border: 1px solid transparent;
    background-color: $default-btn-bg-color;
    color: $default-btn-text-color;
    &:disabled {
        background-color: $default-btn-bg-color;
        color: $default-btn-text-color;
        opacity: 0.5;
        &:hover {
            background-color: $default-btn-bg-color;
            color: $default-btn-text-color;
            opacity: 0.75;
        };
    }
    &:hover {
        background-color: $default-btn-hover-bg;
        // border-color: $default-btn-hover-border;
        color: $default-btn-text-color;
    }
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color: $default-btn-text-color;
    background-color: $default-btn-hover-bg;
    // border-color: $default-btn-hover-border;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 5px auto lightgray;
    outline-offset: -2px;
}

.btn.active, .btn:active {
    box-shadow: none;
}

.btn-danger, .btn-primary, .btn-success, .btn-secondary {
    padding: 9px 12px;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    color: $default-btn-text-color;
    background-color: $default-btn-hover-bg;
    border-color: transparent;
}

.dropdown-toggle > .caret {
    margin-left: 5px;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
    outline-offset: 0;
    border-color: transparent;
}

.btn-link {
    color: #12d0ff;
    &:hover, &:focus {
        color: #11add4;
    }
}

// Misc

.table-hover > tbody > tr:hover {
    background-color: $light-background-color;
}
.control-list:hover>td, .command-list:hover>td {
    color: $content-text-color;
}

.popover {
    border: 2px solid $dropdown-menu-border;
    background-color: $dropdown-menu-bg;
    border-radius: 8px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
}

.popover.top > .arrow {
    border-top-color: transparent;
    &:after {
        border-top-color: $dropdown-menu-border;
    }
}

.popover.bottom > .arrow {
    border-bottom-color: transparent;
    &:after {
        border-bottom-color: $dropdown-menu-border;
    }
}

.popover.right > .arrow {
    border-right-color: transparent;
    &:after {
        border-right-color: $dropdown-menu-border;
    }
}

.popover.left > .arrow {
    border-left-color: transparent;
    &:after {
        border-left-color: $dropdown-menu-border;
    }
}

.popover-content {
    padding: 2px;
    word-wrap: break-word;
}

.tooltip {
    font-size: 14px;
}

.tooltip-inner {
    word-wrap: break-word;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    background-color: #181a1d !important;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #181a1d !important;
}
.tooltip.top .tooltip-arrow {
    border-top-color: #181a1d !important;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #181a1d !important;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #181a1d !important;
}

.tooltip.in {
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}

.dropdown-menu {
    border-radius: 8px;
    border: 2px solid $dropdown-menu-border;
    background-color: $dropdown-menu-bg;
    z-index: 999999999;

    &:not(.effect-overflow-menu) {
        min-width: 125px;
    }
}

.dropdown-menu>li>a {
    color: $dropdown-menu-text;
    &:focus, &:hover {
        color: $dropdown-menu-text;
        background-color: adjust-color($dropdown-menu-bg, $red: -15, $green: -15, $blue: -15);
    }
}

.dropdown-menu .divider {
    background-color: $dropdown-menu-divider-color;
}

.text-muted {
    color: $muted-text-color;
}

.ui-select-bootstrap .ui-select-choices-row>span {
    color: $dropdown-menu-text;
}

.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:focus {
    text-decoration: none;
    color: $dropdown-menu-text;
    background-color: adjust-color($dropdown-menu-bg, $red: -15, $green: -15, $blue: -15);
}

.ui-select-bootstrap > .ui-select-choices, .ui-select-bootstrap > .ui-select-no-choice {
    max-height: 332px;
}

.control-type-list.ui-select-bootstrap .ui-select-choices-row > span {
    padding: 5px 0px;
    white-space: unset;
}


// Form Control
.input-group-addon {
    border: 2px solid $add-on-group-border;
    box-shadow: none;
    background-color: $add-on-group-bg;
    color: $add-on-group-text;
    border-radius: 8px;
}

.form-control {
    border: 2px solid $form-control-border;
    height: 40px;
    box-shadow: none;
    background-color: $form-control-bg;
    color: $form-control-text;
    border-radius: 8px;
    &:focus {
        box-shadow: none;
        background-color: adjust-color($form-control-bg, $red: -10, $green: -10, $blue: -10);
    }
    &.input-lg {
        height: 42px;
        font-size: 16px;
    }
}

.input-group .form-control {
    z-index: 0;
    float: none;
}

.form-group {
    margin-bottom: 25px;
    & .form-label {
        font-size: 15px;
        font-weight: 500;
        opacity: 0.9;
    }
    & .help-block {
        font-size: 13px;
        color: #9a9a9a;
    }
    &.has-error .help-block {
        color: #a94442;
    }
}

.has-error .form-control {
    &:focus {
        box-shadow: none;
    }
}

.color-picker-wrapper .input-group .input-group-addon {
    width: 40px;
    border: 1px solid #24262A !important;
    border-radius: 6px;
    &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.input-group .form-control:focus {
    z-index: 0;
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
    background-color: $form-control-bg;
    opacity: 0.75;
}

textarea.form-control {
    resize: vertical;
    padding-top: 9px;
    min-height: 40px;
    &.single-line-textarea {
        height: 40px;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
    }
}

.input-group > textarea.form-control {
    float: left !important;
}

.progress {
    background-color: $form-control-bg;
    border-radius: 8px;
    height: 30px;
}

.progress-bar {
    line-height: 30px;
    text-wrap: nowrap;
}


label {
    font-size: 15px;
    font-weight: 400;
}

// Alerts

.alert {
    border-radius: 8px;
}

.alert-info {
    color: $alert-info-text-color;
    background-color: $alert-info-bg;
    border-color: transparent;
}

.alert-warning {
    color: $alert-warning-text-color;
    background-color: $alert-warning-bg;
    border-color: transparent;
}

.alert-danger {
    color: $alert-danger-text-color;
    background-color: $alert-danger-bg;
    border-color: transparent;
}

.fb-tabbed-page {
    min-width: 500px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

// This is for pages that use tabbed navigation. IE: Commands
.fb-tab-wrapper {
    background: $fb-tab-wrapper-bg;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-bottom: 1px solid $fb-tab-wrapper-border-color;
  }

  .fb-center-tabs {
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    .fb-tab {
        padding: 10px 15px;
        color: #a09a9a;
        &:hover {
            color: $fb-tab-hover-text-color;
            cursor: pointer;
        }
        &.active {
            &:hover{
                color: $fb-tab-active-text-color;
                cursor: default;
            }
            color: $fb-tab-active-text-color;
        }
    }
    .tab-divider {
        height: 15px;
        width: 2px;
        background: $fb-tab-divider-color;
        &:first-child {
            width: 3px;
        }
    }
  }

  .fb-tabs {
    margin: 0 10px;
    border-bottom: 0px solid #eaecec;
    font-weight: 600;
    font-size: 12px;
    & > li.active > a, & > li.active > a:focus, & > li.active > a:hover {
      color: $fb-tab-hightlight-color;
      background-color: transparent;
      border: 1px solid transparent;
      border-bottom: 3px solid $fb-tab-hightlight-color;
      &.nounderline {
        border-bottom: 0;
        border: 0;
      }
    }
    & > li > a:hover {
      border-color: transparent;
      border-bottom: 3px solid $fb-tab-border-bottom-hover;
      color:  $fb-tab-border-bottom-hover;
      &.nounderline {
        border-bottom: 0;
        border: 0;
      }
    }
    & > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
        color: $fb-unselected-text-color;
    }
  }

a {
    color: #41a7ff;
    &:hover {
        opacity: 0.8;
    }
}

.command-trigger-cell {
    max-width: 100px;
    min-width: 100px;
    & .trigger {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 240px;
        display: inline-block;
        vertical-align: middle;
    }
}

// This is for pages that do NOT use tabbed navigation. IE: Live Events
.fb-notab-header-wrapper{
    height: 55px;
    background: $fb-tab-wrapper-bg;
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    border-bottom: 1px solid $fb-tab-wrapper-border-color;

    .fb-notab-title{
        margin: 0 10px;
        padding:10px 15px;
        border-bottom: 0px solid #eaecec;
        font-weight: 600;
        font-size: 12px;
        color: $fb-tab-title-color;
        background-color: transparent;
        border: 1px solid transparent;
        text-transform: uppercase;
    }

    .fb-notab-dropdown .noselect{
        margin: 0 10px;
        padding:10px 15px;
        border-bottom: 0px solid #eaecec;
        font-weight: 600;
        font-size: 12px;
        color: gray;
        background-color: transparent;
        border: 1px solid transparent;
        text-transform: uppercase;
        border-bottom: 3px solid transparent;

        &.project-dropdown-text {
            color: $project-dropdown-text-color;
            font-size: 14px;
            font-family: 'Quicksand';
            border: 0px;
            border-bottom: 0px;
        }
    }
}

.modal-title {
    cursor: default;
    user-select: none;
}


.glyphicon.glyphicon-chevron-left, .glyphicon.glyphicon-chevron-right {
    vertical-align: -0%;
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

.glyphicon-chevron-left:before {
    content: "\f053";
}

.glyphicon-chevron-right:before {
    content: "\f054";
}

/* pagination */
.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #b9b9b9;
    background-color: #68696C;
    border-color: #2F3136;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    color: #fff;
    background-color: #337ab7;
    border-color: #2F3136;
}

.pagination > li > a, .pagination > li > span {
    color: #ffffff;
    background-color: #68696C;
    border: 1px solid #2F3136;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    color: white;
    background-color: #888888;
    border-color: #2F3136;
}

.list-group-item {
    background-color: $fb-table-row-bg;
    border: 1px solid $light-background-color;
}

.ui-select-container {
    border-radius: 8px;
}

code {
    color: #daf4fc;
    background-color: #334557;
}

.update-notes img {
    max-width: 80%;
}

.input-group .form-control:has(~ .variables-btn:last-child) {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.input-group .form-control:has(~ .variables-btn.below:last-child) {
    border-bottom-right-radius: 0px;
}

.input-editor-selector-container .form-control,
.input-editor-selector-container .CodeMirror {
    border-top-left-radius: 0px !important;
}