/************************************* 以下適用所有尺寸 ***********************************/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family:Microsoft JhengHei, sans-serif; */
}
p{
    /* text-align: justify; */
}
.full-width{
    width: 100%;
}

/* page container */

.center-panel {
    padding-top: 30px;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 3%;
    width: 40vw;
}

/* page 語言列 */
#dei_register_panel_header {
    background-color: transparent;
    margin-bottom: 6px;
}
.header-style {
    background-color: transparent;
    height: 50px;
    margin: 0 auto;
    width: 40vw;
    margin-top: 1%;
}
#dei_select_lang{
    width: 40%;
    float: right;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
    margin-bottom: 3%
}

/* page logo */
.dei_login_logo {
    /* margin: 0 auto; */
    /* max-width: 60%; */
    height: 60px;
    display: block;
    position: relative;
    padding: 0 10%;
}

#device_guid_for_copy{
    outline: none;
    border: none;
    width: 100%;
}



/* FORM 物件區 */


.border_input{
    border: none;
    border-bottom: 1px solid #ddd;
    height: 50px;
    box-shadow: none;
    background-color: transparent;
}

.form_style {
    padding: 72px;
    padding-top: 20px;
    padding-bottom: 30px;
    word-wrap: break-word;
    word-break: normal; 
    display: none;
}
.form_style input,
.form_style select{
    margin-bottom: 20px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 5px;
    font-size: 14px;
}

/* FORM 物件區內 '下一步' button 的 container */
.btn-container {

}
.btn-style {
    /* float: right; */
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 5px; 
    width: 100%;
    border: none;
    height: 40px;
    white-space: normal;
}
#copyButton{
    background: none;
    margin-bottom: 2%;
    border: none;
    text-decoration: underline;
    outline: none;
    font-weight: bold;
}
#copyButton:hover{
    color: #4A4A4A;
}
.copy_msg{
    margin-bottom: 8%;
    display: block;
    color: #737373;
}


/* captcha */
.dei_register_captcha_container{
    position: relative;
    margin-bottom: 10%;
}
.dei_register_captcha_image{
    max-width: 100%;
}
.dei_register_next_captcha_btn{
    cursor: pointer;
}

/*Radio button */
.radio-container {
	margin-top: 20px;
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 30px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* download app */
a.download_section{
    display: block;
    outline: none;
    text-decoration: none;
    color: #000;
    margin-bottom: 15%;
}
div.download_section_div{
    text-align: center;
    margin-top: 5%;
    margin-left: 5%;
}
.app_icon_container{
    float: left;
}
img.app_icon{
    max-width: 48px;
    display: block;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    margin-left: -15px;
}
p.app_text{
    text-align: left;
    font-weight: bold;
    margin-left: 60px;
}

/* map */
#mapid,#mapid_new_case{
    width: 100%;
    height: 400px; 
}
.leaflet-retina .leaflet-control-layers-toggle{
    background-image:url('/third_party/leaflet/1.3.1/css/images/layers.png');
} 

.leaflet-control-layers.leaflet-control{
    position: relative;
    z-index: 1;
    border-radius: 0px;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 0px;
    border: none;
    margin-top: -10px;
}
.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control{
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 0px;
    border: none;
    color: #777;
    width: 200px;
}
.leaflet-control-zoom.leaflet-bar.leaflet-control{
    border-radius: 0;
}
p.mapNearBy {
    text-align: left;
}
/* relocate */

.relocateContainer{
    position: relative;
    z-index: 1;
}
.relocateButton{
    width: 36px;
    height: 36px;
    font-size: 20px;
    text-align: center;
    color: #505050;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border: none;
}

.relocateButton:hover{
    color: #fff;
    background:#505050;
}

/* 2018/09/14 */
#dei_info_cancel_btn,
#dei_info_ok_btn{
    border-radius:0px; 
}
#dei_info_cancel_btn:focus,
#dei_info_ok_btn:focus{
    outline: none;
}


