:root {
    --dark-grey: #2E2E2E;
    --dark-blue: #2C3E50;
    --dark-red: #691818;
    --bright-blue: #2546F0;
    --bright-red: #D32F2F;
}

body {
    line-height: unset;
    margin-bottom: 50px;
}

nav {
    margin-bottom: 10px;
}

footer {
    position: fixed;
    height: 45px;
    bottom: 0;
    width: 100%;
    background-color: var(--bright-red);
    color: white;
    text-align: center;
    padding: 15px 0;
}

/* when using the <i class=""></i> in html it is replaced with SVG for font awesome use. */
.card-header > svg, button > svg, a[class^="btn"] > svg, i[class^="fa"] {
    margin-right: 10px;
}

button[class^="k-grid-edit"], button[class^="k-grid-edit"]:hover {
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}


button[class^="k-grid-remove"], button[class^="k-grid-remove"]:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}


input {
    display: inline-block;
    vertical-align: top;
}

    input[data-val-required], select[data-val-required] {
        border: solid 2px red;
    }

.k-combobox.k-invalid {
    border: 2px solid red;
    border-bottom: 40px solid red;
}

#BondPoolApplicationDetails .k-combobox.k-invalid {
    border-bottom: 2px solid red;
}

.requiredDropdown span.k-widget.k-dropdown.k-header.form-control {
    border: solid 2px red;
    border-bottom: 40px solid red;
}

fieldset.fieldset-border {
    border: 1px solid #a9a9a9 !important;
    padding: .5em !important;
    margin: 0 0 .5em 0 !important;
    -webkit-box-shadow: 0 #000000;
    /*box-shadow: 0 #000;*/
    border-radius: 6px;
    box-shadow: 0 0 10px #ddd;
}

fieldset.inline {
    display: inline;
}

legend.legend-border {
    font-size: 1.0em !important;
    font-weight: bold !important;
    text-align: left !important;
    width: auto;
    padding: 0 10px !important;
    border-bottom: none;
    background-color: #fff;
    margin: 0;
}

legend > label {
    padding-right: 0 !important;
}

.red {
    color: #ff0000;
}

.blue {
    color: #0000ff;
}

.yellow {
    color: yellow;
}

.field-validation-error {
    color: #ff0000;
}

.card {
    margin-bottom: 15px;
}

.card-header {
    background-color: var(--bright-blue);
    color: #ffffff;
    height: 25px;
    padding: 1px 5px;
}

.card-body {
    padding: 3px 10px;
}

.form-label {
    font-weight: bold;
    margin-bottom: 0;
}

.k-detail-cell .k-tabstrip .k-content {
    padding: 0.2em;
}

/* override the padding in the kendo grid headers */
.k-grid-header .k-header > .k-link {
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    display: initial;
}

label {
    margin-bottom: unset;
}

.savePanel {
    height: 65px;
    padding: 5px;
    width: 100%;
    display: none;
    background: lightgrey;
    position: fixed;
    bottom: 0;
    margin: 0;
    overflow: hidden;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    transition: height 0.5s ease;
    box-shadow: 0 3px 30px 0 gray;
    left: 0;
    z-index: 100;
}

    .savePanel > button {
        float: right;
        width: 150px;
        box-shadow: 5px 5px 10px grey;
        right: 35px;
    }


.flip-card {
    position: relative;
    background-color: transparent;
    width: 100%;
    height: auto;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card-front, .flip-card-back {
    position: relative;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    color: black;
    z-index: 1;
}

.flip-card-back {
    position: absolute;
    transform: rotateY(180deg);
    z-index: 2;
}

.redBorder {
    border: solid 2px red;
}

.gridDropDown {
    overflow: visible !important;
}

.gridDropDownColumn {
    width: auto !important;
    min-width: 300px !important;
}

.gridCustomEditButton {
    margin: 0;
}

.gridCustomDeleteButton {
    margin: 0;
    margin-left: 5px;
}


.footerText {
    font-size: 25px;
    font-weight: bold;
}

/* this is needed for grid popup edit containers */
div.k-edit-form-container {
    width: auto;
    height: auto;
}

.MaintenanceMessage {
    margin: 0;
    padding: 10px 25px;
    background-color: lightyellow;
}

.modal {
    z-index: 10500;
}

.modal-backdrop {
    z-index: 10400;
}

.k-grid-pager .k-pager-numbers .k-button {
    color: var(--bright-blue);
}

.k-grid-pager .k-pager-numbers .k-state-selected {
    background-color: var(--bright-blue);
}