@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?dfd8hn');
  src:  url('fonts/icomoon.eot?dfd8hn#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?dfd8hn') format('truetype'),
    url('fonts/icomoon.woff?dfd8hn') format('woff'),
    url('fonts/icomoon.svg?dfd8hn#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'MSG' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  font-size: 25px;
  font-weight: 500;
  color: #505050;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Adjust icon sizes for different screen sizes */
@media screen and (max-width: 1537px) {
  [class^="icon-"], [class*=" icon-"] {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  [class^="icon-"], [class*=" icon-"] {
    font-size: 15px;
  }
}

/* Specific sizes for circle icons */
[class^="icon-"].circle, [class*=" icon-"].circle {
  width: 35px;
  height: 35px;
}

@media screen and (max-width: 1537px) {
  [class^="icon-"].circle, [class*=" icon-"].circle {
    width: 30px;
    height: 30px;
  }
}

@media screen and (max-width: 768px) {
  [class^="icon-"].circle, [class*=" icon-"].circle {
    width: 25px;
    height: 25px;
  }
}

[class^="icon-"].md, [class*=" icon-"].md{
    font-size: 20px;
}
[class^="icon-"].sm, [class*=" icon-"].sm{
  font-size: 15px;
}

[class^="icon-"].circle, [class*=" icon-"].circle{
  font-size: 20px;
  width: 35px;
  height: 35px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: .5px solid ;
  border-radius: 50%;
}
[class^="icon-"].sm.circle{
  width: 20px;
  height: 20px;
}
[class^="icon-"].sm.circle,
[class*=" icon-"].sm{
  font-size: 10px;
}
[class^="icon-"].md.circle{
  width: 50px;
  height: 50px;
}
[class^="icon-"].md.circle, 
[class*=" icon-"].md{
  font-size: 25px;
}

.icon-menu:before {
  content: "\e900";
}
.icon-chat:before {
  content: "\e901";
}

.icon-call:before {
  content: "\e902";
}
.icon-mail_outline:before {
  content: "\e903";
}
.icon-insert_emoticon:before {
  content: "\e904";
}
.icon-build:before {
  content: "\e905";
}
.icon-face:before {
  content: "\e906";
}
.icon-chat-bubble-dots:before {
  content: "\e907";
}
.icon-view-list:before {
  content: "\e908";
}