.modal[data-modal-color] {
    color: #fff;
}

.modal[data-modal-color] .modal-header {
    padding: 23px 26px;
    border-bottom: 1px solid transparent;
}

.modal[data-modal-color] .modal-content {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.31);
    border-radius: 0.3rem;
    border: 0;
}

.modal[data-modal-color] .modal-content.no-rounded {
    border-radius: 0 !important;
}

.modal[data-modal-color] .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid transparent;
}

.modal[data-modal-color] .modal-footer {
    background: rgba(0, 0, 0, 0.1);
}

.modal[data-modal-color] .modal-footer .btn-link {
    font-weight: 400;
}

.modal[data-modal-color] .modal-title, .modal[data-modal-color] .modal-footer .btn-link {
    color: #fff;
}

.modal[data-modal-color] .modal-backdrop {
    background: #fff;
}

.modal[data-modal-color] .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.modal[data-modal-color] .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
}

.modal[data-modal-color] .modal-footer .btn-link {
    font-size: 14px;
    color: #000;
    font-weight: 500;
}

.modal[data-modal-color] .btn-link {
    color: #797979;
    text-decoration: none;
    border-radius: 2px;
}

.modal[data-modal-color] .modal-footer .btn-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.modal[data-modal-color] .modal-footer .btn-link {
    font-weight: 400;
}

/* ========== MODAL COLORS ===============================*/
.modal[data-modal-color="blue"] .modal-content {
    background: #2196f3;
}

.modal[data-modal-color="lightblue"] .modal-content {
    background: #03a9f4;
}

.modal[data-modal-color="cyan"] .modal-content {
    background: #00bcd4;
}

.modal[data-modal-color="green"] .modal-content {
    background: #4caf50;
}

.modal[data-modal-color="lightgreen"] .modal-content {
    background: #8bc34a;
}

.modal[data-modal-color="red"] .modal-content {
    background: #f44336;
}

.modal[data-modal-color="amber"] .modal-content {
    background: #ffc107;
}

.modal[data-modal-color="orange"] .modal-content {
    background: #ff9800;
}

.modal[data-modal-color="teal"] .modal-content {
    background: #009688;
}

.modal[data-modal-color="bluegray"] .modal-content {
    background: #607d8b;
}

.modal[data-modal-color="dark"] .modal-content {
    background: #343a40;
}