/* Source: https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle */
@import "shared/snippets/font-awesome-4.7.0/css/font-awesome.min.css";

/* Source: https://www.w3schools.com/howto/howto_css_tooltip.asp */
/* Tooltip container */

/* Tooltip text */

/* Tooltip arrow */

/* Show the tooltip text when you mouse over the tooltip container */

/* Source: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky */
/* Navigation Bar Padding */

/* Tables */
table {
    /*font-family: arial, sans-serif;*/
    border-collapse: collapse;
    width: auto;
}

th, td {
    border: 1px solid #000000;
    padding: 2px 3px 2px 3px;
    white-space: nowrap;
}

th {
    background-color: #ced4dA;
    font-size: 115%;
    text-align: center;
}

td {
    text-align: center;
}

tr:nth-child(odd) {
    background-color: #e9ecef;
}

/* Forms */
input:disabled, select:disabled, textarea:disabled {
    background: #c0c0c0;
    opacity: 0.85;
}

/* Source: https://stackoverflow.com/questions/4861224/how-to-use-css-to-surround-a-number-with-a-circle */
/* Tag */
.tag {
    border-radius: 50%;

    width: auto;
    height: auto;
    display: inline-block;
    padding: 4px;

    background: #eee;
    border: 1px solid #666;

    /* font: 16px Arial, sans-serif; */
    font-size: small;
    color: #666;
    text-align: center;
}

/* Source: https://w3bits.com/rainbow-text/ */
/* Rainbow */
.rainbow {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-image .25s ease-in-out;
}

@keyframes rainbow {
    0% {
        background-position: 0 50%
    }
    50% {
        background-position: 100% 25%
    }
    100% {
        background-position: 0 50%
    }
}

/* Dropdown Button */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content a {
    color: black;
    padding: 12px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: lightgray;
}

.dropdown-content a:active {
    background-color: gray;
}

/* Select Invalid */
select:invalid {
    color: gray;
}

/* Printing */
@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

@media print {
    a[href]:after {
        content: none !important;
    }
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
        padding-top: 0 !important;
    }
}

/* Source: https://www.granneman.com/webdev/coding/css/centertables */
/* Center Table */
table {
    margin-left: auto;
    margin-right: auto;
}

/* 000webhost Watermark (Remove) */
/*img[src*="https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png"] {*/
/*    display: none;*/
/*}*/

/* Form Things */
form {
    margin-block-end: 0;
    text-align: left;
}

/* Columns */
/* Source: https://www.w3schools.com/howto/howto_css_two_columns.asp */
/* Create two equal columns that floats next to each other */

/*HEART*/
/** {*/
/*    box-sizing: border-box;*/
/*}*/

/*HEART*/
/* Clear floats after the columns */
/*.row:after {*/
/*    content: "";*/
/*    display: table;*/
/*    clear: both;*/
/*}*/

/*HEART*/
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {*/
/*}*/

/* Navbar Adjust */
body {
    padding-top: 55px;
}

/* Bootstrap Fixes */
legend {
    margin-bottom: 8px;
    text-align: center;
}

form {
    padding: 4px;
}

.filled {
    /*background: rgb(248, 248, 248);*/
    background: rgb(251, 251, 251);
}

.border {
    border: 1px solid rgb(231, 231, 231);
    border-radius: 3%;
}

hr {
    margin: 6px;
}

form {
    display: inline-block;
}

/* Universal Body Centering */
body {
    text-align: center;
}

/* Legend Fix */
legend {
    margin-bottom: 3px;
}

/* I do what I want m8 */
fieldset {
    padding: 4px;
}

table {
    margin-top: 6px;
    margin-bottom: 6px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* Formatting search box */
.search-box {
    position: relative;
    display: inline-block;
    margin-bottom: 4px;
}

.search-box input[type="text"] {
    height: auto;
    padding: 2px;
    border: 1px solid #CCCCCC;
}

.result {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
    background: white;
}

.search-box input[type="text"], .result {
    width: 100%;
    box-sizing: border-box;
}

/* Formatting result items */
.result p {
    margin: 0;
    padding: 2px;
    border: 1px solid #CCCCCC;
    border-top: none;
    cursor: pointer;
}

.result p:hover {
    background: #f2f2f2;
}

input[type=checkbox] {
    margin: 0;
}

@page {
    margin: 0.25in;
}

.no-border {
    border: none;
}

@media print {
    .page-break {
        page-break-after: always;
    }
}

.checkoff {
    border: 1px solid #000000;
}