@font-face {
    font-family: 'la-solid-900';
    src: url('../line-awesome/fonts/la-solid-900.woff2') format('woff2');
}
@font-face {
    font-family: 'la-solid-900';
    src: url('../line-awesome/fonts/la-solid-900.woff') format('woff');
}
@font-face {
    font-family: 'la-solid-900';
    src: url('../line-awesome/fonts/la-solid-900.ttf') format('truetype');
}
@font-face {
    font-family: 'la-solid-900';
    src: url('../line-awesome/fonts/la-solid-900.svg') format('svg');
}
@font-face {
    font-family: 'la-solid-900';
    src: url('../line-awesome/fonts/la-solid-900.eot') format('embedded-opentype');
}

* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
    overscroll-behavior: none;
    /*scroll-behavior: smooth;*/
}

body {
    -webkit-text-size-adjust: 100%;
    font-size: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #000000;
}

input, textarea, select {
    border: 1px solid #4682b4;
}

    input:hover, textarea:hover, select:hover {
        border-color: #FF9933;
    }

   /* input:read-only {
        border-style: none;
    }*/

    input[type="text"]:focus,
    input[type="url"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="number"]:focus,
    input[type="password"]:focus,
    .mytextarea:focus,
    select:focus {
        border-color: #2196F3 !important;
        box-shadow: 0 0 3px #2196F3 !important;
        outline: none !important;
    }

.toupper {
    text-transform: uppercase
}

h1 {
    font-size: 1.3em;
    font-weight: 400;
    padding-top: 0.5em;
}

h2 {
    font-size: 1.1em;
    font-weight: bold;
    color: #FF9933;
}

h3 { /* see also h5 */
    font-size: 1em;
    font-weight: 400;
    border-top-style: solid;
    border-width: 2px;
    border-top-color: #C0C0C0;
    color: rgb(255, 102, 0);
    text-align: center;
    letter-spacing: 0.5em;
}

h4 {
    font-size: 1.4em;
    font-weight: 400;
    border-top-style: solid;
    border-width: 2px;
    border-top-color: #C0C0C0;
    color: rgb(255, 102, 0);
    text-align: center;
    letter-spacing: 0.3em;
    padding-top: 0.25em;
}

h5 { /* see also h3 */
    font-size: 0.9rem;
    font-weight: 400;
    border-top-style: solid;
    border-width: 2px;
    border-top-color: #C0C0C0;
    color: rgb(255, 102, 0);
    text-align: center;
    letter-spacing: 0.5em;
    width:  100%;
}

@media only screen and (max-width: 500px) {
    h5 {
        width: 80%;
    }
}

.scshr {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 1em;
    font-weight: 400;
    color: rgb(255, 102, 0);
    text-align: center;
    letter-spacing: 0.4em;
    margin-top: 1em;
    margin-bottom: 0.6em
}

.scshr::before,
.scshr::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid #C0C0C0;
}

    .scshr:not(:empty)::before {
        margin-right: 0.5em;
    }

    .scshr:not(:empty)::after {
        margin-left: 0.5em;
    }

.main-nav {
    border-bottom: 2px solid;
    border-bottom-color: rgb(255, 102, 0);
    padding-top: 1em;
    padding-right: 1em;
    padding-left: 1em;
}

.dropdown-menu a {
    font-size: 0.8em !important;
}

.dropdown-item {
    font-size: 0.8em !important;
}

.nav-link {
    font-size: 0.8em !important;
}

.menublock {
    width: 100%;
    max-width: 90vw;
    margin-right: auto;
    margin-left: auto;
}


.tappable {
    padding: 2px 4px 2px 8px;
    background-color: #FF9933;
    text-decoration: none;
    border: 1px solid #666666;
    border-radius: 5px;
    max-width: 50vw;
    color: #FFFFFF;
}

a.tappable, a:link.tappable, a:active.tappable, a:visited.tappable {
    text-decoration: none;
    color: #FFFFFF;
}

a:hover.tappable {
    background-color: #F47A00;
    color: #FFFFFF;
}

.myicon {
    height: 30px;
    width: auto;
}

