@import url('./resources/font-roboto/roboto.css');
@import url('./resources/font-awesome/4.4.0/css/font-awesome.min.css');

@import url('./resources/font-material/material.css');

/* Cargas pendientes - resaltado suave rojizo */
.tarjeta-detail .account-movements .md-table.md-card .md-table-row.carga-pendiente-row {
    background-color: #fff5f5; /* rojo muy suave */
}

.tarjeta-detail .account-movements .md-table.md-card .md-table-row .md-table-cell.carga-pendiente .md-table-cell-container,
.tarjeta-detail .account-movements .md-table.md-card .md-table-row .transaction-type.carga-pendiente {
    color: #b53b2f; /* texto rojizo */
    font-weight: 600;
}

.tarjeta-detail .account-movements .md-table.md-card .md-table-row .carga-pendiente-date .pendiente-label {
    color: #b53b2f;
    background-color: #fde8e8;
    border-radius: 10px;
    padding: 2px 6px;
    margin-left: 6px;
    font-size: 11px;
}


.cargas-pendientes-alert {
    margin: 16px 0;
    padding: 0;
}

.cargas-pendientes-alert .alert-content {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cargas-pendientes-alert .alert-icon {
    color: #ff9800;
    font-size: 24px;
    flex-shrink: 0;
}

.cargas-pendientes-alert .alert-text {
    flex: 1;
}

.cargas-pendientes-alert .alert-text p {
    margin: 0;
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}

.cargas-pendientes-alert .alert-button {
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 0.8;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.cargas-pendientes-alert .alert-button .md-icon {
    color: white;
}

.cargas-pendientes-alert .alert-button span {
    font-size: 16px;
    line-height: 0.8;
}

/* Modal Cargas Pendientes - Simple Modal */
.modal-frame.simple .cargas-table-container {
    margin: 15px 0;
}

.modal-frame.simple .cargas-table {
    width: auto;
    min-width: 300px;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.modal-frame.simple .cargas-table .header {
    background-color: #f5f5f5;
}

.modal-frame.simple .cargas-table th {
    font-weight: 600;
    color: #333;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    font-size: 14px;
}

.modal-frame.simple .carga-row {
    border-bottom: 1px solid #f0f0f0;
}

.modal-frame.simple .carga-row:last-child {
    border-bottom: none;
}

.modal-frame.simple .carga-monto {
    font-weight: 600;
    color: #2e7d32;
    padding: 8px 12px;
    font-size: 14px;
}

.modal-frame.simple .carga-fecha {
    color: #666;
    padding: 8px 12px;
    font-size: 14px;
}

.modal-frame.simple .modal-actions {
    margin-top: 15px;
    text-align: center;
}

.modal-frame.simple .btn.btn-primary {
    background-color: #ebad14;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 600;
    cursor: pointer;
}

.modal-frame.simple .btn.btn-primary:hover {
    background-color: #d49b12;
}

@media (max-width: 768px) {
    .cargas-pendientes-modal .md-dialog {
        max-width: 95%;
        margin: 16px;
    }
    
    .cargas-pendientes-modal .md-dialog-title {
        padding: 16px 20px 12px 20px;
    }
    
    .cargas-pendientes-modal .md-dialog-title span {
        font-size: 16px;
    }
    
    .cargas-pendientes-modal .md-dialog-content {
        padding: 20px;
    }
    
    .cargas-pendientes-modal .modal-description {
        font-size: 13px;
        margin-bottom: 16px;
    }
    
    .cargas-pendientes-modal .cargas-table .header .md-table-head,
    .cargas-pendientes-modal .carga-monto,
    .cargas-pendientes-modal .carga-fecha {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .cargas-pendientes-modal .md-dialog-actions {
        padding: 12px 20px 16px 20px;
    }
    
    .cargas-pendientes-modal .md-button.md-primary {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .cargas-pendientes-modal .md-dialog {
        max-width: 98%;
        margin: 8px;
    }
    
    .cargas-pendientes-modal .md-dialog-title {
        padding: 12px 16px 10px 16px;
    }
    
    .cargas-pendientes-modal .md-dialog-title span {
        font-size: 15px;
    }
    
    .cargas-pendientes-modal .md-dialog-content {
        padding: 16px;
    }
    
    .cargas-pendientes-modal .cargas-table .header .md-table-head,
    .cargas-pendientes-modal .carga-monto,
    .cargas-pendientes-modal .carga-fecha {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .cargas-pendientes-modal .md-dialog-actions {
        padding: 10px 16px 12px 16px;
    }
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

html {
    scroll-behavior: smooth;
    box-sizing: border-box
}

::selection {
    background-color: #0078d7;
    color: #fff
}

* {
    padding: 0;
    margin: 0;
    font-family: inherit;
    list-style: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    outline: 0
}

*,
::after,
::before {
    box-sizing: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat
}

body {
    font-family: sans-serif
}

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

a:hover {
    text-decoration: none
}

a:focus {
    outline: 0
}

button:hover {
    cursor: pointer
}

textarea {
    resize: none
}

ul {
    padding: 0;
    margin: 0
}

fieldset {
    border: none
}

svg {
    width: 100%;
    max-height: 40vh;
    object-fit: contain
}

:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2)
}

.animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3)
}

.animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2)
}

.animate__animated.animate__delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3)
}

.animate__animated.animate__delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4)
}

.animate__animated.animate__delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5)
}

.animate__animated.animate__faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-duration: calc(var(--animate-duration)/ 2);
    animation-duration: calc(var(--animate-duration)/ 2)
}

.animate__animated.animate__fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-duration: calc(var(--animate-duration) * .8);
    animation-duration: calc(var(--animate-duration) * .8)
}

.animate__animated.animate__slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2)
}

.animate__animated.animate__slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3)
}

@media print,
(prefers-reduced-motion:reduce) {
    .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }

    .animate__animated[class*=Out] {
        opacity: 0
    }
}

@-webkit-keyframes bounce {

    20%,
    53%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }

    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

@keyframes bounce {

    20%,
    53%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0) scaleY(1.1)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0) scaleY(1.05)
    }

    80% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translate3d(0, 0, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }
}

.animate__bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    transform-origin: center bottom
}

@-webkit-keyframes flash {

    50%,
    from,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {

    50%,
    from,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.animate__flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    from {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.animate__pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.animate__rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0)
    }
}

.animate__shakeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX
}

@-webkit-keyframes shakeY {

    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, -10px, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 10px, 0)
    }
}

@keyframes shakeY {

    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, -10px, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 10px, 0)
    }
}

.animate__shakeY {
    -webkit-animation-name: shakeY;
    animation-name: shakeY
}

@-webkit-keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

.animate__headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake
}

@-webkit-keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg)
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg)
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg)
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg)
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg)
    }
}

.animate__swing {
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    from {
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes tada {
    from {
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

.animate__tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    from {
        transform: translate3d(0, 0, 0)
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes wobble {
    from {
        transform: translate3d(0, 0, 0)
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {

    11.1%,
    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {

    11.1%,
    from,
    to {
        transform: translate3d(0, 0, 0)
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.animate__jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    transform-origin: center
}

@-webkit-keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.3)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.3)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(1)
    }
}

.animate__heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
    animation-duration: calc(var(--animate-duration) * 1.3);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInDown {
    0% {
        transform: translateY(-1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInDown {
    -webkit-animation-name: backInDown;
    animation-name: backInDown
}

@-webkit-keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInLeft {
    0% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInLeft {
    -webkit-animation-name: backInLeft;
    animation-name: backInLeft
}

@-webkit-keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInRight {
    0% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInRight {
    -webkit-animation-name: backInRight;
    animation-name: backInRight
}

@-webkit-keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes backInUp {
    0% {
        transform: translateY(1200px) scale(.7);
        opacity: .7
    }

    80% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.animate__backInUp {
    -webkit-animation-name: backInUp;
    animation-name: backInUp
}

@-webkit-keyframes backOutDown {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(700px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutDown {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutDown {
    -webkit-animation-name: backOutDown;
    animation-name: backOutDown
}

@-webkit-keyframes backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutLeft {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(-2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutLeft {
    -webkit-animation-name: backOutLeft;
    animation-name: backOutLeft
}

@-webkit-keyframes backOutRight {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutRight {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateX(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateX(2000px) scale(.7);
        opacity: .7
    }
}

.animate__backOutRight {
    -webkit-animation-name: backOutRight;
    animation-name: backOutRight
}

@-webkit-keyframes backOutUp {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(-700px) scale(.7);
        opacity: .7
    }
}

@keyframes backOutUp {
    0% {
        transform: scale(1);
        opacity: 1
    }

    20% {
        transform: translateY(0) scale(.7);
        opacity: .7
    }

    100% {
        transform: translateY(-700px) scale(.7);
        opacity: .7
    }
}

.animate__backOutUp {
    -webkit-animation-name: backOutUp;
    animation-name: backOutUp
}

@-webkit-keyframes bounceIn {

    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

@keyframes bounceIn {

    20%,
    40%,
    60%,
    80%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

.animate__bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInDown {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0) scaleY(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, -10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, 5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInLeft {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(-10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInRight {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0) scaleX(3)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0) scaleX(1)
    }

    75% {
        transform: translate3d(10px, 0, 0) scaleX(.98)
    }

    90% {
        transform: translate3d(-5px, 0, 0) scaleX(.995)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes bounceInUp {

    60%,
    75%,
    90%,
    from,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    from {
        opacity: 0;
        transform: translate3d(0, 3000px, 0) scaleY(5)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    75% {
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }

    90% {
        transform: translate3d(0, -5px, 0) scaleY(.985)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.animate__bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0) scaleY(3)
    }
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0) scaleY(3)
    }
}

.animate__bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0) scaleX(2)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0) scaleX(2)
    }
}

.animate__bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0) scaleX(2)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0) scaleX(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0) scaleX(2)
    }
}

.animate__bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0) scaleY(3)
    }
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0) scaleY(.985)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0) scaleY(.9)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0) scaleY(3)
    }
}

.animate__bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInTopLeft {
    -webkit-animation-name: fadeInTopLeft;
    animation-name: fadeInTopLeft
}

@-webkit-keyframes fadeInTopRight {
    from {
        opacity: 0;
        transform: translate3d(100%, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInTopRight {
    from {
        opacity: 0;
        transform: translate3d(100%, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInTopRight {
    -webkit-animation-name: fadeInTopRight;
    animation-name: fadeInTopRight
}

@-webkit-keyframes fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInBottomLeft {
    -webkit-animation-name: fadeInBottomLeft;
    animation-name: fadeInBottomLeft
}

@-webkit-keyframes fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__fadeInBottomRight {
    -webkit-animation-name: fadeInBottomRight;
    animation-name: fadeInBottomRight
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.animate__fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.animate__fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.animate__fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.animate__fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.animate__fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.animate__fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.animate__fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.animate__fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.animate__fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes fadeOutTopLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0)
    }
}

@keyframes fadeOutTopLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0)
    }
}

.animate__fadeOutTopLeft {
    -webkit-animation-name: fadeOutTopLeft;
    animation-name: fadeOutTopLeft
}

@-webkit-keyframes fadeOutTopRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%, -100%, 0)
    }
}

@keyframes fadeOutTopRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%, -100%, 0)
    }
}

.animate__fadeOutTopRight {
    -webkit-animation-name: fadeOutTopRight;
    animation-name: fadeOutTopRight
}

@-webkit-keyframes fadeOutBottomRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 100%, 0)
    }
}

@keyframes fadeOutBottomRight {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 100%, 0)
    }
}

.animate__fadeOutBottomRight {
    -webkit-animation-name: fadeOutBottomRight;
    animation-name: fadeOutBottomRight
}

@-webkit-keyframes fadeOutBottomLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0)
    }
}

@keyframes fadeOutBottomLeft {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 100%, 0)
    }
}

.animate__fadeOutBottomLeft {
    -webkit-animation-name: fadeOutBottomLeft;
    animation-name: fadeOutBottomLeft
}

@-webkit-keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    from {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95, .95, .95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animate__animated.animate__flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.animate__flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0
    }
}

.animate__flipOutX {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    from {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0
    }
}

.animate__flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-duration: calc(var(--animate-duration) * .75);
    animation-duration: calc(var(--animate-duration) * .75);
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedInRight {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes lightSpeedInRight {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__lightSpeedInRight {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedInLeft {
    from {
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1
    }

    80% {
        transform: skewX(5deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes lightSpeedInLeft {
    from {
        transform: translate3d(-100%, 0, 0) skewX(30deg);
        opacity: 0
    }

    60% {
        transform: skewX(-20deg);
        opacity: 1
    }

    80% {
        transform: skewX(5deg)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__lightSpeedInLeft {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOutRight {
    from {
        opacity: 1
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutRight {
    from {
        opacity: 1
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutRight {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes lightSpeedOutLeft {
    from {
        opacity: 1
    }

    to {
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOutLeft {
    from {
        opacity: 1
    }

    to {
        transform: translate3d(-100%, 0, 0) skewX(-30deg);
        opacity: 0
    }
}

.animate__lightSpeedOutLeft {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    from {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateIn {
    from {
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animate__rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
    transform-origin: center
}

@-webkit-keyframes rotateInDownLeft {
    from {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    from {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animate__rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    transform-origin: left bottom
}

@-webkit-keyframes rotateInDownRight {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animate__rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
    transform-origin: right bottom
}

@-webkit-keyframes rotateInUpLeft {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    from {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animate__rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
    transform-origin: left bottom
}

@-webkit-keyframes rotateInUpRight {
    from {
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    from {
        transform: rotate3d(0, 0, 1, -90deg);
        opacity: 0
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.animate__rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
    transform-origin: right bottom
}

@-webkit-keyframes rotateOut {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 200deg);
        opacity: 0
    }
}

.animate__rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
    transform-origin: center
}

@-webkit-keyframes rotateOutDownLeft {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 45deg);
        opacity: 0
    }
}

.animate__rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
    transform-origin: left bottom
}

@-webkit-keyframes rotateOutDownRight {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.animate__rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
    transform-origin: right bottom
}

@-webkit-keyframes rotateOutUpLeft {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
}

.animate__rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
    transform-origin: left bottom
}

@-webkit-keyframes rotateOutUpRight {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    from {
        opacity: 1
    }

    to {
        transform: rotate3d(0, 0, 1, 90deg);
        opacity: 0
    }
}

.animate__rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
    transform-origin: right bottom
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        transform: rotate3d(0, 0, 1, 80deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        transform: rotate3d(0, 0, 1, 60deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.animate__hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
    -webkit-animation-name: hinge;
    animation-name: hinge;
    transform-origin: top left
}

@-webkit-keyframes jackInTheBox {
    from {
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        transform: rotate(-10deg)
    }

    70% {
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    from {
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        transform: rotate(-10deg)
    }

    70% {
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.animate__jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0)
    }
}

.animate__rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

@keyframes rollOut {
    from {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
    }
}

.animate__rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.animate__zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    from {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.animate__zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown;
    transform-origin: center bottom
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0)
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0)
    }
}

.animate__zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft;
    transform-origin: left center
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0)
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0)
    }
}

.animate__zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight;
    transform-origin: right center
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.animate__zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp;
    transform-origin: center bottom
}

@-webkit-keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

.animate__slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

.animate__slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0)
    }
}

.animate__slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

.animate__slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0)
    }
}

.animate__slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

*,
:after,
:before {
    box-sizing: inherit
}

html {
    height: 100%;
    box-sizing: border-box;
    transition: background-color .3s cubic-bezier(.25, .8, .25, 1)
}

body {
    min-height: 100%;
    margin: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: Roboto, Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif
}

a:not(.md-button) {
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: color, background-color, opacity
}

audio,
canvas,
embed,
iframe,
img,
object,
video {
    max-width: 100%;
    font-style: italic;
    vertical-align: middle
}

audio:not(.md-image),
canvas:not(.md-image),
embed:not(.md-image),
iframe:not(.md-image),
img:not(.md-image),
object:not(.md-image),
video:not(.md-image) {
    height: auto
}

[tabindex="-1"]:focus {
    outline: 0 !important
}

.md-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 8px
}

.md-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px
}

.md-scrollbar::-webkit-scrollbar-button {
    display: none
}

.md-caption {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    line-height: 17px
}

.md-body-1,
body {
    font-weight: 400;
    line-height: 20px
}

.md-body-1,
.md-body-2,
body {
    font-size: 14px;
    letter-spacing: .01em
}

.md-body-2 {
    font-weight: 500;
    line-height: 24px
}

.md-subheading {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 24px
}

.md-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .005em;
    line-height: 26px
}

.md-headline {
    font-size: 24px;
    line-height: 32px
}

.md-display-1,
.md-headline {
    font-weight: 400;
    letter-spacing: 0
}

.md-display-1 {
    font-size: 34px;
    line-height: 40px
}

.md-display-2 {
    font-size: 45px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 48px
}

.md-display-3 {
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -.005em;
    line-height: 58px
}

.md-display-4 {
    font-size: 112px;
    font-weight: 300;
    letter-spacing: -.01em;
    line-height: 112px
}

button:focus {
    outline: 0
}

.md-app {
    display: flex;
    overflow: hidden;
    position: relative
}

.md-app.md-fixed .md-app-scroller {
    overflow: auto
}

.md-app.md-fixed-last,
.md-app.md-flexible,
.md-app.md-overlap,
.md-app.md-reveal {
    transform: translateZ(0)
}

.md-app.md-fixed-last .md-app-toolbar,
.md-app.md-flexible .md-app-toolbar,
.md-app.md-overlap .md-app-toolbar,
.md-app.md-reveal .md-app-toolbar {
    position: absolute;
    top: 0
}

.md-app.md-flexible .md-app-toolbar,
.md-app.md-overlap .md-app-toolbar {
    min-height: 0
}

.md-app.md-flexible .md-toolbar-row:first-child {
    z-index: 2
}

.md-app.md-flexible .md-toolbar-row:last-child {
    position: fixed;
    bottom: 0;
    z-index: 1
}

.md-app.md-flexible .md-display-1 {
    position: fixed
}

.md-app.md-overlap .md-app-toolbar {
    z-index: 1
}

.md-app.md-overlap .md-app-content {
    margin: -64px 24px 24px;
    position: relative;
    z-index: 2
}

.md-app-content {
    padding: 16px
}

.md-app-content > p:first-child {
    margin-top: 0
}

.md-app-content > p:last-child {
    margin-bottom: 0
}

.md-app-container {
    flex: 1;
    display: flex;
    overflow: auto;
    transform: translate3D(0, 0, 0);
    transition: padding-left .4s cubic-bezier(.4, 0, .2, 1), padding-right .4s cubic-bezier(.4, 0, .2, 1);
    will-change: padding-left, padding-right
}

.md-app-scroller {
    flex: 1
}

@media (max-width:960px) {
    .md-app.md-overlap .md-app-content {
        margin: -64px 16px 16px
    }
}

@media (max-width:600px) {
    .md-app.md-overlap .md-app-content {
        margin: -64px 8px 8px
    }
}

@media (min-width:600px) {
    .md-app-drawer.md-permanent-card + .md-app-scroller .md-content {
        padding-left: 0;
        padding-right: 0;
        border-left: none;
        border-right: none
    }

    .md-app-content {
        border-left: 1px solid transparent;
        border-right: 1px solid transparent
    }
}

.md-app-internal-drawer,
.md-app-side-drawer .md-app-container {
    flex-direction: column
}

.md-app-internal-drawer .md-app-scroller {
    overflow: auto
}

.md-no-elevation {
    box-shadow: none !important
}

.md-fixed-last .md-reveal-active,
.md-flexible .md-reveal-active,
.md-overlap .md-reveal-active,
.md-reveal .md-reveal-active {
    transform: translate3d(0, calc(100% + 10px), 0);
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: box-shadow, transform;
    will-change: height, box-shadow, transform
}

.md-app-toolbar {
    min-height: 64px
}

.md-overlap .md-app-toolbar {
    height: 196px
}

.md-fixed-last-active {
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: box-shadow, transform;
    will-change: height, box-shadow, transform
}

.md-overlap-off {
    z-index: 3 !important
}

.md-app-content {
    min-height: 100%
}

.md-app-content .md-card {
    margin-right: 16px;
    margin-left: 16px;
    overflow: visible
}

.md-badge-content {
    position: relative;
    display: inline-block
}

.md-badge-content .md-position-top {
    top: -4px
}

.md-badge-content .md-position-bottom {
    bottom: -4px
}

.md-badge {
    position: absolute;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    right: -4px;
    font-size: 10px;
    font-style: normal;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    pointer-events: none;
    z-index: 6
}

.md-list-item-content .md-badge {
    position: relative;
    top: 0;
    bottom: 0;
    right: 0
}

.md-badge.md-dense {
    width: 18px;
    height: 18px;
    font-size: 8px
}

.md-badge.md-square {
    width: auto;
    border-radius: 3px;
    height: 18px;
    padding: 0 4px
}

.md-autocomplete .md-menu {
    width: 100%;
    display: flex
}

.md-autocomplete-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10
}

.md-field.md-inline.md-autocomplete-box {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    padding-top: 2px;
    border-radius: 2px
}

.md-field.md-inline.md-autocomplete-box.md-focused {
    z-index: 13
}

.md-field.md-inline.md-autocomplete-box:after,
.md-field.md-inline.md-autocomplete-box:before {
    display: none
}

.md-toolbar .md-field.md-inline.md-autocomplete-box {
    min-height: 40px;
    height: 40px;
    margin: 0;
    box-shadow: none
}

.md-field.md-inline.md-autocomplete-box .md-menu {
    align-items: center
}

.md-field.md-inline.md-autocomplete-box .md-input {
    padding-left: 16px
}

.md-field.md-inline.md-autocomplete-box .md-input-action,
.md-field.md-inline.md-autocomplete-box label,
.md-field.md-inline.md-autocomplete-box.md-focused label {
    top: 50%;
    transform: translateY(-50%)
}

.md-field.md-inline.md-autocomplete-box .md-input-action {
    right: 8px
}

.md-field.md-inline.md-autocomplete-box label,
.md-field.md-inline.md-autocomplete-box.md-focused label {
    margin-top: 2px;
    left: 16px
}

.md-autocomplete-box-content:after {
    height: 6px;
    position: absolute;
    top: -6px;
    right: 0;
    left: 0;
    z-index: 13;
    border-bottom: 1px solid;
    content: ""
}

.md-avatar {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    border-radius: 40px;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    transition-property: color, background-color;
    will-change: color, background-color;
    font-size: 24px;
    letter-spacing: -.05em;
    vertical-align: middle
}

.md-avatar.md-large {
    min-width: 64px;
    min-height: 64px;
    border-radius: 64px;
    font-size: 32px
}

.md-avatar.md-large .md-icon {
    font-size: 40px !important
}

.md-avatar.md-small {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 24px;
    font-size: 14px
}

.md-avatar.md-small .md-icon {
    font-size: 16px !important
}

.md-avatar .md-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.md-avatar img {
    width: 100%;
    height: 100%;
    display: block
}

