/**
*  Folha de estilo do sistema de notificações.
*  Autor: Jorge Rodrigues - fev/2019
*  Versao: 1.0
*/

.nAlertOver {
   position: fixed;
   display: block;
   z-index: 10000;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background-color: rgba(221, 221, 221, 0.2);
}

.nAlertOver * {
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
}


.nAll {
   position: fixed;
   display: table;
   z-index: 100000;
   color: #000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   line-height: 20px;
   background-color: #f8f8f8;
}

.nAlert {
   width: auto;
   height: auto;
   max-width: 450px;
   min-width: 350px;
   min-height: 100px;
   padding: 10px;
   left: 50%;
   top: 50%;
   border: 1px solid #fd8725;
}
.nAlert .div1 {
   display: table;
   width: 100%;
   min-height: 100px;
}
.nAlert .myText {
   padding-left: 10px;
}

.nNotification {
   width: 420px;
   max-height: 500px;
   min-height: 100px;
   right: 10px;
   bottom: 10px;
   margin-top: 0 !important;
   border: 1px solid #fd8725;
}
.nNotification .myText {
   max-height: 400px;
}

.nAlert p,
.nNotification p {
   margin: 0 0 10px 0;
}

.myIco {
   display: table-cell; /*block;*/
   width: 20%;
   height: auto;
   vertical-align: top;
   background-image: url(exclamacao.jpg);
   background-repeat: no-repeat;
   background-position: 50% 0;
   background-size: 15px auto;
}

.myText {
   display: block;
   padding: 20px 0 15px 0;
   overflow-y: auto;
   min-height: 80px;
   max-height: 200px;
   vertical-align: top;
}

.myNav {
   /*position: absolute;*/
   display: table-cell;
   top: 5px;
   right: 5px;
   padding: 2px 3px;
   font-size: 19px;
   cursor: pointer;
   vertical-align: top;
   text-align: right;
}
.myNav span {
   display: inline-block;
   margin-top: 0;
   margin-right: 8px;
}

.childBtn {
   display: table;
   width: auto;
   height: auto;
   min-width: 80px;
   padding: 10px 15px;
   margin: 15px auto 0 auto;
   border: none;
   color: #fff;
   background-color: #fd8725;
   text-align: center;
   cursor: pointer;
}


@media screen and (max-width: 420px) {

   .nNotification {
      max-width: 320px;
      padding-left: 10px;
   }

}