/*
 *  Copyright (c) 2014 by The Concord Consortium, Inc. All rights reserved.
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

/* @import must be at top of file, otherwise CSS will not work */
/*@import url("//hello.myfonts.net/count/2df7e5");*/

@font-face {font-family: 'MuseoSans-500';src: static_url('webfonts/MuseoSans_500.otf') format('otf');}
@font-face {font-family: 'MuseoSans-500';src: static_url('webfonts/MuseoSans_500.ttf') format('truetype');}
@font-face {font-family: 'MuseoSans-500';src: static_url('webfonts/MuseoSans_500.eot') format('embedded-opentype');}
@font-face {font-family: 'MuseoSans-500';src: static_url('webfonts/MuseoSans_500.woff') format('woff');}
@font-face {font-family: 'MuseoSans-500';src: static_url('webfonts/MuseoSans_500.svg') format('svg');}
@font-face {font-family: 'MuseoSans-500-Italic';src: static_url('webfonts/MuseoSans_500_Italic.otf') format('otf');}
@font-face {font-family: 'MuseoSans-500-Italic';src: static_url('webfonts/MuseoSans_500_Italic.ttf') format('truetype');}
@font-face {font-family: 'MuseoSans-500-Italic';src: static_url('webfonts/MuseoSans_500_Italic.eot') format('embedded-opentype');}
@font-face {font-family: 'MuseoSans-500-Italic';src: static_url('webfonts/MuseoSans_500_Italic.woff') format('woff');}
@font-face {font-family: 'MuseoSans-500-Italic';src: static_url('webfonts/MuseoSans_500_Italic.svg') format('svg');}
@font-face {font-family: 'Montserrat-Regular';src: static_url('webfonts/Montserrat-Regular.otf') format('otf');}
@font-face {font-family: 'Montserrat-Regular';src: static_url('webfonts/Montserrat-Regular.ttf') format('truetype');}
@font-face {font-family: 'Montserrat-Regular';src: static_url('webfonts/Montserrat-Regular.eot') format('embedded-opentype');}
@font-face {font-family: 'Montserrat-Regular';src: static_url('webfonts/Montserrat-Regular.woff') format('woff');}
@font-face {font-family: 'Montserrat-Regular';src: static_url('webfonts/Montserrat-Regular.svg') format('svg');}
@font-face {font-family: 'Montserrat-Bold';src: static_url('webfonts/Montserrat-Bold.otf') format('otf');}
@font-face {font-family: 'Montserrat-Bold';src: static_url('webfonts/Montserrat-Bold.ttf') format('truetype');}
@font-face {font-family: 'Montserrat-Bold';src: static_url('webfonts/Montserrat-Bold.eot') format('embedded-opentype');}
@font-face {font-family: 'Montserrat-Bold';src: static_url('webfonts/Montserrat-Bold.woff') format('woff');}
@font-face {font-family: 'Montserrat-Bold';src: static_url('webfonts/Montserrat-Bold.svg') format('svg');}
@font-face {font-family: 'icomoon';src: static_url('icon_fonts/icomoon.ttf') format('truetype');}
@font-face {font-family: 'icomoon';src: static_url('icon_fonts/icomoon.eot') format('embedded-opentype');}
@font-face {font-family: 'icomoon';src: static_url('icon_fonts/icomoon.woff') format('woff');}
@font-face {font-family: 'icomoon';src: static_url('icon_fonts/icomoon.svg') format('svg');}

html, body {
    /* cf. https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/ */
    position: fixed;
    overflow: hidden;
    /* cf. https://developers.google.com/web/updates/2017/11/overscroll-behavior */
    overscroll-behavior: none;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* SproutCore inexplicably left out -ms-user-select and -webkit-user-select */
.sc-view.allow-select {
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
    user-select: text;
    cursor:  text;
}

#codap {
    position: absolute;
    height: 100vh;
    width: 100vw;
}

.dg-splash {
    background-color: white !important;
}

.dg-receive-outside-drop {
    border: 3px solid yellow !important;
}

.dg-busy-cover {
    cursor: wait;
    background-color: rgba(255, 255, 255, 0.01) !important;
    z-index: 1000000;
}

.dg-tipview {
    background-color: #838783;
    color: white;
    border-radius: 5px;
    padding: 5px;
}

/* Default font for case tables */
.dg-case-table {
    font-family: 'Montserrat-Regular', sans-serif !important;
    font-size: 8pt !important;
}


.dg-case-table-title-bar-container {
    font-style: italic;
    font-size: 15px;
    color: rgba(15,38,51,1);
    text-align: center;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #bddfdf;
    white-space: nowrap;
}

