.customAlert, .customConfirm{ z-index: 99; display: none; position: fixed; max-width: 25%; min-width: 250px !important; min-height: 20%; height: 150px; @include transform(translate(-50%, -50%)); left: 50%; top: 50%; padding: 10px; box-sizing: border-box; background: $w; border: 1px solid #000; @media all and (max-width: 1300px){ .message{ font-size: 14px !important; } input[type='button']{ height: 15% !important; } } .message{ padding: 5px; color: $text-news; font-size: 14px; line-height: 20px; text-align: justify; } .confirmButton{ position: absolute; top: 100%; left: 50%; width: 50%; height: 36px; margin-top: -45px; margin-left: -25%; outline: 0; border: 0; background: $red-selected; color: $w; &:hover{ transition: $speed; cursor: pointer; background: darken($red-selected, 5%); } } } .customConfirm { .container-btn { @include display-flex(); @include justify-content(space-around); @include align-items(center); padding-top: 20px; .agreeButton, .refuseButton { position: relative; top: inherit; width: 40%; height: 36px; outline: 0; border: 0; background: #e2001a; color: white; cursor: pointer; } } } @keyframes fadeOut{ from{ opacity: 1; } to{ opacity: 0; } } @keyframes fadeIn{ from{ opacity: 0; } to{ opacity: 1; } }