/* 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: #d2e9fb;
}

/* #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: #ffedb8;
}

/* #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: #fce0cd;
}

/* #endregion */