@import './constants.css';

/* Reset some basic elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--stdfont);
}

form {
    border-radius: var(--stdborderradius);
    /* background-color: var(--navbarcolor); */
    /* padding: 20px; */
    font-size: var(--stdfontsize);
    /* max-width: 400px; */
}

form input[type="submit"], input[type="button"], input[type="reset"] {
    display: inline;
    margin-top: 10px;
    background-color: var(--stdhovercolor);
    color: var(--altcolor);
    width: auto;
}

label {
    margin: 5px;
}

input[type="submit"], input[type="button"], input[type="reset"]:hover {
    cursor: pointer;
}

input, select {
    border-radius: var(--stdborderradius);
    font-size: var(--stdfontsize);
    padding: 5px;
    display: block;
    width: 100%;
    margin: 5px;
    outline: none;
}

input:focus {
    border: 3px solid var(--stdhovercolor);
}

input[type="checkbox"] {
    width: 20px;
    height: 20px;
    display: inline;
}

input[type="checkbox"]:hover {
    cursor: pointer;
}

textarea {
    border-radius: var(--stdborderradius);
    font-size: var(--stdfontsize);
    padding: 5px;
    display: block;
    width: 100%;
    margin: 5px;
    outline: none;
}

textarea:focus {
    border: 3px solid var(--stdhovercolor);
}

p {
    font-size: var(--smallfontsize);
}

.delsymbol {
    width: 25px;
    height: 25px;
}

.delsymbol:hover {
    cursor: pointer;
}

#loadingdiv {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    backdrop-filter: blur(2px);
}

#loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid var(--navbarcolor);
    border-radius: 50%;
    border-top: 16px solid var(--stdhovercolor);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    backdrop-filter: blur(1000px);
}

#showMessage {
    display: none;
    position: fixed;
    right: 50px;
    bottom: 50px;
    padding: 10px;
    max-width: 300px;
    background: var(--navbarcolor);
    color: var(--navbartextcolor);
    border: 1 px solid;
    border-radius: var(--stdborderradius);
}

#showMessage.show-message {
    display: block;
    animation: fadeSlide .2s ease-out;
}

#showMessage.show-message-warn {
    display: block;
    background: red;
    animation: fadeSlide .2s ease-out;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes fadeSlide {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}