.dg-case-table-title-bar-container div.dg-case-table-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: text;
    position: relative;
}

.dg-case-table-title-bar-container .dg-case-table-title:hover {
    cursor: text;
}
.dg-case-table .dg-proto-row .slick-cell{
    cursor: text;
}

.slick-header-column.dg-new-attr-column-header {
    margin-top: -3px;
    background-image: static_url('images/ic_add_black_24dp_1x.png');
    background-position: center;
    background-repeat: no-repeat;
}

/* reset hover styles set elsewhere */
.slick-header-column.dg-new-attr-column-header:hover {
    margin-top: -3px;
    /*background-color: #e6e6e6;*/
    background-image: static_url('images/ic_add_black_24dp_1x.png');
    background-position: center;
    background-repeat: no-repeat;
}

.dg-new-attr-column {
    border: none;
    background-color: white;
}

.dg-new-attr-column.selected {
    border: none;
    background-color: white;
}

.dg-qualitative-backing {
    width: 100%;
    display: block;
    height: 7px;
    border-radius: 3px;
    background-color: lightgrey;
}

.dg-qualitative-bar {
    display: block;
    height: 7px;
    border-width:0;
    border-radius: 3px;
    box-sizing: border-box;
}

.dg-boundary-thumb {
    position: absolute;
    top: -2px;
}

