:root{--clr-background: hsl(202, 96%, 42%);--clr-foreground: hsl(0, 0%, 100%);--clr-primary: hsl(48, 88%, 52%);--clr-primary-dark: hsl(48, 88%, 32%);--clr-white: #fff;--clr-black: #000;--clr-text-headline: #000;--clr-text: #333;--clr-text-ndm: #333;--clr-tab-menu-back: hsl(0, 0%, 87%);--clr-tab-menu-back-active: hsl(0, 0%, 77%);--clr-input-background: #fff;--clr-message: hsl(120, 80%, 50%);--clr-message-border: hsl(120, 80%, 30%);--clr-error: hsl(0, 80%, 70%);--clr-error-border: hsl(0, 80%, 50%);--clr-app-shadow: hsl(0, 0%, 70%);--clr-admin-ui: hsl(48, 88%, 52%);--clr-admin-ui-dark: hsl(48, 88%, 32%);--clr-blue: hsl(216, 88%, 52%);--clr-blue-dark: hsl(216, 88%, 32%);--clr-red: hsl(0, 88%, 52%);--clr-red-dark: hsl(0, 88%, 32%);--clr-gray: hsl(0, 0%, 52%);--clr-orange: hsl(30, 88%, 52%);--clr-orange-dark: hsl(30, 88%, 32%);--clr-green: hsl(125, 88%, 52%);--clr-green-dark: hsl(125, 88%, 32%);--clr-box-background: hsl(0, 0%, 92%)}html.dark{--clr-background: hsl(202, 96%, 12%);--clr-foreground: hsl(0, 0%, 12%);--clr-white: #000;--clr-black: #fff;--clr-text-headline: #fff;--clr-text: #fff;--clr-tab-menu-back: hsl(0, 0%, 33%);--clr-tab-menu-back-active: hsl(0, 0%, 43%);--clr-input-background: #333;--clr-message: hsl(120, 80%, 30%);--clr-message-border: hsl(120, 80%, 50%);--clr-error: hsl(0, 80%, 30%);--clr-error-border: hsl(0, 80%, 50%);--clr-app-shadow: hsl(0, 0%, 30%);--clr-box-background: hsl(0, 0%, 20%)}html.dark a{color:#5757ff}html.dark a:visited{color:#8731d8}form{display:flex;flex-direction:column;gap:10px;width:100%}form .form-item{display:flex;flex-wrap:wrap;flex-direction:row;align-items:start;width:100%}form .form-item.column{flex-direction:column}@media (max-width: 768px){form .form-item{flex-direction:column}form .form-item p,form .form-item .input_wrapper{width:100%}}form .form-item p{width:25%;padding-top:.3em}form .form-item .input_wrapper{flex-grow:1}form .form-item .input_wrapper input,form .form-item .input_wrapper select,form .form-item .input_wrapper textarea{width:100%}form .form-item .input_wrapper p{display:flex;flex-direction:row;align-items:center;margin-top:5px;padding:0;width:100%}form .form-item .input_wrapper p svg,form .form-item .input_wrapper p img{height:1.1em;margin-right:3px}form .form-item.switch .input_wrapper{position:relative;height:20px;width:40px;border-radius:20px;background:#ccc;padding:3px;flex-grow:0;border:#ccc 3px solid;cursor:pointer;transition:.2s}form .form-item.switch .input_wrapper input{opacity:0;width:0;height:0}form .form-item.switch .input_wrapper .slider{position:absolute;left:0;top:50%;translate:0 -50%;height:100%;aspect-ratio:1;background:#fff;border-radius:50%;border:none;transition:all .2s ease}form .form-item.switch .input_wrapper:has(input:checked){background:var(--clr-primary);border:var(--clr-primary) 3px solid}form .form-item.switch .input_wrapper input:checked+.slider{left:100%;translate:-100% -50%}form input:not([type=checkbox],[type=radio],.no_style),form select,form textarea,form .input_style{background:var(--clr-input-background);color:var(--clr-text);flex-grow:1;line-height:1.3;padding:5px 10px;border:1px solid #ddd;border-radius:8px;--webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);box-shadow:inset 0 1px 1px #00000013;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}form input:not([type=checkbox],[type=radio],.no_style):focus,form input:not([type=checkbox],[type=radio],.no_style):active,form input:not([type=checkbox],[type=radio],.no_style):focus-within,form select:focus,form select:active,form select:focus-within,form textarea:focus,form textarea:active,form textarea:focus-within,form .input_style:focus,form .input_style:active,form .input_style:focus-within{outline:none;border-color:var(--clr-primary)}form input[type=checkbox],form input[type=radio]{width:min-content!important}form textarea{resize:vertical}form .error_msg{width:100%}*{box-sizing:border-box;padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;transition:color .3s ease,background-color .3s ease}p,span,div{color:var(--clr-text)}h1,h2,h3,h4,h5,h6{color:var(--clr-text-headline)}html{background:var(--clr-background)}body{min-height:100vh;background:url(/images/background.jpg) center fixed;background-size:cover}#app{width:100%;display:flex;justify-content:center}#main-app{background:var(--clr-foreground);width:100%;max-width:900px;height:max-content;padding:20px;box-shadow:0 0 15px 2px var(--clr-app-shadow)}#main-app header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;height:60px;margin-bottom:20px}#main-app header a{display:flex;flex-direction:row;align-items:center;gap:20px;height:100%;text-decoration:none;color:var(--clr-text-headline)}#main-app header a img{height:inherit}#main-app header .left_side{display:flex;flex-direction:row;align-items:center;gap:20px}#main-app header .left_side .profile_link{display:flex;flex-direction:row;align-items:center;gap:3px}#main-app header .theme_switcher{cursor:pointer}@media (max-width: 426px){#main-app header h1{font-size:1.2em}}@media (max-width: 321px){#main-app header h1{display:none}}#main-app .disclaimer{margin-bottom:20px}#main-app button,#main-app .button{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;text-decoration:none;color:#000;width:max-content;min-width:100px;background:var(--clr-primary);padding:5px 10px;border-radius:8px;border:none;cursor:pointer;font-size:var(--fz-medium)}#main-app button.red,#main-app .button.red{background:var(--clr-red);color:#fff}#main-app button.blue,#main-app .button.blue{background-color:var(--clr-blue);color:#fff}#main-app button svg,#main-app button img,#main-app .button svg,#main-app .button img{height:1.2em;width:1.2em}#main-app button:hover,#main-app button:focus,#main-app .button:hover,#main-app .button:focus{background-color:var(--clr-primary-dark)}#main-app button:hover.red,#main-app button:focus.red,#main-app .button:hover.red,#main-app .button:focus.red{background:var(--clr-red-dark)}#main-app button:hover.blue,#main-app button:focus.blue,#main-app .button:hover.blue,#main-app .button:focus.blue{background:var(--clr-blue-dark)}#main-app button:disabled,#main-app .button:disabled{background:var(--clr-gray)}#main-app footer{padding-top:20px;text-align:center}@media (max-width: 900px){body{background:var(--clr-foreground)}#main-app{box-shadow:none}}.error_msg{color:red}.error_input{border-color:red!important}.message{border:2px solid var(--clr-message-border);background:var(--clr-message);border-radius:8px;padding:5px 10px;margin-bottom:10px;width:100%;cursor:pointer}.error{border:2px solid var(--clr-error-border);background:var(--clr-error);border-radius:8px;padding:5px 10px;margin-bottom:10px;width:100%;cursor:pointer}.error p{color:var(--clr-black)}.warning{border:2px solid var(--clr-orange-dark);background:var(--clr-orange);border-radius:8px;padding:5px 10px;margin-bottom:10px;width:100%;cursor:pointer}.warning p{color:var(--clr-black)}.error_message{margin-top:30px}p svg{height:.8em;width:.8em}
