.flash-box { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid #505460;  border-radius: 5px;  background-color: #f9fbfd; box-shadow: 0 0 1px 1px #fff; max-width: 640px; }

.free-stat-flash-box {  width: fit-content; min-width: 480px; position: relative; z-index: 100; top: 40px; margin: 0 auto; }
.pin-stat-flash-box { margin: var(--box-margin) 0;}
.dynamic-flash-box { width: fit-content; min-width: 320px; position: absolute; z-index: 100; }

.flash-box-wrapper {height: 0;}

.flash-container { display: flex; flex-direction: column; gap: 12px; flex-grow: 4; }

.flash-box-arrow { display: block; background-repeat: no-repeat; background-position: left top ; position:absolute; }
.flash-box-down-arrow { width: 39px; height: 20px; background-image: url("images/flash-box-down-arrow.png"); bottom: -20px; left: 30px;}
.flash-box-left-arrow { width: 20px; height: 39px; background-image: url("images/flash-box-left-arrow.png");  bottom: 30px; left: -20px;}
.flash-box-right-arrow { width: 20px; height: 39px; background-image: url("images/flash-box-right-arrow.png");  bottom: 30px; right: -20px;}
.flash-box-up-arrow { width: 39px; height: 20px; background-image: url("images/flash-box-up-arrow.png");  top: -20px; left: 30px;}
.pin-stat-flash-box .flash-box-arrow { display: none;}

.start-transition {transition-property: top, bottom, left, right, opacity; transition-duration: 0.4s; transition-timing-function: ease;}
.end-transition {transition: opacity 0.22s ease;}

.alert { min-width: 260px; padding: 7px 22px 6px 55px; margin: 0; border: 1px solid #333; border-radius: 3px; font-size: 17px;  background-position: 12px 7px;  background-repeat: no-repeat; }
.alert-success {background-color: #e6fae5; border-color: #54d70e;  background-image: url("images/icons/success-medium.png"); }
.alert-error { background-color: #fae4e4; border-color: #F00; color:#F00;  background-image: url("images/icons/warning-medium.png");}
.alert-info, .alert-empty { background-color: #faf2e5; border-color: #d2bb96; color: #4F4B47;  background-image: url("images/icons/info-medium.png");}

.dialog-box { flex-direction: column; gap: 0; margin: var(--box-margin) 0;}
.dialog-box .button-bar {  justify-content: center;}
.dialog-message { text-align: center; padding-right: 45px;}

body .none { display: none;} /* override another display */
body .hidden { visibility: hidden; }
body .absolute-hidden { position:absolute; visibility: hidden; }