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