body {
    height: 100%;
}

hr {
    border:none;
    border-top: 1px solid #DDD;
}

button {
    color: white;
    font-weight: 300;
    border: none;
    border-radius: 0.2em;
    cursor: pointer;
}

button, input {
    position:relative;
    overflow: visible;
}

input.type_date {
    width: 6.4em;
}

.dp__input_wrap .dp__input{
    display: none;
}

button:hover {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

.spacer {
    margin-left: 1.0em;
}

button.btn_img_s, button.btn_img_l, button.btn_manufacture_alos2_scansar{
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    display: inline-block;
}
button.btn_img_s img {
    height: 24px;
    vertical-align: middle;
    pointer-events: none;
}
button.btn_img_l img {
    height: 30px;
    vertical-align: middle;

    pointer-events: none;
}

button.btn_manufacture_alos2_scansar img {
     height: 24px;
    vertical-align: middle;
    pointer-events: none;
}

button.btn_img_s:disabled img, .btn_img_l:disabled img {
    filter: grayscale(100%) opacity(50%);
    pointer-events: none;
}

/** --- header -----------------------**/
#title_word {
    padding: 0;
    margin: 0;
    height: 2.7em;
}

#btn_login img, #account img{
    height: 24px;
    vertical-align: middle;
    margin-right: 3px;
}

#btn_login img.header_icon{
    height: 30px;
}

#account {
    max-width: 13em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/** --- Top Tools --------------------**/
#top_tools {
    box-sizing: border-box;
    height: 3.3em;
    z-index: 1;
    position: relative;
    top: 40px;
    right: 5em;
}

#top_tools #favorites {
    float:left;
}

#top_tools #map_selecter {
    padding-top: 15px;
    text-align: end;
}

#top_tools button, #top_tools input{
    padding: 0;
    height:1.7em;
}

#top_tools button {
    padding: 0 0.5em;
}

#top_tools #btn_guidance {
    float: right;
    right: 40px;
    position: relative;
}

/** --- Main --------------------**/
#main {
    box-sizing: border-box;
    position: fixed;
    margin: 0;
    left: 0;
    right:0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

#map {
    /* min-height: 100%; */
    height: 100%;
    height: -webkit-calc(100% - 5.0em);
    height: -moz-calc(100% -5.0em);
    width: 100%;
    border: solid 1px #888;
    z-index: -1;
    background-color: #888;
    position: absolute;
    top: 4.5em;
    right: 0;
}
#map div.olControlMousePosition {
    margin-bottom: 3em;
}

.guidance_title {
    color: #fff;
}

#l_menu{
    /*width: 53.4em;*/
    z-index: 999;
    /* height: 100%; */
    background-color: #0000;
    border-radius: 0 0 0.8em 0/ 0 0 0.8em 0;
    padding: 70px 20px 20px 20px;
    width: 40%;
    max-width: 530px;
    /* height: 85%; */
}

#menu_1, #menu_2, #menu_3 {
    background-color: #11111b;
    color: #fff;
    height: 100%;;
}


#l_menu_header{
    display: flex;
    justify-content: flex-end;
}

.hide{
    display:none;
}

#l_sub_menu {
    margin: 0;
    padding: 0;
    height: 100%;
}

#l_menu_splitter {
    float: right;
    top: 0;
    bottom: 0;
    /*width: 0.8em;*/
    width: 1.9em;
    height: 100%;
    min-height: 20.0em;
    /*    background-color: lightgray;*/
    background-color: #00B2A1;
    box-sizing: border-box;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    cursor: pointer;
    z-index: 1;
    border-radius: 0 0 0.8em 0/ 0 0 0.8em 0;
    display: block;
}

#close_cond {
    position: absolute;
    top: 48%;
    /*height: 0.8em;*/
    background-color : #00B2A1;
    transform : rotate(90deg);
}

#lmenu_tree, #smenu_list, #tmenu_tabs {
    display: inline-block;
    width: 100%;
    position: relative;
}

.step_title {
    box-sizing: border-box;
    height: 3.2em;
    width: 17.2em;
    margin-top: 0.1em;
    margin-right: 0.2em;
    padding: 0.4em 0.5em;
    color: white;
    float: left;
    vertical-align: middle;
    border-radius: 0.3em 0.3em 0 0 / 0.3em 0.3em 0 0;
    cursor: pointer;
}

.step_title:hover {
    background-color: gray;
}

