Mejora alerta pagina externa

public/frontend/style.css

-@media all and (max-width: 500px) {
-  table,
-  thead,
-  tbody,
-  th,
-  td,
-  tr {
-    display: block;
-  }
-}
-
-th:nth-child(odd)
-{
-    background-color:black;
-    color: whitesmoke;
-}
-
-th:nth-child(even)
-{
-    background-color:black;
-    color: whitesmoke;
-}
-
-.alineacion {
-    text-align: center;
-}
-.alineacion p {
-    display: inline-block;
-}
-.alineacion p span {
-    display: block;
-    text-align: right
-}
-
-
-.modal-open {
-    overflow: hidden !important;
-    position:fixed !important;
-    width: 100% !important;
-    height: 100% !important;
-}
-
-.modalTitleCustom{
-    line-height: 1.42857143 !important;
-    float: left !important;
-    margin: 0px 30px 10px 10px !important;
-}
-.modalCloseCustom{
-    padding: 0 !important;
-    margin: 10px 10px 10px 10px !important;
-}
-
-.player{
-    align-content: center;
-    border: 2px solid whitesmoke;
-    background: aliceblue;  
-}
-
-.player_layout{
-    background-color: black;
-}
-
-.song{
-    font-size: x-large;
-    font-style: italic;
-    font-weight: 500;
-    color: whitesmoke;
-    padding: 10px 0 0 10px;
-}
-
-.album{
-    font-size: medium;
-    font-style: italic;
-    font-weight: 300;
-    color: whitesmoke;
-    padding: 5px 5px 5px 10px;
-}  
-
-
-.artist{
-    font-size: small;
-    font-style: italic;
-    font-weight: 300;
-    color: whitesmoke;
-    padding: 10px 10px 10px 10px;  
-}
-
-.playlist_pic{
-    float: right;
-}
-
-.playing {
-    background-color: #42c3f47d !important;
-}
-
-.currentSongTime{
-  color: whitesmoke;  
-}
-
-.maxSongTime{
-   color: whitesmoke; 
-}
-
-.slider-song-modal{
-    height: 50px;
-    width: 200px;
-}
-
-input[type="range"] {
-    width: 250px;
-    margin-top: -5px;
-}
-
-input{
-    display:none\9!important;
-}
-input[type="range"] {
-    -webkit-appearance: none;
-    border: 1px solid black;
-    position: absolute;
-    top: 18px;
-    display: block;
-    width: 63%;
-    height: 15px;
-
-    -webkit-border-radius: 20px;
-    -moz-border-radius: 20px;
-    border-radius: 20px;
-    background-color: #242323;
-    left: 90px;
-
-    -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
-    -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
-    box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
-}
-
-input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
-    border:1px solid black;
-
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-    background: #80e4df; /* Old browsers */
-    background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
-
-    background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
-    background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
-    background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
-}
-
-.artistListNamesContainer{
-   word-break : break-word; 
-   width: 200px;    
-}
-
-.no_list{
-   display: table;
-   margin: 0 auto;
-}
+@media all and (max-width: 500px) {
+  table,
+  thead,
+  tbody,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+}
+
+th:nth-child(odd)
+{
+    background-color:black;
+    color: whitesmoke;
+}
+
+th:nth-child(even)
+{
+    background-color:black;
+    color: whitesmoke;
+}
+
+.alineacion {
+    text-align: center;
+}
+.alineacion p {
+    display: inline-block;
+}
+.alineacion p span {
+    display: block;
+    text-align: right
+}
+
+
+.modal-open {
+    overflow: hidden !important;
+    position:fixed !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.modalTitleCustom{
+    line-height: 1.42857143 !important;
+    float: left !important;
+    margin: 0px 30px 10px 10px !important;
+}
+.modalCloseCustom{
+    padding: 0 !important;
+    margin: 10px 10px 10px 10px !important;
+}
+
+.player{
+    align-content: center;
+    border: 2px solid whitesmoke;
+    background: aliceblue;  
+}
+
+.player_layout{
+    background-color: black;
+}
+
+.song{
+    font-size: x-large;
+    font-style: italic;
+    font-weight: 500;
+    color: whitesmoke;
+    padding: 10px 0 0 10px;
+}
+
+.album{
+    font-size: medium;
+    font-style: italic;
+    font-weight: 300;
+    color: whitesmoke;
+    padding: 5px 5px 5px 10px;
+}  
+
+
+.artist{
+    font-size: small;
+    font-style: italic;
+    font-weight: 300;
+    color: whitesmoke;
+    padding: 10px 10px 10px 10px;  
+}
+
+.playlist_pic{
+    float: right;
+}
+
+.playing {
+    background-color: #42c3f47d !important;
+}
+
+.currentSongTime{
+  color: whitesmoke;  
+}
+
+.maxSongTime{
+   color: whitesmoke; 
+}
+
+.slider-song-modal{
+    height: 50px;
+    width: 200px;
+}
+
+input[type="range"] {
+    width: 250px;
+    margin-top: -5px;
+}
+
+input{
+    display:none\9!important;
+}
+input[type="range"] {
+    -webkit-appearance: none;
+    border: 1px solid black;
+    position: absolute;
+    top: 18px;
+    display: block;
+    width: 63%;
+    height: 15px;
+
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+    background-color: #242323;
+    left: 90px;
+
+    -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
+    -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
+    box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
+}
+
+input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border:1px solid black;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    background: #80e4df; /* Old browsers */
+    background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
+
+    background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
+    background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
+    background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
+}
+
+.artistListNamesContainer{
+   word-break : break-word; 
+   width: 200px;    
+}
+
+.no_list{
+   display: table;
+   margin: 0 auto;
+}
+
+/*alertas*/
+
+header.masthead-kushki {
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 0;
+    background: -webkit-gradient(linear, left bottom, left top, from(#ff6a00), to(#ee0979));
+    background: white;
+}
+
+/* Mensaje de alertas */
+.alert-ok {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-size: 1.1em;
+  border-radius:5px;
+  padding: 20px;
+  overflow:hidden;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  /* background-color:#8dc081; /* Verde */
+  color: red;
+  margin-bottom: 15px;
+}
+/* Botón cerrar */
+.closebtn-ok {
+  color: #333333;
+  font-weight: bold;
+  font-size: 32px;
+  line-height: 20px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.closebtn-ok:hover {
+  color: #777777;
+}
+
+.icon-one {
+  color:red;
+  font-weight: bold;
+  font-size: 22px;
+  line-height: 20px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.txt-alerta { color:#444444; }
+
+