/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/gadget-dialog.css' */

#gadget-dialog .aui-dialog2-content {
    padding: 0; /* remove inherited padding */
    border-radius: 0 0 5px 5px;
 }
#gadget-dialog .aui-page-panel-nav {
    padding: 20px 10px;
    width: 220px;
 }
#gadget-dialog #list-panel {
    margin-right: 20px;
 }
#gadget-dialog .aui-page-panel-nav .directory-search {
    margin-left: 10px;
}

#gadget-dialog .aui-page-panel-nav .directory-search .text {
    width:180px;
}
#gadget-dialog .aui-page-panel-nav .directory-search + .aui-navgroup-vertical {
    margin-top: 20px;
}
/* truncate items to a single line if too long */
/*#gadget-dialog .category-nav-item {*/
    /*overflow: hidden;*/
/*}*/
/*#gadget-dialog .category-nav-item a {*/
    /*text-overflow: ellipsis;*/
    /*white-space: nowrap;*/
/*}*/
/**/
#gadget-dialog .category-nav-item .aui-badge {
    float: right;
}

#gadget-dialog .item-group { /* directory item group */
    border-bottom: 1px solid #cccccc;
    padding: 10px 0;
}
#gadget-dialog .item-group.last {
    border:none;
}
#gadget-dialog .item-thumbnail {
    width: 120px; /* width of the image */
}
#gadget-dialog .item-thumbnail img {
    border: 1px solid #ccc;
    border-radius: 3px;
}
#gadget-dialog .item-description,
#gadget-dialog .item-actions {
    margin-left: 20px;
}
#gadget-dialog .item-actions {
    text-align: right;
    /* For some reason closing and re-opening the dialog causes the actions
    column to calculate its width differently, so hard-coding the width there */
    width:150px;
}

#gadget-dialog .item-description h4:first-child {
    margin-top: 0;
}
#gadget-dialog .item-author {
    color: #707070;
    font-size: 12px;
    margin-top: 0;
}
#gadget-dialog .message-panel {
    padding-top:40px;
}
#gadget-dialog .loading-text {
    text-align: center;
    padding-top:10px;
}

#gadget-dialog .toggle-xml {
    display:block;
}

#gadget-dialog .loading-spinner {
    margin-left:auto;
    margin-right:auto;
}

#gadget-dialog .loading-spinner .spinner div {
    background-color: #333;
}

#gadget-dialog #directory-page {
    height: 400px;
}

#gadget-dialog #message-panel div:first-of-type {
    margin-top: 20px;
    margin-right: 10px;
}

#gadget-dialog #message-panel div {
    margin-right: 10px;
}

