:root {
  /*** General variables ***/
  /* $cot-color-navy */
  --white-label-primary-color: #113355;

  /* This is a trick to use the variable with alpha */
  /* This value is like rgb(0, 0, 0) */
  --white-label-secondary-color: 0, 0, 0;

  --secondary-color: rgba(var(--white-label-secondary-color), 0.12);
  --secondary-color-focus: rgba(var(--white-label-secondary-color), 0.24);

  /* This is a trick to use the variable with alpha */
  /* This value is like rgb(255, 255, 255) */
  --general-menu-text-color: 255, 255, 255;

  /*** Custom variables ***/
  --general-background-color: var(--white-label-primary-color);

  /*** Profile ***/
  --profile-background-color: var(--white-label-primary-color);
  --profile-name-color:  rgba(var(--general-menu-text-color), 0.88);
  --profile-email-color:  rgba(var(--general-menu-text-color), 0.34);

  /*** Menu buttons ***/
  --menu-buttons-shadow: none;
  --menu-buttons-text-color: rgba(var(--general-menu-text-color), 0.84);
  --menu-buttons-text-color-hover: rgba(var(--general-menu-text-color), 0.96);
  --menu-buttons-text-color-selected: rgba(var(--general-menu-text-color), 0.96);
  --menu-buttons-background-color: var(--white-label-primary-color);
  --menu-buttons-background-color-hover: var(--secondary-color);
  --menu-buttons-background-color-selected: var(--secondary-color-focus);

  /*** Search Bar ***/
  --search-bar-background-color: var(--white-label-primary-color);
}

/*** LOGIN ***/
.login-container {
  background-color: var(--general-background-color, --white-label-primary-color);
}

/*** PRINCIPAL MENU ***/
/* General */
cotalker-group-menu {
  background-color: var(--general-background-color, --white-label-primary-color);
}

cotalker-menu-shortcut {
  background-color: var(--general-background-color, --white-label-primary-color);
}

/* Profile section */
.profile-section-background {
  color: var(--profile-email-color,  #fff);
  background-color: var(--profile-background-color, --white-label-primary-color);
}
.profile-section-name {
  color: var(--profile-name-color, white);
}
.profile-section-email {
  color: var(--profile-email-color,  #fff);
}

/* Group and administrative section */
/* Shadow in group and administrations buttons */
.side-menu li {
  box-shadow: var(--menu-buttons-shadow, none);
}


.group-menu-button {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
  background-color: var(--menu-buttons-background-color, --white-label-primary-color);
}

.group-menu-button a:visited, .group-menu-button a:link {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
}

.group-menu-button:hover {
  color: var(--menu-buttons-text-color-hover, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-hover, --white-label-primary-color);
}

.group-menu-button .selected {
  color: var(--menu-buttons-text-color-selected, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-selected, --white-label-primary-color);
}

/* Administrations sections */
.administrations-menu-title {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
}

.administrations-menu-button {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
  background-color: var(--menu-buttons-background-color, --white-label-primary-color);
}

.administrations-menu-button a:visited, .administrations-menu-button a:link {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
}
.administrations-menu-button:hover {
  color: var(--menu-buttons-text-color-hover, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-hover, --white-label-primary-color);
}
.administrations-menu-button .selected {
  color: var(--menu-buttons-text-color-selected, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-selected, --white-label-primary-color);
}

/* Shortcut section (summary, contacts) */
.shortcuts {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
}

.shortcuts a:visited, .shortcuts a:link {
  color: var(--menu-buttons-text-color, --white-label-primary-color);
}
.shortcuts a:hover {
  color: var(--menu-buttons-text-color-hover, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-hover, --white-label-primary-color);
}
.shortcuts .selected {
  color: var(--menu-buttons-text-color-selected, --white-label-primary-color) !important;
  background-color: var(--menu-buttons-background-color-selected, --white-label-primary-color);
}


/* Search Bar */
.search-bar-container {
  background-color: var(--search-bar-background-color);
}

.group-menu-whitelabel-powered-by {
  background-color: var(--profile-background-color, --white-label-primary-color);
}


/* Issue #1344 - Turn Off Number Input Spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}