* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

ol, ul {
	list-style: none;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--black);
    background-color: var(--white);
}

input, select, button, textarea {
    font-family: inherit;
}

textarea {
    field-sizing: content;
    resize: none;
    max-height: 12rem;
}

input::placeholder {
    color: var(--dark-gray);
}

.content {
    min-height: 100vh;
    width: 100%;
    display: flex;
}

.content.sidebar-container {
    display: grid;
}

.container-wrapper {
    padding: 4rem 2rem;
}

.container {
    max-width: 72rem;
    height: 100%;
    margin: 0 auto;
    flex: 1;
}

.loading-indicator {
    display: inline-block;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (min-width: 768px) {
    .content.sidebar-container {
        grid-template-columns: 20rem 1fr;
    }
}

:root {
    --black: #494949;
    --transparent-black: rgb(73, 73, 73, 0.5);
    
    --white: #ffffff;
    --transparent-white: rgba(255, 255, 255, 0.5);

    --dark-gray: #757575;
    --gray: #e4e4e4;
    --light-gray: #f6f6f6;

    --primary: #006a44;
    --transparent-primary: rgba(0, 106, 68, 0.1);
    --light-primary: #199138;
    --transparent-light-primary: rgba(25, 145, 56, 0.1);
    
    --secondary: #b1c900;

    --info: #494949;
    --success: #199138;
    --error: #cb3535;

    --shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    --left-shadow: rgba(0, 0, 0, 0.1) -4px 0px 6px -1px, rgba(0, 0, 0, 0.06) 2px 0px 4px -1px;
    --right-shadow: rgba(0, 0, 0, 0.1) 4px 0px 6px -1px, rgba(0, 0, 0, 0.06) 2px 0px 4px -1px;
    --blur: blur(0.5rem);
}