:root {
    --color-primary: #525CA3;
    --color-primary-light: #0091CF;
    --color-primary-dark: #0B0F33;
    --color-secondary: #2B2B38;
    --color-secondary-light: #BBBAC6;
    --bg-oval: rgba(43, 43, 65, 0.15);
    --bg-modal: rgba(36, 42, 87, 0.9);;
    --color-bg-gradient: linear-gradient(314.57deg, var(--color-primary) 20%, var(--color-primary-light) 100%);
    --color-white: #FFF;
    --color-black: #000;
    --font-NotoSans: 'Inter', sans-serif;
    --font-ITCAvantGardePro: 'ITC Avant Garde Pro';
    --font-ITCAvantGardePro-Bold: 'ITC Avant Garde Gothic Pro';
    --font-ITCAvantGardePro-Demibold: 'ITC Avant Garde Pro';
    --font-ITCAvantGardePro-book: 'ITC Avant Garde Gothic Std Book';
    --font-opensans: "Open Sans", sans-serif;
    --font-icomoon: 'icomoon';
}
html,
body {
    overflow: hidden;
}

button {
    outline: none !important;
}
/* img */
.ym-iframe .desk-body {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: top;
    height: auto;
}
.ym-iframe main {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    max-height: 600px;
    overflow: hidden;
}

.ym-iframe .menu-desk {
    width: 100%;
    padding-top: 50px;
}
.ym-iframe .menu-desk button {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 0;
    margin: 5px 0;
    transition: 0.3s ease-in-out;
}
.ym-iframe .menu-desk > div {
    margin-bottom: 24px;
}
.ym-iframe .menu-desk > div > button {
    margin-bottom: 12px;
}
.ym-iframe .menu-desk > div > button + div {
    margin-left: 47px;
}

.ym-iframe .menu-desk button h2 {
    color: var(--color-black);
    opacity: 0.5;
    font-size: 16px;
    font-family: var(--font-ITCAvantGardePro-Demibold);
    margin: 0;
    margin-left: 24px;
    transition: 0.3s ease-in-out;
    text-align: left;
}
.ym-iframe .menu-desk button.checked h2 {
    font-weight: bold;
    opacity: 1;
}
.ym-iframe .menu-desk button:hover h2 {
    opacity: 1;
}
.ym-iframe .menu-desk button h3 {
    color: var(--color-black);
    opacity: 0.5;
    font-size: 14px;
    font-family: var(--font-ITCAvantGardePro-Demibold);
    margin: 0;
    transition: 0.3s ease-in-out;
    text-align: left;
}
.ym-iframe .menu-desk button.actived h3 {
    font-weight: bold;
    opacity: 1;
}
.ym-iframe .menu-desk button.actived span {
    font-size: 16px;
}
/* buttons */
.ym-iframe button {
    background-color: transparent;
    border: 0;
}
.ym-iframe button:hover {
    background-color: transparent;
    border: 0;
}
.ym-iframe button:focus:not(:focus-visible) {
    box-shadow: none;
}


.AMBOS button span.check svg,
.ASMD button span.check svg,
.GAUCHER button span.check svg {
    width: 24px;
    height: 24px;
    border: 1px solid #979797;
    fill: transparent;
}
.AMBOS button:hover span.check svg,
.ASMD button:hover span.check svg,
.GAUCHER button:hover span.check svg {
    fill: black;
}
.AMBOS button.checked span.check svg,
.ASMD button.checked span.check svg,
.GAUCHER button.checked span.check svg {
    background-color: #D8D8D8;
    fill: black;
}


.ym-iframe .menu-desk button span {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    font-size: 12px;
    margin-top: -5px;
}
.ym-iframe .menu-desk button span.check {
    margin-right: 0px;
}
.sub-list .AMBOS span svg,
.AMBOS button span svg,
.modal .ambos svg {
    fill: #7A00E6;
}
.sub-list .ASMD span svg,
.ASMD button span svg,
.modal .asmd svg {
    fill: #224A46;
}
.sub-list .GAUCHER span svg,
.GAUCHER button span svg,
.modal .gaucher svg {
    fill: #BDBD00;
}

