/*inclusión de fuentes*/
@font-face {
       font-family: 'Bootstrap Icons';
       src: url('../libs/bootstrap-icons-1.10.4/fonts/bootstrap-icons.woff') format('woff');
       src: url('../libs/bootstrap-icons-1.10.4/fonts/bootstrap-icons.woff2') format('woff2');
       font-weight: normal;
       font-style: normal;
}

.message_info, .message_ok, .message_alert, .message_error, .message_main {
       font-size: 13px;
       border: 0;
       border-radius: 5px 5px 5px 5px;
       margin-left: -15px;
       margin-right: -15px;
       padding: 0px 20px 5px 35px;
       background-repeat: no-repeat;
       background-position: 18px center;
       margin-bottom: 5px;/*esto hace que no se vea el espacio en blanco al inal del mensaje*/
       box-shadow: 0px 8px 0px 2px #aaa;
       min-height: 65px;
}

.message_info > ul, .message_ok > ul, .message_alert  > ul, .message_error  > ul, .message_main > ul{
       list-style: none;
}

.message_close {
       position: relative;
       left: calc(100% - 20px);
       top: 5px;
       text-decoration: none;
       cursor: pointer;
       color: inherit;
       font-weight: 600;
       padding-bottom: 4px;
}

.message_info {
       color: #fff;
       background-color: #0072EF;
}
.message_info:before{
       font-family: "Bootstrap Icons";
       content: '\F430';
       font-size: 40px;
       margin-left: -20px;
       float: left;
       letter-spacing: 5px;/*espacio entre flecha y texto*/
       margin-top: 4px;
}

.message_ok {
       color: #fff;
       background-color: #28a745;
}
.message_ok:before{
       font-family: "Bootstrap Icons";
       content: '\F26A';
       font-size: 40px;
       margin-left: -20px;
       float: left;
       letter-spacing: 5px;/*espacio entre flecha y texto*/
       margin-top: 4px;
}


.message_alert {
       color: #555;
       background-color: #f7c222;
}
.message_alert:before{
       font-family: "Bootstrap Icons";
       content: '\F33A';
       font-size: 40px;
       margin-left: -20px;
       float: left;
       letter-spacing: 5px;/*espacio entre flecha y texto*/
       margin-top: 4px;
}

.message_error {
       color: #fff;
       background-color: #dc3545;
}
.message_error:before{
       font-family: "Bootstrap Icons";
       content: '\F626';
       font-size: 40px;
       margin-left: -20px;
       float: left;
       letter-spacing: 5px;/*espacio entre flecha y texto*/
       margin-top: 4px;
}

.message_main {
       color: #C24B12;
       background-color: #F7C1A8;
}
.message_main:before{
       font-family: "Bootstrap Icons";
       content: '\F336';
       font-size: 40px;
       margin-left: -20px;
       float: left;
       letter-spacing: 5px;/*espacio entre flecha y texto*/
       margin-top: 4px;
}