/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard.css' */
/* Dashboards Specific */
.dashboard { overflow: hidden; }
.dashboard ul.disabled span { color:#999999; font-size: 1em; font-weight: bold; padding: 0.6em 0.8em 0.6em 0.8em;}
.dashboard ul.disabled a { padding: 0;}

.layout {
    clear: both;
    padding: 0 20px 20px 20px;
    position: relative;
}
.layout:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /* IE */
.dashboard.initializing .layout * {visibility:hidden;}

.layout .column {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0 0 -1.5em 2%;
    min-height: 200px;
    padding: 0;
    position: relative;
    width: 47.5%;
}

.layout .column .gadget {
    display: block;
    width: auto;
}

.layout-a .column.second,
.layout-a .column.third { display: none; }
.layout-a .column { width: 98%; }

.layout-aa .column.third { display: none; }
.layout-aa .column { width: 47.5%; }

.layout-ba .column.third { display: none; }
.layout-ba .column { width: 68%; }
.layout-ba .column.first { width: 27%; }

.layout-ab .column.third { display: none; }
.layout-ab .column { width: 27%; }
.layout-ab .column.first { width: 68%; }

.layout-aaa .column { width: 30.9%; }

.layout.maximized .column,
.layout.maximized .column.maximized li {display: none;}
.layout.maximized .column.maximized {display: block; width: 98%;}
.layout.maximized .column.maximized li.maximized {display:list-item;}
.layout.maximized .column.maximized div.gadget.maximized .minimization {display: none;}

.dashboard.dragging .column.empty {background: none; border:none;}
.dashboard.dragging .column.empty .empty-text {display: none!important;} /* apologies about the important, I just had to because sortable control applies an inline style. */

/* dashboard layout placeholder chrome */
.layout .column .gadget,
.layout .column .placeholder,
.layout .column.empty .empty-text {
    margin: 0;
    margin-bottom: 20px;
    position: relative;
}

.layout .column .gadget {
    background: transparent;
    border: 1px solid transparent;
    border-left: 0;
    border-right: 0;
    padding: 0 1px 0 1px;
}

.layout .column .placeholder,
.layout .column.empty .empty-text {
    border: 2px dashed #C1C7D0;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #8993A4;
    font-size: 24px;
    min-height: 200px;
    padding: 20px;
    text-align: center;
}

.dashboard.dragging .hotspot-shim {display:block;}
.hotspot-shim {position:absolute; z-index:10; display:none;}

.throbber { display: inline-block; height:16px; vertical-align:middle; width:16px; }
.throbber.loading {background:transparent url( "/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/css/images/wait.gif") 0 0 no-repeat;}

.dashboard-shim {z-index:4; position:absolute; top:0; left:0; height:100%; width:100%; display:none;}
    .propagation-blocker .dashboard-shim {display:block;}

/* diagnostics warning */
#diagnostic-warning {background:#FFFFDD none repeat scroll 0 0; border:1px solid #F7DF92; color:#333333; margin:0 0 0.2em; text-align:center; }
#diagnostic-content {text-align: left;}
#diagnostic-warning p {margin:0 1em; padding:0.3em;}
#diagnostic-warning a.close {background: transparent url('/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/close.png') no-repeat scroll 0 0; cursor: pointer; display: block; float: right; height: 16px; line-height: 12px; text-indent: -9999px; width: 16px;}

/* This needs to be !important because jQuery.ui applies inline styles. */
.dashboard.hotspot-active li.placeholder {display:none!important;}

.shim {display:none!important;} /* disable aui shim. Will not work in ie, because our z-indexing is a few levels deep. */


/* Operation options - generally used at the top right of the page */
#dash-options > .throbber,
#dash-options > .operations { display: inline-block; }

#dash-options .operations > li > a {
  background-position: 6px 6px;
  background-repeat: no-repeat;
  color: inherit;
  display: block;
  margin: 0;
  padding-left: 28px;
}

#dash-options .icon-add {background-image:url(/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/add_20.png);}
#dash-options .icon-edit {background-image:url(/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/edit_20.png);}
#dash-options .icon-tools {background-image:url(/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/tools_20.png);}
#dash-options .icon-restore {background-image:url(/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/ico_dash_666_restore.gif);}


#gadget-dialog input[type='text']::-ms-clear { display: none; }

.gadget-menu button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}


/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard-item.css' */
.dashboard-item-content .loading {
  background:url("/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/css/images/loading.gif") center no-repeat;
}

.dashboard-item-content .loading-small {
  background:url("/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/css/images/loading_100.gif") center no-repeat;
}

.dashboard-item-content .item-error {
    padding:5px;
}

.dashboard-item-content .gadget-inline {
    overflow: auto;
}
/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard/vertical-navigation.css' */
/*!* dashboard page navigation styles *!*/
/*!* NOTE: these were copy-pasted from the styles generated from JIRA's layout.less file @ f7efef01d *!*/
#dashboard > .tabs.vertical {
  border-right: 1px solid #dddddd;
  padding: 10px;
  padding-bottom: 20px;
  width: 200px;
}

/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard/page-chrome.css' */
/* page chrome structure */
#dashboard {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    padding: 0;
    position: relative;
    margin: 0;
    width: 100%;
}

#dashboard > #dashboard-header {
    display: none; /* It is not used and should not be used. */
}

#dashboard > .vertical.tabs,
#dashboard > .dashboard-content {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0;
    position: relative;
    vertical-align: top;
    background: #F4F5F7;
}

/* set the position and width of the vertical navigation */
#dashboard > .vertical.tabs {
    bottom: 0;
    left: 0;
    padding-top: 20px; /* to give the content some breathing room from the application header */
    position: absolute;
    top: 0;
    width: 188px;
}

#dashboard > .vertical.tabs + .dashboard-content {
    margin-left: 188px;
}

/* set the min-height of the page */
.dashboard-content {
    min-height: 600px;
    background-color: #F4F5F7;
}

