.payment-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s ease infinite;
}

.payment-spinner.white {
    border: 4px solid rgb(255 255 255) !important;
    border-left-color: #09f0 !important;
}











.payment-card-feedback {
    text-align: left; 
    color: #585a60; 
    padding: 3px 3px 10px 3px; 
    font-size: 15px;
}
.payment-card-disclaim {
    color: #7c7c7c; 
    padding: 0px 6px; 
    margin-top: -20px; 
    font-size: 11px;
}
.payment-card-container {
    margin: 2px 0px 30px 0px;
    min-height: 100px;
    width: 100%;
    min-width: 230px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    font-family: 'Albert Sans', sans-serif;
    border: 3px solid #424242 !important;
    color: #000; 
}
.payment-card-container:hover {
    background: #fff;
    color: #000;
    box-shadow: 0px 0px 0px 1px #f0f0f0;
}




.payment-card-feedback-dark {
    text-align: left; 
    color: #919399; 
    padding: 3px 3px 10px 3px; 
    font-size: 15px;
}
.payment-card-disclaim-dark {
    color: #919399; 
    padding: 0px 6px; 
    margin-top: -20px; 
    font-size: 11px;
}
.payment-card-container-dark {
    margin: 2px 0px 30px 0px;
    min-height: 100px;
    width: 100%;
    min-width: 230px;
    background: #272727;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    font-family: 'Albert Sans', sans-serif;
    border: 3px solid #242424 !important;
    color: #d0d0d0;
}
/* .payment-card-container-dark:hover {
    background: #212121;
    color: #fff;
    box-shadow: 0px 0px 0px 1px #333333;
    border: 3px solid #464646 !important;
} */









.payment-control-btn {
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
    color: #4c4c4c;
    border-radius: 6px;
    padding: 4px 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    display: inline-block;
    font-family: 'Albert Sans', sans-serif;
    margin: 5px 6px;
}

.payment-control-btn:hover {
    background: #fff;
    color: #000;
    box-shadow: 0px 0px 0px 1px #f0f0f0;
}

.payment-add-button {
    width: 100%;
    background: #4eaaff;
    color: #f3f3f3;
    font-weight: bold;
    position: relative;
    text-align: center;
    display: block;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
}

.payment-add-button:hover {
    background: #3492ea;
    color: #fff;
}






.sb-title {
    position: relative;
    top: -12px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
}

.sb-title-icon {
    position: relative;
    top: -5px;
}

.card-container {
    display: flex;
    width: 100%;
}

.panel {
    background: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.half-input-container {
    display: flex;
    justify-content: space-between;
}


/* 
  input {
    height: 30px;
  } */

input.pg {
    width: 100%;
    border: 0;
    border-bottom: 1px solid black;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: normal;
    border-radius: 0px;
}

input.pg:focus::placeholder {
    color: white;
}

.pg-field {
    width: 100%;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
    border-radius: 4px;
    border: 1.5px solid #262626;
    min-height: 35px;
    color: #000;
    font-size: 16px;
}
.pg-label{
    font-size: 12px;
    margin-bottom: 2px;
    margin-left: 7px;
    color: #000;
}

.pg-label-2{
    font-size: 10px;
    margin-top: 12px;
    margin-bottom: 0px;
    margin-left: 7px;
    color: #656565;
}

#payment-form, select{
    font-weight: bold;
}

.selected {
    border: 3px solid #424242 !important;
    color: #000;
}