/*
 * ValueCheck.com
 * Styles for forms and tables
 * Source VC Xpress
 * Version: vc-30mar2021-v01 
 */

/* Forms
  =============== */
input,
select,
textarea {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem;
}

/* Custom input fields */
input.input-custom,
select.input-custom,
textarea.input-custom {
    display: block;
    border: 1px solid #cdcdcd;
    border-radius: 0.125rem;
    padding: 0.25rem;
    outline: none;
    width: 100%;
    min-height: 2.5rem;
    /* selects need height, defined blow */
}

.input-custom:hover {
    border: 1px solid #b4b4b4;
}

.input-custom:focus,
.input-custom:active {
    border: 1px solid var(--vc-blue);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px #8cbcfe;
}

textarea {
    overflow: auto;
    height: auto;
}

fieldset {
    border: 1px solid #dedede;
    border-radius: 0;
    background: radial-gradient(#fafafa 50%, #f0f3f5);
    /* Default color gradient */
    padding: 0.5rem;
    margin: 0 auto 1rem;
}

legend {
    padding: 0 0.5rem;
    font-weight: 600;
}

/* Custom selects */

select.input-custom {
    color: #404040;
    appearance: none;
    -moz-appearance: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZklEQVQokZXO0Q2AIAxF0WviIIziJq7iKDjpM0ZFLVZKk/IB5OQOwEJjJDX/jEAC5urlnrW6cWaH9LNJEq09DsgOlCPIE/KqQjUFcqrCNRayVeGaF2Squmq+oKuqq6aCTmzqRSSxAe95WeEbZjehAAAAAElFTkSuQmCC)
            right center no-repeat,
        rgb(255, 255, 255);
    /*background: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -10 32 32'><polygon points='7 10 0 0 14 0 7 10' fill='%23003576'/></svg>") right center no-repeat;*/
    padding-right: 1rem;
}

select.input-custom::-ms-expand {
    display: none;
}

/* Selects with size > 1 */
/* #SelOptions select, #FieldListTable select */
select[size]:not([size="1"]) {
    appearance: initial;
    -moz-appearance: initial;
    background: initial;
    display: initial;
}

input[type="range"] {
    /*width: 100%;*/
    border: none !important;
}

label {
    font-weight: 600;
    max-width: 100%;
    display: inline-block;
    margin: 0 0 0.5rem 0;
}

/* same as input for vertical center */

.has-error,
.has-error:hover,
.has-error:focus,
.has-error:active {
    border: 1px solid #d33c40;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px #f4cecf;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder {
    color: #9a9a9a;
}

/* Custom VC form styles */

.input-custom.missingRequired,
.input-custom.missingRequired:focus,
.input-custom.missingRequired:active {
    border: 1px solid #dc3545;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 6px #fc8b96;
}

span.orderData {
    display: inline-block;
    margin-bottom: 0.5rem;
}

/* Custom modern browser message */

#browserMessage {
    position: absolute;
    left: 50%;
    margin-left: -30%;
    width: 60%;
}

.notice {
    background: #990820;
    /*#f9f0ff*/
    /* Default color */
    border: 1px solid #f8d7da;
    color: #ffffff;
    font-weight: bold;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

/* Custom order form messages */

div.message-container {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

div.message-container * {
    transition-property: none;
}

#orderMessage {
    width: 100%;
}

#orderMessage.redText {
    display: inline-block;
    color: #990820;
    /* Default color dk red */
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #f8d7da;
    /* Default color lt red */
}

#orderMessage:not(:empty):not(.redText) {
    display: inline-block;
    color: #004085;
    /* Default color dk blue */
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #cce5ff;
    /* Default color lt blue */
}

#orderMessage:empty {
    padding: 0 !important;
    border-radius: 0;
}

/* Custom order file upload messages */

.uploadContainer:not(:empty) {
    margin: 0 auto;
    border-radius: 0.25rem;
    background-color: #cce5ff;
    /* Default color lt blue */
    padding: 0.5rem;
    font-size: 0.8125rem;
    color: #004085;
}

.uploadContainer:empty {
    padding: 0 !important;
    border-radius: 0;
}

