#product_iframe.popup {
    width: 90% !important;
    height: 90% !important;
    position: fixed;
    top: 5%;
    left: 5%;
    bottom: 5%;
    background: white;
    box-shadow: 0px 0px 60px 60px #f5f5f5;
}

#iframe_product i {
    position: absolute;
    right: 10px;
    font-size: 20px;
    background: #f9f9f9;
    box-shadow: 2px 4px 8px grey;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#iframe_product i.popup {
    position: fixed;
    top: 4%;
    right: 5%;
    z-index: 1;
}

#image_zoom_control {
    position: absolute;
    right: 35px;
    bottom: 100px;
    z-index: 10;
}

#image_zoom_control i {
    display: block;
    right: 10px;
    font-size: 20px;
    background: #f9f9f9;
    box-shadow: 2px 4px 8px grey;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 2px;
}

/* =======================*/

#satellite_product > ul {
    padding-left: 10px;
}

.irisme-tree-li {
    padding-top: 5px;
}

.irisme-tree-li.unactive a, .irisme-tree-li.unactive i {
    opacity: 0.7;
}

.irisme-parent.disabled {
    opacity: 0.35;
}

.irisme-item.disabled, .irisme-parent.disabled {
    cursor: default !important;
}

.product_content{
    margin-bottom: 15px;
}

.font{
    font-size:15px;
}
/***********************left-nav*************************************/
a:hover {
    color:#333 !important;
    text-decoration: none !important;
    font-weight: bold;
}

.panel-heading {
    color: #fff !important;
    background-color: #88abda !important;
    border-color: #fff;
    font-size: 15px;
}

.panel-group{
    margin: 10px;
}

.right_buttons a {
    margin-left: 2px;
    padding: 10px 15px;
}

.right_buttons a:hover {
    color: white !important;
    font-weight: initial !important;
}

.right_buttons a#image_compare {
    padding: 7px;
}

/********content********/
.content_left{
    width: 100%;
    float: left;
    padding-top: 10px;
}

#product_div {
    text-align: center;
    width: 100%;
    overflow-y: hidden;
}

#product_div img {
    width: 100%;
}

#irisme_left {
    overflow-y: auto;
    height: calc(100% - 150px);
}

.irisme-title {
    padding: 5px 10px;
    background: #edf0d5;
    font-size: 16px;
    border-radius: 5px 5px 0px 0px;
    font-weight: bold;
}

.content_left .irisme-select {
    width: 100%;
    margin-bottom: 15px;
    border: 2px solid #bcc190;
    overflow-y: auto;
}

/* 右邊 scroll style */

.content_left .irisme-select::-webkit-scrollbar  {
    width: 7px;
    position: absolute;
}

.content_left .irisme-select::-webkit-scrollbar-thumb {
    background: #9b9c56;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

/*
.left_on{
    padding-right: 0px;
    float: right;
}*/

/*.left_off{
    padding-right: 0px;
    float: right;
}*/
/**********gray_bar***********/
.radio_box{
    display: block;
    width: 80px;
    float: left;
}

.gray_block{
    margin-top: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0px 0px;
}

.gray_block_border_off{
    margin-top: 10px;
    background-color: #eee;
    border-radius: 5px;
}

.gray_bar{
    margin-top: -10px;
    width: 1280px;
    height: 40px;
    background-color: #eee;
    font-size: 16px;
    font-weight: bold;
}

.gray_bar_patting{
    padding: 10px;
}

.gray_bar_margin{
    margin:0px 10px;
    display: inline-block;
}

.mb{
    float: left;
    padding-right: 5px;
}

#data_time {
    background: #f9f9c0;
    padding: 5px;
    border: 1px solid #dedede;
    border-radius: 0px 0px 5px 5px;
}

/*********************/
.tab-content{
    border-left:1px #eee solid;
    border-right:1px #eee solid;
    border-bottom:1px #eee solid;
    padding:10px 0px;
    display: inline-block;
    width: 100%;
}

/* 左側選單 */
.content .container-fluid > div.row > div.col-md-3 {
    /* padding-right: 0px; */
}

