:root {
    /* Main Colors */
    --ws-primary-color: #40a55a;
    --ws-primary-dark-color: #378f4e;

    --ws-secondary-color: #005a5c;
    --ws-secondary-dark-color: #004749;

    --ws-success-color: var(--bs-success);
    --ws-success-dark-color: #146b42;

    --ws-danger-color: var(--bs-danger);
    --ws-danger-dark-color: #a82935;

    --ws-warning-color: var(--bs-warning);
    --ws-warning-dark-color: #d9a204;

    --ws-theme-color: #ffffff;
    --ws-theme-dark-color: #f8f8f8;

    /* Layout Colors */
    --ws-container-color: #ffffff;
    --ws-background-color: #f8f8f8;
    --ws-border-color: rgba(0, 0, 0, .16);

    /* Text colors */
    --ws-title-color: #313131;
    --ws-text-color: #4f4f4f;
    --ws-link-color: #40a55a;
    --ws-link-hover-color: #378f4e;

    /* Context Menu Colors */
    --ws-context-menu-bg: #ffffff;
    --ws-context-menu-text-color: #4f4f4f;
    --ws-context-menu-icon-color: #828282;

    /* Input Styles */
    --ws-input-bg: #ffffff;
    --ws-input-color: #2f2f2f;
    --ws-input-placeholder: #828282;
    --ws-input-border: #cccccc;
    --ws-input-disabled: #dadada;

    /* Menu Colors */
    --ws-menu-root-bg: #ffffff;
    --ws-menu-root-color: #1f1f1f;
    --ws-menu-root-active-bg: var(--ws-secondary-color);
    --ws-menu-root-active-color: #ffffff;

    --ws-menu-node-bg: #e7e9eb;
    --ws-menu-node-color: #424242;
    --ws-menu-node-active-bg: var(--ws-primary-color);
    --ws-menu-node-active-color: #ffffff;
    --ws-menu-border-color: rgba(127, 127, 127, .2);

    /* CKEditor */
    --ws-editor-border: #cccccc;
    --ws-editor-header: #f6f6f6;
    --ws-editor-body: #ffffff;
    --ws-editor-body-text: #202020;
    --ws-editor-icon: #4f4f4f;

    /* BS Switch */
    --ws-switch-button: #ffffff;
    --ws-switch-disabled: #eee;
    --ws-switch-border: #ccc;
}

.dark:root {
    /* Main Colors */
    --ws-theme-color: #383838;
    --ws-theme-dark-color: #2f2f2f;

    /* Layout Colors */
    --ws-container-color: #383838;
    --ws-background-color: #202020;
    --ws-border-color: #535353;

    /* Text colors */
    --ws-title-color: #f5f5f5;
    --ws-text-color: #c7c7c7;
    --ws-link-color: #4dc56c;
    --ws-link-hover-color: #40a85b;

    /* Context Menu Colors */
    --ws-context-menu-bg: #383838;
    --ws-context-menu-text-color: #c7c7c7;
    --ws-context-menu-icon-color: #c7c7c7;

    /* Input Styles */
    --ws-input-bg: #404040;
    --ws-input-color: #eeeeee;
    --ws-input-placeholder: #eeeeee88;
    --ws-input-border: #88888888;
    --ws-input-disabled: #575757;

    /* Menu Colors */
    --ws-menu-root-bg: #383838;
    --ws-menu-root-color: #c7c7c7;
    --ws-menu-root-active-bg: var(--ws-secondary-color);
    --ws-menu-root-active-color: #ffffff;

    --ws-menu-node-bg: #252525;
    --ws-menu-node-color: #c7c7c7;
    --ws-menu-node-active-bg: var(--ws-primary-color);
    --ws-menu-node-active-color: #ffffff;

    /* CKEditor */
    --ws-editor-border: #444444;
    --ws-editor-header: #383838;
    --ws-editor-body: #1f1f1f;
    --ws-editor-body-text: #eeeeee;
    --ws-editor-icon: #4f4f4f;

    /* BS Switch */
    --ws-switch-button: #525252;
    --ws-switch-disabled: #383838;
    --ws-switch-border: #444444;
}

::-moz-selection { /* Code for Firefox */
    background: var(--ws-primary-color);
    color: white;
}

::selection {
    background: var(--ws-primary-color);
    color: white;
}

.ws-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    padding: 16px 24px;
    line-height: 1;
    text-decoration: none;
    transition: background .1s;
    background: var(--ws-theme-color);
    color: var(--ws-title-color);
    border: solid 1px var(--ws-border-color);
    width: fit-content;
    font-size: 13pt;
    gap: 8px;
}

.ws-btn:hover {
    background: var(--ws-theme-dark-color);
    color: var(--ws-title-color);
}

.ws-btn .fa {
    float: left;
    line-height: 1;
}

.ws-btn-sm {
    font-size: 9pt;
    padding: 6px 10px;
}

.ws-btn.ws-100 {
    flex: 1;
    width: 100%;
}

