@import url('colors.css');

.panel .panel-heading .panel-title {
    font-weight: normal;
    float: none;
}

.panel .panel-heading.borderless {
    border: none;
    border-radius: 0 !important;
}

/* Panel White */
.panel.panel-darkgray {
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid var(--darkgray);
    background-color: var(--lite-gold);
}

    /* Heading */
    .panel.panel-darkgray .panel-heading {
        background-image: none;
        background-color: var(--darkgray);
        border-color: var(--darkgray);
        color: var(--white);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-darkgray .panel-heading h4.panel-title {
            color: var(--white);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-darkgray .panel-body {
        border-color: var(--darkgray);
        background-color: var(--lite-gold);
        padding: 5px;
        font-size: 13px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .panel.panel-darkgray .form-control {
        background: var(--white);
        font-size: 12px;
    }

        .panel.panel-darkgray .form-control:focus {
            background: var(--white);
            border: 1px solid var(--darkbrown);
        }

        .panel.panel-darkgray .form-control.readOnlyField {
            background: var(--litegray);
        }

    .panel.panel-darkgray select.form-control {
        background: var(--white);
        font-size: 12px;
    }

/* Panel White */
.panel.panel-darkgray {
    margin-bottom: 10px;
    border-radius: 3px;
    border: 1px solid var(--darkgray);
    background-color: var(--lite-gold);
}

    /* Heading */
    .panel.panel-darkgray .panel-heading {
        background-image: none;
        background-color: var(--darkgray);
        border-color: var(--darkgray);
        color: var(--white);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-darkgray .panel-heading h4.panel-title {
            color: var(--white);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-darkgray .panel-body {
        border-color: var(--darkgray);
        background-color: var(--lite-gold);
        padding: 5px;
        font-size: 13px;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .panel.panel-darkgray .form-control {
        background: var(--white);
        font-size: 12px;
    }

        .panel.panel-darkgray .form-control:focus {
            background: var(--white);
            border: 1px solid var(--darkbrown);
        }

        .panel.panel-darkgray .form-control.readOnlyField {
            background: var(--litegray);
        }

    .panel.panel-darkgray select.form-control {
        background: var(--white);
        font-size: 12px;
    }

/* Panel Black */

.panel.panel-black {
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    border: 1px solid var(--litegray);
    background-color: var(--darkgray);
    color: var(--white);
}

    /* Heading */
    .panel.panel-black .panel-heading {
        background-image: none;
        background-color: var(--darkgray);
        border-color: var(--darkgray);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-black .panel-heading h4.panel-title {
            color: var(--white);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-black .panel-body {
        background-color: var(--darkgray);
        padding: 5px;
        font-size: 13px;
    }

    .panel.panel-black .form-control {
        background: var(--lite-orange);
        font-size: 12px;
    }

        .panel.panel-black .form-control:focus {
            background: var(--white);
            border: 1px solid var(--darkbrown);
        }

        .panel.panel-black .form-control.readOnlyField {
            background: var(--litegray);
        }




/* Panel Lite Orange */

.panel.panel-liteorange {
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    border: 1px solid var(--litegray);
}

    /* Heading */
    .panel.panel-liteorange .panel-heading {
        background-image: none;
        background-color: var(--gold);
        border-color: var(--gold);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-liteorange .panel-heading h4.panel-title {
            color: var(--black);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-liteorange .panel-body {
        background-color: var(--lite-gold);
        border: 1px solid var(--gold);
        padding: 5px;
        font-size: 13px;
    }

    .panel.panel-liteorange .form-control {
        background: var(--white);
        font-size: 12px;
    }

        .panel.panel-liteorange .form-control:focus {
            background: var(--white);
            border: 1px solid var(--darkbrown);
        }

        .panel.panel-liteorange .form-control.readOnlyField {
            background: var(--litegray);
            color: var(--black)
        }

/* Panel Lite Red */

.panel.panel-litered {
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
    border: 1px solid var(--litegray);
}

    /* Heading */
    .panel.panel-litered .panel-heading {
        background-image: none;
        background-color: var(--litered);
        border-color: var(--red);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-litered .panel-heading h4.panel-title {
            color: var(--black);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-litered .panel-body {
        background-color: var(--litered);
        border: 1px solid var(--red);
        padding: 5px;
        font-size: 13px;
    }

    .panel.panel-litered .form-control {
        background: var(--white);
        font-size: 12px;
    }

        .panel.panel-litered .form-control:focus {
            background: var(--white);
            border: 1px solid var(--red);
        }

        .panel.panel-litered .form-control.readOnlyField {
            background: var(--litegray);
            color: var(--black)
        }


/* Panel Peach */

.panel.panel-peach {
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: 1px 1px 3px var(--darkpeach);
    border: none;
}

    /* Heading */
    .panel.panel-peach .panel-heading {
        background-image: none;
        background-color: var(--litepeach);
        border: 1px solid var(--medpeach);
        padding: 5px;
        height: initial;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

        .panel.panel-peach .panel-heading h4.panel-title {
            color: var(--black);
            font-size: 16px;
            margin-left: 10px;
        }

    /* Body */
    .panel.panel-peach .panel-body {
        background-color: var(--white);
        border: 1px solid var(--medpeach);
        padding: 5px;
        font-size: 13px;
    }

    .panel.panel-peach .form-control {
        background: var(--white);
        font-size: 12px;
    }

        .panel.panel-peach .form-control:focus {
            background: var(--white);
            border: 1px solid var(--darkbrown);
        }

        .panel.panel-peach .form-control.readOnlyField {
            background: var(--litegray);
            color: var(--black)
        }






/* Panel Card */

.panel.card-white {
    border: 1px solid var(--dark-gold);
    border-radius: inherit;
    margin-bottom: 10px;
    align-items: center;
    box-shadow: 2px 2px 3px var(--dark-gold);
}

    .panel.card-white .card-heading {
        background-color: var(--black);
        padding: 0;
        padding-left: 5px;
    }

        .panel.card-white .card-heading h5.card-title {
            color: var(--white);
            padding: 5px;
            margin: 0;
        }

    .panel.card-white .card-body {
        font-size: 12px;
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        background-color: var(--white);
    }

        .panel.card-white .card-body .card-item {
            background-color: var(--lite-gold);
            border: 1px solid var(--gold);
            font-weight: bold;
            margin: 5px;
            padding: 5px;
            font-size: 12px;
            border-radius: 3px;
        }

.panel.card-black {
    background-color: var(--lite-gold);
    border: 1px solid var(--darkgray);
    color: var(--black);
    border-radius: inherit;
    margin-bottom: 10px;
    align-items: center;
}

    .panel.card-black .card-heading {
        background-color: var(--black);
        padding: 0;
        padding-left: 5px;
    }

        .panel.card-black .card-heading h5.card-title {
            color: var(--white);
            padding: 5px;
            margin: 0;
        }

    .panel.card-black .card-body {
        font-size: 12px;
        padding: 5px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 5px;
        background-color: var(--black);
    }

        .panel.card-black .card-body .card-item {
            background-color: var(--lite-gold);
            border: 1px solid var(--gold);
            margin: 5px;
            padding: 5px;
            font-size: 12px;
            border-radius: 3px;
        }

/* Panel Checkbox */
.panel.panel-checkbox {
    margin: 0;
    padding: 5px;
    background-color: var(--litegray);
    font-size: 12px;
    border: 1px solid var(--darkgray);
}

    .panel.panel-checkbox .checkbox-value {
        font-size: 12px;
        margin-left: 10px;
    }