/*------------------------------------------------------------------
Alert Message
-------------------------------------------------------------------*/
.wew-alert {
position: relative;
padding: 30px;
margin-bottom: 20px; }
.wew-alert .wew-alert-heading {
font-size: 14px;
text-transform: uppercase; }
/* Small style */
.wew-alert.wew-alert-small {
font-weight: 600;
line-height: 16px;
padding: 11px 20px;
text-align: left; }
.wew-alert-small {
border: 1px solid transparent; }
.wew-alert-small .wew-alert-content-wrap {
float: left;
margin-left: 35px; }
.wew-alert-small .wew-alert-content-wrap p:last-child {
margin: 0; }
.wew-alert-small .wew-alert-icon {
position: absolute;
top: 50%;
left: 20px;
width: 20px;
height: 1em;
font-size: 16px;
margin-top: -8px;
text-align: center; }
.wew-alert-small .wew-alert-close-btn {
position: absolute;
top: 50%;
right: 10px;
height: 1em;
width: 1em;
line-height: 1em;
margin-top: -7px;
cursor: pointer; }
.wew-alert-small.wew-alert-notice {
color: #b5b5b5;
background-color: #fbfcfc;
border-color: #e9e9e9; }
.wew-alert-small.wew-alert-error {
color: #e75744;
background-color: #ffdfdf;
border-color: #fdBdB5; }
.wew-alert-small.wew-alert-warning {
color: #de9606;
background-color: #fcf8e3;
border-color: #e7db9e; }
.wew-alert-small.wew-alert-success {
color: #3cb37d;
background-color: #dff0d8;
border-color: #bddeaf; }
.wew-alert-small.wew-alert-info {
color: #56afdc;
background-color: #d9edf7;
border-color: #a5e1ff; }
/* Big style */
.wew-alert.wew-alert-big {
padding: 32px 50px;
border-radius: 2px;
text-align: left; }
.wew-alert-big {
border: 1px solid transparent; }
.wew-alert-big .wew-alert-heading {
margin: 0 0 8px; }
.wew-alert-big .wew-alert-content-wrap {
float: left;
margin-left: 70px; }
.wew-alert-big .wew-alert-content-wrap p:last-child {
margin: 0; }
.wew-alert-big .wew-alert-icon {
position: absolute;
top: 50%;
left: 50px;
width: 30px;
height: 1em;
font-size: 30px;
line-height: 1;
margin-top: -15px;
text-align: center; }
.wew-alert-big .wew-alert-close-btn {
position: absolute;
top: 12px;
right: 13px;
font-size: 16px;
height: 1em;
width: 1em;
line-height: 1em;
cursor: pointer; }
.wew-alert-big.wew-alert-notice {
color: #b5b5b5;
background-color: #fbfcfc;
border-color: #e9e9e9; }
.wew-alert-big.wew-alert-notice .wew-alert-heading {
color: #b5b5b5; }
.wew-alert-big.wew-alert-error {
color: #e75744;
background-color: #ffdfdf;
border-color: #fdBdB5; }
.wew-alert-big.wew-alert-error .wew-alert-heading {
color: #e75744; }
.wew-alert-big.wew-alert-warning {
color: #de9606;
background-color: #fcf8e3;
border-color: #e7db9e; }
.wew-alert-big.wew-alert-warning .wew-alert-heading {
color: #de9606; }
.wew-alert-big.wew-alert-success {
color: #3cb37d;
background-color: #dff0d8;
border-color: #bddeaf; }
.wew-alert-big.wew-alert-success .wew-alert-heading {
color: #3cb37d; }
.wew-alert-big.wew-alert-info {
color: #56afdc;
background-color: #d9edf7;
border-color: #a5e1ff; }
.wew-alert-big.wew-alert-info .wew-alert-heading {
color: #56afdc; }
/* Minimal style */
.wew-alert.wew-alert-minimal {
padding: 36px 50px;
border-radius: 2px;
text-align: left; }
.wew-alert-minimal {
border: 1px solid #e9e9e9; }
.wew-alert-minimal .wew-alert-heading {
margin: 0 0 6px; }
.wew-alert-minimal .wew-alert-content-wrap {
float: left;
color: #b5b5b5;
line-height: 24px;
margin-left: 92px; }
.wew-alert-minimal .wew-alert-content-wrap p:last-child {
margin: 0; }
.wew-alert-minimal .wew-alert-icon {
position: absolute;
top: 50%;
left: 50px;
margin-top: -32px;
font-size: 24px;
border: 5px solid transparent;
width: 64px;
height: 64px;
line-height: 54px;
border-radius: 50%;
text-align: center; }
.wew-alert-minimal .wew-alert-close-btn {
position: absolute;
top: 13px;
right: 18px;
height: 1em;
width: 1em;
line-height: 1em;
cursor: pointer; }
.wew-alert-minimal.wew-alert-notice .wew-alert-icon {
color: #b5b5b5;
background-color: #fbfcfc;
border-color: #e9e9e9; }
.wew-alert-minimal.wew-alert-error .wew-alert-icon {
color: #d52e13;
background-color: #fd7761;
border-color: #f55c43; }
.wew-alert-minimal.wew-alert-warning .wew-alert-icon {
color: #a47503;
background-color: #ffc12d;
border-color: #f9b718; }
.wew-alert-minimal.wew-alert-success .wew-alert-icon {
color: #558502;
background-color: #97e411;
border-color: #7bc200; }
.wew-alert-minimal.wew-alert-info .wew-alert-icon {
color: #0787d4;
background-color: #6fd9fc;
border-color: #47b4f6; }
/* RTL */
body.rtl .wew-alert.wew-alert-small {
text-align: right; }
body.rtl .wew-alert.wew-alert-big {
text-align: right; }
body.rtl .wew-alert.wew-alert-minimal {
text-align: right; }
body.rtl .wew-alert-small .wew-alert-content-wrap {
float: right;
margin-right: 35px;
margin-left: 0; }
body.rtl .wew-alert-small .wew-alert-icon {
right: 20px;
left: auto; }
body.rtl .wew-alert-small .wew-alert-close-btn {
left: 10px;
right: auto; }
body.rtl .wew-alert-big .wew-alert-content-wrap {
float: right;
margin-right: 70px;
margin-left: 0; }
body.rtl .wew-alert-big .wew-alert-icon {
right: 50px;
left: auto; }
body.rtl .wew-alert-big .wew-alert-close-btn {
left: 13px;
right: auto; }
body.rtl .wew-alert-minimal .wew-alert-content-wrap {
float: right;
margin-right: 92px;
margin-left: 0; }
body.rtl .wew-alert-minimal .wew-alert-icon {
right: 50px;
left: auto; }
body.rtl .wew-alert-minimal .wew-alert-close-btn {
left: 18px;
right: auto; }
@media only screen and (max-width: 767px) {
body.rtl .wew-alert-big .wew-alert-content-wrap {
margin-right: 0; }
body.rtl .wew-alert-big .wew-alert-icon {
right: 50%;
left: auto;
margin-right: -50px;
margin-left: 0; }
body.rtl .wew-alert-minimal .wew-alert-content-wrap {
margin-right: 0; }
body.rtl .wew-alert-minimal .wew-alert-icon {
right: 50%;
left: auto;
margin-right: -32px;
margin-left: 0; } }
/*------------------------------------------------------------------
Responsive
-------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
.wew-alert-big .wew-alert-content-wrap {
margin-left: 0;
padding-top: 65px;
text-align: center; }
.wew-alert-big .wew-alert-icon {
top: 45px;
left: 50%;
width: 100px;
margin-top: 0;
margin-left: -50px; }
.wew-alert-minimal .wew-alert-content-wrap {
margin-left: 0;
padding-top: 85px;
text-align: center; }
.wew-alert-minimal .wew-alert-icon {
top: 40px;
left: 50%;
margin-top: 0;
margin-left: -32px; } }