.dg-color-table-cell {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.dg-calculator label {
    cursor: pointer;
}

.dg-toolshelf-button {
    overflow: visible;
}

.dg-icon-label {
    color: black;
    font-size: 11px !important;
    cursor: pointer;
    overflow: visible;
}

.dg-icon-button-blip {
    background-image: static_url('images/arrow-moreIconOptions.svg');
}

.navBar {
    background-color: #005060;
    /* allow CFM dialogs to display outside the navBar */
    overflow: visible;
}

.navBar .leftSide {
    /* allow CFM dialogs to display outside the navBar */
    overflow: visible;
}

.navBar .modal-dialog {
    /* override bottom: 0; for CFM dialogs */
    bottom: auto !important;
}

.navBar .modal-dialog input {
    /* keep filename input from extending past edge of dialog */
    width: 97% !important;
}

.navBar .modal-dialog .tabbed-panel .buttons {
    /* buttons should be flush right in the dialog */
    position: relative;
    float: right;
}

.navBar .sc-view {
    color: white;
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 10pt;
}

.navBar-version {
    font-size: 9pt;
}

.navBar-status {
    font-size: 9pt;
}

.doc-title {
    text-align: left;
    font-weight: bold;
    cursor: text;
    padding-left: 3px;
}

.doc-title:hover {
    text-decoration: underline;
}

.right-side .sc-view {
    font-size: 9pt;
    color: rgba(255,255,255,0.5);
}

.draggable {
    cursor: move;
}

.dg-inspector-view{
    background-color: #01879E;
    border-radius: 6px;
    z-index: 100000;
}

.inspector-cover {
    background-color: rgba(255, 255, 255, 0.8);
}

.dg-inspector-palette [class^="moonicon-"], .dg-inspector-palette [class*=" moonicon-"] {
    color: white;
}

.dg-inspector-picker .sc-view.dg-inspector-input {
    background-color: white;
}

.dg-inspector-picker .sc-view{
    background-color: rgba(231, 231, 231, 0.70);
}

.dg-inspector-map-color-controls {
    left: 20px !important;
}

.dg-graph-pointSize-slider {
    /*right: 25px !important;*/
}

.dg-map-pointSize-slider {
    right: 25px !important;
}

.dg-inspector-picker-title {
    border-bottom: solid #C1C5C7 1px !important;
    padding-left: 3px;
    padding-top: 6px;
}

.dg-inspector-picker .dg-inspector-picker-icon {
    background-color: #01879E;
    padding: 4px 5px 5px 5px;
}

.dg-inspector-picker-tag {
    padding-left: 6px;
    padding-top: 5px;
}

.dg-inspector-picker-select {

}

.dg-inspector-picker-color {
    background-color: #0066bb;
}

.dg-inspector-layer-title {
    border-bottom: solid #C1C5C7 1px !important;
    font-weight: bold;
}

.dg-inspector-radio {
    padding-left: 24px;
}

.dg-inspector-textentry {
    background: white;
}

.dg-inspector-textentry input{
    background: white;
    border: thin solid gray;
    padding: 2px;
}

.dg-insert-cases-dialog .sc-view.inspector-input {
    background-color: white;
}

.dg-insert-cases-dialog .sc-view{
    background-color: rgba(231, 231, 231, 0.70);
}

.dg-insert-cases-dialog .dg-inspector-picker-icon {
    background-color: #01879E;
    padding: 4px 5px 5px 5px;
}

.ace.menu .panel-background {
    pointer-events: none;
}

.ace.menu .sc-menu-item.focus span, .ace.menu .sc-menu-item a:hover span {
    color: #79B2BC;
    text-decoration: underline;
}

.ace.menu .sc-menu-item.focus, .ace.menu .sc-menu-item a:hover {
    background-image: none;
    text-shadow: none;
}

.ace.menu .sc-menu-item.disabled a:hover span, .ace.menu .sc-menu-item.disabled.focus a:hover span {
    text-decoration: none;
}

/* visible in selected components */
.dg-component-view {

    .dg-component-resize-handle-interior {
        visibility: hidden;
    }

    &.dg-component-view-selected {
        overflow: visible;

        .dg-component-container {
            overflow: visible;

            .sc-split-view {
                overflow: visible;
            }
        }

        .dg-component-resize-handle-interior {
            visibility: visible;
            background-image: static_url('images/se_corner_handle.svg');
            z-index: 9999;

            &:active {
                background-image: static_url('images/se_corner_handle-hi.svg');
            }
        }

        .dg-floating-plus {
            visibility: visible;
            opacity: 0.5;
            cursor: pointer;
        }

        .dg-floating-plus:hover {
            opacity: 1;
        }

        .dg-floating-button-right {
            visibility: visible;
        }

    }

    .sc-scroller-view {
        z-index: 1;
    }
}

/* only show hover effect on mouse devices that support hover */
/* avoids bugs related to iOS Safari's simulated hover effects */
@media(hover: hover) and (pointer: fine) {
    .dg-component-view.dg-component-view-selected .dg-component-resize-handle-interior:hover {
        background-image: static_url('images/se_corner_handle-hi.svg');
    }
}

/* hidden in selected components when explicitly disabled */
/*
.dg-component-view-selected .dg-floating-plus.disabled {
    visibility: hidden;
}
*/

/* hidden in unselected components */
.dg-floating-plus {
    visibility: hidden;
}

/* hidden in unselected components */
.dg-floating-button-right {
    visibility: hidden;
}

.CodeMirror {
    font-size: 14px;
}

.CodeMirror-hints {
    z-index: 101;
}

.CodeMirror pre.CodeMirror-placeholder {
    color: #888;
}

/* unmatched identifiers */
.cm-variable {
    color: black;
}

/* unmatched function names */
.cm-function {
    color: black;
}

/* matched special values (e.g. caseIndex) */
.cm-variable.codap-Special {
    color: red;
}

/* matched global values (e.g. sliders) */
.cm-variable.codap-Globals {
    color: maroon;
}

/* matched constants (e.g. e, pi) */
.cm-variable.codap-Constants {
    color: teal;
}

/* matched attributes */
.cm-variable.codap-Attributes {
    color: magenta;
}

/* matched functions */
.cm-function.codap-Functions {
    color: blue;
}

/*
  Adapted from https://jqueryui.com/resources/demos/autocomplete/maxheight.html
 */
.ui-autocomplete {
    /* max-height: 3000px; */
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

/*
  Adapted from autocomplete example at http://jqueryui.com/autocomplete/#categories
 */
.ui-autocomplete-category {
    font-style: italic;
    font-weight: bold;
    list-style: none;
    padding: .2em .4em;
    margin: .4em 0 .2em;
    line-height: 1;
}

.ui-menu.ui-autocomplete .ui-menu-item {
    list-style: none;
}

/*
  Apply background color to active (focused) menu item
 */
.ui-menu .ui-menu-item-wrapper.ui-state-active {
    background: #DDDDDD;
}

.dg-drag-label {
    font-family: Montserrat-Regular !important;
    font-size: 14px !important;
    color: black;
    background-color: lightblue !important;
    text-align: center;
}

.dg-data-dot {
    /*stroke: white;*/
    /*stroke-opacity: 0.6 !important;*/
    /*fill: #e6805b;*/
    /*opacity: 0.85 !important;*/
    pointer-events: all;
}

.dg-data-dot:hover {
    stroke: #a35b3a !important;
}

.dg-data-dot-selected {
    fill: #1a7a93 !important;
    stroke-width: 1 !important;
    pointer-events: all;
}

/* data dot with variable fill color */
.dg-data-dot-colored {
    /*
    opacity: 0.85 !important;
    stroke: white !important;
    */
    pointer-events: all;
}

.dg-data-dot-colored-selected {
    stroke: red !important;
    stroke-width: 2 !important;
    stroke-opacity: 1 !important;
    pointer-events: all;
}

.dg-movable-line-handle {
    display: none;
}

.dg-equationview {
    background-color: yellow;
    opacity: 60%;
    padding: 3px;
    cursor: move;
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
}

.dg-equationview p {
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 12px;
}

.dg-equationview p sup {
    vertical-align: super;
}

.dg-equationview-opaque {
    opacity: 100%;
}

.dg-component-view-selected .dg-movable-line-handle {
    display: initial;
}

.dg-axis-view {
    font-family: Montserrat-Regular;
    background-color: #F9F9F9;
}

.dg-axis-tick-label {
    font-family: Montserrat-Regular !important;
}

.dg-binned-axis-label {
    cursor: pointer;
}

.dg-axis-cell-label-y {
    cursor: static_url('cursors/TranslateY.cur') 8 8, auto;
}

.dg-axis-cell-label-x {
    cursor: static_url('cursors/TranslateX.cur') 8 8, auto;
}

.dg-axis-dot {
    opacity: 0.85 !important;
    cursor: pointer;
}

.dg-axis-label {
    font-family: Montserrat-Regular !important;
    /*fill: blue;*/
    cursor: pointer;
    font-size: 14px !important;
    text-decoration: underline !important;
}

.dg-axis-label-empty-graph {
    font-family: Montserrat-Regular !important;
    cursor: pointer;
    font-size: 12px !important;
    fill: #999999;
    text-decoration: underline !important;
}

.dg-data-strip {
    opacity: 0.85 !important;
    stroke-width: 0px !important;
    fill: #315B7D;
}

.dg-data-strip:hover {
    fill: red !important;
}

.dg-data-strip:active {
    fill: red !important;
}

.dg-data-strip-selected {
    fill: red !important;
}

/* data strip with variable fill color */
.dg-data-strip-colored {
    opacity: 0.85 !important;
    stroke-width: 0px !important;
}

.dg-data-strip-colored-selected {
    stroke: black !important;
    stroke-width: 2 !important;
}

.dg-data-tip {
    stroke-width: 1 !important;
    stroke: yellow !important;
    fill: #FBFBB0 !important;
}

.dg-data-tip-shadow {
    stroke-width: 2 !important;
    stroke: #7A7452 !important;
    opacity: 0.7 !important;
}

.dg-data-tip-text {
    text-align: left !important;
    font-size: 100% !important;
}

.dg-legend-view {
    background-color: rgb(249, 249, 249);
    z-index: unset !important;
}

.legend-key {
    opacity: 0.85 !important;
    stroke: #315B7D !important;
    cursor: pointer;
}

.legend-key-selected {
    stroke: black !important;
    stroke-width: 2px !important;
}

.legend-key:hover {
}

.legend-key-name {
    cursor: pointer;
}

.dg-number-toggle {
    background-color: #F9F9F9;
}

.dg-choro-rect {
    cursor: pointer;
}

.sc-view.component-border {
    border: 1px white solid;
}

.dg-component-view {
    /*background-color: #f0f0f0;*/
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
    border-radius:6px;
}

.dg-component-view .dg-titlebar .dg-version-view {
    cursor: grab;
}

.dg-component-view .dg-titlebar .dg-minimize-view,
.dg-component-view .dg-titlebar .dg-close-view  {
    cursor: pointer;
}

.dg-component-view-selected {
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.25);
}

.dg-component-view-staging {
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.40);
}

