html,
body {
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 100px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media (max-width: 767px) {
    .nav li > form > button.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.drivible-primary-blue {
    color: #337ab7;
}
.drivible-orange {
    color: #d67f1a;
}

.btn-drivible-orange {
    background-color: #d67f1a;
    border-color: #d67f1a;
    color: white;
}

.btn-drivible-orange:hover {
    background-color: #b16915;
    border-color: #b16915;
    color: white;
}

.drivible-navbar-wrapper {
    /* We are doing some work to ensure it works at multiple break points */
    margin-right: 10px;
    margin-left: 5px;
    float: right;
    border: none;
    padding: 0;
    padding-left: 10px;
}

/*@media (min-width: 768px) {*/
/*    .navbar-right .drivible-navbar-wrapper {*/
/*        margin-right: 0px;*/
/*    }*/
/*}*/


@media screen  and (max-width: 767px) and (min-width: 250px) {
    .add-client-button-with-dealership-selector {
        margin-top: -10px;
    }

    /*.drivible-navbar-wrapper {
        margin-right: 24px;
    }*/
}

/* Ensure that even with a really long nav list (like for Admins) you can see everything */
.navbar-nav {
    background-color: black !important;
    max-height: 436px;
}

select {
    cursor: pointer;
}

/* Note Required Fields */
.form-group.required label, label.required {
    color: darkred;
}


.form-group.required label::after, label.required::after {
    content: " *";
}


/* Make the forms 400px and centered */
.widget-model-create, .widget-model-update, .drivible-block {
    max-width: 800px;
    min-width: 350px;
    /* Based on .center-block https://getbootstrap.com/docs/3.3/css/#helper-classes-center */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* .drivible-block is Used for when you want to output a section which is close enough in size to the create/update panels, apply to a row.
e.g
<div class="drivible-block row"">
<div class="col-md-12">
...
</div></div>
*/
.drivible-block {
    background-color: #ffffff;
    border-radius: 3px;
    max-width: 770px;
    min-width: 340px;
}

/*
.drivible-billingplan-selector-wrapper-table {

}
 */

.drivible-billingplan-selector-section {
    border: 2px solid black;
    border-radius: 18px;
    padding: 10px;
    cursor: pointer;
    /* height: 100%; @todo: Use JS to set the height to the max of the sections so that they are both the same length */
}

.table.drivible-billingplan-selector-wrapper-table > tbody > tr > td {
    border: none;
}

.drivible-billingplan-selector-section:hover {
    border: 2px dashed #666666;
}

.drivible-billingplan-selector-section-selected {
    border: 2px solid #f79418;
}
.drivible-billingplan-selector-section-selected:hover {
    border: 2px dashed #f79418;
}

/*
.drivible-billingplan-current-plan-section {
    margin-left: 5px;
}

.drivible-billingplan-next-plan-section {
    margin-right: 5px;
}
*/


/* The Sub Nav Menu styling */
.navbar-nav .open .dropdown-menu {

    position: inherit;
    float: none;
    width: 100%;
    display: contents;
}

.navbar-default .navbar-nav > li > a:link,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    /* The Sub-menu Header Nav menu item e.g [Admin] */
    color: white !important;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #aaa;
}


.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    /* The Sub-menu active (current page) Nav menu item */
    color: #fff;
    background-color: #337ab7;
    font-weight: bold;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #999;
    background-color: #111;
}


.billing-manager-table-option {
    text-align: center;
}

.drivible-billing-plan-purchase-modal {
    overflow: auto !important; /* Allow scrolling down the modal, especially when there's a Stripe Payment Purchase there */
}

.table tfoot {
    background-color: #f5f5f5;
}

.drivible-true-ok-circle {
    color: #ffa600;
}

.drivible-false-remove-circle {
    color: #aaaaaa;
}


.flash {
    animation-name: flash-animation;
    animation-duration: 0.8s;
}


@keyframes flash-animation {
    from { background: yellow; }
    to   { background: default; }
}


.drivible-search-highlight {
    font-weight: bold;
    /*color: yellow;*/
    background-color: lightyellow;
}

.drivible-dealership-thumbnail-list-preview {
    max-width: 250px;
    max-height: 100px;
}