.modal-header {
    align-items: center;
    .dismiss {
        font-size: 0.8em;
        color: $gray-500;
        animation: color 0.15s;
        &:hover{
            color: $gray-800;
        }
    }
}

.modal-slidein.fade {
    &.show {
        .modal-dialog{
            transform: translate3d(0,0,0) !important;
        }
    }
    .modal-dialog {
        position: absolute;
        margin: 0;
        width: 100%;
        height: 100%;
        .modal-content-wrapper,
        .modal-content {
            height: 100%;
        }
        .modal-content {
            border-radius: 0;
        }
    }
    &.from-right {
        .modal-dialog {
            right: 0;
            transform: translate3d(100%,0,0);
        }
    }
    &.from-left {
        .modal-dialog {
            left: 0;
            transform: translate3d(-100%,0,0);
        }
    }
    &.from-bottom {
        .modal-dialog {
            bottom: 0;
            transform: translate3d(0,100%,0);
            width: 100%;
            max-width: none;
            height: auto;
            .modal-content-wrapper,
            .modal-content {
                height: auto;
            }
        }
    }
    
    &.from-top {
        .modal-dialog {
            top: 0;
            transform: translate3d(0,-100%,0);
            width: 100%;
            max-width: none;
            height: auto;
            .modal-content-wrapper,
            .modal-content {
                height: auto;
            }
        }
    }
}