.dg-opaque {
    background-color: white;
}

.dg-scrollable {
    overflow: scroll;
}

.dg-titlebar {
    background-color: #72bfca;
    border-top-right-radius:6px;
    border-top-left-radius:6px;
    color: white;
    z-index: 99;
}

.dg-titlebar-selected {
    background-color: #177991;
}

.dg-titlebar:hover {
    text-decoration: underline;
}

.dg-min-icon:before {
    font-family: 'icomoon';
    content: "\7a";
}

.dg-min-icon {
    font-size: 4px;
    color: lightgrey;
    text-align: center;
    background-color: #72bfca;
}

.dg-min-icon-selected {
    background-color: #177991;
}

.dg-min-icon:hover {
    top: 8px !important;
    font-size: 6px;
    color: white;
}

.dg-min-icon:active {
    color: darkgray;
}

.dg-close-icon:before {
    font-family: 'icomoon';
    content: "\79";
}

.dg-close-icon {
    font-size: 12px;
    color: lightgrey;
    text-align: center;
    background-color: #72bfca;
}

.dg-close-icon-selected {
    background-color: #177991;
}

.dg-close-icon:hover {
    top: 2px !important;
    font-size: 16px;
    color: white;
}

.dg-close-icon:active {
    color: darkgray;
}