.md-avatar .md-ripple {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.md-bottom-bar {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    width: 100%;
    transition: background-color .5s cubic-bezier(.4, 0, .2, 1)
}

.md-bottom-bar > .md-ripple {
    display: flex;
    flex-wrap: wrap
}

.md-bottom-bar.md-type-fixed {
    justify-content: center
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
    min-width: 80px;
    max-width: 168px;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    transition-property: color;
    will-change: color
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item .md-bottom-bar-label {
    transform: scale(.8571) translate3D(0, 4px, 0)
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-ripple {
    padding-top: 6px
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-bottom-bar-icon {
    transform: translate3d(0, -2px, 0)
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-bottom-bar-label {
    transform: translate3D(0, 3px, 0)
}

.md-bottom-bar.md-type-shift {
    justify-content: center
}

.md-bottom-bar.md-type-shift > .md-ripple .md-ripple-enter-active {
    transition-duration: 1.1s !important
}

.md-bottom-bar.md-type-shift > .md-ripple .md-ripple-enter {
    opacity: 1
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item {
    min-width: 56px;
    max-width: 96px;
    flex: 1 1 32px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: padding, min-width, max-width, flex, color;
    will-change: padding, min-width, max-width, flex, color
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-ripple {
    padding: 16px
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-bottom-bar-icon {
    transform: translate3d(0, 8px, 0)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-bottom-bar-label {
    opacity: 0;
    transform: scale(.7) translate3d(0, 6px, 0)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active {
    min-width: 96px;
    max-width: 168px;
    flex: 1 1 72px
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-ripple {
    padding: 6px 0 10px
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-bottom-bar-icon {
    transform: translateZ(0)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item.md-active .md-bottom-bar-label {
    opacity: 1;
    transform: translate3d(0, 3px, 0)
}

.md-bottom-bar .md-bottom-bar-item {
    height: 56px;
    margin: 0;
    flex: 1;
    cursor: pointer;
    border-radius: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    text-transform: none
}

.md-bottom-bar .md-bottom-bar-item .md-ripple {
    padding: 8px 12px 10px;
    transition: padding .3s cubic-bezier(.25, .8, .25, 1);
    will-change: padding
}

.md-bottom-bar .md-bottom-bar-item .md-button-content {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center
}

.md-bottom-bar .md-bottom-bar-item .md-bottom-bar-icon,
.md-bottom-bar .md-bottom-bar-item .md-bottom-bar-label {
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: transform, opacity;
    will-change: transform, opacity
}

.md-ripple {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 0)
}

.md-ripple-wave {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background: currentColor;
    border-radius: 50%;
    opacity: 0;
    transform: scale(2) translateZ(0)
}

.md-ripple-wave.md-centered {
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    top: 50%;
    left: 50%
}

.md-ripple-wave ~ :not(.md-ripple-wave) {
    position: relative;
    z-index: 2
}

.md-ripple-enter-active {
    transition: .8s cubic-bezier(.25, .8, .25, 1);
    transition-property: opacity, transform;
    will-change: opacity, transform
}

.md-ripple-enter-active.md-centered {
    transition-duration: 1.2s
}

.md-ripple-enter {
    opacity: .26;
    transform: scale(.26) translateZ(0)
}

.md-button,
.md-button-clean {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: relative;
    overflow: hidden;
    outline: 0;
    background: 0 0;
    border: 0;
    border-radius: 0;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    font-family: inherit;
    line-height: normal;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap
}

.md-button {
    min-width: 88px;
    height: 36px;
    margin: 6px 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase
}

.md-button:active {
    outline: 0
}

.md-button[disabled] {
    pointer-events: none
}

.md-button:not([disabled]) {
    cursor: pointer
}

.md-button:not([disabled]).md-focused:before,
.md-button:not([disabled]):active:before,
.md-button:not([disabled]):hover:before {
    background-color: currentColor;
    opacity: .12
}

.md-button:not([disabled]).md-focused.md-accent:before,
.md-button:not([disabled]).md-focused.md-primary:before,
.md-button:not([disabled]):active:before {
    opacity: .2
}

.md-button:not([disabled]).md-ripple-off:active:before {
    opacity: .26
}

.md-button.md-plain.md-button.md-raised:not([disabled]) {
    color: rgba(0, 0, 0, .87);
    background-color: #fff
}

.md-button.md-plain.md-button.md-raised:not([disabled]) .md-icon-font {
    color: rgba(0, 0, 0, .87)
}

.md-button.md-plain.md-button.md-raised:not([disabled]) .md-icon-image {
    fill: rgba(0, 0, 0, .87)
}

.md-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.md-button:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    will-change: background-color, opacity;
    content: " "
}

.md-button.md-dense {
    height: 32px;
    font-size: 13px
}

.md-button.md-raised:not([disabled]) {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.md-button.md-raised:not([disabled]):active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.md-button.md-raised:not([disabled]).md-ripple-off:active:before {
    opacity: .2
}

.md-button + .md-button {
    margin-left: 0
}

.md-button .md-ripple {
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center
}

.md-button-spaced .md-ripple {
    padding: 0 16px
}

.md-fab,
.md-icon-button {
    border-radius: 50%;
    z-index: 5
}

.md-fab .md-ripple,
.md-fab:before,
.md-icon-button .md-ripple,
.md-icon-button:before {
    border-radius: 50%
}

.md-fab.md-dense .md-ripple-wave,
.md-fab.md-mini .md-ripple-wave,
.md-icon-button .md-ripple-wave {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important
}

.md-icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0 6px
}

.md-icon-button.md-dense {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.md-icon-button .md-ripple-enter-active {
    transition-duration: 1.2s
}

.md-fab {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
    width: 56px;
    height: 56px;
    min-width: 0;
    overflow: hidden
}

.md-fab:active {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.md-fab.md-dense,
.md-fab.md-mini {
    width: 40px;
    height: 40px
}

.md-fab.md-fab-top-left,
.md-fab.md-fab-top-right {
    position: absolute;
    top: 24px
}

.md-fab.md-fab-bottom-left,
.md-fab.md-fab-bottom-right {
    position: absolute;
    bottom: 24px
}

.md-fab.md-fab-bottom-center,
.md-fab.md-fab-top-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.md-fab.md-fab-top-center {
    top: 24px
}

.md-fab.md-fab-bottom-center {
    bottom: 24px
}

.md-fab.md-fab-bottom-right,
.md-fab.md-fab-top-right {
    right: 24px
}

.md-fab.md-fab-bottom-left,
.md-fab.md-fab-top-left {
    left: 24px
}

.md-fab.md-fixed {
    position: fixed
}

.md-fab .md-ripple {
    padding: 0
}

.md-button-content {
    position: relative;
    z-index: 2
}

.md-card {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    position: relative;
    z-index: 1;
    border-radius: 2px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: color, background-color;
    will-change: color, background-color
}

.md-card.md-with-hover {
    cursor: pointer;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.25, .8, .25, 1);
    will-change: background-color, box-shadow
}

.md-card.md-with-hover:hover {
    z-index: 2;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.md-card.md-expand-active .md-card-expand-trigger.md-icon-button {
    transform: rotate(180deg)
}

.md-card .md-subhead,
.md-card .md-subheading,
.md-card .md-title {
    margin: 0;
    font-weight: 400
}

.md-card .md-subhead {
    opacity: .54;
    font-size: 14px;
    letter-spacing: .01em;
    line-height: 20px
}

.md-card .md-subhead + .md-title {
    margin-top: 4px
}

.md-card .md-title {
    font-size: 24px;
    letter-spacing: 0;
    line-height: 32px
}

.md-card-area,
.md-card > .md-card-area:not(:last-child) {
    position: relative
}

.md-card > .md-card-area:not(:last-child):after {
    height: 1px;
    position: absolute;
    bottom: 0;
    content: " "
}

.md-card > .md-card-area:not(:last-child):not(.md-inset):after {
    right: 0;
    left: 0
}

.md-card > .md-card-area:not(:last-child).md-inset:after {
    right: 16px;
    left: 16px
}

.md-card-header {
    padding: 16px
}

.md-card-header:first-child > .md-card-header-text > .md-title:first-child,
.md-card-header:first-child > .md-title:first-child {
    margin-top: 8px
}

.md-card-header:last-child {
    margin-bottom: 8px
}

.md-card-header.md-card-header-flex {
    display: flex;
    justify-content: space-between
}

.md-card-header + .md-card-content {
    padding-top: 0
}

.md-card-header + .md-card-actions:not(:last-child) {
    padding: 0 8px
}

.md-card-header > img {
    border-radius: 50%
}

.md-card-header .md-avatar,
.md-card-header > img {
    margin-right: 16px;
    float: left
}

.md-card-header .md-avatar ~ .md-title,
.md-card-header > img ~ .md-title {
    font-size: 14px
}

.md-card-header .md-avatar ~ .md-subhead,
.md-card-header .md-avatar ~ .md-title,
.md-card-header > img ~ .md-subhead,
.md-card-header > img ~ .md-title {
    font-weight: 500;
    line-height: 20px
}

.md-card-header .md-button {
    margin: 0
}

.md-card-header .md-button:last-child {
    margin-right: -4px
}

.md-card-header .md-button + .md-button {
    margin-left: 8px
}

.md-card-header .md-card-header-text {
    flex: 1
}

.md-card-header .md-card-media {
    width: 80px;
    height: 80px;
    margin-left: 16px;
    flex: 0 0 80px
}

.md-card-header .md-card-media.md-medium {
    width: 120px;
    height: 120px;
    flex: 0 0 120px
}

.md-card-header .md-card-media.md-big {
    width: 160px;
    height: 160px;
    flex: 0 0 160px
}

.md-card-media {
    position: relative
}

.md-card-media.md-ratio-16-9 {
    overflow: hidden
}

.md-card-media.md-ratio-16-9:before {
    width: 100%;
    padding-top: 56.25%;
    display: block;
    content: " "
}

.md-card-media.md-ratio-16-9 img {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%)
}

.md-card-media.md-ratio-4-3 {
    overflow: hidden
}

.md-card-media.md-ratio-4-3:before {
    width: 100%;
    padding-top: 75%;
    display: block;
    content: " "
}

.md-card-media.md-ratio-4-3 img {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%)
}

.md-card-media.md-ratio-1-1 {
    overflow: hidden
}

.md-card-media.md-ratio-1-1:before {
    width: 100%;
    padding-top: 100%;
    display: block;
    content: " "
}

.md-card-media.md-ratio-1-1 img {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    transform: translateY(-50%)
}

.md-card-media + .md-card-header {
    padding-top: 24px
}

.md-card-media + .md-card-content:last-child {
    padding-bottom: 16px
}

.md-card-media img {
    width: 100%
}

.md-card-media-actions {
    padding: 16px;
    display: flex;
    justify-content: space-between
}

.md-card-media-actions .md-card-media {
    max-width: 240px;
    max-height: 240px;
    flex: 1
}

.md-card-media-actions .md-card-actions {
    margin-left: 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.md-card-media-actions .md-card-actions .md-button + .md-button {
    margin: 8px 0 0
}

.md-card-media-cover {
    position: relative;
    color: #fff
}

.md-card-media-cover.md-solid .md-card-area {
    background-color: rgba(0, 0, 0, .54)
}

.md-card-media-cover.md-text-scrim .md-card-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.md-card-media-cover .md-card-area {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.md-card-media-cover .md-card-header {
    display: flex;
    flex-direction: column
}

.md-card-media-cover .md-card-header + .md-card-actions {
    padding-top: 0
}

.md-card-media-cover .md-subhead {
    opacity: 1
}

.md-card-media-cover .md-card-actions .md-button:not(.md-primary):not(.md-accent),
.md-card-media-cover .md-card-actions .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon,
.md-card-media-cover .md-card-header .md-button:not(.md-primary):not(.md-accent),
.md-card-media-cover .md-card-header .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon {
    color: #fff !important
}

.md-card-content {
    padding: 16px;
    font-size: 14px;
    line-height: 22px
}

.md-card-content:last-of-type {
    padding-bottom: 24px
}

.md-card-expand {
    overflow: hidden
}

.md-card-expand .md-card-actions {
    position: relative;
    z-index: 2
}

.md-card-expand .md-card-expand-content {
    position: relative;
    z-index: 1
}

.md-card-expand-trigger.md-icon-button {
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
    will-change: transform
}

.md-card-expand-content {
    overflow: hidden;
    transform: translate3D(0, 0, 0);
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    transition-property: opacity, margin-top;
    will-change: opacity, margin-top
}

.md-card-actions {
    padding: 8px;
    display: flex;
    align-items: center
}

.md-card-actions.md-alignment-right {
    justify-content: flex-end
}

.md-card-actions.md-alignment-left {
    justify-content: flex-start
}

.md-card-actions.md-alignment-space-between {
    justify-content: space-between
}

.md-card-actions .md-button {
    margin: 0
}

.md-card-actions .md-button:first-child {
    margin-left: 0
}

.md-card-actions .md-button:last-child {
    margin-right: 0
}

.md-card-actions .md-button + .md-button {
    margin-left: 4px
}

.md-checkbox {
    width: auto;
    margin: 16px 16px 16px 0;
    display: inline-flex;
    position: relative
}

.md-checkbox:not(.md-disabled),
.md-checkbox:not(.md-disabled) .md-checkbox-label {
    cursor: pointer
}

.md-checkbox .md-checkbox-container {
    width: 20px;
    min-width: 20px;
    height: 20px;
    position: relative;
    border-radius: 2px;
    border: 2px solid transparent;
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-checkbox .md-checkbox-container:focus {
    outline: 0
}

.md-checkbox .md-checkbox-container:after,
.md-checkbox .md-checkbox-container:before {
    position: absolute;
    transition: .4s cubic-bezier(.55, 0, .55, .2);
    content: " "
}

.md-checkbox .md-checkbox-container:before {
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    z-index: 6;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.md-checkbox .md-checkbox-container:after {
    width: 6px;
    height: 13px;
    top: 0;
    left: 5px;
    z-index: 7;
    border: 2px solid transparent;
    border-top: 0;
    border-left: 0;
    opacity: 0;
    transform: rotate(45deg) scale3D(.15, .15, 1)
}

.md-checkbox .md-checkbox-container .md-ripple {
    width: 48px !important;
    height: 48px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.md-checkbox .md-checkbox-container input {
    position: absolute;
    left: -999em
}

.md-checkbox .md-checkbox-label {
    height: 20px;
    padding-left: 16px;
    position: relative;
    line-height: 20px
}

.md-checkbox.md-indeterminate .md-checkbox-container:after {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    z-index: 4;
    border-style: solid;
    border-width: 0 0 2px;
    opacity: 0;
    transform: translate(-50%, -50%) !important
}

.md-checkbox.md-checked .md-checkbox-container:after {
    opacity: 1;
    transform: rotate(45deg) scale3D(1, 1, 1);
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-checkbox.md-disabled.md-checked .md-checkbox-container {
    border-color: transparent !important
}

.md-checkbox.md-required label:after {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translateX(calc(100% + 2px));
    content: "*";
    line-height: 1em;
    vertical-align: top
}

.md-chips.md-field {
    padding-top: 12px;
    flex-wrap: wrap
}

.md-chips.md-field.md-has-value label {
    top: -6px
}

.md-chips.md-field .md-chip {
    margin-bottom: 4px
}

.md-chips.md-field .md-chip:last-of-type {
    margin-right: 8px
}

.md-chips.md-field .md-input {
    min-width: 128px
}

.md-field {
    width: 100%;
    min-height: 48px;
    margin: 4px 0 24px;
    padding-top: 16px;
    display: flex;
    position: relative;
    font-family: inherit
}

.md-field:after,
.md-field:before {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1;
    transition: border .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1), transform 0s cubic-bezier(.4, 0, .2, 1) .3s;
    will-change: border, opacity, transform;
    content: " "
}

.md-field:after {
    height: 1px
}

.md-field:before {
    height: 2px;
    z-index: 2;
    opacity: 0;
    transform: scaleX(.12)
}

.md-field label {
    position: absolute;
    top: 23px;
    left: 0;
    pointer-events: none;
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    transition-duration: .3s;
    font-size: 16px;
    line-height: 20px
}

.md-field .md-prefix,
.md-field .md-suffix {
    font-size: 16px;
    line-height: 32px;
    align-self: center;
    justify-self: center
}

.md-field .md-prefix {
    display: none;
    padding-right: 4px
}

.md-field.md-focused .md-prefix,
.md-field.md-has-value .md-prefix {
    display: block
}

.md-field .md-input,
.md-field .md-textarea {
    height: 32px;
    padding: 0;
    display: block;
    flex: 1;
    border: none;
    background: 0 0;
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    transition-property: font-size, padding-top, color;
    font-family: inherit;
    font-size: 16px;
    line-height: 32px
}

.md-field .md-input[type=date],
.md-field .md-textarea[type=date] {
    font-size: 16px
}

.md-field .md-input[disabled],
.md-field .md-textarea[disabled] {
    cursor: default
}

.md-field .md-input:focus,
.md-field .md-textarea:focus {
    outline: 0
}

.md-field .md-input::-webkit-input-placeholder,
.md-field .md-textarea::-webkit-input-placeholder {
    font-size: 16px;
    text-shadow: none;
    -webkit-text-fill-color: initial;
    -webkit-transition: .4s cubic-bezier(.25, .8, .25, 1);
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    -webkit-transition-property: font-size, color;
    transition-property: font-size, color
}

.md-field .md-textarea {
    min-height: 32px;
    max-height: 230px;
    padding: 5px 0;
    resize: none;
    line-height: 1.3em
}

.md-field .md-count,
.md-field .md-error,
.md-field .md-helper-text {
    height: 20px;
    position: absolute;
    bottom: -22px;
    font-size: 12px;
    transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.md-field .md-error {
    display: block !important;
    left: 0;
    opacity: 0;
    transform: translate3d(0, -8px, 0)
}

.md-field .md-count {
    right: 0
}

.md-field .md-input-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    margin: 0;
    position: absolute;
    top: 16px;
    right: 0;
    transition: .4s cubic-bezier(.4, 0, .2, 1)
}

.md-field .md-input-action.md-input-action-enter-active,
.md-field .md-input-action.md-input-action-leave-active {
    opacity: 0
}

.md-field .md-input-action.md-input-action-enter-to {
    opacity: 1
}

.md-field > .md-icon {
    margin: 4px auto;
    position: relative;
    z-index: 3;
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-field > .md-icon:last-of-type:not(:first-child):after {
    display: none
}

.md-field > .md-icon:after {
    width: 37px;
    height: 4px;
    position: absolute;
    left: -1px;
    bottom: -5px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    content: ""
}

.md-field > .md-icon ~ label {
    left: 36px
}

.md-field > .md-icon ~ .md-file,
.md-field > .md-icon ~ .md-input,
.md-field > .md-icon ~ .md-textarea {
    margin-left: 12px
}

.md-field + .md-has-textarea:not(.md-autogrow) {
    margin-top: 36px
}

.md-field.md-has-placeholder label {
    pointer-events: auto;
    top: 10px;
    opacity: 0;
    font-size: 12px
}

.md-field.md-has-placeholder .md-input,
.md-field.md-has-placeholder .md-textarea {
    font-size: 16px
}

.md-field.md-has-textarea:not(.md-autogrow):after,
.md-field.md-has-textarea:not(.md-autogrow):before {
    height: auto;
    pointer-events: none;
    top: 0;
    bottom: 0;
    transform: none;
    background: 0 0 !important;
    border: 1px solid transparent;
    border-radius: 3px
}

.md-field.md-has-textarea:not(.md-autogrow):before {
    border-width: 2px
}

.md-field.md-has-textarea:not(.md-autogrow) label {
    top: 16px;
    left: 16px
}

.md-field.md-has-textarea:not(.md-autogrow) .md-textarea {
    min-height: 100px;
    padding: 0 16px;
    resize: vertical
}

.md-field.md-has-textarea:not(.md-autogrow) > .md-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3
}

.md-field.md-has-textarea:not(.md-autogrow) .md-count {
    right: 6px;
    bottom: 2px
}

.md-field.md-has-textarea:not(.md-autogrow) .md-clear {
    top: 6px;
    right: 6px
}

.md-field.md-has-textarea:not(.md-autogrow).md-focused label,
.md-field.md-has-textarea:not(.md-autogrow).md-has-value label {
    top: 6px
}

.md-field.md-has-textarea:not(.md-autogrow).md-focused .md-textarea,
.md-field.md-has-textarea:not(.md-autogrow).md-has-value .md-textarea {
    padding-top: 10px
}

.md-field.md-has-file label,
.md-field.md-has-file:after,
.md-field.md-has-file:before {
    left: 36px
}

.md-field.md-has-file .md-input {
    margin-left: 12px
}

.md-field.md-focused:before,
.md-field.md-highlight:before {
    opacity: 1;
    transform: scaleX(1);
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: border, opacity, transform
}

.md-field.md-focused label,
.md-field.md-has-value label {
    pointer-events: auto;
    top: 0;
    opacity: 1;
    font-size: 12px
}

.md-field.md-focused .md-input,
.md-field.md-focused .md-textarea,
.md-field.md-has-value .md-input,
.md-field.md-has-value .md-textarea {
    font-size: 16px
}

.md-field.md-inline label {
    pointer-events: none
}

.md-field.md-inline.md-focused label {
    top: 23px;
    font-size: 16px
}

.md-field.md-inline.md-has-value label {
    opacity: 0
}

.md-field.md-disabled:after {
    background: 0 100% repeat-x;
    background-size: 4px 1px
}

.md-field.md-has-password .md-toggle-password {
    margin: 0;
    position: absolute;
    right: 0;
    bottom: -2px
}

.md-field.md-has-password .md-toggle-password svg {
    width: 22px;
    height: 22px
}

.md-field.md-clearable .md-input {
    padding-right: 30px
}

@-webkit-keyframes a {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    30%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

@keyframes a {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }

    30%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

.md-field.md-invalid.md-has-value label:not(:focus) {
    -webkit-animation: a .4s cubic-bezier(.4, 0, .2, 1) both;
    animation: a .4s cubic-bezier(.4, 0, .2, 1) both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px
}

.md-field.md-invalid.md-has-textarea:not(.md-autogrow):before {
    border-width: 2px
}

.md-field.md-invalid .md-error {
    opacity: 1;
    transform: translateZ(0)
}

.md-field.md-invalid .md-helper-text {
    opacity: 0;
    transform: translate3d(0, -8px, 0)
}

.md-field.md-required label:after {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translateX(calc(100% + 2px));
    content: "*";
    line-height: 1em;
    vertical-align: top
}

.md-icon {
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-size: 24px !important;
    margin: auto;
    display: inline-flex;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    align-items: center;
    justify-content: center;
    vertical-align: middle
}

.md-icon.md-size-2x {
    width: 48px;
    min-width: 48px;
    height: 48px;
    font-size: 48px !important
}

.md-icon.md-size-3x {
    width: 72px;
    min-width: 72px;
    height: 72px;
    font-size: 72px !important
}

.md-icon.md-size-4x {
    width: 96px;
    min-width: 96px;
    height: 96px;
    font-size: 96px !important
}

.md-icon.md-size-5x {
    width: 120px;
    min-width: 120px;
    height: 120px;
    font-size: 120px !important
}

.md-icon-image svg {
    height: 100%;
    flex: 1;
    transition: fill .4s cubic-bezier(.4, 0, .2, 1)
}

.md-icon {
    transition: color .4s cubic-bezier(.4, 0, .2, 1);
    direction: ltr;
    font-family: Material Icons;
    font-feature-settings: "liga";
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    text-rendering: optimizeLegibility;
    text-transform: none;
    word-wrap: normal;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.md-svg-loader {
    display: block
}

.md-svg-loader svg {
    width: 100%
}

.md-chip {
    height: 32px;
    padding: 0 12px;
    display: inline-block;
    cursor: default;
    border-radius: 32px;
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: background-color, color, opacity, transform, box-shadow;
    will-change: background-color, color, opacity, transform, box-shadow;
    font-size: 13px;
    line-height: 32px;
    vertical-align: middle;
    white-space: nowrap
}

.md-chip:focus {
    outline: 0
}

.md-chip.md-chip-enter-active,
.md-chip.md-chip-leave-active {
    opacity: 0;
    transform: transformZ(0) scale(.8)
}

.md-chip.md-chip-enter-to {
    opacity: 1;
    transform: transformZ(0) scale(1)
}

.md-chip.md-clickable:not(.md-disabled):active,
.md-chip.md-deletable:not(.md-disabled):active,
.md-chip.md-focused {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.md-chip.md-clickable {
    padding: 0;
    cursor: pointer
}

.md-chip.md-clickable > .md-ripple {
    padding: 0 12px
}

.md-chip.md-deletable {
    padding-right: 32px;
    position: relative
}

.md-chip.md-deletable.md-clickable {
    padding-right: 0
}

.md-chip.md-deletable.md-clickable > .md-ripple {
    padding-right: 32px
}

.md-chip.md-disabled {
    cursor: default
}

.md-chip + .md-chip {
    margin-left: 4px
}

.md-chip .md-button.md-input-action {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 6;
    transform: translate3D(0, -50%, 0);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1);
    font-size: 18px
}

.md-chip .md-button.md-input-action .md-ripple {
    padding: 0
}

.md-chip .md-button.md-input-action .md-button-content {
    height: 14px
}

.md-chip .md-button.md-input-action .md-icon {
    width: 14px;
    min-width: 14px;
    height: 14px;
    font-size: 14px !important;
    vertical-align: top
}

.md-chip .md-button.md-input-action .md-icon svg {
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(.25, .8, .25, 1)
}

.md-datepicker-overlay {
    opacity: 0
}

.md-datepicker.md-native label {
    top: 0 !important
}

.md-datepicker .md-date-icon {
    cursor: pointer
}

.md-datepicker input[type=date]::-webkit-calendar-picker-indicator,
.md-datepicker input[type=date]::-webkit-clear-button,
.md-datepicker input[type=date]::-webkit-inner-spin-button {
    display: none
}

@media (max-width:600px) {
    .md-datepicker-overlay {
        opacity: 1
    }
}

.md-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    overflow: hidden;
    background: rgba(0, 0, 0, .6);
    transition: .35s cubic-bezier(.4, 0, .2, 1);
    transition-property: opacity;
    will-change: opacity
}

.md-overlay.md-fixed,
body > .md-overlay {
    position: fixed
}

.md-overlay-enter,
.md-overlay-leave-active {
    opacity: 0
}

.md-datepicker-dialog {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
    display: flex;
    overflow: hidden;
    z-index: 11;
    border-radius: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
    transform-origin: top left;
    flex-shrink: 0;
    transition: opacity .2s cubic-bezier(.25, .8, .25, 1), transform .35s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform, left, top
}

.md-datepicker-dialog-leave-active {
    opacity: 0
}

.md-datepicker-dialog-enter {
    opacity: 0;
    transform: scale(.9)
}

.md-datepicker-dialog-enter .md-datepicker-body .md-datepicker-calendar {
    opacity: 0;
    transform: translate3D(0, 10%, 0)
}

.md-datepicker-header {
    min-width: 150px;
    padding: 16px
}

.md-datepicker-header .md-datepicker-year-select {
    cursor: pointer;
    opacity: .54;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 24px
}

.md-datepicker-header .md-datepicker-date-select {
    cursor: pointer;
    opacity: .54;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.2em
}

.md-datepicker-header .md-datepicker-dayname {
    display: block
}

.md-datepicker-header .md-selected {
    opacity: 1
}

.md-datepicker-body {
    width: 320px;
    position: relative;
    overflow: hidden;
    transition: width .3s cubic-bezier(.25, .8, .25, 1);
    will-change: width
}

.md-datepicker-body .md-button {
    margin: 0
}

.md-datepicker-body-header {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    pointer-events: none
}

.md-datepicker-body-header:after,
.md-datepicker-body-header:before {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 0;
    z-index: 2;
    pointer-events: none;
    content: " "
}

.md-datepicker-body-header:after {
    left: 0
}

.md-datepicker-body-header:before {
    right: 0
}

.md-datepicker-body-header .md-button {
    pointer-events: auto;
    z-index: 3
}

.md-datepicker-body-header-enter .md-button:first-child,
.md-datepicker-body-header-leave-active .md-button:first-child {
    transform: translate3d(-150%, 0, 0)
}

.md-datepicker-body-header-enter .md-button:last-child,
.md-datepicker-body-header-leave-active .md-button:last-child {
    transform: translate3d(150%, 0, 0)
}

.md-datepicker-body-content {
    overflow: hidden;
    transition: height .35s cubic-bezier(.4, 0, .2, 1);
    will-change: height
}

.md-datepicker-panel {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .35s cubic-bezier(.4, 0, .2, 1);
    transition-property: transform, opacity;
    will-change: transform, opacity
}

.md-datepicker-calendar.md-datepicker-view-enter,
.md-datepicker-calendar.md-datepicker-view-leave-active {
    transform: translate3d(0, 100%, 0)
}

.md-datepicker-calendar.md-previous .md-datepicker-month-enter {
    transform: translate3D(-100%, 0, 0)
}

.md-datepicker-calendar.md-previous .md-datepicker-month-enter .md-datepicker-month-trigger {
    transform: translate3D(-30%, 0, 0)
}

.md-datepicker-calendar.md-next .md-datepicker-month-enter,
.md-datepicker-calendar.md-previous .md-datepicker-month-leave-active {
    transform: translate3D(100%, 0, 0)
}

.md-datepicker-calendar.md-next .md-datepicker-month-enter .md-datepicker-month-trigger {
    transform: translate3D(30%, 0, 0)
}

.md-datepicker-calendar.md-next .md-datepicker-month-leave-active {
    transform: translate3D(-100%, 0, 0)
}

.md-datepicker-month {
    top: 8px;
    bottom: auto;
    flex-direction: column;
    transition: .35s cubic-bezier(.4, 0, .2, 1);
    transition-property: transform, opacity;
    will-change: transform, opacity
}

.md-datepicker-month .md-datepicker-month-trigger {
    min-height: 32px;
    margin: 0 46px 10px;
    flex: 1;
    border-radius: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform
}

.md-datepicker-week {
    display: flex;
    align-items: center
}

.md-datepicker-week span {
    flex: 1;
    font-size: 12px;
    text-align: center
}

.md-datepicker-days {
    display: flex;
    flex-wrap: wrap
}

.md-datepicker-days .md-datepicker-day,
.md-datepicker-days .md-datepicker-empty {
    margin: 1px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 14.28571%
}

.md-datepicker-days .md-datepicker-day-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 30px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    line-height: 30px;
    text-align: center
}

.md-datepicker-days .md-datepicker-selected,
.md-datepicker-days .md-datepicker-today {
    font-weight: 700
}

.md-datepicker-days .md-datepicker-disabled {
    pointer-events: none
}

.md-datepicker-month-selector {
    padding: 6px 8px 10px;
    flex-wrap: wrap;
    bottom: auto;
    transition: .35s cubic-bezier(.4, 0, .2, 1);
    transition-property: transform, opacity;
    will-change: transform, opacity
}

.md-datepicker-month-selector.md-datepicker-view-enter,
.md-datepicker-month-selector.md-datepicker-view-leave-active {
    transform: translate3d(0, -100%, 0)
}

.md-datepicker-month-selector .md-datepicker-year-trigger {
    width: 100%;
    margin: 0 0 8px;
    flex: 1 1 100%
}

.md-datepicker-month-button,
.md-datepicker-year-button {
    height: 36px;
    margin: 3px 0;
    cursor: pointer;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    line-height: 36px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase
}

.md-datepicker-month-button {
    flex: 1 1 33.3333%;
    border-radius: 2px;
    font-size: 13px
}

.md-datepicker-year-selector {
    flex-direction: column;
    overflow: auto;
    bottom: 52px;
    border-bottom: 1px solid
}

.md-datepicker-year-selector.md-datepicker-view-enter,
.md-datepicker-year-selector.md-datepicker-view-leave-active {
    transform: translate3d(0, -100%, 0)
}

.md-datepicker-year-selector .md-button {
    min-height: 36px
}

.md-datepicker-year-button {
    font-size: 16px
}

.md-datepicker-year-button.md-datepicker-selected {
    font-size: 24px
}

@media (max-width:600px) {
    .md-datepicker-dialog {
        flex-direction: column;
        top: 50% !important;
        left: 50% !important;
        transform: translate3D(-50%, -50%, 0);
        transform-origin: center center;
        position: fixed !important
    }

    .md-datepicker-dialog-enter {
        transform: translate3D(-50%, -50%, 0) scale(.9)
    }

    .md-datepicker-header {
        min-width: auto;
        padding: 16px 20px
    }

    .md-datepicker-header .md-datepicker-dayname {
        display: inline-block
    }

    .md-datepicker-body {
        width: 296px
    }

    .md-datepicker-month {
        padding: 0 6px
    }
}

.md-popover.md-rendering {
    opacity: 0;
    transition: none !important
}

.md-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    display: flex;
    transition-duration: .2s;
    z-index: 11
}

.md-dialog.md-dialog-enter-to .md-dialog-container,
.md-dialog.md-dialog-leave .md-dialog-container {
    opacity: 1;
    transform: scale(1)
}

.md-dialog.md-dialog-enter .md-dialog-container,
.md-dialog.md-dialog-leave-to .md-dialog-container {
    opacity: 0;
    transform: scale(.9)
}

.md-dialog-container {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
    min-width: 280px;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    border-radius: 2px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
    opacity: 1;
    transform-origin: center center;
    transition: opacity .15s cubic-bezier(.25, .8, .25, 1), transform .2s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform
}

.md-dialog-container.md-dialog-enter-to,
.md-dialog-container.md-dialog-leave {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.md-dialog-container.md-dialog-enter,
.md-dialog-container.md-dialog-leave-to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9)
}

.md-dialog-container .md-tabs {
    flex: 1;
    max-width: 100%
}

.md-dialog-container .md-tabs-navigation {
    padding: 0 12px
}

@media (max-width:600px) {

    .md-dialog.md-dialog-enter-to .md-dialog-fullscreen,
    .md-dialog.md-dialog-leave .md-dialog-fullscreen {
        opacity: 0;
        transform: translateY(30%)
    }

    .md-dialog.md-dialog-enter .md-dialog-fullscreen,
    .md-dialog.md-dialog-leave-to .md-dialog-fullscreen {
        opacity: 1;
        transform: translate(0)
    }

    .md-dialog-container .md-tab {
        padding: 12px
    }

    .md-dialog-fullscreen {
        width: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
        transform: none
    }

    .md-dialog-fullscreen.md-dialog-enter,
    .md-dialog-fullscreen.md-dialog-leave-to {
        opacity: 0;
        transform: translate3D(0, 30%, 0)
    }

    .md-dialog-fullscreen.md-dialog-enter-to,
    .md-dialog-fullscreen.md-dialog-leave {
        opacity: 1;
        transform: translate3D(0, 0, 0)
    }
}

.md-dialog-title {
    margin-bottom: 20px;
    padding: 24px 24px 0
}

.md-dialog-content {
    padding: 0 24px 24px;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    position: relative
}

.md-dialog-content:first-child {
    padding-top: 24px
}

.md-dialog-content p:first-child:not(:only-child) {
    margin-top: 0
}

.md-dialog-content p:last-child:not(:only-child) {
    margin-bottom: 0
}

.md-dialog-actions {
    min-height: 52px;
    padding: 8px 8px 8px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative
}

.md-dialog-actions:before {
    height: 1px;
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    content: " "
}

.md-dialog-actions .md-button {
    min-width: 64px;
    margin: 0
}

.md-dialog-actions .md-button + .md-button {
    margin-left: 8px
}

.md-divider {
    height: 1px;
    margin: 0;
    padding: 0;
    display: block;
    border: 0;
    transition: margin-left .3s cubic-bezier(.4, 0, .2, 1);
    will-change: margin-left
}

.md-divider.md-inset {
    margin-left: 72px
}

.md-drawer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    transform: translate3D(-100%, 0, 0);
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
    will-change: transform, box-shadow;
    width: 400px;
    max-width: calc(100vw - 56px);
    overflow-x: hidden;
    overflow-y: auto
}

.md-drawer.md-right {
    right: 0;
    left: auto;
    transform: translate3D(100%, 0, 0)
}

.md-drawer.md-fixed {
    position: fixed
}

.md-drawer.md-active {
    transform: translate3D(0, 0, 0);
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.md-drawer.md-temporary.md-left + .md-app-container .md-content {
    border-left: none
}

.md-drawer.md-temporary.md-right-previous + .md-app-container .md-content {
    border-right: none
}

.md-drawer.md-temporary.md-active {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.md-drawer.md-persistent:not(.md-active).md-left + .md-app-container .md-content {
    border-left: none
}

.md-drawer.md-persistent:not(.md-active).md-right-previous + .md-app-container .md-content {
    border-right: none
}

.md-drawer.md-persistent-mini {
    transform: translate3D(0, 64px, 0);
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: transform, width;
    will-change: transform, box-shadow
}

.md-drawer.md-persistent-mini.md-left {
    border-right: 1px solid
}

.md-drawer.md-persistent-mini.md-right {
    border-left: 1px solid
}

.md-drawer.md-persistent-mini.md-active.md-left + .md-app-container .md-content {
    border-left: none
}

.md-drawer.md-persistent-mini.md-active.md-right-previous + .md-app-container .md-content {
    border-right: none
}

.md-drawer.md-persistent-mini:not(.md-active) {
    width: 70px !important;
    z-index: 1;
    white-space: nowrap
}

.md-drawer.md-persistent-mini:not(.md-active) .md-toolbar {
    display: none
}

.md-drawer.md-persistent-mini:not(.md-active) .md-list-item-content {
    padding: 0 23px
}

.md-drawer.md-persistent-mini.md-active {
    position: relative;
    transform: translate3D(0, 0, 0);
    white-space: normal
}

.md-drawer .md-list-item-container {
    font-size: 14px;
    text-transform: none
}

@media (max-width:600px) {
    .md-drawer {
        width: 320px
    }

    .md-drawer.md-active {
        box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
    }
}

@media (min-width:600px) {
    .md-drawer:not(.md-temporary) ~ .md-overlay {
        background: 0 0;
        pointer-events: none
    }

    .md-drawer.md-permanent {
        position: relative;
        transform: translate3D(0, 0, 0)
    }

    .md-drawer.md-permanent-full {
        z-index: 3
    }

    .md-drawer.md-permanent-full .md-list {
        padding-top: 0
    }

    .md-drawer.md-permanent-card,
    .md-drawer.md-permanent-clipped {
        z-index: 1
    }

    .md-drawer.md-permanent-card {
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
        position: relative;
        border-radius: 2px;
        transition: .3s cubic-bezier(.4, 0, .2, 1);
        transition-property: color, background-color;
        will-change: color, background-color;
        margin: 8px;
        z-index: 1
    }
}

@media (min-width:960px) {
    .md-drawer.md-permanent-card {
        margin: 16px
    }
}

@media (min-width:1280px) {
    .md-drawer.md-permanent-card {
        margin: 24px
    }
}

.md-elevation-0 {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .14), 0 0 0 0 rgba(0, 0, 0, .12)
}

.md-elevation-1 {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)
}

.md-elevation-2 {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12)
}

.md-elevation-3 {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12)
}

.md-elevation-4 {
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12)
}

.md-elevation-5 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12)
}

.md-elevation-6 {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12)
}

.md-elevation-7 {
    box-shadow: 0 4px 5px -2px rgba(0, 0, 0, .2), 0 7px 10px 1px rgba(0, 0, 0, .14), 0 2px 16px 1px rgba(0, 0, 0, .12)
}

.md-elevation-8 {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
}

.md-elevation-9 {
    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .2), 0 9px 12px 1px rgba(0, 0, 0, .14), 0 3px 16px 2px rgba(0, 0, 0, .12)
}

.md-elevation-10 {
    box-shadow: 0 6px 6px -3px rgba(0, 0, 0, .2), 0 10px 14px 1px rgba(0, 0, 0, .14), 0 4px 18px 3px rgba(0, 0, 0, .12)
}

.md-elevation-11 {
    box-shadow: 0 6px 7px -4px rgba(0, 0, 0, .2), 0 11px 15px 1px rgba(0, 0, 0, .14), 0 4px 20px 3px rgba(0, 0, 0, .12)
}

.md-elevation-12 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12)
}

.md-elevation-13 {
    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 13px 19px 2px rgba(0, 0, 0, .14), 0 5px 24px 4px rgba(0, 0, 0, .12)
}

.md-elevation-14 {
    box-shadow: 0 7px 9px -4px rgba(0, 0, 0, .2), 0 14px 21px 2px rgba(0, 0, 0, .14), 0 5px 26px 4px rgba(0, 0, 0, .12)
}

.md-elevation-15 {
    box-shadow: 0 8px 9px -5px rgba(0, 0, 0, .2), 0 15px 22px 2px rgba(0, 0, 0, .14), 0 6px 28px 5px rgba(0, 0, 0, .12)
}

.md-elevation-16 {
    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12)
}

.md-elevation-17 {
    box-shadow: 0 8px 11px -5px rgba(0, 0, 0, .2), 0 17px 26px 2px rgba(0, 0, 0, .14), 0 6px 32px 5px rgba(0, 0, 0, .12)
}

.md-elevation-18 {
    box-shadow: 0 9px 11px -5px rgba(0, 0, 0, .2), 0 18px 28px 2px rgba(0, 0, 0, .14), 0 7px 34px 6px rgba(0, 0, 0, .12)
}

.md-elevation-19 {
    box-shadow: 0 9px 12px -6px rgba(0, 0, 0, .2), 0 19px 29px 2px rgba(0, 0, 0, .14), 0 7px 36px 6px rgba(0, 0, 0, .12)
}

.md-elevation-20 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 20px 31px 3px rgba(0, 0, 0, .14), 0 8px 38px 7px rgba(0, 0, 0, .12)
}

.md-elevation-21 {
    box-shadow: 0 10px 13px -6px rgba(0, 0, 0, .2), 0 21px 33px 3px rgba(0, 0, 0, .14), 0 8px 40px 7px rgba(0, 0, 0, .12)
}

.md-elevation-22 {
    box-shadow: 0 10px 14px -6px rgba(0, 0, 0, .2), 0 22px 35px 3px rgba(0, 0, 0, .14), 0 8px 42px 7px rgba(0, 0, 0, .12)
}

.md-elevation-23 {
    box-shadow: 0 11px 14px -7px rgba(0, 0, 0, .2), 0 23px 36px 3px rgba(0, 0, 0, .14), 0 9px 44px 8px rgba(0, 0, 0, .12)
}

.md-elevation-24 {
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12)
}

.md-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 420px;
    padding: 36px;
    margin: 0 auto;
    position: relative;
    transition: opacity .15s cubic-bezier(0, 0, .2, 1), transform .3s cubic-bezier(0, 0, .2, 1);
    will-change: transform, opacity
}

.md-empty-state.md-rounded {
    max-width: auto;
    border-radius: 50%
}

.md-empty-state.md-rounded .md-empty-state-container {
    padding: 40px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.md-empty-state .md-button {
    margin: .5em 0 0
}

.md-empty-state-enter {
    opacity: 0;
    transform: scale(.87)
}

.md-empty-state-enter .md-empty-state-container {
    opacity: 0
}

.md-empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity
}

.md-empty-state-icon {
    width: 160px;
    min-width: 160px;
    height: 160px;
    font-size: 160px !important;
    margin: 0
}

.md-empty-state-label {
    font-size: 26px;
    font-weight: 500;
    line-height: 40px
}

.md-empty-state-description {
    margin: 1em 0;
    font-size: 16px;
    line-height: 24px
}
/* Lo cambie para ver si se van las flechitas extras en chrome */
.md-menu.md-select {
    display: flex;
    flex: 1;
    overflow: hidden
}

.md-menu.md-select:not(.md-disabled) .md-icon,
.md-menu.md-select:not(.md-disabled) .md-input {
    cursor: pointer;
    outline: 0
}

.md-menu.md-select .md-input {
    flex: 1;
    min-width: 0
}

.md-menu.md-select .md-input-fake,
.md-menu.md-select select {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    border: 0
}

.md-menu-content.md-select-menu {
    z-index: 12;
    width: 100%
}

.md-menu-content.md-select-menu.md-menu-content-enter {
    transform: translate3d(0, -8px, 0) scaleY(.3)
}

.md-menu-content.md-select-menu .md-list {
    transition: opacity .3s cubic-bezier(.55, 0, .55, .2)
}

.md-menu {
    display: inline-block
}

.md-menu > .md-button {
    margin: 0
}

.md-menu-content {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    min-width: 112px;
    max-width: 280px;
    max-height: 35vh;
    display: flex;
    flex-direction: row;
    position: absolute;
    z-index: 9;
    border-radius: 2px;
    transition: transform .2s cubic-bezier(.25, .8, .25, 1), opacity .3s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform, top, left !important
}

.md-menu-content.md-shallow {
    position: fixed !important;
    top: -9999em !important;
    left: -9999em !important;
    pointer-events: none
}

.md-menu-content.md-menu-content-enter-active {
    opacity: 1;
    transform: translateZ(0)
}

.md-menu-content.md-menu-content-leave-active {
    transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
    opacity: 0
}

