/* CUSTOMIZATIONS to our Bootstrap theme */
.navbar-default .navbar-nav>li>a { color: #FFF }
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #FFF }
/*footer, footer a, footer a:hover {text-shadow:  1px 1px 1px #000; color: #EEE; }
footer {opacity: 0.3;}*/
footer, footer a { color: #BBB }
footer a { text-decoration: underline; transition: color 0.3s }
footer a:hover { color: #EEE }
.navbar-default { background: url('/imgs/brown-texture.jpg') }
.alert a { color: #FFF; text-decoration: underline }
body { background: url('/imgs/green-texture.jpg') } /* instead of applying to #footerContainer. Because I want it to continue after the footer too... */
#backToRomimuHomepageBar { background: #AAA; padding: 10px; text-align: center }
#backToRomimuHomepageBar a { color: #222 }

/* CUSTOMIZATIONS TO IMITATE KCG SITE */
body, .navbar, .btn { font-family: Oxygen, Tahoma, Verdana, sans-serif }
@media (min-width:600px) {
    body, .navbar, .btn { font-size: 14px } 
}
.navbar-default { background: rgba(80, 128, 56, 0.79) }
h1, h2, h3 { font-family: Bitter, Tahoma, serif !important } /*h1, h2, h3 {color:rgb(89,140,23)}*/
body { background: none }
#footerContainer { background: hsl(207, 33%, 41%) /*hsl(211, 54%, 31%)*/ }
footer, footer a { color: #DDD }
footer { font-size: 0.9em }

/* ANIMATIONS - MOVED FROM BOA */
/* I added -enter-from to support Vue 3 as well -- otherwise fadeout wouldn't work */
.fade-enter-active, .fade-leave-active { transition: opacity .5s; }
.fade-enter, .fade-enter-from, .fade-leave-to { opacity: 0; }
.w-enter-active, .w-leave-active { transition: all .5s }
.w-enter, .w-enter-from, .w-leave-to { transform: scaleX(0.5) translateY(-20px); opacity: 0; }
.h-enter-active, .h-leave-active { transition: all 0.5s; max-height: 500px }
.h-enter, .h-enter-from, .h-leave-to { opacity: 0; max-height: 0; }

/* TABLE STYLING - COPIED FROM OLD SITE.CSS */
.lighttablecells td { background-color: #EEE; }
table.lighttablecells { border: 1px solid #CCC }

table.grid { border-top: 1px solid #DDD; border-left: 1px solid #DDD }
table.grid td { border-right: 1px solid #DDD; border-bottom: 1px solid #DDD }
/*table.highlightRow tr:hover td { background: #EEE }*/
table.grid tr.selectedRow { color: #007; }
table.grid tr.selectedRow td:last-child { border-right: 15px solid #777; }
/* table.grid tr.selectedRow td:first-child { border-left: 3px solid #77F ; }*/
/* table.grid tr.selectedRow td { border-top: 3px solid #F00; border-bottom: 3px solid #F00; background: #CCC !important }*/
table .bgGreen td { background: #DFD }
table .bgRed td { background: #FDD }
table .bgYellow td { background: #FFC }
table .bgGrey td { background: #EEE }

table.infoTable { border-top: 1px solid #CCC; border-left: 1px solid #CCC; }
table.infoTable { margin-left: 40px; }
/* indent like the P elements */
table.infoTable td { border-bottom: 1px solid #CCC; border-right: 1px solid #CCC }
/* make the tables very large */
table.infoTable { font-size: 13pt }
table.infoTable td { padding: 5px; }
/* headers */
table tr.header td { background: #EEE; font-weight: bold }
table.firstColIsHeader td:first-child { background: #EEE; font-weight: bold }
table.thirdColIsHeader td:nth-child(3) { background: #EEE; font-weight: bold }
/*more*/
table.spacey td { padding: 6px }

/* Polyfilling some of Bootstrap v4+ into v3 */
.d-block { display: block }
.d-inline-block { display: inline-block }
.d-inline { display: inline }
.d-none { display: none }
.bg-secondary, .btn-secondary { background: #6c757d; color: #FFF } .btn-secondary { border-color: #6c757d }
.bg-light, .btn-light { background: #d3d4d5; color: #000 } .btn-light { border-color: #d3d4d5 }
.p-1 { padding: 0.5rem }
.p-2 { padding: 1rem }
.p-3 { padding: 1.5rem }
.p-4 { padding: 2rem }
.pl-1 { padding-left: 0.5rem }
.pl-2 { padding-left: 1rem }
.pl-3 { padding-left: 1.5rem }
.pl-4 { padding-left: 2rem }
.pr-1 { padding-right: 0.5rem }
.pr-2 { padding-right: 1rem }
.pr-3 { padding-right: 1.5rem }
.pr-4 { padding-right: 2rem }
.pt-1 { padding-top: 0.5rem }
.pt-2 { padding-top: 1rem }
.pt-3 { padding-top: 1.5rem }
.pt-4 { padding-top: 2rem }
.pb-1 { padding-bottom: 0.5rem }
.pb-2 { padding-bottom: 1rem }
.pb-3 { padding-bottom: 1.5rem }
.pb-4 { padding-bottom: 2rem }
.px-1 { padding-left: 0.5rem; padding-right: 0.5rem }
.px-2 { padding-left: 1rem; padding-right: 1rem }
.px-3 { padding-left: 1.5rem; padding-right: 1.5rem }
.px-4 { padding-left: 2rem; padding-right: 2rem }
.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem }
.py-2 { padding-top: 1rem; padding-bottom: 1rem }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem }
.py-4 { padding-top: 2rem; padding-bottom: 2rem }
.m-1 { margin: 0.5rem }
.m-2 { margin: 1rem }
.m-3 { margin: 1.5rem }
.m-4 { margin: 2rem }
.ml-1 { margin-left: 0.5rem }
.ml-2 { margin-left: 1rem }
.ml-3 { margin-left: 1.5rem }
.ml-4 { margin-left: 2rem }
.mr-1 { margin-right: 0.5rem }
.mr-2 { margin-right: 1rem }
.mr-3 { margin-right: 1.5rem }
.mr-4 { margin-right: 2rem }
.mt-1 { margin-top: 0.5rem }
.mt-2 { margin-top: 1rem }
.mt-3 { margin-top: 1.5rem }
.mt-4 { margin-top: 2rem }
.mb-1 { margin-bottom: 0.5rem }
.mb-2 { margin-bottom: 1rem }
.mb-3 { margin-bottom: 1.5rem }
.mb-4 { margin-bottom: 2rem }
.mx-1 { margin-left: 0.5rem; margin-right: 0.5rem }
.mx-2 { margin-left: 1rem; margin-right: 1rem }
.mx-3 { margin-left: 1.5rem; margin-right: 1.5rem }
.mx-4 { margin-left: 2rem; margin-right: 2rem }
.my-1 { margin-top: 0.5rem; margin-bottom: 0.5rem }
.my-2 { margin-top: 1rem; margin-bottom: 1rem }
.my-3 { margin-top: 1.5rem; margin-bottom: 1.5rem }
.my-4 { margin-top: 2rem; margin-bottom: 2rem }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem
}
.shadow-sm { box-shadow: 0 .125rem .25rem #00000013!important }
.shadow { box-shadow: 0 .5rem 1rem #00000026!important }
.shadow-lg { box-shadow: 0 1rem 3rem #0000002d!important }