.dg-undo-icon:before {
    font-family: 'icomoon';
    content: "\61";
}

.dg-undo-icon {
    top: 2px !important;
    font-size: 16px;
    color: white;
    text-align: center;
}

.dg-undo-icon:hover {
    top: 1px !important;
    font-size: 18px;
}

.dg-undo-icon:active {
    color: black;
}

.dg-redo-icon:before {
    font-family: 'icomoon';
    content: "\62";
}

.dg-redo-icon {
    top: 2px !important;
    font-size: 16px;
    color: white;
    text-align: center;
}

.dg-redo-icon:hover {
    top: 1px !important;
    font-size: 18px;
}

.dg-redo-icon:active {
    color: black;
}

.dg-card-icon:before {
    font-family: 'icomoon';
    content: "\32";
}

.dg-card-icon {
    top: 2px !important;
    font-size: 16px;
    color: white;
    text-align: center;
    cursor: pointer;
}

.dg-card-icon:hover {
    top: 1px !important;
    font-size: 18px;
}

.dg-card-icon:active {
    color: black;
}

.dg-card-deselect {
    background-image:  static_url('images/circle-deselect.svg');
    background-size: cover;
    height: 16px;
    width: 16px;
    margin-right: -1px;
    background-color: transparent;
    border-color: transparent;
    border-width: 0;
    vertical-align: middle;
    cursor: pointer;
}

.dg-card-deselect:hover {
    background-image:  static_url('images/circle-deselect-hover.svg');
}

.dg-card-deselect:disabled {
    background-image:  static_url('images/circle-deselect-disabled.svg');
}

.dg-table-icon:before {
    font-family: 'icomoon';
    content: "\31";
}

.dg-table-icon {
    top: 2px !important;
    font-size: 16px;
    color: white;
    text-align: center;
    cursor: pointer;
}

.dg-table-icon:hover {
    top: 1px !important;
    font-size: 18px;
}

.dg-table-icon:active {
    color: black;
}

.dg-play-icon:before {
    font-family: 'icomoon';
    content: "\4A";
}

.dg-play-icon {
    font-size: 14px;
    color: #2da343;
    text-align: center;
}

.dg-play-icon:hover {
    top: 2px !important;
    font-size: 16px;
    color: green;
}

.dg-play-icon:active {
    color: darkgreen;
}

.dg-pause-icon:before {
    font-family: 'icomoon';
    content: "\59";
}

.dg-pause-icon {
    font-size: 14px;
    color: #b55414;
    text-align: center;
}

.dg-pause-icon:hover {
    top: 2px !important;
    font-size: 16px;
    color: darkred;
}

.dg-pause-icon:active {
    color: red;
}

.dg-thumb-icon:before {
    font-family: 'icomoon';
    content: "\5a";
}

.dg-thumb-icon {
    font-size: 40px;
    color: #999;
    text-align: center;
}

.dg-thumb-icon:hover {
    /*top: -2px !important;*/
    /*font-size: 48px;*/
    color: #555;
}

.dg-thumb-icon:active {
    color: #555;
}

.dg-slider-marker {
    background-color:#888;
}


