html 
{
  font-size: 14px;
}

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

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

body 
{
  margin-bottom: 60px;
}

.od-small
{
    font-size: small;
}

nav.odnavbar > .container-fluid
{
    padding: 0;
}

a
{
    color: #337ab7;
}

h1, h2, h3, h4, h5, h6
{
    color: #01467e;
}

label, label.col-form-label, legend.col-form-label
{
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #01467e;
    white-space: nowrap;
}

label.form-check-label
{
    font-weight: normal;
}

input.form-control:focus, select.form-select:focus, textarea.form-control:focus
{
    background-color: #fcd89f;
    border-color: #ff9802;
    box-shadow: 0px 0px 0px 0.2rem #ff9802;
}

select.form-select.is-invalid, select.form-select.is-invalid > option, 
select.form-select.input-validation-error, select.form-select.input-validation-error > option,
textarea.input-validation-error, input.input-validation-error
{
    background-color: #ff9999;
}

textarea.is-invalid, input.is-invalid
{
    background-color: #ff9999;
}

textarea.is-valid, input.is-valid
{
    background-color: #fcd89f;
}

select.form-select.is-valid, select.form-select.is-valid > option
{
    background-color: #fcd89f;
}

select.form-select.is-valid > option:checked
{
    background-color: #666;
}

.odfbButton
{
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    box-shadow: inset 0 1px 1px #999;
}

.odanchor
{
    text-decoration: none;
}

    .odanchor:hover
    {
        text-decoration: underline;
    }

.od-user-account-nav > li.nav-item:hover
{
    background-color: #ff9802;
    border-radius: 0.375rem;
}

.od-user-account-nav > li.nav-item > a.active:hover
{
    color: #fff;
}

.od-user-account-nav > li.nav-item > a:hover
{
    color: #000;
}

#odbuylink
{
    display: none;
}

#odtoplogo
{
    position: fixed;
    padding-top: 10px;
    top: 0;
    height: 75px;
    vertical-align: middle;
    z-index: 500;
    background-color: #fff;
    width: 100%;
    text-align: center;
}
    #odtoplogo > img
    {
        width: 430px;
    }

.odbiglogo > img
{
    width: 200px; 
    padding-left: 5px;
    padding-top: 5px;
}

a.odpractice
{
    font-family: 'Fjalla One', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    text-shadow: 1px 1px 2px #000;
}

#odusernotifications
{
    position: fixed;
    z-index: 10000;
    top: 22px;
    right: 170px;
}

    #odusernotifications .badge
    {
        font-size: 0.9em;
    }

#oduserinfo
{
    position: fixed;
    z-index: 10000;
    top: 10px;
    right: 10px;
    font-size: 0.9em;
    color: #337ab7;
}

form#logoutForm > button
{
    font-size: 0.9em;
}

