.overview-box.vlan{display:flex;flex-direction:column;overflow:hidden}.ips-list .slideRightOut,.ips-list .slideRightIn,.ips-list .slideLeftOut,.ips-list .slideLeftIn{top:auto;left:0;right:0;width:100%;height:fit-content}.slideLeftIn{animation:slideFromLeft var(--time-ease) ease forwards;position:absolute;top:0;left:0;width:100%;height:100%}.slideLeftOut{animation:slideToLeft var(--time-ease) ease forwards;position:absolute;top:0;left:0;width:100%;height:100%}.slideRightIn{animation:slideFromRight var(--time-ease) ease forwards;position:absolute;top:0;left:0;width:100%;height:100%}.slideRightOut{animation:slideToRight var(--time-ease) ease forwards;position:absolute;top:0;left:0;width:100%;height:100%}@keyframes slideFromLeft{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideToLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}@keyframes slideFromRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideToRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}.toggle-view{transition:opacity var(--time-ease) ease,margin-right var(--time-ease) ease;opacity:0;position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:var(--border-radius);border:1px solid var(--color-azzure);display:flex;justify-content:space-between;padding:2px;user-select:none;background:var(--color-white);width:fit-content;user-select:none;pointer-events:none;margin-right:0px}.toggle-view.show{opacity:1;pointer-events:auto;margin-right:10px}.toggle-view input[type="radio"]{display:none}.toggle-view input[type="radio"]:checked + span{color:var(--color-white);font-weight:bold}.toggle-view label span{color:var(--color-azzure);font-weight:bold;pointer-events:none;transition:color var(--time-ease) ease}.toggle-view label{align-items:center;cursor:pointer;display:flex;font-size:0.9rem;justify-content:center;padding:4px 12px;position:relative;z-index:1}.toggle-view .highlight{background:var(--color-azzure);border-radius:var(--border-radius);height:calc(100% - 4px);left:0;margin-top:2px;position:absolute;top:0;transition:transform var(--time-ease) ease,width var(--time-ease) ease;width:0;z-index:0}.ips-list{width:100%;height:100%;overflow:hidden}.vlans-row .cards-list,.tasks-row .cards-list{max-height:calc(100% - 40px)!important}.ips-list .cards-list{max-height:calc(100% - 55px)!important}.cards-list .ip-box{box-shadow:0 2px 4px 0 transparent;border:1px solid color-mix(in srgb,var(--color-azzure) 50%,transparent);padding:10px;border-radius:calc(var(--border-radius) / 2);margin:5px;transition:box-shadow var(--time-ease) ease,border var(--time-ease) ease,padding var(--time-ease) ease,margin var(--time-ease) ease;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:15px 30px}.cards-list .ip-box:hover{box-shadow:0 4px 8px 0 color-mix(in srgb,var(--color-grey) 90%,transparent);border:1px solid var(--color-white);padding:14px 29px;margin:6px 5px}.card-ip{display:flex;flex-direction:column;gap:20px;align-self:stretch;justify-content:space-between}.card-ip .first-line{display:flex;flex-direction:column}.card-ip .first-line .details.columns>div{display:flex;justify-content:space-between;font-size:0.9rem;width:100%;gap:5px}.card-ip .first-line>div{display:flex;justify-content:space-between;gap:5px}.card-ip .first-line>.label{font-size:1.25rem;font-weight:bold}.card-ip .first-line .text{font-size:0.9rem}.ip-box .details{display:flex;justify-content:space-between;align-items:center;gap:10px}.ip-box .details.columns{flex-direction:column;align-items:flex-start;gap:0}.ip-box .details.columns>div{display:flex;justify-content:space-between;align-items:center;width:100%;gap:5px}.card-ip .first-line>div .status{display:flex;align-items:center;justify-content:center;gap:5px}.card-ip .first-line>div .status span{font-size:0.9rem;transition:color var(--time-ease) ease}.card-ip .first-line>div .status span{font-size:0.9rem;transition:color var(--time-ease) ease}.ip-row{cursor:pointer;transition:background-color var(--time-ease) ease;user-select:none}.ip-row .online,.status .online{color:var(--color-green)}.ip-row .offline,.status .offline{color:var(--color-grey)}.ip-row .online,.ip-row .offline,.status .online,.status .offline{font-weight:bold}.ip-row td{transition:background-color var(--time-ease) ease}.ip-row.sticky{position:sticky;z-index:2;background-color:var(--color-white);top:var(--sticky-offset,var(--thead-height));bottom:var(--sticky-offset-bottom,0px)}.ip-row.sticky td,.ip-row.sticky:nth-child(even) td{background:color-mix(in srgb,var(--color-azzure) 30%,var(--color-white))!important}.ip-box .details .mini .text{font-size:1rem;transition:background-color var(--time-ease) ease,color var(--time-ease) ease}.ip-box .details .mini{display:flex;flex-direction:column;border:1px solid color-mix(in srgb,var(--color-azzure) 30%,transparent);box-shadow:0 2px 4px 0 transparent;padding:10px 20px;margin:0px;border-radius:calc(var(--border-radius) / 2);font-size:0.8rem;height:100%;text-align:center;font-weight:bold;transition:box-shadow var(--time-ease) ease,border var(--time-ease) ease,padding var(--time-ease) ease,margin var(--time-ease) ease;cursor:pointer}.ip-box .details .mini:hover{box-shadow:0 2px 6px 0 color-mix(in srgb,var(--color-azzure) 30%,transparent);border:1px solid var(--color-white)}.ip-box .details .mini.no{color:var(--color-white)!important;box-shadow:none!important;border:none!important;user-select:none;cursor:default}.ip-box .details .mini.no .label{color:var(--color-white)!important}.ip-box .details .mini.no .text{color:var(--color-white)!important}.ip-box .details .mini.critical:hover{box-shadow:0 2px 6px 0 color-mix(in srgb,var(--color-violet) 90%,transparent)}.ip-box .details .mini.critical .text{color:var(--color-violet)}.ip-box .details .mini.high:hover{box-shadow:0 2px 6px 0 color-mix(in srgb,var(--color-red) 90%,transparent)}.ip-box .details .mini.high .text{color:var(--color-red)}.ip-box .details .mini.medium:hover{box-shadow:0 2px 6px 0 color-mix(in srgb,var(--color-orange) 90%,transparent)}.ip-box .details .mini.medium .text{color:var(--color-orange)}.ip-box .details .mini.low:hover{box-shadow:0 2px 6px 0 color-mix(in srgb,var(--color-green) 90%,transparent)}.ip-box .details .mini.low .text{color:var(--color-green)}.ip-box .details .mini .label{font-size:0.8rem;margin:0}.ip-box .icon.grey,.ip-row .icon.grey{color:var(--color-grey)}.base-button{font-size:1.5rem!important;cursor:pointer;transition:color var(--time-ease) ease;height:28px;width:28px;text-align:center}.base-button .icon{transition:font-family var(--time-ease) ease,color var(--time-ease) ease;position:relative}.base-button:hover{color:var(--color-azzure);font-variation-settings:'FILL' 1}.base-button .icon::after{background:var(--color-lavagna);border-radius:var(--border-radius);box-shadow:0 0 4px 4px color-mix(in srgb,var(--color-azzure) 30%,transparent);color:var(--color-white);content:attr(data-tooltip);font-family:var(--font-family-core);font-size:1rem;margin-right:10px;opacity:0;padding:10px;pointer-events:none;position:absolute;right:100%;top:50%;transform-origin:right center;transform:translateY(-50%) scale(0.85);transition:opacity var(--time-ease) ease,transform var(--time-ease) ease;white-space:nowrap;z-index:3}.base-button .icon:hover::after{opacity:1;transform:translateY(-50%) scale(1)}.base-button .icon.red{color:var(--color-lavagna)}.base-button .icon.red:hover{color:var(--color-red)}.v-section{margin:5px 2px;width:2px;align-self:stretch;height:auto;background:color-mix(in srgb,var(--color-azzure) 30%,transparent);border-radius:var(--border-radius)}.ip-box .mono{font-family:var(--font-family-mono);font-size:0.75rem!important}.ip-box .flex-1.stretch{gap:10px;align-self:stretch}.ip-box .flex-1.stretch>.left{display:flex;gap:20px;justify-content:space-between}.ip-box .flex-1.stretch>.left .ports{display:grid;grid-template-columns:auto 1fr;gap:5px}.ip-box .flex-1.stretch>.left .ports>span:first-child{min-width:81px;font-weight:bold}.ip-box .flex-1.stretch>.main{display:grid;grid-template-columns:1fr 1fr;gap:0px 10px}.ip-box .flex-1.stretch>.main .protocol{display:flex;gap:5px;align-items:center;border-radius:calc(var(--border-radius) / 2);border:1px solid transparent;transition:border-color var(--time-ease) ease}.ip-box .flex-1.stretch>.main .protocol:hover{border-color:color-mix(in srgb,var(--color-azzure) 25%,transparent)}.ip-box .flex-1.stretch>.main .protocol .icon{font-size:1.2rem;padding-left:5px;padding-right:5px}.ip-box .flex-1.stretch .right-protocols{display:flex;justify-content:space-between;gap:10px}.ip-box .flex-1.stretch .right-protocols>div{display:flex;justify-content:center;align-items:center;gap:5px}.table-list{overflow:hidden;height:calc(100% - 70px)!important;width:100%!important}.ip-tables{border-collapse:collapse;width:100%;--thead-height:72px;--row-height:32px}.ip-tables thead{background:var(--color-lavagna);position:sticky;top:0;z-index:2}.ip-tables thead th{padding:10px;font-size:0.8rem;color:var(--color-white);font-weight:bold;white-space:nowrap;box-shadow:inset 0.5px 0 0 0 var(--color-azzure),inset -0.5px 0 0 0 var(--color-azzure),inset 0 -0.5px 0 0 var(--color-lavagna),inset 0 0.5px 0 0 var(--color-lavagna)}.ip-tables thead tr:first-child th:first-child{position:sticky;left:0;z-index:1;background:var(--color-lavagna)}.ip-tables thead tr:first-child th:first-child{border-top-left-radius:calc(var(--border-radius) / 2);box-shadow:inset 0.5px 0 0 0 var(--color-lavagna),inset -0.5px 0 0 0 var(--color-azzure),inset 0 -0.5px 0 0 var(--color-lavagna),inset 0 0.5px 0 0 var(--color-lavagna),calc(var(--border-radius) * -1) calc(var(--border-radius) * -1) 0 var(--border-radius) var(--color-white)}.ip-tables thead tr:first-child th:last-child{border-top-right-radius:calc(var(--border-radius) / 2);box-shadow:inset 0.5px 0 0 0 var(--color-azzure),inset -0.5px 0 0 0 var(--color-lavagna),inset 0 -0.5px 0 0 var(--color-lavagna),inset 0 0.5px 0 0 var(--color-lavagna),var(--border-radius) calc(var(--border-radius) * -1) 0 var(--border-radius) var(--color-white)}.ip-tables thead tr:nth-child(2) th{box-shadow:inset 0.5px 0 0 0 var(--color-azzure),inset -0.5px 0 0 0 var(--color-azzure),inset 0 -0.5px 0 0 var(--color-lavagna),inset 0 0.5px 0 0 var(--color-azzure)}.ip-tables tbody tr td{background:var(--color-white);transition:background-color var(--time-ease) ease}.ip-tables tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-avena) 75%,var(--color-white))!important}.ip-tables tbody tr.endline:nth-child(even) td{background:var(--color-lavagna)!important}.ip-tables tbody td{padding:5px;white-space:nowrap;background-color:var(--color-white);box-shadow:inset 0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent),inset -0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent)}.ip-tables tbody td:first-child{font-weight:bold;position:sticky;left:0;z-index:1;padding-left:10px;box-shadow:inset 2px 0 0 0 var(--color-lavagna),inset -0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent)!important}.ip-tables tbody td:last-child{box-shadow:inset -2px 0 0 0 var(--color-lavagna),inset -0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent)!important}.ip-tables tbody .ip-row.sticky td:first-child{box-shadow:inset 5px 0 0 0 var(--color-azzure),inset -0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent)!important}.ip-tables tbody .ip-row.sticky td:first-child::after{content:'';position:absolute;left:0;top:0;width:2px;height:100%;background:var(--color-lavagna)}.ip-tables tbody .ip-row.sticky td:last-child{box-shadow:inset -2px 0 0 0 var(--color-lavagna),inset -0.5px 0 0 0 color-mix(in srgb,var(--color-azzure) 50%,transparent)}.ip-tables tbody tr:hover td,.ip-tables tbody tr.sticky:hover td{background:color-mix(in srgb,var(--color-azzure) 50%,var(--color-white))!important}.ip-tables tbody .endline td{background:var(--color-lavagna)!important;box-shadow:none;padding:0}.ip-tables tbody .endline td:first-child{border-bottom-left-radius:calc(var(--border-radius) / 2);box-shadow:calc(var(--border-radius) * -1) var(--border-radius) 0 var(--border-radius) var(--color-white)!important;z-index:1}.ip-tables tbody .endline:hover td{background:var(--color-lavagna)!important;box-shadow:none!important}.ip-tables tbody .endline td:last-child{border-bottom-right-radius:calc(var(--border-radius) / 2);box-shadow:var(--border-radius) var(--border-radius) 0 var(--border-radius) var(--color-white)!important;z-index:1}.ip-tables td.critical .text{color:var(--color-violet);font-weight:bold}.ip-tables td.high .text{color:var(--color-red);font-weight:bold}.ip-tables td.medium .text{color:var(--color-orange);font-weight:bold}.ip-tables td.low .text{color:var(--color-green);font-weight:bold}.ip-tables td .grey{color:var(--color-grey);font-weight:bold}.protocol.hover::after{background:var(--color-lavagna);border-radius:var(--border-radius);box-shadow:0 0 4px 4px color-mix(in srgb,var(--color-azzure) 30%,transparent);color:var(--color-white);content:attr(data-tooltip);font-family:var(--font-family-core);font-size:0.75rem;opacity:0;padding:5px 10px;pointer-events:none;position:absolute;left:0;top:75%;transform-origin:top center;transform:translate(0,10px) scale(0.85);transition:opacity var(--time-ease) ease,transform var(--time-ease) ease;white-space:nowrap}.protocol.hover:hover::after{opacity:1;transform:translate(0,10px) scale(1);transition-delay:0.5s}.protocol.hover{position:relative}.protocol.hover:hover{z-index:1}.status-value{font-weight:bold;color:var(--color-azzure)!important}.status-value.green{color:var(--color-green)!important}.status-value.red{color:var(--color-red)!important}.status-value.orange{color:var(--color-orange)!important}