.color-light-gray {

  --f7-button-text-color: var(--title-color);

  --f7-theme-color: #ecf1f5;

  --f7-theme-color-rgb: 236, 241, 245;

  --f7-theme-color-shade: #d1dde7;

  --f7-theme-color-tint: #f6f8fa;

  --f7-badge-text-color: var(--title-color);

}

.color-dark {

  --f7-theme-color: #1e2b47;

  --f7-theme-color-rgb: 30, 43, 71;

  --f7-theme-color-shade: #121a2a;

  --f7-theme-color-tint: #2a3c64;

}



.colored-icons-list a {

  justify-content: flex-start;

  padding: 11px var(--f7-list-item-padding-horizontal);

  height: auto;

}

.colored-icon {

  background-color: #ebebf2;

  border-radius: 50%;

  height: 38px;

  width: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 15px;

  color: var(--title-color);

}

.colored-icon .icon {

  font-size: 19px;

}

.colored-icon.yellow {

  color: #e5b32d;

  background-color: rgba(229, 179, 45, 0.2);

}

.colored-icon.blue {

  color: #0091de;

  background-color: rgba(0, 145, 222, 0.1);

}

.colored-icon.green {

  color: #19b48e;

  background-color: rgba(25, 180, 142, 0.1);

}

.colored-icon.pink {

  color: #e2206e;

  background-color: rgba(226, 32, 95, 0.1);

}

.colored-icon.orange {

  color: #ee8f30;

  background-color: rgba(255, 156, 60, 0.16);

}

.colored-icon.red {

  color: #d8422e;

  background-color: rgba(216, 66, 46, 0.13);

}

.colored-icon.purple {

  color: #9146da;

  background-color: rgba(145, 70, 218, 0.15);

}

.light-gray-title {

  color: #99a0a7;

  font-weight: 500;

  font-size: 13px;

  text-transform: uppercase;

  margin-top: 30px;

  margin-bottom: 10px;

}

.light-gray-title .badge {

  padding: 0;

  margin-left: 3px;

  margin-bottom: 2px;

}

.dark .colored-icon.yellow {

  background-color: rgba(229, 179, 45, 0.2);

}

.dark .colored-icon.blue {

  background-color: rgba(0, 145, 222, 0.25);

}

.dark .colored-icon.green {

  background-color: rgba(25, 180, 142, 0.2);

}

.dark .colored-icon.pink {

  background-color: rgba(226, 32, 95, 0.2);

}

.dark .colored-icon.orange {

  background-color: rgba(255, 156, 60, 0.2);

}

.dark .colored-icon.red {

  background-color: rgba(216, 66, 46, 0.3);

}

.dark .colored-icon.purple {

  background-color: rgba(145, 70, 218, 0.3);

}

.dark .light-gray-title {

  color: #8191a6;

}

.bg-color-primary {

  background-color: var(--f7-theme-color) !important;

}