[class^="tile-icon-"], [class*=" tile-icon-"] {
    font-family: 'icomoon';
    font-size: 15px;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    padding-left: 15px;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tile-icon-table:before {
    content: "\31";
}
.tile-icon-card:before {
    content: "\32";
}
.tile-icon-graph:before {
    content: "\33";
}
.tile-icon-dataTool:before {
    content: "\32";
}
.tile-icon-calc:before {
    content: "\36";
}
.tile-icon-slider:before {
    content: "\35";
}
.tile-icon-map:before {
    content: "\34";
}
.tile-icon-comment:before {
    content: "\e609";
}
.tile-icon-mediaTool:before {
    content: "\37";
}
.tile-icon-guide:before {
    content: "\64";
}
.dg-titleview {
    cursor: text;
    text-align: center;
    vertical-align: middle;
    top: 4px !important;
    height: 15px;
    font-size: 12px !important;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
    margin-right: auto;
}

.dg-titlebar:hover .dg-titleview-empty {
    border-bottom-color: white;
    border-bottom-width: 2px;
    width: 30px !important;
}

.dg-status-view {
    color: white;
    top: 4px !important;
    height: 15px;
    font-size: 12px !important;
}

.sc-view .function-table-view {
    background-color: #FFFFFF;
}

/* Function Table formula entry input */
.function-table-formula-entry {
    width: 220px
}

/* Function Table result header cell */
.function-table-result {
    width: 100px
}

/* Function Table data row */
.function-table-data {
    text-align: right
}

/* Function Table data entry cells */
.function-table-text-entry {
    width: 75px
}

body.dg .sc-view.dg-doc-background {
    background: static_url('images/bg-grid-grey.png');
}

.sc-main {
    font-family: 'MuseoSans-500', sans-serif;
}

.sc-view {
    font-family: 'MuseoSans-500', sans-serif;
}
.sc-view.toolshelf-background {
    /*background: static_url('images/toolshelf.png') repeat-x center top !important;*/
    background-color: #ececec;
    border-bottom: 1px solid #dcdbd8;
}

.dg-icon-buttons {
    background-color: white;
    box-shadow: 0 0 0 1px #888888;
}

.sc-view.dg-icon-button {
    cursor: pointer;
    text-align: center;
    line-height: 1;
}

.sc-view.dg-toolshelf-button:hover {
    box-shadow: 1px 1px 1px 0 #888888;
}

.sc-view.dg-toolshelf-button:active {
    box-shadow: 1px 1px 0 1px #888888;
}

.sc-view.dg-toolshelf-button:disabled {
    box-shadow: none;
}

.icon-cover {
    background-color: rgba(10, 121, 146, 0.49);
}

.sc-view.showText {
    opacity: 0;
    background-color: #e6b036;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 5px 5px 3px #888888;
}

.sc-view.showText:hover {
    background-color: yellow;
}

.sc-segmented-view {
    z-index: inherit;
}

.sc-menu-item img {
    left: 16px;
    width: 16px;
}

.dg-map-layer {
    pointer-events: none;
}

.dg-map-marquee {
    background-image:  static_url('images/map_marquee_icon.png');
    background-size: cover;
    cursor: pointer;
}

.dg-map-marquee-selected {
    background-image:  static_url('images/map_marquee_icon_selected.png');
    background-size: cover;
    cursor: pointer;
}

.dg-marquee-mode {
    cursor: crosshair;
    background-color: rgba(0, 0, 0, 0.01);
    pointer-events: all;
}

.dg-plot-view {
    /*background-color: white;*/
}

.dg-plot-view-transparent {
    background-color: transparent !important;
}

.dg-graph-view {
}

.dg-graph-drop-frame {
    stroke-width: 3;
    stroke: #ffd080;
    stroke-opacity: 0.6;
}

.dg-graph-drop-frame-fill {
    fill: yellow;
    fill-opacity: 0.3;
}

.dg-graph-drop-plus-fill {
    fill: yellow;
    fill-opacity: 0.9;
}

.dg-graph-drop-multi-background {
    background-color: yellow;
}

.dg-graph-drop-hint {
    font-size: 14px !important;
}

.dg-graph-drop-box {
    fill: white;
    stroke-width: 0;
}

.graph-multi-hint {
    background-color: #d3d3d3;
}

.dg-graph-adornment-count tspan {
    font-family: 'Montserrat-Regular', sans-serif;
    font-weight: lighter;
}

.dg-graph-adornment tspan {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 12px;
    font-weight: lighter;
}

.dg-graph-adornment-movable {
    stroke: steelblue;
    fill: steelblue;
}

.dg-selected-info-view {
    background-color: #F9F9F9;
    padding-left: 5px;
}

.dg-movable-shaded {
    fill: steelblue;
    stroke-opacity: 0;
}

.dg-plotted-value {
    stroke: green;
    stroke-opacity: 1;
    stroke-width: 1.5px;
}

.dg-plotted-value-background {
    stroke: white;
    stroke-opacity: 0.6;
    stroke-width: 3px;
}

.rescale-button {
    background-image: static_url('images/rescale.png');
    cursor: pointer;
}

.rescale-button:hover {
    background-color: #dada00;
}

.rescale-button:active {
    background-color: gray;
}

#export_case_data_prompt {
    font-weight: bold;
    text-align: right;
    line-height: 22px;
}

#formula_object {
    background-color: white;
    top: 0;
    bottom: 10px;
    left: 0;
    right: 10px;
    padding: 5px;
}

#formula_object p {
    margin-bottom: 7px;
}

#formula_object {
    p, em {
        font-size: 14px;
    }
}

#formula_object h2 {
    font-weight: bold;
    font-size: 16px;
}

#formula_object em {
    font-weight: bold;
    font-style: italic;
}

#formula_object table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