#dashboard-content > .aui-page-header {
    padding: 20px;
    background-color: #F4F5F7;
}

.initializing .dashboard-content {
    height: 600px;
    overflow: hidden;
}

/* page chrome styling */
#dashboard {
    background: #fff;
    border-color: #ddd;
    border-style: solid;
    border-width: 0;
    border-bottom-width: 1px;
}

/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dialogs/layout-dialog.css' */
#layout-dialog {}
  #layout-dialog .aui-dialog {border: none;}
  #layout-dialog h2 a,
  #layout-dialog h2 a:link,
  #layout-dialog h2 a:visited,
  #layout-dialog h2 a:hover,
  #layout-dialog h2 a:active,
  #layout-dialog h2 a:focus {background: transparent url('/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/images/icons/close.png') no-repeat 0 0; display: block; height: 16px; position: absolute; right: 0.5em; text-indent: -9999px; top: 0.75em; width: 16px;}
  #layout-dialog .dialog-panel-body {padding: 10px 0 10px 16px;}

  #layout-dialog p {margin: 0 0 1em 0; text-align: left;}
  #layout-dialog ul {margin: 0; padding: 0;}
    #layout-dialog ul li {list-style-type: none; margin: 0; padding: 0;}
    #layout-dialog ul li a,
    #layout-dialog ul li a:link,
    #layout-dialog ul li a:visited {border: 1px solid #bbb; display: block; float: left; margin: 0 1em 1em 0; outline: none; padding: 0.35em; width: auto;}
    #layout-dialog ul li a:hover,
    #layout-dialog ul li a:active,
    #layout-dialog ul li a:focus {border-color: #666;}

      #layout-dialog ul li a strong {background: #fff url('/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/css/images/sprite-layouts.png') no-repeat 0 0; cursor: pointer; display: block; float: left; height: 37px; text-indent: -9999px; width: 68px;}
      ul li a#layout-a strong {background-position: 0 0;}
      ul li a#layout-aa strong {background-position: 0 -41px;}
      ul li a#layout-ba strong {background-position: 0 -82px;}
      ul li a#layout-ab strong {background-position: 0 -123px;}
      ul li a#layout-aaa strong {background-position: 0 -163px;}

      .layout-a ul li #layout-a strong,
      #layout-dialog #layout-a:hover strong,
      #layout-dialog #layout-a:active strong,
      #layout-dialog #layout-a:focus strong {background-position: -72px -1px;}
      .layout-aa ul li #layout-aa strong,
      #layout-dialog #layout-aa:hover strong,
      #layout-dialog #layout-aa:active strong,
      #layout-dialog #layout-aa:focus strong {background-position: -72px -41px;}
      .layout-ba #layout-ba strong,
      #layout-dialog #layout-ba:hover strong,
      #layout-dialog #layout-ba:active strong,
      #layout-dialog #layout-ba:focus strong {background-position: -72px -82px;}
      .layout-ab #layout-ab strong,
      #layout-dialog #layout-ab:hover strong,
      #layout-dialog #layout-ab:active strong,
      #layout-dialog #layout-ab:focus strong {background-position: -72px -122px;}
      .layout-aaa #layout-aaa strong,
      #layout-dialog #layout-aaa:hover strong,
      #layout-dialog #layout-aaa:active strong,
      #layout-dialog #layout-aaa:focus strong {background-position: -72px -163px;}

      .layout-a ul li a#layout-a,
      .layout-aa ul li a#layout-aa,
      .layout-ba ul li a#layout-ba,
      .layout-ab ul li a#layout-ab,
      .layout-aaa ul li a#layout-aaa {background-color: #eee; border-color: #666;}

/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard/gadget-chrome.css' */
.gadget {
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}

.propagation-blocker div.gadget {
    z-index: 2;
}

.gadget.dragging {
    z-index: 3;
}

.gadget.dropdown-active {
    z-index: 5 !important;
}

.gadget .gadget-container {
    position: relative;
    border: 1px solid rgba(9, 30, 66, 0.04);
    border-radius: 4px;
}

.gadget .gadget-container .submit.loading {
    background: transparent url("/jira/s/-9bc2l8/820000/1dlckms/7.0.3/_/download/resources/com.atlassian.gadgets.dashboard:dashboard/css/images/wait.gif") 100% center no-repeat;
}

.gadget.dropdown-active .gadget-menu {
    z-index: 8;
}