.ws-btn-primary {
    border: solid 1px rgba(0, 0, 0, .1);
    background: var(--ws-primary-color);
    color: white;
}

.ws-btn-primary:hover {
    color: white;
    background: var(--ws-primary-dark-color);
}

.ws-btn-secondary {
    border: solid 1px rgba(0, 0, 0, .1);
    background: var(--ws-secondary-color);
    color: white;
}

.ws-btn-secondary:hover {
    color: white;
    background: var(--ws-secondary-dark-color);
}

.ws-btn-success {
    border: solid 1px rgba(0, 0, 0, .1);
    background: var(--ws-success-color);
    color: white;
}

.ws-btn-success:hover {
    color: white;
    background: var(--ws-success-dark-color);
}

.ws-btn-danger {
    border: solid 1px rgba(0, 0, 0, .1);
    background: var(--ws-danger-color);
    color: white;
}

.ws-btn-danger:hover {
    color: white;
    background: var(--ws-danger-dark-color);
}


body {
     font-family: "Roboto Light", sans-serif;
     font-size: 14px;
     line-height: 1.42857;
     color: #333;
     background-color: #fff;
     padding-left: 0;
}

.form--login {
    padding: 120px 0;
}

@media (min-width: 1200px) {
    .container, .form, .text, .profile, .calendar, .event, .contact {
        width: 1170px;
    }
}

@media (min-width: 992px) {
    .container, .form, .text, .profile, .calendar, .event, .contact {
        width: 970px;
    }
}

@media (min-width: 768px) {
    .container, .form, .text, .profile, .calendar, .event, .contact {
        width: 750px;
    }
}

.menu {
    background: var(--ws-secondary-color);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.25);
    padding: 10px;
    position: fixed;
    z-index: 10;
    height: 58px;
    width: 100%;
    width: 100vw;
    top: 0;
    left: 0;
}

.menu__logo {
    background: url('/img/logo-login-verde.png') no-repeat;
    width: 110px;
    height: 48px;
    margin: auto;
    margin-top: 8px;
    background-size: contain;
}

.container, .text, .profile, .calendar, .event, .contact {
    padding-left: 15px;
    padding-right: 15px;
}


.form__title {
    text-align: center;
    font-family: "Roboto Light", sans-serif;
    border: 0;
    margin-bottom: 24px;
}

h4.form__title {
    font-weight: bold;
}

@media (min-width: 992px) {
    .form--login .form__item {
        margin-left: 33.33333%;
    }
}

@media (min-width: 992px) {
    .form--login .form__item {
        float: left;
        width: 33.33333%;
    }
}

.form--login .form__item {
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}

.form--login .form__input {
    background: #FAFAFA;
    border: 1px solid #ECECEC;
    box-sizing: border-box;
    border-radius: 3px;
    padding: 16px;
    height: 50px;
    font-weight: 100;
    font-size: 18px;
    color: #BDBDBD;
}

.form__input {
    display: block;
    width: 100%;
    box-shadow: none !important;
}

.form__errors {
    color: red;
}

.form__errors ul {
    list-style: none;
}

.form--login .form__submit-container {
    padding: 20px 40px;
}

.form--login .form__submit {
    font-size: 18px;
    height: 50px;
    color: #fff;
    /* Rectangle 58 */
    background: var(--ws-primary-color);
    opacity: 1.00;
    border-radius: 3px;
    width: 100%;

}

.form--login .form__link {
    text-align: center;
    color: #BDBDBD;
    display: block;
    font-weight: 100;
    font-size: 16px;
}

h1, .h1 {
  font-size: 36px;
}

h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.form__container {
    margin-left: -15px;
    margin-right: -15px;
}

.problemas-login {
    /* Problemas no login? Clique aqui. */
    font-family: "Roboto", sans-serif;
    font-style: normal;
    font-weight: 100;
    font-size: 16px;
    line-height: 100%;
    color: #FFFFFF;
    opacity: 1.00;
    padding: 10px;
}

.esqueceu-senha {
    /* Esqueceu seu usuário ou senha? Clique aqui. */
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    color: #BDBDBD;
    opacity: 1.00;
    margin-top: 35px
}

.entre-seus-dados {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100;
    font-size: 36px;
    line-height: 100%;
    color: #828282;
    opacity: 1.00;
    margin-top: 100px;
    margin-bottom: 50px
}

.login {
    /* Rectangle 57 */
    background: #FAFAFA;
    opacity: 1.00;
    border: 1px solid #ECECEC;
    box-sizing: border-box;
    border-radius: 3px;
}

.botao {
    background: var(--ws-primary-color);
    border: none;
    opacity: 1.00;
    border-radius: 3px;
    margin-top: 15px;
    width: 60%
}

.botao-entrar {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 100%;
    color: #FFFFFF;
    opacity: 1.00;

}

.id-user {
    /* ID/User */
    font-family: "Roboto";
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
    line-height: 100%;
    color: #BDBDBD;
    opacity: 1.00;

}