@charset "utf-8";

:root {--iss-primary:#003741;--iss-primary-hover:#0b5563;--iss-accent:#EF8446;--iss-accent-hover:#e0702f;--iss-bg:#f3f6f7;--iss-surface:#fff;--iss-border:#d5dfe1;--iss-row:#f5f9fa;--iss-text:#1f2d30;--iss-muted:#6b7b7f;--iss-radius:10px;--iss-radius-small:6px;--iss-shadow:0 2px 10px rgba(0,55,65,0.08);--iss-shadow-strong:0 8px 30px rgba(0,0,0,0.25);}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,main {display:block;}
html, body {font-size:15px;line-height:24px;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0;color:var(--iss-text);background:var(--iss-bg);height:100%;}
*:after, *:before {font-family:"Font Awesome 6 Pro";font-weight:300;position:relative;color:var(--iss-text);}
*:before {margin:0 5px 0 0;}
*:focus {outline:none !important;}
*:focus-visible {outline:2px solid var(--iss-accent) !important;outline-offset:2px;}
* {box-sizing:border-box;}
img {width:100%;height:auto;display:block;border:0;}
main#content {width:100%;max-width:1400px;height:100vh;height:100dvh;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:12px;position:relative;}

div#newpatient, div#isscontainer, div#aiscontainer {flex:0 0 auto;width:100%;margin:0 auto;font-size:15px;font-weight:600;letter-spacing:0.02em;line-height:48px;text-align:center;color:#fff;background:var(--iss-primary);border-radius:var(--iss-radius);box-shadow:var(--iss-shadow);cursor:pointer;transition:background 0.2s ease,box-shadow 0.2s ease;}
div#newpatient:hover {background:var(--iss-primary-hover);box-shadow:0 4px 14px rgba(0,55,65,0.18);}
div#aiscontainer {overflow:hidden;cursor:auto;display:table;}
div#aiscontainer span {width:30%;display:table-cell;vertical-align:middle;text-align:center;}
div#aiscontainer span.ais-code {width:calc(40% - 2px);border:1px solid rgba(255,255,255,0.35);border-width:0 1px;font-size:22px;font-weight:700;}
div#aiscontainer span.ais-text {font-size:13px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.85;}
div#aiscontainer span img {width:30px;margin:0 auto;}
div#isscontainer {position:relative;flex:0 0 auto;width:100%;display:flex;align-items:stretch;overflow:hidden;cursor:auto;text-align:left;}
div#isscontainer span.iss-text {display:flex;align-items:center;padding:0 10px 0 20px;font-size:15px;font-weight:600;letter-spacing:0.08em;opacity:0.85;}
div#isscontainer span.iss-code {display:flex;align-items:center;font-size:24px;font-weight:700;}
div#isscontainer span.list-button {display:flex;align-items:center;margin:0 0 0 auto;padding:0 20px;border-left:1px solid rgba(255,255,255,0.35);font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s ease;}
div#isscontainer span.list-button:hover {background:var(--iss-primary-hover);}
div#isscontainer span.list-button:before {content:'\f03a';color:#fff;font-size:16px;font-weight:300;margin:0 8px 0 0;}

div.content {--body-height:calc(100cqh - 48px);flex:1 1 auto;container-type:size;padding:24px 0;margin:0;position:relative;background:var(--iss-surface);border:1px solid var(--iss-border);border-radius:var(--iss-radius);box-shadow:var(--iss-shadow);min-height:390px;}
div.body-image {margin:0 auto;}
div.body-image svg {width:auto;height:var(--body-height);max-width:none;max-height:none;margin:0 auto;display:block;}
path {cursor:pointer;transition:opacity 0.2s ease;}
path:hover {opacity:0.8;}

.box {text-align:center;background:var(--iss-surface);border:2px solid var(--iss-primary);border-radius:var(--iss-radius-small);box-shadow:var(--iss-shadow);display:inline-block;padding:6px 10px;color:var(--iss-primary);font-weight:700;font-size:12px;line-height:16px;position:absolute;top:40px;left:12px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease;}
.box:hover {background:var(--iss-primary);color:#fff;}
.box.external {top:auto;bottom:50px;}
.box.asphyxia {top:auto;bottom:40px;left:initial;right:12px;display:none;}
.box.plus {width:40px;top:100px;height:40px;}
.box.plus img {position:relative;top:7px;}
.box.plus:before {content:'\2b';color:var(--iss-primary);font-size:30px;margin:0 auto;position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;transition:color 0.2s ease;}
.box.plus:hover:before {color:#fff;}

span.use-button {cursor:pointer;transition:background 0.2s ease;}
span.use-button:not(.use-disabled):hover {background:var(--iss-accent);}
span.edit-use {cursor:pointer;background:#c0392b;}
span.use-disabled {color:rgba(255,255,255,0.4);cursor:default;}

#selectbox {width:100%;background:var(--iss-surface);border-radius:var(--iss-radius);padding:16px 20px 20px;border:1px solid var(--iss-border);box-shadow:var(--iss-shadow);margin:0 auto 20px;}
label {display:block;color:var(--iss-primary);font-weight:700;margin:0 0 6px;}
select, ul.selectbox {padding:0;background:var(--iss-surface);border:1px solid var(--iss-border);border-radius:var(--iss-radius-small);width:100%;margin:0 0 12px;list-style:none;position:relative;}
ul.selectbox li {padding:10px 40px 10px 12px;cursor:pointer;transition:background 0.15s ease;}
ul.selectbox li:nth-child(even) {background:var(--iss-row);}
ul.selectbox li:hover {background:#e3eef0;}
ul.selectbox li:not(.select) {display:none;}
ul.selectbox li.active {font-weight:600;color:var(--iss-primary);}
ul.selectbox li.active:after {z-index:-10;cursor:pointer;position:absolute;right:-1px;top:-1px;background:var(--iss-primary);height:46px;width:36px;text-align:center;line-height:46px;border-radius:0 var(--iss-radius-small) var(--iss-radius-small) 0;color:#fff;content:'\f078';font-weight:300;}
.noshow {display:none;}

#storage-container, #select-container {position:fixed;z-index:100;background:var(--iss-bg);top:0;height:100%;padding:0 16px 16px;display:none;width:100%;max-width:1400px;left:50%;transform:translateX(-50%);box-shadow:var(--iss-shadow-strong);}
#select-container {padding:20px 16px 16px;z-index:200;}
div.select-inner {overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;}
#select-container div#aiscontainer {position:sticky;z-index:2;bottom:64px;box-shadow:0 -4px 16px rgba(0,55,65,0.15);}
div.select-inner div.back {position:sticky;z-index:2;bottom:0;margin:8px 0 0;}
span.delete-all {display:block;float:right;padding:0 0 0 25px;font-weight:400;color:var(--iss-muted);cursor:pointer;transition:color 0.2s ease;}
span.delete-all:hover {color:#c0392b;}

h3 {font-size:17px;border-bottom:1px solid var(--iss-border);padding:14px 0;margin:0 0 12px;color:var(--iss-primary);}
h4 {font-size:15px;border-bottom:2px solid var(--iss-primary);padding:16px 0 10px;margin:0 0 12px;color:var(--iss-primary);}

div.ais-items {background:var(--iss-surface);border:1px solid var(--iss-border);border-radius:var(--iss-radius);padding:12px 16px 2px;margin:0 0 16px;}
div.ais-item {position:relative;padding:0 130px 10px 0;border-bottom:1px solid var(--iss-border);margin:0 0 10px;}
div.ais-item:last-child {border-bottom:0;}
div.action {position:absolute;top:7px;right:0;}
div.action span {width:24px;height:24px;display:inline-block;margin:0 0 0 10px;cursor:pointer;vertical-align:top;transition:opacity 0.2s ease;}
div.action span:hover {opacity:0.65;}
div.action span.delete:before, span.delete-all:before {content:'\f2ed';color:var(--iss-primary);font-size:20px;font-weight:300;margin:0;}
span.delete-all:before {margin:0 5px 0 0;}
div.action span.copy:before {content:'\f0c5';color:var(--iss-primary);font-size:20px;font-weight:300;margin:0;}
div.action span.edit:before {content:'\f304';color:var(--iss-primary);font-size:20px;font-weight:300;margin:0;}
div.action span.code {background:var(--iss-primary);border-radius:100%;color:#fff;font-weight:700;text-align:center;line-height:24px;cursor:default;}
div.action span.code:hover {opacity:1;}

div.iss-breakdown {display:none;background:var(--iss-surface);border:1px solid var(--iss-border);border-radius:var(--iss-radius);padding:12px 16px;margin:0 0 16px;}
div.iss-breakdown-title {font-weight:700;color:var(--iss-primary);margin:0 0 6px;}
div.iss-breakdown table {width:100%;border-collapse:collapse;}
div.iss-breakdown td {padding:5px 0;border-bottom:1px solid var(--iss-border);}
div.iss-breakdown td.ais {width:90px;color:var(--iss-muted);}
div.iss-breakdown td.square {width:100px;text-align:right;font-variant-numeric:tabular-nums;}
div.iss-breakdown tr.not-counted td {color:#a5b1b4;}
div.iss-breakdown tr.unknown td {color:#c0392b;font-weight:600;}
div.iss-breakdown tr.total td {border-bottom:0;padding:10px 0 0;font-size:17px;font-weight:700;color:var(--iss-primary);}
div.iss-breakdown p.iss-note {margin:10px 0 0;padding:8px 12px;background:#fdf1e9;border-left:3px solid var(--iss-accent);border-radius:var(--iss-radius-small);font-size:13px;line-height:20px;}

div.nieuw-pop {background:rgba(0,30,36,0.6);padding:20px;position:fixed;top:0;left:0;width:100%;height:100%;z-index:300;display:none;}
div.nieuw-pop div.inner {text-align:center;background:var(--iss-surface);border-radius:var(--iss-radius);box-shadow:var(--iss-shadow-strong);padding:0 0 24px;max-width:480px;margin:15vh auto 0;overflow:hidden;}
div.nieuw-pop h3 {background:var(--iss-primary);color:#fff;border:0;margin:0;padding:16px 20px;}
div.nieuw-pop p {padding:8px 24px;color:var(--iss-text);}
div.nieuw-pop span {display:inline-block;margin:0 8px;cursor:pointer;border:2px solid var(--iss-primary);border-radius:var(--iss-radius-small);padding:8px 10px;width:110px;font-weight:700;color:var(--iss-primary);transition:background 0.2s ease,color 0.2s ease;}
div.nieuw-pop span.yes {background:var(--iss-primary);color:#fff;}
div.nieuw-pop span.yes:hover {background:var(--iss-primary-hover);border-color:var(--iss-primary-hover);}
div.nieuw-pop span.no:hover {background:var(--iss-row);}

div.body-image span.code {float:left;margin:0 5px 0 0;display:block;width:20px;height:20px;background:var(--iss-primary);border-radius:100%;color:#fff;font-weight:700;font-size:12px;text-align:center;line-height:20px;box-shadow:0 1px 3px rgba(0,0,0,0.2);cursor:default;}

div.back {background:var(--iss-accent);color:#fff;padding:16px;border-radius:var(--iss-radius);box-shadow:var(--iss-shadow);cursor:pointer;text-align:center;transition:background 0.2s ease;}
div.back:hover {background:var(--iss-accent-hover);}
div.back:before {content:'\f053';color:#fff;font-size:22px;font-weight:900;margin:0;}

path.thorax {fill:#F5B491;}
path.neck {fill:#c7bfb6;}
path.upper {fill:#003741;}
path.lower {fill:#DED5CB;}
path.spine {fill:#efeae5;}
path.head {fill:#eb44a2;}
path.face {fill:#F390C7;}
path.abdomen {fill:#EF8446;}

.aisbox {overflow:hidden;padding:5px;position:absolute;left:calc(50% + var(--body-height) * 0.118);top:24px;}
.aisbox.head {top:24px;}
.aisbox.face {top:calc(24px + var(--body-height) * 0.0707);}
.aisbox.neck {top:calc(24px + var(--body-height) * 0.1414);}
.aisbox.thorax {top:calc(24px + var(--body-height) * 0.2062);left:calc(50% + var(--body-height) * 0.2062);}
.aisbox.spine {top:calc(24px + var(--body-height) * 0.2769);left:calc(50% + var(--body-height) * 0.2062);}
.aisbox.upper {top:calc(24px + var(--body-height) * 0.3476);left:calc(50% + var(--body-height) * 0.2062);}
.aisbox.abdomen {top:calc(24px + var(--body-height) * 0.4183);left:calc(50% + var(--body-height) * 0.2062);}
.aisbox.lower {top:calc(24px + var(--body-height) * 0.648);}
.aisbox.external {left:12px;bottom:20px;top:auto;}

.aisbox.head span.code {background:#eb44a2;}
.aisbox.face span.code {background:#F390C7;}
.aisbox.neck span.code {background:#c7bfb6;color:#000;}
.aisbox.thorax span.code {background:#F5B491;color:#000;}
.aisbox.abdomen span.code {background:#EF8446;}
.aisbox.spine span.code {background:#efeae5;color:#000;}
.aisbox.upper span.code {background:#003741;}
.aisbox.lower span.code {background:#DED5CB;color:#000;}

@-webkit-keyframes fa-spin {0% {-webkit-transform:rotate(0deg);transform:rotate(0deg);} 100% {-webkit-transform:rotate(360deg);transform:rotate(360deg);}}

@font-face {font-family:'Font Awesome 6 Brands';font-display:block;font-weight:400;src:url("../fonts/fa-brands-400.woff2") format("woff2"), url("../fonts/fa-brands-400.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Free';font-display:block;font-weight:900;src:url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Pro';font-style:normal;font-weight:300;font-display:block;src:url("../fonts/fa-light-300.woff2") format("woff2"), url("../fonts/fa-light-300.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Pro';font-style:normal;font-weight:400;font-display:block;src:url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Pro';font-style:normal;font-weight:900;font-display:block;src:url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Pro';font-style:normal;font-weight:100;font-display:block;src:url("../fonts/fa-thin-100.woff2") format("woff2"), url("../fonts/fa-thin-100.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Duotone';font-style:normal;font-weight:900;font-display:block;src:url("../fonts/fa-duotone-900.woff2") format("woff2"), url("../fonts/fa-duotone-900.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Sharp';font-style:normal;font-weight:400;font-display:block;src:url("../fonts/fa-sharp-regular-400.woff2") format("woff2"), url("../fonts/fa-sharp-regular-400.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Sharp';font-style:normal;font-weight:300;font-display:block;src:url("../fonts/fa-sharp-light-300.woff2") format("woff2"), url("../fonts/fa-sharp-light-300.ttf") format("truetype");}
@font-face {font-family:'Font Awesome 6 Sharp';font-style:normal;font-weight:900;font-display:block;src:url("../fonts/fa-sharp-solid-900.woff2") format("woff2"), url("../fonts/fa-sharp-solid-900.ttf") format("truetype");}