/* This should contain base global styles (i.e. Header styles etc.) */

html {
    overflow-y: scroll;
}

.clear_both {
    clear: both;
}

#page {
    font-size: 13px;
    color: #4d4d4d;
    margin: 0;
}

#content {
    margin: 10px auto;
    width: 964px;
    position: relative;
}

body {
    background-color: #f5f5f4;
}

body, div, th, td, p {
    font-family: Arial, Helvetica, Meiryo, “メイリオ”, “MS PGothic”, “ＭＳ Ｐゴシック”, “Hiragino Kaku Gothic Pro”, “ヒラギノ角ゴ Pro W3”, “Microsoft Yahei”, “微软雅黑”, SimSun, 宋体, STXihei, “华文细黑”, Dotum, sans-serif;
}

img {
    border: none;
}

a:link,
a:visited,
a:active {
    text-decoration: none;
    color: #626262;
}

a:link:hover,
a:link:focus {
    text-decoration: underline;
    color: #626262;
}

/* Not a:link because these might be javascript-triggered clicks (show/hide) instead of links */
.see_more a,
a.see_more,
.see_more a:visited,
a.see_more:visited,
.see_more a:active,
a.see_more:active {
    text-decoration: underline;
}
.see_more a:hover,
a.see_more:hover,
.see_more a:focus,
a.see_more:focus {
    text-decoration: none;
}

p {
    margin: 0.4em 0;
    padding: 0.1em;
}

ul {
    list-style: none;
    padding: 0;
}

input.submit {
    font-size: 11px;
}

div.contain_floats {
    /*
        <div class='contain_floats'>
            <div style='float: left'>Foo</div>
            <div style='float: left'>Bar</div>
            <div style='float: left'>Baz</div>
        </div>
        <div>Bang</div>

        See final example here:
        http://stackoverflow.com/questions/9943503/why-does-css2-1-define-overflow-values-other-than-visible-to-establish-a-new-b/11854515#11854515
    */
    overflow: hidden;
    height: auto;

    zoom: 1; /* IE6 */
}

label > input + span{
    vertical-align: middle;
}

/* ==================== Alert messages */
/*
    <div class='warning alert_message'>
        You should not do this foo bar baz
    </div>
*/
.alert_message,
.alert_info,
.alert_popout > div{
    padding: 7px 5px 7px 27px;
    font-family: arial;
    font-weight: bold;
    font-size: 12px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
    margin: 0;
}

.alert_popout .alert_header {
    background-color: transparent !important;
    cursor: pointer;
    text-decoration: underline;
}

.alert_popout .alert_body {
    background-image: none !important;
    padding-left: 5px;
    display: none;
}

.alert_message ul {
    list-style: disc inside;
    margin-left: 16px;
    font-weight: normal;
    padding: 0;
}
.info_link {
    cursor: pointer;
    color: #8e8e8e;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    display: inline;
    background: url('/static/spreadsheet_editor/images/info-icon.png');
    background-repeat: no-repeat;
    padding-left: 18px;
    margin-left: 8px;
}
.alert_info {
    background-image: url("/static/images/alert_info.gif");
}
.alert_message.info {
    background-image: url("/static/images/alert_info.gif");
    background-color: #D9E6F2;
    color: #0062BA;
}
.alert_message.warning {
    background-image: url("/static/images/alert_warning.gif");
    background-color: #FEE3C9;
    color: #FF7E00;
    padding-left: 31px; /* This image is wider than the others */
}
.alert_message.success {
    background-image: url("/static/images/alert_success.gif");
    background-color: #E2FAC8;
    color: #67A343;
}
.alert_message.error {
    background-image: url("/static/images/alert_error.gif");
    background-color: #FFDEDE;
    color: #FF0000;
}
/* ==================== /Alert messages */

/* Other common styles */

.submit_button {
    cursor: pointer;
    background-color: #67A226;
    padding: 4px 11px;
    border: 0px;
    border-bottom: 2px solid #447C06;
    color: white;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, "Hei Ti", "MS Yahei", Meiryo, Dotum, sans-serif;
}

a.submit_button:hover,
a.submit_button:visited,
a.submit_button:visited:hover,
a.submit_button:link,
a.submit_button:link:hover {
    color: white;
}

