/* Move down content because we have a fixed navbar that is 50px tall */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /*padding-top: 10px;
    padding-bottom: 10px;*/
}


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

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"],
select {
    max-width: 600px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}

.error-link.hidden {
    display: none;
}


/***
    Yes No Picker
*/
.YesNoPicker {
    box-sizing: border-box;
    max-width: 280px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
    user-select: none;
    border: 1px solid #c8c8c8;
    border-radius: 0.2rem;
}

.YesNoPicker li {
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 200ms ease-in-out;
}

.YesNoPicker input {
    display: none;
}

.YesNoPicker label {
    width: 100%;
    min-height: 100%;
    padding: 0.35em 1.25em;
    color: #b0b0b0;
    font-size: 0.9rem;
    line-height: 100%;
    font-family: Verdana, Geneva, 'Segoe UI', Tahoma, sans-serif;
    text-align: center;
}

.YesNoPicker li:hover {
    background-color: #e8e8e8;
}

.YesNoPicker li:last-of-type {
    border-left: 1px solid #c8c8c8;
}

.YesNoPicker input:checked + label {
    background-color: #0D69AB;
    color: #f0f0f0;
}


  
/***
    dependencies (auto-shown)
*/
.dependent li {
        margin-left: 0;
        max-height: 0;
    }

.dependent.javascript {
        margin-bottom: 0;
        max-height: 0;
        overflow: hidden;
        transition: 
            max-height .2s ease-out, 
            margin-top .1s ease-out .2s, 
            margin-bottom .1s ease-out .2s, 
            padding-top .1s ease-out .2s,
            padding-bottom .1s ease-out .2s;
    }
/*834px;*/
.dependent.visible {
        max-height: 1000px;
        transition: 
            max-height .2s ease-in, 
            margin-bottom .1s ease-out .1s,
            margin-top .1s ease-out .1s,
            padding-bottom .1s ease-out .1s,
            padding-top .1s ease-out .1s,;
    }
.dependent:not(.visible) {
        margin-bottom: 0;
        margin-top: 0;
        padding-bottom: 0;
        padding-top: 0;
        overflow-y: hidden;
    }
 .dependent.list.visible {
        max-height: 100%;   
    }

 /****************
  * CC Additions   
 */

.license-endorsements {
    display: flex;
    gap: 0.8rem;
}

.app-header {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding: 0.8em 0;
    border-bottom: 1px solid #d1d5db;
    box-shadow: 0 1px 1px #d1d5db;
}

.app-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.app-navbar__buttons {
    display: flex;
    gap: 0.25em;
}

.app-navbar__buttons .header-link,
.app-navbar__buttons .error-link {
    padding: 0.3em 0.7em;
    text-decoration: none;
    background-color: transparent;
    border: none;
    border-radius: 0.25em;
    transition: all 150ms ease-in-out;
}

.app-navbar__buttons .header-link {
    background-color: #eaeaea;
    color: #333;
}

.app-navbar__buttons .header-link:hover {
    background-color: rgb(21, 140, 186);
    color: #ffffff;
}

.app-navbar__buttons .error-link {
    color: #dc2626;
}

.app-navbar__buttons .error-link:hover {
    background-color: #fecaca;
    color: #b91c1c;
}

.app-footer {
    margin: 1.5em 0 0;
    padding: 0.75em 1em;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
}

.app-footer__nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-footer__copyright,
.app-footer__copyright-inline {
    margin: 0;
    padding: 0;
    line-height: 100%;
}

.app-footer__copyright {
    display: block;
    margin: 1em 0 0.5em;
}

.app-footer__copyright-inline {
    display: none;
}

.app-footer__buttons,
.app-footer__links {
    display: flex;
    gap: 0.5rem;
}

.app-footer__links a {
    padding: 0.3em 0.7em;
    color: #333;
    text-decoration: none;
    border-radius: 0.2em;
    background-color: transparent;
    transition: background-color 150ms ease-in-out;
}

.app-footer__links a:hover {
    background-color: #eaeaea;
}

.app-footer__buttons > input[type="submit"] {
    padding: 0.4em 1em;
    border: 0;
    background-color: #eaeaea;
    color: #333;
    border-radius: 0.2em;
    transition: all 150ms ease-in-out;
}

.app-footer__buttons input[type="submit"]:hover {
    background-color: rgb(21, 140, 186);
    color: #ffffff;
}

.buttonStrip {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5em;
}

.buttonStrip button {
    padding: 0.3em 0.8em;
    border: none;
    border-radius: 0.2em;
    color: #374151;
    background-color: #e5e7eb;
    transition: background-color 150ms ease-in-out;
}

.buttonStrip button:hover {
    background-color: #d1d5db;
}

@media screen and (max-width: 650px) {
    .app-footer {
        justify-content: space-between;
    }

    .app-footer__copyright-inline {
        display: none;
    }
}

@media screen and (min-width: 651px) {
    .app-footer__nav {
        justify-content: space-around;
    }

    .app-footer__copyright {
        display: none;
    }

    .app-footer__copyright-inline {
        display: block;
    }
}
/***
    Upload image preview
*/
.upload-image-preview {
    border: 1px solid $color-text-dark;
    margin: $padding-medium;
    max-height: $width-big;
    max-width: $width-big;
}