.pointer{
    cursor: pointer;
}

.tree_line img {
    margin-right: 5px;
}

.float_right{
    margin: 10px;
    float: right;
}

/********margin*********/
.margin_10{
    margin: 10px 0px;
    float: left;
}

.margin_10 button {
    padding: 10px 8px !important;
}

.margin_20{
    margin-left: 20px;
    margin-right: 20px;
}

.clear{
    clear: both;
}

.padding{
    padding: 5px 0px;

}

.radius{
    border-radius:0px;
}

/***********************nav-tabs*************************************/
.tab-nav > li > a::after {
    background: #fff none repeat scroll 0% 0%;
    color: #448aca;
}

.tab-pane {
    padding: 5px 0;
}

.nav-tabs > li  {
    width:12%;
    text-align:center;
}

/*.title_border {
    background: #FFF none repeat scroll 0% 0%;
    border: #eee 1px solid;
    border-bottom: 0px;
}*/

@media all and (max-width:724px){
    .nav-tabs > li > a > span {
        display:none;
    }
    .nav-tabs > li > a {
        padding: 5px 5px;
    }
}
/***********************覆寫tabs樣式*************************************/
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: 1px solid #fff !important;
}

/***panel***/
.panel-body{
    border-top: 1px solid #ddd;
    padding: 7px;
}

.panel-heading{
    border-bottom:0px !important;
}

.cross{
    float: right;
    margin:5px 5px 0px 0px;
}

.cross_left{
    float: left;
    margin:5px 5px 0px 5px;
}

.img-responsive{
    width: 100%;
    margin: 0px auto;
}

#irisme_menu {
    width: 110%;
}

label.irisme-parent{
    font-size:14px;
    margin-right: 15px;
}

i{
    padding-right: 4px;
    color:#1d82dc;
}

li img{
    height: 50px;
    width: 50px;
}

.ul_margin{
    margin-top: 5px;
    margin-left: -8px;
}

.ulpadding{
    padding-top: 5px;
    margin-left: -15px;
}

.tree_line{
    font-size: 15px;
    list-style: none;
    list-style-type: none;
    margin: 0;
    position: relative;
}

.tree_line:before{
    border-left: 1px solid #1d82dc;
    bottom: 50px;
    height: 100%;
    top: 0;
    width: 1px;
}

.tree_line:after{
    border-top:1px solid #1d82dc;
    height:20px;
    top:14px;
    width:20px
}

.tree_line:before,.tree_line:after{
    content:'';
    left:-33px;
    position:absolute;
    right:auto;
}

#left_menu_wrapper>div>ul>li::before, #left_menu_wrapper>div>ul>li::after {
    border:0
}

.tree_line:last-child::before {
    height:14px;
}

.input_width{
    width:85px;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-width: 0;
    font-size: 17px;
}

.nav-tabs > li > a {
    line-height: 0.9;
    color: #333;
    font-size: 17px;
    font-weight: bolder;
}

.nav-tabs > li.active > a:active, .nav-tabs > li > a:hover {
    line-height: 0.9;
    border: none;
    color: #333 !important;
    background: #eee;
    font-size: 17px;
}

.nav-tabs > li > a::after {
    content: "";
    background: #448aca;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
    transform: scale(1);
}

.unselected_item{
    opacity: .35;
}

#loading{
    position: fixed;
    right: 10px;
    bottom: 0px;
    display: none;
}

#loading img {
    margin-top: -10px;
}

.ui-datepicker-year {
    color: black;
    width: 60px !important;
}

.ui-datepicker-month {
    margin-left: 10px !important;
    color: black;
    width: 70px !important;
}

#top_div {
    padding: 5px;
}

.is_single_hide  {
    display: none;
}

#download_iframe {
    display: none;
}

#authority_info {
    font-size: 8px;
    font-style: italic;
    margin-top: 5px;
}

/* 圖片等比縮到 div */

#product_div {
    height: calc(100% - 80px);
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

#product_div.fit_height img {
    width: auto;
    height: 100%;
}