.step_title_shadow {
    text-shadow: 0 0 0.2em yellow;
}

#step_title1 {
    background-color: black;
    margin-left: 0.2em;
}

#step_title2 {
    background-color: #444;
}

#step_title3 {
    background-color: #777;
}

#search_tabs,
#term_tabs,
#geo_tabs {
    position: relative;
    padding: .2em;
    border: 1px solid #a6c9e2;
}

#tree_sat_tab {
    position: relative;
}

#tree_py_tab,
#tree_sat_tab,
#term_date,
#term_season,
#geoRect,
#geoPoint,
#geoCircle,
#geoPoly,
#geoGlobal,
#geoName {
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
    display: block;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    color:#fff;
}

#geo_msg2,#tree_sat{
    color:#000;
}

#tree_py_tab > input,
#tree_py_tab > select,
#tree_py_tab > button,
#tree_py_tab > textarea,
#tree_sat_tab > input,
#tree_sat_tab> select,
#tree_sat_tab > textarea,
#tree_sat_tab> button{
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}

.tab_lists {
    margin: 0;
    padding: .2em .2em 0;
    color: #eaf5f7;
    font-weight: bold;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

.tab_lists::before {
    content: "";
    display: table;
    border-collapse: collapse;
    line-height: 1.3;
    font-size: 100%;
    list-style: none;
}

.tab_lists::after {
    clear: both;
    content: "";
    display: table;
    border-collapse: collapse;
}

.tab_list {
    margin-bottom: -1px;
    padding-bottom: 1px;
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    padding-bottom: 0px;
    white-space: nowrap;
    border-bottom-width: 1px;
    background: #39414A;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}

.tab_list:hover {
    background: #39414A;
    color: #fff;
}

.active_tab_list {
    border-bottom-width: 1px;
    background: #385F5C;
    font-weight: normal;
    color: #fff;
}

.active_tab_list:hover {
    background: #385F5C;
    color: #fff;
}

.disabled_tab_list {
    display: none;
}

.tree_box {
    overflow-y: scroll;
}

.tree_box table th {
    border: 1px solid #BBB;
    background-color: #CCC;
}

.tree_box table td {
    border: 1px solid #BBB;
}

#tree_py_tab > .tree_box {
    border: 1px dotted gray;
    position: relative;
}

#tree_py {
    background-color: rgb(238,238,238);
    color: #000;
    border: 1px solid #BBB;
}

#tree_sat_tab > .tree_box {
    position: relative;
    margin-right: -1.5em;
}

.tree_box > #tree_sat {
    margin-right: 1.5em;
}

.btn_search_box {
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
    padding: 0.6em;
    width:100%;
    max-width:34.6em;
}

#loading_area {
    position: absolute;
    z-index: 2001;
    width: 200px;
    height: 200px;
    background-color: black;
    border-radius: 20px;
}

#loading_icon {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

#loading_text {
    font-size: 14px;
    color: white;
    position: absolute;
    text-align: center;
    top: 80%;
    right: 0;
    left: 0;
}

#gray_panel{
    background : #000;
    opacity  : 0.7;
    width  : 100%;
    height  : 100%;
    position : fixed;
    top   : 0;
    left  : 0;
    z-index  : 2000;
}

.btn_search_box .btn_search {
    width: 100%;
    padding: 0.2em 8.0em;
    vertical-align: middle;
}

.btn_search_box img {
    vertical-align: middle;
    margin-right: 0.2em;
    height:1.8em;
}

.btn_search_box .btn_search:hover:not(:disabled) > img {
    opacity: 0.5;
}

#noselect_msg {
    padding: 0 1.4em;
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

#term_date > div, #term_season > div, #term_input {
    display: none;
    padding:0 0 0.5em 0;
}

#dates1 {
    margin-bottom: 0.3em;
}

#dates2, #dates3, #dates4 {
    display: none;
    margin-bottom: 0.3em;
}

#dates1 .li_marker, #term_input_season .li_marker {
    color: #ff8204;
}

#dates2 .li_marker {
    color: #FFFF00;
}

#dates3 .li_marker {
    color: #008204;
}

#dates4 .li_marker {
    color: #0000FF;
}

.li_marker {
    text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

.term_input_err {
    background: #ffff88;
}

.season_inputs {
    margin-bottom: 0.3em;
}

.termRemoveBtn{
    margin-left: 0.4em;
}

#add_dates {
    cursor:pointer;
    width: max-content;
}

