:root {
    --scoutPurple: #7413dc;
    --scoutColor: #004851;
    --cubColor: #23a950;
    --beaverColor: #006ddf;
    --adultColor: #000000;
}


html {
    font-size: 12px;
    position: relative;
    min-height: 100%;
    padding: 0px;
    margin: 0px;
}

body, h1, h2, h3, h4, h5, p, a {
    font-family: "Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}

h1 {
    color: var(--scoutPurple);
}


body {
    color: black;
    font-size: 12pt;
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}

.dropdown-menu[data-bs-popper] {
    top: 95%;
}


.nav a {
    font-size: 16px;
}

.nav-link, nav-item, .dropdown-item {
    font-size: 12pt;
    font-weight: 400;
    color: black !important;
}

.nav-item {
    z-index: 999999;
}

.dropdown-toggle::after {
    margin-left: 2px;
}

.nav-logo {
    height: 40px
}

body {
    padding: 0px;
    margin: 0px;
}

header {
    font-size: 16px;
    margin: 0px;
    width: 100vw;
    border-bottom: 5px solid lightgrey;
    position: fixed;
    top: 0;
    z-index: 999999;
}

    header a {
        padding: 0px 20px 0px 0px;
        text-decoration: none;
        color: black;
    }

        header a:hover {
            color: var(--scoutPurple);
        }


a.popout {
    color: black;
}



.ot-sectionSelect {
    xmax-width: 600px;
}

.ot-select {
    width: 150px !important
}

.ot-scout-select {
    width: 250px;
}

.ot-scout-selectwide {
    width: 500px;
}

.ot-infoPage {
    padding: 20px;
    width: 800px;
}


.ot-main {
    margin-top: 60px;
}

table {
    border: 1px solid black;
    border-spacing: 0px;
    border-collapse: collapse;
}

    table.fullWidth {
        width: 100%;
    }

.ot-container {
    width: 98%;
    height: 40px;
    margin: 10px 10px 10px 10px;
}

div.ot-singleUser tr {
    border: 1px solid black;
}

div.ot-singleUser .ot-element {
    width: 100px;
    font-weight: bold;
    font-size: 14px;
}

div.ot-singleUser .ot-description {
    font-size: 14px;
}

div.ot-singleUser h2 {
    color: #7413dc;
    font-weight: bold;
}

div.ot-singleUser h3 {
    color: #7413dc;
    text-decoration: none;
    font-size: 16px;
    margin-top: 7px;
}

div.ot-singleUser td.ot-completion {
    width: 200px;
    text-align: right;
}


div.ot-singleUser h2, h4 {
    padding: 0px;
    margin: 0px;
}

div.ot-singleUser .badgeTick {
    width: 20px;
}

div.ot-singleUser .ot-badgeDescription {
    font-size: 14px;
}

div.ot-singleUser .ot-scoutName {
    font-size: 26px;
    color: #7413dc;
    align-items: center;
    display: flex;
    margin-bottom: 20px;
    font-weight: bold;
}

div.ot-singleUserSummary {
    width: 1150px;
    padding: 10px;
}

    div.ot-singleUserSummary .ot-scoutName {
        font-size: 26px;
        color: #7413dc;
        align-items: center;
        display: flex;
        margin-bottom: 10px;
        font-weight: bold;
        white-space: nowrap;
    }

div.ot-singleUser .ot-badgeDetails {
    margin-top: 20px;
}

.ot-logo {
    height: 40px;
    padding-right: 10px;
}

A {
    color: #7413dc;
    font-weight: bold;
}

table.ot-layout {
    border: none
}

    table.ot-layout tr {
        border: none
    }

.ot-badgeImageCell {
    width: 10px;
    padding-top: 30px;
}

.ot-tooltip2 {
    position: relative;
}

    /* Tooltip text */
    .ot-tooltip2 .ot-tooltiptext2 {
        visibility: hidden;
        width: 400px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        font-weight: normal;
        top: -5px;
        left: 105%;
    }

    .ot-tooltip2 .ot-tooltiptext2b {
        visibility: hidden;
        width: 400px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 1;
        font-weight: normal;
        width: 120px;
        top: 100%;
        left: 50%;
        margin-left: -60px;
        writing-mode: horizontal-tb;
        z-index: 99999;
        font-size: 9pt;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .ot-tooltip2:hover .ot-tooltiptext2 {
        visibility: visible;
    }

    .ot-tooltip2:hover .ot-tooltiptext2b {
        visibility: visible;
    }

    .ot-tooltip2 .ot-tooltiptext2::after {
        content: " ";
        position: absolute;
        top: 17px;
        right: 100%; /* To the left of the tooltip */
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent black transparent transparent;
    }

    .ot-tooltip2 .ot-tooltiptext2b::after {
        content: " ";
        position: absolute;
        bottom: 100%; /* At the top of the tooltip */
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }

.ot-tscroll {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    margin-left: 5px;
    padding: 0px;
}

table.ot-fullgroup {
    margin: 0px;
    border-collapse: separate;
    border-top: 1px solid black;
}

    table.ot-fullgroup td.ot-head {
        padding: 5px;
    }

    table.ot-fullgroup .ot-sticky1 {
        position: -webkit-sticky;
        position: sticky;
        left: 1px;
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        background-color: white;
        z-index: 1;
        border-right: 1px solid black;
    }

    table.ot-fullgroup .ot-sticky1b {
        position: -webkit-sticky;
        position: sticky;
        left: 51px;
        width: 50px;
        min-width: 25px;
        max-width: 25px;
        background-color: white;
        z-index: 1;
        border-right: 1px solid black;
    }

    table.ot-fullgroup .ot-sticky2 {
        position: -webkit-sticky;
        position: sticky;
        min-width: 50px;
        left: 76px;
        background-color: white;
        z-index: 1;
    }


    table.ot-fullgroup .ot-badgeGroup {
        font-size: 1px;
    }

div.ot-badgeGroup {
    font-size: 11px;
}

table.ot-fullgroup .ot-badgeGroup a {
    font-size: 11px;
}

table.ot-fullgroup td, th {
    border-left: 0px solid black;
    border-right: 1px solid black;
    border-top: 0px solid black;
    border-bottom: 1px solid black;
    padding: 0px 0px 3px 0px;
    margin: 0px;
    line-height: normal;
}

    table.ot-fullgroup td:first-child, th:first-child {
        border-left: 1px solid black;
    }

table.ot-fullgroup .ot-separatorColumn {
    min-width: 2px;
    max-width: 2px;
    background-color: black;
}

table.ot-fullgroup tr:hover .ot-separatorColumn {
    background-color: black;
    border-bottom: 1px solid black;
}

table.ot-fullgroup tr:hover td {
    border-bottom: 1px solid #DDDD00;
}

    table.ot-fullgroup tr:hover td.ot-required {
        background-color: #fefeb1;
    }

table.ot-fullgroup tr:hover .ot-norm {
    background-color: #fefeb1;
}

table.ot-fullgroup td.ot-done {
    white-space: nowrap;
    padding: 0px 0px 0px 0px;
    margin: 0;
    font-size: 11px;
    text-align: center;
}

.ot-done {
    background-color: palegreen;
}

.ot-badgeDone {
    background-color: green;
}

.ot-notRequired {
    background-color: #999999;
}

.ot-required {
    background-color: none;
}

.ot-completedThisTerm {
    background-color: gold;
}

.ot-completedThisTermOnAttendedEvent {
    background-color: turquoise;
}

.ot-completedPlanned {
    background-color: salmon;
}

.ot-completedThisTermOnEvent {
    background-color: paleturquoise;
}

table.ot-fullgroup th.ot-vert-element {
    writing-mode: vertical-lr;
    min-width: 18px;
    max-width: 18px;
    font-weight: bold;
    vertical-align: bottom;
    white-space: nowrap;
}

    table.ot-fullgroup th.ot-vert-element .ot-tooltiptext2b {
        white-space: normal;
    }

table.ot-fullgroup .ot-homeImage {
    width: 15px;
    padding: 0px;
    margin: 0px;
    position: absolute;
    left: 0;
    bottom: 1px;
}

table.ot-fullgroup .ot-vert {
    text-align: right;
    vertical-align: bottom;
    font-size: 11px;
    padding: 0px;
    padding-top: 5px;
    padding-bottom: 15px;
    margin: 0px;
}

table.ot-fullgroup .ot-name {
    white-space: nowrap;
    padding: 0px 5px 0px 5px;
    font-size: 11px;
}

table.ot-fullgroup th a {
    text-decoration: none;
    color: black;
}

    table.ot-fullgroup th a:hover {
        color: #7413dc;
    }

.ot-badgeLink {
    text-decoration: none;
    color: black;
}

    .ot-badgeLink:hover {
        text-decoration: none;
        color: #7413dc;
    }

.ot-badgeImg {
    width: 70px;
}

div.ot-badgeInfo {
    margin: 20px 0px 0px 0px;
    column-count: 2;
}

    div.ot-badgeInfo p, .ot-element {
        padding: 0px;
        margin: 0px;
    }

.ot-badgeTitle {
    padding: 0px;
    margin: 0px;
    background-color: #7413dc;
    color: white;
    padding-left: 5px;
    font-size: 16px;
}

.ot-badgeSectionTitle {
    padding: 0px;
    margin: 0px;
}

div.ot-badgeInfo .ot-badgeDescription {
    font-size: 14px;
}

div.ot-badgeInfo .ot-elementDescription {
    font-size: 13px;
    padding-left: 5px;
    border-top: 1px solid black;
}

div.ot-badgeInfo .ot-badgeList {
    font-size: 13px;
}

div.ot-badgeInfo .ot-element {
    font-size: 13px;
    font-weight: bold;
    width: 102px;
    border-top: 1px solid black;
}

div.ot-badgeInfo h2 a {
    color: white;
}

    div.ot-badgeInfo h2 a:hover {
        color: lightgrey;
    }

div.ot-badgeInfo tr, table, td {
    border: none;
    padding: 0px;
}

div.ot-badgeInfo .ot-badgeElements {
    padding-left: 5px;
}

    div.ot-badgeInfo .ot-badgeElements table {
        margin-left: 5px;
    }

div.ot-badgeInfo .ot-complete {
    background-color: palegreen;
}

div.ot-badgeInfo .ot-notRequired {
    background-color: #666666;
    color: white;
}

div.ot-badgeInfo .ot-required {
    background-color: #FFCC00;
}

div.ot-badgeInfo .ot-complete img {
    visibility: collapse;
}

div.ot-badgeInfo .ot-notRequired img {
    visibility: collapse;
    height: 0px;
}

img.ot-sus-home {
    height: 12px;
}

.ot-keepTogether {
    page-break-inside: avoid;
}

div.ot-userSelectionForm {
    background-color: white;
    padding-left: 20px;
    padding-bottom: 0px;
    font-size: 12pt;
    padding-bottom: 5px;
    border-bottom: 5px solid lightgrey;
}

    div.ot-userSelectionForm a {
        font-size: 12pt;
    }



div.ot-welcome {
    padding: 10px;
}

    div.ot-welcome h1 {
        font-size: 16pt;
    }

    div.ot-welcome p, div.ot-welcome a {
        font-size: 12pt;
    }



.ot-infoData {
    width: 100%;
}

    .ot-infoData td {
        width: 50%;
        text-align: center;
        border: 1px solid black
    }

.ot-sus-keyData {
    width: 100%;
}

    .ot-sus-keyData td {
        width: 10px;
        padding-left: 5px;
        text-align: center;
    }

        .ot-sus-keyData td.ot-sus-wide {
            width: 100px;
        }

        .ot-sus-keyData td img.ot-sus-home {
            padding-right: 5px;
        }

    .ot-sus-keyData .ot-space {
        width: 5px;
    }

.ot-campform {
    width: 750px;
    padding: 10px;
}

.ot-cf-smallprint {
    font-size: 8pt;
    margin-bottom: 10px;
}

.ot-cf-name {
    text-decoration: underline;
}

.ot-cf-table {
    width: 100%;
    margin-top: 5px;
    font-size: 10pt;
}

    .ot-cf-table th {
        border: 1px solid grey;
        padding: 0px 4px 0px 4px;
    }

    .ot-cf-table td {
        border: 1px solid grey;
        padding: 0px 4px 0px 4px;
    }

    .ot-cf-table th {
        width: 10px;
        white-space: nowrap;
    }

.ot-cf-agree {
    font-size: 10pt;
    margin-top: 10px;
}

.ot-cf-consents {
    margin-top: 10px;
}

    .ot-cf-consents h2 {
        font-size: 12pt;
        font-weight: bold;
    }

    .ot-cf-consents .ot-cf-table {
        width: 600px;
    }

        .ot-cf-consents .ot-cf-table td {
            width: 40px;
        }

.ot-cf-missing {
    background-color: yellow;
}

.ot-cf-title {
    color: var(--scoutPurple);
    text-align: center;
    font-size: 20pt;
    font-weight: bold;
}

.ot-cf-logo {
    padding: 0px 10px 0px 10px;
    height: 40px;
}

.ot-cf-sign {
    margin-bottom: 10px;
}

    .ot-cf-sign .ot-cf-table tr {
        height: 50px;
    }

    .ot-cf-sign .ot-cf-table td {
        width: 30%;
    }

    .ot-cf-sign .ot-cf-table {
        width: 100%;
    }

.ot-cf-textbox {
    margin-top: 10px;
    min-height: 70px;
    max-height: 140px;
    width: 100%;
    vertical-align: top;
    font-size: 10pt;
    resize: none;
}

.ot-cf-other p {
    margin: 0px;
}

.ot-cf-selection {
    width: 800px;
}

.ot-healthSummary {
    margin-left: 10px;
    margin-right: 10px;
    max-width: 1024px;
}


    .ot-healthSummary h3 {
        margin-top: 5px;
        margin-bottom: 0px;
    }

    .ot-healthSummary table {
        border: 1px solid black;
        width: 100%;
        font-size: 10pt;
    }

        .ot-healthSummary table th {
            width: 200px;
            white-space: nowrap;
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }

        .ot-healthSummary table td {
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }


.ot-sectionSummary {
    margin-left: 10px;
    margin-right: 10px;
    xmax-width: 1024px;
}


    .ot-sectionSummary h3 {
        margin-top: 5px;
        margin-bottom: 0px;
    }

    .ot-sectionSummary table {
        border: 1px solid black;
        xwidth: 100%;
        font-size: 10pt;
    }

        .ot-sectionSummary table th {
            white-space: nowrap;
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }

        .ot-sectionSummary table td {
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }

.ot-sectionSummaryName {
    width: 100px;
}

.ot-sectionSummaryCount {
    width: 30px;
}

.ot-sectionSummarySection {
    width: 30px;
    writing-mode: vertical-lr;
}


.ot-intouch {
    margin-left: 10px;
    margin-right: 10px;
    max-width: 1024px;
}

    .ot-intouch table {
        border: 1px solid black;
        width: 100%;
        font-size: 10pt;
    }

        .ot-intouch table th {
            width: 200px;
            white-space: nowrap;
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }

        .ot-intouch table td {
            white-space: nowrap;
            border: 1px solid grey;
            padding: 0px 4px 0px 4px;
        }

        .ot-intouch table tr.ot-odd {
            background-color: #eeeeee;
        }

.ot-keyTable {
    position: absolute;
    top: 0;
    left: 0;
    writing-mode: horizontal-tb;
}

    .ot-keyTable td {
        border-bottom: 1px solid black !important;
    }

    .ot-keyTable tr td.ot-required {
        background-color: white !important;
    }


.ot-key {
    width: 100px;
    word-wrap: normal;
    font-size: 11px;
    text-align: center;
    font-weight: normal;
}

@media print {

    .ot-main {
        margin-top: 0px;
    }

    .ot-keepTogether {
        page-break-inside: avoid;
    }

    .ot-fullgroup {
        padding: 0px;
        margin: 0px;
    }

    header, footer {
        visibility: collapse;
        height: 0px;
        display: none !important;
    }

    .ot-noprint {
        display: none !important;
    }

    div.ot-userSelectionForm {
        display: none !important;
    }

    div.ot-singleUserSummary {
        width: 100%;
        padding: 0px;
    }

    .ot-fullgroup {
        transform: scale(.9);
        transform-origin: 0 0;
        margin: 0px;
        padding: 0px;
    }

    .ot-badgeTitle {
        background-color: #7413dc;
        color: white;
        padding: 0px 0px 0px 5px;
        margin: 0px;
        font-size: 8pt;
    }

        .ot-badgeTitle a {
            font-size: 8pt;
            padding: 0px;
            margin: 0px;
        }

    .ot-badgeSectionTitle {
        font-size: 7pt;
    }

    div.ot-badgeInfo .ot-element {
        font-size: 5.8pt;
    }

    div.ot-badgeInfo .ot-elementDescription {
        font-size: 5.8pt;
    }

    div.ot-badgeInfo .ot-badgeList {
        font-size: 5.8pt;
    }

    div.ot-badgeInfo .ot-badgeDescription {
        font-size: 6pt;
    }

    div.ot-badgeInfo .ot-element {
        width: 65px;
    }

    div.ot-badgeInfo-full {
        column-count: 3;
    }

        div.ot-badgeInfo-full .ot-element {
            font-size: 8.5pt;
        }

        div.ot-badgeInfo-full .ot-elementDescription {
            font-size: 8pt;
        }

        div.ot-badgeInfo-full .ot-badgeDescription {
            font-size: 9pt;
        }

        div.ot-badgeInfo-full .ot-badgeSectionTitle {
            font-size: 9pt;
        }

        div.ot-badgeInfo-full .ot-badgeTitle {
            font-size: 10pt;
        }

            div.ot-badgeInfo-full .ot-badgeTitle a {
                font-size: 10pt;
            }

    img.ot-sus-home {
        height: 8px;
    }

    .ot-tscroll {
        overflow-x: unset;
        overflow-y: unset;
    }


    table.ot-fullgroup td.ot-head {
        padding: 0px;
    }

    table.ot-fullgroup .ot-sticky1 {
        position: unset;
    }

    table.ot-fullgroup .ot-sticky2 {
        position: unset;
    }

    table.ot-fullgroup tr:hover td {
        border-bottom: 1px solid black;
        background-color: white;
    }
}