#formula_object {
    th, td {
        padding: 5px;
        font-size: 14px;
    }
}

#formula_object {
    table, th, td {
        border: 1px solid gray;
    }
}

#formula_object th {
    font-weight: bold;
    text-align: center;
}

#formula_object textarea {
    width: 100%;
}

#formula_object input {
    width: 100px;
}

.slick-row-resizer {
    position: absolute;
    width: 35px;    // width of index column
    cursor: row-resize;
    z-index: 1;
}

/* used by DG.CaseTableCellEditor */
input, textarea {
    &.dg-editor-text {
        width: 100%;
        height: 100%;
        border: 0;
        margin: 0;
        background: transparent;
        outline: 0;
        padding: 0;
        overflow: hidden;
        resize: none;
    }
}

.dg-file-import-view {
    background-color: transparent;
}

.dg-file-import-view.focus {
    outline: none !important;
}

.dg-alert, .dg-alert textarea {
    color: red;
}

.dg-guide-alert {
    color: red;
    font-size: 10px !important;
    background-color: lightyellow;
}

.sc-label-view.ellipsis {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -o-text-overflow: ellipsis !important;
    -ms-text-overflow: ellipsis !important;
}

.disabled {
    opacity: .5;
}

.invisible {
    opacity: 0;
}

.sc-text-field-view.inline-editor {
    z-index: 20;
}

.dg-example-name{
    font-weight: bold;
    color: #E75204;
}

.sel .dg-example-name {
    color: inherit;
}

.dg-table-drop-target {
    background-color: white;
    width: 30px;
}

.dg-table-drop-target .sc-label-view {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.dg-table-drop-target .sc-label-view:lang(zh) {
    transform: rotate(0deg);
}

.dg-table-drop-target.dg-table-drop-target-show .sc-label-view {
    outline: 4px solid #ffe4b3;
}

.dg-table-drop-target-show .slick-header{
    border-top: medium #ffe4b3 solid;
    border-bottom: medium #ffe4b3 solid;
}

.dg-table-drop-target-highlight  .sc-label-view {
    background-color: #ffffb3;
}

.slick-header-column.drag-hover {
    background-color: yellow;
}

.slick-header-column.drag-insert-left {
    border-left-color: yellow;
    border-left-style: solid;
    border-left-width: thick;
}

.slick-header-column.drag-insert-right {
    border-right-color: yellow;
    border-right-style: solid;
    border-right-width: thick;
}

.dg.ace.dg-split-divider {
    z-index: 0;
    background: transparent;
    border: 0;
}

.dg.ace.dg-table-drop-target svg image.expand:hover,
.dg.ace.dg-table-drop-target svg image.collapse:hover {
    cursor: pointer;
}

@keyframes pulse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.20;
    }
}

.sc-view.dg.dg-web-view-backdrop {
    background-color: white;
    transform: rotate(-30deg) translateY(35%) ;
}
.sc-view.dg.dg-web-view-backdrop .dg-web-view-url {
    text-align: center;
    color: white;
    text-shadow: -1px -1px 0 #888, 1px -1px 0 #888, -1px 1px 0 #888, 1px 1px 0 #888;
    font-size: x-large;
}
.sc-view.dg.dg-web-view-backdrop .dg-web-view-message {
    color: gray;
    font-size: smaller;
    text-align: center;
}
.sc-view.dg.dg-web-view-backdrop.dg-interactive-loading {
    animation-direction: alternate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: pulse;
}
.sc-view.dg.dg-interactive-connected .dg-web-view-backdrop {
    visibility: hidden;
}

  /*Overrides for Spectrum */
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "MuseoSans-500", sans-serif !important;
}
.sp-replacer {
    border-color: #c6c6c6 !important;
}

.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #888888 !important;
}

.sp-container {
    border: solid 1px #cccccc !important;
}

.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: #888888 !important;
}

.dg-text-measurer {
    position: fixed;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
    top: -1000px;
    left: -1000px;
}

.dg-formula-column {
    background-color: rgba(256, 256, 0, 0.2);
}

.slick-row:not(.dg-collapsed-row) .slick-cell.dg-index-column {
    cursor: pointer;
}

.slick-row.dg-proto-row .slick-cell.dg-index-column {
    cursor: grab;
}

.slick-row.dg-proto-row.drag-preview .slick-cell {
    cursor: grabbing !important;
}

.slick-resizing-row {
    .slick-row:not(.dg-collapsed-row) .slick-cell.dg-index-column {
        cursor: row-resize;
    }
}

.slick-row.even .slick-cell.dg-index-column {
    background-color: #EEFEE3;
}