#term_input {
    padding: 0 1.0em;
}

#term_date_error, #term_season_error {
    color:red;
    display: none;
}

#term_block {
    border-top: 1px solid #a6c9e2;
    margin-top: 0.5em;
    padding: 0.5em;
    display: none;
}

#term_scroll_area {
    position: relative;
    overflow:scroll;
    border-collapse: collapse;
    margin-bottom: 1.0em;
    min-height: 27px;
}

#term_calLbl {
    font-family:'ArialMT', 'Arial', sans-serif;
    font-size:12px;
    fill:#fff;
}

#term_svg {
    overflow: hidden;
}

#term_calLbl_svg {
    margin-bottom: -7px;
}

.term_selectRect {
    pointer-events: none;
    stroke-width: 1px;
}

#term_selectRect_1 {
    fill: rgba(255, 130, 4, 0.30);
    stroke: #ff8204;
}

#term_selectRect_2 {
    fill: rgba(256, 256, 0, 0.3);
    stroke: #FFFF00;
}

#term_selectRect_3 {
    fill: rgba(0, 130, 60, 0.3);
    stroke: #008204;
}

#term_selectRect_4 {
    fill: rgba(0, 130, 255, 0.3);
    stroke: #0000FF;
}

.seasonRect {
    fill: rgba(255, 130, 4, 0.30);
    stroke: #ff8204;
}

#prevAllowC:hover, #nextAllowC:hover, #termResetBtn:hover, #termZoomInBtn:hover, #termZoomOutBtn:hover{
    fill: rgba(70, 136, 136, 0.3);
}

#term_sats {
    font-family: 'ArialMT', 'Arial', sans-serif;
    font-size: 8px;
}

#termResetBtnTxt {
    font-family:'ArialMT', 'Arial', sans-serif;
    font-size:13px;
}


/** --- Guidance ----------------**/
#guidance {
    position: absolute;
    top: 0;
    right: 0;
    /*left: 53.4em;*/
    left: 54.5em;
    top: 10.6em;
    bottom: 0;
    background-color: white;
    z-index: 1020;
    overflow-y: scroll;
    transition: all 2s;
}

#message .info_title {
    font-size: 1.5em;
    border-bottom: 2px solid #9AF;
    margin-bottom: 1.2em;
    padding: 0.4em 0;
}

#message .into_logo {
    padding-right: 0.6em;
    float:left;
}


/** --- Results ------------------------ **/
#results {
    box-sizing: border-box;
    height: 50%;
    border: solid 1px #888;
    bottom: 0;
    right: 0px;
    left: 54.0em;
    background-color: #11111b;
    min-width: -webkit-calc(750px - 1.9em );
    min-width: -moz-calc(750px - 1.9em );
    min-width: calc(750px - 1.9em );
    margin:20px;
    position: absolute;
    z-index: 2;
}

#results_title {
    padding: 0.3em 0.5em;
    color: #fff;
}

#results_title img {
    vertical-align: middle;
    padding-top: 0.2em;
    cursor: pointer;
}

#results_title img:hover {
    opacity: 0.6;
}

#btn_updown {
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
}

.list_btns {
    padding-bottom: 3px;
    overflow: auto;
}

.list_btns button {
    padding: 0.3em 0.5em;
    margin-bottom: 0.4em;
}

/*-----------------*/



/* */
.gpr_dlg a{
    color: blue;
}

.el {
    margin: 0.6em 0.5em 0 0.5em;
    height: 2.4em;
}

.el_title {
    float:left;
    width: 15.5em;
}

.el input {
    float:left;
    width: 12.0em;
}

#cond_load_dlg #conds {
    width: calc(100% - 1.0em);
    border-collapse: collapse;
    margin:0.6em 0.5em;
}

#cond_load_dlg #conds th {
    background-color: #444450;
    color:white;
    border: 1px solid #DCDFE6;
    padding: 0.2em 0.5em;
}

#cond_load_dlg #conds td {
    border: solid 1px #6da5db;
    padding: 0.2em 0.5em;
}

#cond_load_dlg #conds td.num {
    text-align: right;
}

#cond_load_dlg #conds td.cond {
    width: 22.0em;
}

#cond_load_dlg #conds td.btn {
    text-align: center;
}


#sum_donload_dlg .selecter{
    font-size: 1.2em;
    margin-top:0.6em;
}