.gadget .dashboard-item-header {
    background: #eee;
    -moz-border-radius-topleft: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    border-top-right-radius: 3px;
    margin: 0;
    min-height: 24px;
    padding: 0;
    position: relative;
}

.gadget .dashboard-item-title {
    color: #333;
}

.gadget .dashboard-item-header > .dashboard-item-title {
    /* h5 size from ADG typography */
    background: transparent;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.666666666667;
    margin: 0;
    padding: 4px 64px 4px 10px;
}

.gadget .dashboard-item-header > .gadget-menu {
    bottom: 0;
    position: absolute;
    padding-right: 12px;
    right: 0;
    top: 0;
    vertical-align: middle;
}

.dashboard.draggable .gadget .dashboard-item-title {
    cursor: move;
}

.dashboard.initializing div.gadget {
    visibility: hidden;
}

/* gadget menus */
.gadget .gadget-menu .aui-icon {
    border: none;
    display: block;
    padding: 0 3px;
    text-align: left;
    text-indent: -999em;
    opacity: 0.5;
    color: white;
    height: 16px;
    width: 16px;
}

.gadget .gadget-menu .aui-icon:hover,
.gadget .gadget-menu .aui-dd-trigger:hover {
    opacity: 1;
}

.gadget .gadget-menu .aui-icon.move {
    cursor: move;
}

.gadget .gadget-menu .aui-dd-trigger {
    background: none;
}

.gadget .gadget-menu .aui-dd-trigger:hover,
.gadget .gadget-menu .aui-dd-trigger:active,
.gadget .gadget-menu .aui-dd-trigger:focus {
    background: none;
}

.gadget .gadget-menu > ul {
    float: right;
    margin: 6px 0 0 1em;
    padding: 0;
    width: auto;
}

.gadget .gadget-menu > ul > li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.gadget .gadget-menu > ul > li > a:hover {
    text-decoration: none;
}

.gadget .gadget-menu > ul > li > a > span {
    display: block;
    padding: 0;
}

/* gadget colours menu items */
.gadget .gadget-colors ul {
    display: flex;
    flex-wrap: nowrap;
    padding: 4px 14px 3px 12px;
}

.gadget .gadget-colors li {
    float: left;
    list-style: none;
    margin: 2px 4px 2px 0;
}

.gadget .gadget-colors a {
    background: transparent;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    height: 16px;
    outline-offset: 1px;
    padding: 0;
    text-align: left;
    text-indent: -999em;
    width: 16px;
}

.gadget .gadget-colors a:hover,
.gadget .gadget-colors a:focus,
.gadget .gadget-colors a:active {
    outline: 2px solid #333;
}

/*
    workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=480888
    can't use box-shadow exclusively since IE8 doesn't support it
*/
.mozilla .gadget .gadget-colors a:hover,
.mozilla .gadget .gadget-colors a:focus,
.mozilla .gadget .gadget-colors a:active {
    outline: 0;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #333;
}

/* gadget content container styles -- basically the wrapper for the gadget iframe */
.gadget .dashboard-item-content {
    -moz-border-radius-bottomleft: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    border-bottom-right-radius: 3px;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(9, 30, 66, 0.13);
}

.gadget .dashboard-item-content.minimization {
    left: -9999px;
    position: absolute;
    width: 100%;
}

/* module-key = 'com.atlassian.gadgets.dashboard:dashboard', location = 'css/dashboard/gadget-colours.css' */
/* Colored Gadgets */
.gadget .dashboard-item-title {
    color: #fff;
}

/* color1 - Light Blue */
.gadget.color1 .dashboard-item-header,
.gadget-colors .color1 > a {
    background-color: #0747A6;
}

/* color2 - Red */
.gadget.color2 .dashboard-item-header,
.gadget-colors .color2 > a {
    background-color: #DE350B;
}

/* color3 - Orange */
.gadget.color3 .dashboard-item-header,
.gadget-colors .color3 > a {
    background-color: #FF8B00;
}

/* color4 - Green */
.gadget.color4 .dashboard-item-header,
.gadget-colors .color4 > a {
    background-color: #00875A;
}

/* color5 - Dark Blue */
.gadget.color5 .dashboard-item-header,
.gadget-colors .color5 > a {
    background-color: #00A3BF;
}

