.box:hover {
    background: blue;
}

.clip-image{
    overflow:hidden;
    max-width:70px;
    max-height:100px;
    width:100%;
    height:auto;
}

/* Overall page layout styles*/

html, body, #wrapper {
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrapper {
    position: relative;
}

#middle, #bottom {
    position: absolute;
}

#middle {
    top: 170px;
    bottom: 30px;
    left: 20px;
    right: 20px;
}

#bottom {
    bottom: 0;
    width: 100%;
    height: 30px;
    width: 100%;
    background-color: #eff8f8;
    text-align: right;
    position: fixed;
    left: 0;
    width: 100%;
}

/* Styles for tileview */

.cambric-tile-header {
    padding-left: 8px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-right: 8px;
    background-color: #2fa093;
    text-align: left;
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: medium;
    height: 53px;
    width: 280px;
    overflow: hidden;
}

.cambric-tile-indent {
    padding-left: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: #57635F;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-weight: lighter;
    font-size: small;
}

.cambric-tile-list {
    padding-left: 30px;
    color: #57635F;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 12px;
}

.cambric-thumbnail-grey {
    background-color: #e6e7e7;
    padding: 4px 4px 4px 4px;
}

.cambric-search-button {
    height: 28px;
    font-size: 12px;
    margin-top: -2px;
}

.cambric-action-button {
    cursor: pointer;
}

/* Styles for version display on detail page */

.cambric-version-highlight {
    background-color: #eff8f8;
    font-weight: bold;
}

.cambric-version-normal:hover {
    background-color: #e6e7e7;
    cursor: pointer;
}

.cambric-version-normal {
    background-color: #ffffff;
}

/* Override default background colours for DevExpress tile */
.dx-tile {
    background-color: #eff8f8;
    border: none;
}

.dx-tile:hover {
    transition: background 0.25s ease-in-out;
    background-color: #d0d2d3;
    align-content:start;
    cursor: pointer;
}

.dx-widget {
    font-size: 12px;
}

/* Modify default background colour for main button to Morse blue */
.btn-primary {
    background-color: #249ed2;
}

.btn {
    font-size: 10px;
}

input {
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #249ED2;
    padding: 5px;
}

/* Override default bootstrap breadcrumb */

form.breadcrumb {
    background-color: #ffffff;
}

ul.breadcrumb {
    left: 0px;
    height: 40px;
    top: 76px;
    width: 100%;
    padding: 10px 12px;
    list-style: none;
    background-color: #eff8f8;
}

ul.breadcrumb li {
    display: inline;
    font-size: 12px;
}

ul.breadcrumb li + li:before {
    padding: 4px;
    color: black;
    content: "/\00a0";
}

ul.breadcrumb li a {
    color: #0275d8;
    text-decoration: none;
}

ul.breadcrumb li a:hover {
    color: #01447e;
    text-decoration: underline;
}

/* Override bootstrap silliness limiting the width of the container */

@media (min-width: 2000px) {
    .container {
        max-width: 1840px;
    }
}

@media (min-width: 3000px) {
    .container {
        max-width: 2760px;
    }
}

.container {
    width: 100%;
    align-content: center;
}

/* Cambric styling components */

.cambric-standard {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #939598;
    width: 100%
}

.cambric-download-button {
    text-align: right;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #939598;
    align-content: end;
    width: 180px;
}

.cambric-left {
    text-align: left;
}

.cambric-search-bar {
    padding-top: 6px;
    top: 108px;
    font-weight: 600;
    position: absolute;
    right: 1%;
    z-index: 3;
}

.cambric-detail-indent {
    float: left;
    text-align: left;
    margin-left: 16px;
    margin-right: 16px;
}

.cambric-detail-image {
    margin-bottom: 30px;
}

.cambric-sub-header {
    align-content: center;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: medium;
    color: #939598;
}

.cambric-sub-header-highlight {
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    color: #249ED2;
}

.cambric-title-left {
    font-weight: normal;
    font-style: italic;
    text-align: left;
}

/* Layout for settings pages */

.cambric-fake-link {
    cursor: pointer;
    color: #0275d8;
    text-decoration: underline;
}

.cambric-options-tree {
    vertical-align: top;
    text-align: left;
    display: inline-block;
    min-width: 250px;
    max-width: 350px;
    width: 100%;
    min-height: 400px;
    max-height: 1000px;
    margin-left: 5px;
    margin-right: 5px;
    background: #eff8f8;
    color: #939598;
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    font-size: 14px;
}