.md-menu-content.md-menu-content-enter.md-menu-content-top-start {
    transform-origin: bottom left;
    transform: translate3d(0, 8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-top-end {
    transform-origin: bottom right;
    transform: translate3d(0, 8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-right-start {
    transform-origin: left top;
    transform: translate3d(0, -8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-right-end {
    transform-origin: left bottom;
    transform: translate3d(0, 8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-bottom-start {
    transform-origin: top left;
    transform: translate3d(0, -8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-bottom-end {
    transform-origin: top right;
    transform: translate3d(0, -8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-left-start {
    transform-origin: right top;
    transform: translate3d(0, -8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter.md-menu-content-left-end {
    transform-origin: right bottom;
    transform: translate3d(0, 8px, 0) scaleY(.95)
}

.md-menu-content.md-menu-content-enter .md-list {
    opacity: 0
}

.md-menu-content.md-menu-content-medium {
    min-width: 168px
}

.md-menu-content.md-menu-content-big {
    min-width: 224px
}

.md-menu-content.md-menu-content-huge {
    min-width: 280px
}

.md-menu-content-container {
    flex: 1;
    overflow: auto
}

.md-menu-content-container .md-list {
    transition: opacity .3s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity;
    font-family: Roboto, sans-serif;
    text-transform: none;
    white-space: nowrap
}

.md-menu-content-container .md-list .md-list-item-container {
    height: 100%
}

@media (max-width:960px) {
    .md-menu-content-container .md-list {
        font-size: 14px
    }
}

.md-list {
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    list-style: none
}

.md-list.md-dense {
    padding: 4px 0
}

.md-list .md-divider {
    margin-top: -1px
}

.md-list .md-subheader.md-inset {
    padding-left: 72px
}

.md-list > .md-subheader:first-of-type {
    margin-top: -8px
}

.md-optgroup .md-subheader {
    text-transform: uppercase
}

.md-optgroup .md-ripple.md-list-item-content {
    padding-left: 24px
}

.md-file {
    display: flex;
    flex: 1
}

.md-file input[type=file] {
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    border: 0
}

.md-file .md-file-icon:not(.md-disabled) {
    cursor: pointer
}

.md-file .md-file-icon.md-disabled {
    pointer-events: none
}

.md-highlight-text {
    flex: 1
}

.md-highlight-text-match {
    font-weight: 500
}

.md-image {
    display: flex;
    justify-content: center;
    align-items: center
}

.md-layout {
    display: flex;
    flex-wrap: wrap
}

.md-layout .md-layout {
    flex: 1
}

.md-layout .md-layout-nowrap {
    flex-wrap: nowrap
}

.md-layout.md-centered {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.md-layout.md-gutter {
    margin-right: -20px;
    margin-left: -20px
}

.md-layout.md-gutter > .md-layout-item {
    padding-right: 20px;
    padding-left: 20px
}

@media (max-width:1903px) {
    .md-layout.md-gutter {
        margin-right: -20px;
        margin-left: -20px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 20px;
        padding-left: 20px
    }
}

@media (max-width:1280px) {
    .md-layout.md-gutter {
        margin-right: -12px;
        margin-left: -12px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 12px;
        padding-left: 12px
    }
}

@media (max-width:960px) {
    .md-layout.md-gutter {
        margin-right: -8px;
        margin-left: -8px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 8px;
        padding-left: 8px
    }
}

@media (max-width:600px) {
    .md-layout.md-gutter {
        margin-right: -4px;
        margin-left: -4px
    }

    .md-layout.md-gutter > .md-layout-item {
        padding-right: 4px;
        padding-left: 4px
    }
}

.md-layout.md-alignment-top-left {
    justify-content: flex-start;
    align-items: flex-start
}

.md-layout.md-alignment-top-center {
    justify-content: center;
    align-items: flex-start
}

.md-layout.md-alignment-top-right {
    justify-content: flex-end;
    align-items: flex-start
}

.md-layout.md-alignment-top-space-around {
    justify-content: space-around;
    align-items: flex-start
}

.md-layout.md-alignment-top-space-between {
    justify-content: space-between;
    align-items: flex-start
}

.md-layout.md-alignment-center-left {
    justify-content: flex-start;
    align-items: center
}

.md-layout.md-alignment-center,
.md-layout.md-alignment-center-center {
    justify-content: center;
    align-items: center
}

.md-layout.md-alignment-center-right {
    justify-content: flex-end;
    align-items: center
}

.md-layout.md-alignment-center-space-around {
    justify-content: space-around;
    align-items: center
}

.md-layout.md-alignment-center-space-between {
    justify-content: space-between;
    align-items: center
}

.md-layout.md-alignment-bottom-left {
    justify-content: flex-start;
    align-items: flex-end
}

.md-layout.md-alignment-bottom-center {
    justify-content: center;
    align-items: flex-end
}

.md-layout.md-alignment-bottom-right {
    justify-content: flex-end;
    align-items: flex-end
}

.md-layout.md-alignment-bottom-space-around {
    justify-content: space-around;
    align-items: flex-end
}

.md-layout.md-alignment-bottom-space-between {
    justify-content: space-between;
    align-items: flex-end
}

.md-layout.md-alignment-space-around-left {
    justify-content: flex-start;
    align-items: space-around
}

.md-layout.md-alignment-space-around-center {
    justify-content: center;
    align-items: space-around
}

.md-layout.md-alignment-space-around-right {
    justify-content: flex-end;
    align-items: space-around
}

.md-layout.md-alignment-space-around-space-around {
    justify-content: space-around;
    align-items: space-around
}

.md-layout.md-alignment-space-around-space-between {
    justify-content: space-between;
    align-items: space-around
}

.md-layout.md-alignment-space-between-left {
    justify-content: flex-start;
    align-items: space-between
}

.md-layout.md-alignment-space-between-center {
    justify-content: center;
    align-items: space-between
}

.md-layout.md-alignment-space-between-right {
    justify-content: flex-end;
    align-items: space-between
}

.md-layout.md-alignment-space-between-space-around {
    justify-content: space-around;
    align-items: space-between
}

.md-layout.md-alignment-space-between-space-between {
    justify-content: space-between;
    align-items: space-between
}

.md-layout-item {
    flex: 1 1
}

.md-layout-item.md-layout {
    margin: 0
}

.md-layout-item.md-size {
    flex: 1 1
}

.md-layout-item.md-size-5 {
    min-width: 5%;
    max-width: 5%;
    flex: 0 1 5%
}

.md-layout-item.md-size-10 {
    min-width: 10%;
    max-width: 10%;
    flex: 0 1 10%
}

.md-layout-item.md-size-15 {
    min-width: 15%;
    max-width: 15%;
    flex: 0 1 15%
}

.md-layout-item.md-size-20 {
    min-width: 20%;
    max-width: 20%;
    flex: 0 1 20%
}

.md-layout-item.md-size-25 {
    min-width: 25%;
    max-width: 25%;
    flex: 0 1 25%
}

.md-layout-item.md-size-30 {
    min-width: 30%;
    max-width: 30%;
    flex: 0 1 30%
}

.md-layout-item.md-size-35 {
    min-width: 35%;
    max-width: 35%;
    flex: 0 1 35%
}

.md-layout-item.md-size-40 {
    min-width: 40%;
    max-width: 40%;
    flex: 0 1 40%
}

.md-layout-item.md-size-45 {
    min-width: 45%;
    max-width: 45%;
    flex: 0 1 45%
}

.md-layout-item.md-size-50 {
    min-width: 50%;
    max-width: 50%;
    flex: 0 1 50%
}

.md-layout-item.md-size-55 {
    min-width: 55%;
    max-width: 55%;
    flex: 0 1 55%
}

.md-layout-item.md-size-60 {
    min-width: 60%;
    max-width: 60%;
    flex: 0 1 60%
}

.md-layout-item.md-size-65 {
    min-width: 65%;
    max-width: 65%;
    flex: 0 1 65%
}

.md-layout-item.md-size-70 {
    min-width: 70%;
    max-width: 70%;
    flex: 0 1 70%
}

.md-layout-item.md-size-75 {
    min-width: 75%;
    max-width: 75%;
    flex: 0 1 75%
}

.md-layout-item.md-size-80 {
    min-width: 80%;
    max-width: 80%;
    flex: 0 1 80%
}

.md-layout-item.md-size-85 {
    min-width: 85%;
    max-width: 85%;
    flex: 0 1 85%
}

.md-layout-item.md-size-90 {
    min-width: 90%;
    max-width: 90%;
    flex: 0 1 90%
}

.md-layout-item.md-size-95 {
    min-width: 95%;
    max-width: 95%;
    flex: 0 1 95%
}

.md-layout-item.md-size-33 {
    min-width: 33.3333%;
    max-width: 33.3333%;
    flex: 0 1 33.3333%
}

.md-layout-item.md-size-66 {
    min-width: 66.6666%;
    max-width: 66.6666%;
    flex: 0 1 66.6666%
}

.md-layout-item.md-size-100 {
    min-width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    flex: 1 1 100%
}

@media (min-width:1904px) {
    .md-layout-item.md-xlarge-size {
        flex: 1 1
    }

    .md-layout-item.md-xlarge-size-5 {
        min-width: 5%;
        max-width: 5%;
        flex: 0 1 5%
    }

    .md-layout-item.md-xlarge-size-10 {
        min-width: 10%;
        max-width: 10%;
        flex: 0 1 10%
    }

    .md-layout-item.md-xlarge-size-15 {
        min-width: 15%;
        max-width: 15%;
        flex: 0 1 15%
    }

    .md-layout-item.md-xlarge-size-20 {
        min-width: 20%;
        max-width: 20%;
        flex: 0 1 20%
    }

    .md-layout-item.md-xlarge-size-25 {
        min-width: 25%;
        max-width: 25%;
        flex: 0 1 25%
    }

    .md-layout-item.md-xlarge-size-30 {
        min-width: 30%;
        max-width: 30%;
        flex: 0 1 30%
    }

    .md-layout-item.md-xlarge-size-35 {
        min-width: 35%;
        max-width: 35%;
        flex: 0 1 35%
    }

    .md-layout-item.md-xlarge-size-40 {
        min-width: 40%;
        max-width: 40%;
        flex: 0 1 40%
    }

    .md-layout-item.md-xlarge-size-45 {
        min-width: 45%;
        max-width: 45%;
        flex: 0 1 45%
    }

    .md-layout-item.md-xlarge-size-50 {
        min-width: 50%;
        max-width: 50%;
        flex: 0 1 50%
    }

    .md-layout-item.md-xlarge-size-55 {
        min-width: 55%;
        max-width: 55%;
        flex: 0 1 55%
    }

    .md-layout-item.md-xlarge-size-60 {
        min-width: 60%;
        max-width: 60%;
        flex: 0 1 60%
    }

    .md-layout-item.md-xlarge-size-65 {
        min-width: 65%;
        max-width: 65%;
        flex: 0 1 65%
    }

    .md-layout-item.md-xlarge-size-70 {
        min-width: 70%;
        max-width: 70%;
        flex: 0 1 70%
    }

    .md-layout-item.md-xlarge-size-75 {
        min-width: 75%;
        max-width: 75%;
        flex: 0 1 75%
    }

    .md-layout-item.md-xlarge-size-80 {
        min-width: 80%;
        max-width: 80%;
        flex: 0 1 80%
    }

    .md-layout-item.md-xlarge-size-85 {
        min-width: 85%;
        max-width: 85%;
        flex: 0 1 85%
    }

    .md-layout-item.md-xlarge-size-90 {
        min-width: 90%;
        max-width: 90%;
        flex: 0 1 90%
    }

    .md-layout-item.md-xlarge-size-95 {
        min-width: 95%;
        max-width: 95%;
        flex: 0 1 95%
    }

    .md-layout-item.md-xlarge-size-33 {
        min-width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 1 33.3333%
    }

    .md-layout-item.md-xlarge-size-66 {
        min-width: 66.6666%;
        max-width: 66.6666%;
        flex: 0 1 66.6666%
    }

    .md-layout-item.md-xlarge-size-100 {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        flex: 1 1 100%
    }
}

@media (max-width:1903px) {
    .md-layout-item.md-large-size {
        flex: 1 1
    }

    .md-layout-item.md-large-size-5 {
        min-width: 5%;
        max-width: 5%;
        flex: 0 1 5%
    }

    .md-layout-item.md-large-size-10 {
        min-width: 10%;
        max-width: 10%;
        flex: 0 1 10%
    }

    .md-layout-item.md-large-size-15 {
        min-width: 15%;
        max-width: 15%;
        flex: 0 1 15%
    }

    .md-layout-item.md-large-size-20 {
        min-width: 20%;
        max-width: 20%;
        flex: 0 1 20%
    }

    .md-layout-item.md-large-size-25 {
        min-width: 25%;
        max-width: 25%;
        flex: 0 1 25%
    }

    .md-layout-item.md-large-size-30 {
        min-width: 30%;
        max-width: 30%;
        flex: 0 1 30%
    }

    .md-layout-item.md-large-size-35 {
        min-width: 35%;
        max-width: 35%;
        flex: 0 1 35%
    }

    .md-layout-item.md-large-size-40 {
        min-width: 40%;
        max-width: 40%;
        flex: 0 1 40%
    }

    .md-layout-item.md-large-size-45 {
        min-width: 45%;
        max-width: 45%;
        flex: 0 1 45%
    }

    .md-layout-item.md-large-size-50 {
        min-width: 50%;
        max-width: 50%;
        flex: 0 1 50%
    }

    .md-layout-item.md-large-size-55 {
        min-width: 55%;
        max-width: 55%;
        flex: 0 1 55%
    }

    .md-layout-item.md-large-size-60 {
        min-width: 60%;
        max-width: 60%;
        flex: 0 1 60%
    }

    .md-layout-item.md-large-size-65 {
        min-width: 65%;
        max-width: 65%;
        flex: 0 1 65%
    }

    .md-layout-item.md-large-size-70 {
        min-width: 70%;
        max-width: 70%;
        flex: 0 1 70%
    }

    .md-layout-item.md-large-size-75 {
        min-width: 75%;
        max-width: 75%;
        flex: 0 1 75%
    }

    .md-layout-item.md-large-size-80 {
        min-width: 80%;
        max-width: 80%;
        flex: 0 1 80%
    }

    .md-layout-item.md-large-size-85 {
        min-width: 85%;
        max-width: 85%;
        flex: 0 1 85%
    }

    .md-layout-item.md-large-size-90 {
        min-width: 90%;
        max-width: 90%;
        flex: 0 1 90%
    }

    .md-layout-item.md-large-size-95 {
        min-width: 95%;
        max-width: 95%;
        flex: 0 1 95%
    }

    .md-layout-item.md-large-size-33 {
        min-width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 1 33.3333%
    }

    .md-layout-item.md-large-size-66 {
        min-width: 66.6666%;
        max-width: 66.6666%;
        flex: 0 1 66.6666%
    }

    .md-layout-item.md-large-size-100 {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        flex: 1 1 100%
    }
}

@media (max-width:1280px) {
    .md-layout-item.md-medium-size {
        flex: 1 1
    }

    .md-layout-item.md-medium-size-5 {
        min-width: 5%;
        max-width: 5%;
        flex: 0 1 5%
    }

    .md-layout-item.md-medium-size-10 {
        min-width: 10%;
        max-width: 10%;
        flex: 0 1 10%
    }

    .md-layout-item.md-medium-size-15 {
        min-width: 15%;
        max-width: 15%;
        flex: 0 1 15%
    }

    .md-layout-item.md-medium-size-20 {
        min-width: 20%;
        max-width: 20%;
        flex: 0 1 20%
    }

    .md-layout-item.md-medium-size-25 {
        min-width: 25%;
        max-width: 25%;
        flex: 0 1 25%
    }

    .md-layout-item.md-medium-size-30 {
        min-width: 30%;
        max-width: 30%;
        flex: 0 1 30%
    }

    .md-layout-item.md-medium-size-35 {
        min-width: 35%;
        max-width: 35%;
        flex: 0 1 35%
    }

    .md-layout-item.md-medium-size-40 {
        min-width: 40%;
        max-width: 40%;
        flex: 0 1 40%
    }

    .md-layout-item.md-medium-size-45 {
        min-width: 45%;
        max-width: 45%;
        flex: 0 1 45%
    }

    .md-layout-item.md-medium-size-50 {
        min-width: 50%;
        max-width: 50%;
        flex: 0 1 50%
    }

    .md-layout-item.md-medium-size-55 {
        min-width: 55%;
        max-width: 55%;
        flex: 0 1 55%
    }

    .md-layout-item.md-medium-size-60 {
        min-width: 60%;
        max-width: 60%;
        flex: 0 1 60%
    }

    .md-layout-item.md-medium-size-65 {
        min-width: 65%;
        max-width: 65%;
        flex: 0 1 65%
    }

    .md-layout-item.md-medium-size-70 {
        min-width: 70%;
        max-width: 70%;
        flex: 0 1 70%
    }

    .md-layout-item.md-medium-size-75 {
        min-width: 75%;
        max-width: 75%;
        flex: 0 1 75%
    }

    .md-layout-item.md-medium-size-80 {
        min-width: 80%;
        max-width: 80%;
        flex: 0 1 80%
    }

    .md-layout-item.md-medium-size-85 {
        min-width: 85%;
        max-width: 85%;
        flex: 0 1 85%
    }

    .md-layout-item.md-medium-size-90 {
        min-width: 90%;
        max-width: 90%;
        flex: 0 1 90%
    }

    .md-layout-item.md-medium-size-95 {
        min-width: 95%;
        max-width: 95%;
        flex: 0 1 95%
    }

    .md-layout-item.md-medium-size-33 {
        min-width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 1 33.3333%
    }

    .md-layout-item.md-medium-size-66 {
        min-width: 66.6666%;
        max-width: 66.6666%;
        flex: 0 1 66.6666%
    }

    .md-layout-item.md-medium-size-100 {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        flex: 1 1 100%
    }
}

@media (max-width:960px) {
    .md-layout-item.md-small-size {
        flex: 1 1
    }

    .md-layout-item.md-small-size-5 {
        min-width: 5%;
        max-width: 5%;
        flex: 0 1 5%
    }

    .md-layout-item.md-small-size-10 {
        min-width: 10%;
        max-width: 10%;
        flex: 0 1 10%
    }

    .md-layout-item.md-small-size-15 {
        min-width: 15%;
        max-width: 15%;
        flex: 0 1 15%
    }

    .md-layout-item.md-small-size-20 {
        min-width: 20%;
        max-width: 20%;
        flex: 0 1 20%
    }

    .md-layout-item.md-small-size-25 {
        min-width: 25%;
        max-width: 25%;
        flex: 0 1 25%
    }

    .md-layout-item.md-small-size-30 {
        min-width: 30%;
        max-width: 30%;
        flex: 0 1 30%
    }

    .md-layout-item.md-small-size-35 {
        min-width: 35%;
        max-width: 35%;
        flex: 0 1 35%
    }

    .md-layout-item.md-small-size-40 {
        min-width: 40%;
        max-width: 40%;
        flex: 0 1 40%
    }

    .md-layout-item.md-small-size-45 {
        min-width: 45%;
        max-width: 45%;
        flex: 0 1 45%
    }

    .md-layout-item.md-small-size-50 {
        min-width: 50%;
        max-width: 50%;
        flex: 0 1 50%
    }

    .md-layout-item.md-small-size-55 {
        min-width: 55%;
        max-width: 55%;
        flex: 0 1 55%
    }

    .md-layout-item.md-small-size-60 {
        min-width: 60%;
        max-width: 60%;
        flex: 0 1 60%
    }

    .md-layout-item.md-small-size-65 {
        min-width: 65%;
        max-width: 65%;
        flex: 0 1 65%
    }

    .md-layout-item.md-small-size-70 {
        min-width: 70%;
        max-width: 70%;
        flex: 0 1 70%
    }

    .md-layout-item.md-small-size-75 {
        min-width: 75%;
        max-width: 75%;
        flex: 0 1 75%
    }

    .md-layout-item.md-small-size-80 {
        min-width: 80%;
        max-width: 80%;
        flex: 0 1 80%
    }

    .md-layout-item.md-small-size-85 {
        min-width: 85%;
        max-width: 85%;
        flex: 0 1 85%
    }

    .md-layout-item.md-small-size-90 {
        min-width: 90%;
        max-width: 90%;
        flex: 0 1 90%
    }

    .md-layout-item.md-small-size-95 {
        min-width: 95%;
        max-width: 95%;
        flex: 0 1 95%
    }

    .md-layout-item.md-small-size-33 {
        min-width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 1 33.3333%
    }

    .md-layout-item.md-small-size-66 {
        min-width: 66.6666%;
        max-width: 66.6666%;
        flex: 0 1 66.6666%
    }

    .md-layout-item.md-small-size-100 {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        flex: 1 1 100%
    }
}

@media (max-width:600px) {
    .md-layout-item.md-xsmall-size {
        flex: 1 1
    }

    .md-layout-item.md-xsmall-size-5 {
        min-width: 5%;
        max-width: 5%;
        flex: 0 1 5%
    }

    .md-layout-item.md-xsmall-size-10 {
        min-width: 10%;
        max-width: 10%;
        flex: 0 1 10%
    }

    .md-layout-item.md-xsmall-size-15 {
        min-width: 15%;
        max-width: 15%;
        flex: 0 1 15%
    }

    .md-layout-item.md-xsmall-size-20 {
        min-width: 20%;
        max-width: 20%;
        flex: 0 1 20%
    }

    .md-layout-item.md-xsmall-size-25 {
        min-width: 25%;
        max-width: 25%;
        flex: 0 1 25%
    }

    .md-layout-item.md-xsmall-size-30 {
        min-width: 30%;
        max-width: 30%;
        flex: 0 1 30%
    }

    .md-layout-item.md-xsmall-size-35 {
        min-width: 35%;
        max-width: 35%;
        flex: 0 1 35%
    }

    .md-layout-item.md-xsmall-size-40 {
        min-width: 40%;
        max-width: 40%;
        flex: 0 1 40%
    }

    .md-layout-item.md-xsmall-size-45 {
        min-width: 45%;
        max-width: 45%;
        flex: 0 1 45%
    }

    .md-layout-item.md-xsmall-size-50 {
        min-width: 50%;
        max-width: 50%;
        flex: 0 1 50%
    }

    .md-layout-item.md-xsmall-size-55 {
        min-width: 55%;
        max-width: 55%;
        flex: 0 1 55%
    }

    .md-layout-item.md-xsmall-size-60 {
        min-width: 60%;
        max-width: 60%;
        flex: 0 1 60%
    }

    .md-layout-item.md-xsmall-size-65 {
        min-width: 65%;
        max-width: 65%;
        flex: 0 1 65%
    }

    .md-layout-item.md-xsmall-size-70 {
        min-width: 70%;
        max-width: 70%;
        flex: 0 1 70%
    }

    .md-layout-item.md-xsmall-size-75 {
        min-width: 75%;
        max-width: 75%;
        flex: 0 1 75%
    }

    .md-layout-item.md-xsmall-size-80 {
        min-width: 80%;
        max-width: 80%;
        flex: 0 1 80%
    }

    .md-layout-item.md-xsmall-size-85 {
        min-width: 85%;
        max-width: 85%;
        flex: 0 1 85%
    }

    .md-layout-item.md-xsmall-size-90 {
        min-width: 90%;
        max-width: 90%;
        flex: 0 1 90%
    }

    .md-layout-item.md-xsmall-size-95 {
        min-width: 95%;
        max-width: 95%;
        flex: 0 1 95%
    }

    .md-layout-item.md-xsmall-size-33 {
        min-width: 33.3333%;
        max-width: 33.3333%;
        flex: 0 1 33.3333%
    }

    .md-layout-item.md-xsmall-size-66 {
        min-width: 66.6666%;
        max-width: 66.6666%;
        flex: 0 1 66.6666%
    }

    .md-layout-item.md-xsmall-size-100 {
        min-width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        flex: 1 1 100%
    }
}

.md-hide {
    display: none
}

@media (min-width:1904px) {
    .md-xlarge-hide {
        display: none
    }
}

@media (max-width:1903px) {
    .md-large-hide {
        display: none
    }
}

@media (max-width:1280px) {
    .md-medium-hide {
        display: none
    }
}

@media (max-width:960px) {
    .md-small-hide {
        display: none
    }
}

@media (max-width:600px) {
    .md-xsmall-hide {
        display: none
    }
}

.md-list-item {
    height: auto;
    position: relative;
    z-index: 2
}

.md-list-item.md-inset .md-list-item-content {
    padding-left: 72px
}

.md-list-item .md-icon {
    margin: 0;
    transition-property: color, margin-right
}

.md-list-item-container {
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    text-transform: none
}

.md-list-item-container:not(.md-list-item-default):not([disabled]) > .md-list-item-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer
}

.md-list-item-container.md-button-clean:hover {
    opacity: 1;
    text-decoration: none
}

.md-list-item-content {
    min-height: 48px;
    padding: 4px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: padding .4s cubic-bezier(.25, .8, .25, 1);
    will-change: padding
}

.md-list.md-dense .md-list-item-content {
    min-height: 40px;
    font-size: 13px
}

.md-list.md-dense .md-list-item-content > .md-avatar {
    margin-top: 0;
    margin-bottom: 0
}

.md-list.md-dense .md-list-item-content > .md-avatar:not(.md-small) {
    width: 36px;
    min-width: 36px;
    height: 36px
}

.md-list.md-dense .md-list-item-content > .md-avatar:first-child {
    margin-right: 20px
}

.md-list.md-double-line .md-list-item-content {
    min-height: 72px
}

.md-list.md-double-line.md-dense .md-list-item-content {
    min-height: 60px
}

.md-list.md-triple-line .md-list-item-content {
    min-height: 88px
}

.md-list.md-triple-line.md-dense .md-list-item-content {
    min-height: 76px
}

.md-list-item-content .md-list-action {
    margin: 0 -10px 0 0
}

.md-list-item-content .md-list-action:last-of-type {
    margin: 0 -10px 0 16px
}

.md-list.md-triple-line .md-list-item-content .md-list-action:last-of-type {
    align-self: flex-start
}

.md-list-item-content > .md-icon:first-child {
    margin-right: 32px
}

.md-list-item-content > .md-icon:last-child {
    margin-left: 16px
}

.md-list-item-content > .md-checkbox,
.md-list-item-content > .md-radio {
    margin: 0
}

.md-list-item-content > .md-checkbox:first-child,
.md-list-item-content > .md-radio:first-child {
    margin-right: 36px
}

.md-list-item-content > .md-switch {
    margin: 0
}

.md-list-item-content > .md-switch:first-child {
    margin-right: 22px
}

.md-list-item-content > .md-avatar {
    margin: 4px 0
}

.md-list-item-content > .md-avatar:first-child {
    margin-right: 16px
}

.md-list-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    line-height: 1.25em;
    white-space: nowrap
}

.md-list.md-dense .md-list-item-text {
    font-size: 13px
}

.md-list-item-text * {
    width: 100%;
    margin: 0;
    overflow: hidden;
    line-height: 1.25em;
    text-overflow: ellipsis
}

.md-list-item-text :nth-child(2),
.md-list-item-text :nth-child(3) {
    font-size: 14px
}

.md-list.md-dense .md-list-item-text * {
    font-size: 13px
}

.md-list-item-expand {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transition: border .4s cubic-bezier(.25, .8, .25, 1);
    will-change: border
}

.md-list-item-expand.md-active > .md-list-item-content > .md-list-expand-icon {
    perspective: 1000px;
    perspective-origin: 50% 50%;
    transform: rotateX(180deg)
}

.md-list-item-expand.md-active .md-list-expand {
    opacity: 1;
    transform: translate3D(0, 0, 0)
}

.md-list-item-expand .md-list-expand {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translate3D(0, -24px, 0);
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    transition-property: transform, opacity;
    will-change: transform, opacity
}

.md-list-item-expand .md-list-expand-icon {
    transition: transform .4s cubic-bezier(.25, .8, .25, 1);
    will-change: transform
}

@-webkit-keyframes b {
    0% {
        transform: translateX(0)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(.5, 0, .7, .5);
        animation-timing-function: cubic-bezier(.5, 0, .7, .5);
        transform: translateX(0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.3, .38, .55, .96);
        animation-timing-function: cubic-bezier(.3, .38, .55, .96);
        transform: translateX(83.67%)
    }

    to {
        transform: translateX(200.61%)
    }
}

@keyframes b {
    0% {
        transform: translateX(0)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(.5, 0, .7, .5);
        animation-timing-function: cubic-bezier(.5, 0, .7, .5);
        transform: translateX(0)
    }

    60% {
        -webkit-animation-timing-function: cubic-bezier(.3, .38, .55, .96);
        animation-timing-function: cubic-bezier(.3, .38, .55, .96);
        transform: translateX(83.67%)
    }

    to {
        transform: translateX(200.61%)
    }
}

@-webkit-keyframes c {
    0% {
        transform: scaleX(.08)
    }

    35% {
        -webkit-animation-timing-function: cubic-bezier(.33, .12, .79, 1);
        animation-timing-function: cubic-bezier(.33, .12, .79, 1);
        transform: scaleX(.08)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.06, .11, .6, 1);
        animation-timing-function: cubic-bezier(.06, .11, .6, 1);
        transform: scaleX(.66)
    }

    to {
        transform: scaleX(.08)
    }
}

@keyframes c {
    0% {
        transform: scaleX(.08)
    }

    35% {
        -webkit-animation-timing-function: cubic-bezier(.33, .12, .79, 1);
        animation-timing-function: cubic-bezier(.33, .12, .79, 1);
        transform: scaleX(.08)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.06, .11, .6, 1);
        animation-timing-function: cubic-bezier(.06, .11, .6, 1);
        transform: scaleX(.66)
    }

    to {
        transform: scaleX(.08)
    }
}

@-webkit-keyframes d {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        transform: translateX(0)
    }

    25% {
        -webkit-animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        transform: translateX(37.65%)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        transform: translateX(84.39%)
    }

    to {
        transform: translateX(160.28%)
    }
}

@keyframes d {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        transform: translateX(0)
    }

    25% {
        -webkit-animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        transform: translateX(37.65%)
    }

    50% {
        -webkit-animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        transform: translateX(84.39%)
    }

    to {
        transform: translateX(160.28%)
    }
}

@-webkit-keyframes e {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        transform: scaleX(.08)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        transform: scaleX(.46)
    }

    45% {
        -webkit-animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        transform: scaleX(.73)
    }

    to {
        transform: scaleX(.08)
    }
}

@keyframes e {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        animation-timing-function: cubic-bezier(.15, 0, .52, .41);
        transform: scaleX(.08)
    }

    20% {
        -webkit-animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        animation-timing-function: cubic-bezier(.31, .28, .8, .73);
        transform: scaleX(.46)
    }

    45% {
        -webkit-animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        animation-timing-function: cubic-bezier(.4, .63, .6, .9);
        transform: scaleX(.73)
    }

    to {
        transform: scaleX(.08)
    }
}

@-webkit-keyframes f {
    to {
        transform: translate3D(-8px, 0, 0)
    }
}

@keyframes f {
    to {
        transform: translate3D(-8px, 0, 0)
    }
}

.md-progress-bar {
    height: 5px;
    overflow: hidden;
    position: relative;
    transform: translateZ(0) scaleY(1);
    transform-origin: center center;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .4s cubic-bezier(.4, 0, .2, 1);
    will-change: opacity, transform
}

.md-progress-bar.md-indeterminate .md-progress-bar-track,
.md-progress-bar.md-query .md-progress-bar-track {
    left: -150%;
    -webkit-animation: b 2s infinite linear;
    animation: b 2s infinite linear
}

.md-progress-bar.md-indeterminate .md-progress-bar-track:after,
.md-progress-bar.md-query .md-progress-bar-track:after {
    -webkit-animation: c 2s infinite linear;
    animation: c 2s infinite linear
}

.md-progress-bar.md-indeterminate .md-progress-bar-fill,
.md-progress-bar.md-query .md-progress-bar-fill {
    left: -55%;
    -webkit-animation: d 2s infinite linear;
    animation: d 2s infinite linear
}

.md-progress-bar.md-indeterminate .md-progress-bar-fill:after,
.md-progress-bar.md-query .md-progress-bar-fill:after {
    -webkit-animation: e 2s infinite linear;
    animation: e 2s infinite linear
}

.md-progress-bar.md-buffer .md-progress-bar-buffer,
.md-progress-bar.md-buffer .md-progress-bar-fill,
.md-progress-bar.md-buffer .md-progress-bar-track,
.md-progress-bar.md-determinate .md-progress-bar-buffer,
.md-progress-bar.md-determinate .md-progress-bar-fill,
.md-progress-bar.md-determinate .md-progress-bar-track {
    transition: .25s cubic-bezier(.25, .8, .25, 1)
}

.md-progress-bar.md-determinate .md-progress-bar-track {
    display: none
}

.md-progress-bar.md-buffer .md-progress-bar-buffer {
    border-top: 4px dotted;
    -webkit-animation: f .25s infinite linear;
    animation: f .25s infinite linear
}

.md-progress-bar.md-query {
    transform: rotate(180deg)
}

.md-progress-bar-enter,
.md-progress-bar-leave-active {
    opacity: .5;
    transform: translateZ(0) scaleY(0)
}

.md-progress-bar-buffer,
.md-progress-bar-fill,
.md-progress-bar-track {
    transform-origin: top left
}

.md-progress-bar-buffer,
.md-progress-bar-buffer:after,
.md-progress-bar-fill,
.md-progress-bar-fill:after,
.md-progress-bar-track,
.md-progress-bar-track:after {
    width: 100%;
    height: 100%;
    position: absolute;
    will-change: transform
}

.md-progress-bar-buffer:after,
.md-progress-bar-fill:after,
.md-progress-bar-track:after {
    display: inline-block;
    left: 0;
    content: " "
}

@-webkit-keyframes g {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes g {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@-webkit-keyframes h {
    0% {
        opacity: 0;
        transform: rotate(-90deg) translateZ(0)
    }

    20% {
        opacity: 1
    }

    to {
        transform: rotate(270deg) translateZ(0)
    }
}

@keyframes h {
    0% {
        opacity: 0;
        transform: rotate(-90deg) translateZ(0)
    }

    20% {
        opacity: 1
    }

    to {
        transform: rotate(270deg) translateZ(0)
    }
}

@-webkit-keyframes i {
    0% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(0)
    }

    12.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(0)
    }

    12.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(72.5deg)
    }

    25% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(72.5deg)
    }

    25.1% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(270deg)
    }

    37.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(270deg)
    }

    37.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(161.5deg)
    }

    50% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(161.5deg)
    }

    50.01% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(180deg)
    }

    62.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(180deg)
    }

    62.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(251.5deg)
    }

    75% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(251.5deg)
    }

    75.01% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(90deg)
    }

    87.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(90deg)
    }

    87.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(341.5deg)
    }

    to {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(341.5deg)
    }
}

@keyframes i {
    0% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(0)
    }

    12.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(0)
    }

    12.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(72.5deg)
    }

    25% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(72.5deg)
    }

    25.1% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(270deg)
    }

    37.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(270deg)
    }

    37.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(161.5deg)
    }

    50% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(161.5deg)
    }

    50.01% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(180deg)
    }

    62.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(180deg)
    }

    62.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(251.5deg)
    }

    75% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(251.5deg)
    }

    75.01% {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotate(90deg)
    }

    87.5% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotate(90deg)
    }

    87.51% {
        stroke-dashoffset: var(--md-progress-spinner-end-value);
        transform: rotateX(180deg) rotate(341.5deg)
    }

    to {
        stroke-dashoffset: var(--md-progress-spinner-start-value);
        transform: rotateX(180deg) rotate(341.5deg)
    }
}

.md-progress-spinner {
    display: inline-flex;
    position: relative
}

.md-progress-spinner.md-indeterminate {
    -webkit-animation: g 2s linear infinite;
    animation: g 2s linear infinite
}

.md-progress-spinner.md-indeterminate.md-progress-spinner-enter .md-progress-spinner-draw,
.md-progress-spinner.md-indeterminate.md-progress-spinner-leave-to .md-progress-spinner-draw {
    opacity: 0;
    transform: scale(.1)
}

.md-progress-spinner.md-indeterminate.md-progress-spinner-enter-active,
.md-progress-spinner.md-indeterminate.md-progress-spinner-leave-active {
    transition-duration: .4s;
    -webkit-animation: none;
    animation: none
}

.md-progress-spinner.md-indeterminate .md-progress-spinner-circle {
    -webkit-animation: 4s infinite cubic-bezier(.25, .8, .25, 1);
    animation: 4s infinite cubic-bezier(.25, .8, .25, 1);
    -webkit-animation-name: i;
    animation-name: i
}

.md-progress-spinner.md-determinate.md-progress-spinner-enter-active {
    transition-duration: 2s
}

.md-progress-spinner.md-determinate.md-progress-spinner-enter-active .md-progress-spinner-draw {
    -webkit-animation: h 1.98s cubic-bezier(.25, .8, .25, 1) forwards;
    animation: h 1.98s cubic-bezier(.25, .8, .25, 1) forwards
}

.md-progress-spinner.md-determinate.md-progress-spinner-leave-active {
    transition-duration: 2s
}

.md-progress-spinner.md-determinate.md-progress-spinner-leave-active .md-progress-spinner-draw {
    animation: h reverse 1.98s cubic-bezier(.25, .8, .25, 1) forwards
}

.md-progress-spinner.md-determinate .md-progress-spinner-draw {
    transition: none
}

.md-progress-spinner-draw {
    overflow: visible;
    transform: scale(1) rotate(-90deg);
    transform-origin: center;
    transition: .4s cubic-bezier(.25, .8, .25, 1);
    will-change: opacity, transform
}

.md-progress-spinner-circle {
    fill: none;
    transform-origin: center;
    transition: stroke-dashoffset .25s cubic-bezier(.25, .8, .25, 1);
    will-change: stroke-dashoffset, stroke-dasharray, stroke-width, animation-name, r
}

.md-radio {
    width: auto;
    margin: 16px 16px 16px 0;
    display: inline-flex;
    position: relative
}

.md-radio:not(.md-disabled),
.md-radio:not(.md-disabled) .md-radio-label {
    cursor: pointer
}