#sum_donload_dlg .memo{
    font-size: 0.9em;
    margin-left:1.8em;
}

.i_info, .i_gear {
    cursor: pointer;
}

.blinking {
    animation: blink 0.5s ease-in-out 5 alternate;
}

#dl_limit_dlg #dl_limit_content {
    padding-right: 0.5em;
    overflow-y: scroll;
    height:500px;
}

#dl_limit_dlg table {
    border-collapse: collapse;
    margin-bottom: 0.5em;
    width: 100%;
}

#dl_limit_dlg table th {
    color:white;
    border: 1px solid black;
    background-color: #1664AE;
}

#dl_limit_dlg table td {
    border: 1px solid black;
    padding-left: 0.5em;
    width: 25%;
}

#dl_limit_dlg .dl_max_size {
    text-align: center;
}

#dl_limit_dlg .dl_max_cnt {
    text-align: center;
}

#dl_limit_dlg .over_limit span {
    color: red;
    font-weight: bold;
}

#tree_info_dlg #tree_info_content {
    font-size: 11px;
    padding-right: 0.5em;
    overflow-y: scroll;
    max-height:400px;
    padding: .5em 1em;
}

#tree_info_dlg #tree_info_title {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 0.5em;
}

#tree_info_dlg table {
    border-collapse: collapse;
    margin-bottom: 0.5em;
    width: 100%;
}

#tree_info_dlg table thead tr {
    border-bottom: 3px double black;
}

#tree_info_dlg table thead tr {
    font-weight: bold;
}

#tree_info_dlg table th {
    border: 1px solid black;
    background-color: silver;
    width: 35%;
}

#tree_info_dlg table td {
    border: 1px solid black;
    padding-left: 0.5em;
    width: auto;
    min-width: 32.5%;
}

#tree_info_dlg #tree_info_description {
    padding-bottom: 0.5em;
}

#tree_info_dlg a {
    color: blue;
    text-decoration:under-line;
}

#tree_info_dlg ul {
    margin-top: 0.5em;
}

#tree_info_dlg ul.list_ja {
    padding-left: 2.0em;
}

#tree_info_dlg ul.list_en {
    padding-left: 1.5em;
    text-indent: -1em;
}

#tree_info_dlg ul.list_en li {
    list-style-type: none;
}

#tree_info_dlg ul.list_en li:before {
    display: inline;
    content: "* ";
}

#gear_dlg div {
    margin-bottom: 0.8em;
    max-height: 300px;
}

#gear_dlg hr {
    border-top: 1px dashed #bbb;
}

#gear_input {
    overflow-y: scroll;
}

.option_parts {
    margin: 0 10px;
}

.option_text {
    width: 4.0em;
}

.option_str_text {
    width: 90%;
}

#gear_list_dlg table {
    border-collapse: collapse;
}

#gear_list_dlg th{
    background-color: #1664AE;
    color:white;
    border: solid 1px #6da5db;
    padding: 0.2em 0.5em;
}

#gear_list_dlg td {
    border: solid 1px #6da5db;
    padding: 0.2em 0.5em;
}

.table_save {
    border-collapse: collapse;
    display: none;
}

.table_save th {
    background-color: #1664AE;
    color:white;
    border: solid 1px #6da5db;
    padding: 0.2em 0.5em;
}

.table_save td {
    padding: 0.2em 0.5em;
    text-align: center;
}

.expired {
    background: gray;
}

#details {
    border-collapse: collapse;
    width: 52.3em;
    table-layout: fixed;
    word-wrap: break-word;
}

#details th {
    background-color: #444450;
    color:white;
    border: solid 1px #fff;
    padding: 0.2em 0.5em;
    width: 35%;
}

#details td {
    border: solid 1px #979797;
    padding: 0.2em 0.5em;
    text-align: center;
    background: #eee;
}

#detail_dlg_map {
    width:440px;
    height:512px;
    margin:0 auto !important;
    border:1px solid #888;
}

@keyframes blink {
    0% { opacity: 0; background-color: #1664AE;}
    100% { opacity: 1; background-color: yellow;}
}

#message {
    font-size: 1.4em;
    padding: 1.5em 2.0em;
}

.ts_title {
    width: 100%;
    border-bottom: 1px solid #666;
    font-weight: bold;
    color: darkblue;
}

.ts_detail {
    padding: 0.5em 1.0em 1.0em 1.0em;
}

.even_row {
    background-color: #acd4e3;
}

