.oda-chat-button{
    background-image: url(branding/simbolo-portal-corporativo.png);
    background-repeat: no-repeat;
    background-size: cover;
    /* width: 70px !important;
    height: 70px !important; */
    background-color: #757493 !important;
    border-radius: 10px !important;
}

/* background-color: #1ba9df !important; */

/* .oda-chat-button{
    background-image: url(Branding/logoBlanco.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #757493 !important;
    border-radius: 10px !important;
    
} */


/* .oda-chat-button:before{
    content: "";
    position: absolute;
    right: 100%;
    top: 10px;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    border-color: transparent #757493 transparent transparent;
} */

/* .oda-chat-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  background-color: #0084ff;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
} */

/* .oda-chat-button:hover {
  background-color: #0072c6;
  cursor: pointer;
} */

/* .oda-chat-button::before {
  content: "\f086";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 24px;
  line-height: 60px;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .oda-chat-button {
    width: 50px;
    height: 50px;
    bottom: 20px;
    right: 20px;
  }
  
  .oda-chat-button::before {
    font-size: 20px;
    line-height: 50px;
  }
} */

/* 
.chat-bubble {
  background-color: #DCF8C6;
  border-radius: 25px;
  padding: 10px 20px;
  display: inline-block;
  max-width: 250px;
  position: relative;
  margin: 10px 0;
}

.chat-bubble:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 10px;
  border-style: solid;
  border-width: 10px 20px 10px 0;
  border-color: transparent #DCF8C6 transparent transparent;
} */

.oda-chat-button:hover{
    background-image: url(animated/png/DITO.png);
    cursor: pointer;
}

.social-media-icon {
    background-image: url(animated/png/social-media.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.social-media-icon-bot {
    background-image: url(animated/png/social-media.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.inteligenciadenegocios-icon {
    background-image: url(portal/powerBi.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.office-icon {
    background-image: url(portal/office365.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.sistemasdeinformacion-icon {
    background-image: url(portal/sistemas.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.arquitecturadesoftware-icon {
    background-image: url(portal/arquitecturadesoftware.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

/*On Hover*/

.card-template-app-shadown-init .social-media-icon:hover {
    background-image: url(animated/gif/social-media.gif);
    background-repeat: no-repeat ;
    background-size: cover ;
    background-position: 50% ;
    background-color: #FFFFFF ;
}

.a-CardView-header .a-CardView-iconWrap .inteligenciadenegocios-icon:hover {
    background-image: url(animated/gif/bar-chart.gif) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% !important;
    background-color: #FFFFFF !important;
}

.ofimatica-icon:hover {
    background-image: url(animated/gif/teacher-desk.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.sistemasdeinformacion-icon :hover {
    background-image: url(animated/gif/diagram.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}

.arquitecturadesoftware-icon:hover {
    background-image: url(animated/gif/connection.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #FFFFFF;
}