.slick-row.odd .slick-cell.dg-index-column {
    background-color: #D3E9C8
}

.slick-row.dg-proto-row {
    .slick-cell {
        &.dg-index-column {
            background-color: #bddfdf;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            img {
                position: absolute;
                width: 18px;
                height: 18px;
                margin-left: -7px;
                margin-top: 1px;
            }
        }
        height: calc(100% - 7px);
        border-top: 1.5px solid silver;
        border-bottom: 2px solid silver;
        &.active.editable {
            border-top: 1.5px solid transparent;
            border-color: silver;
        }
    }
    &.drag-source {
        opacity: 0.3;
    }
    &.drag-preview {
        z-index: 10;
        opacity: 0.7;
        cursor: grabbing !important;
    }
}

.slick-row {
    &.drag-hilite {
        .slick-cell {
            background-color: #ffffb3 !important;
        }
    }
}

html.dg-embedded-mode .sc-main, html.dg-embedded-mode .dg-doc-background {
    background: transparent!important;
}

/*
   Fix for embedded mode. Header menu is placed at end of document so not within
   codap cascade.
 */
html.dg-embedded-mode .slick-header-menu  .slick-header-menuitem{
    font-family: 'Montserrat-Regular', sans-serif ;
    font-size: 12px;
    color: #000;
}

html.dg-embedded-mode .sc-pane.sc-view.dg {
    color: #000;
    font-size: 12px;
    font-family: MuseoSans-500;
}

html.dg-embedded-mode .dg-data-tip-text {
  color: #000;
  font-size: 10px!important;
  font-family: MuseoSans-500;
}

/*.sc-view img.dg-trash-icon {*/
    /*position: absolute;*/
    /*right: 10px;*/
    /*top: 2px;*/
    /*width: 16px;*/
    /*left: unset;*/
/*}*/

.dg-right-icon {
    right: 6px;
    position: absolute;
}

.dg-trash-icon:before {
    font-family: 'icomoon';
    font-size: 12px;
    content: "\e629";
    color: black;
}

.slick-multiline-cells .slick-cell {
  display: -webkit-box;
  // https://css-tricks.com/almanac/properties/l/line-clamp/
  // -webkit-line-clamp value set dynamically in code
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow-wrap:break-word;
}
.slick-cell .dg-index {
    width: 100%;
    text-align: center;
    display: block;
}
.slick-cell .dg-numeric {
    width: 100%;
    text-align: right;
    display: block;
    font-variant-numeric: tabular-nums;
}

.slick-cell .dg-date {
    width: 100%;
    text-align: right;
    display: block;
}

body.windows .slick-row .slick-cell:last-of-type {
    padding-right: 17px;
}

/*!
 * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/)
 */

img.flag {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: static_url('flags.png') no-repeat;
}

.dg.menu img.flag {
    /*left:4px;*/
    top:0;
}

.dg.rightSide .dg.dg-icon-button label{
    background: #005060;
    padding: 2px 0;
}

.menu.dg-locales-menu .sc-menu-item {
    top:0;
}

.menu.dg-locales-menu {
    padding-left: 0;
}

/* Adjustments for greek language */
.dg:lang(el) .sc-theme .sc-list-view.sc-source-list .sc-list-item-view.sc-group-item,
.dg:lang(el) .alert-dialog .buttons button,
.dg:lang(el) .confirm-dialog .buttons button,
.dg:lang(el) .download-dialog .buttons a,
.dg:lang(el) .download-dialog .buttons button,
.dg:lang(el) .document-store-auth .document-store-footer button,
.dg:lang(el) .google-drive-auth .google-drive-footer button.tabbed-panel .workspace-tab-component .dialogTab .buttons a,
.dg:lang(el) .menu-bar .menu-bar-file-status-alert,
.dg:lang(el) .modal .modal-content .modal-dialog .modal-dialog-wrapper .modal-dialog-title,
.dg:lang(el) .modal .modal-content .modal-dialog .modal-dialog-wrapper .modal-dialog-blocking-message button,
.dg:lang(el) .rename-dialog .buttons button,
.dg:lang(el) .share-dialog .share-button button,
.dg:lang(el) .share-dialog .buttons button,
.dg:lang(el) .tabbed-panel .workspace-tab-component .dialogTab .buttons button,
.dg:lang(el) .tabbed-panel .workspace-tab-component .dialogTab .buttons a
{
    text-transform:none;
}

.dg.resize-handle {
	background-image: static_url('images/se_corner_handle.svg');
	cursor: se-resize;
}

.sc-pane.sc-modal.for-sc-panel {
  cursor: wait;
}

