html,
body {
    margin: 0;
    padding: 0;

    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.flex {
    display: flex;
    flex-direction: column;

    height: 100%;
}

.header {
    padding: 8px 28px 8px 17%;

    background-color: #65DB6B;
    border-bottom: 1px solid rgb(83, 179, 87);

    color: white;
    font-weight: bold;
    font-size: 1rem;

    user-select: none;
}

.content {
    height: 100%;

    display: flex;
    flex-direction: row;
}

.sidebar {
    width: 20%;

    border-right: 1px solid #969494;
}

.main {
    width: 100%;
}

.bar {
    width: 100%;
    height: 30px;

    border-bottom: 1px solid #969494;
    box-sizing: border-box;
}

input {
    padding: 4px 8px;
  
    width: 100%;
  
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  
    border-radius: 2px;
    border: solid 1px #dadada;
}

button {
    padding: 8px 0;
  
    width: 100%;

    font-weight: bold;
    color: white;
  
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  
    cursor: pointer;

    border: none;
    border-radius: 2px;
    
    background-color: #65DB6B;
}

button:hover {
    background-color: rgb(86, 206, 92);
}