html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

h1 {
    border-bottom: 1px solid var(--text-dark);
}

h1, h2, h3, h4, h5 {
    color: var(--text-dark);
    /*background-image: linear-gradient(to right, #ffffff00, #373c45);*/
}

.input-validation-error {
    background-color: #ffe2db;
}

.build-header {
    padding: 6px;
    font-size: 1.1em;
    background-color: #fff9d6;
    text-align: center;
    letter-spacing: 4px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #bb0033;
    margin: -6px 0 14px 0;
}

#tbSort > tr, #tbGlobalSort > tr {
    cursor: pointer;
}

.drop-highlight {
    background-color: #ddffc8;
}

.photo-frame {
    border-radius: 4px;
    border: 1px solid #2a2a2aac;
    display: inline-block;
}

    .photo-frame > img {
        border-radius: 4px;
    }

@media (min-width: 599px) {
    .photo-frame > img {
        max-height: 300px;
        max-width: 300px;
    }
}

@media (max-width: 600px) {
    .photo-frame > img {
        max-width: 100%;
        height: auto;
    }
}
/*--- Jump Icon ---*/
div:has(> .jump-icon) {
    text-align: center;
}

.jump-icon {
    border: 1px solid #000;
    border-radius: 4px;
    background-color: #929292cc;
    margin: 0 auto;
    aspect-ratio: 1/1;
    padding: 4px;
    margin: 4px auto;
    display: inline-block;
    min-width: 200px;
    text-decoration: none;
    cursor: pointer;
}

    .jump-icon img {
        display: block;
        height: auto;
        width: 100%;
        padding: 0px 0px 10px 0px;
    }

    .jump-icon span {
        display: block;
        font-size: 0.8em;
        color: #fff;
        text-align: center;
    }
/*--- End Jump Icon ---*/

/*--- Profile Card ---*/
.profile-card {
    display: grid;
    grid-template-columns: 20% auto;
    column-gap: .8em;
}

    .profile-card > div:nth-child(0n+2) > div:first-child {
        font-size: 1.6em;
    }

    .profile-card > div:nth-child(0n+2) > div:nth-child(0n+2) {
        font-size: 1.1em;
    }

    .profile-card > div:first-child > img {
        width: 100%;
        height: auto;
        border-radius: 11px;
    }
/*--- EndProfile Card ---*/

/*--- Contact Card ---*/
.roster {
    /*background-color: #b0c1c8;
    padding: 5px;*/
}

.contact-card {
    display: grid;
    grid-template-columns: minmax(80px, 8%) auto;
    column-gap: .4em;
    height: 80px;
    border: 1px solid #929292cc;
    border-radius: 5px;
    padding: 3px;
    margin-bottom: 3px;
    background-color: #fff;
}

    .contact-card > div:nth-child(0n+2) > div:first-child {
        font-size: 1.2em;
    }

    .contact-card > div:nth-child(0n+2) > div:nth-child(1n+2) {
        font-size: 0.9em;
    }

    .contact-card > div:first-child {
        display: grid;
        align-content: center;
    }

        .contact-card > div:first-child > a {
            overflow: hidden;
            border-radius: 11px;
            margin: 0 auto;
            border: 1px solid #2a2a2a8f;
            min-width: 10px;
            min-height: 10px;
        }

            .contact-card > div:first-child > a > img {
                /*aspect-ratio: 1/1;*/
                /*width: 100%;*/
                max-height: 70px;
                max-width: 70px;
                /*border: 1px solid #929292cc;*/
                /* border-radius: 11px; */
            }
/*--- End Contact Card ---*/

/*--- Org and group grid ---*/
.org-member-grid > div {
    padding-bottom: 6px;
    border-bottom: 1px solid #929292cc;
}

    .org-member-grid > div a {
        text-decoration: none;
    }

    .org-member-grid > div > div:first-child {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

        .org-member-grid > div > div:first-child > span:first-child {
            font-size: 1.2em;
        }

        .org-member-grid > div > div:first-child > span:nth-child(0n+2) {
            padding-top: 4px;
            text-align: right;
            font-size: 0.8em;
        }

        .org-member-grid > div > div:first-child > span:nth-child(0n+3) {
            font-size: 0.8em;
            font-style: italic;
        }

    .org-member-grid > div > div:nth-child(0n+2) {
        margin: 0 12px 0 12px;
    }

        .org-member-grid > div > div:nth-child(0n+2) > div {
            display: grid;
            grid-template-columns: 3fr 1fr;
        }

            .org-member-grid > div > div:nth-child(0n+2) > div > span:first-child {
            }

            .org-member-grid > div > div:nth-child(0n+2) > div > span:nth-child(0n+2) {
                font-size: 0.8em;
                text-align: right;
            }
/*--- End Org and group grid ---*/

tr.row-highlight {
    background-color: #fbffe4cc;
}

/*--- Dragon Drop ---*/

.drag-over {
    background-color: #95cfe2be;
    /*border: 2px solid #258cfbbe;
    margin: -2px;*/
    /*box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;*/
    box-shadow: 0 0 .5rem #258cfbbe !important;
}

.drop-loading {
    height: 100px;
    background-color: #929292cc;
    background-image: url('../images/loading_icon.gif');
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 30px;
    font-size: 1.2em;
    text-align: center;
}

/*--- End Dragon Drop ---*/

/*--- Profile Note Grid ---*/
.profile-note-grid {
    padding: 6px;
    border: 1px solid #2a2a2a8f;
    border-radius: 4px;
    background-color: #fefcfc;
    overflow: hidden;
}

    .profile-note-grid > div {
        margin-bottom: 4px;
        border-bottom: 1px solid #2a2a2a8f;
        padding: 4px 0;
        display: grid;
        grid-template-columns: auto 120px;
    }

        .profile-note-grid > div > div:first-child {
            font-size: 0.7em;
            color: #514e4e;
        }

        .profile-note-grid > div > div:nth-child(0n+2) {
            font-size: 0.7em;
            color: #514e4e; /*#2a2a2a8f;*/
            text-align: right;
        }

        .profile-note-grid > div > div:nth-child(0n+3) {
            font-size: 0.9em;
            grid-column-start: span 2;
            color: #313131;
        }

            .profile-note-grid > div > div:nth-child(0n+3) > div {
                display: inline-block;
                float: right;
            }

                .profile-note-grid > div > div:nth-child(0n+3) > div > a {
                    padding-left: 3px;
                }
/*--- End Profile Note Grid ---*/

/*--- Profile Claims ---*/
.profile-claims-grid {
    padding: 4px 8px;
    font-size: 0.8em;
}

    .profile-claims-grid > div {
        display: grid;
        grid-template-columns: 200px auto;
    }
/*--- End Profile Claims ---*/