@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
     box-sizing: border-box;
}

body {
     background: #f6f5f7;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     font-family: 'Montserrat', sans-serif;
     margin: -20px 0 50px;
}

h1 {
     font-weight: bold;
     margin: 0;
}

h2 {
     text-align: center;
     font-weight: bold;
     margin: 0;
}

p {
     font-size: 14px;
     font-weight: 100;
     line-height: 20px;
     letter-spacing: 0.5px;
     margin: 20px 0 30px;
}

blockquote p {

}

span {
     font-size: 12px;
}

a {
     color: #333;
     font-size: 14px;
     text-decoration: none;
     margin: 15px 0;
     cursor: pointer;
     font-weight: bold;
}

button {
     border-radius: 20px;
     /* border: 1px solid #FF4B2B; */
     /* background-color: #FF4B2B; */
     color: #FFFFFF;
     font-size: 12px;
     font-weight: bold;
     padding: 12px 45px;
     letter-spacing: 1px;
     transition: transform 80ms ease-in;
     cursor: pointer;
}

.linear-gradient {
     background: linear-gradient(40deg, #6d7fcc, #05ffa3) !important;
     border: 0px
}

button:active {
     transform: scale(0.95);
}

button:focus {
     outline: none;
}

button.ghost {
     background-color: transparent;
     border: 2px solid #FFFFFF;
     cursor: pointer;
}

button.ghost:hover {
     background-color: #FFFFFF;
     border: 2px solid #FFFFFF;
     color: #6d7fcc;
     cursor: pointer;
}

form {
     background-color: #FFFFFF;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 50px;
     height: 100%;
     text-align: center;
}

input {
     background-color: #eee;
     border: none;
     padding: 12px 15px;
     margin: 8px 0;
     width: 90%;
}

.container {
     background-color: #fff;
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     border-radius: 10px;
     position: relative;
     overflow: hidden;
     width: 768px;
     max-width: 100%;
     min-height: 480px;
     top: 20px;
}

.form-container {
     position: absolute;
     top: 0;
     height: 100%;
     transition: all 0.6s ease-in-out;
}

.sign-in-container {
     left: 0;
     width: 50%;
     z-index: 2;
}

.container.right-panel-active .sign-in-container {
     transform: translateX(100%);
}

.sign-up-container {
     left: 0;
     width: 50%;
     opacity: 0;
     z-index: 1;
}

.container.right-panel-active .sign-up-container {
     transform: translateX(100%);
     opacity: 1;
     z-index: 5;
     animation: show 0.6s;
}

@keyframes show {
     0%, 49.99% {
          opacity: 0;
          z-index: 1;
     }

     50%, 100% {
          opacity: 1;
          z-index: 5;
     }
}

.overlay-container {
     position: absolute;
     top: 0;
     left: 50%;
     width: 50%;
     height: 100%;
     overflow: hidden;
     transition: transform 0.6s ease-in-out;
     z-index: 100;
}

.container.right-panel-active .overlay-container{
     transform: translateX(-100%);
}

.overlay {
     /* background: #FF416C; */
     /* background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
     background: linear-gradient(to right, #FF4B2B, #FF416C); */
     background: -webkit-linear-gradient(to right, #6d7fcc, #7386D5);
     background: linear-gradient(to right, #6d7fcc, #7386D5);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 0 0;
     color: #FFFFFF;
     position: relative;
     left: -100%;
     height: 100%;
     width: 200%;
     transform: translateX(0);
     transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
     transform: translateX(50%);
}

.overlay-panel {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 40px;
     text-align: center;
     top: 0;
     height: 100%;
     width: 50%;
     transform: translateX(0);
     transition: transform 0.6s ease-in-out;
}

.overlay-left {
     transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
     transform: translateX(0);
}

.overlay-right {
     right: 0;
     transform: translateX(0);
}

.container.right-panel-active .overlay-right {
     transform: translateX(20%);
}

.social-container {
     margin: 20px 0;
}

.social-container a {
     border: 1px solid #DDDDDD;
     border-radius: 50%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     margin: 0 5px;
     height: 40px;
     width: 40px;
}

footer {
     background-color: #222;
     color: #fff;
     font-size: 14px;
     bottom: 0;
     position: fixed;
     left: 0;
     right: 0;
     text-align: center;
     z-index: 999;
}

footer p {
     margin: 10px 0;
}

footer i {
     color: red;
}

footer a {
     color: white;
     font-weight: bold;
     text-decoration: none;
}

.formulario {
     background-color: #FFFFFF;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 0 50px;
     height: 100%;
     text-align: center;
}

.blockquote-footer {
     position: relative !important;
     text-align: initial !important;
     background-color: transparent !important;
}

.texto_comprobante {
     margin: 0px !important;
     font-weight: bold !important;
}

/* .modal-body {
     height: 250px !important;
     overflow-y: auto !important;
} */

.divContentTotales{
     padding: 0px !important;
     border-top: 2px solid #6d7fcc;
     border-right: 2px solid #6d7fcc;
     border-left: 2px solid #6d7fcc;
}

.colorFin{
     border-bottom: 2px solid #6d7fcc;
}

.nombreTotales{
     width: 95px;
     padding: 5px;
     font-weight: bold;
     font-style: italic;
     font-size: 10px;
}

.simboloTotal{
     border-right: 2px solid #6d7fcc;
     width: 35px;
     padding: 5px;
     font-weight: bold;
     font-style: italic;
     font-size: 10px;
}

.colorMontos{
     padding: 5px;
     font-weight: bold;
     font-style: italic;
     font-size: 10px;
}

.btn_app_xml{
     position: relative;
     margin: 0 0 10px 10px;
     text-align: left;
     width: 120px;
     color: #6d7fcc !important;
     border: 2px solid #6d7fcc;
     font-size:12px;
     border-radius: 15px;
}

.btn_app_xml:hover{
     position: relative;
     margin: 0 0 10px 10px;
     text-align: left;
     width: 120px;
     color: white !important;
     border: 2px solid #6d7fcc;
     background: #6d7fcc;
     font-size:12px;
     border-radius: 15px;
}

.btn_app_pdf{
     position: relative;
     margin: 0 0 10px 10px;
     text-align: left;
     width: 120px;
     color: #FF4B2B !important;
     border: 2px solid #FF4B2B;
     font-size:12px;
     border-radius: 15px;
}

.btn_app_pdf:hover{
     position: relative;
     margin: 0 0 10px 10px;
     text-align: left;
     width: 120px;
     color: white !important;
     border: 2px solid #FF4B2B;
     background: #FF4B2B;
     font-size:12px;
     border-radius: 15px;
}