/* color6 - Purple */
.gadget.color6 .dashboard-item-header,
.gadget-colors .color6 > a {
    background-color: #6554C0;
}

/* color7 - Light Gray */
.gadget.color7 .dashboard-item-header,
.gadget-colors .color7 > a {
    background-color: #5E6C84;
}

/* color8 -- Octarine! */
.gadget.color8 .dashboard-item-header {
    background-color: transparent;
    transition: background-color ease-in 0.2s;
}

.gadget.color8 .dashboard-item-content {
    background-color: transparent;
    box-shadow: none;
    transition: all ease-in 0.2s;
}

.gadget.color8 .gadget-container {
    border-color: transparent;
    transition: border-color ease-in 0.2s;
}

.gadget-colors .color8 > a {
    background: transparent url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0D%0A%3Csvg%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0D%0A%20%20%20%20%3C%21--%20Generator%3A%20Sketch%2048.2%20%2847327%29%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0D%0A%20%20%20%20%3Ctitle%3Eicon-transparent-square%3C%2Ftitle%3E%0D%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0D%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0D%0A%20%20%20%20%3Cg%20id%3D%22Dashboard-logged-in%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate%28-446.000000%2C%20-518.000000%29%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon-transparent-square%22%20transform%3D%22translate%28446.000000%2C%20518.000000%29%22%20stroke-width%3D%222%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.5%2C14.5%20L14.5%2C1.5%22%20id%3D%22Line-3%22%20stroke%3D%22%23FF5630%22%20stroke-linecap%3D%22round%22%3E%3C%2Fpath%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22Rectangle-3%22%20stroke%3D%22%23DFE1E6%22%20x%3D%221%22%20y%3D%221%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%3E%3C%2Frect%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0D%0A%20%20%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E') no-repeat center;
    border: 1px solid #ccc;
}

.gadget.color8 .dashboard-item-header .aui-icon,
.gadget.color8 .dashboard-item-header .aui-dd-trigger {
    visibility: hidden;
}

.gadget.color8 .dashboard-item-header .aui-icon.move #Combined-Shape {
    fill: #42526E;
}

.gadget.color8 .dashboard-item-header,
.gadget.color8 .dashboard-item-content {
    border-color: transparent;
}

.gadget.color8 > .gadget-hover > .dashboard-item-content {
    box-shadow: 0 2px 2px 0 rgba(9, 30, 66, 0.13);
}

.gadget.color8 > .gadget-hover > .dashboard-item-header,
.gadget.color8 > .gadget-hover > .dashboard-item-content {
    background-color: #ffffff;
}

.gadget.color8 > .gadget-hover.gadget-container {
    border: 1px solid rgba(9, 30, 66, 0.04);
}

.gadget.color8 > .gadget-hover > .dashboard-item-header .aui-icon,
.gadget.color8 > .gadget-hover > .dashboard-item-header .aui-dd-trigger {
    visibility: visible;
    color: #42526E;
}

.gadget.color8 .dashboard-item-title {
    color: #42526E;
    visibility: hidden;
}

.gadget.color8 > .gadget-hover .dashboard-item-title {
    visibility: visible;
}

/* demonstrate the selected gadget colour */
.gadget.color1 .gadget-colors .color1 a,
.gadget.color2 .gadget-colors .color2 a,
.gadget.color3 .gadget-colors .color3 a,
.gadget.color4 .gadget-colors .color4 a,
.gadget.color5 .gadget-colors .color5 a,
.gadget.color6 .gadget-colors .color6 a,
.gadget.color7 .gadget-colors .color7 a,
.gadget.color8 .gadget-colors .color8 a {
    outline: 2px solid #3C78B5;
}

/*
    workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=480888
    can't use box-shadow exclusively since IE8 doesn't support it
*/
.mozilla .gadget.color1 .gadget-colors .color1 a,
.mozilla .gadget.color2 .gadget-colors .color2 a,
.mozilla .gadget.color3 .gadget-colors .color3 a,
.mozilla .gadget.color4 .gadget-colors .color4 a,
.mozilla .gadget.color5 .gadget-colors .color5 a,
.mozilla .gadget.color6 .gadget-colors .color6 a,
.mozilla .gadget.color7 .gadget-colors .color7 a,
.mozilla .gadget.color8 .gadget-colors .color8 a {
    outline: 0;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #3C78B5;
}