:root {
    --color-main: #E4151C;
    --color-solorex: #EB7224;

    --primary-color: #455363;
    --bg-color: rgb(255, 255, 255);
    --bg-color-disabled: rgba(255, 255, 255, 0.5);
    --bg-hover-color: rgba(0, 136, 255, 0.20);
    --bg-overlay-color: rgba(255, 255, 255, 0.7);
    
    --bg-color-primary: #efefef;
    --bg-hover-color-primary: #d7d7d7;

    --bg-color-secondary: #faf9f8;
    --bg-hover-color-secondary: #e6e6e6;

    --link-color: #323130;

    --text-color: #323130;
    --text-color-primary: #555352;
    --text-color-secondary: #747474;
    --text-color-alert: #ff0000;

    --fill-color: #5F6368;
    --border-color: #DADCE0;
    --scrollbar-color: rgba(0, 0, 0, 0.15);
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.25);
    --theme-color: #455A64;
    --bg-selected: #d4d4d4;

    --contrast: 1;
    --brigtness: 200;

    --color-scheme: light;
}

body {
    overflow: auto !important;
    font-size: 1.2rem;
}

form[name='e-ticket']  h3 { 
    font-size: 1.3rem;
    margin: 0 0 0.8rem 0; 
}
p { margin: 0 0 2rem 0; }

a {
    color: var(--text-color, #d4d4d4);
    text-decoration: underline;
}

form[name='e-ticket'] {
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    padding: 2rem 0;
}

form[name='e-ticket'] .description {
    display: flex;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background-color: color-mix(in srgb, var(--color-main) 40%, white);
    border-radius: 1rem;
    color: #000;
    font-size: 1.1rem;
}

form[name='e-ticket'] .description:before {
    display: inline-block;
    content: '\2139';
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    border-radius: 50%;
    background-color: var(--color-main);
    height: 1.5rem;
    aspect-ratio: 1;
    text-align: center;
}

form[name='e-ticket'] section {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    gap: 2rem;
    border-radius: .5rem;
}

form[name='e-ticket'] section>*:not(label) {
    display: flex;
    flex-flow: row wrap;
    column-gap: 1rem;
    row-gap: .5rem;
    flex: 1 0 30%;
    align-content: flex-start;
    align-items: center;
}

form[name='e-ticket'] section.half>*:not(label) {
    display: flex;
    flex-flow: column nowrap;
    gap: .5rem;
    flex: 1 0 calc(49% - 1rem);
}

form[name='e-ticket'] section>div>label {
    min-height: 1.25em;
    line-height: 1.25;
    flex: 1 0 100%;
    height: min-content;
}

form[name='e-ticket'] section>div> :nth-child(2) {
    flex: 1;
    color: var(--text-color);
}

form[name='e-ticket'] section>div> :nth-child(3) {
    flex: 0;
}

form[name='e-ticket'] section.interestedIn>label {
    display: flex;
    gap: 1rem;
    flex: 1 0 20%;
    white-space: nowrap;
}

form[name='e-ticket'] section.confererences>label {
    display: flex;
    gap: 1rem;
    flex: 1 0 100%;
}

form[name='e-ticket'] section>*.strecth {
    flex: 1 0 100% !important;
}

form[name='e-ticket'] section>*.header {
    font-size: 1.5rem;
    font-weight: 700;
}

form[name='e-ticket'] section>*.caption {
    font-size: 1.5rem;
    font-weight: 700;
}

input[type='radio']:after {
    width: 20px;
    height: 20px;
    left: -3.5px;
    top: -3.5px;
    border-radius: 20px;
    position: relative;
    background-color: #d1d3d1;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 0px solid white;
}

input[type="checkbox"] {
    accent-color: var(--color-main);
    transform: scale(1.4);

    -webkit-appearance: none;
    appearance: none;
    background-color: var(--form-background);
    margin: 0;
    pointer-events: all;
    font: inherit;
    color: currentColor;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.08em solid var(--color-main);
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]:before {
    content: "";
    width: 1rem;
    height: 1rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: center;
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--color-main);
    background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type='radio']:checked:after {
    width: 20px;
    height: 20px;
    left: -3.5px;
    top: -3.5px;
    border-radius: 20px;
    position: relative;
    accent-color: var(--color-main);
    background-color: var(--color-main);
    content: '✔';
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: visible;
    border: 0px solid white;
    text-align: center;
    font-size: 1.3rem;
    color: white;
}

form[name='e-ticket'] > .footer {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    padding: 1rem;
}

.footer .confirms {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
    flex: 1 0%;
    align-items: start;
}

.footer .confirms>div {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
}

.confirms button {
    padding: 1rem;
}

.tooltip {
    position: relative;
    /* making the .tooltip span a container for the tooltip text */
}

:root {
    --h: 2em;
    --b: 1em;
}

.tooltip:before {
    content: attr(data-text);
    /* here's the magic */
    position: absolute;

    top: -250%;
    /* transform:translateY(-100%); */

    left: -150%;
    /* transform:translateX(-50%); */

    /* basic styles */
    width: 200px;
    padding: 10px;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-align: center;

    display: none;
    /* hide by default */

    border-image: fill 0 var(--h) conic-gradient(#CC333F 0 0);
    /* the color  */
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, calc(50% + var(--b) / 2) 100%, 50% calc(100% + var(--h)), calc(50% - var(--b) / 2) 100%);
}

.tooltip:hover:before {
    display: block;
}

dialog {
    border: solid 1px var(--border-color);
    background-color: var(--bg-color-secondary);
    color: var(--text-color);
    margin: auto 4rem;
    padding: 3rem;
}

dialog::backdrop {
    opacity: 0.6;
}

@media screen and (max-width: 650px) {
    form[name='e-ticket'] #img {
        display: none;
    }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.notification {
    color: var(--text-color-alert, red);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 0;
    align-self: center;
}

.notification:empty {
    display: none;
}

.notification:not(:empty)::before {
    content: "!";
    background-color: var(--text-color-alert, red);
    border-radius: 50%;
    color: var(--text-color, inherit);
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    aspect-ratio: 1;
}