﻿/* ensure nav dropdowns appear clickable */
li.nav-item.dropdown {
    cursor: pointer;
}

/* restore normal appearance (override "a:not([href])") */
a.normal {
    color: #007bff;
    text-decoration: none;
}
    a.normal:hover {
        color: #0056b3;
        text-decoration: underline;
    }

/* align right-aligned menu items properly */
.ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
}

/* turn off pointer on disabled buttons */
.btn[disabled] {
    pointer-events: none;
}

/* add a button outline that just matches the normal form-control outline */
.btn-outline-control {
    border-color: #ced4da;
}
    .btn-outline-control:hover {
        background-color: #ced4da;
        border-color: #ced4da;
    }

/* force space between form-inline elements  */
.form-inline > *,
.form-inline .form-group .btn,
.form-inline .form-group label {
    margin-right: .5em;
}
/* ...except when in a button group */
.btn-group .btn {
    margin-right: 0;
}

/* force a little space below form-inline form-groups on all sizes (not just extra small) */
.form-inline > *,
.form-inline .form-group .btn,
.form-inline .form-group .col-form-label,
.form-inline .form-group .control-label,
.form-inline .form-group .control-text {
    margin-bottom: .25em !important;
}

/* make full width on extra-small window and below */
@media (max-width: 575px) {
    .form-group-xs-full-width {
        width: 100% !important;
    }
}

/* right-align form labels on medium window and above */
@media (min-width: 768px) {
    .form-group.row > .col-md-2.col-form-label, .form-group.row > .col-md-2.control-label, .form-group.row > .col-md-3.col-form-label, .form-group.row > .col-md-3.control-label {
        text-align: right;
    }
}

/* left-aligned control labels within inline forms */
.form-inline .col-form-label, .form-inline .control-label {
    text-align: left;
}

/* bold form labels */
.col-form-label, .control-label {
    font-weight: 500;
}

/* left-aligned control labels (force) */
.col-form-label-left, .control-label-left {
    text-align: left !important;
}

/* add indicator to required control labels */
.form-group.required .col-form-label:before, .form-group.required .control-label:before {
    content: "*";
    color: red;
    padding-right: .25em;
}

/* reduce spacing between form groups in a horizontal form */
.form-group.row {
    margin-bottom: .5em;
}

/* remove spacing between static (text-only) form groups */
.form-group.form-group-static {
    margin-bottom: 0;
}

/* remove spacing between static (text-only) form labels */
.form-group-static .col-form-label {
    padding-top: calc(.125rem + 1px);
    padding-bottom: calc(.125rem + 1px);
}

/* remove spacing between plain-text form controls */
.form-control-plaintext {
    padding-top: calc(.125rem);
    padding-bottom: calc(.125rem);
}

/* add padding for custom checkboxes and radios in form groups */
.form-group .form-custom-checkbox, .form-group .form-custom-radio, .form-group .form-custom-switch {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
}

/* add padding for custom checkboxes and radios in static form groups */
.form-group-static .form-custom-checkbox, .form-group-static .form-custom-radio, .form-group-static .form-custom-switch {
    padding-top: calc(.125rem);
    padding-bottom: calc(.125rem);
}

/* debug vertical spacing */
.form-group.debug {
    position: relative;
}

    .form-group.debug:after {
        position: absolute;
        left: 0;
        top: 50%;
        height: 1px;
        background: #c00;
        content: "";
        width: 100%;
        display: block;
    }

/* hack to add the correct padding to custom checkbox for vertical alignment */
/*.custom-checkbox:first-child {
    padding-top: calc(.375rem + 1px);
}*/

/*.custom-radio:first-child {
    padding-top: calc(.375rem + 1px);
}*/

.custom-control-inline {
  margin-right: .25em;
}

/* add a hover effect to nav pills */
.nav-pills > a:focus, .nav-pills > a:hover {
    text-decoration: none;
    background-color: #eee;
}

/* remove bottom margin from tables */
.table {
    margin-bottom: 0;
}

/* fit table cell to content */
.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

/* add an extra-small button for grids on small window and above */
@media (min-width: 576px) {
    .btn-grid, .btn-group-grid > .btn {
        padding: 0.15rem 0.4rem;
        font-size: 0.6rem;
        line-height: 1.4;
        border-radius: 0.2rem;
    }
}

/* btn-grid labels shouldn't have a bottom margin */
label.btn-grid {
    margin: 0;
}

/* lighter version of bg-info */
.bg-info-light {
    background-color: #17a2b840 !important;
}

/******************************
* UI-BOOTSTRAP OVERRIDES      *
******************************/
.pagination-inline {
    display: inline;
}

.popover-full-width {
    width: 100%;
    max-width: 100%;
}

.uib-typeahead-match {
    padding: 0 .5em .5em .5em;
}

    .uib-typeahead-match.active {
        background: linear-gradient(to bottom, #f4f4f4, #e9e9e9);
    }


/*********************************************************
* SLIDEOUT MODALS - https://bootsnipp.com/snippets/D0aq4 *
**********************************************************/
.modal-slideout .modal-dialog {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
}

.modal-slideout.modal.fade .modal-dialog {
    -webkit-transform: translate(100%,0)scale(1);
    transform: translate(100%,0)scale(1);
}

.modal-slideout.modal.fade.show .modal-dialog {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}

    .modal-slideout.modal.fade.show .modal-dialog .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
    }

.modal-slideout .modal-dialog .modal-content {
    border: 0;
}

.modal-slideout .modal-dialog .modal-header, .modal-slideout .modal-dialog .modal-footer {
    /*height: 69px;*/
    display: block;
}

    .modal-slideout .modal-dialog .modal-header h5 {
        float: left;
    }

.modal-slideout .modal-header {
    color: #fff;
    background-color: #007bff;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
