.flag {
display: table;
width: 100%;
}
.flag__image,
.flag__body {
display: table-cell;
vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body {
vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body {
vertical-align: bottom;
}
.flag__image {
padding-right: 24px;
}
.flag__image > img {
display: block;
max-width: none;
}
.flag--rev .flag__image {
padding-right: 0;
padding-left: 24px;
}
.flag__body {
width: 100%;
} .note {
position: relative;
overflow: hidden;
color: white;
background-color: #0693e3 !important;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
margin-bottom:20px;
}
.note--secondary {
background-color: #263238;
}
.note--success {
background-color: #4CAF50;
}
.note--warning {
background-color: #FFC107;
}
.note--error {
position: relative;
overflow: hidden;
color: white;
background-color: #d8293a;    
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
margin-bottom:20px;
}
.note--info {
background-color: #03A9F4;
}
.note__icon,
.note__text {
padding: 24px;
}
.note__icon {
min-width: 80px;
text-align: center;
font-size: 32px;
font-size: 2rem;
background-color: rgba(0, 0, 0, 0.25);
}
.note__text {
padding-right: 48px;
}
.note__close {
position: absolute;
top: 12px;
right: 12px;
width: 29px;
line-height: 30px;
font-size: 24px;
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.25);
opacity: 0;
transition: all 0.25s;
}
.note__close:hover {
background-color: rgba(0, 0, 0, 0.15);
}
.note:hover .note__close {
opacity: 1;
}