/* extra */


:root {
    --padding-sm: 2rem;
    --padding-md: 4rem;
    --padding-lg: 6rem;
    --font-body : Arial, sans-serif;
    font-size   : 10px;
}


/* reset */
*,
::before,
::after {
    box-sizing                 : border-box;
    text-rendering             : geometricprecision;
    -webkit-tap-highlight-color: transparent;
    min-width                  : 0;
}

html,
body {
    height: 100%;
}

body {
    padding        : 0;
    margin         : 0;
    font-family    : var(--font-body);
    line-height    : 1.5em;
    font-size      : 17px;
    color          : #333;
    display        : flex;
    align-items    : center;
    justify-content: center;

}

body:has(dialog[open]) {
    overflow: hidden;
}

*.hidden {
    display: none !important;
}

.p-sm {
    padding: var(--padding-sm);
}

.p-md {
    padding: var(--padding-md);
}



.container-carousel {
    width        : 100%;
    max-width    : 604px;
    max-height   : 604px;
    border       : none;
    position     : relative;
    aspect-ratio : 1/1;
    border-radius: 5px;
    overflow     : hidden;
}

/* .container-carousel button {
position: absolute;
top: 50%;
width: 48px;
height: 48px;
display: inline-flex;
font-size: 24px;
line-height: 24px;
align-items: center;
justify-content: center;
border: none;
font-family: Arial, sans-serif;
background-color: rgba(200, 200, 200, 0.5);
color: #fff;
margin: 0;
padding: 0;
cursor: pointer;
margin-top: -24px;
z-index: 2;
}

.container-carousel button.right {
right: 0;
border-radius: 10px 0 0 10px;
}

.container-carousel button.right::before {
content: '\276F';
}

.container-carousel button.left {
left: 0;
border-radius: 0 10px 10px 0;
}

.container-carousel button.left::before {
content: '\276E';
} */

.carousel {
    margin          : 0;
    padding         : 0;
    border          : none;
    list-style      : none;
    width           : 100%;
    display         : flex;
    overflow-x      : hidden;
    scroll-behavior : smooth;
    /* use this property to hide the scrollbar on firefox */
    scrollbar-width : none;
    scroll-snap-type: x mandatory;
}

/*  use this pseudo class to hide the scrollbar on chrome */
.carousel::-webkit-scrollbar {
    display: none;
}

.carousel .item {
    flex-basis       : 100%;
    width            : 100%;
    flex-shrink      : 0;
    padding          : 0;
    margin           : 0;
    display          : flex;
    scroll-snap-align: start;
    align-items      : center;
    justify-content  : center;
    flex-direction   : column;
    flex-wrap        : nowrap;
    min-width        : 0;
}

img {
    max-width     : 100%;
    width         : 100%;
    height        : auto;
    vertical-align: top;
}

/* DIALOG */
dialog {}

dialog[open] {
    display         : flex;
    max-width       : 90vw;
    max-height      : 90vh;
    justify-content : center;
    align-items     : center;
    border          : none;
    appearance      : none;
    background-color: transparent;
    overflow        : hidden;
    flex-direction  : column;
    flex-wrap       : nowrap;
    padding         : var(--padding-lg);
}

dialog.compact {
    max-width : 600px;
    max-height: 600px;
}

dialog::backdrop {
    background-color  : rgba(56, 99, 128, 0.918);
    /* backdrop-filter: blur(5px); */
}

dialog>div {
    position        : relative;
    overflow        : hidden;
    padding         : var(--padding-sm);
    display         : flex;
    max-height      : 100%;
    min-height      : 0;
    max-width       : 1200px;
    flex-direction  : column;
    height          : 100%;
    justify-content : space-between;
    flex-wrap       : nowrap;
    align-items     : center;
    background-color: #fff;
    /* border       : solid 1px #ddd; */
    border-radius   : .5rem;
    box-shadow      :
        0px 1px 2px rgba(0, 0, 0, 0.2),
        0px 3px 5px rgba(0, 0, 0, 0.3),
        0px 6px 10px rgba(0, 0, 0, 0.2);
}

dialog button,
dialog .button {
    padding                : 0 var(--padding-sm);
    font-weight            : normal;
    cursor                 : pointer;
    outline                : 0;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing : antialiased;
    text-shadow            : none;
    box-shadow             : none;
    display                : inline-flex;
    height                 : 4rem;
    align-items            : center;
    justify-content        : center;
    white-space            : nowrap;
    appearance             : none;
    background-image       : none;
    font-size              : 1.5rem;
    margin                 : 2px 0;
    text-decoration        : none;
    text-transform         : uppercase;
    -webkit-transition     : all .2s ease;
    transition             : all .2s ease;
    background-color       : #425e72;
    border                 : none;
    color                  : #fff;
    border-radius          : 2rem;
    line-height            : 30px;
}

dialog button.inline {
    appearance       : none;
    cursor           : pointer;
    display          : inline-block;
    margin           : 0;
    outline          : 0;
    background-image : none;
    background-color : transparent;
    border           : none;
    color            : #425e72;
    text-decoration  : none;
    box-shadow       : none;
    text-shadow      : none;
    height           : auto;
    /* font-size     : inherit;
font-weight          : inherit; */
    flex-grow        : 0;
    flex-basis       : unset;
    /* text-transform: inherit; */
}

dialog button.close.top {
    position     : relative;
    top          : 0;
    right        : 0;
    width        : 50px;
    height       : 50px;
    padding      : 0;
    background   : transparent;
    z-index      : 999999;
    box-shadow   : none;
    border       : none;
    outline      : none;
    border-radius: 0;
    transition   : all ease 0.3s;
    cursor       : pointer;
    margin       : 0;
}

dialog button.close.top:focus {
    outline: none;
}

/* dialog button.close.top:hover {
background-color: rgba(0, 0, 0, .5);
} */

dialog button.close.top::after,
dialog button.close.top::before {
    position  : absolute;
    content   : '';
    display   : inline-block;
    width     : 20px;
    height    : 2px;
    outline   : transparent solid 1px;
    top       : 24px;
    left      : 15px;
    background: #333;
}

dialog button.close.top::before {
    transform: rotateZ(-45deg);
}

dialog button.close.top::after {
    transform: rotateZ(45deg);
}

dialog .dialog-header {
    padding        : 0;
    border-bottom  : solid 1px #ddd;
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    width          : 100%;
}

dialog .dialog-header * {
    margin: 0;
}

dialog .dialog-body {
    height     : 100%;
    padding    : var(--padding-sm) 1rem var(--padding-sm) 0;
    overflow-y : auto;
    flex-grow  : 0;
    flex-shrink: 1;
}

dialog .dialog-footer {
    border-top     : solid 1px #ddd;
    padding        : var(--padding-sm) 0 0 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 100%;
}

dialog .dialog-footer button {
    flex-basis: 40%;
}

@media (max-width: 600px) {
    dialog[open] {
        height    : 100%;
        width     : 100%;
        max-height: 100%;
        max-width : 100%;
        padding   : 0;
    }

    dialog .dialog-body {
        display    : flex;
        align-items: center;
    }

    dialog>div {
        position        : relative;
        overflow        : hidden;
        padding         : var(--padding-sm);
        display         : flex;
        max-height      : 100%;
        min-height      : 0;
        max-width       : 1200px;
        flex-direction  : column;
        height          : 100%;
        justify-content : space-between;
        flex-wrap       : nowrap;
        align-items     : center;
        background-color: #fff;
        border          : solid 1px #ddd;
        border-radius   : 0;
        box-shadow      : none;
    }
}