:root{font-family:Inter,sans-serif;--button-width: 100%;--button-size: 30px;--border-radius: 10px;--section-padding: 1rem;--element-padding: .5rem;--font-size: 20px;--font-size-header: 30px;--primary: #F8F9FA;--secondary: #FF8C42;--tertiary: #CC5803;--accent: #2E2E2E;--text-primary: #2E2E2E;--text-secondary: #5E5E5E;--success: #4CAF50;--danger: #A41623;--neutral: #E0E0E0;--border-color: #D1D5DB;--highlight: #FFEDD5;--dm-primary: #121212;--dm-secondary: #FF8C42;--dm-tertiary: #CC5803;--dm-accent: #E5E7EB;--dm-text-primary: #E5E7EB;--dm-text-secondary: #9CA3AF;--dm-success: #1B9AAA;--dm-danger: #A41623;--dm-neutral: #1E1E1E;--dm-border-color: #374151;--dm-highlight: #4B5563;--dm-spark-accent: #FF9E22}.dark-mode{color-scheme:dark;--primary: var(--dm-primary);--secondary: var(--dm-secondary);--tertiary: var(--dm-tertiary);--accent: var(--dm-accent);--text-primary: var(--dm-text-primary);--text-secondary: var(--dm-text-secondary);--success: var(--dm-success);--danger: var(--dm-danger);--neutral: var(--dm-neutral);--border-color: var(--dm-border-color);--highlight: var(--dm-highlight)}body{color:var(--text-primary);transition:background-color .3s ease,color .3s ease}main{display:flex;flex-direction:row;gap:var(--section-padding);padding:var(--section-padding);transition:background-color .3s ease}@media (max-width: 900px){main{flex-direction:column}}.header{border-radius:var(--border-radius);padding:var(--element-padding);display:flex;align-items:center;justify-content:space-around;background-color:var(--primary);border-bottom:2px solid var(--secondary);transition:all .3s ease;box-shadow:0 4px 4px #0000004d}.header__details{display:flex;flex-direction:row;gap:50px;justify-content:center;align-items:center}.header__buttons{display:flex;flex-direction:row;gap:30px}@media (max-width: 800px){.header__details{flex-direction:column;gap:10px}.header__device-name *{margin:0}.header__details>*{margin:0}.header{flex-direction:column;gap:10px}}.header__device-name{display:flex;flex-direction:row;align-items:center;justify-content:space-around;gap:1rem}.header__device-name>p{font-size:20px;font-weight:700;color:var(--secondary)}.header>div>h1{color:var(--tertiary)}.general-button{width:fit-content;font-weight:700;font-size:var(--button-size);border-radius:var(--border-radius);border:none;outline:none;background-color:var(--tertiary);cursor:pointer}.general-button__clicked,.general-button:hover{background-color:var(--neutral)}@media (max-width: 700px){.general-button{font-size:22px}}.left-column,.right-column{display:flex;flex-direction:column;gap:1rem}.left-column,.right-column{width:50%}@media (max-width: 900px){.left-column,.right-column{width:100%}}section{color:var(--text-primary);border-bottom:2px solid var(--secondary);background-color:var(--primary);border-radius:var(--border-radius);padding:var(--element-padding);box-sizing:border-box;transition:all .3s ease;box-shadow:0 4px 4px #0000004d}.device-data{display:flex;flex-direction:column}.device-data>ul{font-size:var(--font-size);display:flex;flex-direction:column;align-items:flex-start;padding-left:0}.device-data>ul>li{font-size:var(--font-size);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;width:calc(100% - var(--element-padding));padding:var(--element-padding)}.data-item-label{font-size:var(--font-size);font-weight:700;border-right:1px solid var(--border-color);padding-right:var(--element-padding);min-width:120px;max-width:120px;color:var(--secondary)}.data-item-value{font-size:var(--font-size);padding-right:var(--element-padding);color:var(--text-primary)}.cpu-cores{display:flex;flex-direction:column;padding:var(--element-padding)}.cpu-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:var(--element-padding)}.cpu-header>*{font-size:var(--font-size-header)}.cpu-cores>ul{font-size:var(--font-size);font-weight:700;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;min-width:300px;max-width:900px;padding:0}.cpu-cores>ul>li{font-size:var(--font-size);background-color:var(--neutral);list-style:none;display:flex;justify-content:space-between;flex-direction:row;border-radius:10px;padding:0 8px;gap:1rem;border-bottom:2px solid var(--secondary)}.memory-info{width:100%}.memory-info>div{padding:var(--element-padding);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border-color);border-radius:var(--border-radius);margin:var(--element-padding);background-color:var(--neutral)}.memory-info>div>h2{font-size:var(--font-size-header)}.memory-info>div>h3,.memory-info>div>h2{font-size:var(--font-size)}.dark-mode{color-scheme:dark}.dark-mode section,.dark-mode .cpu-cores>ul>li,.dark-mode .memory-info>div{box-shadow:0 2px 8px #00000080}.dark-mode .cpu-header{display:flex;flex-direction:row;justify-content:space-between}.dark-mode .cpu-cores>ul>li{list-style:none;display:flex;justify-content:space-between;flex-direction:row;border-radius:10px;padding:0 8px;gap:1rem;border-bottom:2px solid var(--dm-secondary)}.dark-mode .header>button:hover{background-color:var(--dm-highlight)}*{transition:background-color .3s ease,border-color .3s ease,color .3s ease}.settings__container{padding:var(--element-padding);width:100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.settings-header{width:60%;padding:var(--element-padding);display:flex;align-items:center;justify-content:space-between;border-radius:var(--border-radius);background-color:var(--primary)}.settings{width:calc(100% - var(--section-padding));padding:var(--element-padding);display:flex;align-items:center;justify-content:space-between;flex-direction:column;border-radius:var(--border-radius);background-color:var(--primary);box-shadow:0 4px 4px #0000004d}.settings-entry{width:80%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--element-padding);border-radius:var(--border-radius)}.settings-entry__button-container{display:flex;flex-direction:row}.settings-entry__label{border-right:2px solid var(--border-color);margin-right:30px;max-width:100px;min-width:130px;height:2rem}@media (max-width: 550px){.settings-entry{flex-direction:column;align-items:flex-start;width:fit-content;border-radius:0;padding-bottom:10px}.settings-entry__label{border-right:none;margin-right:0;height:2rem}}.device-management__wrapper{display:flex;flex-direction:column;align-items:center;height:85vh;width:100%}.device-management__container{display:flex;flex-direction:column;align-items:center;height:100vh;width:100%;border-radius:var(--border-radius);box-shadow:0 4px 4px #0000004d;background-color:var(--primary);padding:var(--element-padding)}.device-management__container>.device-management__header{display:flex;align-items:flex-start;width:80%;border-bottom:1px solid var(--border-color)}.device-management__container>.device-management__header>h2,.device-management__container>.device-management__header>h3{margin:10px 0 5px}.device-management__form{display:flex;flex-direction:column;align-items:center;width:100%;padding:10px 20px 0}.device-management__form-container{display:flex;flex-direction:column;padding:10px 20px 0;justify-content:center;width:calc(70% - 40px)}.device-management__form-container>button{align-self:flex-end}.device-management__form-element{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%}.device-management__form-element>input{width:calc(100% - 20px);border:1px solid var(--border-color);outline:none;border-radius:var(--border-radius);padding:var(--element-padding);background-color:var(--neutral)}.device-management__form-element>input:focus{border:2px solid var(--secondary)}.form__input-note{font-size:8px;color:var(--tertiary);font-style:italic;text-align:center}.device-container{display:flex;flex-direction:column;width:calc(70% - 40px);padding:20px;gap:10px}.device-container__seperator{height:1px;width:90%;border-bottom:1px solid var(--border-color);align-self:center}.device-container__ipAddr{background-color:var(--neutral);padding:var(--element-padding);font-size:20px;border-radius:var(--border-radius);margin:0}.device-container__name{margin:0}@media (max-width: 550px){.device-management__form-element{display:flex;flex-direction:column;align-items:start;gap:10px}.device-management__form-container,.device-container{width:calc(100% - 40px)}}.themes-container{height:auto;border:2px solid var(--neutral);border-radius:5px;width:calc(100% - 60px);padding:15px;margin:15px;display:grid;grid-template-columns:repeat(10,1fr);justify-content:space-between;align-items:center;flex-direction:row;gap:10px}.theme-container{border:1px solid var(--neutral);height:30px;width:30px;display:flex;justify-content:center;align-items:center;padding:1px;border-radius:5px;cursor:pointer}.theme_wrapper{max-width:50px;display:flex;justify-content:space-between;align-items:center;flex-direction:column}.theme_wrapper_clicked{border:2px solid var(--secondary)}.theme{height:25px;width:25px;border-radius:50px}.theme-form{display:flex;flex-direction:column;align-items:center;justify-content:center}.theme-form__buttons{display:flex;align-items:center;justify-content:space-around;flex-direction:row}.theme-form__buttons>button{font-weight:700;font-size:var(--button-size);border-radius:5px;cursor:pointer;margin:10px;border:none;color:var(--accent);outline:none}.theme_save{background-color:var(--success)}.theme_cancel{background-color:var(--danger)}.theme-container__wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--border-radius);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-top:30px}@media (max-width: 1200px){.themes-container{grid-template-columns:repeat(7,1fr)}}@media (max-width: 700px){.theme{height:40px;width:40px;border-radius:50px}.themes-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);justify-items:center;align-items:center}.theme-container{height:50px;width:50px}}.notification{z-index:150;position:fixed;top:50px;left:15px;opacity:0;width:0;border-radius:5px;text-align:center;color:#f0f8ff;transition:width .3s;background-color:var(--tertiary);border-right:3px solid var(--secondary)}.notification>.title{margin:0;font-size:16px;font-weight:700}.notification>p{margin:0}.notification__active{max-height:70px;opacity:1;display:block;height:1000px;min-height:50px;width:300px;padding:5px}
