#floating-hotline {
     width: 60px;
     position: fixed;
     bottom: 20px;
     right: 10px;
     cursor: pointer;
     z-index: 999;
     border: none;
}

#floating-hotline a {
     display: block;
     width: 60px;
     height: 60px;
     padding: 15px;
     border-radius: 35px;
     box-shadow: 3px 8px 19px 0px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow: 3px 8px 19px 0px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 3px 8px 19px 0px rgba(0, 0, 0, 0.5);
     margin-top: 10px;
}

#floating-hotline a img {
     width: 40px;
}

#floating-hotline a:hover img {
     opacity: 0.5;
}

#floating-hotline a:nth-child(1n+0) {
     background: #25D366;
}
#floating-hotline a:nth-child(2n+0) {
     background: #e22f03;
}
#floating-hotline a:nth-child(3n+0) {
     background: #116297;
}


.hotline-atas a {
     color: white;
     font-size: 16px;
}
.hotline-atas a:hover {
     color: #f60;
}
.hotline-atas img {
     height: 30px;
}


.hotline-bawah li{
     border-bottom:1px solid #707277;
     display: grid;
     grid-template-columns: 1fr 3fr;
     padding-bottom: 15px;
     margin-bottom: 15px;
}

.hotline-bawah strong {
     justify-content: flex-start;
     align-content: center;
     display: grid;
     font-size: 13px;
}

.hotline-bawah span {
     justify-content: flex-end;
     align-content:flex-end;
     display: grid;
}



.hotline-bawah a  {
     color: white;
     font-size: 13px;
     display: inline-block;
     text-align: right;
}
.hotline-bawah a:hover  {
     background: black;
     color: #f60;

}
.hotline-bawah img {
     height: 20px;
     margin-right: 5px;
}



@media (max-width: 740px){
     #hotline-atas-container {
          justify-content: center;
          align-items: center;
     }
     .hotline-atas li {
          display: grid;
          grid-template-columns: max-content 1fr;
          padding-bottom: 10px;
          margin-bottom: 10px;
          border-bottom: 1px solid #c7c7c7;
     }
     .hotline-atas strong {
         align-items: center;
         display: inline;
     }
     .hotline-atas a {
          justify-content: center;
          align-content: center;
          display: grid;
     }
     .hotline-atas span {
          justify-content: flex-end;
          align-content:flex-end;
          display: grid;
     }
}
@media (min-width: 741px){
     
     .hotline-atas li {
          float: left;
          margin-left: 10px;
     }
}
@media (min-width: 992px){

}