.uploadContainer .vcts-uploadFile {
    border-bottom: 1px solid #eee;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0;
}

.uploadContainer .vcts-uploadFile span {
    display: inline-block;
}

.uploadContainer .vcts-uploadFile span.vcts-uploadFileDelete {
    cursor: pointer;
    margin-left: 0.25rem;
}

/* Order form system notes */

div.vc-notes {
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.75rem;
}

div.vc-notes * {
    transition-property: none;
}

div.vc-notes #orderReturn:not(:empty) {
    display: inline-block;
    text-align: left;
    color: #003576;
    /* Default color dk blue */
    border-radius: 0.25rem;
    padding: 0.5rem;
    background-color: #eee;
}

/* Inline checkbox and radio */

.form-check {
    position: relative;
    display: block;
    padding-left: 1.125rem;
}

.form-check > input,
.form-check-sub > input {
    position: absolute;
    margin-top: 0.4125rem;
    /* .675rem */
    margin-left: -1.125rem;
}

/* Checkbox with radio sub-items */

.form-check-sub {
    margin-left: 2rem;
    position: relative;
    display: block;
    padding-left: 1.125rem;
}

.form-check-sub > label {
    margin-bottom: 0;
    font-weight: normal;
}

@media (max-width: 520px) {
    fieldset p {
        margin-bottom: 0.25rem;
    }
}

/* Fieldsets */

fieldset {
    max-width: 1400px;
}

.fieldset-sm {
    max-width: 800px;
}

.fieldset-group {
    /* To Do - make this a general container-group */
    border: 1px solid #dedede;
    background: radial-gradient(#fff 50%, #f0f3f5);
    /* Default color gradient */
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: table-cell;
    width: 100%;
}

/* Form sections and groups */

.form-section {
}

.form-group.flex-row {
    margin-bottom: 0.5rem;
}

.form-heading {
}

.form-sub-heading {
    font-size: 85%;
    font-weight: normal;
    display: inline-block;
}

/* Fieldsets with flex rows and cols */

fieldset .form-group.flex-row {
    align-items: center;
}

fieldset .form-group.flex-row > .flex-small {
    padding: 0.25rem 0.5rem;
}

/* Form labels */
fieldset .form-group.flex-row .flex-1-3,
.panel .form-group.flex-row .flex-1-3 {
    text-align: left;
}

@media (min-width: 520px) {
    fieldset .form-group.flex-row .flex-1-3,
    .panel .form-group.flex-row .flex-1-3 {
        text-align: right;
    }
}

/* Fieldsets with nested flex-rows */

fieldset .form-group.flex-row .flex-row {
    align-items: center;
}

fieldset .form-group.flex-row .flex-row > [class^="flex-"] {
    padding-left: 0;
}

fieldset .form-group.flex-row .flex-row label {
    font-weight: normal;
}

/* Fieldset text */

fieldset h3 {
    margin-bottom: 1rem;
}

fieldset h3.form-section-heading,
fieldset h4.form-group-heading {
    border-bottom: 2px solid #163d7a;
    margin: 0.5rem 0 1rem 0;
}

fieldset .form-group button,
fieldset .form-group [type="submit"],
fieldset .form-group [type="button"] {
    margin: 0 0.25rem 0.5rem 0.25rem;
}

fieldset .form-group.flex-row > [class^="flex-"] span {
    display: inline-block;
    margin-bottom: 0.5rem;
}

@media (max-width: 520px) {
    .form-group.flex-row {
        margin-bottom: 0.25rem;
    }

    fieldset .form-group.flex-row > .flex-small {
        padding: 0.125rem 0.25rem;
    }
}

/* Fieldsets with tables  */

fieldset > table,
fieldset > table table {
    margin: 0;
}

/* Styles to size form fields */

@media (min-width: 520px) {
    input.input-custom,
    select.input-custom,
    [type="*"].input-custom {
        /*max-width: 520px !important;*/
    }

    .input-custom {
        max-width: 520px !important;
    }

    .input-lg,
    .input-width-lg {
        max-width: 440px !important;
    }

    .input-md,
    .input-width-md {
        max-width: 320px !important;
    }

    .input-sm,
    .input-width-sm {
        max-width: 200px !important;
        min-width: 160px;
    }

    .input-xs,
    .input-width-xs {
        max-width: 120px !important;
        min-width: 90px;
    }
}

input.input-ht-sm {
    min-height: 2rem !important;
}

/* Tables
  =============== */

.table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0.5rem 0 1rem;
    width: 100%;
}

