/* DD HEADINGS */
.h1,.h2,.h3,.h4,.h5,.h6 {
    -webkit-margin-before: .5rem;
    margin-block-start:.5rem;
    -webkit-margin-after: 1rem;
    margin-block-end:1rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit
}

.h1 {
    font-size: 2.5rem
}

.h2 {
    font-size: 2rem
}

.h3 {
    font-size: 1.75rem
}

.h4 {
    font-size: 1.5rem
}

.h5 {
    font-size: 1.25rem
}

.h6 {
    font-size: 1rem
}

/* DD COMMON */
.dd-noscroll {
    overflow: hidden;
}

.dd-fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: 85vh; /* fallback */
    max-width: 100%; /* fallback */
    max-height: calc(100vh - var(--shh));
    max-width: calc(100vw - var(--sbw));
}

.dd-noscroll .dd-fullscreen {
    max-width: 100vw;
}

.dd-fullscreen .dd-stretch-if-fullscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}

body .dd-center-img {
    font-size: 0;
    text-align: center;
}
body .dd-center-img::before {
    content:"";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
body .dd-center-img img {
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

body .dd-cover-img img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.dd-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* For iOS Safari */
    tap-highlight-color: transparent; /* For other browsers */
}

.sape-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap:10px;
}

.sape-flex-space-bewteen {
    justify-content: space-between;
}

.sape-flex-justify-left {
    justify-content: left;
}

.sape-flex-center {
    height:100%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sape-flex-align-center {
    align-items: center;
}

.sape-flex-justify-center {
    justify-content: center;
}

.sape-flex-row {
    flex-direction: row;
}

.sape-flex-column {
    flex-direction: column;
}

a.sape-no-hover-effect,
a.sape-no-hover-effect:focus,
a.sape-no-hover-effect:active,
a.sape-no-hover-effect:visited,
a.sape-no-hover-effect:target {
    color:inherit;
    text-decoration: inherit;
}

@media screen AND (hover:hover){
    
}




.sape-sticky-top {
    position: sticky;
    top:0;
    top: var(--shh);
}
body.admin-bar .sape-sticky-top  {
    top:32px;
    top: var(--shh);
}




/* HOTSPOTS */
.ipe-hotspot.anchor-top {
    transform: translate(-50%, 0%);
}
.ipe-hotspot.anchor-bottom {
    transform: translate(-50%, 100%);
}
.ipe-hotspot.anchor-right {
    transform: translate(-100%, 50%);
}
.ipe-hotspot.anchor-left {
    transform: translate(0%, 50%);
}



/* SAPE COMMON */
.sape-square{
}
.sape-square::before{
    content:"";
    display: block;
    padding-bottom: 100%;
}

.sape-alignment-left {
    text-align: left;
}

.sape-alignment-center {
    text-align: center;
}

.sape-alignment-right {
    text-align: right;
}

.sape-toned-down {
    opacity: 0.15!important;
}


body .sape-input {
    min-height: 48px;
    min-width: 48px;
    padding: 0 20px;
    border: 1px solid black;
    border-radius: 99px;
}

body .sape-input[type="checkbox"] {
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
}

body .sape-input[type="checkbox"]:focus {
    outline: 1px solid black;
    outline-offset: 3px;
}

.sape-input-field-wrapper {
    margin-bottom: 20px;
    justify-content: start;
}
.sape-input-field-wrapper label,
.sape-input-field-wrapper input {
    margin: 3px;
}

.sape-button a {
    text-decoration: none;
}

body .sape-button {
    display: flex;
    width: auto;
    align-items: center;
    justify-content: center;
    background: #D4D4D4;    /* VAR */
    color: black;           /* VAR */
    fill: black;            /* VAR */
    font-size: 1.2em;
    font-weight: 400;
    padding: 0px 36px;
    min-height: 48px;
    min-width: 48px;
    border:0px solid black;
    border-radius: 99px;
    margin: 0px;
    white-space: nowrap;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

body .sape-button.small {
    font-size: 1em;
    padding: 0px 20px;
    min-height: 36px;
    min-width: 36px;
}

body .sape-button.rectangular {
    border-radius: 0;
}

body .sape-button.square {
    min-height: unset;
    padding: 0;
}

body .sape-button.square::before {
    content:"";
    padding-bottom: 100%;
    display: block;
}

body .sape-button.sape-button-highlight,
body .sape-button.sape-button-highlight:focus{
    background: black;      /* VAR */
    color:white;            /* VAR */
    fill:white;             /* VAR */
}
body .sape-button.sape-on,
body .sape-button.sape-on:focus{
    background: black;      /* VAR */
    color:white;            /* VAR */
    fill:white;             /* VAR */
}
body .sape-button:focus {
    background-color: inherit;
    color: inherit;
    fill: inherit;
    outline: none;
}
body .sape-button:focus-visible {
    background: black;    /* VAR */
    color:white;                    /* VAR */
    fill:white;                     /* VAR */
    outline: none;
}
@media screen and (hover:hover){
    body .sape-button:hover {
        background: rgb(85, 85, 85);    /* VAR */
        color:white;                    /* VAR */
        fill:white;                     /* VAR */
        outline: none;
    }
}

body .sape-button .sape-button-icon:not(:first-child) {
    margin-left:10px;
}


/* HOTSPOTS */
.handle-pluralis.count-1 .plur{
    display: none;
}
.handle-pluralis:not(.count-1) .sing{
    display: none;
}


/* PSUEDO */
.sape-m2-suffix::after{
    content:" m\00B2";
}
.sape-kr-suffix::after{
    content:" kr.";
}



/* FITTING */
.position-fixed {
    position:fixed;
}

.autofitting-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
}

.autofitting-cover {
    position: relative;
    width: 100%;
}