.cancel_button {
    cursor: pointer;
    background-color: #e7e7e2;
    padding: 4px 11px;
    border: 0px;
    border-bottom: 2px solid #c6c6c6;
    color: #8D8D8B;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, "Hei Ti", "MS Yahei", Meiryo, Dotum, sans-serif;
}

.action_button {
    /* These are the blue buttons that change the page without actually submitting anything */
    cursor: pointer;
    background-color: #1EA8E1;
    padding: 4px 11px;
    border: 0px;
    border-bottom: 2px solid #0881B3;
    color: white;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, "Hei Ti", "MS Yahei", Meiryo, Dotum, sans-serif;
}

/*******************************************/

/* ==================== Confirmation messages */
/*
    Meant to be paired with Alert Messages & Confirmation Button CSS above.  Example:

    <div class="nice_confirmation_dialog">
        <div class='alert_message warning'>
            Title
        </div>
        <div class="message">
            Main Message
        </div>
        <div class="actions">
            <input class="submit_button" type="submit" value="Delete">
            <input class="cancel_button" type="submit" value="Cancel">
        </div>
    </div>

*/
.nice_confirmation_dialog {
    position: absolute;
    background: #fff;
    border: 1px #c6c6c6;
    box-shadow: 0px 4px 7.76px .24px rgb(158,158,158);
    text-align: left;
}

.nice_confirmation_dialog.share_dialog_confirm {
    position: relative;
    display: block;
}

.nice_confirmation_dialog div.message,
.nice_confirmation_dialog div.actions {
    padding: 0px 28px;
}

.nice_confirmation_dialog .header {
    font-weight: bold;
    color: #ff7e00;
    background-color: #fee3c9;
    padding-top: 4px;
    padding-bottom: 4px;
}

.nice_confirmation_dialog .message {
    margin-top: 11px;
    color: #7b7b7b;
}

.nice_confirmation_dialog .actions {
    margin-top: 12px;
    margin-bottom: 12px;
}

/* ==================== /Confirmation messages */

/* ==================== Popup-dropdowns */

/*
    Use with the setup_dropdown_link() util JS.

    <div class='dropdown'>
      <a class='toggle'>
        <span class='icon PD-download'></span>
        <span class='text'>Download</span>
      </a>
      <div class='content' style='display: none'>
        <div class='callout_arrow'></div>
        --> Your content here <--
      </div>
    </div>

*/

.dropdown {
    position: relative;
}
.dropdown > .toggle {
    cursor: pointer;
    display: inline-block;
    margin: 5px 10px 5px 5px;
}
.dropdown .text:after {
    content: "\25bc"; /* Down-pointing triangle */

    font-size: 8px;
    padding-left: 5px;
    padding-right: 2px;
    vertical-align: middle;
}
.dropdown > .toggle .icon {
    color: #B0B0B0;
    font-size: 22px;
}

.dropdown > .toggle .text {
    font-family: lato;
    font-size: 14px;
}
.dropdown > .toggle .icon,
.dropdown > .toggle .text {
    vertical-align: middle;
}

.dropdown > .toggle:hover .icon,
.dropdown.active > .toggle .icon {
    color: #5F5F5F;
}
.dropdown > .content {
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    box-shadow: 3px 3px 4px 0 #999999;
    padding: 6px 14px 12px;
    position: absolute;
    right: -10px;
    top: 37px;
    z-index: 5;
}

.dropdown > .content dt {
    margin-top: 10px;
    font-weight: bold;
}
.dropdown > .content dd {
    margin-top: 10px;
    vertical-align: top;
}

.dropdown > .content > .callout_arrow {
    position: absolute;
    right: 17px;
    top: -7px;

    background-image: url("/static/search/images/dropDownThoughtBubbleArrow.gif");
    height: 7px;
    width: 14px;
}

a.minimize_dropdown_icon {
    position: absolute;
    top: 3px;
    right: 3px;
    cursor: pointer;

    background-image: url('/static/images/MinimizeDropdown.gif');
    background-repeat: no-repeat;
    background-position: middle center;
    width: 18px;
    height: 18px;
}

a.minimize_dropdown_icon:hover {
    background-image: url('/static/images/MinimizeDropdownHover.gif');
}


.download.link {
  position: relative;
}

.download.link .linkform_button {
  cursor: pointer;
  display: inline-block;
  margin: 5px 10px 5px 5px;
  text-decoration: none;
}

.download.link .linkform_button .text {
  font-family: lato;
  font-size: 14px;
  color: #4D4D4D;
}

