/* Abutment Selection Guide - page-specific styling.
 *
 * Gathered from the original BioHorizons project, where these rules lived in theme.css (216 KB)
 * and Site.css. This site loads neither, so the guide rendered as unstyled Bootstrap.
 *
 * Every selector is prefixed .asg-page, the wrapper added to the view. These names are generic
 * enough - .title, .center, .options, .guide, .divider, .sub, .block - that site-wide they would
 * collide with the CMS and the navigation. The #thumbs rules are already id-scoped but carry the
 * prefix too, so the whole file is visibly page-local.
 *
 * Deliberately NOT carried across:
 *
 *   .btn-primary, .btn-outline-primary, .btn:focus, .dropdown-item
 *       bootstrap-theme.css already maps these onto --site-color-primary. The original hard-codes
 *       #f58025, which would pin this page to BioHorizons orange in a template meant to re-skin.
 *
 *   .container at 992px and 1200px
 *       Bootstrap sets its own container widths; overriding them for one page is not worth it.
 *
 *   .dropdown-menu, and its @media (min-width: 992px) partner
 *       The pair is a hover-reveal: display:block + opacity:0 + visibility:hidden, revealed by a
 *       :hover rule that belongs to the old mega-menu and is not on this page. This page's
 *       dropdowns are Bootstrap-driven (data-bs-toggle, 126 of them) and Bootstrap shows them by
 *       toggling .show, which sets display only. Carrying these would leave every dropdown opening
 *       invisibly.
 */


/* ---------------------------------------------------------------
   From the original theme.css - 12 rules
   --------------------------------------------------------------- */


.asg-page .btn-border {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.asg-page .rectangle-number {
    display: block;
    margin: 10px 0px 30px 0px;
    padding: 0 5px 3px 5px;
    width: 100%;
    min-height: 30px;
    max-height: 100%;
    text-align: center;
    color: #fff;
}

.asg-page .a1 {
    background-color: #5c5c5c;
}

.asg-page .a2 {
    background-color: #af1d18;
}

.asg-page .m1 {
    background-color: #005e20;
}

.asg-page .m2 {
    background-color: #ad73c9;
}

.asg-page .p1 {
    background-color: #218ca3;
}

.asg-page .p2 {
    background-color: #d06c1d;
}

.asg-page .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.asg-page .five-20 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

@media screen and (max-width: 766px) {

    .asg-page .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 80%;
    }
}


@media (max-width: 767px) {

    .asg-page .center-col {
        display: none;
    }
}


/* ---------------------------------------------------------------
   From the original Site.css - 47 rules
   --------------------------------------------------------------- */


.asg-page .selection-header {
    width: 100%;
    max-width: 100%;
    background: #eee;
    border-radius: 4px;
    padding: 0 25px;
    margin-bottom: 50px;
}

.asg-page .breadcrumb {
    background-color: #eee;
    font-size: 1rem;
    color: #444;
    display: block;
    margin: 0px 0 0 0;
    padding: 8px 0 0 10px;
}

.asg-page .asg-buttons {
    text-align: right;
}

.asg-page #thumbs {
    width: 100%;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    display: inline-flex;
}

.asg-page #thumbs .btn-block-outline-guide {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.asg-page #thumbs .guide {
    max-width: 240px;
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.asg-page #thumbs .guide .subheading {
    display: block;
    margin: 0 10px 30px 10px;
    margin-left: auto;
    margin-right: auto;
}

.asg-page #thumbs .guide .subheading .sub {
    height: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.asg-page #thumbs .guide .subheading .divider {
    margin: 0 10px;
    height: 15px;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.asg-page #thumbs .guide .subheading .divider-left {
    height: 15px;
    border: 1px solid #ddd;
    border-right: 0;
    border-bottom: 0;
    border-radius: 8px 0 0 0;
}

.asg-page #thumbs .guide .subheading .divider-mid {
    height: 15px;
    border-top: 1px solid #ddd;
}

.asg-page #thumbs .guide .subheading .divider-right {
    height: 15px;
    border: 1px solid #ddd;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 8px 0 0;
}

.asg-page #thumbs .subheading {
    display: block;
    margin: 0 10px 30px 10px;
    margin-left: auto;
    margin-right: auto;
}