#product_div.fit_width img {
    width: 100%;
    height: auto;
}

/* 說明圖示 */
.info_icon {
    color: #83898e;
    font-size: 14px;
    margin-left: 7px;
}

.info_icon span {
    box-shadow: 0px 0px 4px #a0a0a0;
    border-radius: 11px;
}

.info_icon:hover {
    color: #0b67f1 !important;
}

.info_icon:hover span {
    box-shadow: 0px 0px 7px #0b67f1;
    border: none;
}

/* 固定時間圖示 */
.fix_icon {
    font-size: 14px;
    margin-left: 7px;
    border-radius: 11px;
    font-size: 11px;
    position: relative;
    top: -2px;
}

.unactive .fix_icon:hover {
    background: red;
    cursor: not-allowed;
}

.fix_icon span {
    color: black;
    padding: 0px 3px;
    border-radius: 11px;
    transform:rotate(45deg);
}

.fix_icon:hover {
    background: #0b67f1 !important;
}

.fix_icon:hover span {
    box-shadow: 0px 0px 7px #0b67f1;
    border: none;
    color: white;
}

.fix_icon.active span {
    color: orange;
    transform:rotate(0deg);
}

.fix_icon_span {
    margin-left: 5px;
}

/* 時間選取 */

#time_pick {
    text-align: left;
    padding: 2px 5px;
}

.time-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    padding: 3px 5px;
}

.time-symbol {
    width: 10px;
    height: 10px;
    background: gray;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.show-time-text .time-symbol {
    width: 15px;
    height: 15px;
}

.time-symbol.small-symbol {
    margin-top: 3px;
    margin-bottom: 2px;
}

.time-symbol.has-data {
    background: #44cc44;
}

.time-symbol.has-data:hover {
    background: green;
}

.time-symbol.active-data {
    background: blue;
}

.time-symbol.skip-data {
    background: red;
}

.time-symbol.skip-data:hover {
    background: #ff6983;
}

.time-text {
    height: 20px;
}

.time-unit {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    bottom: 3px;
    left: 5px;
}

/* 浮動控制面板 */

#overflow_control {
    position: absolute !important;
    cursor: move;
    width: 300px;
    right: 15px;
    /*    left: calc(100% - 330px);*/
    /*left: calc(100% - 30px);*/
    z-index: 11;
}

#overflow_control.is_collapse {
    width: 24px;
    height: 24px;
}

#download_one_image{
    width: 40px;
    height: 28px;
    position: absolute;
    right: 10px;
    z-index: 12;
    cursor: pointer;
}

#download_one_image:hover {
    color: white !important;
}

#collapse_icon{
    width: 33px;
    height: 27px;
    position: absolute;
    right: 10px;
    font-size: 22px;
    color: darkgray;
    z-index: 12;
    cursor: pointer;
}

#main_control{
    /*width: 300px;*/
    /*right: 0px;*/
    position: relative;
    z-index: 1;
}

#main_control.is_collapse {
    display: none;
}

#pic_select {
    margin-top: 6px;
}

#tau .irisme-parent {
    display: inline-block;
}

/* 圖片 colorbar */
.img_colorbar_resize {
    cursor: all-scroll;
}

/* modal */
#filetime_modal input#filedate {
    width: 95px;
}

#filetime_modal div.modal-dialog {
    width: 410px;
}

#filetime_modal {
    background: #000000ad;
}

.ui-widget-header {
    border: 1px solid #2e6da4!important;
    background: #2e6da4!important;
}

#image_compare_modal div.modal-dialog {
    width: 800px;
}

#image_compare_modal div.row {
    margin-top: 50px;
}

#image_compare_modal div.sub_menu {
    display: none;
}

#image_compare_modal div.image_column {
    background: #f4f4f4;
    border: 1px solid #b9b9b9;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    position: relative;
}

#image_compare_modal select {
    width: 100%;
}

#image_compare_modal input {
    width: 100%;
}

