/* Copyright 2018 Epic Systems Corporation */
/* #region Proxy Color Picker Layout */
.section .content select.colorpicker {
  display: inline-block;
  margin: 0;
  vertical-align: middle; }

.section .content .colorpreview {
  display: inline-block;
  height: 1.25rem;
  margin: 0 0 0 0.25rem;
  vertical-align: middle;
  width: 1.25rem; }

/* #endregion */
/* #region Color 1 - Skylight */
img.photo.color1, .colorpreview.color1, #proxies .color1:after, body.color1 #header .menugroup.selected .menuicon:after {
  background-color: #3a9be5; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color1 > a .iconlabel {
    background-color: #3a9be5; } }

.color1 > .userPhoto, #proxies .color1 .proxyicon, #proxies a.color1 .proxyicon, #touchmenu .color1 .proxyicon {
  background-color: #3a9be5;
  border-color: #3a9be5; }

body.color1 #header .menugroup li a:not(.button):focus, body.color1 #header .menugroup li a:not(.button):hover, body.color1 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #d2eafb; }

/* #endregion */
/* #region Color 2 - Forest */
img.photo.color2, .colorpreview.color2, #proxies .color2:after, body.color2 #header .menugroup.selected .menuicon:after {
  background-color: #3fa94b; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color2 > a .iconlabel {
    background-color: #3fa94b; } }

.color2 > .userPhoto, #proxies .color2 .proxyicon, #proxies a.color2 .proxyicon, #touchmenu .color2 .proxyicon {
  background-color: #3fa94b;
  border-color: #3fa94b; }

body.color2 #header .menugroup li a:not(.button):focus, body.color2 #header .menugroup li a:not(.button):hover, body.color2 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #cdf4d1; }

/* #endregion */
/* #region Color 3 - Bubblegum */
img.photo.color3, .colorpreview.color3, #proxies .color3:after, body.color3 #header .menugroup.selected .menuicon:after {
  background-color: #df66d5; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color3 > a .iconlabel {
    background-color: #df66d5; } }

.color3 > .userPhoto, #proxies .color3 .proxyicon, #proxies a.color3 .proxyicon, #touchmenu .color3 .proxyicon {
  background-color: #df66d5;
  border-color: #df66d5; }

body.color3 #header .menugroup li a:not(.button):focus, body.color3 #header .menugroup li a:not(.button):hover, body.color3 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #fadbf8; }

/* #endregion */
/* #region Color 4 - Royal */
img.photo.color4, .colorpreview.color4, #proxies .color4:after, body.color4 #header .menugroup.selected .menuicon:after {
  background-color: #ae77e5; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color4 > a .iconlabel {
    background-color: #ae77e5; } }

.color4 > .userPhoto, #proxies .color4 .proxyicon, #proxies a.color4 .proxyicon, #touchmenu .color4 .proxyicon {
  background-color: #ae77e5;
  border-color: #ae77e5; }

body.color4 #header .menugroup li a:not(.button):focus, body.color4 #header .menugroup li a:not(.button):hover, body.color4 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #eddffb; }

/* #endregion */
/* #region Color 5 - Ocean */
img.photo.color5, .colorpreview.color5, #proxies .color5:after, body.color5 #header .menugroup.selected .menuicon:after {
  background-color: #0da798; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color5 > a .iconlabel {
    background-color: #0da798; } }

.color5 > .userPhoto, #proxies .color5 .proxyicon, #proxies a.color5 .proxyicon, #touchmenu .color5 .proxyicon {
  background-color: #0da798;
  border-color: #0da798; }

body.color5 #header .menugroup li a:not(.button):focus, body.color5 #header .menugroup li a:not(.button):hover, body.color5 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #bafcf5; }

/* #endregion */
/* #region Color 6 - Goldenrod */
img.photo.color6, .colorpreview.color6, #proxies .color6:after, body.color6 #header .menugroup.selected .menuicon:after {
  background-color: #ba8b00; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color6 > a .iconlabel {
    background-color: #ba8b00; } }

.color6 > .userPhoto, #proxies .color6 .proxyicon, #proxies a.color6 .proxyicon, #touchmenu .color6 .proxyicon {
  background-color: #ba8b00;
  border-color: #ba8b00; }

body.color6 #header .menugroup li a:not(.button):focus, body.color6 #header .menugroup li a:not(.button):hover, body.color6 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #ffecb8; }

/* #endregion */
/* #region Color 7 - Autumn */
img.photo.color7, .colorpreview.color7, #proxies .color7:after, body.color7 #header .menugroup.selected .menuicon:after {
  background-color: #ec7224; }

@media only screen and (min-width: 1px) and (max-width: 1300px) {
  #header.compact #proxies .selected.color7 > a .iconlabel {
    background-color: #ec7224; } }

.color7 > .userPhoto, #proxies .color7 .proxyicon, #proxies a.color7 .proxyicon, #touchmenu .color7 .proxyicon {
  background-color: #ec7224;
  border-color: #ec7224; }

body.color7 #header .menugroup li a:not(.button):focus, body.color7 #header .menugroup li a:not(.button):hover, body.color7 #localeswitch #morelocales li a:not(.button):hover {
  background-color: #fcdfcd; }

/* #endregion */