:root {
    --color-tiko: rgba(0, 123, 227, 1)!important;
    --color-border: #ddd!important;
    --color-text-input: #777!important;
    --color-text-input-placeholder: #aaa!important;
    --color-text-button: #fff!important;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--color-text-input) !important;
}
.tiko-payment-form-loader{
    display: none;
    position: absolute!important;
    width: 100%!important; 
    height: 100%!important;
    background: rgba(255,255,255,.5)!important;
    z-index: 1!important;
    align-content: center!important;
    justify-content: center!important;
    align-items: center!important;
  }
  .lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid var(--color-tiko);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--color-tiko) transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
.tiko-payment-form {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif!important;
    font-size: 12px!important;
    font-weight: 100!important;
    width: 450px!important;
    box-sizing: border-box!important;
    display: flex;
    flex-direction: row!important;
    justify-content: center!important;
    align-content: center!important;
    align-items:  center!important;
    margin: 0 auto!important;
    padding: 30px 20px 0 20px!important;
    box-shadow: 0 0 26px 1.2px var(--color-border)!important;
    border-radius: 15px!important;
    background-color: white!important;
}
.tiko-payment-form .tiko-row {
    margin-bottom: 10px!important;
}
.tiko-payment-form .content {
    width: 100%;
}
.tiko-payment-form .tiko-row .button {
    background-color: white!important;
    border-color: white!important;
}
.tiko-payment-form .tiko-row .cvv {
    background-color: transparent!important; box-shadow: none!important;
}
.tiko-payment-form .tiko-row .card-name {
    background-color: transparent!important; box-shadow: none!important;
}
.tiko-payment-form .tiko-row .inputname {
    text-transform:uppercase!important; 
}
.tiko-payment-form .tiko-row .number {
    text-transform:uppercase!important; 
}
.tiko-payment-form .tiko-row .card-no {
    background-color: transparent!important; box-shadow: none!important;
}
.tiko-payment-form .tiko-row .logo {
    display: block ; 
    margin: auto !important;
}
.tiko-payment-form .tiko-row .icon {
    display: block ; 
    margin-right: 5px!important;
}
.tiko-payment-form .tiko-row-installment {
    margin-top: 16px!important;
}
.tiko-payment-form .tiko-row-button {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tiko-payment-form .tiko-row-installment table {
    width: 100%!important;
    text-align: center!important;
    cursor: pointer!important;
}
.tiko-payment-form .tiko-row-installment tbody tr:nth-child(even) {
    background-color: #f7f7f7!important;
}

.tiko-payment-form .tiko-row-installment tbody tr:hover {
    background-color: #ADD9FF!important;
}
.installment-table-row td{
    padding: 1em;
}

.tiko-payment-form .tiko-row-installment table th{
    text-align: center!important;
}
.tiko-payment-form .tiko-row input[type=text] {
    border: none!important;
    height: 30px!important;
    max-width: 300px!important;
    width: 100%!important;
    color: var(--color-text-input)!important;
    font-size: 16px!important;
    padding-left: 7px!important;
    background-color: #fff;
    box-shadow: none;
    padding: 0 !important;
    margin: 0!important;
}
.tiko-payment-form .tiko-row input::placeholder {
    font-size: 14px!important;
    color: var(--color-text-input-placeholder)!important;
}
.tiko-payment-form .tiko-row input:focus {
    outline: none!important;
}
.tiko-payment-form .tiko-row .header {
    text-align: center!important;
    margin-bottom: 16px!important;
}
.tiko-payment-form .tiko-row .header svg {
    height: 65px!important;
    width: 65px!important;
    fill: #1a3b5d!important;
}
.tiko-payment-form .tiko-row .card-no {
    display: flex;
    flex-direction: row!important;
    align-items: center!important;
    margin-top: 10px!important;
    border: 0.7px solid var(--color-border)!important;
    border-radius: 4px!important;
    height: 40px!important;
    color: var(--color-text-input)!important;
    font-size: 16px!important;
    transition: 200ms box-shadow ease-in-out!important;
    padding-left: 13px!important;
}
.tiko-payment-form .tiko-row .card-no::placeholder {
    font-size: 14px!important;
}
.tiko-payment-form .tiko-row .card-no:focus-within {
    box-shadow: 0 0 4px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .card-no:hover {
    box-shadow: 0 0 6px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .card-name {
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    margin-top: 10px!important;
    border: 0.7px solid var(--color-border)!important;
    border-radius: 4px!important;
    height: 40px!important;
    color: var(--color-text-input)!important;
    font-size: 16px!important;
    transition: 200ms box-shadow ease-in-out!important;
    padding-left: 13px!important;
}
.tiko-payment-form .tiko-row .card-name::placeholder {
    font-size: 14px!important;
}
.tiko-payment-form .tiko-row .card-name:focus-within {
    box-shadow: 0 0 4px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .card-name:hover {
    box-shadow: 0 0 6px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .expire-date {
    display: flex;
    flex-direction: row!important;
    height: 42px!important;
}
.tiko-payment-form input[type=checkbox], input[type=radio] {
    opacity: 1!important;
}

.tiko-payment-form table td, table th {
    border: none!important;
}

.tiko-payment-form .tiko-row .expire-date select {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif!important;
    font-size: 14px!important;
    border: 0.4px solid var(--color-border)!important;
    border-radius: 4px!important;
    margin-right: 12px!important;
    height: 42px!important;
    width: 64px!important;
    color: var(--color-text-input)!important;
    cursor: pointer!important;
    padding: 0 0 0 5px!important;
}
.tiko-payment-form .tiko-row .expire-date select:focus {
    box-shadow: 0 0 4px 0.6px var(--color-tiko)!important;
    outline: none!important;
}
.tiko-payment-form .tiko-row .expire-date select:hover {
    box-shadow: 0 0 6px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .expire-date .cvv {
    margin-left: auto!important;
    width: 30%!important;
    display: flex;
    flex-direction: row!important;
    align-items: center!important;
    border: 0.7px solid var(--color-border)!important;
    border-radius: 4px!important;
    height: 40px!important;
    color: var(--color-text-input)!important;
    font-size: 16px!important;
    transition: 200ms box-shadow ease-in-out!important;
    padding-left: 13px!important;
}
.tiko-payment-form .tiko-row .expire-date .cvv::placeholder {
    font-size: 14px!important;
}
.tiko-payment-form .tiko-row .expire-date .cvv:focus-within {
    box-shadow: 0 0 4px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .expire-date .cvv:hover {
    box-shadow: 0 0 6px 0.6px var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .expire-date .cvv input {
    width: 100%!important;
}
.tiko-payment-form .tiko-row .button {
    display: flex;
    justify-content: center!important;
}
.tiko-payment-form .tiko-row .button button {
    width: 180px!important;
    margin: 15px!important;
    background-color: var(--color-tiko)!important;
    color: var(--color-text-button)!important;
    font-weight: 600!important;
    border-radius: 8px!important;
    cursor: pointer!important;
    transition: 600ms background-color, color, border ease-out!important;
    padding: 12px 8px!important;
    border: 1.2px solid var(--color-tiko)!important;
}
.tiko-payment-form .tiko-row .button button:hover {
    background-color: #005AA3!important;
}
.tiko-payment-form .tiko-row .button button:focus {
    outline: none!important;
}
.tiko-payment-form .tiko-row .privacy {
    margin-top: 16px!important;
    margin-bottom: 20px!important;
    text-align: center!important;
}
.tiko-payment-form .tiko-row .version {
    display: block;
    text-align: center!important;
}
.tiko-payment-form .tiko-row .privacy a {
    color: var(--color-text-input)!important;
    font-weight: 400!important;
    font-size: 11px!important;
    text-decoration: underline!important;
}
@media only screen and (max-width: 740px) {
    .tiko-payment-form .tiko-row .expire-date .cvv img {
        display: none;
        padding-left: 4px!important;
    }
    .tiko-payment-form .tiko-row .expire-date .cvv input {
        padding-left: 4px!important;
    }
    .tiko-payment-form .tiko-row .expire-date .cvv {
        padding-left: 4px!important;
    }
}