.modal {
    color: #444;
    background: rgba(0, 0, 0, 0.3);
}

.modal .row {
    --bs-gutter-x: 0;
}

.modal-header {
    border-bottom-color: #f4f4f4;
    display: block;
}

.modal-footer {
    border-top-color: #f4f4f4;
}

.modal-primary .modal-header,
.modal-primary .modal-footer {
    border-color: #307095;
}

.modal-warning .modal-header,
.modal-warning .modal-footer {
    border-color: #c87f0a;
}

.modal-info .modal-header,
.modal-info .modal-footer {
    border-color: #0097bc;
}

.modal-success .modal-header,
.modal-success .modal-footer {
    border-color: #00733e;
}

.modal-danger .modal-header,
.modal-danger .modal-footer {
    border-color: #c23321;
}

.modal-primary .modal-body,
.modal-primary .modal-header,
.modal-primary .modal-footer,
.modal-warning .modal-body,
.modal-warning .modal-header,
.modal-warning .modal-footer,
.modal-info .modal-body,
.modal-info .modal-header,
.modal-info .modal-footer,
.modal-success .modal-body,
.modal-success .modal-header,
.modal-success .modal-footer,
.modal-danger .modal-body,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    color: #fff !important;
}

.modal-danger .modal-body {
    background-color: #dd4b39 !important;
}

.modal-warning .modal-body {
    background-color: #f39c12 !important;
}

.modal-info .modal-body {
    background-color: #00c0ef !important;
}

.modal-primary .modal-body {
    background-color: #3c8dbc !important;
}

.modal-success .modal-body {
    background-color: #00a65a !important;
}

.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}

.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}

.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}

.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}

.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}





/*.modal .btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
}*/

.modal .btn.uppercase {
    text-transform: uppercase;
}

.modal .btn.btn-flat {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-width: 1px;
}

.modal .btn:active {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.modal .btn:focus {
    outline: none;
}

.modal .btn.btn-file {
    position: relative;
    overflow: hidden;
}

.modal .btn.btn-file > input[type='file'] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    opacity: 0;
    filter: alpha(opacity=0);
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.modal .btn-default {
    background-color: #f4f4f4;
    color: #444;
    border-color: #ddd;
}

.modal .btn-default:hover,
.modal .btn-default:active,
.modal .btn-default.hover {
    background-color: #e7e7e7;
}

.modal .btn-primary {
    background-color: #3c8dbc;
    border-color: #367fa9;
}

.modal .btn-primary:hover,
.modal .btn-primary:active,
.modal .btn-primary.hover {
    background-color: #367fa9;
}

.modal .btn-success {
    background-color: #00a65a;
    border-color: #008d4c;
}

.modal .btn-success:hover,
.modal .btn-success:active,
.modal .btn-success.hover {
    background-color: #008d4c;
}

.modal .btn-info {
    background-color: #00c0ef;
    border-color: #00acd6;
}

.modal .btn-info:hover,
.modal .btn-info:active,
.modal .btn-info.hover {
    background-color: #00acd6;
}

.modal .btn-danger {
    background-color: #dd4b39;
    border-color: #d73925;
}

.modal .btn-danger:hover,
.modal .btn-danger:active,
.modal .btn-danger.hover {
    background-color: #d73925;
}

.modal .btn-warning {
    background-color: #f39c12;
    border-color: #e08e0b;
}

.modal .btn-warning:hover,
.modal .btn-warning:active,
.modal .btn-warning.hover {
    background-color: #e08e0b;
}

.modal .btn-outline {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.modal .btn-outline:hover,
.modal .btn-outline:focus,
.modal .btn-outline:active {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
}

.modal .btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.modal .btn[class*='bg-']:hover {
    -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

.modal .close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: 0.2;
}

.modal .close:hover,
.modal .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: 0.5;
}

.modal button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}