:root{
    --bordercolor: rgb(139, 139, 139);
    --focus_bordercolor: rgb(144, 144, 252);
    --buttoncolor: rgb(6, 146, 41);
    --labelcolor: rgb(119, 241, 201);
    --page_BGC: rgb(50, 50, 60);
    --header_BGC: rgb(91, 199, 133);
    --select_BGC: rgb(27, 25, 56);
    --font_color_main: rgb(192, 255, 239);
    --link_hover_color: rgb(114, 21, 45);
}


/*Overrides*/

textarea, input{
    background-color: azure;
    border: 2px solid var(--bordercolor);
}

textarea:focus, input:focus[type="text"]{
    outline: 1px solid var(--focus_bordercolor);
}

textarea{
    width: 100%;
    height: 100px;
    resize: vertical;
}

label{
    font-size: 20px;
    color: var(--labelcolor);
}

input[type="number"]{
    width: fit-content;
    font-size: 25px;
}
input[type="radio"]{
    appearance: radio;
}
input[type="checkbox"]{
    width: 25px;
    height: 25px;
    cursor: pointer;
}
input[type="checkbox"]:checked{
    background-color: rgb(3, 211, 72);
}

select{
    background-color: azure;                 /* match inputs */
    color: #000;                              /* readable on azure */
    border: 2px solid var(--bordercolor);     /* match inputs */
    border-radius: 4px;                       /* subtler radius */
    text-align: left;                         /* inputs are left-aligned */
    cursor: pointer;
}

button{
    width: fit-content;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    background-color: var(--buttoncolor);
    border: 1px solid var(--bordercolor);
    cursor: pointer;
}
button:hover{
    outline: 2px solid var(--focus_bordercolor);
}

input[type=text], textarea, select, button{
    padding: 10px;
}


/*Classes*/

.button_mini{
    margin-left: 10px;
    width: 50px;
    font-size: 10px;
    font-weight: 200;
}

.form-error{
    color: red;
}

.form-success{
    width: 200px;
    height: 45px;
    background-color: rgb(3, 53, 53);
    font-size: 30px;
    color: green;
}

.form-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* left align */
  gap: 8px;                  /* tidy spacing between rows */
}

.form-main label {
  display: block;
  margin: 4px 0 2px;
}

.form-main br { display:none; } /* you don’t need <br> when using gap */

.form-main input[type="text"],
.form-main input[type="password"],
.form-main select {
  width: 280px;                 /* or 100% if you want it fluid */
  box-sizing: border-box;
  padding: 6px 8px;
  border: 2px solid var(--bordercolor);
  border-radius: 4px;
  background: #2f333b;          /* darker background */
  color: #e8f0f7;               /* readable on dark */
}

.form-main input:focus,
.form-main select:focus {
  outline: 1px solid var(--focus_bordercolor);
}

/* Keep username, password, and dropdown the same width */
.form-main input[type="text"],
.form-main input[type="password"],
.form-main select{
    width: 280px;          /* pick the size you like */
    box-sizing: border-box;
}



/* --- Force the login form to stack vertically --- */
.form-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                 /* consistent spacing between rows */
}

.form-main .div-form {
  display: flex;
  flex-direction: column;   /* <-- this is the key change */
  align-items: flex-start;
  gap: 8px;
}

/* Labels look cleaner stacked */
.form-main label {
  display: block;
  margin: 4px 0 2px;
}

/* Inputs + dropdown identical look (dark scheme) */
.form-main input[type="text"],
.form-main input[type="password"],
.form-main select {
  width: 280px;            /* or 100% if you want fluid width */
  box-sizing: border-box;
  padding: 6px 8px;
  border: 2px solid var(--bordercolor);
  border-radius: 4px;
  background: #2f333b;     /* dark background to match the rest */
  color: #e8f0f7;
}

.form-main input:focus,
.form-main select:focus {
  outline: 1px solid var(--focus_bordercolor);
}

/* We don't need <br> when using gap */
.form-main br { display: none; }