.asg-page #thumbs .subheading .sub {
    height: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.asg-page #thumbs .subheading .divider {
    margin: 0 10px;
    height: 15px;
    border: 1px solid #ddd;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.asg-page #thumbs .subheading .divider-left {
    height: 15px;
    border: 1px solid #ddd;
    border-right: 0;
    border-bottom: 0;
    border-radius: 8px 0 0 0;
}

.asg-page #thumbs .subheading .divider-mid {
    height: 15px;
    border-top: 1px solid #ddd;
}

.asg-page #thumbs .subheading .divider-right {
    height: 15px;
    border: 1px solid #ddd;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 8px 0 0;
}

.asg-page #thumbs .guide a {
    font-size: 18px;
    display: block;
}

.asg-page #thumbs .guide a:hover {
    color: #f58025;
    text-decoration: none;
}

.asg-page #thumbs a img {
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

.asg-page #thumbs .guide .title {
    display: block;
    max-width: 90%;
    min-height: 100px;
    padding: 15px 5px 0px 5px;
    text-align: center;
    margin: 0 auto 10px auto;
    color: #444;
}

.asg-page #thumbs .guide .title:hover {
    color: #f58025;
    text-decoration: none;
}

.asg-page #thumbs .options {
    text-align: center;
    font-size: 16px;
    max-width: 100%;
}

.asg-page #thumbs .guide .options .dropdown {
    position: relative;
    display: block;
    width: 100%;
}

.asg-page #thumbs .guide .options .dropbtn {
    display: block;
    background-color: transparent;
    border: 1px solid #999;
    border-radius: 4px;
    color: #444;
    margin: 20px auto 0px auto;
    text-align: center;
    padding: 8px 0px;
    font-size: 16px;
    cursor: pointer;
    width: 80%;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.asg-page #thumbs .guide .options .dropdown .dropdown-toggle {
    box-shadow: none;
}

.asg-page #thumbs .guide .options .dropdown .dropdown-menu {
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-radius: 0 0 4px 4px;
}

.asg-page #thumbs .guide .options .dropdown .dropdown-menu a {
    color: #444;
}

.asg-page #thumbs .guide .options .dropdown .dropdown-menu a:nth-child(2n+1) {
    color: #444;
    background: #f6f6f6;
}

.asg-page #thumbs .guide .options .dropdown .dropdown-menu a:hover {
    background: #e8e8e8;
}

.asg-page #thumbs .guide .options .dropdown:hover .dropbtn {
    background-color: #999;
    color: #fff;
}

@media (max-width: 576px) {

    .asg-page .asg-buttons {
        text-align: center;
    }

    .asg-page .large-psg {
        display: none;
    }

    .asg-page .small-psg {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    .asg-page .small-psg h6 {
        display: block;
        padding: 10px 0 0 0;
        color: #444;
        text-align: left;
        margin: 0 auto 10px auto;
    }

    .asg-page .small-psg .btn-block-outline-guide {
        margin-left: auto;
        margin-right: auto;
        padding: 4px 0px;
        max-width: 130px;
    }

    .asg-page .small-psg .dropdown {
        position: relative;
        display: block;
        width: 100%;
    }

    .asg-page .small-psg .dropbtn {
        display: block;
        background-color: transparent;
        border: 1px solid #999;
        border-radius: 4px;
        color: #444;
        margin: 0px auto 0px auto;
        text-align: center;
        padding: 4px 16px;
        font-size: 16px;
        cursor: pointer;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .asg-page .small-psg .dropdown .dropdown-toggle {
        box-shadow: none;
    }

    .asg-page .small-psg .dropdown .dropdown-menu {
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        border-radius: 0 0 4px 4px;
    }

    .asg-page .small-psg .dropdown .dropdown-menu a {
        color: #444;
    }

    .asg-page .small-psg .dropdown .dropdown-menu a:nth-child(2n+1) {
        color: #444;
        background: #f6f6f6;
    }

    .asg-page .small-psg .dropdown .dropdown-menu a:hover {
        background: #e8e8e8;
    }

    .asg-page .dropdown:hover .dropbtn {
        background-color: #999;
        color: #fff;
    }
}


@media (min-width: 577px) {

    .asg-page .large-psg {
        display: block;
    }

    .asg-page .small-psg {
        display: none;
    }
}