@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display&display=swap";:root{--color-priority: #ff5858;--color-button: #ea047e;--color-button-hover: #fe047a;--color-black: #3c4048;--color-details: #00abb3}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:#eeeeee;font-family:Montserrat,sans-serif;color:var(--color-black)}#app{width:80%;max-width:800px;margin:1em auto}header{display:flex;align-items:baseline;align-content:center}#header{font-size:2.5rem;font-weight:900}#header:before{position:absolute;content:"";height:.7em;width:80px;z-index:-1;background:var(--color-priority);transform:translate(-10%,235%)}#logo{margin-left:.5em}header .logo{display:inline;height:2em}.f-priority{color:var(--color-priority)}label{display:block;font-weight:700;margin:1em 0}input[type=text],select,textarea{width:100%;padding:.5em;border-radius:.2em;border:1px solid #acacac;color:var(--color-black)}input[type=text]:focus,textarea:focus{outline:3px solid #acacac}.left-label{display:unset;font-weight:400;margin-right:2em}.mt-extra{margin-top:2em}.extra-height{min-height:150px}input[type=checkbox]{display:none;pointer-events:none}input[type=checkbox]+label{cursor:pointer;display:grid;grid-template-columns:auto 3fr}input[type=checkbox]:checked+label .check{stroke-dashoffset:0}label svg{width:2em;stroke:var(--color-black);stroke-width:5;fill:#fff}.box{stroke-dasharray:320;stroke-dashoffset:0;fill:#fff;transition:stroke-dashoffset .3s linear}.check{stroke-dasharray:70;stroke-dashoffset:70;fill:none;transition:stroke-dashoffset .3s linear}.left-col span{padding-top:.5em;margin-left:.5em;font-weight:700;color:var(--color-black)}.cta{display:block;width:100%;padding:1em;text-align:center;text-decoration:none;color:#fff;background:var(--color-priority);margin-top:1.5em;font-weight:700;font-size:1.2em;border-radius:.2em}.right-col{margin-top:2em;line-height:1.5em;color:#1b1820}.left-col .error-field{border:3px solid #ffb3b3}.error{background:#ffb3b3;display:inline-block;padding:.3em .5em;font-size:.85em;font-weight:700;margin-top:-.1em}#name{text-transform:uppercase}#form,#attendence{background-color:#fff;padding:2em;border-radius:5px;margin:1em 0}#attendence{display:flex;flex-wrap:wrap;font-weight:700;justify-content:space-around;align-items:center}#waiting,#served,#last-one{flex-direction:column;justify-content:center;align-items:center;margin-bottom:1em;font-size:.9em}#last-one,.last-one-description{width:100%;text-align:center}#pop{width:100%}#attendence p{margin:.325em 0}.counting-waiting p,.counting-served p,.last-one-description p{color:#fff;background-color:var(--color-details);padding:1em 2em;border-radius:12px;text-align:center;display:inline-block}.counting-waiting,.counting-served,.last-one-description{text-align:center;display:block}@media (min-width: 600px){.cta{margin:0;height:unset;text-align:center;padding:.5em}.items{display:flex;justify-content:space-between;align-items:center}.items:nth-child(1){align-items:flex-start}.item-1{width:67.5%}.item-2{width:27.5%}.item-3{width:67.5%}.item-4{width:27.5%}}#queue{padding:1em;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;flex-direction:column}.patient{background:var(--color-black);color:#fff;padding:1em;margin-bottom:1em;font-size:.725rem;width:100%;border-left:5px solid var(--color-details);border-radius:0 10px 10px 0}.patient-age{font-size:1rem;font-weight:700}.patient-haschild{background-color:#fff;color:var(--color-black);margin:0 auto;width:70%;padding:.25em .5em;border-radius:5px;text-align:center;display:block}.patient-time-arrived{text-align:right;font-size:.625rem;letter-spacing:2px}.c-priority{background:var(--color-priority)}a{box-shadow:0 5px 10px #0000001a;cursor:pointer;background-color:var(--color-priority)}a:hover,.cta:hover{box-shadow:0 3.1px 2.7px #00000021,0 7.8px 6.9px #00000017,0 15.9px 14.2px #00000012,0 32.9px 29.2px #0000000f,0 90px 80px #0000000a;background-color:var(--color-black)}a:active,.cta:active,a:focus,.cta:focus{box-shadow:0 5px 10px #0000001a;cursor:pointer;background-color:var(--color-details)}#patient-6{order:-1}#patient-7{order:-2}@media (min-width: 600px){#queue{padding:1em;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;flex-direction:row}.patient{width:44.5%;margin-left:1em}}@media (min-width: 700px){.patient{width:31%}}@media (min-width: 850px){.patient{width:23.1%}#attendence{flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center}#waiting,#served,#last-one{margin-right:1em}#last-one{width:65%}}