.table-custom {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0.5rem 0 1rem;
    width: 100%;
}

.table-custom thead {
    line-height: 1.25;
    font-weight: bold;
}

.table-custom th,
.table-custom td {
    /*text-align: left;*/
    padding: 0.5rem;
}

.table td,
.table-custom td {
    border-top: none !important;
    border-bottom: 1px solid #dedede !important;
}

/*.table-custom thead th {
  border-bottom: 2px solid #dedede; }*/

/* Striped tables */
.table-striped tbody tr:nth-child(2n) {
    background-color: #f8f8f8;
}

.table-striped tbody tr:nth-of-type(2n + 1) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-sm,
.table-sm th,
.table-sm td {
    padding: 0.25rem;
}

/* Tables nested in flex items (i.e columns) */
.flex-small .table-custom {
    margin-top: 0;
}

/* Hover tables */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* Images in tables */

table td img {
    display: block;
    /* change from inline to block */
}

/* Responsive tables - wrap table in div with overflow-x */

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

caption {
    padding: 1rem 0;
    caption-side: bottom;
    color: #ababab;
}

/* Custom Tables - styles just for thead - Move to custom */

.table-brand thead tr th,
.table-brand thead tr td {
    background: #d7dadb;
    background: linear-gradient(to top, #d7dadb, #f0f3f4);
    /* #bbdbfa, #d4e7fa Custom color gradient */
    /*background: linear-gradient(to bottom, #bbdbfa, #fff 2rem);*/
    border-bottom: 4px solid #03244d;
}

.table-brand thead tr th {
    text-align: center;
}

/* DataTable override to work in */

table.dataTable.table-brand thead tr th,
table.dataTable.table-brand thead tr td {
    background: #d7dadb;
    /*background: linear-gradient(to top, #bbdbfa, #d4e7fa);*/
    background: linear-gradient(to bottom, #d7dadb, #fff 2rem);
    /* Custom color gradient */
    border-bottom: 4px solid #03244d;
}

table.dataTable.table-brand thead tr th,
table.dataTable.table-brand thead tr td {
    border-bottom: 2px solid #03244d;
    border-top: 2px solid #03244d;
    /* Custom color */
}

table.dataTable.table-brand.no-footer {
    border-bottom: 2px solid #03244d;
    /* Custom color */
}

table.dataTable th input,
table.dataTable td input,
table.dataTable th select,
table.dataTable td select {
    margin-bottom: 0 !important;
}

.table-brand-alt thead tr th,
.table-brand-alt thead tr td {
    background: #d7f5da;
    background: linear-gradient(to top, #d7f5da, #ebf5ec);
    /* Custom color gradient */
    border-bottom: 4px solid #088b45 !important;
}

table.dataTable.table-sm th,
table.dataTable.table-sm td {
    padding: 0.25rem;
}

table.dataTable.compact.table thead th,
table.dataTable.compact.table thead td {
    padding: 0.25rem;
}

table#comps.dataTable tbody tr.row:hover {
    /*background-color: #007bff;*/
    background-color: rgba(0, 123, 255, 0.75);
}

table#comps.dataTable tbody tr.row:hover > .sorting_1 {
    /*background-color: #007bff;*/
    background-color: rgba(0, 123, 255, 0.75);
}

/* Media Queries for tables */

@media (max-width: 800px) {
    .table th,
    .table td,
    .table-custom th,
    .table-custom td {
        font-size: 0.875rem;
        padding: 0.25rem;
    }

    table button,
    table [type="button"],
    table [type="submit"] {
        padding: 0.5rem 0.25rem;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table .input-custom {
        min-height: 2rem;
    }
}