#image_compare_modal div.tag {
    position: absolute;
    z-index: 1;
    top: -25px;
    left: 0px;
    background: #ecf9f9;
    width: 100%;
    padding: 2px 2px 2px 5px;
    font-weight: 900;
    border-left: 5px solid #8ef5f5;
    box-shadow: 1px 1px 5px 0px #9d9c9c;
    text-align: start;
    font-size: 15px;
}

.tag_disabled {
    background: lightgray!important;
    border-left: 5px solid #eeeeee!important;
    color: gray;
}

#image_compare_modal div.message {
    display: none;
    text-align: center;
    color: green;
    margin-top: 12px;
    font-weight: 600;
    background: beige;
}

#image_compare_modal div.no_complete {
    display: none;
    text-align: center;
    color: rgb(95, 2, 17);
    margin-top: 12px;
    font-weight: 600;
    background: rgb(236, 182, 182);
}

.message_show {
    display: block!important;
}

#image_compare_modal div.clean {
    display: none;
    position: absolute;
    top: -53px;
    right: 15px;
}

#image_compare_modal div.clean>span {
    background: #f4d1d1;
    color: darkred;
    padding: 3px;
    border-radius: 5px;
    cursor: pointer;
}

#image_compare_modal div.clean>span:hover {
    background: #f09c9c;
    color: #570202;
}

#image_compare_modal button#submit_btn {
    float: right;
}

#image_compare_modal button#submit_btn img {
    display: none;
    width: 25px;
}

#image_compare_modal span#compare_error_msg {
    display: none;
    padding-left: 30px;
    color: red!important;
    font-weight: 800;
    font-size: 18px;
    text-shadow: 1px 1px 3px grey;
}

#image_compare_modal span#compare_error_msg>span {
    border-bottom: 2px solid #ee9090;
}

#image_compare_modal span#compare_error_msg>i {
    color: red!important;
    font-size: 26px;
    vertical-align: bottom;
}

.close {
    float: left!important;
    font-size: 30px!important;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}

.modal-header {
    min-height: 50px!important;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

button#final_submit_btn,
button#submit_btn {
    background: #5783c7;
    color: beige;
    border: 0px;
    padding: 2px 8px;
    box-shadow: 1px 1px 5px 0px #5a5a5a;
    font-weight: 600;
    font-size: 15px;
    border-radius: 5px;
}

button#cancel_btn {
    background: #eeeeee;
    color: #aaaaa9;
    border: 0px;
    padding: 2px 8px;
    box-shadow: 1px 1px 5px 0px #5a5a5a;
    font-weight: 600;
    font-size: 15px;
}

button#final_submit_btn:hover,
button#submit_btn:hover {
    background: #083d90;
    color: #ebebeb;
    box-shadow: 1px 1px 3px 0px #c3c3c3;
}

button#cancel_btn:hover {
    background: #d1d0d0;
    color: #959494;
    box-shadow: 1px 1px 3px 0px #c3c3c3;
}

/* RWD */
.collapse_menu {
    position: static;
}
@media (max-width: 992px) {
    #overflow_control {
        position: static !important;
        cursor: move;
        width: 100%;
        text-align: center;
    }

    #time_pick {
        text-align: center;
    }

    #collapse_icon {
        display: none !important;
    }

    .collapse_menu {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -100%;
        z-index: 9999;
        background: white;
        width: 50vw;
        box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
        padding-top: 15px;
    }

    #authority_info {
        font-size: 14px;
    }

    #hide_btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
}

#hide_btn {
    display: none;
    position: absolute;
    top: 8px;
    left: calc(100% + 5px);
    width: 40px;
    height: 40px;
    border: white 1px solid;
    border-radius: 8px;
    background: #303030;
    z-index: 999;
    box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

#hide_btn>div {
    width: 18px;
    height: 3px;
    background: white;
    border-radius: 4px;
}

#hide_btn>div:first-child {
    transform: rotate(-30deg) translateY(4px);
    transform-origin: left bottom;
}

#hide_btn>div:last-child {
    transform: rotate(30deg) translateY(-4px);
    transform-origin: left top;
}