#modal-wrapper { /* z-index: 999; */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; min-height: 200px; background-color: #fff; border-radius: 32px; box-shadow: 0px 0px 1px rgba(15, 15, 15, 0.08), 0px 2px 8px rgba(15, 15, 15, 0.08), 0px 20px 32px rgba(102, 102, 102, 0.24); padding: 2em; } .modal-content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-content: space-between; color: #868686; } .modal-header { height: 70px; text-align: left; flex-grow: 0; align-content: center; align-items: center; } .modal-header h2 { color: #5b5b5b; } .modal-body { height: 100%; min-height: 70px; text-align: left; flex-grow: 4; align-items: stretch; } .modal-body p { color: #868686; } .modal-footer { height: 60px; display: flex; flex-direction: row; justify-content: space-evenly; align-content: flex-end; align-items: flex-end; flex-grow: 0; } .btn { width: 112px; min-height: 18px; height: 42px; padding: 12px; margin: 0px 8px; display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #fff; border-color: transparent; border-radius: 32px; font-size: 16px; line-height: 18px; box-sizing: border-box; cursor: pointer; } .primaryBtn { background: #00ACEC; border-radius: 100px; color: #fff; } .secondaryBtn { background: #FFFFFF; border: 2px solid #00ACEC; box-sizing: border-box; border-radius: 100px; } .btn:hover { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); }