/**
 * Styles for a simple Back-office for Support Team : Simple and effective!
 */

/* Define variables */
:root {
    --c-light-grey-b: #56828C;
    --c-grey-b: #395359;
    --c-white: #F2F2F2;
    --c-grey: #A6A6A6;
    --c-black: #0D0D0D;
    --c-error-color: #dc3545;
    --c-success-color: hwb(101 9% 50%);

    --shadow: rgba(58, 84, 90, 0.2) 0px 2px 8px 0px;
}

/* Reset CSS */
/* Define the default CSS for all HTML elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100vh;
}

body {
    height: 100%;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--c-white);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
}

h1 {
    color: var(--c-white);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

h2 {
    color: var(--c-grey-b);
    text-align: center;
}

#main {
    height: 100%;
    margin: 20px;
    padding: 0 0 20px 0;
    background-color: var(--c-light-grey-b);

    display: flex;
    flex-flow: column nowrap;
    justify-content: start;
    align-items: center;
    box-shadow: var(--shadow);
    border-radius: 6px;
}

.content {
    background-color: var(--c-white);
    padding: 1em 2em 2em 2em;
    box-shadow: var(--shadow);
    border-radius: 6px;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

a {
    margin: 0.42em;
    background-color: var(--c-grey-b);
    color: var(--c-white);
    padding: .84em 1em;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    font-size: 1.2em;
}

a:hover {
    background-color: var(--c-light-grey-b);
    box-shadow: none;
}

a:active {
    background-color: var(--c-black);
    box-shadow: none;
}

div.result {
    margin: 0.42em;
    padding: 1em;
}

div.result-item {
    border: 1px solid var(--c-grey-b);
    border-radius: 6px;
    margin: 0.42em;
    padding: 1em;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

a.result-link {
    padding: .42em .5em;
    margin: 0.42em;
}

.success,
.error {
    text-align: center;
}

.success {
    color: var(--c-success-color);
}

.error {
    color: var(--c-error-color);
}