/* 2019/07/12 */
.r_title{
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}
.del_device_id{
    cursor: pointer;
}
.del_device_id:hover{
    color: red;
}
/* country code autocomplete */
.country_code_search_div,
.country_code_input_new_case {
    display: none;
    position: absolute;
    width: 100%;
    z-index: 1000;
    top: 34px;
    border: #ccc solid thin;
    height: 260px;
    background: #fff;
}
input#country_code_search_input,
input#new_case_country_code_search_input{
    position: absolute;
    top: -35px;
    margin-bottom: 0px;
}
.code_list_group,
.code_list_group_elves{
    border-top: #ccc solid thin;
    width: 100%;
    z-index: 400;
    max-height: 260px;
    overflow: auto;
    overflow-x: hidden;
    word-wrap: break-word;
    white-space: normal;
    display: none;
}
a.code_list_group-item,
a.code_list_group-item_elves{
    background: rgba(255,255,255,1);
    color: #777;
    display: block;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    border-radius: 0 !important;
    border-bottom: #ccc solid thin;
    border-left: #ccc solid thin;
    border-right: #ccc solid thin;
    cursor: pointer;
    pointer-events: all;
}
a.code_list_group-item:hover,
a.code_list_group-item_elves:hover,
a.code_list_group-item_elves.key,
a.code_list_group-item.key{
    color:#505050;
    background: #f5f5f5;
}
/* country code autocomplete end */
/* table*/
.simple_table{
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
}
.simple_table thead tr,
.simple_table thead th{
    padding: 8px 8px;
    text-align: left;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ddd;
}
.simple_table tbody tr,
.simple_table tbody td {
    padding: 8px 8px;
    text-align: left;
    background: #fff;
    border: none;
    border-bottom: 1px solid #ddd;
}
table.simple_table tbody tr:hover td{
    background-color: #f5f5f5;
}
.asterisk_require_color{
    color: #f00;
    font-size: 16px;
    font-weight: bolder;
}
/****************** 以上適用適用所有尺寸 (含 large desktops, 1200px and up) ****************/


/**************** 此區適用 Medium devices (desktops, 992px and up) ****************/
@media (max-width: 1200px) {
    /* FORM 物件區 */
    .form_style {
        padding: 64px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
}

/**************** 此區適用 Small devices (tablets, 768px and up) ****************/
@media (max-width: 992px) {
    /* FORM 物件區 */
    .form_style {
        padding: 36px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .center-panel{
        width: 70vw;
    }
}

/**************** 此區適用 Extra small devices (phones, less than 768px) ****************/
@media (max-width: 768px) {
    .center-panel,
    .header-style {
         width: 70vw;
     }
 
     /* page logo */
     .dei_login_logo {
     }
 
     /* FORM 物件區 */
     .form_style {
         padding: 24px;
         padding-top: 20px;
         padding-bottom: 30px;
     }
}
@media (max-width: 576px) {
    p{
        font-size: 12px;
    }
    /* page container */
    .center-panel,
   .header-style {
        width: 90vw;
    }

    /* page 語言列 */
    #dei_select_lang{
        height: 30px;
        font-size: 12px;
    }
    .form_style label,
    #copyButton
    {
        font-size: 12px;
    }
    .form_style input,
    .form_style select{
        font-size: 16px;
    }
    .btn-style{
        font-size: 10px;
    }
    /* transfer count down */
    .transferCountdown{
        font-size: 50px;
        color: red;
    }
    
    /* map */
     .leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control{
        width: 150px;
        font-size: 10px;
    }
    .leaflet-control-zoom.leaflet-bar.leaflet-control{
        border-radius: 0;
    }
}
@media (max-width: 430px) {
div.download_section_div{
    margin-left: 0%;
}
 /* page container */
 .center-panel,
 .header-style {
      width: 90vw;
  }
  img.app_icon{
    margin-left: 0px;
}

}