footer
{
    margin-top: 20px;
    font-size: 11px;
    color: #fff;
    text-shadow: 0.5px 0.5px 0 #000;
    height: 42px;
    min-height: 40px;
    background: -webkit-linear-gradient(#78a8e8, #235ca8);
    background: -moz-linear-gradient(#78a8e8, #235ca8);
    background: -o-linear-gradient(#78a8e8, #235ca8);
    background: linear-gradient(#78a8e8, #235ca8);
    padding-top: 12px;
}

    footer.practice
    {
        background: -webkit-linear-gradient(#444444, #222222);
        background: -moz-linear-gradient(#444444, #222222);
        background: -o-linear-gradient(#444444, #222222);
        background: linear-gradient(#444444, #222222);
    }

caption
{
    text-align: center;
    background-color: #01467e;
    color: #fff;
    padding-left: 5px;
    font-family: Oswald, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.2em;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    caption-side: top;
}

.modal-header
{
    background: linear-gradient(#83afe6, #6181aa);
}

.modal-title
{
    font-family: Oswald, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

.modal-footer
{
    background: linear-gradient(#83afe6, #6181aa);
}

#mobile > div.alphabet-buttons > button
{
    width: 75px;
    margin: 4px;
}

.grid-header
{
    font-family: Oswald, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    background-color: #01467e;
    color: #fff;
    font-size: 1.2em;
    padding: 8px 5px;
    margin-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-bottom: 0;
}

.grid
{
    margin: 0;
    font-size: 14px;
}

    .grid > div.row > div
    {
        border-top: 1px #efefef solid;
        padding: 4px;
    }

        .grid > div.row > div > a
        {
            padding: 2px 4px;
        }

            .grid a.odanchor:hover
            {
                color: #f00;
                background-color: #fff4b8;
            }

.prof-grid
{
    margin: 0;
    font-size: 14px;
}
    .prof-grid > div.row > div
    {
        border-top: 1px #efefef solid;
        padding: 4px;
    }

        .prof-grid > div.row > div > a
        {
            padding: 2px 4px;
        }
            .prof-grid > div.row > div > a:hover
            {
                color: #f00;
                background-color: #fff4b8;
            }

    table.outlines thead th
    {
        border-top-color: #fff;
        font-family: "Roboto Condensed", Arial, sans-serif;
        font-size: 18px;
        background-color: #003366;
        color: #fff;
        white-space: nowrap;
    }

table.outlines > thead > tr > th:first-of-type
{
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
}

table.outlines > thead > tr > th:last-of-type
{
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}

table.outlines > thead > tr > .sortable
{
    cursor: pointer;
}

    table.outlines > thead > tr > .sortable:hover
    {
        color: #ff9802;
        text-decoration: underline;
    }

table.outlines > thead > tr > th > span.sortArrow
{
    color: #ff9802;
}

table.outlines > tbody > tr > td
{
    font-size: 10pt;
    padding: 4px 6px;
    vertical-align: middle;
    border-top: none;
}

button.od-preview
{
    width: 80px;
}

button.od-modal-btn, button.od-modal-close-btn
{
    width: 50px;
}

button.od-download
{
    width: 148px;
}

button.od-download > i.pdf
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(#e6e6e6, #bababa);
    color: #d10a0d;
    float: left;
    margin-right: 7px;
}

button.od-download > i.word
{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(#e6e6e6, #bababa);
    color: #2a5699;
    float: left;
    margin-right: 7px;
}

button.od-preview, 
button.od-preview:focus
{
    color: #000;
    background: linear-gradient(#e6e6e6, #bababa);
    height: 45px;
    font-size: 13px;
}

button.od-download, 
button.od-modal-btn 
{
    background: linear-gradient(#e6e6e6, #bababa);
    height: 45px;
    font-size: 11px;
}

button.od-download:focus, button.od-download:hover,
button.od-modal-btn:focus, button.od-modal-btn:hover
{
    color: #000;
    background: linear-gradient(#dedede, #fff);
}

button.od-modal-close-btn
{
    color: #fff;
    background-color: #cf0000;
    height: 45px;
    font-size: 14px;
    transition: background-color 500ms;
}

    button.od-modal-close-btn:hover
    {
        color: #fff;
        background-color: #900;
    }

button.od-preview:hover, button.od-download:hover, button.od-modal-btn:hover
{
    color: #01467e;
    background: linear-gradient(#f0f0f0, #c5c5c5);
}

button.od-preview:active, button.od-download:active
{
    color: #900;
}

button.od-download > div
{
    margin-top: 3px;
    line-height: 99%;
    font-size: 0.9em;
}

#previewModal .modal-header .info table tbody th
{
    font-family: "Roboto Condensed", Arial, sans-serif;
    color: #ffaf3a;
    text-shadow: 1px 1px 1px #000;
    font-size: 1.1em;
    vertical-align: top;
    text-align: right;
    white-space: nowrap;
    padding-right: 5px;
}

#previewModal .modal-header .info table tbody td
{
    color: #fff;
    text-shadow: 1px 1px 1px #000;
}

#previewModal .modal-body:has(.preview-jpg)
{
    background-color: #ddd;
}

#previewModal .modal-body
{
    background-color: #fff;
}

#previewModal .modal-body .preview-jpg, .card-body .preview-jpg
{
    padding-bottom: 10px;
    padding-top: 10px;
}

#previewModal .modal-footer
{
    justify-content: center;
}

@media (min-width: 576px)
{
    nav.odnavbar
    {
        background: -webkit-linear-gradient(#78a8e8, #235ca8);
        background: -o-linear-gradient(#78a8e8, #235ca8);
        background: -moz-linear-gradient(#78a8e8, #235ca8);
        background: linear-gradient(#78a8e8, #235ca8);
        border-bottom: none;
        top: 75px;
        padding: 0;
    }

        nav.odnavbar li.nav-item:hover
        {
            background-color: #235ca8;
        }

        nav.odnavbar li.nav-item.active
        {
            background-color: #083e7c;
        }
        
        nav.odnavbar li a.nav-link
        {
            color: #fff;
            font-size: 0.9em;
            letter-spacing: 0.5px;
            text-shadow: 1px 1px 0 #000;
        }

            nav.odnavbar li a.nav-link:hover,
            nav.odnavbar li a.nav-link.active
            {
                color: #ffd800;
            }

    nav.odnavbar-law
    {
        background: -webkit-linear-gradient(#ffaf3a, #b26d09);
        background: -o-linear-gradient(#ffaf3a, #b26d09);
        background: -moz-linear-gradient(#ffaf3a, #b26d09);
        background: linear-gradient(#ffaf3a, #b26d09);
        border-bottom: none;
        top: 75px;
        padding: 0;
    }

        nav.odnavbar-law li.nav-item:hover
        {
            background-color: #b26d09;
        }

        nav.odnavbar-law li.nav-item.active
        {
            background-color: #b26d09;
        }

        nav.odnavbar-law li a.nav-link
        {
            color: #fff;
            font-size: 0.9em;
            letter-spacing: 0.5px;
            text-shadow: 1px 1px 0 #000;
        }

            nav.odnavbar-law li a.nav-link:hover,
            nav.odnavbar-law li a.nav-link.active
            {
                color: #30ff00;
            }

    .odbodycontent
    {
        margin-top: 90px;
        padding: 25px 30px;
    }
}

@media (max-width: 575px)
{
    nav.odnavbar
    {
        background-color: #396db2;
        border-bottom: none;
        top: 0;
        padding: 0;
    }

        nav.odnavbar button.navbar-toggler
        {
            margin-right: 3px;
        }

        nav.odnavbar li.nav-item:hover,
        nav.odnavbar li.nav-item:active
        {
            background-color: #1b4782;
        }

        nav.odnavbar li.nav-item.active
        {
            background-color: #083e7c;
        }

        nav.odnavbar li a.nav-link
        {
            padding-left: 15px;
            color: #fff;
            font-size: 1em;
            letter-spacing: 1px;
        }

            nav.odnavbar li a.nav-link:hover,
            nav.odnavbar li a.nav-link:active,
            nav.odnavbar li a.nav-link.active
            {
                color: #ffd800;
            }

    nav.odnavbar a.odbiglogo > img
    {
        width: 200px;
        margin-left: 5px;
    }

        nav.odnavbar button.navbar-toggler
        {
            border: solid #a5b7cf 2px;
        }

    nav.odnavbar-law
    {
        background-color: #b26d09;
        border-bottom: none;
        top: 0;
        padding: 0;
    }

        nav.odnavbar-law button.navbar-toggler
        {
            margin-right: 3px;
        }

        nav.odnavbar-law li.nav-item:hover,
        nav.odnavbar-law li.nav-item:active
        {
            background-color: #784906;
        }

        nav.odnavbar-law li.nav-item.active
        {
            background-color: #633c05;
        }

        nav.odnavbar-law li a.nav-link
        {
            padding-left: 15px;
            color: #fff;
            font-size: 1em;
            letter-spacing: 1px;
        }

            nav.odnavbar-law li a.nav-link:hover,
            nav.odnavbar-law li a.nav-link:active,
            nav.odnavbar-law li a.nav-link.active
            {
                color: #30ff00;
            }

    .odbodycontent
    {
        margin-top: 35px;
        padding: 10px 15px;
    }

    table.outlines > thead > tr > th:nth-child(4)
    {
        -moz-border-radius-topright: 10px;
        border-top-right-radius: 10px;
    }
}


apple-pay-button
{
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 58px;
    --apple-pay-button-border-radius: 3px;
    --apple-pay-button-padding: 0px 0px;
    --apple-pay-button-box-sizing: border-box;
}

.upload-dropzone {
    border: 2px dashed #aac3e5;
    border-radius: 10px;
    padding: 22px;
    background: #f7fbff;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.upload-dropzone.upload-drag {
    border-color: #235ca8;
    background: #eef5ff;
}

.upload-dropzone-inner {
    pointer-events: none;
}

.theme-bw {
    background: #fdfdfd;
    color: #000;
}
.theme-bw nav.odnavbar {
    background: linear-gradient(#2b2b2b, #0f0f0f);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.theme-bw .odbodycontent,
.theme-bw .card {
    background: #fff;
    color: #000;
}
.theme-bw a, .theme-bw .odanchor {
    color: #000;
}
.theme-bw .grid-header {
    background: linear-gradient(90deg, #111, #333);
    color: #f7f7f7;
}
.theme-bw footer.footer {
    background: #f3f3f3;
    color: #111;
    border-top: 1px solid #ccc;
}

.theme-cyan {
    background: #e8f9ff;
    color: #04313d;
}
.theme-cyan nav.odnavbar {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 18px rgba(0, 114, 255, 0.28);
}
.theme-cyan .odbodycontent,
.theme-cyan .card {
    background: #f7fdff;
    color: #04313d;
}
.theme-cyan a, .theme-cyan .odanchor {
    color: #0060d1;
}
.theme-cyan .grid-header {
    background: linear-gradient(90deg, #00c6ff, #0096e6);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.theme-cyan footer.footer {
    background: linear-gradient(90deg, #0060d1, #004a9b);
    color: #e8f4ff;
    border-top: none;
}

.theme-modern {
    background: #0f1116;
    color: #e8eaf0;
}
.theme-modern nav.odnavbar {
    background: linear-gradient(135deg, #1f2937, #0f172a);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.theme-modern .odbodycontent,
.theme-modern .card {
    background: #161922;
    color: #e8eaf0;
}
.theme-modern a, .theme-modern .odanchor {
    color: #5bd1ff;
}
.theme-modern .card {
    border: 1px solid #222632;
}
.theme-modern .grid-header {
    background: linear-gradient(90deg, #0f172a, #1f2937);
    color: #e8eaf0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.theme-modern footer.footer {
    background: #0f172a;
    color: #9fb3c8;
    border-top: 1px solid #1f2937;
}

/* Gate overlay */
.gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(6px);
}

.gate-card {
    background: #0f1c30;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 22px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    width: min(360px, 90vw);
    color: #e8edf5;
    text-align: center;
}

.gate-card h2 {
    margin: 0 0 10px;
    font-size: 1.3rem;
}

.gate-card p {
    margin: 0 0 14px;
    color: #ffffff;
}

.gate-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #0c1626;
    color: #e8edf5;
    margin-bottom: 12px;
}

.gate-error {
    color: #ff7a66;
    min-height: 18px;
    margin-bottom: 8px;
}

.gate-button {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    background: linear-gradient(135deg, #44e0c5, #1fe2aa);
    color: #041423;
    cursor: pointer;
}

body.locked {
    overflow: hidden;
}

/* Small black-and-white site logo */
.od-logo-small {
    height: 32px;
    width: auto;
    filter: none;
}