*{
    margin:0;
    padding:0;
}

table{
    width: auto !important;
}

#donation-confirmation-receipt,#donation-confirmation-header,#donation-confirmation-message{
    display:none;
}

.card-ui-component-save-btn.card-ui-component-btn-action{
    font-family:sans-serif !important;
    cursor:pointer;
}



/* .card-ui-component-save-btn.card-ui-component-btn-action:hover{

    background-color:whitesmoke !important;

    color:black;

} */



  
  #loader {
    width:100px;
    height:100px;
    border-radius:50%;
    border: 12px solid whitesmoke;
    border-top:12px #000080 solid;
    animation: spin 1s linear infinite;
    display:none;
  }
  
  @keyframes spin {
     from{
       transform:rotate(0deg);
     }
     
     to {
       transform:rotate(360deg);
     }
  }




#form-container{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    text-align:center;
}

.card-ui-component-inner-body{
    background-color:#0c4d98;
    padding:34px !important;
    box-sizing:border-box;
}



#table-receipt{
    display:none;
}

#personal-info-form{
    width:460px;
    transition:opacity 1.5s ease-in;
    opacity:1;
    background-color:#0c4d98;
    box-sizing:border-box;
    padding:34px;
}

.input-group{
    margin-bottom:15px;
}



.input-group.card-info input,.input-group.donation-frequency select,#total-amount,#email-field{
    margin: 0 auto;
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: white;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}









.input-group.donation-amount button{
    border:0;
    background-color:white;
    color:#0c4d98;
    cursor:pointer;
    border-radius:4px;
    padding:4px 5px;
    font-size:16px;
}



.input-group.donation-amount button:hover{
    background-color:whitesmoke;
    color:#000080;
}

input#cantidad-personalizada{
    grid-column:2 / 4;
    padding:5px;
}





input#total-amount{
    width:100%;
    margin:2vh 0;
    padding:5px 0;
    box-sizing:border-box;
}

.custom-amount-disabled{
    background-color:lightgray;
}





.input-group.submit-form{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 25px;
    gap: 17px;
}



#submit-btn{
    background-color:black;
    color:white;
    width: 100%;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor:pointer;
}


@media screen and (max-width:612px){
    .card-ui-component-inner-body{
        padding: 0 !important;
    }
    
    .card-ui-component-outer{
        width:auto !important;
    }
    
    #personal-info-form{
        width:auto !important;
    }
    #submit-btn{
        margin-left:2vw;
        width:auto !important;
    }
    
    .navigation-buttons{
        justify-content:space-evenly !important;
    }
}