#myModal {
    position: 30px;
    overflow-y: hidden;
    z-index: 1400;
}

#myModal2 {
    width: 350px;
    left: calc(100% - 350px);
    overflow-y: hidden;
    z-index: 1400;
}

#myModal3 {
    width: 100%;
    left: 0px;
    overflow-y: hidden;
    z-index: 1400;
}

.modal-dialog{
   position: absolute;
   width: calc(100% - 475px);
   left: calc(50% - 175px);
   /* now you must set a margin left under zero - value is a half width your window */
   margin-left: calc(-50% + 475px/2);
} 

.modal-dialog2{
   position: absolute;
   width: calc(350px);
   left: calc(100% - 350px);
   margin-top: 30px;
   margin-bottom: 30px;
   /* now you must set a margin left under zero - value is a half width your window */
   /*margin-left: calc(-50% + 475px/2);*/
} 

.modal-dialog3{
   position: absolute;
   width: calc(350px);
   left: 0px;
   margin-top: calc(30px);
   margin-bottom: 30px;
   /* now you must set a margin left under zero - value is a half width your window */
   /*margin-left: calc(-50% + 475px/2);*/
} 

.active3{
   position: absolute;
   width: calc(100% + 350px);
   left: calc(50%);
   /* now you must set a margin left under zero - value is a half width your window */
   margin-left: calc(-50%) !important;
}

/*hidden scrollbar Chrome...*/
.hide-scrollbar::-webkit-scrollbar{
    display : none;
}
/*hidden scrollbar Edge......*/
.hide-scrollbar{
    -ms-overflow-style: none;
}

.alert-hades {
    color: #0A6289;
    background-color: #e5edf1;
    border-color: #0A6289;
}