.color-thumbnail {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    display: block;
    /*width: 100px;*/
    height: 40px;
}

.config-thumb {
    max-height: 90px;
}

/* This will center a form label vertically */
.col-form-label-long {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    font-size: inherit;
    line-height: 1.5;
}

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

/* https://stackoverflow.com/questions/14580346/vertical-divider-between-two-columns-in-bootstrap */
@media (min-width: 576px) {
    .col-sm-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-sm-border + .col-sm-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

@media (min-width: 992px) {
    .col-md-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-md-border + .col-md-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

.fieldset-help {
    font-weight: bold;
    font-style: italic;
    display: block;
}

/* Override Bootstrap's default behavior which is to only show the feedback if the sibling input has the .is-invalid class */
.invalid-feedback {
    display: block;
}

/* Prevent tab navigation by clicking. Can't disable the link element or programmatic navigation will stop working. */
/* Also had to remove data-toggle attribute */
.nav.nav-tabs > li.disabled {
    pointer-events: none;
}

/* Helpers to size table columns */
.table .col-1 {
    width: 10%;
}
.table .col-2 {
    width: 20%;
}
.table .col-3 {
    width: 30%;
}
.table .col-4 {
    width: 40%;
}
.table .col-5 {
    width: 50%;
}
.table tr td {
    vertical-align: middle;
}
.table tr td .profile-photo {
    width: 30px;
    height: 30px;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}
/* margin-bottom was 60px but buttons on the bottom were getting cut off */
body {
    margin-bottom: 67px; /* Margin bottom by footer height */
}
/* footer is hidden while printing so margin should be reduced so there is no empty space at the bottom */
@media print {
    body {
        margin-bottom: 1px; /* Margin bottom by footer height */
    }
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* height: 100px;  Set the fixed height of the footer here */
    /* line-height: 60px;  Vertically center the text there */
    /* background-color: #f5f5f5; */
}
.footer p {
    margin-top: 0;
    margin-bottom: 0;
}

/* .container usually has lots of empty space on the left and right sides.
    We wanted to make use of the full width of the browser window.
    However, .container-fluid can be too wide on really big screens.

    1200px is the XL breakpoint for Bootstrap. */
.container-fluid {
    max-width: 1200px;
}
/* Setting the max-width of .container-fluid has a side effect on the navbar when the browser window is
   > 1200px. Setting this padding lines everything up again... */
.navbar-expand > .container, .navbar-expand > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}
/* However, changing the padding above has a side effect on the navbar when the browser window is
   < 1200px. Setting THIS padding lines everything up FOR GOOD! */
.navbar{
    padding: 0.5rem 0;
}

/* The HMI Doors logo didn't fit well in the navbar with the default margins. */
.navbar-brand img{
    margin-bottom: -12px;
    margin-top: -12px;
    margin-right: 5px;
}

/* The site is loading a bootstrap 4 theme for the select2 library */
/* The drop down list had no height limit */
/* https://stackoverflow.com/questions/14824676/how-do-i-change-select2-box-height */
.select2-results,.select2-results__options {
    min-height: 150px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Differentiate the search box area from the selection options a bit */
.select2-search,.select2-search--dropdown {
    background: #f8f9fa !important;
}

/* Needs a top boarder for when the options drop up instead of drop down */
.select2-container--bootstrap4 .select2-dropdown {
    border-color: #ced4da;
    border-top: 1px solid #ced4da;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}


/* Below this comment is from original hmidoors.net code */

/* Pagination */
#loading
{
    width: 100%;
    position: absolute;
    top: 100px;
    left: 100px;
    margin-top:200px;
}

/*#container .pagination ul li.inactive,*/
/*#container .pagination ul li.inactive:hover*/
/*{*/
    /*background-color:#ededed;*/
    /*color:#bababa;*/
    /*border:1px solid #bababa;*/
    /*cursor: default;*/
/*}*/

/*#container .data ul li*/
/*{*/
    /*list-style: none;*/
    /*font-family: verdana;*/
    /*margin: 5px 0 5px 0;*/
    /*color: #000;*/
    /*font-size: 13px;*/
/*}*/

/*#container .pagination*/
/*{*/
    /*width: 800px;*/
    /*height: 25px;*/
/*}*/

/*#container .pagination ul li*/
/*{*/
    /*list-style: none;*/
    /*float: left;*/
    /*border: 1px solid #006699;*/
    /*padding: 2px 6px 2px 6px;*/
    /*margin: 0 3px 0 3px;*/
    /*font-family: arial;*/
    /*font-size: 14px;*/
    /*color: #006699;*/
    /*font-weight: bold;*/
    /*background-color: #f2f2f2;*/
/*}*/

/*#container .pagination ul li:hover*/
/*{*/
    /*color: #fff;*/
    /*background-color: #006699;*/
    /*cursor: pointer;*/
/*}*/

/*.go_button*/
/*{*/
    /*background-color:#f2f2f2;*/
    /*border:1px solid #006699;*/
    /*color:#cc0000;*/
    /*padding:2px 6px 2px 6px;*/
    /*cursor:pointer;*/
    /*!*position:absolute;*!*/
    /*!*margin-top:-1px;*!*/
/*}*/