.download.link .linkform_button .icon {
  font-size: 22px;
  color: #B0B0B0;
}
.download.link .linkform_button .icon,
.download.link .linkform_button .text {
  vertical-align: middle;
}

.download.link .linkform_button:hover .icon,
.download.link .linkform_button:hover .text {
  color: #5E358B;
}
.linkform_button {
    background: transparent;
    border: none !important;
    outline:none;
}
/* --> Specific dropdown colors */
/*
    Awkwardness due to the icon and text intentionally being different colors above..
*/

.download.dropdown > .toggle:hover .icon,
.download.dropdown.active > .toggle .icon,
.download.dropdown > .toggle:hover .text,
.download.dropdown.active > .toggle .text,
.chart_download.dropdown > .toggle:hover .icon,
.chart_download.dropdown.active > .toggle .icon,
.chart_download.dropdown > .toggle:hover .text,
.chart_download.dropdown.active > .toggle .text {
    color: #5E358B;
}
.analysis_switch.dropdown > .toggle:hover .icon,
.analysis_switch.dropdown.active > .toggle .icon,
.analysis_switch.dropdown > .toggle:hover .text,
.analysis_switch.dropdown.active > .toggle .text {
    color: #1EA8E1;
}

#chart_options_menu .options.dropdown > .toggle:hover .icon,
#chart_options_menu .options.dropdown.active > .toggle .icon,
#chart_options_menu .options.dropdown > .toggle:hover .text,
#chart_options_menu .options.dropdown.active > .toggle .text {
    color: #1EA8E1;
}

/* ==================== /Popup-dropdowns */

/* Tooltips */

/*
    <span class="tooltip">
        Hover me
        <span>
            Raw content
        </span>
    </span>

    <span class="PD-question tooltip with_header">
        <span>
            <h6>Title</h6>
            <span>Content under title</span>
        </span>
    </span>

    Also available:
        .tooltip.top_arrow
        .tooltip.top_arrow.push_right       # To stay out of the page gutter on the left
        .tooltip.right_arrow
*/

.tooltip {
    border-bottom: 1px dotted #000000;
    outline: none;
    text-decoration: none;
    position: relative;
}

.tooltip.with_header > span > h6 {
    display: block;
    background: #F5F5F5;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.tooltip.with_header > span > span {
    padding: 15px;
    display: block;
}

.tooltip > span {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 250px;
    margin: 0 0 0 10px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);

    opacity: 0;
    visibility: hidden;
    background: #FFFFFF;
    z-index: 99;
    padding: 15px;

    border: 1px solid #E1E1E0;
    border-radius: 10px;
    box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 2px 6px 6px rgba(0, 0, 0, 0.2);

    font-family: Arial, Helvetica, "Hei Ti", "MS Yahei", Meiryo, Dotum, sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: black;

    /*  The .5 is to fix a Chrome bug, where translateY(-50%) is half-pixel, and antialiasing
        during the fade-in causes the text to go extra blurry.  This keeps the basic tooltips
        height such that -50% is a full pixel.  */
    line-height: 16.5px;

    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
.tooltip.with_header > span {
    padding: 0;
}

/* Callout arrows */
.tooltip > span:after, .tooltip > span:before {
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
    right: 100%;
    top: 50%;
    position: absolute;
}

.tooltip > span:after {
    border-right-color: white;
    border-width: 8px;
    margin-top: -8px;
}

.tooltip > span:before {
    border-right-color: #E1E1E0;
    border-width: 9px;
    margin-top: -9px;
}