.btnplus {
    background-color: #FF9933;
    /*background-color: #FF8000;*/
    border: 1px solid #666666;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    padding-right: 0.6em;
    padding-left: 0.6em;
}

    .btnplus:hover {
        background-color: #F47A00;
        /*background-color: #CC6600;*/
    }

    .btnplus:disabled {
        border: 1px solid #A7A7A7;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

    .btnplus[disabled="disabled"] {
        border: 1px solid #A7A7A7;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

a:hover.btnplus[disabled="disabled"] {
    background-color: #333333;
}

.btnplusalt {
    background-color: #84C2EC;
    /*background-color: #FF8000;*/
    border: 1px solid #666666;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    padding-right: 0.6em;
    padding-left: 0.6em;
}

    .btnplusalt:hover {
        background-color: #6AB6E8;
        /*background-color: #CC6600;*/
    }

    .btnplusalt:disabled {
        border: 1px solid #A7A7A7;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

    .btnplusalt[disabled="disabled"] {
        border: 1px solid #A7A7A7;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

a:hover.btnplusalt[disabled="disabled"] {
    background-color: #333333;
}

.btnpluspale {
    background-color: #FFFFFF;
    border: 1px solid #ff9933;
    color: #ff9933;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    padding-right: 0.6em;
    padding-left: 0.6em;
}

    .btnpluspale:hover {
        background-color: #CCCCCC;
    }

    .btnpluspale:disabled {
        border: 1px solid #ff9933;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

    .btnpluspale[disabled="disabled"] {
        border: 1px solid #ff9933;
        color: #A7A7A7;
        background-color: #CCCCCC;
    }

a:hover.btnpluspale[disabled="disabled"] {
    background-color: #333333;
}

.btnlook {
    padding: 2px 2px 2px 2px;
    border: 1px solid #808080;
    color: #808080;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #FFFFFF;
}

    .btnlook:hover {
        background-color: #CDE6F7;
    }

.errmsg {
    color: #FF0000;
}

.help {
    font-size: smaller;
    line-height: normal;
    padding-top: 0.1em;
    padding-bottom: 0.3em;
    display: inline-block;
    line-height: 1.2 !important;
}

label {
    margin-bottom: 0px;
}

/* Red asterisk as used to indicate a required field */
.redstar {
    color: #FF0000;
    vertical-align: top;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    padding-left: 0px;
}

.seform {
    border-style: solid;
    border-width: 5px 1px 1px 1px;
    border-color: #84C2EC #666666 #666666 #666666;
    padding-top: 0.2em;
    padding-bottom: 1em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.seform2 {
    border-top-style: solid;
    padding-top: 1.6em;
    border-top-width: 5px;
    border-top-color: #84C2EC;
    margin-top: -1px;
}
/*.seform:hover {
        border-top-style: solid;
        border-top-width: 3px;
        border-color: #6AB6E8;
    }*/

.semenuitem {
    border-style: solid;
    border: 1px solid #666666;
    color: #ffffff;
    border-radius: 8px 8px 0px 0px;
    background-color: #FF9933;
    text-align: center;
    height: 2rem;
    line-height: 1.5rem;
    margin-right: 0px;
    float: left;
}

@media only screen and (max-width: 500px) {
    .semenuitem {
        font-size: 0.75em;
    }
}

.semenuitem2 {
    width: 50% !important;
}

.semenuitem2a {
    width: calc((100% - 8vw) / 2) !important;
}

.semenuitem3 {
    width: 33.33% !important;
}

.semenuitem3a {
    width: calc((100% - 8vw) / 3) !important;
}

.semenuitem4 {
    width: 25% !important;
}

.semenuitem4a {
    width: calc((100% - 8vw) / 4) !important;
}

.semenuitemmore {
    width: 8vw !important;
}

.semenuitem:hover {
    background-color: #F47A00;
}

.semenuitemselected {
    background-color: #84C2EC;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #84C2EC;
}

    .semenuitemselected:hover {
        background-color: #6AB6E8;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #6AB6E8;
    }


.semenulink {
    color: #FFFFFF;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

a.semenulink, a:link.semenulink, a:active.semenulink, a:visited.semenulink {
    text-decoration: none;
    color: #FFFFFF;
}

/*a:link.semenulink {
    text-decoration: none;
    color: #FFFFFF;
    background-color: #0000FF;
}*/

/* white button with orange border and lettering, orange rollover */
.mya {
    padding: 0.1em 1em 0.1em 1em;
    background-color: #FFFFFF;
    font-size: 1em;
    text-decoration: none;
    border: 1px solid rgb(255, 102, 0);
    border-radius: 0.7em;
    max-width: 50vw;
    color: rgb(255, 102, 0);
    align-content: center;
}

a:link.mya, a:active.mya, a:visited.mya {
    text-decoration: none;
    color: rgb(255, 102, 0);
}

a:hover.mya {
    background-color: rgb(255, 184, 136);
    color: rgb(255, 102, 0);
}

.mya:hover {
    background-color: rgb(255, 184, 136);
    color: rgb(255, 102, 0);
}

.pancover {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100%;
    min-height: 100vh;
    background-color: #C0C0C0;
    background: rgba(192,192,192,0.2);
    z-index: 20000;
/*    overscroll-behavior: none;
*/}

.popupfv {
    width: 90%;
    max-width: 760px;
    height: fit-content; /* 90vh; */
    margin-right: auto;
    margin-left: auto;
    margin-top: 2vh;
    border-style: solid;
    border-width: 1px;
    box-shadow: 10px 5px 5px grey;
    border-radius: 6px;
    background-color: #FFFFFF;
    opacity: 1;
    overscroll-behavior: none;
}

.popupfvouter {
    height: 100%;
    position: relative;
    margin: 0 auto;
    width: 100%;
    overscroll-behavior: none;
}

.popupfvhead {
    height: 1.6em;
    border-radius: 6px 6px 0px 0px;
    margin-top: -1px;
    margin-left: -1px;
    margin-right: -1px;
    width: calc(100% + 2px);
}

.popupfvinner {
    overflow-x: auto;
    height: fit-content; /*calc(85vh - 3.2em); */
    max-height: 85vh;
    padding-bottom: 2em;
    width: 100%;
    overscroll-behavior: none;
}

.textcol {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 700px;
}

.roundcorners {
    border: 1px solid #666666;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    overflow: hidden;
}

.grid td, .grid th {
    border: 1px solid #666666;
}


@media only screen and (max-width: 768px) {
    .grid td, .grid th {
        border: 1px solid #666666;
        font-size: smaller;
    }
}

.gvhighlight {
    background-color: #84C2EC;
    color: #FFFFFF;
}

.gvnohighlight {
    background-color: #FFFFFF;
}

.popupwidth {
    width: 90vw;
    max-width: 500px;
}

.phoneh {
    /* honeypot */
    display: none;
}

.lveditform {
    height: auto;
    border-style: solid;
    border-width: 2px;
    border-color: #666666;
    box-shadow: 10px 5px 5px grey;
    border-radius: 3px;
    padding: 1em;
    background-color: #FFFFFF;
    opacity: 1;
}

.mypan {
    margin: 0px 0px 2em 0px;
    padding: 0px;
    background-color: #999999;
    color: #FFFFFF;
    border-top-style: solid;
    border-top-width: 3px;
    border-top-color: #FF9933;
    border-radius: 5px;
}

.rferror {
    /* see applib:RequiredField_CustomValidator() */
    border-color: red !important;
    box-shadow: 0 0 10px red;
}

/* all this just to put spaces between rows (and it doesn't really work) */
.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;
}

@media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
}

@media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
}

@media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
}


/* footer */
.context-dark, .bg-gray-dark, .bg-primary {
    color: rgba(255, 255, 255, 0.8);
    background-color: #FFFFFF;
    border-top: 2px solid;
    border-top-color: rgb(255, 102, 0);
    font-size: smaller;
}

.footer-classic a, .footer-classic a:focus, .footer-classic a:active, .footer-classic p {
    color: #666666;
}

.nav-list {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1em;
    margin-left: 1em;

}

    .nav-list li a:hover:before {
        margin-left: 0;
        opacity: 1;
        visibility: visible;
    }

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer1 {
    float: left;
    width: 50%;
}

.footer2 {
    float: right;
    width: 50%;
}

@media only screen and (max-width: 500px) {
    .footer1 {
        float: none;
        width: 100%;
    }

    .footer2 {
        float: none;
        width: 100%;
    }

}

    /* toggle switches */
    .switch {
        position: relative;
        display: inline-block;
        width: 2em;
        height: 1.3rem;
    }

        .switch input {
            display: none;
        }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0.2rem;
    left: 0;
    right: 0;
    bottom: 0;
/*    background-color: #2196F3;
*/    background-color: #c0c0c0;
    -webkit-transition: .4s;
    transition: .4s;
}

        .slider:before {
            position: absolute;
            content: "";
            height: 90%;
            width: 45%;
            left: 7.5%;
            bottom: 5%;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

input:checked + .slider {
/*    background-color: #ff6a00;
*/    background-color: #2196f3;
}

input:focus + .slider {
/*    box-shadow: 0 0 1px #ff6a00;
*/    box-shadow: 0 0 1px #2196f3;
}

    input:checked + .slider:before {
        -webkit-transform: translateX(90%);
        -ms-transform: translateX(90%);
        transform: translateX(90%);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 1em;
    }

        .slider.round:before {
            border-radius: 50%;
        }

    /* participant rows */
    .partrow {
        border-bottom: 1px solid #c0c0c0;
        width: 100%;
    }

    .targetpad {
        padding-right: 5px;
    }

    .fixed2col {
        width: calc((100% - 120px) / 2);
        max-width: calc((100% - 120px) / 2);
    }

    .fixed3col {
        width: calc((100% - 120px) / 3);
        max-width: calc((100% - 120px) / 3);
    }

    .omitcol {
        display: table-cell;
        width: calc((100% - 120px) / 3);
        max-width: calc((100% - 120px) / 3);
    }

    .golandscape {
        display: none;
    }

    @media only screen and (max-width: 500px) {
        .fixed3col {
            width: calc((100% - 120px) / 2);
            max-width: calc((100% - 120px) / 2);
        }

        .omitcol {
            display: none;
        }

        .golandscape {
            display: inherit;
        }
    }
    /* end participant rows */

    /* pseudo-checkbox styling */
    .statbase {
        width: 24px;
        height: 24px;
        border-style: solid;
        border-radius: 3px;
    }

    .statyes {
        background-image: url('../../../Images/greentick4.png');
        background-repeat: no-repeat;
    }

    .statno {
        background-image: url('../../../Images/redcross4.png');
        background-repeat: no-repeat;
    }

/* tablets */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .statbase {
        width: 36px;
        height: 36px;
    }

    .statyes {
        background-image: url('../../../Images/greentick6.png');
        background-repeat: no-repeat;
    }

    .statno {
        background-image: url('../../../Images/redcross6.png');
        background-repeat: no-repeat;
    }
}

    .statunk {
        background-color: #FFFFFF;
        border-color: #999999;
    }

    .statsailor {
        border-color: #FF9933;
        border-width: 3px !important;
    }

    .statclub {
        border-color: #84C2EC;
        border-width: 4px !important;
}

    .statenab {
        border-width: 2px;
        background-color: #FFFFFF;
    }

    .statdisab {
        border-width: 1px;
        background-color: #EBEBEB;
    }
    /* end pseudo checkbox */

    .hidefilter {
        display: none;
    }

    /* session popup help */
    .sesshelppanel {
        position: absolute;
        overflow: hidden;
        z-index: 2400;
        width: 96%;
        left: 2%;
        top: 0.2em !important;
        background-color: #FFFFFF;
        border: 1px solid #14aff3;
        border-radius: 3px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
        display: none;
        height: auto;
        min-height: 100% !important;
        color: #14aff3;
    }

    .sesshelptext {
        width: 100%;
        height: 100%;
        padding: 1em;
        text-align: left;
        font-size: smaller;
    }
    /* end session popup help */

    /* Password strengths */
    .pwsveryweak {
        background-color: rgb(255, 32, 0);
        padding: 1px 15px 1px 15px;
        font-size: 0.65em;
        color: #FFFFFF;
        font-weight: normal;
    }

    .pwsweak {
        background-color: rgb(255, 144, 0);
        padding: 1px 15px 1px 15px;
        font-size: 0.65em;
        color: #FFFFFF;
        font-weight: normal;
    }

    .pwsfair {
        background-color: rgb(255, 239, 3);
        padding: 1px 15px 1px 15px;
        font-size: 0.65em;
        color: #808080;
        font-weight: normal;
    }

    .pwsgood {
        background-color: rgb(129,216, 0);
        padding: 1px 15px 1px 15px;
        font-size: 0.65em;
        color: #FFFFFF;
        font-weight: normal;
    }

    .pwsexcellent {
        background-color: rgb(0, 162, 1);
        padding: 1px 15px 1px 15px;
        font-size: 0.65em;
        color: #FFFFFF;
        font-weight: normal;
    }
    /* End password strengths */

    /* Stripe-related */
    .stripedark {
        padding: 4px 16px 4px 16px;
        background-color: rgb(6, 143, 222);
        border-radius: 4px;
        color: #FFFFFF;
    }

    .stripelight {
        padding: 2px 8px 2px 8px;
        background-color: rgb(50, 175, 250);
        border-radius: 2px;
        color: #FFFFFF;
    }
    /* end Stripe */

    .code {
        padding: 0.5em;
        width: 90%;
        background-color: #666666;
        color: #FFFFFF;
        /*height: 4em;*/
        border-radius: 3px;
        margin-bottom: 0px;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 80vw;
        margin: 0;
        font-family: Consolas;
        font-size: 80%;
    }

    .coderow {
        clear: both;
        padding-top: 1.6em;
        padding-right: 1em;
        padding-left: 1em;
    }

    .codeleft {
        font-size: smaller;
        width: 33%;
        float: left;
    }

    .coderight {
        width: 66%;
        float: right;
    }

    @media only screen and (max-width: 500px) {
        .codeleft {
            font-size: smaller;
            width: 100%;
        }

        .coderight {
            width: 100%;
        }
    }

    .copytocb {
        color: #000000;
        font-size: smaller;
    }

        .copytocb:hover {
            color: #000000;
        }

    /* touch screen vs computer */
    /* touch */
    .click {
        display: none;
    }

    .tap {
        display: inline-block;
    }

    /* computer */
    @media (pointer: fine) {
        .click {
            display: inline-block;
        }

        .tap {
            display: none;
        }
    }


.displaynone {
    display: none;
}

.showrotate {
    display: inline-block
}

.showlandscape {
    display: none;
}

@media only screen and (min-width: 500px) {
    .showrotate {
        display: none;
    }

    .showlandscape {
        display: block
    }
}