/*
 * @name Style panel de alertas
 * @version 1.0.0 (2021-08-03)
 * @author Frank Blanco (2021-08-03)
 * @copyright Intervia IT
 * @license http://webvivo.com/license
 * 
*/

.noti{
    color: #555555 !important;padding-top: 5px;padding-left: 10px;padding-right: 15px;margin-bottom: 10px;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}
.noti-msg{
    color: #555555 !important;padding-top: 5px;padding-left: 15px;padding-right: 15px;margin-top: 15px;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}
.noti-icon{color:#fff !important; padding-left: 10px; padding-right: 10px; padding-top: 5px;padding-bottom: 3px;
           font-size: 1.7em;
           border-radius: 50px 50px 50px 50px;
           -moz-border-radius: 50px 50px 50px 50px;
           -webkit-border-radius: 50px 50px 50px 50px;
           position: absolute;margin-left:-25px;margin-top:-10px;
}
.noti-icon-msg{color:#292929 !important; font-size: 1.7em;position: absolute;}
.noti-heading-msg{ font-size: 1.3em; position: relative; top: 15px; left: 85px; }
.noti-date-msg{font-size: 12px; position: relative;top: 7px;left: 85px; font-weight: normal;color:#858585;}
.noti-body-msg{position: relative;top: 15px;left: 85px;width: 90%; margin-bottom: 30px;font-weight: normal;}
.noti-footer-msg{position: relative;bottom: 10px;left: 85px;width: 90%; font-weight: normal;}
.noti-count-msg{text-decoration: none;margin-bottom:10px;font-weight: bold;}
.noti-btn-reply{position: absolute; text-decoration: none;color:#e20030;margin-left: 10px;margin-top:2px;}
.noti-btn-reply:hover{text-decoration: none;color:#e20030; transition: 0.3s;opacity: 0.8;}
.noti-reply{width: 96%;margin-top:-16px;position: relative;right: -4%;}

.bg-noti-1{ background-color: #fff; border: 1px solid #ebc71d; font-weight: bold; }
.bg-noti-2{ background-color: #fff; border: 1px solid #3398dc; font-weight: bold; }
.bg-noti-3{ background-color: #fff; border: 1px solid #ff0000; font-weight: bold; }
.bg-noti-4{ background-color: #fff; border: 1px solid #72c02c; font-weight: bold; }
.bg-noti-msg{ background-color: #fff; border: 1px solid #c3c3c3; font-weight: bold; }
.bg-noti-reply{ background-color: #fff; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-color: #c3c3c3; font-weight: bold; }
.bg-icon-1{ background: #ebc71d; }
.bg-icon-2{ background: #3398dc; }
.bg-icon-3{ background: #ff0000; }
.bg-icon-4{ background: #72c02c; }

.noti-heading{ font-size: 1.3em; position: relative; top: 5px; left: 50px; }
.noti-date{font-size: 12px; position: absolute; top: 15px; right: 25px; font-weight: normal;}
.noti-body{position: relative;top: 5px;left: 50px;width: 90%; margin-bottom: 10px;}
.noti-footer{margin-top: -5px;margin-bottom: 10px;text-align:right;}
.noti-link{text-decoration: none;color:#3d3d3d;font-size: 1.2em;}
.noti-link:hover{ color:#e20030; }
.noti-link-text{text-decoration: none;}
.noti-link-text:hover{text-decoration: none;color:#e20030; transition: 0.3s;}

.noti-panel-heading{padding-left: 15px;padding-right: 15px;margin-top: 15px; margin-bottom: 10px; color: #3E3E3E;
                    position: relative;width: 100%;top:0px;
}
.noti-btn-panel {position: absolute;right: 25px;top:0px;}
.noti-title{width: 50%;font-size: 1.7em;}
.noti-panel-body{width: 100%; padding: 15px; border:0px solid #c3c3c3;}
.btn-noti{text-decoration: none; border:2px solid #292929;
          font-size: 1.1em; color:#292929;
          background-color: #f2f2f2 !important;
          border-radius: 20px 20px 20px 20px;
          -moz-border-radius: 20px 20px 20px 20px;
          -webkit-border-radius: 20px 20px 20px 20px;
          padding-top:7px; padding-bottom: 7px; padding-right: 25px; padding-left: 20px;
          margin-right: 2px;margin-left: 2px;
          transition: 0.3s;
}
.btn-noti:hover{background-color:#292929 !important;color:white;}
.noti-panel-msg{border:1px solid #c3c3c3 !important; padding-left: 20px; padding-right: 20px;margin-top: 15px;
                border-radius: 5px 5px 5px 5px;
                -moz-border-radius: 5px 5px 5px 5px;
                -webkit-border-radius: 5px 5px 5px 5px;
}


@media (max-width: 768px) {
  .noti-title{width: 100%;}
  .noti-btn-panel {right: 5px;}
  .btn-noti{ padding-right: 15px; padding-left: 10px; }
  .noti-icon{ margin-left:-20px; }
}