.toolbar-wrapper {
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.toolbar {
    box-shadow: var(--def-box-shadow);
    background-color: var(--x-light);
    padding: 0 8px;
    border-radius: 0 0 8px 8px;
    height: 56px;
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tools-section {
    display: flex;
    align-items: center;
}
.tools-section.left { justify-content: flex-start; }
.tools-section.center { justify-content: center; }
.tools-section.right { justify-content: flex-end; }

.toolbar-btn {
    display: flex;
    border: none;
    text-decoration: none;
    font-size: 1em;
    border-radius: 32px;
    padding: 8px 12px;
    font-weight: 550;
    transition: var(--def-transition);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    color: var(--x-light);
}

.toolbar-btn.cancel { background-color: var(--exito-red); }
.toolbar-btn.confirm { background-color: #228822; }
.toolbar-btn.profile {
    background-color: transparent;
    padding: 4px;
}

.toolbar-btn.back { background-color: var(--exito-blue); }
.toolbar-btn-back-icon-container {
    display: flex;
    align-items: center;
    margin-right: 8px;
}
.toolbar-btn-back-icon {
    transform: rotateY(180deg);
    fill: var(--x-light);
    min-width:  8px;
    min-height: 8px;
    width:  16px;
    height: 16px;
    transition: var(--def-transition);
}
.toolbar-btn.preview {
    padding: 8px;
    margin-right: 8px;
    background-color: var(--faint);
}
.toolbar-btn.preview svg {
    min-width:  20px;
    min-height: 20px;
    width:  24px;
    height: 24px;
    fill: var(--x-light);
}

.toolbar-btn.options {
    margin-right: 8px;
    padding: 8px;
    background-color: var(--muted);
}
.toolbar-btn.options svg {
    min-width:  16px;
    min-height: 16px;
    width:  24px;
    height: 24px;
    fill: var(--x-light);
}

.toolbar-select-container {
    width: min-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.toolbar-select-title {
    font-size: .9em;
    font-weight: 450;
    margin-right: 4px;
}

.toolbar-select {
    font-size: .8em;
    font-weight: 450;
    border-radius: 8px;
    border: 1px solid var(--faint);
    background-color: var(--x-light);
    text-align: center;
}

.login-modal {
    width: 100%;
    max-width: 400px;
    background-color: #111;
    color: var(--light);
    border: none;
    border-radius: 8px;
    padding: 8px 4px;
}

.login-modal::backdrop { background-color: rgba(0,0,0,.8); }

.login-modal input {
    width: 100%;
    border-radius: 8px;
    border: none;
    font-size: 1em;
    color: var(--x-dark);
    font-weight: 450;
    background-color: var(--light);
    padding-left: 8px;
}
.login-modal input:focus, .login-modal:focus { outline: none; }

.login-modal table {
    border-collapse: collapse;
    border: none;
    margin: 32px auto 0 auto;
}

.login-modal-input-title-container {
    padding-right: 12px;
}

.login-modal th {
    border: none;
    padding: 0 8px;
}

.login-modal tr {
    height: 40px;
}

.login-modal tr:nth-child(n+1):nth-child(-n+3) {
    text-align: right;
}

.login-modal-top-text {
    text-align: center;
    font-weight: 450;
}

.login-modal-top-text div:nth-child(1) {
    font-size: 1.5em;
    letter-spacing: 2px;
}
.login-modal-top-text div:nth-child(2) {
    font-size: 1.3em;
    margin-top: 8px;
}

.login-modal-input-title {
    font-size: 1em;
    text-wrap: nowrap;
}

tr[id='loginErrormessage'] { height: 48px; }

.login-modal-error-message {
    text-align: center;
    color: var(--exito-red);
    font-size: .8em;
    font-weight: 550;
}

.login-btn-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-btn {
    font-size: 1.4em;
    color: var(--x-dark);
    background-color: var(--x-light);
    font-weight: 450;
    letter-spacing: 2px;
    box-shadow: none;
    transition: var(--def-transition);
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 4px 12px;
}
.login-btn:disabled {
    /*background-color: var(--x-dark);*/
    background-color: #666;
    box-shadow: none;
    cursor: not-allowed;
}
.login-btn:not(:disabled):hover {
    background-color: var(--x-dark);
    border-color: var(--x-light);
    color: var(--x-light);
}

.login-modal-bottom-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 48px;
}

.checkbox-container {
    cursor: pointer;
    width:  14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.checkbox-container input { display: none; }
.checkbox-container svg { overflow: visible; }

.checkbox-path {
    fill: none;
    stroke: #ccc;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease;
    stroke-dasharray: 241 9999999;
    stroke-dashoffset: 0;
}

.checkbox-container input:checked ~ svg .checkbox-path {
    stroke-dasharray: 70.5096664428711 9999999;
    stroke-dashoffset: -262.2723388671875;
    stroke: #22dd22;
}

.keep-signed-in-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    text-wrap: nowrap;
    cursor: pointer;
    border-radius: 8px;
    transition: var(--def-transition);
}
.keep-signed-in-container:hover { background-color: #333; }

.checkbox-text {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.5em;
    margin-right: 8px;
    font-size: .8em;
}

.forgot-pass-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    transition: var(--def-transition);
    padding: 4px 8px;

}
.forgot-pass-container:hover { background-color: #333; }
.forgot-pass-container:hover .forgot-pass-text { color: #7de2ff; }
.forgot-pass-container:hover .forgot-pass-text.disabled { color: #111; }

.forgot-pass-text {
    color: #5bc0de;
    transition: var(--def-transition);
    font-size: .8em;
    text-wrap: nowrap;
    cursor: pointer;
}
.forgot-pass-text.disabled {
    color: #666;
    cursor: not-allowed;
    text-decoration: underline;
}

.profile-icon {
    transition: var(--def-transition);
    border-radius: 50%;
    background-color: #ddd;
    fill: var(--x-dark);
    width:  40px;
    height: 40px;
    pointer-events: none;
}

.toolbar-btn.profile:hover .profile-icon {
    background-color: #fff;
    fill: var(--exito-blue);
}

.profile-link {
    position: absolute;
    inset: 0;
}

.profile-options-container {
    width: max-content;
    position: absolute;
    top: 56px;
    right: 0;
    background-color: var(--light);
    border-radius: 8px;
    padding: 16px;
}

.option-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
}
.option-container:first-of-type { margin: 0 0 12px 0; }
.option-container:last-of-type { margin: 12px 0 0 0; }

.profile-option {
    transition: var(--def-transition);
    width: 100%;
    text-align: center;
    text-decoration: none;
    border: none;
    padding: 8px;
    background-color: var(--exito-blue);
    border-radius: 8px;
    color: var(--x-light);
    cursor: pointer;
}

.profile-option.logout { background-color: #cc0000; }



/*-------------------------------------------------------------------------------------------------------------------*/
                                /* -- Mobile first approach using new breakpoints -- */
/*-------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 375px) {}

@media (min-width: 576px) {
    .toolbar-select-container { width: max-content; }
    .toolbar-select-title {
        font-size: 1em;
    }
    .toolbar-select { font-size: .9em; }
}

@media (min-width: 768px) {
    .toolbar-select-title {
        font-size: 1.1em;
        margin-right: 8px;
    }
    .toolbar-select { font-size: 1em; }
    .toolbar-btn {
        font-size: 1.1em;
        padding: 8px 16px;
    }
}

@media (min-width: 992px) {}
@media (min-width: 1036px) {}
@media (min-width: 1062px) {}
@media (min-width: 1200px) {}
@media (hover: hover) {}