@import url('https://fonts.googleapis.com/css2?family=Mukta&display=swap');

/* Global CSS */

:root {
    --eleBack: #222;
    --eleFont: #DDD;
    --eleFontDisab: #555;
    --back: #EEE;
    --font: #333;
    --link: #2765bb;
    --errorBack: rgb(151, 49, 49);
    --errorFont: rgb(255, 226, 226);
    --successBack: rgb(94, 178, 42);
    --successFont: rgb(236, 244, 230);
    --buttonBack: #333;
    --buttonFont: #FFF;
}

* {
    border: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-family: 'Mukta', sans-serif;
    
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    user-select: none;
}

body {
    height: 100vh;
    font-size: 18px;
}

body, h1, div, header, main, form, iframe {
    display: flex;
}

header {
    flex-direction: row;
    justify-content: space-between;
    padding: 0 12px;
    width: 100%;
}

header h1, main h1 {
    font-size: 2em;
}

header h2, main h2 {
    font-size: 1.5em;
}

/*main {*/
    /*margin-top: 60px;*/
    /*width: 100%;*/
/*}*/

a, input, button {
    transition: 0.3s;
    font-size: 18px;
}

a {
    color: var(--link);
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
    filter: brightness(1.5)
}

button, input[type=button], input[type=submit] {
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 12px;
}

table button {
    text-wrap: nowrap;
}

table .actions {
    display: flex;
    flex-direction: row;
    column-gap: 4px;
}

button:hover, input[type=button]:hover, input[type=submit]:hover {
    filter: brightness(1.5)
}

input[type=text], 
input[type=password], 
input[type=number],
textarea {
    border-radius: 4px;
    margin: 4px;
    border: 1px solid transparent;
    padding: 2px;
}

input[type=text]:hover, 
input[type=password]:hover,
input[type=number]:hover,
textarea:hover {
    border: 1px solid var(--eleBack);
}

.menu {
    width: 100%;
}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--eleBack);
}

.menu li {
    float: left;
}

.menu li a {
    display: block;
    color: var(--eleFont);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.menu li a:hover {
    text-decoration: none;
}

.menu li a:hover:not(.active) {
    background-color: var(--eleBack);
}

.menu .active {
    background-color: var(--link);
}

.menu .disabled {
    color: var(--eleFontDisab);
}

.menu li a.disabled:hover {
    filter: none;
    cursor: default;
}

/* Style CSS */

html, .html {
    background: var(--back);
    color: var(--font)
}

header {
    background: var(--eleBack);
    color: var(--eleFont);
}

button, input[type=button], input[type=submit] {
    background: var(--buttonBack);
    color: var(--buttonFont);
}

.error {
    background: var(--errorBack);
    color: var(--errorFont);
    border-radius: 4px;
    padding: 4px 12px;
    width: 100%;
    text-align: center;
}

.success {
    background: var(--successBack);
    color: var(--successFont);
    border-radius: 4px;
    padding: 4px 12px;
    width: 100%;
    text-align: center;
}