/** --検索条件保存ダイアログ  --*/
#cond_save_dlg hr {
    border:none;
    border-top: 1px solid gray;
    clear:both;
    margin:0.5em 0;
}

#cond_save_dlg input {
    width: 26.0em;
}

/* 加工画面地図ボタン */
.olControlProcToolbar {
    margin: 5px 5px 0 0;
    right: 6px;
    top: 80px;
}
.olControlProcToolbar div {
    /*background-image: url("assets/js/lib/openlayers2/theme/default/img/editing_tool_bar.png");*/
    background-repeat: no-repeat;
    margin: 0 0 5px 5px;
    width: 24px;
    height: 22px;
    cursor: pointer;
}
.olControlProcToolbar .olControlNavigationItemInactive {
    background-image: url("img/openlayers/move_feature_off.png");
    /*background-position: -103px -1px;*/
}
.olControlProcToolbar .olControlNavigationItemActive  {
    background-image: url("img/openlayers/move_feature_on.png");
    /*background-position: -103px -24px;*/

}
.olControlProcToolbar .olControlSearchBoxItemInactive {
    background-image: url("img/openlayers/bbox_off.png");
    /*background-position: -128px -1px;*/
}
.olControlProcToolbar .olControlSearchBoxItemActive  {
    background-image: url("img/openlayers/bbox_on.png");
    /*background-position: -128px -24px;*/
}
.gpr_dlg div.olControlZoom a {
    color: white !important;
}

#placename{
    width:270px;
}

/*autocompleateにスクロールバーをつける*/
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}


/*
    TODO: 20170324 とりあえず直してみる
    ダイアログ表示したときにヘッダー部が移動してしまうのを対策　ここから
*/
body #header{
    position:fixed;
}
#top_tools{
    width:100%;
}
/*ダイアログ表示したときにヘッダー部が移動してしまうのを対策　ここまで*/

#map div.searchbox_activeimg {
    background-image: url("img/openlayers/bbox_on.png");
}

/*検索結果詳細ダイアログ*/
#detail_dlg {
    height: 600px !important;
    width: 620px;
}

#detail_dlg div.subbrowse{
    text-align: center;
    width: 52.0em;
    float: left;
    border:1px solid #888;
    max-width: 52.0em;
}

#detail_dlg .detail_btn_dl{
    float: right;
    padding: 0.3em;
    margin-top: 0.5em;
    background-color: #1664AE;
    color: white;
}
#detail_dlg .detail_btn_dl:hover{
    border: 1px solid #448dae;
    background: #79c9ec;
    color: #026890;
}

#cond_load_dlg button.autodata{
    margin-left:5px;
}

.order_stop_info{
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    color: #990033;
    background-color: #ffcccc;
    margin-left: 3em;
}

/*加工要求ダイアログ*/
input[name="netcdf_only"][value="1"]:checked ~ div {
    display: none;
}
input[name="netcdf_only"]  ~ div {
    margin-left: 1.0em;
}

#result_list, #result_thum, #result_my, #result_save, #order {
    overflow: auto;
    display: block;
    border-width: 0;
    padding: 1em 1.4em;
    background: none;
    overflow: auto;
}
#order {
    height: 430px;
}


/*******************************************
 * vue-datepicker用
 *******************************************/
.dp__main {
    width: 6.4em !important;
    display: inline-block !important;
    margin-bottom: 0.3em !important;
}
.dp__pointer {
    cursor: auto !important;
}
.dp__input_icon_pad {
    padding-left: 0 !important;
}
.dp__input {
    line-height: 0 !important;
    padding: 0.25em !important;
    color: #222 !important;
    /* font-family: Verdana,Arial,sans-serif !important; */
    font-size: 1em !important;
    border: none !important;
}

/*******************************************
 * for Tablet(1024px)
 *******************************************/

@media ( max-width: 1024px) {
    #top_tools {
        height: 6.3em;
    }

    #top_tools #map_selecter {
        padding-right:5.0em;
        padding-top: 15px;
        display: flex;
        justify-content: flex-end;
    }

    #menus div {
        font-size: 12px !important;
    }

    #map {
        height:100%;
        height: -webkit-calc(100% - 5.0em);
        height: -moz-calc(100% -5.0em);
        width:100%;
        top: 4.5em;
    }
    /** --- Guidance ----------------**/
    #guidance {
        left: 54.5em;
        top: 13.6em;
    }

}