.modal {

    .modal-content {
        border-radius: 0;
    }

    .modal-header {
        background-color: #eceff1;
        color: #4f5f6f;
    }

    .modal-footer {
        background-color: inherit;
        color: inherit;
        .btn {
            margin-bottom: 0;
        }
    }

    .modal-header-primary {
        background-color: $color-primary;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-success {
        background-color: $color-success;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-info {
        background-color: $color-info;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-warning {
        background-color: $color-warning;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-danger {
        background-color: $color-danger;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-inverse {
        background-color: $color-inverse;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-header-secondary {
        background-color: $color-secondary;
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }


    .modal-full-primary {
        background-color: lighten($color-primary,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-full-success {
        background-color: lighten($color-success,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-full-info {
        background-color: lighten($color-info,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-full-warning {
        background-color: lighten($color-warning,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-full-danger {
        background-color: lighten($color-danger,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

    .modal-full-inverse {
        background-color: lighten($color-inverse,5%);
        color: $color-text-inverse;
    }

    .modal-full-secondary {
        background-color: lighten($color-secondary,5%);
        color: $color-text-inverse;
        .close {
            color: $color-text-inverse;
        }
    }

	.modal-body-center {
        align-items: center;
        justify-content: center;
        display: inline-flex;
		flex-direction: column
    }

	.modal-body-center-inline {
        align-items: center;
        justify-content: center;
        display: inline-flex;
    }

    
}

#modal-media {
	.modal-body {
		min-height: 250px;

	}
	
	.modal-tab-content {
        min-height: 300px;    
    }

	.images-container {
		padding: 15px;
		text-align: center;

		.image-container {
			margin: 0 auto 10px auto;
			cursor: pointer;
			transition: all 0.3s ease;
			display: inline-block;
			float: none;

			&:hover {
				border-color: fade-out($color-primary, 0.5);
			}

			&.active {
				border-color: fade-out($color-primary, 0.5);	
			}
		}
	}

	.upload-container {
		padding: 15px;	

		.dropzone {
			position: relative;
			border: 2px dashed $color-primary;
			height: 270px;

			.dz-message-block {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);

				.dz-message {
					margin: 0;
					font-size: 24px;
					color: $color-primary;
					width: 230px;
				}
			}
		}
	}

}

.modal-body.modal-tab-container {
    padding: 0;

    .modal-tabs {
        padding-left: 0;
        margin-bottom: 0;
        list-style:none;
        background-color: #ffffff;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);

        .nav-link {
            padding: 10px 20px;
            border: none;

            &:hover,
            &.active {
                color: $color-primary;
                border-bottom: 2px solid  $color-primary;
            }

            &.active {
                font-weight: 600;
            }
        }
    }
}


.modal-extra-small {
    max-width: 200px;
}

.modal-small {
    max-width: 400px;
}

.modal-medium {
    max-width: 600px;
}

.modal-large {
    max-width: 900px;
}

.modal-full {
    max-width: 98%;
}


.fade-scale {
  transform: scale(0);
  opacity: 0;
  -webkit-transition: all .25s linear;
  -o-transition: all .25s linear;
  transition: all .25s linear;
}

.fade-scale.in {
  opacity: 1;
  transform: scale(1);
}