/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

.odd {
    background-color: azure;
}

.even {
    background-color: white;
}

.fillCorrect {
    background-color: palegreen;
}

.fillIncorrect {
    background-color: lightcoral;
}

.fill1 {
    background-color: lightblue;
}

.fill2 {
    background-color: lightskyblue;
}

.fill3 {
    background-color: lightsteelblue;
}

.fill4 {
    background-color: powderblue;
}

.fill5 {
    background-color: skyblue;
}

.fill6 {
    background-color: turquoise;
}

.fill7 {
    background-color: paleturquoise;
}

.fill8 {
    background-color: orchid;
}

.creator {
    background-color: lavender;
}

.redtext {
    color: crimson;
}

.greentext {
    color: forestgreen;
}

.mainFormSectionLabel {
    width: 150px;
    text-align: right;
}

.mainFormSectionLabelSmall {
    width: 100px;
    text-align: right;
}

.mediumTopMargin {
    margin-top: 10px;
}

.largeTopMargin {
    margin-top: 20px;
}

.smallTopMargin {
    margin-top: 5px;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
collapsiblecontent {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.tabData {
    text-align: center;
}

.tabDataHead {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.tabDataBold {
    text-align: center;
    font-weight: bold;
}

.tabDataUpDown {
    padding-top: 2px;
    padding-bottom: 2px;
}

.tabDataHeadUpDown {
    padding-top: 5px;
    padding-bottom: 5px;
}

.tabDataHeadBg {
    background-color: lightgrey;
}