:root {
    --primary-color: #9c38d1;
}

.header {
    width: 100%;
    height: 50px;
    position: relative;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.header .header-title {
    color: #ffffff;
    font-size: 1.25rem;
    font-family: 'AppBold';
}

.header .header-title a {
    color: #ffffff;
    font-size: 1.25rem;
    font-family: 'AppBold';
    text-decoration: none;
}

.tagline-container {
    padding-left: 20px;
    padding-right: 20px;
}

.tagline-container .tagline-heading {
    color: var(--primary-color);
    font-size: 1.50rem;
    font-family: 'AppBold';
    text-align: center;
}

.tagline-container .tagline-subtext {
    margin-top: 10px;
}

.tagline-container .tagline-subtext .tagline-subtext-item {
    margin-top: 5px;
    color: #676767;
    font-size: 1.05rem;
    font-family: 'AppSemiBold';
    text-align: center;
}

.new-chat-container {
    margin-top: 20px;
}

.new-chat-container .new-chat-heading {
    color: var(--primary-color);
    font-size: 1.50rem;
    font-family: 'AppBold';
    text-align: center;
}

.new-chat-container .new-chat-form {
    max-width: 400px;
    margin: auto;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.new-chat-container .chat-rooms {
    max-width: 400px;
    margin: auto;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.new-chat-container .chat-room {
    margin-top: 10px;
    padding: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.10);
    border-radius: 15px;
}

.new-chat-container .chat-room .name,
.new-chat-container .chat-room .name a {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.new-chat-container .chat-room .date {
    margin-top: 2px;
    color: #787878;
    font-size: 0.80rem;
    font-weight: 400;
}

.login-container {
    margin-top: 20px;
}

.login-container .login-heading {
    color: var(--primary-color);
    font-size: 1.50rem;
    font-family: 'AppBold';
    text-align: center;
}

.login-container .login-tagline {
    margin-top: 10px;
    text-align: center;
    font-size: 1.10rem;
    font-family: 'AppSemiBold';
    color: #656565;
}

.login-container .login-tagline .login-chat-name {
    color: #787878;
}

.login-container .login-form {
    max-width: 400px;
    margin: auto;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.input-container {
    width: 100%;
}

.input-container.bottom {
    margin-top: 10px;
}

.input-container .input-label {
    color: #454545;
    font-size: 0.90rem;
    font-family: 'AppMedium';
}

.input-container .input-field {
    margin-top: 5px;
}

.input-container .input-field input {
    outline: none;
    font-size: 0.90rem;
    color: #656565;
}

.input-container .input-field input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color);
}

.form-check-label {
    color: #656565;
    font-size: 1.0rem;
    font-family: 'AppMedium';
}

.create-button {
    margin-top: 20px;
    text-align: center;
}

.common-button {
    width: 150px;
    height: 45px;
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-size: 1.05rem;
    font-family: 'AppMedium';
    border-radius: 5px;
    border-color: var(--primary-color);
}

.form-error-message {
    color: #ed113d;
    font-size: 0.90rem;
    font-family: 'AppMedium';
    text-align: center;
    margin-bottom: 10px;
}

@media (min-width: 800px){
    .tagline-container {
        width: 750px;
        margin: auto;
    }
    .new-chat-container {
        width: 750px;
        margin: auto;
        margin-top: 20px;
    }
}