html,
        body {
          padding: 10px;
          font-family: Calibri, sans-serif;
        }

/* ===== BOTONES ===== */
.buttonA {
    background: linear-gradient(90deg, #005EB8, #009CDE);
    color: white;
    border: none;
    padding: 12px 30px;
    margin-top: 1rem;
    border-radius: 8px;
    font-size: 2rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    text-transform: uppercase;
    width: 80%;
}

    .buttonA:hover {
        background: linear-gradient(90deg, #009CDE, #005EB8);
        box-shadow: 0px 4px 10px rgba(0, 158, 222, 0.6);
        transform: translateY(-2px);
    }


        /*=== 3. Text Outside the Box ===*/
        .etc-login-form {
          color: #919191;
          padding: 10px 20px;
        }
        .etc-login-form p {
          margin-bottom: 5px;
        }
        /*=== 4. Main Form ===*/
        .login-form-1 {
          max-width: 300px;
          border-radius: 5px;
          display: inline-block;
        }
        .main-login-form {
          position: relative;
        }
        .login-form-1 .form-control {
          border-style: none;
    border-color: inherit;
    border-width: 0;
    box-shadow: 0 0 0;
          border-radius: 0;
		        /*background: transparent;*/
          color: #555555;
          padding: 7px 0;
          font-weight: bold;
          text-align: center;
}
        .login-form-1 .form-control::-webkit-input-placeholder {
          color: #999999;
        }
        .login-form-1 .form-control:-moz-placeholder,
        .login-form-1 .form-control::-moz-placeholder,
        .login-form-1 .form-control:-ms-input-placeholder {
          color: #999999;
        }
        .login-form-1 .form-group {
          margin-bottom: 0;
          border-bottom: 2px solid #efefef;
          padding-right: 20px;
          position: relative;
        }
        .login-form-1 .form-group:last-child {
          border-bottom: 0;
        }
        .login-group {
          background: #ffffff;
          color: #999999;
          border-radius: 8px;
          padding: 10px 20px;
          border-style: solid;
        }
        .login-group-checkbox {
          padding: 5px 0;
        }
        /*=== 5. Login Button ===*/
        .login-form-1 .login-button {
          position: absolute;
          right: -15px;
          top: -2147483648px;
          background: #fff;
          color: #999999;
          padding: 11px 0;
          width: 50px;
          height: 50px;
          margin-top: -25px;
          border: 5px solid #999999;
          border-radius: 50%;
          transition: all ease-in-out 500ms;
          color: #1293B3;
        }
   
        .login-form-1 .login-button.clicked {
          color: #555555;
        }
        .login-form-1 .login-button.clicked:hover {
          transform: none;
        }
        .login-form-1 .login-button.clicked.success {
          color: #2ecc71;
        }
        .login-form-1 .login-button.clicked.error {
          color: #e74c3c;
        }
        /*=== 6. Form Invalid ===*/
        label.form-invalid {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 5;
          display: block;
          margin-top: -25px;
          padding: 7px 9px;
          background: #777777;
          color: #ffffff;
          border-radius: 5px;
          font-weight: bold;
          font-size: 11px;
        }
        label.form-invalid:after {
          top: 100%;
          right: 10px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none;
          border-color: transparent;
          border-top-color: #777777;
          border-width: 6px;
        }
        /*=== 7. Form - Main Message ===*/
        .login-form-main-message {
          background: #ffffff;
          color: #999999;
          border-left: 3px solid transparent;
          border-radius: 3px;
          margin-bottom: 8px;
          font-weight: bold;
          height: 0;
          padding: 0 20px 0 17px;
          opacity: 0;
          transition: all ease-in-out 200ms;
        }
        .login-form-main-message.show {
          height: auto;
          opacity: 1;
          padding: 10px 20px 10px 17px;
        }
        .login-form-main-message.success {
          border-left-color: #2ecc71;
        }
        .login-form-main-message.error {
          border-left-color: #e74c3c;
        }
        /*=== 9. Misc ===*/
        .logo {
          padding: 7px 0;
          color: #ffffff;
          font-weight: bold;
        }

        .logo-top {
            width: 150px;
            margin-left: -75px;
            left: 50%;
            position: absolute;
        }

        .img-top-center {
            position: absolute;
            top: 0%;
            left: 50%;
            width: 80px;
            height: 80px;
            margin-left: -40px;
        }
	
	        .subtitle {
		        color : #fba506 !important;
	        }

            input,textarea{padding:10px;width:100%;outline:none;transition: all 0.15s ease-in-out;border-radius:3px;border:1px solid rgba(0,0,0,0.2);}