.font-size-18{
    font-size: 18px!important;
}
.font-size-32{
    font-size: 32px!important;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--theme-color-primary);
}
.custom-radio .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--theme-color-primary);
}
.card-type {
    font-size: 12px;
    color: #909395;
}
.text-primary{
    color: var(--theme-color-primary) !important;
}
.btn-primary{
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
}
.bg-primary{
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-primary) !important;
    color: #fff;
}
.donate-monthly{
    background-color: rgb(0 123 255 / 59%) !important;
    border-color: rgb(0 123 255 / 59%) !important;
}
.container .txtbk P {
    color        : #5f5f5f;
    text-align   : center;
    font-size    : 1.5em;
    text-shadow  : none;
    padding-left : 10px;
    padding-right: 10px;
    line-height  : 1em
}
.container .content3 {
    text-align : center;
    margin     : 10px;
    line-height: 1;
}
.container .content4 {
    text-align : center;
    margin     : 10px;
    line-height: 1;
}
.container .content3 p {
    color      : var(--theme-color-primary);
    font-size  : 40px;
    line-height: .9em;
}
.container .content4 p {
    font-size  : 35px;
    line-height: .9em;
    margin-top: 30px;
}
.donat-amount {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

.txt-detail img {
    max-width: 100%;
    height: auto; 
}
@media (min-width:768px) {
     .container .content3 p {
        font-size: 35px;
        margin-top: 30px; 
    }
    /* .container .content3 .sum-donation {
        font-size: 35px;
        margin-top: 30px; 
    } */
    .container .content3 .txtbk {
        font-size: 16px
    }
}

@media only screen and (max-width: 600px) {
    #donate-campaign{ 
        padding-bottom: 0px;
        margin-bottom: 0px !important;
    }
    .container .content4 p {
        font-size: 20px;
        /* padding-top: 10px; */
        margin-top: 15px !important;
        margin-bottom: 0px !important;
    }
}
.txt-conten {
    margin-bottom: 50px !important;
}
.img-patien-banner {
    margin-bottom: 20px
}
.img-patien-banner img {
    height: auto;
    width: 100%
}

.card {
    z-index: 0;
    border: none;
    position: relative
}
#progressbar {
    padding-top: 20px;
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey
}
#progressbar .active {
    color: var(--theme-color-primary)
}
#progressbar li {
    list-style-type: none;
    font-size: 15px;
    width: 33.33%;
    float: left;
    position: relative;
    font-weight: 400
}
#progressbar #account:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f007"
}
#progressbar #personal:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f09d";
}
#progressbar #payment:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f058";
}
#progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px
}
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1
}
#progressbar li.active:before,
#progressbar li.active:after {
    background: var(--theme-color-primary)
}
ul#progressbar{
    margin-right: 40px;
}
.progress {
    height: 20px
}
.progress-bar {
    background-color: var(--theme-color-primary)
}
#view-address .form-group {
    margin-bottom: 0.25rem !important;
}
.border-primary {
    border-color: var(--theme-color-primary) !important;
}
.clipboard{
    background-color: #e8f5f2;
    border-radius: 3px;
    color: var(--theme-color-primary);
    font-size: 85%;
    margin: 0;
    padding: .2em;
    cursor: pointer;
}
.card-radio-input {
    display: none;
}
.card-radio-label {
    display: block;
}
.card-radio-input:checked+.card-radio {
    border-color: var(--theme-color-primary)!important;
}
.card-radio {
    cursor: pointer;
    background-color: #fff;
    border: 2px solid #f6f6f6;
    border-radius: .25rem;
    padding: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
}
.custom-file-input ~ .custom-file-label::after {
    content: "แนบไฟล์";
}
.head{
    color: var(--theme-color-primary);
}
.donate-menu .navbar{
    display: flex;
    flex-wrap: inherit;
    padding: 0 0 5px 0px !important;
    box-shadow: 0 0px 0px 0px #ccc;
}
.donate-menu .nav-link:focus span,
.donate-menu .nav-link:hover span{
    color: var(--theme-color-primary);
}
.donate-menu .nav-link.active{
    color: var(--theme-color-primary);
}
.donate-menu .nav-link.active span{
    border-bottom: 1px solid var(--theme-color-primary);
}
.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: var(--theme-color-primary);
}
.custom-control-input:disabled~.custom-control-label {
    color: #212529;
}