.AMBOS.disabled > button,
.ASMD.disabled > button,
.GAUCHER.disabled > button {
    opacity: 0.5;
}
.AMBOS.disabled:hover button,
.ASMD.disabled:hover button,
.GAUCHER.disabled:hover button {
    opacity: 1;
}

.AMBOS.disabled button + div,
.ASMD.disabled button + div,
.GAUCHER.disabled button + div {
    pointer-events: none;
    opacity: 0.5;
}
#change-body-desk {
    position: relative;
}


#change-body-desk .pointers .ambos-points.disabled,
#change-body-desk .pointers .asmd-points.disabled,
#change-body-desk .pointers .gaucher-points.disabled {
    visibility: hidden;
    pointer-events: none;
}

#change-body-desk .pointers > div button {
    position: absolute;
}
#change-body-desk .pointers .ambos-points .ambos-point-01 {
    top: 65%;
    left: 57%;
    transform: translate(-50%, 55%);
}
#change-body-desk .pointers .ambos-points .ambos-point-02 {
    top: 42%;
    left: 40%;
    transform: translate(-50%, 55%);
}
#change-body-desk .pointers .ambos-points .ambos-point-03 {
    top: 45%;
    left: 61%;
    transform: translate(-50%, 55%);
}
#change-body-desk .pointers .asmd-points .asmd-point-01 {
    top: 11%;
    left: 48%;
    transform: translate(-80%, -45%);
}
#change-body-desk .pointers .asmd-points .asmd-point-02 {
    top: 33%;
    left: 72%;
    transform: translate(-65%, -50%);
}
#change-body-desk .pointers .asmd-points .asmd-point-03 {
    top: 25%;
    left: 40%;
    transform: translate(-45%, -85%);
}
#change-body-desk .pointers .asmd-points .asmd-point-04 {
    top: 38%;
    left: 49%;
    transform: translate(-45%, -85%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-01 {
    top: 5%;
    left: 50%;
    transform: translate(-55%, -40%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-02 {
    top: 30%;
    left: 30%;
    transform: translate(-51%, -80%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-03 {
    top: 44%;
    left: 75%;
    transform: translate(-54%, -17%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-04 {
    top: 54%;
    left: 38%;
    transform: translate(-50%, -50%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-05 {
    top: 62%;
    left: 59%;
    transform: translate(-50%, -55%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-06 {
    top: 44%;
    left: 25%;
    transform: translate(-49%, -60%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-07 {
    top: 38%;
    left: 40%;
    transform: translate(-48%, -60%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-09 {
    top: 38%;
    left: 73%;
    transform: translate(-50%, -23%);
}
#change-body-desk .pointers .gaucher-points .gaucher-point-08 {
    top: 36%;
    left: 60%;
    transform: translate(-50%, -23%);
}

#change-body-mobile .menu-mobile-body {
    position: absolute;
    top: 30px;
    left: 20px;
}
#change-body-mobile .menu-mobile-body .dropdown {
    border: 1px solid black;
    width: 160px;
    text-align: left;
}
#change-body-mobile .menu-mobile-body .dropdown button {
    width: 100%;
    text-align: left;
}
#change-body-mobile .menu-mobile-body .dropdown button + ul {
    top: -2px !important;
    left: -1px !important;
    border-radius: 0;
    border: 1px solid black;
}
#change-body-mobile .mobile-body {
   height: 600px;
   object-fit: contain;
   margin-left: 50px;
}


.ym-iframe button.btn-menu {
    border: 1px solid var(--color-black);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-items: center;
    padding: 8px 4px;
}
.ym-iframe button.btn-menu div {
    display: flex;
    justify-items: center;
    margin: 0 5px;
    font-weight: 700;
}

.sub-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    padding: 5px 5px;
}
.sub-list button span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.sub-list button {
    line-height: 0;
}

.sub-list button span svg {
    position: relative;
    top: -2px;
    right: 4px;
}


@media (max-width: 780px) {
    html,
    body {
        overflow: inherit;
    }
    .ym-iframe main {
        max-height: inherit;
    }
    .ym-iframe .menu-desk {
        width: 100%;
        padding-top: 0;
    }
    .ym-iframe .desk-body {
        /* margin-top: 10px;
        margin-left: 10px; */
    }
    .ym-iframe .menu-desk button h2 {
        margin-left: 16px;
    }
}