.mfp-appointment-card-container {
    height: 312px;
    width: 500px;
    display: block !important;
    background-image: url('/images/appointment-card-v4.png');
    background-size: cover;
    border: none !important;
}

.mfp-appointment-card-container .bm-content {
    height: 100%;
}

.mfp-appointment-card-container-outer {
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
    border: none;
}

.mfp-appointment-card-container-middle {
    height: 100%;
    padding: 6px;
    border: none !important;
    background-color: whitesmoke;
}

.mfp-appointment-card-container-inner {
    box-sizing: border-box;
    height: 100%;
    padding: 5px;
    border: none;
    background-image: url('/images/appointment-card-v4.png');
    transform: rotate(180deg);
    background-size: cover;
}

.mfp-appointment-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: none;
    background-color: whitesmoke;
    transform: rotate(180deg);
}

/*Titles*/
.mfp-appointment-card-title {
    border-bottom: 1px solid darkgrey;
}

.mfp-appointment-card-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mfp-appointment-card-subtitle h4 {
    position: relative;
    padding: 0px 10px;
    bottom: 10px;
    background-color: whitesmoke;
    font-family: Arial !important;
}

/*Details*/
.mfp-appointment-card-details {
    flex: 1;
    overflow: auto;
}

.mfp-appointment-card-details .rz-textbox,
.mfp-appointment-card-details .rz-textbox input {
    height: 20px;
    padding: 0px;
}

.mfp-appointment-card-details .rz-textbox input:focus {
    outline: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.mfp-appointment-card-details input.rz-textbox,
.mfp-appointment-card-details .rz-calendar {
    position: relative;
    top: 2px;
}

.mfp-appointment-card-details .rz-textbox input {
    padding: 0 !important;
    margin: 0 !important;
}

.mfp-appointment-card-input-cell {
    display: flex;
    border-bottom: 1px solid grey;
}

.mfp-appointment-card-details .rz-dropdown {
    width: 100%;
    height: 20px;
    padding: 0px;
    top: 1px;
}

.mfp-appointment-card-details .rz-dropdown,
.mfp-appointment-card-details .rz-textbox,
.mfp-appointment-card-details .rz-textbox input,
.mfp-appointment-card-details .rz-calendar,
.mfp-appointment-card-details .rz-calendar .rz-inputtext,
.mfp-appointment-card-details .rz-calendar input,
.mfp-appointment-card-details .rz-calendar input:focus,
.mfp-appointment-card-details .rz-calendar .rz-button,
.mfp-appointment-card-details .rz-calendar .rz-button:hover,
.mfp-appointment-card-details .rz-calendar .rz-button:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
}

.mfp-appointment-card-input-cell > div > .rz-calendar input,
.mfp-appointment-card-input-cell > div > .rz-calendar input.rz-inputtext {
    padding: 0 !important;
    margin: 0 !important;
    height: 20px !important;
}

/*Actions*/
.mfp-appointment-card-actions {
    display: flex;
    justify-content: space-between;
}

.mfp-appointment-card-action-container {
    display: flex;
    align-items: flex-end;
    width: 132px;
}

.mfp-appointment-card-checkbox {
    position: relative;
    margin-left: 0.25rem;
    top: 2px;
    cursor: pointer;
}

.mfp-appointment-card-confirm {
    position: relative;
    top: 5px;
    right: 11px;
    font-size: 20px;
}

.mfp-appointment-card-cancel {
    position: relative;
    top: 4px;
    right: 15px;
    font-size: 16px;
}