.md-radio .md-radio-container {
    width: 20px;
    min-width: 20px;
    height: 20px;
    position: relative;
    border: 2px solid transparent;
    border-radius: 50%;
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-radio .md-radio-container:focus {
    outline: 0
}

.md-radio .md-radio-container:after,
.md-radio .md-radio-container:before {
    position: absolute;
    transition: .4s cubic-bezier(.55, 0, .55, .2);
    content: " "
}

.md-radio .md-radio-container:before {
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    z-index: 6;
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.md-radio .md-radio-container:after {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 50%;
    opacity: 0;
    transform: scale3D(.38, .38, 1);
    content: " "
}

.md-radio .md-radio-container .md-ripple {
    width: 48px !important;
    height: 48px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.md-radio .md-radio-container input {
    position: absolute;
    left: -999em
}

.md-radio .md-radio-label {
    height: 20px;
    padding-left: 16px;
    position: relative;
    line-height: 20px
}

.md-radio.md-checked .md-radio-container:after {
    opacity: 1;
    transform: scale3D(1, 1, 1);
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-radio.md-required label:after {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translateX(calc(100% + 2px));
    content: "*";
    line-height: 1em;
    vertical-align: top
}

.md-snackbar {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
    min-width: 288px;
    max-width: 568px;
    min-height: 48px;
    max-height: 80px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 14;
    border-radius: 2px;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
    will-change: background-color, color, opacity, transform
}

.md-snackbar.md-position-center {
    margin: 0 auto;
    right: 0;
    bottom: 0;
    left: 0
}

.md-snackbar.md-position-center.md-snackbar-enter,
.md-snackbar.md-position-center.md-snackbar-leave-active {
    transform: translate3D(0, calc(100% + 8px), 0)
}

.md-snackbar.md-position-left {
    bottom: 24px;
    left: 24px
}

.md-snackbar.md-position-left.md-snackbar-enter,
.md-snackbar.md-position-left.md-snackbar-leave-active {
    transform: translate3D(0, calc(100% + 32px), 0)
}

.md-snackbar-enter,
.md-snackbar-enter .md-snackbar-content,
.md-snackbar-leave-active,
.md-snackbar-leave-active .md-snackbar-content {
    opacity: 0
}

.md-snackbar-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity .38s cubic-bezier(.55, 0, .55, .2)
}

.md-snackbar-content .md-button {
    min-width: 0;
    margin: -8px -8px -8px 36px
}

.md-snackbar-content .md-button + .md-button {
    margin-left: 16px
}

@media (max-width:600px) {
    .md-snackbar {
        left: 0;
        transform: none;
        border-radius: 0
    }

    .md-snackbar-content .md-button {
        margin-left: 12px
    }
}

.md-speed-dial {
    display: inline-flex;
    flex-direction: column
}

.md-speed-dial.md-top-left,
.md-speed-dial.md-top-right {
    position: absolute;
    top: 24px
}

.md-speed-dial.md-bottom-left,
.md-speed-dial.md-bottom-right {
    position: absolute;
    bottom: 24px
}

.md-speed-dial.md-bottom-center,
.md-speed-dial.md-top-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.md-speed-dial.md-top-center {
    top: 24px
}

.md-speed-dial.md-bottom-center {
    bottom: 24px
}

.md-speed-dial.md-bottom-right,
.md-speed-dial.md-top-right {
    right: 24px
}

.md-speed-dial.md-bottom-left,
.md-speed-dial.md-top-left {
    left: 24px
}

.md-speed-dial.md-fixed {
    position: fixed
}

.md-speed-dial.md-direction-top.md-effect-fling .md-speed-dial-content .md-button {
    transform: translate3d(0, 50%, 0) scale(.8)
}

.md-speed-dial.md-direction-top .md-speed-dial-target {
    order: 2;
    margin-bottom: 0 !important
}

.md-speed-dial.md-direction-top .md-speed-dial-content {
    order: 1
}

.md-speed-dial.md-direction-top .md-speed-dial-content .md-button:first-child {
    margin-top: 0
}

.md-speed-dial.md-direction-bottom.md-effect-fling .md-speed-dial-content .md-button {
    transform: translate3d(0, -50%, 0) scale(.8)
}

.md-speed-dial.md-direction-bottom .md-speed-dial-target {
    order: 1;
    margin-top: 0 !important
}

.md-speed-dial.md-direction-bottom .md-speed-dial-content {
    order: 2
}

.md-speed-dial.md-direction-bottom .md-speed-dial-content .md-button:last-child {
    margin-bottom: 0
}

.md-speed-dial.md-effect-scale .md-speed-dial-content .md-button {
    transform: scale(.3)
}

.md-speed-dial.md-active .md-morph-initial,
.md-speed-dial.md-with-hover:hover .md-morph-initial {
    opacity: 0;
    transform: translate3D(-50%, -50%, 0) rotate(90deg) scale(.7)
}

.md-speed-dial.md-active .md-morph-final,
.md-speed-dial.md-with-hover:hover .md-morph-final {
    opacity: 1;
    transform: translate3D(-50%, -50%, 0) rotate(0) scale(1)
}

.md-speed-dial.md-active .md-speed-dial-content .md-button,
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button {
    pointer-events: auto;
    opacity: 1;
    transform: translateZ(0) scale(1) !important;
    transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.25, .8, .25, 1)
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="0"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="0"] {
    transition-delay: 0s
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="1"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="1"] {
    transition-delay: .1s
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="2"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="2"] {
    transition-delay: .2s
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="3"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="3"] {
    transition-delay: .3s
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="4"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="4"] {
    transition-delay: .4s
}

.md-speed-dial.md-active .md-speed-dial-content .md-button[md-button-index="5"],
.md-speed-dial.md-with-hover:hover .md-speed-dial-content .md-button[md-button-index="5"] {
    transition-delay: .5s
}

.md-speed-dial .md-button {
    margin: 6px 0
}

.md-speed-dial .md-speed-dial-content .md-button {
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform 0s cubic-bezier(.4, 0, .2, 1) .3s;
    will-change: opacity, transform
}

.md-speed-dial .md-morph-final,
.md-speed-dial .md-morph-initial {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3D(-50%, -50%, 0);
    transition: .3s cubic-bezier(.25, .8, .25, 1);
    transition-property: opacity, transform;
    will-change: opacity, transform
}

.md-speed-dial .md-morph-final {
    opacity: 0;
    transform: translate3D(-50%, -50%, 0) scale(.7) rotate(-90deg)
}

.md-speed-dial-target {
    z-index: 1
}

.md-speed-dial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2
}

.md-speed-dial-content,
.md-steppers {
    transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.md-steppers {
    transition-property: color, background-color;
    will-change: color, background-color
}

.md-steppers.md-no-transition * {
    transition: none !important
}

.md-steppers.md-dynamic-height .md-steppers-wrapper {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    will-change: height
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header {
    height: 104px
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header:first-of-type .md-stepper-icon:before,
.md-steppers.md-horizontal.md-alternative .md-stepper-header:first-of-type .md-stepper-number:before,
.md-steppers.md-horizontal.md-alternative .md-stepper-header:last-of-type .md-stepper-icon:after,
.md-steppers.md-horizontal.md-alternative .md-stepper-header:last-of-type .md-stepper-number:after {
    content: none
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-ripple {
    justify-content: center
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-button-content {
    padding-top: 16px;
    flex-direction: column
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-button-content:after,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-button-content:before {
    content: none
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-text {
    height: 32px;
    justify-content: flex-start;
    text-align: center
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-icon,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-number {
    margin: 0 8px 8px;
    position: relative
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-icon:after,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-icon:before,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-number:after,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-number:before {
    width: 9999%;
    height: 1px;
    position: absolute;
    top: 50%;
    z-index: 2;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    will-change: background-color;
    content: " "
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-icon:after,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-number:after {
    left: calc(100% + 8px)
}

.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-icon:before,
.md-steppers.md-horizontal.md-alternative .md-stepper-header .md-stepper-number:before {
    right: 32px
}

.md-steppers.md-vertical .md-stepper-header {
    height: 56px
}

.md-steppers.md-vertical .md-stepper-header .md-ripple {
    padding: 0 24px 0 16px
}

.md-steppers.md-vertical .md-steppers-container {
    display: block
}

.md-steppers.md-vertical .md-button-content:after,
.md-steppers.md-vertical .md-button-content:before {
    content: none
}

.md-steppers.md-vertical .md-stepper-icon,
.md-steppers.md-vertical .md-stepper-number {
    margin-right: 12px
}

.md-steppers.md-vertical .md-stepper {
    flex: none;
    padding: 0;
    position: relative
}

.md-steppers.md-vertical .md-stepper:last-of-type:after {
    content: none
}

.md-steppers.md-vertical .md-stepper:after {
    width: 1px;
    position: absolute;
    top: 48px;
    bottom: -8px;
    left: 36px;
    z-index: 2;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    will-change: background-color;
    content: " "
}

.md-steppers-navigation {
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    display: flex
}

.md-steppers-navigation .md-stepper-header {
    width: auto
}

.md-stepper-header {
    width: 100%;
    height: 72px;
    margin: 0;
    flex: 1;
    border-radius: 0;
    font-weight: 400;
    text-align: left;
    text-transform: none
}

.md-stepper-header:first-of-type .md-button-content:before,
.md-stepper-header:last-of-type .md-button-content:after {
    content: none
}

.md-stepper-header.md-active,
.md-stepper-header.md-error {
    font-weight: 500
}

.md-stepper-header .md-ripple {
    padding: 0 16px;
    justify-content: flex-start
}

.md-stepper-header .md-button-content {
    padding: 0 8px;
    display: flex;
    align-items: center;
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
    will-change: color
}

.md-stepper-header .md-button-content:after,
.md-stepper-header .md-button-content:before {
    height: 1px;
    position: absolute;
    top: 50%;
    transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
    will-change: background-color;
    content: " "
}

.md-stepper-header .md-button-content:after {
    width: 9999%;
    left: 100%
}

.md-stepper-header .md-button-content:before {
    width: 16px;
    left: -16px
}

.md-stepper-header .md-button-content svg {
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: color, fill;
    will-change: color, fill
}

.md-stepper-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 16px;
    white-space: nowrap
}

.md-stepper-icon,
.md-stepper-number {
    margin-right: 8px;
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
    will-change: color
}

.md-stepper-number {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: color, background-color;
    will-change: color, background-color;
    font-size: 12px;
    line-height: 24px;
    text-align: center
}

.md-stepper-done {
    width: 20px;
    height: 20px;
    transform: translateY(-1px)
}

.md-stepper-editable {
    width: 14px;
    height: 14px;
    transform: translateY(-1px)
}

.md-stepper-description,
.md-stepper-error {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.md-stepper-description {
    opacity: .54
}

.md-steppers-wrapper {
    overflow: hidden;
    transition: none;
    will-change: height
}

.md-steppers-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform
}

.md-stepper {
    width: 100%;
    flex: 1 0 100%;
    padding: 16px 24px
}

@media (max-width:960px) {
    .md-stepper {
        padding: 8px 16px
    }
}

.md-steppers.md-vertical .md-stepper-content {
    padding: 0 24px 0 60px;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translate3D(0, -20px, 0);
    transition: .35s cubic-bezier(.25, .8, .25, 1);
    transition-property: opacity, transform, height, padding-bottom;
    will-change: opacity, transform, height, padding-bottom
}

.md-steppers.md-vertical .md-stepper-content.md-active {
    height: auto;
    padding-bottom: 40px;
    opacity: 1;
    transform: translate3D(0, 0, 0)
}

.md-subheader {
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    font-size: 14px;
    font-weight: 500
}

.md-switch {
    width: auto;
    margin: 16px 16px 16px 0;
    display: inline-flex;
    position: relative
}

.md-switch:not(.md-disabled),
.md-switch:not(.md-disabled) .md-switch-label {
    cursor: pointer
}

.md-switch .md-switch-container {
    width: 34px;
    min-width: 34px;
    height: 14px;
    margin: 3px 0;
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 14px;
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-switch .md-switch-thumb {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 50%;
    transition: .4s cubic-bezier(.25, .8, .25, 1)
}

.md-switch .md-switch-thumb:before {
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
    content: " "
}

.md-switch .md-switch-thumb .md-ripple {
    width: 48px !important;
    height: 48px !important;
    top: 50% !important;
    left: 50% !important;
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%
}

.md-switch .md-switch-thumb input {
    position: absolute;
    left: -999em
}

.md-switch .md-switch-label {
    height: 20px;
    padding-left: 16px;
    position: relative;
    line-height: 20px
}

.md-switch.md-checked .md-switch-thumb {
    transform: translate3d(15px, 0, 0)
}

.md-switch.md-required label:after {
    position: absolute;
    top: 2px;
    right: 0;
    transform: translateX(calc(100% + 2px));
    content: "*";
    line-height: 1em;
    vertical-align: top
}

.md-table {
    display: flex;
    flex-flow: column wrap;
    overflow-x: hidden
}

.md-table .md-table-fixed-header {
    position: relative
}

.md-table .md-table-fixed-header .md-table-fixed-header-container {
    flex: 1;
    overflow-x: auto
}

.md-table .md-table-fixed-header .md-table-fixed-header-container::-webkit-scrollbar,
.md-table .md-table-fixed-header .md-table-fixed-header-container::-webkit-scrollbar-button,
.md-table .md-table-fixed-header .md-table-fixed-header-container::-webkit-scrollbar-thumb {
    display: none
}

.md-table .md-table-fixed-header-active {
    border-bottom: 1px solid
}

.md-table .md-table-content {
    flex: 1;
    overflow-x: auto;
    transition: height .3s cubic-bezier(.4, 0, .2, 1)
}

.md-table .md-table-empty {
    display: flex;
    align-items: center;
    justify-content: center
}

.md-table table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden
}

.md-table-head {
    padding: 0;
    position: relative;
    font-size: 12px;
    line-height: 16px;
    text-align: left
}

.md-table-head:last-child:not(:first-child) .md-table-head-label {
    padding-right: 24px
}

.md-table-head.md-numeric {
    text-align: right
}

.md-table-head.md-sortable:first-of-type .md-table-sortable-icon,
.md-table-head.md-table-cell-selection + .md-sortable .md-table-sortable-icon {
    right: 8px;
    left: auto
}

.md-table-head .md-icon {
    width: 16px;
    height: 16px;
    font-size: 16px
}

.md-table-head .md-icon:not(.md-sortable-icon) {
    margin: 0 4px
}

.md-table-head .md-icon:first-child {
    margin-left: 0
}

.md-table-head .md-icon:last-child {
    margin-right: 0
}

.md-sortable {
    cursor: pointer
}

.md-sortable.md-sorted .md-table-sortable-icon,
.md-sortable:hover .md-table-sortable-icon {
    opacity: 1
}

.md-sortable.md-sorted-desc .md-table-sortable-icon {
    transform: translateY(-50%) rotate(180deg)
}

.md-table-head-container {
    height: 56px;
    padding: 14px 0
}

.md-table-head-container,
.md-table-head-label {
    overflow: visible;
    /*text-overflow: ellipsis;*/
    white-space: nowrap
}

.md-table-head-label {
    height: 28px;
    padding-right: 32px;
    padding-left: 24px;
    display: inline-block;
    position: relative;
    line-height: 28px
}

.md-table-sortable-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transform: translateY(-50%);
    opacity: 0;
    color: rgba(0, 0, 0, .38)
}

.md-table-alternate-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    will-change: opacity, transform
}

.md-table-alternate-header-enter,
.md-table-alternate-header-leave-active {
    opacity: 0;
    transform: translate3d(0, -100%, 0)
}

.md-table-alternate-header-enter-active {
    transition: .3s cubic-bezier(.4, 0, .2, 1)
}

.md-table-alternate-header-leave-active {
    transition: .2s cubic-bezier(.4, 0, 1, 1)
}

.md-table-row {
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: background-color, font-weight;
    will-change: background-color, font-weight
}

.md-table-row.md-has-selection {
    cursor: pointer
}

.md-table-row.md-selected-single {
    font-weight: 500
}

tbody .md-table-row td {
    border-top: 1px solid
}

.md-table-cell-selection {
    width: 66px
}

.md-table-cell-selection + td .md-table-cell-container,
.md-table-cell-selection + th .md-table-head-label {
    padding-left: 0
}

.md-table-cell-selection .md-table-cell-container,
.md-table-cell-selection .md-table-cell-label,
.md-table-cell-selection .md-table-head-container,
.md-table-cell-selection .md-table-head-label {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible
}

.md-table-cell-selection .md-checkbox {
    margin: 0
}

.md-table-cell-selection .md-checkbox .md-checkbox-container {
    width: 18px;
    min-width: 18px;
    height: 18px
}

.md-table-cell-selection .md-checkbox .md-checkbox-container:after {
    top: -1px;
    left: 4px
}

.md-table-toolbar {
    padding-left: 24px
}

.md-table-toolbar .md-title {
    flex: 1;
    font-size: 20px
}

.md-toolbar,
.md-toolbar-row {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    align-content: center;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    transition-property: opacity, background-color, box-shadow, transform, color, min-height;
    will-change: opacity, background-color, box-shadow, transform, color, min-height
}

.md-toolbar {
    padding: 0 16px;
    flex-flow: row wrap;
    position: relative;
    z-index: 2
}

.md-toolbar.md-dense {
    min-height: 48px
}

.md-toolbar.md-large .md-toolbar-row,
.md-toolbar.md-medium .md-toolbar-row {
    min-height: 64px
}

.md-toolbar.md-medium {
    min-height: 88px
}

.md-toolbar.md-large {
    min-height: 128px;
    align-content: inherit
}

.md-toolbar.md-large.md-dense {
    min-height: 96px
}

.md-toolbar.md-large.md-dense .md-toolbar-row + .md-toolbar-row {
    min-height: 32px
}

.md-toolbar .md-toolbar-offset {
    margin-left: 56px
}

.md-toolbar .md-button,
.md-toolbar .md-icon {
    z-index: 1
}

.md-toolbar .md-button ~ .md-title,
.md-toolbar .md-icon ~ .md-title {
    margin-left: 24px
}

.md-toolbar .md-button:last-child {
    margin-right: 0
}

.md-toolbar .md-button:first-child {
    margin-left: 0
}

.md-toolbar .md-display-1,
.md-toolbar .md-display-2,
.md-toolbar .md-title {
    margin: 0;
    margin-left: 8px;
    overflow: hidden;
    font-weight: 400;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top
}

.md-toolbar .md-display-1 {
    padding: 12px 0
}

.md-toolbar .md-field {
    margin-top: 2px;
    margin-bottom: 14px;
    padding-top: 16px
}

.md-toolbar-row {
    align-self: flex-start
}

.md-toolbar-section-end,
.md-toolbar-section-start {
    display: flex;
    align-items: center;
    flex: 1
}

.md-toolbar-section-start {
    justify-content: flex-start;
    order: 0
}

.md-toolbar-section-end {
    justify-content: flex-end;
    order: 10
}

@media (max-width:960px) {

    .md-toolbar,
    .md-toolbar-row {
        min-height: 48px
    }

    .md-toolbar {
        padding: 0 8px
    }

    .md-toolbar .md-toolbar-offset {
        margin-left: 48px
    }

    .md-toolbar .md-button ~ .md-title,
    .md-toolbar .md-icon ~ .md-title {
        margin-left: 16px
    }
}

@media (max-width:600px) {

    .md-toolbar,
    .md-toolbar-row {
        min-height: 56px
    }
}

.md-table-empty-state {
    padding-left: 24px
}

.md-table-cell {
    height: 48px;
    position: relative;
    transition: .3s cubic-bezier(.4, 0, .2, 1);
    font-size: 13px;
    line-height: 18px
}

.md-table-cell.md-numeric {
    text-align: right
}

.md-table-cell:last-child .md-table-cell-container {
    padding-right: 24px
}

.md-table-cell-container {
    padding: 6px 32px 6px 24px
}

.md-table-pagination {
    height: 56px;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid;
    font-size: 12px
}

.md-table-pagination .md-table-pagination-previous {
    margin-right: 2px;
    margin-left: 18px
}

.md-table-pagination .md-field {
    width: 48px;
    min-width: 36px;
    margin: -16px 24px 0 32px
}

.md-table-pagination .md-field:after,
.md-table-pagination .md-field:before {
    display: none
}

.md-table-pagination .md-field .md-select-value {
    font-size: 13px
}

.md-menu-content.md-pagination-select {
    max-width: 82px;
    min-width: 56px;
    margin-top: 5px
}

.md-tabs {
    display: flex;
    flex-direction: column
}

.md-tabs.md-no-transition * {
    transition: none !important
}

.md-tabs.md-dynamic-height .md-tabs-content {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
    will-change: height
}

.md-tabs.md-transparent .md-tabs-content,
.md-tabs.md-transparent .md-tabs-navigation {
    background-color: transparent !important
}

.md-tabs.md-dynamic-height .md-tabs-content {
    transition: height .35s cubic-bezier(.25, .8, .25, 1)
}

.md-tabs.md-alignment-left .md-tabs-navigation {
    justify-content: flex-start
}

.md-tabs.md-alignment-right .md-tabs-navigation {
    justify-content: flex-end
}

.md-tabs.md-alignment-centered .md-tabs-navigation,
.md-tabs.md-alignment-fixed .md-tabs-navigation {
    justify-content: center
}

.md-tabs.md-alignment-fixed .md-tabs-navigation .md-button {
    max-width: 264px;
    min-width: 160px;
    flex: 1
}

.md-toolbar .md-tabs {
    padding-left: 48px
}

.md-tabs-navigation {
    display: flex;
    position: relative
}

.md-tabs-navigation .md-button {
    max-width: 264px;
    min-width: 72px;
    height: 48px;
    margin: 0;
    cursor: pointer;
    border-radius: 0;
    font-size: 13px
}

.md-tabs-navigation .md-button-content {
    position: static
}

.md-tabs-navigation .md-icon-label {
    height: 72px
}

.md-tabs-navigation .md-icon-label .md-button-content {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.md-tabs-navigation .md-icon-label .md-tab-icon + .md-tab-label {
    margin-top: 10px
}

.md-tabs-navigation .md-ripple {
    padding: 0 24px
}

.md-tabs-indicator {
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateZ(0);
    will-change: left, right
}

.md-tabs-indicator.md-tabs-indicator-left {
    transition: left .3s cubic-bezier(.4, 0, .2, 1), right .35s cubic-bezier(.4, 0, .2, 1)
}

.md-tabs-indicator.md-tabs-indicator-right {
    transition: right .3s cubic-bezier(.4, 0, .2, 1), left .35s cubic-bezier(.4, 0, .2, 1)
}

.md-tabs-content {
    overflow: hidden;
    transition: none;
    will-change: height
}

.md-tabs-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform
}

.md-tab {
    width: 100%;
    flex: 1 0 100%;
    padding: 16px
}

@media (max-width:960px) {
    .md-tabs.md-alignment-fixed .md-tabs-navigation .md-button {
        min-width: 72px
    }

    .md-toolbar .md-tabs {
        margin: 0 -8px;
        padding-left: 0
    }

    .md-tabs-navigation .md-ripple {
        padding: 0 12px
    }

    .md-tab {
        padding: 8px
    }
}

.md-tooltip {
    height: 22px;
    padding: 0 8px;
    position: fixed;
    z-index: 12;
    pointer-events: none;
    border-radius: 2px;
    transition: .15s cubic-bezier(0, 0, .2, 1);
    transition-property: opacity, transform;
    will-change: opacity, transform, top, left !important;
    font-size: 10px;
    line-height: 22px;
    text-transform: none;
    white-space: nowrap
}

.md-tooltip.md-tooltip-leave-active {
    transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.md-tooltip.md-tooltip-enter,
.md-tooltip.md-tooltip-leave-active {
    opacity: 0
}

.md-tooltip.md-tooltip-enter.md-tooltip-top,
.md-tooltip.md-tooltip-leave-active.md-tooltip-top {
    transform: translate3d(0, 4px, 0) scale(.95)
}

.md-tooltip.md-tooltip-enter.md-tooltip-right,
.md-tooltip.md-tooltip-leave-active.md-tooltip-right {
    transform: translate3d(-4px, 0, 0) scale(.95)
}

.md-tooltip.md-tooltip-enter.md-tooltip-bottom,
.md-tooltip.md-tooltip-leave-active.md-tooltip-bottom {
    transform: translate3d(0, -4px, 0) scale(.95)
}

.md-tooltip.md-tooltip-enter.md-tooltip-left,
.md-tooltip.md-tooltip-leave-active.md-tooltip-left {
    transform: translate3d(4px, 0, 0) scale(.95)
}

@media (max-width:960px) {
    .md-tooltip {
        height: 32px;
        font-size: 14px;
        line-height: 32px
    }
}

:root {
    --md-theme-default-primary: #EBAD14;
    --md-theme-default-accent: #3E4B53;
    --md-theme-default-theme: light;
    --md-theme-default-text-primary-on-background: #3E4B53
}

a:not(.md-button) {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

a:not(.md-button):hover {
    color: rgba(68, 138, 255, .8);
    color: var(--md-theme-default-primary-on-background, rgba(68, 138, 255, .8))
}

a:not(.md-button).md-accent {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

a:not(.md-button).md-accent:hover {
    color: rgba(255, 82, 82, .8);
    color: var(--md-theme-default-accent-on-background, rgba(255, 82, 82, .8))
}

html {
    background-color: #fafafa;
    background-color: var(--md-theme-default-background-variant, #fafafa);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background-variant, rgba(0, 0, 0, .87))
}

.md-caption,
.md-display-1,
.md-display-2,
.md-display-3,
.md-display-4 {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background-variant, rgba(0, 0, 0, .54))
}

.md-scrollbar::-webkit-scrollbar-corner,
.md-scrollbar::-webkit-scrollbar-track {
    background: #e1e1e1;
    background: var(--md-theme-default-scrollbar-background-on-background-variant, #e1e1e1)
}

.md-scrollbar::-webkit-scrollbar-thumb {
    background: #757575;
    background: var(--md-theme-default-scrollbar-on-background-variant, #757575)
}

.md-app:not(.md-overlap) {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-list.md-autocomplete-items .md-highlight-text-match {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-list.md-autocomplete-loading {
    background-color: rgba(255, 255, 255, .54);
    background-color: var(--md-theme-default-background, rgba(255, 255, 255, .54))
}

.md-autocomplete.md-autocomplete-box {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-autocomplete.md-autocomplete-box.md-focused label {
    color: rgba(0, 0, 0, .38);
    color: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38))
}

.md-toolbar .md-autocomplete.md-autocomplete-box {
    background-color: rgba(255, 255, 255, .12);
    background-color: var(--md-theme-default-background, rgba(255, 255, 255, .12))
}

.md-toolbar .md-autocomplete.md-autocomplete-box input,
.md-toolbar .md-autocomplete.md-autocomplete-box label {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff);
    -webkit-text-fill-color: #fff;
    -webkit-text-fill-color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar .md-autocomplete.md-autocomplete-box svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar .md-autocomplete.md-autocomplete-box.md-focused {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-toolbar .md-autocomplete.md-autocomplete-box.md-focused input,
.md-toolbar .md-autocomplete.md-autocomplete-box.md-focused label {
    color: rgba(0, 0, 0, .38);
    color: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38));
    -webkit-text-fill-color: rgba(0, 0, 0, .38);
    -webkit-text-fill-color: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38))
}

.md-toolbar .md-autocomplete.md-autocomplete-box.md-focused svg {
    fill: rgba(0, 0, 0, .38);
    fill: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38))
}

.md-autocomplete-box-content:after {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    border-bottom-color: rgba(0, 0, 0, .12);
    border-bottom-color: var(--md-theme-default-divider, rgba(0, 0, 0, .12))
}

.md-avatar.md-avatar-icon {
    background-color: rgba(0, 0, 0, .38);
    background-color: var(--md-theme-default-icon-disabled, rgba(0, 0, 0, .38));
    color: #fff;
    color: var(--md-theme-default-text-primary-on-icon-disabled, #fff)
}

.md-avatar.md-avatar-icon .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-icon-disabled, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-icon-disabled, #fff)
}

.md-avatar.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-avatar.md-primary.md-avatar-icon {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-avatar.md-primary.md-avatar-icon .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-avatar.md-accent {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-avatar.md-accent.md-avatar-icon {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-avatar.md-accent.md-avatar-icon .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-bottom-bar.md-type-fixed {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-icon {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-bottom-bar.md-type-fixed .md-bottom-bar-item.md-active .md-icon svg {
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-bottom-bar.md-type-shift {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .7))
}

.md-bottom-bar.md-type-shift > .md-ripple .md-ripple-wave {
    background-color: #116aff;
    background-color: var(--md-theme-default-primary-on-primary, #116aff)
}

.md-bottom-bar.md-type-shift .md-icon {
    color: #fff;
    color: var(--md-theme-default-icon-on-primary, #fff)
}

.md-bottom-bar.md-type-shift .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-icon-on-primary, #fff)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-active .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-bottom-bar.md-type-shift .md-bottom-bar-item .md-active .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-bottom-bar.md-accent.md-type-fixed {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-bottom-bar.md-accent.md-type-fixed .md-bottom-bar-item.md-active {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-bottom-bar.md-accent.md-type-fixed .md-bottom-bar-item.md-active .md-icon {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-bottom-bar.md-accent.md-type-fixed .md-bottom-bar-item.md-active .md-icon svg {
    fill: #ebad14;
    fill: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-bottom-bar.md-accent.md-type-shift {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .7))
}

.md-bottom-bar.md-accent.md-type-shift > .md-ripple .md-ripple-wave {
    background-color: #ff1f1f;
    background-color: var(--md-theme-default-accent-on-accent, #ff1f1f)
}

.md-bottom-bar.md-accent.md-type-shift .md-icon {
    color: #fff;
    color: var(--md-theme-default-icon-on-accent, #fff)
}

.md-bottom-bar.md-accent.md-type-shift .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-icon-on-accent, #fff)
}

.md-bottom-bar.md-accent.md-type-shift .md-bottom-bar-item {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-bottom-bar.md-accent.md-type-shift .md-bottom-bar-item .md-active .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-bottom-bar.md-accent.md-type-shift .md-bottom-bar-item .md-active .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-button {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-button.md-primary {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-button.md-primary .md-icon-font {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-button.md-primary .md-icon-image {
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-button.md-accent {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-button.md-accent .md-icon-font {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-button.md-accent .md-icon-image {
    fill: #ebad14;
    fill: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-button.md-raised[disabled] {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-disabled-background-on-background, rgba(0, 0, 0, .12));
    color: rgba(0, 0, 0, .26);
    color: var(--md-theme-default-disabled, rgba(0, 0, 0, .26))
}

.md-button.md-raised:not([disabled]) {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-button.md-raised:not([disabled]).md-primary {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff);
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-button.md-raised:not([disabled]).md-primary .md-icon-font {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-button.md-raised:not([disabled]).md-primary .md-icon-image {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-button.md-raised:not([disabled]).md-accent {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff);
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-button.md-raised:not([disabled]).md-accent .md-icon-font {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-button.md-raised:not([disabled]).md-accent .md-icon-image {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-button.md-fab[disabled] {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-disabled-background-on-background, rgba(0, 0, 0, .12))
}

.md-button.md-fab:not([disabled]) {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-button.md-fab:not([disabled]) .md-icon-font {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-button.md-fab:not([disabled]) .md-icon-image {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-button.md-fab:not([disabled]).md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-button.md-fab:not([disabled]).md-primary .md-icon-font {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-button.md-fab:not([disabled]).md-primary .md-icon-image {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-button[disabled] {
    color: rgba(0, 0, 0, .26);
    color: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-button[disabled] .md-icon-font {
    color: rgba(0, 0, 0, .38);
    color: var(--md-theme-default-icon-disabled-on-background, rgba(0, 0, 0, .38))
}

.md-button[disabled] .md-icon-image {
    fill: rgba(0, 0, 0, .38);
    fill: var(--md-theme-default-icon-disabled-on-background, rgba(0, 0, 0, .38))
}

.md-card {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-card.md-card-expand .md-card-actions {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-card .md-card-actions .md-button:not(.md-primary):not(.md-accent),
.md-card .md-card-header .md-button:not(.md-primary):not(.md-accent) {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-card .md-card-actions .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon,
.md-card .md-card-header .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .54));
    fill: rgba(0, 0, 0, .54);
    fill: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .54))
}

.md-card > .md-card-area:after {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-card.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-card.md-primary .md-card-expand .md-card-actions {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-card.md-primary .md-card-actions .md-button:not(.md-primary):not(.md-accent),
.md-card.md-primary .md-card-header .md-button:not(.md-primary):not(.md-accent) {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-card.md-primary .md-card-actions .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon,
.md-card.md-primary .md-card-header .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon {
    color: rgba(255, 255, 255, .54);
    color: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .54));
    fill: rgba(255, 255, 255, .54);
    fill: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .54))
}

.md-card.md-primary > .md-card-area:after {
    background-color: rgba(255, 255, 255, .12);
    background-color: var(--md-theme-default-divider-on-primary, rgba(255, 255, 255, .12))
}

.md-card.md-accent {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-card.md-accent .md-card-expand .md-card-actions {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-card.md-accent .md-card-actions .md-button:not(.md-primary):not(.md-accent),
.md-card.md-accent .md-card-header .md-button:not(.md-primary):not(.md-accent) {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-card.md-accent .md-card-actions .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon,
.md-card.md-accent .md-card-header .md-button:not(.md-primary):not(.md-accent).md-icon-button .md-icon {
    color: rgba(255, 255, 255, .54);
    color: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .54));
    fill: rgba(255, 255, 255, .54);
    fill: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .54))
}

.md-card.md-accent > .md-card-area:after {
    background-color: rgba(255, 255, 255, .12);
    background-color: var(--md-theme-default-divider-on-accent, rgba(255, 255, 255, .12))
}

.md-checkbox .md-checkbox-container {
    border-color: #3e4b53;
    border-color: var(--md-theme-default-secondary, #3e4b53)
}

.md-checkbox.md-checked .md-checkbox-container {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-, #3e4b53)
}

.md-checkbox.md-checked .md-checkbox-container:after {
    border-color: #fff;
    border-color: var(--md-theme-default-background, #fff)
}

.md-checkbox.md-checked .md-ripple {
    color: #ebad14;
    color: var(--md-theme-default-accent, #ebad14)
}

.md-checkbox.md-indeterminate .md-checkbox-container {
    border-color: rgba(0, 0, 0, .54);
    background-color: rgba(255, 255, 255, .3)
}

.md-checkbox.md-indeterminate .md-checkbox-container:after {
    border-color: rgba(0, 0, 0, .54)
}

.md-checkbox.md-indeterminate .md-ripple {
    color: rgba(0, 0, 0, .54)
}

.md-checkbox.md-checked.md-primary .md-checkbox-container {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    border-color: #3e4b53;
    border-color: var(--md-theme-default-primary, #3e4b53)
}

.md-checkbox.md-checked.md-primary .md-ripple {
    color: #3e4b53;
    color: var(--md-theme-default-primary, #3e4b53)
}

.md-checkbox.md-indeterminate .md-checkbox-container {
    border-color: rgba(0, 0, 0, .54);
    background-color: transparent
}

.md-checkbox.md-indeterminate .md-checkbox-container:after {
    border-color: rgba(0, 0, 0, .54)
}

.md-checkbox.md-indeterminate .md-ripple {
    color: rgba(0, 0, 0, .54)
}

.md-checkbox.md-checkbox-container {
    border-color: rgba(0, 0, 0, .54)
}

.md-checkbox.md-disabled .md-checkbox-container {
    border-color: rgba(0, 0, 0, .26)
}

.md-checkbox.md-disabled.md-checked .md-checkbox-container {
    border-color: rgba(0, 0, 0, .26);
    background-color: rgba(0, 0, 0, .26)
}

.md-chip {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-highlight, rgba(0, 0, 0, .12));
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary, rgba(0, 0, 0, .87))
}

.md-chip.md-icon.md-icon-image svg {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-text-primary, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-text-primary, #fff)
}

.md-chip.md-clickable:not(.md-disabled):hover,
.md-chip.md-deletable:not(.md-disabled):hover {
    background-color: rgba(0, 0, 0, .54);
    background-color: var(--md-theme-default-icon, rgba(0, 0, 0, .54));
    color: #fff;
    color: var(--md-theme-default-text-primary-on-icon, #fff)
}

.md-chip.md-clickable:not(.md-disabled):hover .md-icon,
.md-chip.md-deletable:not(.md-disabled):hover .md-icon {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-icon, #fff)
}

.md-chip.md-clickable:not(.md-disabled):hover .md-input-action,
.md-chip.md-deletable:not(.md-disabled):hover .md-input-action {
    background-color: rgba(255, 255, 255, .87);
    background-color: var(--md-theme-default-background, rgba(255, 255, 255, .87));
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-icon-on-background, rgba(0, 0, 0, .54))
}

.md-chip.md-clickable:not(.md-disabled):hover .md-input-action .md-icon svg,
.md-chip.md-deletable:not(.md-disabled):hover .md-input-action .md-icon svg {
    fill: rgba(0, 0, 0, .54);
    fill: var(--md-theme-default-icon-on-background, rgba(0, 0, 0, .54));
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-icon-on-background, rgba(0, 0, 0, .54))
}

.md-chip.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-chip.md-primary .md-input-action {
    color: #fff;
    color: var(--md-theme-default-icon-on-disabled, #fff);
    background-color: rgba(0, 0, 0, .26);
    background-color: var(--md-theme-default-disabled, rgba(0, 0, 0, .26))
}

.md-chip.md-primary.md-clickable:not(.md-disabled):hover,
.md-chip.md-primary.md-deletable:not(.md-disabled):hover {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-icon, #fff);
    background-color: rgba(0, 0, 0, .54);
    background-color: var(--md-theme-default-icon, rgba(0, 0, 0, .54))
}

.md-chip.md-primary.md-clickable:not(.md-disabled):hover .md-input-action,
.md-chip.md-primary.md-deletable:not(.md-disabled):hover .md-input-action {
    background-color: rgba(255, 255, 255, .87);
    background-color: var(--md-theme-default-background, rgba(255, 255, 255, .87))
}

.md-chip.md-accent,
.md-chip.md-duplicated {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-chip.md-accent .md-input-action,
.md-chip.md-duplicated .md-input-action {
    color: #fff;
    color: var(--md-theme-default-icon-on-disabled, #fff);
    background-color: rgba(0, 0, 0, .26);
    background-color: var(--md-theme-default-disabled, rgba(0, 0, 0, .26))
}

.md-chip.md-accent.md-clickable:not(.md-disabled):hover,
.md-chip.md-accent.md-deletable:not(.md-disabled):hover,
.md-chip.md-duplicated.md-clickable:not(.md-disabled):hover,
.md-chip.md-duplicated.md-deletable:not(.md-disabled):hover {
    background-color: rgba(0, 0, 0, .54);
    background-color: var(--md-theme-default-icon, rgba(0, 0, 0, .54));
    color: #fff;
    color: var(--md-theme-default-text-primary-on-icon, #fff)
}

.md-chip.md-accent.md-clickable:not(.md-disabled):hover .md-input-action,
.md-chip.md-accent.md-deletable:not(.md-disabled):hover .md-input-action,
.md-chip.md-duplicated.md-clickable:not(.md-disabled):hover .md-input-action,
.md-chip.md-duplicated.md-deletable:not(.md-disabled):hover .md-input-action {
    background-color: rgba(255, 255, 255, .87);
    background-color: var(--md-theme-default-background, rgba(255, 255, 255, .87))
}

.md-chip.md-disabled {
    background-color: rgba(0, 0, 0, .1);
    background-color: var(--md-theme-default-highlight, rgba(0, 0, 0, .1));
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent, rgba(0, 0, 0, .54))
}

.md-chips.md-clear {
    background-color: rgba(0, 0, 0, .2)
}

.md-content {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: #3e4b53;
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-content.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-content.md-accent {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-app .md-content {
    border-left-color: rgba(0, 0, 0, .12);
    border-left-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12));
    border-right-color: rgba(0, 0, 0, .12);
    border-right-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-datepicker-dialog {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-datepicker-dialog .md-datepicker-header {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-datepicker-dialog .md-datepicker-body-header:after,
.md-datepicker-dialog .md-datepicker-body-header:before {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-datepicker-dialog .md-datepicker-body-footer {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-datepicker-dialog .md-datepicker-week {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, .54))
}

.md-datepicker-dialog .md-datepicker-disabled {
    color: rgba(0, 0, 0, .26);
    color: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-datepicker-dialog .md-datepicker-today {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-datepicker-dialog .md-datepicker-day-button:hover,
.md-datepicker-dialog .md-datepicker-month-button:hover,
.md-datepicker-dialog .md-datepicker-year-button:hover {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider, rgba(0, 0, 0, .12))
}

.md-datepicker-dialog .md-datepicker-day-button.md-datepicker-selected {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-datepicker-dialog .md-datepicker-month-button.md-datepicker-selected,
.md-datepicker-dialog .md-datepicker-year-button.md-datepicker-selected {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-datepicker-dialog.md-datepicker-year-selector {
    border-bottom-color: rgba(0, 0, 0, .12);
    border-bottom-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-dialog-container {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-divider {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider, rgba(0, 0, 0, .12))
}

.md-drawer {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-drawer.md-persistent-mini.md-left {
    border-right-color: rgba(0, 0, 0, .12);
    border-right-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-drawer.md-persistent-mini.md-right {
    border-left-color: rgba(0, 0, 0, .12);
    border-left-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-empty-state.md-empty-state-icon.md-icon-image svg {
    fill: rgba(0, 0, 0, .26);
    fill: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-empty-state.md-empty-state-icon.md-icon-font {
    color: rgba(0, 0, 0, .26);
    color: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-empty-state.md-rounded {
    background-color: rgba(0, 0, 0, .06);
    background-color: var(--md-theme-default-disabled, rgba(0, 0, 0, .06))
}

.md-empty-state.md-primary .md-empty-state-icon.md-icon-image svg {
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-empty-state.md-primary .md-empty-state-icon.md-icon-font {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-empty-state.md-accent .md-empty-state-icon.md-icon-image svg {
    fill: #ebad14;
    fill: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-empty-state.md-accent .md-empty-state-icon.md-icon-font {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-field:after {
    background-color: rgba(0, 0, 0, .42)
}

.md-field:before {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-field.md-count,
.md-field.md-helper-text,
.md-fieldlabel {
    color: rgba(0, 0, 0, .54)
}

.md-field.md-prefix,
.md-field.md-suffix {
    color: rgba(0, 0, 0, .54)
}

.md-field.md-input::-webkit-input-placeholder,
.md-field.md-textarea::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .54)
}

.md-field.md-focused .md-input,
.md-field.md-focused .md-textarea,
.md-field.md-has-value .md-input,
.md-field.md-has-value .md-textarea {
    -webkit-text-fill-color: rgba(0, 0, 0, .87)
}

.md-field.md-has-textarea:not(.md-autogrow):after {
    border-color: rgba(0, 0, 0, .42)
}

.md-field.md-has-textarea:not(.md-autogrow):before {
    border-color: #3e4b53;
    border-color: var(--md-theme-default-primary, #3e4b53)
}

.md-field.md-disabled:after {
    background-image: linear-gradient(to right, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, .38) 33%, transparent 0)
}

.md-field.md-disabled .md-input,
.md-field.md-disabled .md-textarea,
.md-field.md-disabled label {
    color: rgba(0, 0, 0, .42)
}

.md-field > .md-icon {
    margin: -2px 0 -2px 12px
}

.md-field > .md-icon ~ .md-input {
    margin-left: 0
}

.md-field.md-invalid:after {
    background-color: #ff1744;
    background-color: var(--md-theme-default-fieldvariant, #ff1744)
}

.md-field.md-invalid.md-has-textarea:not(.md-autogrow):before {
    border-color: #ff1744;
    border-color: var(--md-theme-default-fieldvariant, #ff1744)
}

.md-field.md-invalid label {
    color: #ff1744;
    color: var(--md-theme-default-fieldvariant, #ff1744)
}

.md-field.md-invalid .md-error {
    color: #ff1744;
    color: var(--md-theme-default-fieldvariant, #ff1744)
}

.md-field.md-invalid .md-date-icon,
.md-field.md-invalid .md-date-icon svg {
    color: #ff1744;
    color: var(--md-theme-default-fieldvariant, #ff1744);
    fill: #ff1744;
    fill: var(--md-theme-default-fieldvariant, #ff1744)
}

.md-field.md-focused .md-input,
.md-field.md-focused .md-textarea,
.md-field.md-highlight .md-input,
.md-field.md-highlight .md-textarea {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-field.md-focused > .md-icon,
.md-field.md-highlight > .md-icon {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53);
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-field.md-focused label {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-field.md-disabled .md-icon svg {
    fill: rgba(0, 0, 0, .26);
    fill: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-icon.md-icon-image svg {
    fill: rgba(0, 0, 0, .54);
    fill: var(--md-theme-default-icon-on-background, rgba(0, 0, 0, .54))
}

.md-icon.md-icon-image svg.md-primary {
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-icon.md-icon-image svg.md-accent {
    fill: #ebad14;
    fill: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-icon.md-icon-font {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-icon-on-background, rgba(0, 0, 0, .54))
}

.md-icon.md-icon-font.md-primary {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-icon.md-icon-font.md-accent {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-list {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-list.md-double-line .md-list-item-text :nth-child(2) {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, .54))
}

.md-list.md-triple-line .md-list-item-text :nth-child(3) {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, .54))
}

.md-list.md-highlight .md-list-item-container {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-list.md-list-item-container {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-list .md-list-item-container:not(.md-list-item-default):not(.md-list-item-expand):not([disabled]):hover {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12));
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-list[disabled] {
    color: rgba(0, 0, 0, .26);
    color: var(--md-theme-default-disabled-on-background, rgba(0, 0, 0, .26))
}

.md-list.md-selected .md-list-item-content,
.md-list.router-link-active .md-list-item-content {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-list.md-list-item-expand.md-active {
    border-color: rgba(0, 0, 0, .12);
    border-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-list .md-list-item-expand:not(.md-list-item-default):not([disabled]) > .md-list-item-content:hover {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12));
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-menu-item.md-primary .md-list-item-button,
.md-menu-item.md-primary .md-list-item-link,
.md-menu-item.md-primary .md-list-item-router {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-menu-item.md-accent .md-list-item-button,
.md-menu-item.md-accent .md-list-item-link,
.md-menu-item.md-accent .md-list-item-router {
    color: #ebad14;
    color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-progress-bar.md-indeterminate,
.md-progress-bar.md-query {
    background-color: rgba(68, 138, 255, .38);
    background-color: var(--md-theme-default-primary-on-, rgba(68, 138, 255, .38))
}

.md-progress-bar.md-indeterminate .md-progress-bar-fill:after,
.md-progress-bar.md-indeterminate .md-progress-bar-track:after,
.md-progress-bar.md-query .md-progress-bar-fill:after,
.md-progress-bar.md-query .md-progress-bar-track:after {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-progress-bar.md-indeterminate.md-accent,
.md-progress-bar.md-query.md-accent {
    background-color: rgba(255, 82, 82, .38);
    background-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .38))
}

.md-progress-bar.md-indeterminate.md-accent .md-progress-bar-fill:after,
.md-progress-bar.md-indeterminate.md-accent .md-progress-bar-track:after,
.md-progress-bar.md-query.md-accent .md-progress-bar-fill:after,
.md-progress-bar.md-query.md-accent .md-progress-bar-track:after {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-progress-bar.md-determinate {
    background-color: rgba(68, 138, 255, .38);
    background-color: var(--md-theme-default-primary-on-, rgba(68, 138, 255, .38))
}

.md-progress-bar.md-determinate .md-progress-bar-fill {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-progress-bar.md-determinate.md-accent {
    background-color: rgba(255, 82, 82, .38);
    background-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .38))
}

.md-progress-bar.md-determinate.md-accent .md-progress-bar-fill {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-progress-bar.md-buffer .md-progress-bar-fill {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-progress-bar.md-buffer .md-progress-bar-track {
    background-color: rgba(68, 138, 255, .38);
    background-color: var(--md-theme-default-primary-on-, rgba(68, 138, 255, .38))
}

.md-progress-bar.md-buffer .md-progress-bar-buffer {
    border-color: rgba(68, 138, 255, .38);
    border-color: var(--md-theme-default-primary-on-, rgba(68, 138, 255, .38))
}

.md-progress-bar.md-buffer.md-accent .md-progress-bar-fill {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-progress-bar.md-buffer.md-accent .md-progress-bar-track {
    background-color: rgba(255, 82, 82, .38);
    background-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .38))
}

.md-progress-bar.md-buffer.md-accent .md-progress-bar-buffer {
    border-color: rgba(255, 82, 82, .38);
    border-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .38))
}

.md-progress-spinner.md-progress-spinner-circle {
    stroke: #3e4b53;
    stroke: var(--md-theme-default-primary, #3e4b53)
}

.md-progress-spinner.md-accent .md-progress-spinner-circle {
    stroke: #ebad14;
    stroke: var(--md-theme-default-accent, #ebad14)
}

.md-radio .md-radio-container {
    border-color: #ebad14;
    border-color: var(--md-theme-default-accent, #ebad14)
}

.md-radio.md-checked .md-radio-container {
    border-color: #ebad14;
    border-color: var(--md-theme-default-accent, #ebad14)
}

.md-radio.md-checked .md-radio-container:after {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-radio.md-checked .md-ripple {
    color: #ebad14;
    color: var(--md-theme-default-accent, #ebad14)
}

.md-radio.md-checked.md-primary .md-radio-container {
    border-color: #3e4b53;
    border-color: var(--md-theme-default-primary, #3e4b53)
}

.md-radio.md-checked.md-primary .md-radio-container:after {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-radio.md-checked.md-primary .md-ripple {
    color: #3e4b53;
    color: var(--md-theme-default-primary, #3e4b53)
}

.md-radio.md-radio-container {
    border-color: rgba(0, 0, 0, .54)
}

.md-radio.md-disabled .md-radio-container {
    border-color: rgba(0, 0, 0, .26)
}

.md-radio.md-disabled.md-checked .md-radio-container {
    border-color: rgba(0, 0, 0, .26)
}

.md-radio.md-disabled.md-checked .md-radio-container:after {
    background-color: rgba(0, 0, 0, .26)
}

.md-snackbar {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-text-primary, #fff);
    background-color: #323232
}

.md-steppers {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff);
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-steppers.md-stepper-icon:after,
.md-steppers.md-stepper-icon:before,
.md-steppers.md-stepper-number:after,
.md-steppers.md-stepper-number:before,
.md-steppers.md-stepper:after,
.md-steppers.md-stepper:before {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-steppers.md-stepper-number {
    background-color: rgba(0, 0, 0, .38);
    background-color: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38));
    color: #fff;
    color: var(--md-theme-default-text-primary-on-text-hint, #fff)
}

.md-steppers.md-stepper-number svg {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-text-hint, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-text-hint, #fff)
}

.md-steppers.md-stepper-header .md-button-content {
    color: rgba(0, 0, 0, .38);
    color: var(--md-theme-default-text-hint-on-background, rgba(0, 0, 0, .38))
}

.md-steppers.md-stepper-header .md-button-content:after,
.md-steppers.md-stepper-header .md-button-content:before {
    background-color: rgba(0, 0, 0, .12);
    background-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-steppers.md-stepper-header.md-active .md-button-content,
.md-steppers.md-stepper-header.md-done .md-button-content {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-steppers.md-stepper-header.md-active .md-stepper-number,
.md-steppers.md-stepper-header.md-done .md-stepper-number {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary-on-background, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-steppers .md-stepper-header.md-active .md-stepper-number svg,
.md-steppers .md-stepper-header.md-done .md-stepper-number svg {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff);
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-steppers.md-stepper-header.md-error .md-button-content {
    color: #ff1744;
    color: var(--md-theme-default-steppervariant, #ff1744)
}

.md-steppers.md-stepper-header.md-error .md-icon svg {
    color: #ff1744;
    color: var(--md-theme-default-steppervariant, #ff1744);
    fill: #ff1744;
    fill: var(--md-theme-default-steppervariant, #ff1744)
}

.md-subheader {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, .54))
}

.md-subheader.md-primary {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-switch.md-checked .md-switch-container {
    background-color: rgba(255, 82, 82, .38);
    background-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .38))
}

.md-switch.md-checked .md-switch-thumb {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-switch.md-checked .md-ripple {
    color: #ebad14;
    color: var(--md-theme-default-accent, #ebad14)
}

.md-switch.md-checked.md-primary .md-switch-container {
    background-color: rgba(68, 138, 255, .38);
    background-color: var(--md-theme-default-primary-on-, rgba(68, 138, 255, .38))
}

.md-switch.md-checked.md-primary .md-switch-thumb {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-switch.md-checked.md-primary .md-ripple {
    color: #3e4b53;
    color: var(--md-theme-default-primary, #3e4b53)
}

.md-switch.md-switch-container {
    background-color: rgba(0, 0, 0, .38)
}

.md-switch.md-switch-thumb {
    background-color: #f5f5f5;
    background-color: var(--md-theme-default-switchvariant, #f5f5f5)
}

.md-switch.md-disabled .md-switch-container {
    background-color: rgba(0, 0, 0, .12)
}

.md-switch.md-disabled .md-switch-thumb {
    background-color: #bdbdbd;
    background-color: var(--md-theme-default-switchvariant, #bdbdbd)
}

.md-table.md-table-alternate-header,
.md-table.md-table-content {
    background-color: #fff;
    background-color: var(--md-theme-default-background, #fff)
}

.md-table.md-table-alternate-header .md-table-toolbar {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87));
    background-color: rgba(255, 82, 82, .2);
    background-color: var(--md-theme-default-accent-on-, rgba(255, 82, 82, .2))
}

.md-table .md-table-row:hover:not(.md-header-row) .md-table-cell {
    background-color: rgba(0, 0, 0, .08);
    background-color: var(--md-theme-default-highlight-on-background, rgba(0, 0, 0, .08))
}

.md-table.md-table-row.md-selected,
.md-table.md-table-row.md-selected-single {
    background-color: #f5f5f5;
    background-color: var(--md-theme-default-rowvariant, #f5f5f5)
}

.md-table.md-table-row.md-selected-single.md-primary,
.md-table.md-table-row.md-selected.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary-on-background, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-table .md-table-row.md-selected-single.md-primary .md-ripple,
.md-table.md-table-row.md-selected.md-primary .md-ripple {
    color: #fff
}

.md-table .md-table-row.md-selected-single.md-primary .md-checkbox-container,
.md-table .md-table-row.md-selected.md-primary .md-checkbox-container {
    background-color: #fff;
    border-color: #fff
}

.md-table .md-table-row.md-selected-single.md-primary .md-checkbox-container:after,
.md-table .md-table-row.md-selected.md-primary .md-checkbox-container:after {
    border-color: #3e4b53;
    border-color: var(--md-theme-default-primary, #3e4b53)
}

.md-table.md-table-row.md-selected-single.md-accent,
.md-table.md-table-row.md-selected.md-accent {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent-on-background, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-table .md-table-row.md-selected-single.md-accent .md-ripple,
.md-table.md-table-row.md-selected.md-accent .md-ripple {
    color: #fff
}

.md-table .md-table-row.md-selected-single.md-accent .md-checkbox-container,
.md-table .md-table-row.md-selected.md-accent .md-checkbox-container {
    background-color: #fff;
    border-color: #fff
}

.md-table .md-table-row.md-selected-single.md-accent .md-checkbox-container:after,
.md-table .md-table-row.md-selected.md-accent .md-checkbox-container:after {
    border-color: #ebad14;
    border-color: var(--md-theme-default-accent, #ebad14)
}

.md-table.md-table-row td {
    border-top-color: rgba(0, 0, 0, .12);
    border-top-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-table.md-table-head {
    color: rgba(0, 0, 0, .54);
    color: var(--md-theme-default-text-accent-on-background, rgba(0, 0, 0, .54))
}

.md-table.md-table-fixed-header-active {
    border-bottom-color: rgba(0, 0, 0, .12);
    border-bottom-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-table.md-sortable.md-sorted,
.md-table.md-sortable:hover {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-table.md-sortable.md-sorted svg,
.md-table.md-sortable:hover svg {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87));
    fill: rgba(0, 0, 0, .87);
    fill: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-table.md-table-pagination {
    border-top-color: rgba(0, 0, 0, .12);
    border-top-color: var(--md-theme-default-divider-on-background, rgba(0, 0, 0, .12))
}

.md-tabs.md-tabs-navigation {
    background-color: #fff;
    background-color: var(--md-theme-default-background-on-background, #fff)
}

.md-tabs.md-tabs-navigation .md-button {
    color: rgba(0, 0, 0, .7);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .7))
}

.md-tabs.md-tabs-navigation .md-button[disabled] {
    color: rgba(0, 0, 0, .38);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .38))
}

.md-tabs.md-tabs-navigation .md-button .md-icon {
    color: rgba(0, 0, 0, .7);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .7))
}

.md-tabs.md-tabs-navigation .md-button .md-icon svg {
    fill: rgba(0, 0, 0, .7);
    fill: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .7))
}

.md-tabs.md-tabs-navigation .md-button.md-active {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-tabs.md-tabs-navigation .md-button.md-active .md-icon {
    color: #3e4b53;
    color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-tabs .md-tabs-navigation .md-button.md-active .md-icon svg {
    fill: #3e4b53;
    fill: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-tabs.md-tabs-indicator {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-tabs.md-primary .md-tabs-navigation {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary-on-background, #3e4b53)
}

.md-tabs.md-primary .md-tabs-navigation .md-button {
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .7))
}

.md-tabs.md-primary .md-tabs-navigation .md-button[disabled] {
    color: rgba(255, 255, 255, .38);
    color: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .38))
}

.md-tabs.md-primary .md-tabs-navigation .md-button .md-icon {
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .7))
}

.md-tabs.md-primary .md-tabs-navigation .md-button .md-icon svg {
    fill: rgba(255, 255, 255, .7);
    fill: var(--md-theme-default-text-primary-on-primary, rgba(255, 255, 255, .7))
}

.md-tabs.md-primary .md-tabs-navigation .md-button.md-active {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-tabs.md-primary .md-tabs-navigation .md-button.md-active .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-tabs.md-primary .md-tabs-navigation .md-button.md-active .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-tabs.md-primary .md-tabs-indicator {
    background-color: #fff;
    background-color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-tabs.md-accent .md-tabs-navigation {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent-on-background, #ebad14)
}

.md-tabs.md-accent .md-tabs-navigation .md-button {
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .7))
}

.md-tabs.md-accent .md-tabs-navigation .md-button[disabled] {
    color: rgba(255, 255, 255, .38);
    color: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .38))
}

.md-tabs.md-accent .md-tabs-navigation .md-button .md-icon {
    color: rgba(255, 255, 255, .7);
    color: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .7))
}

.md-tabs.md-accent .md-tabs-navigation .md-button .md-icon svg {
    fill: rgba(255, 255, 255, .7);
    fill: var(--md-theme-default-text-primary-on-accent, rgba(255, 255, 255, .7))
}

.md-tabs.md-accent .md-tabs-navigation .md-button.md-active {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-tabs.md-accent .md-tabs-navigation .md-button.md-active .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-tabs.md-accent .md-tabs-navigation .md-button.md-active .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-tabs.md-accent .md-tabs-indicator {
    background-color: #fff;
    background-color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background-variant, rgba(0, 0, 0, .87));
    background-color: #f5f5f5;
    background-color: var(--md-theme-default-toolbarvariant, #f5f5f5)
}

.md-toolbar.md-icon {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background-variant, rgba(0, 0, 0, .87))
}

.md-toolbar.md-icon svg {
    fill: rgba(0, 0, 0, .87);
    fill: var(--md-theme-default-text-primary-on-background-variant, rgba(0, 0, 0, .87))
}

.md-toolbar.md-display-1,
.md-toolbar.md-display-2,
.md-toolbar.md-title {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background-variant, rgba(0, 0, 0, .87))
}

.md-toolbar.md-primary {
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar.md-primary .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar.md-primary .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar.md-primary .md-button:not([disabled]):not(.md-raised) {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar.md-primary .md-display-1,
.md-toolbar.md-primary .md-display-2,
.md-toolbar.md-primary .md-title {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff)
}

.md-toolbar.md-accent {
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14);
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar.md-accent .md-icon {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar.md-accent .md-icon svg {
    fill: #fff;
    fill: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar.md-accent .md-button:not([disabled]):not(.md-raised) {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar.md-accent .md-display-1,
.md-toolbar.md-accent .md-display-2,
.md-toolbar.md-accent .md-title {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff)
}

.md-toolbar.md-transparent {
    background-color: transparent;
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-toolbar.md-transparent .md-icon {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-toolbar.md-transparent .md-icon svg {
    fill: rgba(0, 0, 0, .87);
    fill: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-toolbar.md-transparent .md-display-1,
.md-toolbar.md-transparent .md-display-2,
.md-toolbar.md-transparent .md-title {
    color: rgba(0, 0, 0, .87);
    color: var(--md-theme-default-text-primary-on-background, rgba(0, 0, 0, .87))
}

.md-tooltip {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-tooltip, #fff);
    background-color: rgba(97, 97, 97, .9);
    background-color: var(--md-theme-default-tooltip-on-background, rgba(97, 97, 97, .9))
}

.md-badge {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-accent, #fff);
    background-color: #ebad14;
    background-color: var(--md-theme-default-accent, #ebad14)
}

.md-badge.md-primary {
    color: #fff;
    color: var(--md-theme-default-text-primary-on-primary, #fff);
    background-color: #3e4b53;
    background-color: var(--md-theme-default-primary, #3e4b53)
}

.md-tabs-indicator {
    background-color: #f93c03
}

.md-tabs-navigation .md-button {
    background: 0 0
}

.md-tabs-navigation .md-button:hover {
    color: initial
}

button.md-button:hover {
    background: rgba(0, 0, 0, .2)
}

.md-tabs button.md-button:hover,
.md-tabs button.md-button:hover * {
    background: 0 0
}

.light {
    font-weight: 300
}

.regular {
    font-weight: 400
}

.medium {
    font-weight: 500
}

.bold {
    font-weight: 700
}

.modal-fade-enter-active,
.modal-fade-leave-active {
    transition: opacity .5s;
    pointer-events: none
}

.modal-fade-enter,
.modal-fade-leave-to {
    pointer-events: none;
    opacity: 0
}

.modal-fade-enter-to,
.modal-fade-leave {
    opacity: 1;
    pointer-events: inherit
}

.slide-enter-active,
.slide-leave-active {
    transition: all .4s ease-in-out
}

.slide-enter,
.slide-leave-to {
    max-height: 1px;
    overflow: hidden;
    opacity: 0
}

.slide-enter-to,
.slide-leave {
    max-height: 400px;
    opacity: 1
}

.slidein-enter-active,
.slidein-leave-active {
    transition: all .3s ease-out !important
}

.slidein-enter,
.slidein-leave-to {
    opacity: 0 !important;
    transform: translateY(20px) !important
}

.slidein-enter-to,
.slideinleave {
    opacity: 1 !important;
    transform: translateY(0) !important
}

.fade-enter-active {
    transition: opacity .2s ease-out
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.fade-enter-to,
.fadeleave {
    opacity: 1
}

.snackbar-enter-active {
    transition: opacity .2s ease-out
}

.snackbar-enter,
.snackbar-leave-to {
    opacity: 0;
    transition: opacity .3s ease-out
}

.snackbar-enter-to,
.snackbarleave {
    opacity: 1
}

@-webkit-keyframes snack-progress {
    from {
        width: 100%
    }

    to {
        width: 0%
    }
}

@keyframes snack-progress {
    from {
        width: 100%
    }

    to {
        width: 0%
    }
}

html {
    scroll-behavior: smooth
}

::selection {
    background-color: #3e4b53;
    color: #fff;
    -webkit-text-fill-color: #fff
}

body {
    font-family: Roboto, "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #3e4b53;
    line-height: 1.2
}

body.no-overflow {
    height: 100%;
    overflow: hidden
}

i {
    text-decoration: none !important
}

a,
a:not(.md-button) {
    font-weight: 700;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

a:hover,
a:not(.md-button):hover {
    text-decoration: underline;
    color: inherit;
    transition: .2s ease-out
}

a:hover i,
a:not(.md-button):hover i {
    text-decoration: none !important
}

.btn,
a.btn,
button,
button.md-button.md-accent[type=submit]:not([disabled]) {
    background: #f93c03;
    color: #fff;
    padding: 4px;
    border-radius: 8px;
    text-align: center;
    line-height: 1;
    padding: .66rem .75rem;
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: none
}

.btn:hover,
a.btn:hover,
button.md-button.md-accent[type=submit]:not([disabled]):hover,
button:hover {
    color: #fff;
    background: #fc4e19;
    cursor: pointer
}

@media (min-width:600px) {

    .btn,
    a.btn,
    button,
    button.md-button.md-accent[type=submit]:not([disabled]) {
        padding: 1rem
    }
}

@media (min-width:1280px) {

    .btn,
    a.btn,
    button,
    button.md-button.md-accent[type=submit]:not([disabled]) {
        padding: .75rem 1.5rem;
        display: inline-block;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

.md-field.select.md-disabled {
    opacity: .6
}

a.btn,
button {
    transition: opacity .2s ease-out
}

a.btn:disabled,
button:disabled {
    opacity: .3;
    cursor: not-allowed
}

span.md-list-item-text {
    color: #3e4b53
}

h1,
h2,
h3,
h4,
h5,
h6 {
    word-break: break-word;
    font-weight: 400
}

main {
    position: relative;
    padding: 3rem 0;
    width: 100%;
    margin: auto;
    min-height: calc(100vh - 82px - 110px)
}

@media (min-width:600px) {
    main {
        min-height: calc(100vh - 82px - 72px)
    }
}

@media (min-width:1280px) {
    main {
        min-height: calc(100vh - 82px - 56px)
    }
}

.loading svg circle {
    stroke: #ebad14
}

.blank {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff
}

.mobile {
    display: initial
}

@media (min-width:1280px) {
    .mobile {
        display: none
    }
}

.desktop {
    display: none
}

@media (min-width:1280px) {
    .desktop {
        display: initial
    }
}

.md-menu-content.md-select-menu {
    z-index: 1002
}

.container {
    width: 90%;
    margin: auto
}

.container-small {
    width: 90%;
    margin: auto
}

@media (min-width:1280px) {
    .container-small {
        max-width: 1000px
    }
}

.row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center
}

a.cancel {
    font-weight: 400;
    color: #0b74fa
}

.v-html {
    line-height: 1.5
}

.v-html h1,
.v-html h2,
.v-html h3,
.v-html h4,
.v-html h5,
.v-html h6 {
    font-size: 90%;
    margin-bottom: .66rem
}

.v-html * {
    margin-bottom: .66rem;
    display: block;
    white-space: normal
}

.v-html ul li {
    display: list-item;
    list-style: disc;
    -webkit-margin-start: 1rem;
    margin-inline-start: 1rem
}

.v-html ul li::marker {
    color: #ebad14
}

main.front {
    width: 100%;
    padding: 0
}

@media (min-width:1280px) {
    main.front {
        margin-bottom: -3rem
    }
}

#front-hero {
    background-color: #ebad14;
    color: #fff;
    padding: 5%;
    padding-bottom: 10%;
    min-height: 550px;
    height: calc(100vh + 25px);
    background-image: url(../assets/img-salta/front-hero.svg);
    background-size: 27vh auto;
    background-position: center top 5vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

@media (min-width:600px) {
    #front-hero {
        padding-bottom: 15%
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    #front-hero {
        background-position: center top 5vh
    }
}

@media (min-width:1280px) {
    #front-hero {
        height: calc(100vh - 80px);
        background-position: right 15% top 25%;
        justify-content: center;
        background-size: 32% auto;
        padding-bottom: 12%
    }
}

@media (min-width:1921px) {
    #front-hero {
        background-size: 28%;
        background-position: right 15% top 40%
    }
}

#front-hero .hero-text {
    display: flex;
    flex-direction: column
}

@media (min-width:1280px) {
    #front-hero .hero-text {
        width: 50%
    }
}

@media (min-width:1367px) {
    #front-hero .hero-text {
        max-width: 800px
    }
}

#front-hero .hero-text > * {
    margin-bottom: 4vh
}

#front-hero .hero-text > ::selection {
    background: #fff;
    color: #ebad14
}

@media (min-width:600px) {
    #front-hero .hero-text > * {
        margin-bottom: 2rem
    }
}

#front-hero .hero-text aside {
    display: flex;
    flex-direction: column;
    margin-bottom: 2vh
}

@media (min-width:600px) {
    #front-hero .hero-text aside {
        margin-bottom: 4vh;
        flex-direction: row;
        flex-wrap: wrap
    }
}

#front-hero .hero-text aside span {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8em;
    display: block;
    margin-bottom: .66em;
    width: 100%
}

@media (min-width:600px) {
    #front-hero .hero-text aside span {
        font-size: 1em
    }
}

#front-hero .hero-text aside figure {
    display: inline-flex;
    width: 145px;
    height: 24px;
    background-position: left center;
    justify-content: flex-end;
    margin-bottom: .5em;
    position: relative
}

@media (min-width:600px) {
    #front-hero .hero-text aside figure {
        width: 180px;
        height: 28px;
        margin-bottom: 0;
        background-position: left bottom
    }
}

@media (min-width:1280px) {
    #front-hero .hero-text aside figure {
        width: 185px
    }
}

#front-hero .hero-text aside figure:not(:last-child)::after {
    content: "&";
    position: relative;
    top: 10px;
    left: 15px;
    font-size: .8em
}

@media (min-width:1280px) {
    #front-hero .hero-text aside figure:not(:last-child)::after {
        top: 14px
    }
}

#front-hero .hero-text aside figure:not(:first-of-type) {
    top: 4px
}

@media (min-width:600px) {
    #front-hero .hero-text aside figure:not(:first-of-type) {
        margin-left: 24px
    }
}

#front-hero .hero-text h2 {
    line-height: 1;
    font-size: calc(5.4vh + .8rem)
}

@media (min-width:1280px) {
    #front-hero .hero-text h2 {
        font-size: 64px
    }
}

#front-hero .hero-text p {
    font-size: 1rem
}

@media (min-width:600px) {
    #front-hero .hero-text p {
        font-size: 1.66rem
    }
}

@media (min-width:1280px) {
    #front-hero .hero-text p {
        font-size: 22px;
        line-height: 1.5
    }
}

#front-links {
    width: 90%;
    margin: auto;
    position: relative;
    top: -2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width:600px) {
    #front-links {
        min-height: 290px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        column-gap: 16px
    }
}

@media (min-width:1280px) {
    #front-links {
        max-width: 1280px;
        column-gap: 32px;
        top: -6rem
    }
}

#front-links .md-card {
    border-radius: 12px;
    margin-bottom: 1.33rem;
    color: #3e4b53;
    flex-grow: 0;
    flex-shrink: 0
}

@media (min-width:600px) {
    #front-links .md-card {
        width: 48%;
        flex-grow: 0
    }
}

@media (min-width:1280px) {
    #front-links .md-card {
        width: 17.5%;
        flex-grow: .3
    }
}

#front-links .md-card > .md-ripple {
    padding: 4px
}

@media (min-width:1280px) {
    #front-links .md-card > .md-ripple {
        padding: 16px 8px;
        display: grid;
        grid-template-rows: 1fr 1fr;
        row-gap: 16px
    }
}

#front-links .md-card .md-card-header {
    display: block
}

@media (min-width:600px) {
    #front-links .md-card .md-card-header {
        padding-bottom: 0
    }
}

#front-links .md-card .md-card-header .md-title .md-icon {
    color: #f93c03;
    font-size: 42px;
    margin-bottom: 16px
}

#front-links .md-card .md-card-header .md-title h3 {
    font-size: 1.2rem;
    line-height: 1.2
}

#front-links .md-card .md-card-content p {
    font-size: 1rem
}

@media (min-width:1280px) {
    #front-links .md-card .md-card-content p {
        font-size: 1.05rem;
        line-height: 1.5
    }
}

.manage-cards {
    display: flex;
    justify-content: center;
    position: relative;
    width: 90%
}

@media (min-width:1280px) {
    .manage-cards {
        max-width: 1000px
    }
}

.back a {
    padding-left: 6px
}

.cards-container {
    width: 100%;
    display: flex;
    flex-direction: column
}

.cards-container.no-overflow {
    overflow: hidden;
    height: 0;
    width: 0;
    margin: 0
}

.cards-container a.go-back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ebad14;
    text-decoration: none
}

.cards-container a.go-back .md-icon {
    color: #ebad14;
    margin-right: 6px
}

.cards-container a.go-back span {
    font-size: 16px;
    font-weight: 300;
    line-height: .8
}

.cards-container .main-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

@media (min-width:600px) {
    .cards-container .main-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
}

.cards-container .main-row h2 {
    font-weight: 400;
    margin-bottom: 18px
}

@media (min-width:600px) {
    .cards-container .main-row h2 {
        margin: 0
    }
}

.cards-container .main-row a {
    text-decoration: none
}

.cards-container .main-row a.hide button.register {
    display: none;
    background-color: rgba(0, 0, 0, .15)
}

.cards-container .main-row a button.register {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 6px 15px 6px 12px;
    border: none
}

@media (min-width:1280px) {
    .cards-container .main-row a button.register {
        align-self: flex-end
    }
}

.cards-container .main-row a button.register .md-icon {
    color: #fff;
    margin: 0 5px 0 0
}

@media (min-width:600px) {
    .cards-container .main-row a button.register .md-icon {
        font-size: 20px !important
    }
}

.cards-container .main-row a button.register span {
    font-size: 16px;
    line-height: .8
}

.cards-container .floating {
    height: 100%
}

.cards-container .floating.alert {
    display: flex;
    justify-content: center;
    align-items: center
}

.cards-container .floating .alert-box {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cards-container .floating .alert-box .no-cards-icon {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: url(../assets/icon/no-cards.svg), #b4b4b4;
    background-repeat: no-repeat;
    background-position: center 30px;
    margin-bottom: 23px
}

.cards-container .floating .alert-box .alert-text {
    display: flex;
    flex-direction: column;
    align-items: center
}

.cards-container .floating .alert-box .alert-text .title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px
}

.cards-container .floating .alert-box .alert-text .message {
    text-align: center;
    font-size: 16px;
    width: 250px
}

.cards-container .floating .cards-list {
    width: 100%;
    display: block;
    flex-wrap: wrap;
    justify-content: center
}

@media (min-width:600px) {
    .cards-container .floating .cards-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px
    }
}

@media (min-width:1280px) {
    .cards-container .floating .cards-list {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px
    }
}

.cards-container .floating .cards-list:first-child {
    margin-left: 0
}

@media (min-width:600px) {
    .cards-container .floating .cards-list:first-child {
        margin-top: 28px
    }
}

.cards-container .floating .cards-list .card-container {
    width: 100%;
    margin-top: 24px
}

.cards-container .floating .cards-list .card-container a {
    text-decoration: none
}

.cards-container .floating .cards-list .card-container a.disabled .card-item {
    background-color: #a5a5a5
}

.cards-container .floating .cards-list .card-container a.disabled .card-item .card-back,
.cards-container .floating .cards-list .card-container a.disabled .card-item .card-bottom,
.cards-container .floating .cards-list .card-container a.disabled .card-item .card-left,
.cards-container .floating .cards-list .card-container a.disabled .card-item .card-right,
.cards-container .floating .cards-list .card-container a.disabled .card-item .card-top {
    background: #bfbfbf
}

.cards-container .floating .cards-list .card-item {
    width: 100%;
    height: 100%;
    aspect-ratio: 20/11;
    min-height: 40vw;
    background-color: #ebad14;
    position: relative;
    transform-style: preserve-3d;
    border-radius: 12px;
    background-image: url(../assets/icon/bgshape-1.svg), url(../assets/icon/bgshape-2.svg), url(../assets/img-salta/main-card-logo.svg), url(../assets/img-salta/secondary-card-logo.svg);
    background-position: left top, right bottom, right 15px bottom 15px, right 110px bottom 22px;
    background-size: 75%, 50%, 25%, 25%
}

@media (min-width:600px) {
    .cards-container .floating .cards-list .card-item {
        min-height: 20vw
    }
}

@media (min-width:1280px) {
    .cards-container .floating .cards-list .card-item {
        width: 100%;
        height: 170px;
        min-height: 160px;
        box-shadow: 0 0 4px rgba(0, 0, 0, .1);
        transition: box-shadow .1s ease-out
    }

    .cards-container .floating .cards-list .card-item:hover {
        box-shadow: 0 0 24px rgba(0, 0, 0, .15)
    }
}

@media (max-width:1279px) {
    .cards-container .floating .cards-list .card-item {
        transform: none !important
    }
}

.cards-container .floating .cards-list .card-item .js-tilt-glare {
    display: none
}

@media (min-width:1280px) {
    .cards-container .floating .cards-list .card-item .js-tilt-glare {
        display: block;
        transform: translateZ(1px);
        border-radius: 12px
    }
}

.cards-container .floating .cards-list .card-item .card-back,
.cards-container .floating .cards-list .card-item .card-bottom,
.cards-container .floating .cards-list .card-item .card-left,
.cards-container .floating .cards-list .card-item .card-right,
.cards-container .floating .cards-list .card-item .card-top {
    display: none;
    background: #efbd43;
    position: absolute
}

@media (min-width:1280px) {

    .cards-container .floating .cards-list .card-item .card-back,
    .cards-container .floating .cards-list .card-item .card-bottom,
    .cards-container .floating .cards-list .card-item .card-left,
    .cards-container .floating .cards-list .card-item .card-right,
    .cards-container .floating .cards-list .card-item .card-top {
        display: block
    }
}

.cards-container .floating .cards-list .card-item .card-top {
    top: 0;
    left: 12px;
    width: calc(100% - 12px * 2);
    height: 12px;
    transform: rotateX(90deg) translate3d(0, -6px, 6px);
    transform-style: preserve-3d
}

.cards-container .floating .cards-list .card-item .card-right {
    top: 12px;
    right: 0;
    height: calc(100% - 12px * 2);
    width: 12px;
    transform: rotateY(90deg) translate3d(6px, 0, 6px)
}

.cards-container .floating .cards-list .card-item .card-left {
    top: 12px;
    left: 0;
    height: calc(100% - 12px * 2);
    width: 12px;
    transform: rotateY(90deg) translate3d(6px, 0, -6px)
}

.cards-container .floating .cards-list .card-item .card-bottom {
    bottom: 0;
    left: 12px;
    width: calc(100% - 12px * 2);
    height: 12px;
    transform: rotateX(90deg) translate3d(0, -6px, -6px);
    transform-style: preserve-3d
}

.cards-container .floating .cards-list .card-item .card-back,
.cards-container .floating .cards-list .card-item .card-front {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 12px
}

.cards-container .floating .cards-list .card-item .card-back {
    transform: translate3d(0, 0, -12px)
}

.cards-container .floating .cards-list .card-item .card-front {
    color: #fff;
    font-size: 6vw;
    box-shadow: 0 0 6px 3px rgba(255, 255, 255, .15);
    padding: 6vw 5vw
}

@media (min-width:600px) {
    .cards-container .floating .cards-list .card-item .card-front {
        padding: 3vw;
        font-size: 2.5vw
    }
}

@media (min-width:1280px) {
    .cards-container .floating .cards-list .card-item .card-front {
        padding: 32px 24px;
        font-size: 1.1rem
    }
}

.cards-container .floating .cards-list .card-item .card-front h3 {
    font-weight: 700;
    margin-bottom: 4vw
}

@media (min-width:600px) {
    .cards-container .floating .cards-list .card-item .card-front h3 {
        margin-bottom: 2vw
    }
}

@media (min-width:1280px) {
    .cards-container .floating .cards-list .card-item .card-front h3 {
        margin-bottom: 12px
    }
}

.cards-container .floating .cards-list .card-item .card-front span {
    font-weight: 500
}

.cards-container .floating .cards-list .card-item .card-front * {
    text-shadow: 0 0 3px rgba(0, 0, 0, .1)
}

.card-register-final,
.card-register-normal,
.tarjeta-detail,
.validate-card {
    height: calc(100% - 250px);
    background-color: #fafafa;
    width: 100%
}

@media (min-width:600px) {

    .card-register-final,
    .card-register-normal,
    .tarjeta-detail,
    .validate-card {
        min-width: 100%
    }
}

@media (min-width:600px) {

    .card-register-final .content,
    .card-register-normal .content,
    .tarjeta-detail .content,
    .validate-card .content {
        padding: 0
    }
}

.card-register-final .content .main-row,
.card-register-normal .content .main-row,
.tarjeta-detail .content .main-row,
.validate-card .content .main-row {
    display: flex;
    flex-direction: column
}

@media (min-width:600px) {

    .card-register-final .content .main-row,
    .card-register-normal .content .main-row,
    .tarjeta-detail .content .main-row,
    .validate-card .content .main-row {
        flex-direction: row;
        justify-content: space-between
    }
}

.card-register-final .content .main-row a,
.card-register-normal .content .main-row a,
.tarjeta-detail .content .main-row a,
.validate-card .content .main-row a {
    text-decoration: none
}

.card-register-final .content .main-row a.hide button.register,
.card-register-normal .content .main-row a.hide button.register,
.tarjeta-detail .content .main-row a.hide button.register,
.validate-card .content .main-row a.hide button.register {
    display: none;
    background-color: rgba(0, 0, 0, .15)
}

.card-register-final .content .main-row a button.register,
.card-register-normal .content .main-row a button.register,
.tarjeta-detail .content .main-row a button.register,
.validate-card .content .main-row a button.register {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 6px 15px 6px 12px;
    border: none;
    margin-bottom: 2rem
}

@media (min-width:600px) {

    .card-register-final .content .main-row a button.register,
    .card-register-normal .content .main-row a button.register,
    .tarjeta-detail .content .main-row a button.register,
    .validate-card .content .main-row a button.register {
        margin-bottom: 0
    }
}

@media (min-width:1280px) {

    .card-register-final .content .main-row a button.register,
    .card-register-normal .content .main-row a button.register,
    .tarjeta-detail .content .main-row a button.register,
    .validate-card .content .main-row a button.register {
        align-self: flex-end
    }
}

.card-register-final .content .main-row a button.register .md-icon,
.card-register-normal .content .main-row a button.register .md-icon,
.tarjeta-detail .content .main-row a button.register .md-icon,
.validate-card .content .main-row a button.register .md-icon {
    color: #fff;
    margin: 0 5px 0 0
}

@media (min-width:600px) {

    .card-register-final .content .main-row a button.register .md-icon,
    .card-register-normal .content .main-row a button.register .md-icon,
    .tarjeta-detail .content .main-row a button.register .md-icon,
    .validate-card .content .main-row a button.register .md-icon {
        font-size: 20px !important
    }
}

.card-register-final .content .main-row a button.register span,
.card-register-normal .content .main-row a button.register span,
.tarjeta-detail .content .main-row a button.register span,
.validate-card .content .main-row a button.register span {
    font-size: 16px;
    line-height: .8
}

.card-register-final .content h2,
.card-register-normal .content h2,
.tarjeta-detail .content h2,
.validate-card .content h2 {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.card-register-final .content h2 span,
.card-register-normal .content h2 span,
.tarjeta-detail .content h2 span,
.validate-card .content h2 span {
    display: flex;
    align-items: center
}

.card-register-final .content h2 span .md-icon,
.card-register-normal .content h2 span .md-icon,
.tarjeta-detail .content h2 span .md-icon,
.validate-card .content h2 span .md-icon {
    color: #ebad14;
    margin-right: 10px
}

.card-register-final .content h2 .more-options,
.card-register-normal .content h2 .more-options,
.tarjeta-detail .content h2 .more-options,
.validate-card .content h2 .more-options {
    margin: unset
}

.card-register-final .content h3,
.card-register-final .content h4,
.card-register-normal .content h3,
.card-register-normal .content h4,
.tarjeta-detail .content h3,
.tarjeta-detail .content h4,
.validate-card .content h3,
.validate-card .content h4 {
    font-size: 16px;
    font-weight: 700
}

.card-register-final .content .card-data,
.card-register-normal .content .card-data,
.tarjeta-detail .content .card-data,
.validate-card .content .card-data {
    display: grid;
    grid-template-columns: auto;
    margin: 22px 0 28px 0
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {

    .card-register-final .content .card-data,
    .card-register-normal .content .card-data,
    .tarjeta-detail .content .card-data,
    .validate-card .content .card-data {
        grid-template-columns: repeat(5, auto);
        margin: 44px 0 35px 0
    }
}

@media (min-width:1280px) {

    .card-register-final .content .card-data,
    .card-register-normal .content .card-data,
    .tarjeta-detail .content .card-data,
    .validate-card .content .card-data {
        grid-template-columns: repeat(5, auto);
        margin: 44px 0 35px 0
    }
}

.card-register-final .content .card-data .data-box,
.card-register-normal .content .card-data .data-box,
.tarjeta-detail .content .card-data .data-box,
.validate-card .content .card-data .data-box {
    display: flex;
    margin-bottom: 13px
}

.card-register-final .content .card-data .data-box h3,
.card-register-normal .content .card-data .data-box h3,
.tarjeta-detail .content .card-data .data-box h3,
.validate-card .content .card-data .data-box h3 {
    width: 60%
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {

    .card-register-final .content .card-data .data-box h3,
    .card-register-normal .content .card-data .data-box h3,
    .tarjeta-detail .content .card-data .data-box h3,
    .validate-card .content .card-data .data-box h3 {
        width: unset;
        margin-bottom: 5px
    }
}

@media (min-width:1280px) {

    .card-register-final .content .card-data .data-box h3,
    .card-register-normal .content .card-data .data-box h3,
    .tarjeta-detail .content .card-data .data-box h3,
    .validate-card .content .card-data .data-box h3 {
        width: unset;
        margin-bottom: 5px
    }
}

.card-register-final .content .card-data .data-box .credit,
.card-register-normal .content .card-data .data-box .credit,
.tarjeta-detail .content .card-data .data-box .credit,
.validate-card .content .card-data .data-box .credit {
    font-weight: 700
}

.card-register-final .content .card-data .data-box .credit.neutral,
.card-register-normal .content .card-data .data-box .credit.neutral,
.tarjeta-detail .content .card-data .data-box .credit.neutral,
.validate-card .content .card-data .data-box .credit.neutral {
    color: #3e4b53
}

.card-register-final .content .card-data .data-box .credit.positive,
.card-register-normal .content .card-data .data-box .credit.positive,
.tarjeta-detail .content .card-data .data-box .credit.positive,
.validate-card .content .card-data .data-box .credit.positive {
    color: green
}

.card-register-final .content .card-data .data-box .credit.negative,
.card-register-normal .content .card-data .data-box .credit.negative,
.tarjeta-detail .content .card-data .data-box .credit.negative,
.validate-card .content .card-data .data-box .credit.negative {
    color: #d50000
}

.card-register-final .content .card-data .data-box span .md-icon,
.card-register-normal .content .card-data .data-box span .md-icon,
.tarjeta-detail .content .card-data .data-box span .md-icon,
.validate-card .content .card-data .data-box span .md-icon {
    display: none
}

.card-register-final .content .card-data .data-box span.titular,
.card-register-normal .content .card-data .data-box span.titular,
.tarjeta-detail .content .card-data .data-box span.titular,
.validate-card .content .card-data .data-box span.titular {
    display: flex;
    align-items: center;
    width: 100px;
    border-radius: 50px;
    padding: 3px;
    color: #fff;
    background-color: #f93c03
}

.card-register-final .content .card-data .data-box span.titular .md-icon,
.card-register-normal .content .card-data .data-box span.titular .md-icon,
.tarjeta-detail .content .card-data .data-box span.titular .md-icon,
.validate-card .content .card-data .data-box span.titular .md-icon {
    display: inline-block;
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: #fff;
    font-size: 20px !important;
    margin: 0 5px
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {

    .card-register-final .content .card-data .data-box,
    .card-register-normal .content .card-data .data-box,
    .tarjeta-detail .content .card-data .data-box,
    .validate-card .content .card-data .data-box {
        margin: 0;
        flex-direction: column
    }
}

@media (min-width:1280px) {

    .card-register-final .content .card-data .data-box,
    .card-register-normal .content .card-data .data-box,
    .tarjeta-detail .content .card-data .data-box,
    .validate-card .content .card-data .data-box {
        margin: 0;
        flex-direction: column
    }
}

.card-register-final .account-movements,
.card-register-normal .account-movements,
.tarjeta-detail .account-movements,
.validate-card .account-movements {
    max-width: 100vw
}

@media (min-width:600px) {

    .card-register-final .account-movements,
    .card-register-normal .account-movements,
    .tarjeta-detail .account-movements,
    .validate-card .account-movements {
        padding: 0
    }
}

.card-register-final .account-movements h4,
.card-register-normal .account-movements h4,
.tarjeta-detail .account-movements h4,
.validate-card .account-movements h4 {
    font-weight: 700;
    margin-bottom: 14px
}

.card-register-final .account-movements span.no-data,
.card-register-normal .account-movements span.no-data,
.tarjeta-detail .account-movements span.no-data,
.validate-card .account-movements span.no-data {
    display: block;
    margin-top: 10px
}

.card-register-final .account-movements .md-table.md-card,
.card-register-normal .account-movements .md-table.md-card,
.tarjeta-detail .account-movements .md-table.md-card,
.validate-card .account-movements .md-table.md-card {
    padding: 0 10px
}

@media (min-width:600px) {

    .card-register-final .account-movements .md-table.md-card,
    .card-register-normal .account-movements .md-table.md-card,
    .tarjeta-detail .account-movements .md-table.md-card,
    .validate-card .account-movements .md-table.md-card {
        padding: 0
    }
}

.card-register-final .account-movements .md-table.md-card .md-table-row.no-detail .md-table-cell.credit .md-table-cell-container,
.card-register-normal .account-movements .md-table.md-card .md-table-row.no-detail .md-table-cell.credit .md-table-cell-container,
.tarjeta-detail .account-movements .md-table.md-card .md-table-row.no-detail .md-table-cell.credit .md-table-cell-container,
.validate-card .account-movements .md-table.md-card .md-table-row.no-detail .md-table-cell.credit .md-table-cell-container {
    font-size: 0
}

.card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail),
.card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail),
.tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail),
.validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) {
    position: relative;
    cursor: pointer
}

.card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
.card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
.tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
.validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after {
    font-family: FontAwesome;
    content: "\f0da";
    font-size: 20px;
    color: gray;
    position: absolute;
    top: 22px;
    right: 0
}

@media (min-width:600px) {

    .card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after {
        top: 10px;
        right: 10px
    }
}

@media (min-width:600px) {

    .card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) div,
    .card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) div,
    .tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) div,
    .validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) div {
        font-size: 16px
    }
}

@media (min-width:600px) {

    .card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) .md-table-cell.credit.empty,
    .card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) .md-table-cell.credit.empty,
    .tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) .md-table-cell.credit.empty,
    .validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail) .md-table-cell.credit.empty {
        padding-left: 30px
    }
}

@media (min-width:1280px) {

    .card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after,
    .validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail)::after {
        content: ""
    }
}

.card-register-final .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail):hover:not(.header)::after,
.card-register-normal .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail):hover:not(.header)::after,
.tarjeta-detail .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail):hover:not(.header)::after,
.validate-card .account-movements .md-table.md-card .md-table-row:not(.header):not(.no-detail):hover:not(.header)::after {
    content: "\f0da"
}

.md-table.md-card {
    width: 100%;
    height: auto
}

@media (min-width:600px) {
    .md-table.md-card {
        padding: 0
    }
}

@media (min-width:1280px) {
    .md-table.md-card {
        height: auto
    }
}

@media (min-width:1367px) {
    .md-table.md-card {
        height: auto
    }
}

.md-table.md-card .md-table-row {
    padding: 0 !important
}

.md-table.md-card .md-table-row div {
    font-size: 14px
}

@media (min-width:600px) {
    .md-table.md-card .md-table-row div {
        font-size: 16px
    }
}

.md-table.md-card .md-table-row .md-table-head-label {
    font-size: 14px;
    font-weight: 700
}

.md-table.md-card .md-table-row td {
    border-color: rgba(0, 0, 0, .1607843137)
}

.md-table-cell-container {
    padding: 0
}

@media (min-width:600px) {
    .md-table-cell-container {
        padding: 6px 32px 6px 24px
    }
}

.md-table-head-label {
    padding: 0
}

@media (min-width:600px) {
    .md-table-head-label {
        padding-right: 32px;
        padding-left: 24px
    }
}

.md-table-head-container {
    text-align: center
}

@media (min-width:600px) {
    .md-table-head-container {
        text-align: left
    }
}

.transaction-type {
    text-transform: uppercase
}

.md-table-cell {
    text-align: center;
    max-width: 95px;
    height: 70px
}

@media (min-width:600px) {
    .md-table-cell {
        text-align: left;
        max-width: unset;
        height: 48px
    }
}

.md-table-cell .md-table-cell-container {
    display: inline
}

@media (min-width:600px) {
    .md-table-cell .md-table-cell-container {
        display: inline-block
    }
}

.validate-card .content .md-icon.no-display {
    display: none
}

.validate-card .content p {
    margin: 2rem 0;
    white-space: pre-line
}

@media (min-width:600px) {
    .validate-card .content p {
        white-space: normal
    }
}

.validate-card .content p.error {
    border: 1px solid rgba(255, 0, 0, .1);
    border: 1px solid rgba(213, 0, 0, .1);
    border-radius: 5px;
    padding: 20px;
    display: inline-block;
    width: auto;
    white-space: normal;
    background-color: rgba(213, 0, 0, .1);
    color: rgba(213, 0, 0, .9)
}

.validate-card .content .active.loaders-box {
    margin: 2rem 0
}

.validate-card .content .action {
    display: flex;
    flex-direction: column
}

.validate-card .content .action button.validate {
    width: 100%;
    padding: 6px 20px 6px 18px;
    border: none;
    margin-top: 2rem
}

.validate-card .content .action button.validate:disabled {
    background-color: rgba(0, 0, 0, .15);
    pointer-events: none
}

@media (min-width:1280px) {
    .validate-card .content .action button.validate {
        align-self: flex-end;
        width: auto
    }
}

.validate-card .content .action button.validate .md-icon {
    color: #fff;
    margin: 0 5px 0 0
}

@media (min-width:600px) {
    .validate-card .content .action button.validate .md-icon {
        font-size: 20px !important
    }
}

.validate-card .content .action button.validate span {
    font-size: 16px;
    line-height: .8
}

.validate-card .content .action .md-table-row .radio {
    text-align: center
}

.validate-card .content .action .md-table-row .radio .md-table-head-container {
    text-align: center
}

.validate-card .content .action .md-table-row .radio .md-table-cell-container .md-radio {
    margin: 16px 0
}

.card-register-final p.description,
.card-register-normal p.description {
    margin: 1.5rem 0 10px 0
}

.card-register-final div.flex-box,
.card-register-normal div.flex-box {
    display: flex;
    align-items: center
}

.card-register-final div.flex-box form,
.card-register-normal div.flex-box form {
    width: 100%;
    display: flex;
    flex-direction: column
}

.card-register-final div.flex-box form .md-icon.ref,
.card-register-normal div.flex-box form .md-icon.ref {
    font-size: 18px !important;
    cursor: pointer
}

.card-register-final div.flex-box form .radio-box .md-radio label,
.card-register-normal div.flex-box form .radio-box .md-radio label {
    display: flex;
    align-items: center
}

.card-register-final div.flex-box form .data-inputs fieldset,
.card-register-normal div.flex-box form .data-inputs fieldset {
    margin-bottom: 20px;
    padding: 0
}

.card-register-final div.flex-box form .data-inputs fieldset .md-field,
.card-register-normal div.flex-box form .data-inputs fieldset .md-field {
    height: unset
}

.card-register-final div.flex-box form .data-inputs fieldset .md-datepicker button.md-clear,
.card-register-normal div.flex-box form .data-inputs fieldset .md-datepicker button.md-clear {
    display: none
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker {
    width: 100%;
    margin: 0
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn {
    pointer-events: none
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn .val-icons,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn .val-icons {
    height: 20px;
    right: 4px;
    bottom: unset
}

@media (min-width:600px) {

    .card-register-final div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn .val-icons,
    .card-register-normal div.flex-box form .data-inputs fieldset .time-picker .controls .dropdown-btn .val-icons {
        height: 22px;
        right: 10px;
        bottom: 1px
    }
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker input,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker input {
    width: 100%;
    border: none;
    background-color: transparent;
    position: relative;
    bottom: 6px;
    padding-left: 52px
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker input::placeholder,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker input::placeholder {
    color: #3e4b53
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .custom-icon,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .custom-icon {
    padding-left: 12px
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .dropdown,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .dropdown {
    width: 100%;
    z-index: 1001;
    border-radius: 8px;
    top: 100%
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .dropdown .select-list,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .dropdown .select-list {
    width: 100%
}

.card-register-final div.flex-box form .data-inputs fieldset .time-picker .dropdown .select-list li:not([disabled]).active,
.card-register-normal div.flex-box form .data-inputs fieldset .time-picker .dropdown .select-list li:not([disabled]).active {
    background-color: #ebad14
}

.card-register-final div.flex-box form .data-inputs.boleto,
.card-register-normal div.flex-box form .data-inputs.boleto {
    padding: 0
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: .6rem;
    margin: 1rem 0
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset.invalid:after,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset.invalid:after {
    background-color: #d50000
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset.success:after,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset.success:after {
    background-color: green
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset:after,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset:after {
    content: "1";
    position: relative;
    left: 0;
    bottom: 0;
    height: 123.1px;
    width: 15px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #ebad14;
    border-radius: 5px 0 0 5px
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset:last-child,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset:last-child {
    margin: 0 0 20px 0
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset:last-child:after,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset:last-child:after {
    content: "2"
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {

    .card-register-final div.flex-box form .data-inputs.boleto fieldset,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset {
        flex-direction: row;
        padding-left: 12px
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset:after,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset:after {
        width: 20px;
        height: 50px;
        bottom: 1px
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset div.flex-box,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset div.flex-box {
        width: 50%
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset div.flex-box:nth-child(2),
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset div.flex-box:nth-child(2) {
        margin-bottom: 0
    }
}

@media (min-width:1280px) {

    .card-register-final div.flex-box form .data-inputs.boleto fieldset,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset {
        flex-direction: row;
        padding-left: 12px
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset:after,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset:after {
        width: 20px;
        height: 50px;
        bottom: 1px
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset div.flex-box,
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset div.flex-box {
        width: 50%
    }

    .card-register-final div.flex-box form .data-inputs.boleto fieldset div.flex-box:nth-child(2),
    .card-register-normal div.flex-box form .data-inputs.boleto fieldset div.flex-box:nth-child(2) {
        margin-bottom: 0
    }
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset legend,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset legend {
    margin-bottom: 1rem;
    padding-left: 8px;
    font-weight: 700
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset .md-field,
.card-register-normal div.flex-box form .data-inputs.boleto fieldset .md-field {
    margin: 0
}

.card-register-final div.flex-box form .data-inputs.boleto fieldset .flex-box:nth-child(2),
.card-register-normal div.flex-box form .data-inputs.boleto fieldset .flex-box:nth-child(2) {
    margin-bottom: 20px
}

.card-register-final div.flex-box form .md-button.submit.vinculate,
.card-register-normal div.flex-box form .md-button.submit.vinculate {
    width: 100%;
    align-self: unset;
    margin: 25px 0 8px 0;
    padding: 10px 15px
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {

    .card-register-final div.flex-box form .md-button.submit.vinculate,
    .card-register-normal div.flex-box form .md-button.submit.vinculate {
        width: unset;
        margin-right: 25px;
        align-self: flex-end
    }
}

@media (min-width:1280px) {

    .card-register-final div.flex-box form .md-button.submit.vinculate,
    .card-register-normal div.flex-box form .md-button.submit.vinculate {
        width: unset;
        margin-right: 25px;
        align-self: flex-end
    }
}

.md-dialog .md-dialog-container {
    padding-top: 2rem
}

.md-dialog .md-dialog-container div.image {
    background-image: url(../assets/img-salta/boleto.jpg);
    width: 300px;
    height: 250px;
    margin: 10px
}

.md-dialog .md-dialog-container div.image.date {
    background-image: url(../assets/img-salta/boleto.jpg)
}

.md-dialog .md-dialog-container div.image.time {
    background-image: url(../assets/img-salta/boleto.jpg)
}

.md-dialog .md-dialog-container div.image.ticket {
    background-image: url(../assets/img-salta/ticket.jpg)
}

.md-dialog .md-dialog-container div.image.ticket.date {
    background-image: url(../assets/img-salta/ticket.jpg)
}

.md-dialog .md-dialog-container div.image.ticket.time {
    background-image: url(../assets/img-salta/ticket.jpg)
}
.md-dialog .md-dialog-container div.image-dni {
/*   background-image: url(../assets/img-salta/boleto.jpg); */
    width: 370px;
    height: 370px;
    margin: 5px
}
.md-dialog .md-dialog-container div.image-dni.dni {
    background-image: url(../assets/icon/dni.jpg)
}
.md-dialog .md-dialog-container .md-dialog-actions button:hover {
    background: unset
}

.md-datepicker-dialog {
    z-index: 1001
}

div.flex-box div.user-info {
    flex-grow: 1
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    div.flex-box div.user-info {
        display: flex
    }

    div.flex-box div.user-info .md-field:nth-child(2),
    div.flex-box div.user-info .md-field:nth-child(3) {
        margin-left: 15px
    }
}

@media (min-width:1280px) {
    div.flex-box div.user-info {
        display: flex
    }

    div.flex-box div.user-info .md-field:nth-child(2),
    div.flex-box div.user-info .md-field:nth-child(3) {
        margin-left: 15px
    }
}

div.flex-box div.user-info + span .md-icon.ref {
    opacity: 0;
    pointer-events: none
}

div.flex-box .md-error {
    opacity: 1;
    bottom: -32px;
    left: auto;
    right: 0;
    color: #d50000
}

div.flex-box .data-inputs .container {
    flex-grow: 1;
    position: relative
}

div.flex-box .data-inputs .container span.md-error {
    font-size: 12px;
    position: absolute;
    height: 20px;
    font-size: 12px;
    bottom: -23px
}

div.flex-box .data-inputs .md-field.relationship {
    padding: 8px 0
}

div.flex-box .data-inputs .md-field.relationship .md-select input {
    height: auto
}

main.map-section {
    position: relative;
    width: 90%
}

main.map-section > .loading {
    position: absolute;
    top: 0;
    left: -6px;
    width: calc(100% + 6px);
    height: 100%;
    z-index: 2;
    background: #fafafa;
    padding-top: 6rem
}

@media (min-width:1280px) {
    main.map-section {
        max-width: 1000px
    }
}

main.map-section .map-view-top-elements .md-field {
    padding-top: 0;
    display: flex;
    align-items: center
}

@media (min-width:1280px) {
    main.map-section .map-view-top-elements .md-field {
        margin: 0
    }
}

main.map-section .map-view-top-elements .md-field.md-has-value label {
    display: none
}

main.map-section h2 {
    font-size: 1.66rem
}

.map-view {
    z-index: 1;
    width: 100%;
    height: 500px;
    min-height: 500px;
    max-height: 800px;
    border-radius: 16px;
    box-shadow: 0 3px 6px #00000028
}

@media (min-width:1280px) {
    .map-view {
        height: 60vh
    }
}

.map-view button {
    background: #fff;
    padding: .6rem;
    border-radius: 0
}

.map-view svg {
    width: unset
}

.map-view.error-container {
    display: flex;
    justify-content: center;
    align-items: center
}

.map-view-top-elements {
    margin-bottom: 1rem
}

@media (min-width:600px) {
    .map-view-top-elements {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem
    }
}

.map-view-top-elements button.refresh {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 15px 6px 12px;
    border: none;
    width: 100%;
    margin: 10px 0 0 0
}

@media (min-width:600px) {
    .map-view-top-elements button.refresh {
        margin: 0;
        width: unset
    }
}

@media (min-width:1280px) {
    .map-view-top-elements button.refresh {
        align-self: flex-end
    }
}

.map-view-top-elements button.refresh:disabled {
    background-color: rgba(0, 0, 0, .15);
    pointer-events: none
}

.map-view-top-elements button.refresh .md-icon {
    color: #fff;
    margin: 0 5px 0 0
}

@media (min-width:600px) {
    .map-view-top-elements button.refresh .md-icon {
        font-size: 20px !important
    }
}

.map-view-top-elements button.refresh span {
    font-size: 16px;
    line-height: .8
}

.cuando-viene .map-view-top-elements,
.mapa-de-buses .map-view-top-elements {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.cuando-viene .map-view-top-elements h2,
.mapa-de-buses .map-view-top-elements h2 {
    margin-bottom: 20px
}

.cuando-viene .map-view-top-elements .select-box-container,
.mapa-de-buses .map-view-top-elements .select-box-container {
    width: 100%
}

.cuando-viene .map-view-top-elements .select-box,
.mapa-de-buses .map-view-top-elements .select-box {
    width: 100%;
    display: flex;
    flex-direction: column
}

@media (min-width:1280px) {

    .cuando-viene .map-view-top-elements .select-box,
    .mapa-de-buses .map-view-top-elements .select-box {
        flex-direction: row
    }
}

.cuando-viene .map-view-top-elements .select-box .md-field,
.mapa-de-buses .map-view-top-elements .select-box .md-field {
    margin-right: 10px;
    margin: 10px 10px 10px 0
}

@media (min-width:1280px) {

    .cuando-viene .map-view-top-elements .select-box .md-field,
    .mapa-de-buses .map-view-top-elements .select-box .md-field {
        margin: 22px 10px 22px 0
    }
}

.cuando-viene .cuando-viene-map-container {
    display: flex;
    flex-direction: column-reverse
}

@media (min-width:600px) {
    .cuando-viene .cuando-viene-map-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px
    }
}

@media (min-width:1280px) {
    .cuando-viene .cuando-viene-map-container {
        column-gap: 32px
    }
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo {
    margin-bottom: 1rem;
    min-height: 160px;
    border-bottom: 2px solid #ebad14
}

@media (min-width:600px) {
    .cuando-viene .cuando-viene-map-container .cuandovieneinfo {
        border-bottom: none
    }
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo h3 {
    color: #ebad14;
    font-weight: 500
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo > span {
    display: block;
    padding-top: .6rem
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo .loading {
    margin: 1rem 0 0
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo table {
    width: 100%;
    margin: 1rem 0;
    table-layout: fixed;
    font-size: 3.5vw
}

@media (min-width:600px) {
    .cuando-viene .cuando-viene-map-container .cuandovieneinfo table {
        font-size: 1.8vw
    }
}

@media (min-width:1280px) {
    .cuando-viene .cuando-viene-map-container .cuandovieneinfo table {
        font-size: 1rem
    }
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo table th {
    color: #ebad14;
    text-align: left
}

.cuando-viene .cuando-viene-map-container .cuandovieneinfo table td {
    padding: .33rem .2rem
}

.leaflet-control-attribution {
    display: none
}

button.easy-button-button {
    background-color: #fff;
    padding: 10px
}

.page-password-reset .header-right nav {
    display: none
}

.page-password-reset main {
    display: flex;
    justify-content: center;
    align-items: center
}

.page-password-reset form {
    width: 100%
}

.page-password-reset form .md-field:first-child {
    margin-top: 0
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .page-password-reset form {
        max-width: 350px
    }
}

@media (min-width:1280px) {
    .page-password-reset form {
        max-width: 350px
    }
}

.page-password-reset form .md-field.pristine {
    border: 1px solid transparent
}

.page-password-reset form .md-field.success.current-password {
    border: 1px solid transparent
}

.page-password-reset form .md-error {
    opacity: 1;
    bottom: -32px;
    left: auto;
    right: 0;
    color: #d50000
}

.page-password-reset form .md-error .success {
    color: green
}

.page-password-reset form button.md-button.md-raised.md-accent.submit.md-theme-default {
    width: 100%;
    margin: 0;
    padding: 0
}

.page-password-reset .password-reset-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
    background: #FAFAFA
}

.page-password-reset .password-reset-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    animation: slideUp 0.3s ease-out
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.page-password-reset .password-reset-header {
    text-align: center;
    margin-bottom: 2rem
}

.page-password-reset .password-reset-icon {
    font-size: 64px !important;
    width: 64px;
    height: 64px;
    color: #1976d2;
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.page-password-reset .password-reset-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: #212121;
    margin: 0 0 0.5rem 0
}

.page-password-reset .password-reset-subtitle {
    font-size: 0.95rem;
    color: #757575;
    margin: 0;
    line-height: 1.5
}

.page-password-reset .password-reset-form {
    width: 100%
}

.page-password-reset .password-reset-fields {
    margin-bottom: 1.5rem
}

.page-password-reset .password-reset-actions {
    display: flex;
    justify-content: center;
    margin-top: 2rem
}

.page-password-reset .password-reset-submit {
    min-width: 200px;
    height: 48px;
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
    transition: all 0.3s ease
}

.page-password-reset .password-reset-submit:hover:not(:disabled) {
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
    transform: translateY(-2px)
}

.page-password-reset .password-reset-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed
}

.page-password-reset form .md-field {
    margin-bottom: 2.5rem
}

.page-password-reset form .md-field:last-of-type {
    margin-bottom: 0
}

.page-password-reset form .md-error {
    margin-top: 0.5rem;
    font-size: 0.875rem !important;
    min-height: 1.5rem;
    display: block;
    line-height: 1.4
}

.page-password-reset form .input-message {
    font-size: 0.875rem !important;
    margin-top: 0.5rem;
    min-height: 1.5rem;
    display: block;
    line-height: 1.4
}

.page-password-reset form .md-error .error {
    color: #d32f2f
}

.page-password-reset form .md-error .success {
    color: #2e7d32
}

.page-password-reset form .checking {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%)
}

@media (max-width: 600px) {
    .page-password-reset .password-reset-card {
        padding: 1.5rem;
        margin: 1rem
    }

    .page-password-reset .password-reset-title {
        font-size: 1.5rem
    }

    .page-password-reset .password-reset-icon {
        font-size: 48px !important;
        width: 48px;
        height: 48px
    }
}

.solicitud-abonos section > * {
    margin-bottom: 2rem
}

.abonos-showcase-selector .md-tabs-navigation button {
    margin-right: 15px;
    height: 24px
}

.abonos-showcase-selector .md-tabs-navigation button:hover {
    color: #f93c03
}

.abonos-showcase-selector .md-tabs-navigation button:not(.md-active):hover {
    color: #ebad14
}

.abonos-showcase-selector .md-tabs-navigation button .md-ripple {
    padding: 0
}

.abonos-showcase-selector .md-tabs-navigation button:not([disabled]):hover:before {
    background: 0 0
}

.abonos-historial.no-results,
.abonos-showcase.no-results {
    margin: 0
}

.abonos-historial.no-results.error .abonos-showcase-status:not(.groups),
.abonos-showcase.no-results.error .abonos-showcase-status:not(.groups) {
    min-height: 100px;
    margin-bottom: 2rem
}

.abonos-historial.no-results .abonos-historial-status,
.abonos-showcase.no-results .abonos-historial-status {
    min-height: 100px
}

.abonos-showcase:not(.no-results) {
    min-height: 340px
}

.abonos-showcase:not(.no-results) .align-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 292px
}

.abonos-showcase:not(.no-results) .align-center .abonos-showcase-status {
    flex: 1
}

.abonos-showcase:not(.no-results) .align-center .abono-cards .abono-cards-flickity {
    margin-bottom: 1rem
}

.abonos-historial {
    min-height: 100px
}

.abonos-historial h3 {
    margin-bottom: 2rem
}

.abonos-historial-status,
.abonos-showcase-status {
    display: flex;
    justify-content: center;
    align-items: center
}

.abonos-showcase-selector {
    margin-bottom: 2rem
}

.abonos-showcase-selector .md-button {
    font-size: 1rem
}

.abonos-showcase-selector .md-active {
    color: #f93c03
}

.abono-cards {
    width: 100%;
    position: relative
}

.abono-cards .flickity-prev-next-button {
    background: 0 0
}

.abono-cards .flickity-prev-next-button:hover {
    color: #f93c03
}

.abono-cards .flickity-prev-next-button.previous {
    left: -4rem
}

.abono-cards .flickity-prev-next-button.next {
    right: -4rem
}

.abono-cards .abono-cards-flickity.mobile {
    display: block
}

@media (min-width:1280px) {
    .abono-cards .abono-cards-flickity.mobile {
        display: none
    }
}

@media (min-width:1280px) {
    .abono-cards .abono-cards-flickity.desktop {
        display: block
    }
}

.abono-cards .abono-card {
    width: 75%;
    background: #fff;
    border: 3px solid #ebad14;
    padding: 1.2rem;
    border-radius: 16px;
    display: grid;
    grid-template-rows: 42px 1.5rem 3.8rem 40px;
    row-gap: 1rem;
    margin-right: 5%
}

@media (min-width:600px) {
    .abono-cards .abono-card {
        width: 50%
    }
}

@media (min-width:1280px) {
    .abono-cards .abono-card {
        margin-left: 0;
        margin-right: 2%;
        width: 23.5%
    }
}

.abono-cards .abono-card a {
    cursor: pointer
}

.abono-cards .abono-card figure {
    background-color: #ebad14;
    background-image: url(../assets/icon/credit-card.svg);
    background-size: 66%;
    color: #fff;
    border-radius: 50%;
    padding: 22px;
    width: 40px;
    height: 40px
}

.abono-cards .abono-card h3 {
    font-weight: 700;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.abono-cards .abono-card p {
    overflow: hidden
}

.abono-cards .abono-card a {
    width: 100%
}

.documentation-description {
    margin-bottom: 1rem
}

.abono-request-upload-file-input {
    width: 100%;
    position: relative;
    cursor: pointer
}

.abono-request-upload-file-input:hover {
    cursor: pointer
}

.abono-request-upload-file-input figure {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: #ebad14;
    opacity: .33
}

.abono-request-upload-file-input .cloud-icon {
    display: block;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 50;
    margin: 0
}

.abono-request-upload-file-input label {
    width: 100%;
    border: 2px dashed #3e4b53;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 175px;
    border-radius: 8px;
    padding: .5rem 1rem;
    text-align: center
}

@media (min-width:1280px) {
    .abono-request-upload-file-input label {
        padding: 1rem 2rem
    }
}

.abono-request-upload-file-input label span {
    white-space: break-spaces
}

.abono-request-upload-file-input label .blue {
    color: #0075db;
    cursor: pointer
}

.abono-request-upload-file-input label .blue:hover {
    text-decoration: underline
}

.abono-request-upload-file-input label small {
    opacity: .66;
    display: block
}

.fileList {
    width: 100%;
    display: flex;
    flex-direction: column
}

.fileList.margin {
    margin-top: 10px
}

.fileList li {
    display: flex;
    align-items: center;
    position: relative;
    margin: 5px 0
}

.fileList li span {
    max-width: 80%;
    overflow: hidden
}

.fileList li .icon-image {
    font-size: 1.8rem !important;
    color: #ebad14;
    margin: 0 10px 0 0
}

.fileList li .md-icon-button {
    margin: 0;
    position: absolute;
    right: 0;
    top: -8px
}

.fileList li .md-icon-button .md-icon {
    color: #3e4b53
}

.abono-request-upload,
.abonos-detail-modal {
    transition: opacity .2s ease-out
}

.abono-request-upload.submitting > div,
.abonos-detail-modal.submitting > div {
    opacity: 0;
    pointer-events: none
}

.abono-request-upload article:not(.description),
.abono-request-upload summary,
.abonos-detail-modal article:not(.description),
.abonos-detail-modal summary {
    margin-top: 1rem
}

.documentation-message .md-list-item-content {
    flex-direction: column;
    align-items: flex-start
}

.documentation-message .md-list-item-content span:not(.md-count) {
    margin: 10px 0
}

.documentation-message .md-list-item-content .md-field:not(.select) {
    padding: 10px;
    min-height: 95px
}

.documentation-message .md-list-item-content .md-field:not(.select).md-focused label,
.documentation-message .md-list-item-content .md-field:not(.select).md-has-value label {
    display: none
}

.documentation-message .md-list-item-content .md-field:not(.select) .md-count {
    bottom: -28px
}

.md-field.documentation-message.md-has-textarea:not(.md-autogrow).md-focused label,
.md-field.documentation-message.md-has-textarea:not(.md-autogrow).md-has-value label {
    display: none
}

.md-field.documentation-message.md-has-textarea:not(.md-autogrow).md-focused .md-textarea,
.md-field.documentation-message.md-has-textarea:not(.md-autogrow).md-has-value .md-textarea {
    padding-top: 0
}

.abonos-historial-table .md-table.md-card {
    height: unset;
    margin-bottom: 2rem
}

.abonos-historial-table .md-table.md-card .md-content {
    padding: 10px
}

@media (min-width:600px) {
    .abonos-historial-table .md-table.md-card .md-content {
        padding: 0
    }
}

.abonos-historial-table .md-table.md-card .md-content .md-table-head:last-child:not(:first-child) .md-table-head-label {
    padding-right: 0
}

@media (min-width:600px) {
    .abonos-historial-table .md-table.md-card .md-content .md-table-head:last-child:not(:first-child) .md-table-head-label {
        padding-right: 5px
    }
}

.abonos-historial-table .table-detail {
    text-align: center
}

.abonos-historial-table .table-detail .md-table-head-label {
    text-align: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

.abonos-historial-table .md-button {
    min-width: unset;
    border-radius: 50%
}

.abonos-historial-table .md-button .md-icon {
    color: #f93c03
}

.abonos-historial-table .md-table-cell {
    text-transform: capitalize
}

.abonos-historial-table .md-table-cell.state {
    text-transform: uppercase;
    font-weight: 700
}

.abonos-historial-table .md-table-cell:last-child .md-table-cell-container {
    padding-right: 0
}

@media (min-width:600px) {
    .abonos-historial-table .md-table-cell:last-child .md-table-cell-container {
        padding-right: 24px
    }
}

.admin-page {
    position: relative;
    max-width: 100vw;
    overflow: hidden
}

.admin-page .abonos-admin {
    width: 80%
}

@media (min-width:600px) {
    .admin-page .sidebar-menu {
        width: 55px
    }

    .admin-page .abonos-admin {
        width: 90%
    }
}

main.welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 5%;
    min-width: calc(100vw - 55px - 3rem)
}

main.welcome h1 {
    color: #ebad14;
    font-weight: 700;
    font-size: 2.33rem;
    max-width: 500px;
    line-height: 1.5
}

main.welcome h2 {
    font-size: 1.5rem;
    font-weight: 400
}

main.admin-content {
    max-width: 1200px;
    position: relative;
    height: 100%
}

main.admin-content * > button.emit,
main.admin-content button.detail,
main.admin-content button.page {
    min-width: unset;
    border-radius: 50%
}

main.admin-content * > span {
    white-space: pre-wrap
}

main.admin-content .filters-container {
    display: flex;
    flex-direction: column;
    margin: 1rem 0
}

main.admin-content .show-filters {
    font-size: .8rem;
    color: #3381f2;
    background: 0 0;
    align-self: flex-end;
    padding: 0;
    position: absolute;
    top: 50px
}

main.admin-content .show-filters .md-icon {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: #3381f2
}

main.admin-content .filters {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

@media (min-width:1280px) {
    main.admin-content .filters {
        gap: 16px
    }
}

main.admin-content .filters input::-webkit-inner-spin-button,
main.admin-content .filters input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

main.admin-content .filters input[type=number] {
    -moz-appearance: textfield
}

main.admin-content .submit-filters {
    width: 100%;
    height: 46px;
    padding: 10px;
    margin: 11px 0
}

main.admin-content .submit-filters .md-icon {
    color: #fff;
    padding-right: 12px
}

@media (min-width:1280px) {
    main.admin-content .submit-filters {
        width: unset;
        font-size: 0
    }

    main.admin-content .submit-filters .md-icon {
        padding-right: 0
    }
}

main.admin-content .md-field {
    margin: 10px 0
}

main.admin-content .md-field label {
    font-size: .8rem;
    padding: 0 10px
}

main.admin-content .md-field svg {
    width: 10px
}

main.admin-content .md-field input {
    width: 100%
}

@media (min-width:1280px) {
    main.admin-content .md-field {
        flex: 1;
        max-width: unset
    }
}

main.admin-content .md-field.filter input,
main.admin-content .md-field.md-datepicker input,
main.admin-content .md-field.select input {
    font-size: .8rem;
    padding: 0 10px
}

main.admin-content .md-field.md-datepicker i {
    position: relative;
    bottom: 3px;
    right: 10px;
    order: 1
}

main.admin-content .md-field.md-datepicker button.md-clear {
    display: none
}

main.admin-content .md-field.md-datepicker label {
    left: 0
}

main.admin-content .md-field.searchbar {
    flex-grow: 1.5;
    padding-top: 0;
    align-items: center;
    border-radius: 50px
}

main.admin-content .md-field.searchbar::before {
    left: 12px;
    right: 12px
}

main.admin-content .md-field.searchbar input {
    padding: 0 16px 0 8px
}

main.admin-content .md-field.searchbar input::placeholder {
    font-size: .8rem
}

main.admin-content .md-field.select {
    padding: 8px 0
}

main.admin-content .md-field.select .md-select i svg {
    position: relative;
    right: 10px
}

main.admin-content .md-field.select .md-select input {
    height: auto
}

main.admin-content .md-field.select .md-select input::placeholder {
    font-size: .8rem
}

main.admin-content .abonos-list-table,
main.admin-content .historial-list-table {
    position: relative
}

main.admin-content .abonos-list-table .md-table,
main.admin-content .historial-list-table .md-table {
    height: 100%;
    width: 100%;
    table-layout: fixed;
    min-height: 350px
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table,
    main.admin-content .historial-list-table .md-table {
        min-height: 422px
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.id div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.id div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.id div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.id div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.id div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.id div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.id div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.id div.md-table-head-container {
    width: 8em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.id div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.id div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.id div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.id div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.id div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.id div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.id div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.id div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.id div,
main.admin-content .historial-list-table .md-table .md-table-cell.id div {
    white-space: pre-wrap;
   /* overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.date div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.date div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.date div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.date div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.date div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.date div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.date div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.date div.md-table-head-container {
    width: 12em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.date div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.date div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.date div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.date div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.date div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.date div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.date div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.date div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.date div,
main.admin-content .historial-list-table .md-table .md-table-cell.date div {
    white-space: pre-wrap;
   /* overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.abono-type div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.abono-type div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.abono-type div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.abono-type div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-type div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-type div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.abono-type div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.abono-type div.md-table-head-container {
    width: 9em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.abono-type div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.abono-type div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.abono-type div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.abono-type div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.abono-type div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.abono-type div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.abono-type div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.abono-type div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.abono-type div,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-type div {
    white-space: pre-wrap;
  /*  overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.applicant div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.applicant div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.applicant div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.applicant div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.applicant div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.applicant div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.applicant div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.applicant div.md-table-head-container {
    width: 11em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.applicant div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.applicant div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.applicant div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.applicant div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.applicant div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.applicant div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.applicant div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.applicant div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.applicant div,
main.admin-content .historial-list-table .md-table .md-table-cell.applicant div {
    white-space: pre-wrap;
    overflow-wrap: break-word
}

main.admin-content .abonos-list-table .md-table .md-table-cell.cuil div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.cuil div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.cuil div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.cuil div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.cuil div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.cuil div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.cuil div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.cuil div.md-table-head-container {
    width: 9em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.cuil div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.cuil div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.cuil div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.cuil div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.cuil div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.cuil div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.cuil div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.cuil div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.cuil div,
main.admin-content .historial-list-table .md-table .md-table-cell.cuil div {
    white-space: pre-wrap;
   /* overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.abono-state div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.abono-state div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.abono-state div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.abono-state div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-state div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-state div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.abono-state div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.abono-state div.md-table-head-container {
    width: 7.5em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.abono-state div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.abono-state div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.abono-state div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.abono-state div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.abono-state div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.abono-state div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.abono-state div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.abono-state div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.abono-state div,
main.admin-content .historial-list-table .md-table .md-table-cell.abono-state div {
    white-space: pre-wrap;
   /* overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.emit div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.emit div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.emit div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.emit div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.emit div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.emit div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.emit div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.emit div.md-table-head-container {
    width: 5em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.emit div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.emit div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.emit div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.emit div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.emit div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.emit div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.emit div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.emit div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.emit div,
main.admin-content .historial-list-table .md-table .md-table-cell.emit div {
    white-space: pre-wrap;
   /* overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-cell.detail div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.detail div.md-table-head-container,
main.admin-content .abonos-list-table .md-table .md-table-head.detail div.md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-head.detail div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-cell.detail div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.detail div.md-table-head-container,
main.admin-content .historial-list-table .md-table .md-table-head.detail div.md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-head.detail div.md-table-head-container {
    width: 5em;
    text-align: center
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.detail div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.detail div.md-table-head-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.detail div.md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-head.detail div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.detail div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.detail div.md-table-head-container,
    main.admin-content .historial-list-table .md-table .md-table-head.detail div.md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-head.detail div.md-table-head-container {
        text-align: left
    }
}

main.admin-content .abonos-list-table .md-table .md-table-cell.detail div,
main.admin-content .historial-list-table .md-table .md-table-cell.detail div {
    white-space: pre-wrap;
  /*  overflow-wrap: break-word */
}

main.admin-content .abonos-list-table .md-table .md-table-head .md-table-head-label,
main.admin-content .historial-list-table .md-table .md-table-head .md-table-head-label {
    padding-left: 0;
    padding-right: 0;
    -webkit-user-select: none;
    user-select: none
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-head .md-table-head-label,
    main.admin-content .historial-list-table .md-table .md-table-head .md-table-head-label {
        padding: 0 24px
    }
}

main.admin-content .abonos-list-table .md-table .md-table-head:hover,
main.admin-content .historial-list-table .md-table .md-table-head:hover {
    cursor: pointer
}

main.admin-content .abonos-list-table .md-table .md-table-head .md-icon,
main.admin-content .historial-list-table .md-table .md-table-head .md-icon {
    position: relative;
    bottom: 1px;
    left: 4px;
    transition: transform .2s ease-out
}

main.admin-content .abonos-list-table .md-table .md-table-head .md-icon.active,
main.admin-content .historial-list-table .md-table .md-table-head .md-icon.active {
    color: #f93c03
}

main.admin-content .abonos-list-table .md-table .md-table-head .md-icon.desc,
main.admin-content .historial-list-table .md-table .md-table-head .md-icon.desc {
    transform: rotate(180deg)
}

main.admin-content .abonos-list-table .md-table .md-table-cell,
main.admin-content .historial-list-table .md-table .md-table-cell {
    height: unset
}

main.admin-content .abonos-list-table .md-table .md-table-cell .md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell .md-table-cell-container {
    padding-right: 24px;
}

main.admin-content .abonos-list-table .md-table .md-table-cell.detail .md-table-cell-container,
main.admin-content .abonos-list-table .md-table .md-table-cell.emit .md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.detail .md-table-cell-container,
main.admin-content .historial-list-table .md-table .md-table-cell.emit .md-table-cell-container {
    padding: 0 6px
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .md-table-cell.detail .md-table-cell-container,
    main.admin-content .abonos-list-table .md-table .md-table-cell.emit .md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.detail .md-table-cell-container,
    main.admin-content .historial-list-table .md-table .md-table-cell.emit .md-table-cell-container {
        padding: 6px 24px
    }
}

main.admin-content .abonos-list-table .md-table .detail button,
main.admin-content .abonos-list-table .md-table .emit button,
main.admin-content .historial-list-table .md-table .detail button,
main.admin-content .historial-list-table .md-table .emit button {
    min-width: unset;
    border-radius: 50%
}

@media (min-width:1280px) {

    main.admin-content .abonos-list-table .md-table .detail button,
    main.admin-content .abonos-list-table .md-table .emit button,
    main.admin-content .historial-list-table .md-table .detail button,
    main.admin-content .historial-list-table .md-table .emit button {
        position: relative;
        right: 5px
    }
}

main.admin-content .abonos-list-table .md-table .detail .md-icon,
main.admin-content .historial-list-table .md-table .detail .md-icon {
    color: #3381f2
}

main.admin-content .abonos-list-table .md-table .emit .md-icon,
main.admin-content .historial-list-table .md-table .emit .md-icon {
    color: #3e4b53;
    transform: scale(-1, 1);
    position: relative;
    bottom: 1px
}

main.admin-content .abonos-list-table .table-messages,
main.admin-content .historial-list-table .table-messages {
    position: absolute;
    left: 0;
    top: 64px;
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    align-items: center;
    justify-content: center
}

main.admin-content .abonos-list-table .table-messages p,
main.admin-content .historial-list-table .table-messages p {
    padding-left: 24px
}

main.admin-content .abonos-list-table .table-messages .loading,
main.admin-content .historial-list-table .table-messages .loading {
    z-index: 100
}

main.admin-content .abonos-paginator {
    display: flex;
    justify-content: center;
    padding: 5px 0;
    margin-top: 2rem;
    text-align: center
}

main.admin-content .abonos-paginator .md-icon {
    width: 30px;
    height: 30px;
    margin: 0;
    cursor: pointer
}

main.admin-content .abonos-paginator .md-icon .active {
    color: #f93c03
}

main.admin-content .abonos-paginator ol li {
    display: inline-block;
    margin: 0 5px
}

main.admin-content .abonos-paginator .page {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    margin: 0
}

main.admin-content .abonos-paginator .page.active {
    color: #fff;
    background-color: #ebad14
}

main.admin-content .abonos-paginator.desktop {
    display: none
}

@media (min-width:1280px) {
    main.admin-content .abonos-paginator.desktop {
        display: flex
    }
}

@media (min-width:1280px) {
    main.admin-content .abonos-paginator.mobile {
        display: none
    }
}

main.admin-content .admin-detail-modal h4 {
    margin-bottom: 0
}

main.admin-content .admin-detail-modal .abono-name {
    font-size: 1.5rem;
    font-weight: 300
}

main.admin-content .admin-detail-modal li:not(.md-list-item):not(.file),
main.admin-content .admin-detail-modal p {
    padding: .5rem 0
}

main.admin-content .admin-detail-modal .main-info {
    margin-bottom: .5rem
}

main.admin-content .admin-detail-modal .solicitante-info p.name span {
    text-transform: capitalize
}

main.admin-content .admin-detail-modal .files-container {
    width: 100%
}

main.admin-content .admin-detail-modal .files-container ul li a {
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

main.admin-content .admin-detail-modal .footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px
}

main.admin-content .admin-detail-modal .action-box {
    display: flex;
    justify-content: flex-end
}

main.admin-content .admin-detail-modal .action-box > * {
    font-size: .6rem
}

main.admin-content .admin-detail-modal .action-box div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 10px
}

main.admin-content .admin-detail-modal .action-box div .md-icon {
    width: unset;
    height: unset;
    padding: 8px;
    border: 1px solid #3e4b53;
    border-radius: 50%;
    color: #3e4b53;
    margin-bottom: 5px;
    cursor: pointer
}

main.admin-content .admin-detail-modal .action-box div:not(:last-child) {
    margin: 0 10px
}

main.admin-content .admin-detail-modal .action-box div.active .md-icon {
    background-color: #f93c03;
    border-color: #f93c03;
    color: #fff
}

main.admin-content .admin-detail-modal .md-field.select .md-menu {
    position: relative;
    top: 2px
}

main.admin-content .admin-detail-modal .md-field.select input {
    font-size: 1rem
}

main.admin-content .admin-detail-modal .md-field.select input::placeholder {
    font-size: 1rem
}

main.admin-content .admin-detail-modal .documentation-message {
    margin-top: 10px
}

main.admin-content .admin-detail-modal .documentation-message .md-list-item-content {
    padding: 0 0 10px 0
}

main.admin-content .admin-detail-modal .approve-message {
    margin-top: 1rem
}

main.admin-content.admin-historial h2 {
    margin-bottom: 1.5rem
}

main.admin-content.admin-historial h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem
}

main.admin-content.admin-historial .historial-list-table .md-table {
    min-height: unset
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.name div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.name div.md-table-head-container {
    width: 10em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.date div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.date div.md-table-head-container {
    width: 8em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.time div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.time div.md-table-head-container {
    width: 6em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.abono-type div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.abono-type div.md-table-head-container {
    width: 10em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.observations div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.observations div.md-table-head-container {
    width: 14em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.documents div.md-table-head-container,
main.admin-content.admin-historial .historial-list-table .md-table .md-table-head.documents div.md-table-head-container {
    width: 8em
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-head-label {
    padding: 0 24px
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell {
    height: 48px
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.name {
    text-transform: capitalize
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell .md-table-cell-container {
    display: inline-block;
    padding-right: 0;
    text-transform: unset
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell .md-table-cell-container:first-letter {
    text-transform: capitalize
}

main.admin-content.admin-historial .historial-list-table .md-table .md-table-cell.documents a {
    display: block;
    color: #3381f2;
    padding: 5px 0
}

main.admin-content a.go-to-link {
    align-self: flex-end;
    color: #3381f2
}

@media (min-width:1280px) {
    main.admin-content a.go-to-link:after {
        content: "open_in_new";
        display: inline-block;
        font-family: "Material Icons";
        padding-left: 5px;
        text-decoration: none;
        position: relative;
        top: 2px;
        opacity: 0
    }
}

main.admin-content a.go-to-link:hover:after {
    opacity: 1
}

.abono-emit-confirm.submitting > div {
    opacity: 0;
    pointer-events: none
}

#client-logo,
#site-logo {
    font-size: 0;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
    display: inline-block;
    background-size: calc(100% - 10px) auto;
    background-position: left center;
    height: 75px;
    width: min(30vw, 120px);
    position: relative
}

@media (min-width:600px) {

    #client-logo,
    #site-logo {
        width: 120px
    }
}

#client-logo a,
#site-logo a {
    width: 100%;
    height: 100%;
    display: inline-block
}

#site-logo {
    background-image: url(../assets/img-salta/site-logo.png)
}

#client-logo {
    background-image: url(../assets/img-salta/site-logo2.png);
    background-position: right center
}

header {
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1568627451);
    padding: 1em 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000
}

header > * {
    display: flex;
    align-items: stretch
}

header .divisor {
    display: inline-block;
    width: 1px;
    background: #707070;
    opacity: .3;
    margin: 0 10px
}

@media (min-width:1280px) {
    header .divisor {
        margin: 0 12px
    }
}

header nav .desktop-buttons {
    display: none;
    align-items: center
}

@media (min-width:1280px) {
    header nav .desktop-buttons {
        display: flex
    }
}

header nav .desktop-buttons .signup {
    margin-left: 1.5rem
}

header nav .desktop-buttons .login a,
header nav .desktop-buttons .signup a {
    padding: .75rem 2rem
}

header nav .desktop-buttons.logged {
    display: flex
}

header nav .desktop-buttons.logged .user-logged-desktop {
    display: none
}

@media (min-width:1280px) {
    header nav .desktop-buttons.logged .user-logged-desktop {
        display: flex;
        cursor: pointer
    }
}

header nav .desktop-buttons.logged .user-logged-desktop.clicked .md-icon.inactive {
    display: none
}

header nav .desktop-buttons.logged .user-logged-desktop.clicked .md-icon.active {
    display: block
}

header nav .desktop-buttons.logged .user-logged-desktop a {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    text-align: right;
    text-decoration: none
}

header nav .desktop-buttons.logged .user-logged-desktop a .email {
    font-size: 12px;
    font-weight: 400
}

header nav .desktop-buttons.logged .user-logged-desktop a .role {
    font-size: .7rem;
    color: #f93c03;
    text-transform: uppercase
}

header nav .desktop-buttons.logged .user-logged-desktop .md-icon {
    position: relative;
    top: -6px;
    left: 6px;
    margin: 0;
    font-size: 20px !important
}

header nav .desktop-buttons.logged .user-logged-desktop .md-icon.active {
    display: none;
    top: -3px
}

header nav .desktop-buttons.logged .user-logged-mobile {
    display: block
}

@media (min-width:1280px) {
    header nav .desktop-buttons.logged .user-logged-mobile {
        display: none
    }
}

@media (min-width:1280px) {
    header nav .md-menu {
        display: none
    }
}

header nav .md-menu.user {
    display: block
}

.md-menu-content.main-menu,
.md-menu-content.user-menu {
    max-width: unset;
    z-index: 900
}

.md-menu-content.main-menu .md-menu-content-container,
.md-menu-content.user-menu .md-menu-content-container {
    width: 280px;
    border-radius: 5px
}

.md-menu-content.main-menu .md-menu-content-container .md-list,
.md-menu-content.user-menu .md-menu-content-container .md-list {
    padding: 15px 0
}

.md-menu-content.main-menu .md-menu-content-container .md-list .md-list-item .md-list-item-content,
.md-menu-content.user-menu .md-menu-content-container .md-list .md-list-item .md-list-item-content {
    color: #707070;
    min-height: 25px
}

.md-menu-content.main-menu .md-menu-content-container .md-list .md-list-item .md-list-item-content a,
.md-menu-content.user-menu .md-menu-content-container .md-list .md-list-item .md-list-item-content a {
    font-size: 13px;
    font-weight: 400
}

.md-menu-content.main-menu .md-menu-content-container .md-list .md-list-item.title .md-list-item-content,
.md-menu-content.user-menu .md-menu-content-container .md-list .md-list-item.title .md-list-item-content {
    font-size: 14px;
    font-weight: 700
}

#footer-logo {
    height: 40px;
    width: 100px;
    font-size: 0;
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: inline-block;
    background-size: contain;
    background-position: center top 55%;
    position: relative;
    background-image: url(../assets/img-salta/footer-logo.png);
    margin-left: .5rem
}

#footer-logo > a {
    display: inline-block;
    width: 100%;
    height: 100%
}

footer {
    background: #3e4b53;
    width: 100%;
    min-height: 48px;
    color: #fff;
    padding: 1rem 0;
    position: relative;
    z-index: 1000
}

@media (min-width:1280px) {
    footer {
        padding: .5rem 0
    }
}

footer > .footer-container {
    width: 90%;
    margin: auto
}

@media (min-width:600px) {
    footer > .footer-container {
        display: flex;
        justify-content: space-between;
        align-items: center
    }
}

footer .footer-left {
    display: flex;
    align-items: center;
    margin-bottom: .66rem
}

@media (min-width:600px) {
    footer .footer-left {
        margin-bottom: 0
    }
}

footer .footer-right a {
    color: #fff;
    font-weight: 400;
    display: inline-flex;
    align-items: center
}

footer .footer-right a i.md-icon {
    margin-right: .5em;
    color: #fff
}

footer .footer-right a:hover {
    color: #fff;
    text-decoration: none
}

.modal-frame {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background-color: #000;
    background-color: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    outline: auto;
    transform: translateZ(10px)
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame {
        align-items: center
    }
}

@media (min-width:1280px) {
    .modal-frame {
        align-items: center
    }
}

.modal-frame .modal-window {
    width: 90%;
    position: relative;
    margin: 15px;
    background-color: #fff;
    border-radius: 10px;
    min-height: 100px
}

@media (min-width:600px) {
    .modal-frame .modal-window {
        margin: auto;
        width: 80%
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.login-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.login-modal {
        display: flex;
        width: 62%;
        max-width: 900px
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.login-modal {
        max-width: 1040px
    }
}

@media (min-width:600px) {
    .modal-frame .modal-window.register-modal {
        margin: 30px auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.register-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.register-modal {
        display: flex;
        width: 64%;
        max-width: 1000px;
        height: 70vh;
        max-height: 900px
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.register-modal {
        max-width: 1300px
    }
}

@media (min-width:600px) {
    .modal-frame .modal-window.validation-modal {
        margin: 30px auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.validation-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.validation-modal {
        display: flex;
        width: 70%;
        max-width: 790px;
        height: 28vh;
        max-height: 900px;
        text-align: center;
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.validation-modal {
        max-width: 1300px
    }
}
@media (min-width:600px) {
    .modal-frame .modal-window.validation-admin-modal {
        margin:  auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.validation-admin-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.validation-admin-modal {
        display: flex;
        width: 64%;
        max-width: 760px;
        /*height: 82vh;*/
         overflow-y: auto;
        max-height: 900px
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.validation-admin-modal {
        max-width: 1300px
    }
}
@media (min-width:600px) {
    .modal-frame .modal-window.benefit-modal {
        margin: 30px auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.benefit-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.benefit-modal {
        display: flex;
        width: 64%;
        max-width: 670px;
        height: 38vh;
        max-height: 900px
            text-align: center;
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.benefit-modal {
        max-width: 1300px
    }
}
@media (min-width:600px) {
    .modal-frame .modal-window.benefit-list-modal {
        margin: 30px auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.benefit-list-modal {
        display: flex
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.benefit-list-modal {
        display: flex;
        width: 64%;
        max-width: 450px;
        height: 50vh;
        max-height: 900px;
        text-align: center;
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.benefit-list-modal {
        max-width: 1300px
    }
}
@media (min-width:600px) {
    .modal-frame .modal-window.confirmation-modal {
        margin: 30px auto
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window.confirmation-modal {
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window.confirmation-modal {
        width: 70%;
        height: 30vh;
        max-height: 900px;
        text-align: center;
    }
}

@media (min-width:1921px) {
    .modal-frame .modal-window.confirmation-modal {
        max-width: 1300px
    }
}
.modal-frame .modal-window button.close {
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 6px;
    padding: 0 !important;
    background-color: transparent;
    border: none
}

.modal-frame .modal-window .modal-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #ebad14;
    border-radius: 10px 10px 0 0
}

.modal-frame .modal-window .modal-illustration.login-illustration {
    justify-content: space-between
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration.login-illustration {
        padding: 45px;
        border-radius: 10px 0 0 10px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration.login-illustration {
        padding: 45px;
        border-radius: 10px 0 0 10px
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration.register-illustration {
        padding: 24px;
        border-radius: 10px 0 0 10px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration.register-illustration {
        padding: 24px;
        border-radius: 10px 0 0 10px
    }
}

.modal-frame .modal-window .modal-illustration .login-logo {
    width: 172px;
    height: 176px;
    margin: 32px 0;
    background-image: url(../assets/img-salta/login-big-logo.svg)
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration .login-logo {
        margin: 0;
        width: 274px;
        height: 279px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration .login-logo {
        margin: 0;
        width: 274px;
        height: 279px
    }
}

.modal-frame .modal-window .modal-illustration .register-logo {
    width: 244px;
    height: 229px;
    margin-bottom: 16px;
    background-image: url(../assets/img-salta/register-big-logo.svg)
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration .register-logo {
        margin: 0;
        width: 330px;
        height: 310px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration .register-logo {
        margin: 0;
        width: 330px;
        height: 310px
    }
}

.modal-frame .modal-window .modal-illustration .modal-text {
    font-size: calc(1.5vh + .05rem);
    font-weight: 300;
    color: #fff;
    margin-bottom: 28px;
    text-align: center;
    margin-bottom: 28px
}

@media (min-width:1921px) {
    .modal-frame .modal-window .modal-illustration .modal-text {
        font-size: 1rem
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration .modal-text.login-text {
        margin: 35px 0 0 0
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration .modal-text.login-text {
        margin: 28px 0 0 0
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration .modal-text.register-text {
        margin-top: 31px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration .modal-text.register-text {
        margin-top: 31px
    }
}

.modal-frame .modal-window .modal-illustration .modal-text a {
    color: #fff;
    font-weight: 500
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-illustration .modal-text a {
        display: block;
        margin-top: 13px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-illustration .modal-text a {
        display: block;
        margin-top: 13px
    }
}

.modal-frame .modal-window .modal-action {
    font-size: calc(1.5vh + .3rem);
    margin: 0 16px;
    border-radius: 10px
}

@media (min-width:600px) {
    .modal-frame .modal-window .modal-action.login-action {
        margin: 0 32px
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action.register-action {
        overflow-y: auto;
        padding: 0 20px;
        margin: 0 12px 0 12px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action.register-action {
        overflow-y: auto;
        padding: 0 20px;
        margin: 0 12px 0 12px
    }
}

.modal-frame .modal-window .modal-action p {
    line-height: 1.3
}

.modal-frame .modal-window .modal-action h2 {
    margin: 20px auto;
    font-size: 30px;
    font-size: calc(1.8vh + 1rem);
    color: #ebad14
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action h2.h2-login {
        margin-top: 45px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action h2.h2-login {
        margin-top: 45px
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action h2.h2-register {
        margin-top: 5px;
        margin-top: 40px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action h2.h2-register {
        margin-top: 5px;
        margin-top: 40px
    }
}

.modal-frame .modal-window .modal-action form {
    background-color: #fff
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action form.login-form {
        padding: 0 20px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action form.login-form {
        padding: 0 20px
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action form.register-form {
        padding: 0 30px 10px 30px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action form.register-form {
        padding: 0 30px 2px 30px
    }
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action form.validation-admin-form {
        padding: 0 30px 10px 30px
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action form.validation-admin-form {
        padding: 0 30px 2px 30px
    }
}


.modal-frame .modal-window .modal-action form .md-error {
    opacity: 1;
    bottom: -32px;
    left: auto;
    right: 0;
    color: #d50000
}

.modal-frame .modal-window .modal-action form span.success {
    display: block;
    position: absolute;
    font-size: 12px;
    top: 50px;
    right: 0;
    color: green !important
}

.modal-frame .modal-window .modal-action form .submit {
    width: 100%;
    padding: 0;
    display: block;
    font-size: 1rem;
    letter-spacing: .3px;
    margin: 0
}

.modal-frame .modal-window .modal-action form .submit.submit-register {
    margin: 0 0 38px 0
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .modal-frame .modal-window .modal-action form .submit.submit-register {
        margin: 0 0 20px 0
    }
}

@media (min-width:1280px) {
    .modal-frame .modal-window .modal-action form .submit.submit-register {
        margin: 0 0 20px 0
    }
}

.modal-frame .modal-window .modal-action form a {
    display: block;
    color: inherit;
    font-size: calc(1.5vh + .1rem);
    text-align: center;
    margin: 13px auto 45px auto
}

.md-field {
    background-color: rgba(68, 68, 68, .05);
    border: 1px solid transparent
}

.md-field:not(.md-has-textarea) {
    margin: 22px 0;
    height: 48px;
    position: relative;
    border-radius: 8px
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .md-field:not(.md-has-textarea) {
        margin: 24px 0
    }
}

@media (min-width:1280px) {
    .md-field:not(.md-has-textarea) {
        margin: 24px 0
    }
}

.md-field:after {
    background-color: transparent
}

.md-field.md-has-password .md-toggle-password {
    top: 7px;
    right: 16px
}

.md-field.md-has-password .md-toggle-password svg {
    width: 24px;
    height: 24px
}

.md-field .md-select .md-input {
    padding-right: 14px
}

@media (min-width:600px) {
    .md-field .md-select .md-input {
        padding-right: 16px
    }
}

.md-field .md-input,
.md-field label {
    padding: 0 45px 0 14px
}

@media (min-width:600px) {

    .md-field .md-input,
    .md-field label {
        padding: 0 45px 0 16px
    }
}

.md-field .md-input[type=password],
.md-field label[type=password] {
    padding: 0 75px 0 14px
}

@media (min-width:600px) {

    .md-field .md-input[type=password],
    .md-field label[type=password] {
        padding: 0 75px 0 16px
    }
}

.md-field label {
    top: 15px
}

.md-field .md-input-action {
    top: 8px;
    right: 16px
}

.login-form .md-field {
    margin: 20px 0
}

.md-button {
    text-transform: none
}

.modal-frame .md-error {
    opacity: 1;
    bottom: -32px;
    left: auto;
    right: 0;
    color: #d50000
}

.modal-frame .captcha {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.modal-frame .captcha img {
    height: 50px
}

.modal-frame .captcha .captcha-setter {
    display: flex;
    justify-content: center
}

.modal-frame .captcha .captcha-setter img {
    height: 50px
}

.modal-frame .captcha .captcha-setter .md-button {
    font-family: "Material icons";
    min-width: unset;
    width: 40px;
    margin: 0;
    height: 50px;
    border: none;
    background: 0 0
}

.modal-frame .captcha .captcha-setter .md-button .md-ripple {
    padding: 0
}

.modal-frame .captcha .captcha-setter .md-button .md-ripple .md-button-content {
    font-size: 30px;
    color: #f93c03
}

.modal-frame .captcha .md-error-captcha {
    top: 70px
}

.modal-frame .md-error-terms {
    color: #d50000;
    font-size: 12px;
    display: block;
    margin-bottom: 5px
}

.md-field.invalid,
.md-field.success {
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    -webkit-mask-position: right 10px center;
    mask-position: right 10px center
}

@media (min-width:600px) {

    .md-field.invalid,
    .md-field.success {
        background-size: 20px;
        background-position: right 16px center
    }
}

.md-field.invalid.field-select,
.md-field.success.field-select {
    background-image: none
}

.md-field.invalid:before,
.md-field.success:before {
    width: 98%;
    margin-left: 2px;
    background-color: transparent !important
}

.md-field.invalid.md-has-password .md-toggle-password,
.md-field.success.md-has-password .md-toggle-password {
    right: 32px
}

@media (min-width:600px) {

    .md-field.invalid.md-has-password .md-toggle-password,
    .md-field.success.md-has-password .md-toggle-password {
        right: 40px
    }
}

.md-field.invalid svg.invalid,
.md-field.invalid svg.success,
.md-field.success svg.invalid,
.md-field.success svg.success {
    width: 18px;
    position: absolute;
    right: 10px;
    bottom: 11px
}

@media (min-width:600px) {

    .md-field.invalid svg.invalid,
    .md-field.invalid svg.success,
    .md-field.success svg.invalid,
    .md-field.success svg.success {
        width: 20px;
        right: 16px
    }
}

.val-icons {
    display: none;
    height: 100%;
    position: relative;
    font-size: 20px;
    right: 10px;
    bottom: 2px
}

@media (min-width:600px) {
    .val-icons {
        font-size: 24px;
        right: 16px;
        bottom: 4px
    }
}

.md-field.success {
    border: 1px solid green
}

.md-field.success .val-icons {
    display: inline-block;
    color: green
}

.md-field.invalid {
    border: 1px solid #d50000
}

.md-field.invalid .val-icons {
    display: inline-block;
    color: #d50000
}

.md-field.loading.md-has-password .md-toggle-password {
    right: 32px
}

@media (min-width:600px) {
    .md-field.loading.md-has-password .md-toggle-password {
        right: 40px
    }
}

div.checking {
    position: relative;
    bottom: 8px;
    right: 2px
}

@media (min-width:600px) {
    div.checking {
        right: 4px
    }
}

.login-form .md-checkbox {
    margin: 0 auto 16px 4px
}

@media (min-width:960px) and (max-width:1279px) and (orientation:landscape) {
    .checkbox-div .md-checkbox {
        margin-bottom: 24px
    }
}

@media (min-width:1280px) {
    .checkbox-div .md-checkbox {
        margin-bottom: 24px
    }
}

.checkbox-div .md-checkbox .md-checkbox-label {
    font-size: 14px;
    padding-left: 10px !important
}

.checkbox-div.invalid .md-checkbox-container {
    border-color: #d50000
}

.register-modal .checkbox-div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    margin-bottom: 16px
}

.register-modal .checkbox-div .md-checkbox {
    margin: 0 10px 0 0
}

.register-modal .checkbox-div .md-checkbox .md-checkbox-label {
    display: flex;
    align-items: center;
    padding-top: 2px
}

.register-modal .checkbox-div .md-checkbox .md-checkbox-label a {
    font-size: 14px;
    padding-left: 5px;
    margin: 0;
    color: #0c77ff
}

.register-modal .checkbox-div p.terms {
    display: flex
}

.register-modal .checkbox-div p.terms a {
    display: inline-flex;
    color: #ebad14;
    font-size: calc(1.5vh + .3rem);
    margin: 0 0 0 5px
}

.register-modal .md-error-terms {
    color: #d50000;
    font-size: 12px;
    display: block;
    margin-bottom: 5px
}

.register-modal .error-div {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 16px 0 0 25px
}

.register-modal .error-div .md-icon {
    color: #ebad14;
    margin: 0 8px 0 0
}

.register-modal .error-div .md-error-terms {
    margin: 0
}

.card-register-window form .document-type .md-field,
.password-modal form .document-type .md-field,
.register-action form .document-type .md-field {
    margin: 0;
    padding: 8px 0
}

.card-register-window form .document-type .field-select,
.password-modal form .document-type .field-select,
.register-action form .document-type .field-select {
    display: inline-flex;
    width: 30%;
    height: auto
}

.card-register-window form .document-type .field-select .md-icon,
.password-modal form .document-type .field-select .md-icon,
.register-action form .document-type .field-select .md-icon {
    position: relative;
    right: 10px
}

.card-register-window form .document-type .document-number,
.password-modal form .document-type .document-number,
.register-action form .document-type .document-number {
    float: right;
    display: inline-flex;
    width: 65%
}

.card-register-window form .document-type .document-number label,
.password-modal form .document-type .document-number label,
.register-action form .document-type .document-number label {
    padding: 0 30px 0 14px
}

.card-register-window form .document-type .document-number .md-input,
.password-modal form .document-type .document-number .md-input,
.register-action form .document-type .document-number .md-input {
    max-width: 100%;
    position: relative;
    top: 8px
}

.card-register-window form .document-type .document-number .val-icons,
.password-modal form .document-type .document-number .val-icons,
.register-action form .document-type .document-number .val-icons {
    position: absolute;
    top: 14px;
    right: 10px
}

@media (min-width:600px) {

    .card-register-window form .document-type .document-number .val-icons,
    .password-modal form .document-type .document-number .val-icons,
    .register-action form .document-type .document-number .val-icons {
        top: 12px;
        right: 16px
    }
}

.register-scroll .os-scrollbar-handle {
    left: -1px;
    background: rgba(148, 140, 154, .5) !important;
    height: 40% !important;
    top: 40px
}

.os-theme-light > .os-scrollbar,
.register-scroll > .os-scrollbar {
    padding: 3px !important
}

.modal-frame.card-register {
    align-items: center
}

.modal-frame.card-register.flex {
    align-items: flex-start
}

@media (min-width:1367px) {
    .modal-frame.card-register.flex {
        align-items: center
    }
}

@media (min-width:600px) {
    .modal-frame.card-register {
        align-items: flex-start
    }
}

@media (min-width:1367px) {
    .modal-frame.card-register {
        align-items: center
    }
}

.modal-frame.card-register .modal-window.card-register-window {
    width: 430px;
    padding: 16px
}

@media (min-width:600px) {
    .modal-frame.card-register .modal-window.card-register-window {
        padding: 32px
    }
}

@media (min-width:1367px) {
    .modal-frame.card-register .modal-window.card-register-window {
        max-width: 600px
    }
}

@media (min-width:1921px) {
    .modal-frame.card-register .modal-window.card-register-window {
        width: 600px
    }
}

@media (min-width:1280px) {
    .modal-frame.card-register .modal-window.card-register-window.lg {
        margin: 50px
    }
}

.modal-frame.card-register .modal-window.card-register-window p {
    line-height: 1.3
}

.modal-frame.card-register .modal-window.card-register-window h2 {
    margin: 20px auto;
    font-size: 30px;
    font-size: calc(1.8vh + 1rem);
    color: #ebad14
}

@media (min-width:1280px) {
    .modal-frame.card-register .modal-window.card-register-window form {
        margin: 0 20px 0 40px
    }
}

.modal-frame.card-register .modal-window.card-register-window form p {
    font-weight: 700
}

.modal-frame.card-register .modal-window.card-register-window form .md-input {
    padding: 0 14px
}

.modal-frame.card-register .modal-window.card-register-window form .md-error {
    opacity: 1;
    bottom: -32px;
    left: auto;
    right: 0;
    color: #d50000
}

.modal-frame.card-register .modal-window.card-register-window form .md-radio {
    margin: 10px 16px 30px 0
}

.modal-frame.card-register .modal-window.card-register-window form .md-radio .md-radio-container .md-radio-label {
    padding-left: 10px
}

.modal-frame.card-register .modal-window.card-register-window form .md-field.relationship {
    padding: 8px 0
}

.modal-frame.card-register .modal-window.card-register-window form .md-field.relationship .md-select input {
    height: auto
}

.modal-frame.card-register .modal-window.card-register-window form fieldset {
    padding: 0
}

.modal-frame.card-register .modal-window.card-register-window form fieldset .document-type .md-field {
    margin: 0 0 25px 0
}

.modal-frame.card-register .modal-window.card-register-window form button.submit {
    padding: 0;
    margin-top: 30px;
    font-size: 16px;
    width: 100%;
    margin: 0
}

.modal-frame.credit .card-credit-modal,
.modal-frame.credit .password-modal,
.modal-frame.credit .transaction-modal,
.modal-frame.password .card-credit-modal,
.modal-frame.password .password-modal,
.modal-frame.password .transaction-modal,
.modal-frame.transaction .card-credit-modal,
.modal-frame.transaction .password-modal,
.modal-frame.transaction .transaction-modal {
    margin: 100px 0;
    width: 90%;
    padding: 16px 16px 32px 16px
}

@media (min-width:600px) {

    .modal-frame.credit .card-credit-modal,
    .modal-frame.credit .password-modal,
    .modal-frame.credit .transaction-modal,
    .modal-frame.password .card-credit-modal,
    .modal-frame.password .password-modal,
    .modal-frame.password .transaction-modal,
    .modal-frame.transaction .card-credit-modal,
    .modal-frame.transaction .password-modal,
    .modal-frame.transaction .transaction-modal {
        max-width: 423px;
        padding: 30px 30px 35px 30px
    }
}

@media (min-width:1280px) {

    .modal-frame.credit .card-credit-modal,
    .modal-frame.credit .password-modal,
    .modal-frame.credit .transaction-modal,
    .modal-frame.password .card-credit-modal,
    .modal-frame.password .password-modal,
    .modal-frame.password .transaction-modal,
    .modal-frame.transaction .card-credit-modal,
    .modal-frame.transaction .password-modal,
    .modal-frame.transaction .transaction-modal {
        padding: 24px 30px 44px 30px
    }
}

@media (min-width:1921px) {

    .modal-frame.credit .card-credit-modal,
    .modal-frame.credit .password-modal,
    .modal-frame.credit .transaction-modal,
    .modal-frame.password .card-credit-modal,
    .modal-frame.password .password-modal,
    .modal-frame.password .transaction-modal,
    .modal-frame.transaction .card-credit-modal,
    .modal-frame.transaction .password-modal,
    .modal-frame.transaction .transaction-modal {
        max-width: 620px
    }
}

.modal-frame.credit .card-credit-modal h2,
.modal-frame.credit .password-modal h2,
.modal-frame.credit .transaction-modal h2,
.modal-frame.password .card-credit-modal h2,
.modal-frame.password .password-modal h2,
.modal-frame.password .transaction-modal h2,
.modal-frame.transaction .card-credit-modal h2,
.modal-frame.transaction .password-modal h2,
.modal-frame.transaction .transaction-modal h2 {
    margin: 20px auto;
    font-size: 30px;
    font-size: calc(1.8vh + 1rem);
    color: #ebad14
}

@media (min-width:1280px) {

    .modal-frame.credit .card-credit-modal form,
    .modal-frame.credit .password-modal form,
    .modal-frame.credit .transaction-modal form,
    .modal-frame.password .card-credit-modal form,
    .modal-frame.password .password-modal form,
    .modal-frame.password .transaction-modal form,
    .modal-frame.transaction .card-credit-modal form,
    .modal-frame.transaction .password-modal form,
    .modal-frame.transaction .transaction-modal form {
        margin: 0 20px 0 30px
    }
}

.modal-frame.credit .card-credit-modal button.accept,
.modal-frame.credit .card-credit-modal button.confirm,
.modal-frame.credit .card-credit-modal button.submit,
.modal-frame.credit .password-modal button.accept,
.modal-frame.credit .password-modal button.confirm,
.modal-frame.credit .password-modal button.submit,
.modal-frame.credit .transaction-modal button.accept,
.modal-frame.credit .transaction-modal button.confirm,
.modal-frame.credit .transaction-modal button.submit,
.modal-frame.password .card-credit-modal button.accept,
.modal-frame.password .card-credit-modal button.confirm,
.modal-frame.password .card-credit-modal button.submit,
.modal-frame.password .password-modal button.accept,
.modal-frame.password .password-modal button.confirm,
.modal-frame.password .password-modal button.submit,
.modal-frame.password .transaction-modal button.accept,
.modal-frame.password .transaction-modal button.confirm,
.modal-frame.password .transaction-modal button.submit,
.modal-frame.transaction .card-credit-modal button.accept,
.modal-frame.transaction .card-credit-modal button.confirm,
.modal-frame.transaction .card-credit-modal button.submit,
.modal-frame.transaction .password-modal button.accept,
.modal-frame.transaction .password-modal button.confirm,
.modal-frame.transaction .password-modal button.submit,
.modal-frame.transaction .transaction-modal button.accept,
.modal-frame.transaction .transaction-modal button.confirm,
.modal-frame.transaction .transaction-modal button.submit {
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 16px
}

.modal-frame.credit .card-credit-modal button.confirm,
.modal-frame.credit .password-modal button.confirm,
.modal-frame.credit .transaction-modal button.confirm,
.modal-frame.password .card-credit-modal button.confirm,
.modal-frame.password .password-modal button.confirm,
.modal-frame.password .transaction-modal button.confirm,
.modal-frame.transaction .card-credit-modal button.confirm,
.modal-frame.transaction .password-modal button.confirm,
.modal-frame.transaction .transaction-modal button.confirm {
    margin-top: 40px
}

.modal-frame.credit .card-credit-modal .submitted,
.modal-frame.credit .password-modal .submitted,
.modal-frame.credit .transaction-modal .submitted,
.modal-frame.password .card-credit-modal .submitted,
.modal-frame.password .password-modal .submitted,
.modal-frame.password .transaction-modal .submitted,
.modal-frame.transaction .card-credit-modal .submitted,
.modal-frame.transaction .password-modal .submitted,
.modal-frame.transaction .transaction-modal .submitted {
    margin-top: 30px
}

@media (min-width:600px) {

    .modal-frame.credit .card-credit-modal .submitted,
    .modal-frame.credit .password-modal .submitted,
    .modal-frame.credit .transaction-modal .submitted,
    .modal-frame.password .card-credit-modal .submitted,
    .modal-frame.password .password-modal .submitted,
    .modal-frame.password .transaction-modal .submitted,
    .modal-frame.transaction .card-credit-modal .submitted,
    .modal-frame.transaction .password-modal .submitted,
    .modal-frame.transaction .transaction-modal .submitted {
        padding: 0 40px
    }
}

.modal-frame.credit .card-credit-modal .submitted .row,
.modal-frame.credit .password-modal .submitted .row,
.modal-frame.credit .transaction-modal .submitted .row,
.modal-frame.password .card-credit-modal .submitted .row,
.modal-frame.password .password-modal .submitted .row,
.modal-frame.password .transaction-modal .submitted .row,
.modal-frame.transaction .card-credit-modal .submitted .row,
.modal-frame.transaction .password-modal .submitted .row,
.modal-frame.transaction .transaction-modal .submitted .row {
    display: flex;
    margin: 25px 0
}

.modal-frame.credit .card-credit-modal .submitted .row p,
.modal-frame.credit .password-modal .submitted .row p,
.modal-frame.credit .transaction-modal .submitted .row p,
.modal-frame.password .card-credit-modal .submitted .row p,
.modal-frame.password .password-modal .submitted .row p,
.modal-frame.password .transaction-modal .submitted .row p,
.modal-frame.transaction .card-credit-modal .submitted .row p,
.modal-frame.transaction .password-modal .submitted .row p,
.modal-frame.transaction .transaction-modal .submitted .row p {
    width: 45%;
    font-weight: 700
}

@media (min-width:600px) {

    .modal-frame.credit .card-credit-modal .submitted .row p,
    .modal-frame.credit .password-modal .submitted .row p,
    .modal-frame.credit .transaction-modal .submitted .row p,
    .modal-frame.password .card-credit-modal .submitted .row p,
    .modal-frame.password .password-modal .submitted .row p,
    .modal-frame.password .transaction-modal .submitted .row p,
    .modal-frame.transaction .card-credit-modal .submitted .row p,
    .modal-frame.transaction .password-modal .submitted .row p,
    .modal-frame.transaction .transaction-modal .submitted .row p {
        width: 50%
    }
}

.modal-frame.credit .card-credit-modal .submitted .row span.credit,
.modal-frame.credit .password-modal .submitted .row span.credit,
.modal-frame.credit .transaction-modal .submitted .row span.credit,
.modal-frame.password .card-credit-modal .submitted .row span.credit,
.modal-frame.password .password-modal .submitted .row span.credit,
.modal-frame.password .transaction-modal .submitted .row span.credit,
.modal-frame.transaction .card-credit-modal .submitted .row span.credit,
.modal-frame.transaction .password-modal .submitted .row span.credit,
.modal-frame.transaction .transaction-modal .submitted .row span.credit {
    font-weight: 700;
    color: green
}

.modal-frame.credit .card-credit-modal .submitted .row span.credit.neutral,
.modal-frame.credit .password-modal .submitted .row span.credit.neutral,
.modal-frame.credit .transaction-modal .submitted .row span.credit.neutral,
.modal-frame.password .card-credit-modal .submitted .row span.credit.neutral,
.modal-frame.password .password-modal .submitted .row span.credit.neutral,
.modal-frame.password .transaction-modal .submitted .row span.credit.neutral,
.modal-frame.transaction .card-credit-modal .submitted .row span.credit.neutral,
.modal-frame.transaction .password-modal .submitted .row span.credit.neutral,
.modal-frame.transaction .transaction-modal .submitted .row span.credit.neutral {
    color: #3e4b53
}

.modal-frame.credit .card-credit-modal .submitted .row span.credit.positive,
.modal-frame.credit .password-modal .submitted .row span.credit.positive,
.modal-frame.credit .transaction-modal .submitted .row span.credit.positive,
.modal-frame.password .card-credit-modal .submitted .row span.credit.positive,
.modal-frame.password .password-modal .submitted .row span.credit.positive,
.modal-frame.password .transaction-modal .submitted .row span.credit.positive,
.modal-frame.transaction .card-credit-modal .submitted .row span.credit.positive,
.modal-frame.transaction .password-modal .submitted .row span.credit.positive,
.modal-frame.transaction .transaction-modal .submitted .row span.credit.positive {
    color: green
}

.modal-frame.credit .card-credit-modal .submitted .row span.credit.negative,
.modal-frame.credit .password-modal .submitted .row span.credit.negative,
.modal-frame.credit .transaction-modal .submitted .row span.credit.negative,
.modal-frame.password .card-credit-modal .submitted .row span.credit.negative,
.modal-frame.password .password-modal .submitted .row span.credit.negative,
.modal-frame.password .transaction-modal .submitted .row span.credit.negative,
.modal-frame.transaction .card-credit-modal .submitted .row span.credit.negative,
.modal-frame.transaction .password-modal .submitted .row span.credit.negative,
.modal-frame.transaction .transaction-modal .submitted .row span.credit.negative {
    color: #d50000
}

.modal-frame.credit .card-credit-modal .submitted button.accept,
.modal-frame.credit .password-modal .submitted button.accept,
.modal-frame.credit .transaction-modal .submitted button.accept,
.modal-frame.password .card-credit-modal .submitted button.accept,
.modal-frame.password .password-modal .submitted button.accept,
.modal-frame.password .transaction-modal .submitted button.accept,
.modal-frame.transaction .card-credit-modal .submitted button.accept,
.modal-frame.transaction .password-modal .submitted button.accept,
.modal-frame.transaction .transaction-modal .submitted button.accept {
    margin-top: 35px
}

.modal-frame.transaction .loading {
    align-self: center
}

.modal-frame.transaction .transaction-modal .transaction-data.uso {
    margin-bottom: 25px
}

.modal-frame.transaction .transaction-modal .transaction-data .data-box {
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(68, 68, 68, .05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px
}

.modal-frame.transaction .transaction-modal .transaction-data .data-box h3 {
    text-transform: none
}

.modal-frame.transaction .transaction-modal .transaction-data .data-box span {
    width: 40%;
    text-align: right
}

.modal-frame.transaction .transaction-modal a.btn.print {
    margin: 0;
    padding: .6rem;
    width: 100%;
    font-size: 16px
}

.modal-frame.simple {
    padding: 3rem 1rem
}

.modal-frame.simple .modal-window {
    margin: auto;
    padding: 2rem 1.5rem
}

@media (min-width:600px) {
    .modal-frame.simple .modal-window {
        padding: 30px 30px 35px 30px
    }
}

@media (min-width:1280px) {
    .modal-frame.simple .modal-window {
        padding: 1.33rem 2rem
    }
}

@media (min-width:600px) {
    .modal-frame.simple.small .modal-window {
        max-width: 450px
    }
}

.modal-frame.simple h3,
.modal-frame.simple h4,
.modal-frame.simple h5 {
    font-size: 1.8rem;
    color: #ebad14;
    font-weight: 700;
    margin-bottom: 1.33rem;
    margin-bottom: 1.25rem
}

.modal-frame.simple nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 1rem;
    text-align: center
}

@media (min-width:1280px) {
    .modal-frame.simple nav {
        justify-content: center;
        flex-wrap: nowrap
    }
}

.modal-frame.simple nav > * {
    display: block;
    width: 100%
}

@media (min-width:1280px) {
    .modal-frame.simple nav > * {
        width: 90%
    }
}

.modal-frame.simple nav > :not(:last-child) {
    margin-bottom: 1rem
}

@media (min-width:1280px) {
    .modal-frame.simple nav > :not(:last-child) {
        margin-bottom: 0
    }
}

@media (min-width:1280px) {

    .modal-frame.simple nav.nav-show,
    .modal-frame.simple nav.nav-submit {
        justify-content: flex-end;
        flex-wrap: nowrap
    }

    .modal-frame.simple nav.nav-show .cancel,
    .modal-frame.simple nav.nav-submit .cancel {
        margin-bottom: 0;
        text-align: right
    }

    .modal-frame.simple nav.nav-show button,
    .modal-frame.simple nav.nav-submit button {
        width: 160px;
        margin-left: 2rem
    }

    .modal-frame.simple nav.nav-show a.btn,
    .modal-frame.simple nav.nav-submit a.btn {
        width: 160px
    }
}

form .input-message {
    position: absolute;
    bottom: -1.33em;
    line-height: 1;
    font-size: .8em;
    width: 100%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden
}

form .input-message .error {
    color: #d50000
}

.back {
    margin-bottom: 2rem
}

.back a {
    color: #ebad14;
    font-weight: 400
}

.back a:hover {
    text-decoration: none
}

.back a::before {
    font-family: FontAwesome;
    content: '\f053';
    margin-right: 1rem;
    font-size: .66rem
}

#sessionLoader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500
}

.snack {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding: 1.2rem;
    z-index: 2000;
    transform: translateZ(400px)
}

.snack .snackbar {
    position: relative;
    width: 100%;
    margin-bottom: .33rem;
    font-weight: 400;
    line-height: 1;
    padding: 18px 16px 18px 16px;
    border-radius: 10px;
    background-color: #fff;
    border: 3px solid;
    transition: all .2s ease-out
}

.snack .snackbar.error {
    border-color: #d50000
}

.snack .snackbar.error .snack-timer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #d50000;
    background: #d50000
}

.snack .snackbar.error div {
    display: flex;
    align-items: center
}

.snack .snackbar.error div svg {
    width: auto;
    min-width: 35px;
    padding-right: 10px;
    fill: #d50000
}

.snack .snackbar.error div span {
    word-break: break-word
}

.snack .snackbar.info {
    border-color: #3f51b5
}

.snack .snackbar.info .snack-timer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #3f51b5;
    background: #3f51b5
}

.snack .snackbar.info div {
    display: flex;
    align-items: center
}

.snack .snackbar.info div svg {
    width: auto;
    min-width: 35px;
    padding-right: 10px;
    fill: #3f51b5
}

.snack .snackbar.info div span {
    word-break: break-word
}

.snack .snackbar.warning {
    border-color: #ea6100
}

.snack .snackbar.warning .snack-timer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #ea6100;
    background: #ea6100
}

.snack .snackbar.warning div {
    display: flex;
    align-items: center
}

.snack .snackbar.warning div svg {
    width: auto;
    min-width: 35px;
    padding-right: 10px;
    fill: #ea6100
}

.snack .snackbar.warning div span {
    word-break: break-word
}

.snack .snackbar.success {
    border-color: green
}

.snack .snackbar.success .snack-timer {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: green;
    background: green
}

.snack .snackbar.success div {
    display: flex;
    align-items: center
}

.snack .snackbar.success div svg {
    width: auto;
    min-width: 35px;
    padding-right: 10px;
    fill: green
}

.snack .snackbar.success div span {
    word-break: break-word
}

@media (min-width:1280px) {
    .snack .snackbar {
        width: 33%;
        font-size: 18px;
        margin-right: 16px
    }
}

.snack .snackbar .snack-timer {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    -webkit-animation-name: snack-progress;
    animation-name: snack-progress;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.changepassword form .md-field.pristine {
    border: 1px solid transparent
}

.changepassword form .md-field.success.current-password {
    border: 1px solid transparent
}

.changepassword form .md-field .md-error .success {
    color: green
}

.abonos-detail-modal .md-list,
.admin-detail-modal .md-list {
    padding-bottom: 0
}

.abonos-detail-modal .md-list h5:not(.abono-name),
.admin-detail-modal .md-list h5:not(.abono-name) {
    font-size: 1rem;
    color: #3e4b53;
    margin: 0
}

.abonos-detail-modal .md-list article,
.admin-detail-modal .md-list article {
    white-space: normal
}

.abonos-detail-modal .md-list .md-list-item-expand .md-list-expand,
.admin-detail-modal .md-list .md-list-item-expand .md-list-expand {
    will-change: transition
}

.abonos-detail-modal .md-list .md-list-item .md-list-item-content,
.admin-detail-modal .md-list .md-list-item .md-list-item-content {
    padding: 4px 0
}

.abonos-detail-modal .md-list .md-list-item.abono-state .md-list-item-content,
.admin-detail-modal .md-list .md-list-item.abono-state .md-list-item-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.abonos-detail-modal .md-list .md-list-item .observation,
.admin-detail-modal .md-list .md-list-item .observation {
    font-size: .8rem
}

.abonos-detail-modal .md-list li[md-expand]:not(:last-child),
.admin-detail-modal .md-list li[md-expand]:not(:last-child) {
    margin-bottom: .66rem
}

.abonos-detail-modal .md-list li[md-expand] .md-list-item-expand > .md-list-item-content,
.admin-detail-modal .md-list li[md-expand] .md-list-item-expand > .md-list-item-content {
    min-height: 36px;
    border-bottom: 2px solid rgba(62, 75, 83, .2)
}

.abonos-detail-modal .md-list .files-container h3,
.admin-detail-modal .md-list .files-container h3 {
    font-size: 1rem;
    font-weight: 400
}

.abonos-detail-modal .md-list .files-container ul,
.admin-detail-modal .md-list .files-container ul {
    -webkit-margin-start: 1.2rem;
    margin-inline-start: 1.2rem
}

.abonos-detail-modal .md-list .files-container ul li,
.admin-detail-modal .md-list .files-container ul li {
    position: relative;
    display: flex;
    align-items: center
}

.abonos-detail-modal .md-list .files-container ul li a,
.admin-detail-modal .md-list .files-container ul li a {
    width: 70%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #3381f2
}

.abonos-detail-modal .md-list .files-container ul li a:hover:after,
.admin-detail-modal .md-list .files-container ul li a:hover:after {
    content: "open_in_new";
    display: inline-block;
    font-family: "Material Icons";
    padding-left: 5px;
    text-decoration: none;
    position: relative;
    top: 2px
}

.abonos-detail-modal .md-list .files-container ul li::marker,
.admin-detail-modal .md-list .files-container ul li::marker {
    color: #ebad14;
    position: relative;
    top: 20px
}

.abonos-detail-modal .md-list .files-container ul li::before,
.admin-detail-modal .md-list .files-container ul li::before {
    font-family: "Material Icons";
    content: "image";
    color: #ebad14;
    font-size: 1.7rem;
    padding-right: 5px
}

.abonos-detail-modal .md-list .files-container ul li:after,
.admin-detail-modal .md-list .files-container ul li:after {
    font-family: "Material Icons";
    content: "circle";
    color: #ebad14;
    position: absolute;
    left: -15px;
    top: 10px;
    font-size: .5rem
}

.stepper-scrollable {
    width: 100%;
    overflow-x: auto
}

.status-stepper {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
    gap: 36px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 64px
}

.step:not(:first-child) .circle::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 2px);
    transform: translateY(-50%);
    width: calc(150% + 6px);
    height: 3px;
    background-color: #f1f3f5;
    z-index: 0
}

.step .date {
    font-size: 75%;
    height: 14px;
    color: #3e4b53;
    letter-spacing: -.4px;
    font-variant-numeric: tabular-nums
}

.step .circle {
    position: relative;
    width: 40px;
    height: 40px;
    background: #f1f3f5;
    border: 2px solid #f1f3f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.step .circle .index {
    display: block;
    text-align: center;
    z-index: 2;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 500;
    color: #a4afbc;
    color: #a7b3c0
}

.step .circle::after {
    color: #fff;
    font-weight: 600;
    position: absolute;
    font-size: 1.5rem
}

.step .state {
    color: #3e4b53;
    font-size: 75%;
    font-weight: 500;
    white-space: break-spaces
}

.step.approved .circle {
    background-color: green;
    border-color: green
}

.step.approved .circle::before {
    background-color: green
}

.step.approved .circle::after {
    font-family: "Material Icons";
    content: "done"
}

.step.approved .index {
    visibility: hidden
}

.step.rejected .circle {
    background-color: #d50000;
    border-color: #d50000
}

.step.rejected .circle::before {
    background-color: #d50000
}

.step.rejected .circle::after {
    font-family: "Material Icons";
    content: "close"
}

.step.rejected .index {
    visibility: hidden
}

.step.validating .date {
    color: #ea6100
}

.step.validating .circle {
    border-color: #ea6100
}

.step.reopened .circle {
    background-color: #ebad14;
    border-color: #ebad14
}

.step.reopened .circle::before {
    background-color: #ebad14
}

.step.reopened .circle::after {
    font-family: "Material Icons";
    content: "priority_high"
}

.step.reopened .index {
    visibility: hidden
}

.observation {
    position: relative;
    white-space: pre-line;
    word-break: break-word;
    line-height: 1.5;
    font-style: italic
}

.observation:before {
    position: absolute;
    top: 1px;
    left: 0;
    font-family: "Material Icons";
    line-height: normal;
    font-style: normal;
    color: #fff;
    border-radius: 50%;
    padding: 2px;
    margin-right: 5px
}

.observation.rejected,
.observation.reopened {
    padding-left: 25px
}

.observation.reopened:before {
    content: "priority_high";
    background-color: #ebad14
}

.observation.rejected:before {
    content: "close";
    background-color: #d50000
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55px;
    background-color: #747474;
    transition: width .18s ease-out
}

.sidebar-menu .sidebar-linktree-container {
    overflow-x: hidden;
    overflow-y: auto;
    padding-block: 8px;
    max-height: unset;
    flex-basis: 70vh;
    flex-grow: 1
}

.sidebar-menu .md-icon {
    margin: 0;
    color: #fff;
    font-weight: 300;
    width: 32px;
    z-index: 1
}

.sidebar-menu .toggle-button {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 10px 10.6666666667px;
    margin: 0;
    background-color: #525252
}

.sidebar-menu .toggle-button:hover {
    cursor: pointer
}

.sidebar-menu .menu-parent.main {
    margin-block: 8px
}

.sidebar-menu .menu-parent.sub {
    background: #8b8b8b
}

.sidebar-menu .menu-title.main {
    text-transform: uppercase;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
}

.sidebar-menu .menu-title.main .title {
    font-weight: 700
}

.sidebar-menu .menu-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding-block: 10px;
    width: 100vw;
    padding-left: 10.6666666667px;
    padding-right: 10.6666666667px
}

@media (min-width:600px) {
    .sidebar-menu .menu-title {
        width: 300px
    }
}

.sidebar-menu .menu-title.main,
.sidebar-menu .menu-title.sub {
    justify-content: space-between
}

.sidebar-menu .menu-title .row-line {
    display: flex;
    align-items: flex-start;
    align-items: center;
    gap: 10px
}

.sidebar-menu .menu-title .title {
    align-self: center;
    color: #fff;
    font-weight: 400;
    font-size: 1rem;
    width: 66.6666666667vw;
    padding-left: 6px;
    position: relative;
    left: 0;
    transition: left .1s ease-out
}

@media (min-width:600px) {
    .sidebar-menu .menu-title .title {
        width: 200px
    }
}

.sidebar-menu .menu-title .title:hover {
    cursor: pointer
}

.sidebar-menu.expand {
    width: 100vw
}

@media (min-width:600px) {
    .sidebar-menu.expand {
        width: 300px
    }
}

.sidebar-menu.expand .toggle-button {
    justify-content: flex-end
}

.sidebar-menu .show-more {
    transition: transform .2s ease-out
}

.sidebar-menu .show-more.open {
    transform: rotate(180deg)
}

.sidebar-menu .expandable li {
    background-color: none
}

.sidebar-menu .expandable li .expandable li {
    background-color: #505050
}

.sidebar-menu .expandable li .expandable li .expandable li {
    background-color: #3b3a3a
}

.sidebar-menu a.menu-link {
    text-decoration: none;
    position: relative
}

@media (min-width:1280px) {
    .sidebar-menu a.menu-link:hover .title {
        left: 8px
    }
}

@media (min-width:1280px) {
    .sidebar-menu a.menu-link:hover::before {
        content: "";
        position: absolute;
        left: 0;
        height: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        opacity: .1;
        z-index: 0
    }
}

input[type=checkbox] {
    display: none
}

input[type=checkbox]:checked + .expandable {
    max-height: 60vh
}

.expandable {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    will-change: auto;
    transition: all .35s
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    transition: opacity .3s ease;
}

.modal-container {
    width: fit-content;
    height: fit-content;
    margin: 40px auto 0;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-rgb(0, 0, 0)0, 0)0, 0)
    color: #0f1110;
}

.modal-body {
    margin: 30px 15px;
    overflow: auto;
}

.text-right {
    text-align: center;
}

.form-label {
    display: block;
    margin-bottom: 1em;
}

.form-label > .form-control {
    margin-top: 0.5em;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5em 1em;
    line-height: 1.5;
    border: 1px solid #ddd;
}

.modal-enter, .modal-leave {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.close2 {
  position: fixed;
  top: 5%;
  right: 28%;
  opacity: 0.6;
}.close2:hover {
  opacity: 1;
}.close2:before, .close2:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 17px;
  width: 2px;
  background-color: #333;
}.close2:before {
  transform: rotate(45deg);
}.close2:after {
  transform: rotate(-45deg);
}
.invalid {
  border: 2px solid red;
}
.valid {
  border: 2px solid green;
}
.img-user {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 160px;
}
.img-user:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.img-user-url {
  background-image: url(../assets/icon/no-img-1.png);
}
.image-container {
  display: flex;
  align-items: center;
  justify-content: center
}
/*.image {
  flex-basis: 70%;
  order: 2;
}*/
.text {
  /* font-size: 20px; 
  padding-left: 20px;*/
}
.my-0 {
margin-top: 0!important;
}
.expandable {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    will-change: auto;
    transition: all .35s
}
.my-0 {
    margin-top: 0!important;
}
.card-item-benefit {
    height: 263px;
    width: 450px;
    position: relative;
    margin: 10px auto;
}
.overlay-cardNumber {
    position: absolute;
    top: 12%;
    left: 10%;
    /*  transform: translate(-50%, -50%); */
    color: #fff;
    padding: 10px 0px;
    font-size: 19px;
    text-align: start;
    max-width: 80%;
}
.overlay-cardStatus {
    position: absolute;
    top: 22%;
    left: 10%;
    /*  transform: translate(-50%, -50%); */
    color: #fff;
    padding: 10px 0px;
    font-size: 19px;
    text-align: start;
    max-width: 80%;
}
.overlay-cardLogo {
    position: absolute;
    bottom: 10%;
    right: 10%;
    transform: translate(-50%, -50%);
    padding: 11px 28px;
    background: url(../assets/img-salta/main-card-logo.svg);
}
.overlay-cardLogo2 {
    position: absolute;
    bottom: 11%;
    right: 18%;
    transform: translate(-50%, -50%);
    padding: 9px 57px;
    background: url(../assets/img-salta/secondary-card-logo.svg);
}
.modal-body-benefit {
    margin: 30px 20px;
    overflow: auto;
}
.modal-body-benefit h2 {
    margin-bottom: 26px;
}
.modal-body-benefit p {
    margin-bottom: 5px;
}
.benefit-content{
    text-align: left;
    padding: 0 30px 25px;
}
.center-encabezado {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.importe-encabezado{
	display: flex;
    flex-direction: column;
    align-items: left;
}
.text-right {
    text-align: right;
}
.toltip-prox-arribos p {
    margin: 4px!important;
}
.toltip-prox-arribos .arribos-table {
    display: flex;
    justify-content: space-between;
}
.toltip-prox-arribos .parada {
    margin-bottom: 10px!important;
}

.nomina-head {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 20px;
}
.nomina-head button i {
    color: #fff !important;
}

.btn-nomina {
    min-width: 10px;
    padding: 0 5px;
}
.action-nomina .md-table-head-container {
    margin-left: 25px !important;
}
.modal-frame.simple nav {
    gap: 5px;
}
td.establishing {
    width: 200px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
}
td.name {
    width: 200px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
}
td.lastname {
    width: 200px;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    overflow: hidden;
}
.line-news{
    background-color: var(--md-theme-default-primary, #3e4b53);
    color: var(--md-theme-default-text-primary-on-primary, #fff);
     width: 100%;
    padding: 2%;
    border: solid;
    border-radius: 1rem;
}

.manage-cards .md-error, .tarjetas .md-error, .cards-container .md-error {
    opacity: 1 !important;
    color: #d32f2f !important;
    display: block !important;
    margin-top: 8px !important;
    left: unset !important;
    transform: none !important;
    font-size: 0.98em !important;
    font-weight: 400 !important;
    background: #fff6f6 !important;
    z-index: 100 !important;
  }

  :root {
  --color-success: #4CAF50;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-info: #2196F3;
  --color-text: #333;
  --color-border: #ddd;
  --color-bg-light: #f5f5f5;
}

.modal-frame.simple .modal-window {
  max-width: 700px;
}

.modal-frame.simple .modal-window.medium {
  max-width: 600px;
}

.modal-frame.simple .modal-window.large {
  max-width: 900px;
}

.modal-cronologia .modal-window {
  max-width: 1200px !important;
  width: 90vw !important;
}

.email-cell {
  max-width: 200px !important;
  word-break: break-all !important;
  padding-right: 15px !important;
}

.modal-blanquear-password .modal-window button.close,
.modal-borrar-usuario .modal-window button.close,
.modal-cronologia .modal-window button.close {
  position: absolute !important;
  z-index: 1 !important;
  top: 12px !important;
  right: 12px !important;
  padding: 4px 8px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  border: none !important;
}

.modal-blanquear-password .modal-window button.close md-icon,
.modal-borrar-usuario .modal-window button.close md-icon,
.modal-cronologia .modal-window button.close md-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}

.modal-blanquear-password .modal-content {
  padding: 20px 0;
}

.modal-blanquear-password .modal-message {
  display: flex;
  align-items: flex-start;
  background-color: var(--color-bg-light);
  border-left: 4px solid var(--color-info);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
}

.modal-blanquear-password .modal-message .warning-icon {
  color: var(--color-info);
  margin-right: 15px;
  margin-top: 2px;
  flex-shrink: 0;
}

.modal-blanquear-password .modal-message p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text);
}

.modal-blanquear-password .modal-content .user-info,
.modal-blanquear-password .modal-content .email-info {
  margin: 10px 0;
  font-size: 14px;
  color: var(--color-text);
}

.modal-blanquear-password .modal-content .user-info strong,
.modal-blanquear-password .modal-content .email-info strong {
  color: #2c3e50;
  font-weight: 600;
}

.modal-blanquear-password .modal-content .error-message {
  display: flex;
  align-items: center;
  background-color: #ffebee;
  border-left: 4px solid var(--color-error);
  padding: 12px 15px;
  border-radius: 4px;
  margin-top: 15px;
  color: var(--color-error);
  font-size: 13px;
}

.modal-blanquear-password .modal-content .error-message md-icon {
  margin-right: 10px;
  flex-shrink: 0;
}

.modal-blanquear-password .success-content {
  text-align: center;
  padding: 30px 20px;
}

.modal-blanquear-password .success-content .success-icon {
  font-size: 60px;
  color: var(--color-success);
  margin-bottom: 15px;
}

.modal-blanquear-password .success-content .success-icon md-icon {
  font-size: 60px !important;
  width: 60px !important;
  height: 60px !important;
}

.modal-blanquear-password .success-content h4 {
  color: var(--color-success);
  margin: 15px 0;
}

.modal-blanquear-password .success-content p {
  color: var(--color-text);
  margin: 10px 0;
}

.modal-blanquear-password .success-content .success-subtext {
  font-size: 13px;
  color: #999;
}

.modal-borrar-usuario .modal-content {
  padding: 20px 0;
}

.modal-borrar-usuario .modal-content .user-info-section {
  background-color: var(--color-bg-light);
  padding: 15px;
  border-radius: 4px;
  margin: 20px 0;
}

.modal-borrar-usuario .modal-content .user-info-section .user-info,
.modal-borrar-usuario .modal-content .user-info-section .user-email,
.modal-borrar-usuario .modal-content .user-info-section .user-id {
  margin: 8px 0;
  font-size: 14px;
  color: var(--color-text);
}

.modal-borrar-usuario .modal-content .user-info-section .user-info strong,
.modal-borrar-usuario .modal-content .user-info-section .user-email strong,
.modal-borrar-usuario .modal-content .user-info-section .user-id strong {
  color: #2c3e50;
  font-weight: 600;
}

.modal-borrar-usuario .modal-content .confirmation-section {
  margin: 20px 0;
}

.modal-borrar-usuario .modal-content .confirmation-section .confirmation-label {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 12px;
  font-weight: 500;
}

.modal-borrar-usuario .modal-content .confirmation-section .error-message {
  align-items: center;
  background-color: #ffebee;
  border-left: 4px solid var(--color-error);
  padding: 12px 15px;
  border-radius: 4px;
  margin-top: 15px;
  color: var(--color-error);
  font-size: 13px;
}

.modal-borrar-usuario .modal-content .confirmation-section .error-message md-icon {
  margin-right: 10px;
  flex-shrink: 0;
}

.modal-borrar-usuario .modal-content .md-field {
  width: 100%;
}

.modal-borrar-usuario .modal-content .md-field md-input {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 2px;
}

.modal-borrar-usuario .success-content {
  text-align: center;
  padding: 30px 20px;
}

.modal-borrar-usuario .success-content .success-icon {
  font-size: 60px;
  color: var(--color-success);
  margin-bottom: 15px;
}

.modal-borrar-usuario .success-content .success-icon.delete-success {
  color: var(--color-error);
}

.modal-borrar-usuario .success-content .success-icon md-icon {
  font-size: 60px !important;
  width: 60px !important;
  height: 60px !important;
}

.modal-borrar-usuario .success-content h4 {
  color: var(--color-success);
  margin: 15px 0;
}

.modal-borrar-usuario .success-content p {
  color: var(--color-text);
  margin: 10px 0;
}

.modal-borrar-usuario .success-content .success-subtext {
  font-size: 13px;
  color: #999;
}

.modal-borrar-usuario .nav-submit .btn-delete {
  background-color: var(--color-error) !important;
  color: white !important;
}

.modal-borrar-usuario .nav-submit .btn-delete:disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
}

.modal-borrar-usuario .nav-submit .btn-delete:not(:disabled):hover {
  background-color: #d32f2f !important;
}

.modal-cronologia .modal-content {
  padding: 20px 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.modal-cronologia .modal-content.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 300px;
}

.modal-cronologia .modal-content.loading-state p {
  margin-top: 20px;
  color: var(--color-text);
}

.modal-cronologia .modal-content.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.modal-cronologia .modal-content.error-state .error-container {
  text-align: center;
}

.modal-cronologia .modal-content.error-state .error-container .error-icon {
  font-size: 48px !important;
  color: var(--color-info);
  margin-bottom: 15px;
}

.modal-cronologia .modal-content.error-state .error-container p {
  color: var(--color-text);
  font-size: 14px;
}

.modal-cronologia .modal-content.cronologia-content {
  overflow-y: auto;
}

.modal-cronologia .modal-content.cronologia-content .toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 15px;
}

.modal-cronologia .modal-content.cronologia-content .toolbar .record-count {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.modal-cronologia .modal-content.cronologia-content .toolbar .export-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-cronologia .modal-content.cronologia-content .toolbar .export-btn md-icon {
  margin: 0 !important;
}

.modal-cronologia .modal-content.cronologia-content .table-container {
  overflow-x: auto;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead {
  background-color: var(--color-bg-light);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th {
  padding: 12px 15px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th:hover {
  background-color: #eeeeee;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th.active {
  background-color: #e0e0e0;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th .th-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th .th-content span {
  flex-grow: 1;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table thead th .th-content .sort-icon {
  font-size: 18px;
  color: var(--color-info);
  opacity: 0.7;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody tr:hover {
  background-color: #fafafa;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody td {
  padding: 12px 15px;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .fecha-cell {
  white-space: nowrap;
  color: #666;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .fecha-cell .fecha-text {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #f0f0f0;
  width: fit-content;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon {
  font-size: 18px !important;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-add {
  color: var(--color-success);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-edit {
  color: var(--color-info);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-delete {
  color: var(--color-error);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-check_circle {
  color: var(--color-success);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-lock_reset {
  color: var(--color-warning);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-block {
  color: var(--color-error);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-check {
  color: var(--color-success);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-login {
  color: var(--color-info);
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge md-icon.accion-icon-info {
  color: #999;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .accion-cell .accion-badge span {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 500;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .operador-cell {
  color: #666;
  font-weight: 500;
}

.modal-cronologia .modal-content.cronologia-content .table-container .cronologia-table tbody .detalle-cell .detalle-text {
  display: block;
  max-width: 300px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #999;
}

.modal-cronologia .modal-content .nav-submit {
  margin-top: 15px;
}

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

.spinning {
  animation: spin 1s linear infinite !important;
}

.nav-submit {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 25px;
  padding-top: 15px;
  border-top: 1px solid var(--color-border);
}

.nav-submit button,
.nav-submit a {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nav-submit .btn-cancel {
  background-color: #f5f5f5;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.nav-submit .btn-cancel:hover:not(.disabled) {
  background-color: #eeeeee;
}

.nav-submit .btn-cancel.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nav-submit .btn-action {
  background-color: var(--color-info);
  color: white;
  border: none;
}

.nav-submit .btn-action:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.nav-submit .btn-action:not(:disabled):hover {
  background-color: #1976D2;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

@media (max-width: 768px) {
  .modal-frame.simple .modal-window {
    max-width: 95vw !important;
  }

  .modal-frame.simple .modal-window.medium {
    max-width: 95vw !important;
  }

  .modal-frame.simple .modal-window.large {
    max-width: 95vw !important;
  }

  .modal-cronologia .modal-content {
    max-height: 80vh;
  }

  .modal-cronologia .modal-content .table-container .cronologia-table {
    font-size: 11px;
  }

  .modal-cronologia .modal-content .table-container .cronologia-table thead th {
    padding: 10px 8px;
  }

  .modal-cronologia .modal-content .table-container .cronologia-table tbody td {
    padding: 10px 8px;
  }

  .modal-cronologia .modal-content .table-container .cronologia-table tbody .detalle-cell .detalle-text {
    max-width: 150px;
  }

  .nav-submit {
    flex-direction: column;
  }

  .nav-submit a,
  .nav-submit button {
    width: 100%;
    justify-content: center;
  }
}


.admin-logs-auditoria {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 200px); 
}

.page-header {
    margin-bottom: 30px;
    text-align: center;
}

.page-header h1 {
    color: #333;
    margin-bottom: 10px;
    font-size: 2.5em;
}

.page-header p {
    color: #666;
    font-size: 1.1em;
}

.filters-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filters-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.filter-group label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
    font-size: 0.9em;
}

.filter-input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.filter-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

.filter-actions {
    display: flex;
    gap: 10px;
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 10px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #2196F3;
    color: white;
}

.btn-primary:hover {
    background: #1976D2;
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.logs-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px; 
}

.loading, .no-data {
    padding: 40px;
    text-align: center;
    color: #666;
    font-size: 1.1em;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.rotating {
    animation: rotate 1s linear infinite;
}

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

.no-data {
    color: #999;
}

.no-data i {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}

.logs-table {
    overflow-x: auto;
}

.logs-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.logs-table th {
    background: #f8f9fa;
    padding: 15px 12px;
    text-align: left;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.logs-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.logs-table tbody tr:hover {
    background: #f8f9fa;
}

.action-badge {
    padding: 4px 8px;
    border-radius: 12px;
    color: white;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-cell {
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .admin-logs-auditoria {
        padding: 10px;
    }
    
    .filters-container {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        flex-direction: column;
    }
    
    .logs-table {
        font-size: 12px;
    }
    
    .logs-table th,
    .logs-table td {
        padding: 8px 6px;
    }
    
    .detail-cell {
        max-width: 200px;
    }
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}