.HsnModal {
    z-index: 1038;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.HsnModal.notactive{ display: none;}

.HsnModal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 600px;
}


.HsnModal-display-topright {
    position: absolute;
    right: 0;
    top: 0;
}
.HsnModal-topCloseBtn{ border-radius: 0;}
.HsnModal-topCloseBtn:hover {
    color: #000!important;
    background-color: #ccc!important;

    color: #fff!important;
    background-color: #f44336!important;
}


.HsnModal header{
    color: #fff!important;
    background-color: #2196F3!important;
    background-color: #5a85c0!important;
    background-color: #5d6c80!important;
    padding: 0.01em 16px;
    background-color: #fff!important;
    color: #5a85c0!important;
    border-bottom: #d9d9d9 solid 2px;
    text-transform: capitalize;
}

.HsnModal header {

    background-color: #FAFAFA!important;
    color: #212529!important;
    border-bottom-color: #EEEEEE;
    height: 50px;
    padding-top: 10px;
}

.HsnModal header h1{ font-size: 1.5rem;}

.HsnModal.HsnModal.model-style-pop  header {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.HsnModal .HsnModal-footer{
    color: #000!important;
    background-color: #f1f1f1!important;
    background-color: #fff!important;
    padding: 8px 16px!important;
}
.HsnModal .HsnModal-body .container{
    padding: 8px 16px!important;
}

.hsn-word-wrap{ word-wrap: break-word; }

.HsnModal-footer .btn{ max-width: 48%;}




@media (max-width: 768px){
    .HsnModal {
        padding-top: 50px;
    }
    .HsnModal-content {
        width: 500px;
    }
}

.HsnModal-content {
    top: 0;
    right: 0;
    position: absolute;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
    min-height: 100%;
}




@keyframes slide-in {
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    100% {
        -webkit-transform: translateX(0%);
    }
}

.HsnModal-content .HsnModal-footer{    margin-top: 50px;}

.HsnModal-footer .btn:not(:last-child) {margin-right: 10px;}

.HsnModal.notactive {
    display: block;
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}
.HsnModal-footer .btn.btn-HsnModal-processing{
    color: #c7cad0;
    background-color: #d7d9dd;
    border-color: #bcbdbf;
}
.HsnModal.model-style-pop .HsnModal-content{
    right: auto;
    position: relative;
    min-height: 160px;
    border-radius: 5px;

}
@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}

@media only screen and (max-width: 600px) {
    .HsnModal-content{
        width: 100%;
    }
  }


  .left.modal .modal-dialog,
	.right.modal .modal-dialog {
		position: fixed;
		margin: auto;
        min-width: 500px;
		/* width: 320px; */
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}
    .right.modal .modal-dialog {right: 0;}

	.left.modal .modal-content,
	.right.modal .modal-content {
		height: 100%;
		overflow-y: auto;
	}
	
	.modal.left .modal-body,
	.right.modal .modal-body {
		padding: 15px 15px 80px;
	}

/*Left*/
	.left.modal.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}
	
	.left.modal.fade.in .modal-dialog{
		left: 0;
	}
        
/*Right*/
	.right.modal.fade .modal-dialog {
		right: -500px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}
	
	.right.modal.fade.in .modal-dialog {
		right: 0;
	}

/* ----- MODAL STYLE ----- */
.left.modal .modal-content,
.right.modal .modal-content {
		border-radius: 0;
		border: none;
	}

    .left.modal .modal-header ,
	.right.modal .modal-header {
		border-bottom-color: #EEEEEE;
		background-color: #FAFAFA;
	}