*,
*:before {
    box-sizing: border-box;
}

*:after {
    box-sizing: border-box;
}
body{font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";background: #EEEEEE; font-size: 20px; color: #333333; padding: 18px;}
p {margin: 4px 0 4px 0;}
ul {padding-left: 30px;}
li {list-style-type: none;}
h1 {font-size: 3.5rem; margin: 4px 0 4px 0;}
h2 {font-size: 2.5rem; margin: 4px 0 4px 0;}
h3 {font-size: 1.25rem; margin: 4px 0 4px 0;}
hr {margin: 4px 0 4px 0;}
input {margin: 0 0 0 0; padding: 0 0 0 0; border-radius: 3px;}
form {margin: 0 0 0 0; padding: 0 0 0 0;}
footer {background: #EEEEEE;}
a {text-decoration: none}
a:visited {text-decoration: none}
.line {background-color: #333333;}
.time {color: #EEEEEE; margin: 5px; font-size: 120%; font-style: italic;}
.center {text-align: center;}
.button {cursor: pointer; border: none; background-color: #EEEEEE; font-size: 20px; text-decoration: underline; color: #0000FF; display: inline-block; margin: 0.2em 0.05em;}
.border {border-bottom-width: 2px; border-left-width: 2px; border-right-width: 2px; border-top-width: 2px; color: #000000; font-size: 13px; font-weight: 400; padding: 1px;text-transform: none;}
.border_button {border-style: solid; border-width: 1px 1px 1px 1px; border-color: #333333; text-decoration: underline; }
.grecaptcha-badge {visibility: hidden; }
.reCAPTCHA {font-size: 10px;}
.inp{display:flex;}
.red{background-color: #fef2f2;
    border: 1px solid #ef4444;
    color: #450a0a;
    border-radius: 2px;
    margin-top: 4px;
    margin-bottom: 4px}
.green{background-color: #f0fdf4;
    border: 1px solid #22c55e;
    color: #052e16;
    border-radius: 2px;
    margin-top: 4px;
    margin-bottom: 4px}
.orange{background-color: #fff7ed;
    border: 1px solid #f97316;
    color: #431407;
    border-radius: 2px;
    margin-top: 4px;
    margin-bottom: 4px}
.disabled {display: none;}

.form-control {
    flex: 1;
    min-width: 0;
    margin-right: 10px;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #333333;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #333333;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.text-control {font-size: 1rem;line-height: 1.5;color: #333333;background-color: #fff;background-clip: padding-box;border: 1px solid #333333;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.file-control {font-size: 20px;}

.button {
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
    font-size: 20px;
    display: inline-block;
    padding: .375rem .75rem;
    text-decoration: none;
    line-height: 1.5;
    color: #333333;
    background-color: #f3f3f3;
    background-clip: padding-box;
    border: 1px solid #333333;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.button:hover {background-color: #fff;}
.top-button {width: 100px;border: 2px solid #0000FF;background: #EEEEEE;text-align: center;padding: 10px;position: fixed;bottom: 50px;right: 50px;cursor: pointer;color: #333;font-size: 12px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;}
.register-button{display: none}
.verified-mark{width: 36px;height: 36px}
.svg-color{width: 16px; height: 16px}
#new {color: #ef4444}
.tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e0e0e0;
}

.add-del {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.right-form {
    flex: 1;
}

.left-form {
    flex: 1;
    margin-right: 10px;
}

.button-add-del {
    width: 100%;
    text-decoration: none;
    line-height: 1.5;
    color: #333333;
    background-color: #f3f3f3;
    background-clip: padding-box;
    border: 1px solid #333333;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: inline-block;
    cursor: pointer;
    font-size: 20px;
    margin: 4px 2px;
    padding: 10px;
    text-align: center;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
}

.tab-link {
    flex: 1 1 auto; /* This makes sure each tab takes up 50% of the width of the parent. */
    text-decoration: none; /* Removes the default underline */
    color: inherit; /* Makes the link color the same as its container */
    background-color: #EEEEEE;
    border: 1px solid #e0e0e0;
    border-bottom: none; /* To create the tab effect */
    padding: 2px 8px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
}

.tab-link:not(:last-of-type) {
    border-right: none; /* This makes sure there's no double border between the tabs. */
}

@media screen and (max-width: 600px) {
    .line {display: none;}
    body{font-size: 18px; font-family: sans-serif, Tahoma; color: #333333; line-height: 1.2; padding: 8px;}
    ul {padding-left: 10px;}
    h1 {font-size: 30px; margin: 4px 0 4px 0;}
    h2 {font-size: 20px; margin: 4px 0 4px 0;}
    p {margin: 4px 0 4px 0;}
    hr {margin: 4px 0 4px 0;}
    input {margin: 0 0 0 0; padding: 0 0 0 0;}
    form {margin: 0 0 0 0; padding: 0 0 0 0;}
    .top-button {bottom: 0;right: 0;}
    .register-button {display: block; width: 100px;border: 2px solid darkred;background: red;text-align: center;padding: 10px;position: fixed;bottom: 0;left: 0;cursor: pointer;color: white;font-size: 12px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;}
    .verified-mark{width: 24px;height: 24px}
}