.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
    color: #249ed2;
    font-weight: bold;
    background: #eff8f8;
}

.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item {
    font-weight: bold;
    background: #eff8f8;
}

.currently-active-item {
    color: #249ed2;
    font-weight: bold;
    background: #eff8f8;
}

.cambric-table-spaced {
    border-spacing: 10px;
    border-collapse: separate;
}

.cambric-my-settings {
    text-align: left;
    font-size: 14px;
}

input:read-only {
    border: solid 1px #c8c8c8;
    color: #c8c8c8;
}

/* Layout for data grids */
.cambric-user-grid-editor {
    padding-top: 0px;
    padding-bottom: 0px;
    vertical-align: top;
    text-align: left;
}

.dx-datagrid {
    font-family: 'Roboto', sans-serif;
    color: #888888;
    font-weight: lighter;
    font-size: 14px;
}

.dx-datagrid-headers {
    background-color: #eff8f8;
}

.dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + .dxdatagrid-rowsview {
    border-top: 2px solid #eff8f8;
}

.dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: 2px solid #eff8f8;
}

.dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > .dx-datagrid-total-footer {
    border-left: 2px solid #eff8f8;
    border-right: 2px solid #eff8f8;
}

.dx-datagrid-borders > .dx-datagrid-filter-panel, .dx-datagrid-borders > .dx-datagrid-headers, .dx-datagrid-borders > .dx-datagrid-pager {
    border-top: 2px solid #eff8f8;
    border-bottom: hidden;
}

a.dx-link.dx-link-delete {
    color: #d75d5d;
}

#cambric-popup-editor {
    text-align: left;
}

.dx-popup-title {
    background-color: #eff8f8;
}

.dx-popup-content {
    text-align: left;
}

.dx-field-item-label {
    width: 250px;
}

/* General layout */
.cambric-morse-bg-blue {
    background: #249ED2;
    color: #FFFFFF
}

.cambric-morse-green {
    color: #2fa093;
}

.cambric-rhs-button {
    float: right;
}

.cambric-cancel-button {
    background: #d54747;
    color: white;
    border: none;
    padding: 3px 10px 3px 10px;
    text-align: center;
    border-radius: 5px;
}

.cambric-blue-button {
    background: #5e9dd1;
    color: #ffffff;
    border: none;
    padding: 3px 10px 3px 10px;
    text-align: center;
    border-radius: 5px;
}

.cambric-blue-button:hover {
    background: #5e9dd1;
    color: #ffffff;
    border: none;
    padding: 3px 10px 3px 10px;
    text-align: center;
    border-radius: 5px;
}

.cambric-input-content {
    border: 0px;
    border-spacing: 0 12px;
    border-collapse: separate;
    align-content: start;
}

.cambric-text-light {
    color: #d0d2d3;
}

*::-webkit-input-placeholder {
    color: #d0d2d3;
}

*:-moz-placeholder {
    /* FF 4-18 */
    color: #d0d2d3;
    opacity: 1;
}

*::-moz-placeholder {
    /* FF 19+ */
    color: #d0d2d3;
    opacity: 1;
}

*:-ms-input-placeholder {
    /* IE 10+ */
    color: #d0d2d3;
}

*:-ms-input-placeholder {
    /* Microsoft Edge */
    color: #d0d2d3;
}

.cambric-detail-header {
    color: #939598;
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    font-weight: bold;
    text-align: left;
}

.cambric-image-border {
    border: 6px solid #d0d2d3;
    padding: 4px 4px 4px 4px;
}

.cambric-accordion-title {
    color: #939598;
    font-family: 'Roboto', sans-serif;
    font-size: medium;
    font-weight: bold;
}

.cambric-accordion-detail {
    color: #939598;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-align: left;
}

.cambric-footer {
    height: 30px;
    width: 100%;
    background-color: #eff8f8;
    text-align: right;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.cambric-header {
    background-color: #eff8f8;
}

/* Override unwanted bootstrap table nonsense */

.table td {
    border-collapse: collapse;
    border-bottom-width: 0;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-bottom: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border: none;
    padding: 0;
}

/* Cookie panel */

.cookie-close {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 16px;
    color: #cccccc;
}

.cookie-agree {
    align-content: center;
    text-align: center;
}

.cookie-backdrop {
    background-color: #eff8f8;
    display: block;
}

.cookie-cell {
    display:inline-block;
}

.hidden {
    visibility: hidden;
}

.reportable-chip {
    color: white;
    background: orange;
    border: 1px solid darkorange;
    padding: 3px;
    font-size:9px;
}