.tooltip.top_arrow > span {
    top: 100%;
    left: 50%;
    margin: 10px 0 0 0;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.tooltip.top_arrow > span:before, .tooltip.top_arrow > span:after {
    top: auto;
    right: auto;
    bottom: 100%;
    left: 50%;
}

.tooltip.top_arrow > span:before {
    border-right-color: transparent;
    border-bottom-color: #E1E1E0;
    margin-left: -9px;
}

.tooltip.top_arrow > span:after {
    border-right-color: transparent;
    border-bottom-color: white;
    margin-left: -8px;
}
.tooltip.top_arrow.with_header > span:after {
    border-bottom-color: #F5F5F5;
}

.tooltip.right_arrow > span {
    left: auto;
    right: 100%;
    margin: 0 10px 0 0;
}

.tooltip.right_arrow > span:before, .tooltip.right_arrow > span:after {
    left: 100%;
    right: auto;
}

.tooltip.right_arrow > span:before {
    border-right-color: transparent;
    border-left-color: #E1E1E0;
    margin-right: -9px;
}

.tooltip.right_arrow > span:after {
    border-right-color: transparent;
    border-left-color: white;
    margin-right: -8px;
}
/* End callout arrows */

.tooltip:hover img {
    border: 0;
    margin: -10px 0 0 -55px;
    float: left;
    position: absolute;
}

.tooltip > span p {
    padding: 0;
    margin: 0;
}

.tooltip:hover > span {
    opacity: 1;
    visibility: visible;
}

.tooltip.top_arrow.push_right > span {
    left: 0;
    transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
}
.tooltip.top_arrow.push_right span:before,
.tooltip.top_arrow.push_right span:after {
    left: 30px;
}


* html .tooltip:hover { background: transparent; }
.tooltip .classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.tooltip .critical { background: #FFCCAA; border: 1px solid #FF3334; }
.tooltip .help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.tooltip .info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.tooltip .warning { background: #FFFFAA; border: 1px solid #FFAD33; } 

/* /Tooltips */

.joyride-tip-guide .joyride-next-tip {
    background: #1EA8E1 !important;
}

/* Chosen overrides */

.chosen-container .chosen-results li.active-result {
    font-size: 13px;
    color: #5f5f5f;
}
.chosen-container .chosen-results li.active-result.highlighted {
    background: none repeat scroll 0 0 #F5F5F5; /* Note:  Same as select2 override below */
    color: #5f5f5f;
}

/* Select2 overrides */

.select2-chosen-1, 
.select2-no-results,
.select2-results,
.select2-input {
    font-size: 12px;
    font-family: arial;
    color: #5F5F5F;
}

.select2-no-results {
    padding-top: 1px;
    padding-bottom: 1px;
}

.select2-results li.select2-highlighted {
    background: none repeat scroll 0 0 #F5F5F5; /* Note:  Same as chosen override above */
    color: #5f5f5f;
}

/* default lightbox/overlay styling */

html.display_overlay {
    overflow: hidden;
}
#lightbox_outer_container {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: url("/gnpd/images/black-70.png");
    z-index: 1000;
    padding: 50px;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;

}

#lightbox_outer_container.hidden {
    display: none;
}

#lightbox_outer_container .lightbox_inner_container {
    background: white;
    display: inline-block;
    box-sizing: border-box;
    width: 915px;
    vertical-align: middle;
    text-align: left;
    padding: 20px;
}

.analysis_links_popup {
    width: auto !important;
}

.analysis_links li {
    border-top: 1px solid #E1E1E0;
    padding: 4px 0px;
    white-space: nowrap;
}

.analysis_links li:first-child {
    border-top: none;
}

.analysis_links li span {
    margin-right: 4px;
    vertical-align: middle;
}

.analysis_links li .link_icon {
    color: #B0B0B0;
}

.analysis_links li a:hover {
    text-decoration: none;
}

.analysis_links li a:hover span {
    text-decoration: underline;
}

.analysis_links li a:hover .link_icon {
    text-decoration: none;
}

.analysis_links li .viewing {
    color: #C1C0BF;
}

.share_link_new {
    position: absolute;
    top: -5px;
    right: 5px;
    background-color: #1ea8e1;
    color: white;
    font-size: 8px;
    min-width: 30px;
    min-height: 15px;
    text-align: center;
    border-radius: 2px;
    vertical-align: middle;
    line-height: 15px;
}

#clipboard_button {
    float: initial;
}

#share_tool img {
    right: 14px;
}

.share_dialog_confirm .success {
    display: none;
}

.copy_link input, .copy_link button {
    display:inline;
    box-sizing: border-box;
}

.copy_link input[type=text].share_link {
    width: 70%;
    font-size: 12px;
    padding: 4px;
    margin: 4px 0px 7px;
}

.share_link_spinner {
    position: relative;
    height: 60px;
    top: -5px;
}

.shared_link.dropdown > .content {
    padding: 18px 11px;
}

.copy_link button {
    width: 30%;
    background: none;
    border: 0;
    color: #00a7b8;
    font-weight: bold;
}

.copy_link > label {
    font-size: 12px;
    font-weight: bold;
    display: block;
    color: #5F5F5F;
}