@charset "utf-8";

/*基本設定*/
body{font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;margin:0;padding:0;background:#dfdfdf;overflow-x: hidden;
}
a {color:#000;text-decoration:none;*/ overflow:hidden; */}
.footer {color: #777;font-size: 13px;text-align:center;margin:15px 0px;float:left;width:100%;}
table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th {background-color: rgba(0,0,0,0);}
table td, table th {padding: 7px;line-height: 1.5;vertical-align: middle;border: 0px solid #ccc;}
[type="button"]:focus, [type="button"]:hover, [type="submit"]:focus, [type="submit"]:hover, button:focus, button:hover
color: #000;background-color: #f5f5f5;text-decoration: none;}
table tbody tr:hover > td, table tbody tr:hover > th {background-color: rgba(0,0,0,0);}

#view table td, table th {padding: 7px;line-height: 1.5;vertical-align: middle;border: 1px solid #ccc;}
#view input{height:40px;border-radius: 5px;padding:3px;}


/* login header */
.login_head {color:#fff;font-size: 16px;padding:15px;height:110px;border-bottom:1px solid #ccc;background:#fff;}
.login_logo {width:190px;float:left;margin-left:10px;margin-right:10px;margin-top:5px;}
.login_head_name {color:#fff;font-size: 30px;float:left;line-height: 30px;margin-top: 0px;margin-bottom:15px;}
.login_head_name_small {color:#fff;font-size: 16px;}	
.login_btn, .login_btn:hover {color: #fff;font-size: 16px;width:100%;height:45px;background-color: #e30614;border-radius: 30px;border:0px;margin-top:7px;margin-bottom:7px;cursor:pointer;}
.login_box {color: #fff;font-size: 16px;line-height:30px;width:100%;float:left;margin-bottom:5px;}
.input_style {color:#fff;width:100%;height:45px;border:1px solid #fff!important;background:rgba(0,0,0,0);border-radius:30px!important;  text-indent:15px;}
::placeholder{color:#999;}

/* header */
.head {color:#000;font-size: 16px;width:100%;padding:15px;height:110px;border-bottom:1px solid #ccc;background:#fff;position:fixed;top:0px;z-index:99;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 15px 0 rgba(0, 0, 0, 0.1);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ededed+0,f6f6f6+47,ffffff+77,ffffff+100 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 0%, #f6f6f6 47%, #ffffff 77%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 47%,#ffffff 77%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ededed 0%,#f6f6f6 47%,#ffffff 77%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.logo {width:120px;float:left;margin-left:10px;margin-right:10px;margin-top:5px;}
.head_name {color:#000;font-size: 37px;float:left;line-height: 30px;margin-top: 15px;}
.head_name_small {color:#777;font-size: 16px;}
.people {color:#fff;background:#5cb85c;width:80px;float:right;text-align:center;margin-top:0px;margin-left:10px;margin-right:10px;border:0px solid #ccc;padding:7px;border-radius:15px;}   
.alarm_people {color:#fff;background:#5f5cb8;width:80px;float:right;text-align:center;margin-top:0px;margin-left:10px;border:0px solid #ccc;padding:7px;border-radius:15px;}
.people_title {color:#fff;font-size: 35px;line-height: 30px;font-weight: 600;}

.menu_icon {width:90px;float:right;text-align:center;line-height: 26px;margin-top:10px;}
.menu_icon, .menu_icon a, .menu_icon i {color: #777;}
.menu_icon:hover, .menu_icon:hover a, .menu_icon:hover i {color: #5cb85c;}

/* 全螢幕按鈕 */
.fullScreen,.fullScreen:active,.fullScreen:focus {font-size:15px;line-height:17px;color:#fff;background:#555;width:90px;height:90px;border-radius:100px;border:0px;bottom:40%;right:-40px;position:fixed;cursor: pointer;z-index:9;opacity:0.7;text-align:left;padding-top:25px;padding-left:15px;}
.fullScreen:hover{opacity:1;}

/* 下拉選擇 */
.select_style {font-size:16px;width:130px;height:40px;border:1px solid #9F9F9F;background:#f5f5f5;border-radius:10px;}
.select_box {width:110px;float:left;text-align:center;line-height: 26px;margin-top:15px;margin-left:10px;}

/* 搜尋 */
.search_style {font-size:16px;width:100%;height:40px;border:1px solid #9F9F9F !important;border-radius:10px 0px 0px 10px  !important;background:#f5f5f5;}
.search_btn_style, .search_btn_style:hover, .search_btn_style:active, .search_btn_style:focus  {color:#fff;font-size:16px;background:#5cb85c;width:100%;height:40px;padding:0 12px;border-radius:0px 10px 10px 0px;border:1px solid #5cb85c;cursor:pointer;}
.search_box {width:200px;float:left;text-align:center;line-height: 26px;margin-top:15px;margin-left:20px;}
.search_btn_box {float:left;line-height: 26px;margin-top:15px;}

/*修改出入院按鈕 */		
.time_box {width:560px;float:right;text-align:right;margin-top:20px;position:absolute;top:0p;right:70px;}												
.time_box_btn, .time_box_btn:hover, .time_box_btn:active, .time_box_btn:focus {color: #fff;font-size: 16px;width:100px;height:35px;background-color: #999;border-radius:30px ;border:0px;cursor:pointer;}	


/* 主要內容區塊 */
.grid-container {display: grid;grid-template-columns: 25% 25% 25% 25%;padding: 0px  20px;float:left;margin-top:10px;}
.grid-item {color:#000;font-size: 16px;line-height: 24px;background: #fff;padding: 15px;margin:5px;border-radius: 15px 15px 15px 15px;}
.grid-item2 {color:#000;font-size: 16px;line-height: 24px;background: #fff;padding: 15px;margin:5px;border-radius: 15px 15px 15px 15px;border:0px solid #a61996;}
.grid-item3 {color:#999;font-size: 16px;line-height: 24px;background: #fff;padding: 15px;margin:5px;border-radius: 15px 15px 15px 15px;}

/* 管理帳號區塊 */
.creat_box {padding: 0px;margin:0px 10px 0px 10px;border-radius: 15px}
.id-item {background: #fff;padding: 7px;margin:15px 25px 0px 25px;border-radius: 15px}
.id_table {color:#555;font-size: 17px;line-height: 24px;}

.creat_btn {color: #000;font-size: 22px;width:100%;height:80px;background-color: #f5f5f5;border-radius:  20px;border:3px solid #bbb;cursor:pointer;}
.gateway_box{width:98%;background:#E7F4F7;margin:10px 1%;padding:35px;border:0px solid #1C8595;}

/* 區塊內部 */
.top_box1 {width:36%;font-size: 16px;float:left;text-align:left;}
.top_box2 {width:32%;font-size: 16px;float:left;text-align:left;}
.top_box3 {width:32%;float:left;text-align:left;border:2px solid #ccc;border-radius:15px;padding:7px 10px;margin-right:2%;cursor:pointer;}
.top_box4 {width:32%;float:left;text-align:left;border:2px solid #ccc;border-radius:15px;padding:7px 10px;margin-right:2%;cursor:pointer;}
.top_box5 {width:32%;float:left;text-align:left;border:2px solid #ccc;border-radius:15px;padding:7px 10px;cursor:pointer;}
.bottom_box_left {font-size:15px;line-height:18px;width:55%;float:left;text-align:left;margin-top:10px; overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-line-clamp: 3; /*行數*/-webkit-box-orient: vertical;white-space: normal;}
.bottom_box_right {width:44%;float:left;text-align:right;margin-top:10px;}

/* 文字標題 */
.title {color: #999;font-size: 16px;line-height: 26px;}
.text {color: #000;font-size: 27px;font-weight: 600;}
.green {color: #5cb85c !important;}
.t_red {color: #e30614 !important;}
.grey {color: #999 !important;}
.note_text {font-size: 16px;}															   

/* 按鈕 */
.view_btn {color: #fff;font-size: 16px;width:100%;height:35px;background-color: #888;border-radius: 30px;border:0px;margin-bottom:7px;cursor:pointer;}
.view_btn_red {color: #fff;font-size: 16px;width:100%;height:35px;background-color: #e30614;border-radius: 30px;border:0px;margin-bottom:7px;cursor:pointer;}
.edit_btn {color: #fff;font-size: 16px;width:100%;height:35px;background-color: #888;border-radius:  30px;border:0px;cursor:pointer;}

.setup_btn, .setup_btn:active, .setup_btn:focus {color: #fff;font-size: 16px;width:100px;height:35px;background-color: #1C8595;border-radius:  30px;border:0px;cursor:pointer;}
.setup_btn:hover {background-color: #135b66;}
.editid_btn, .editid_btn:hover, .editid_btn:active, .editid_btn:focus {color: #fff;font-size: 16px;width:100px;height:35px;background-color: #5CB85C;border-radius:  30px;border:0px;cursor:pointer;}
.delete_btn, .delete_btn:active, .delete_btn:focus {color: #fff;font-size: 16px;width:100px;height:35px;background-color: #7D7D7D;border-radius:  30px;border:0px;cursor:pointer;}
.delete_btn:hover {background-color: #5b5b5b;}


/* Tab頁籤設定 */
.tab_css{display:flex;flex-wrap:wrap;justify-content:left;}
.tab_css input{display:inline}
.tab_css label{font-size: 22px;margin: 0 5px 5px 0; padding: 10px 16px; cursor: pointer; border-radius: 50px; background: #5CB85C; color: #fff; opacity: 0.5;}
.tab_content{order:1;display: none; width:100%; font-size: 16px; padding: 5px; border: 0px solid #ddd;}
.tab_css input:checked + label, .tab_css label:hover{opacity: 1;}
.tab_css input:checked + label + .tab_content{display: initial;}


/* menu下選單功能 */
.dropdown {position: relative;display: inline-block;}
.dropdown-content {display: none;position: absolute;background-color: #333;min-width: 160px;padding: 5px 17px;text-align:left;}
.dropdown-content a {color:#fff!important;line-height:40px;}
.dropdown:hover .dropdown-content {display: block;}								   

.table_list_head{font-size:20px;font-weight:600;border-bottom:1px solid #ccc;}

/* 開啟關閉按鈕 */
.switch { position: relative;width: 85px;height: 34px;line-height: 34px;}
.switch-checkbox {position: absolute;display: none;}
.switch-label {display: block;overflow: hidden;cursor: pointer;border-radius: 20px;}
.switch-txt {display: block;width: 200%;margin-left: -100%;transition: margin 0.2s ease-in 0s;}
.switch-txt::before,
.switch-txt::after {display: block;float: right;width: 50%;font-size: 16px;color: #fff;box-sizing: border-box;}

/*==開關鈕底色(On時)==*/
label {line-height: inherit;margin-top:10px;}

.switch-txt::after {content: attr(turnOn);padding-left: 10px;background: #5cb85c;color: #fff;}
/*開關鈕底色(關閉時)*/
.switch-txt::before {content: attr(turnOff);padding-right: 10px;background: #7D7D7D;color: #fff;text-align: right;}

/*==開關鈕的顏色與大小==*/
.switch-Round-btn {position: absolute;display: block;width: 26px;height: 26px;margin: 4px;background: #fff;top: 0;bottom: 0;right: 50px;border-radius: 13px;transition: all 0.2s ease-in 0s;}
.switch-checkbox:checked + .switch-label .switch-txt {margin-left: 0;}
.switch-checkbox:checked + .switch-label .switch-Round-btn{right: 0;}

.gwsn {color: #fff;font-size: 15px;line-height: 35px;background-color: #5CB85C;border-radius: 50px;border: 0px;padding: 5px 10px;margin-right:10px;}

/* 微動畫 */
.heartBeat {animation-duration: 2s;animation-iteration-count:infinite;}
.add_fail{color:#E60012;}

/* 跳出視窗 */
.popup-wrap {width: 100%;height: 100%;display: none;position: fixed;top: 0px;left: 0px;content: '';background: rgba(0, 0, 0, 0.85);}
.popup-box {width: 50%;padding: 100px 100px;transform: translate(-50%, -50%) scale(0.5);position: absolute;top: 50%;left: 50%;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);border-radius:50px;background: #fff;text-align: center;}
.close-btn, .close-btn:hover{width: 180px;height: 50px;top: 10px;right: 10px;background: #999;font-weight: bold;text-decoration: none;color: #fff;line-height: 40px;font-size: 40px;padding:15px 80px;border-radius:50px;}
.transform-in, .transform-out {display: block;-webkit-transition: all ease 0.5s;transition: all ease 0.5s;}
.transform-in {-webkit-transform: translate(-50%, -50%) scale(1);transform: translate(-50%, -50%) scale(1);}
.transform-out {-webkit-transform: translate(-50%, -50%) scale(0.5);transform: translate(-50%, -50%) scale(0.5);}

/* checkbox 樣式 */
.ckbutton_checkbox, .rdobutton_radio{width: 25px;height: 25px;cursor:pointer;margin-right:8px;}
.popup_title {font-size:40px;width:100px;}
.popup_input {font-size:40px;width:100px;}
#heaticon_top{position: absolute;bottom:30px;left:30px;}		

/* 新增帳號 */
.keyin_title {color: #000;font-size: 27px;line-height:60px;}
.keyin_style {font-size:30px;width:100%;height:70px;border:0px solid #9F9F9F !important;border-radius:10px !important;background:#f5f5f5;text-indent: 20px;}
.textarea_style {font-size:16px;width:100%;border:1px solid #9F9F9F !important;border-radius:10px !important;background:#f5f5f5;text-indent: 10px;}
.keyin_btn_style, .keyin_btn_style:hover, .keyin_btn_style:active, .keyin_btn_style:focus  {color:#fff;font-size:20px;background:#5cb85c;width:100%;height:50px;padding:0 12px;border-radius:50px;border:1px solid #5cb85c;cursor:pointer;margin-bottom:30px;margin-top:15px;}			
/* checkbox 樣式 */
.ckbutton_checkbox, .rdobutton_radio{width: 25px!important;height: 25px;cursor:pointer;}
.ckbutton_label {margin-bottom:10px;}

/* 移動滑過顯示視窗文字 */
.tooltip { position: relative; }
.tooltip .tooltiptext { font-size:16px;visibility: hidden; width: 170px; background-color: #008cbb; color: #fff; text-align: center; border-radius: 6px; padding: 3px; position: absolute; z-index: 1; bottom: 115%; left: 40%; margin-left: -60px; }  
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #008cbb transparent transparent transparent; }  
.tooltip:hover .tooltiptext { visibility: visible; } 

/* gateway list 樣式 */
.inner_td {
display: inline-block;vertical-align: top;}

/* 底部分頁 */
ul.pagination {display: inline-block;padding: 0;margin: 20px 0;}
ul.pagination li {display: inline;}
ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;transition: background-color .3s;border: 1px solid #ddd;margin: 0 4px;}
ul.pagination li a.active {background-color: #4CAF50;color: white;border: 1px solid #4CAF50;}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
.page_list {width:150px;position:relative;right:0px;bottom:45px;float:right;}


@media screen and (max-width: 1600px){
.popup-box {width: 70%;}
.view_btn , .view_btn:hover, .view_btn:active, .view_btn:focus, .view_btn_red , .view_btn_red:hover, .view_btn_red:active, .view_btn_red:focus, .edit_btn, .edit_btn:hover, .edit_btn:active, .edit_btn:focus {font-size: 18px!important;width:42px!important;height:42px!important;											 
.bottom_box_left {width: 55%;}
.bottom_box_right {width: 45%;}
.grid-item {font-size: 16px;line-height: 20px;}
.top_box3,.top_box4 {width:32%;padding:7px;}
.top_box5 {width:32%;padding:7px;margin-right:0px;}
.text {font-size: 38px!important;}
}


@media screen and (max-width: 1440px){	
.top_box1, .top_box2, .top_box3 {font-size: 15px;}
.view_btn , .view_btn:hover, .view_btn:active, .view_btn:focus, .view_btn_red , .view_btn_red:hover, .view_btn_red:active, .view_btn_red:focus, .edit_btn, .edit_btn:hover, .edit_btn:active, .edit_btn:focus {font-size: 17px!important;width:37px!important;height:37px!important;}
.alarm_people, .people {font-size: 12px;}
.search_box {width:180px;}
.people {width: 70px;}
.head_name {font-size: 25px;margin-top:10px;}
.menu_icon {width: 100px;font-size:16px;}
.head_name_small {font-size: 13px;}
.grid-container {width: 97.8%;}
.top_box3,.top_box4 {padding:5px;}
.text {font-size: 38px!important;}
}

@media screen and (max-width: 1366px){
.menu_icon {font-size: 15px;}
.top_box1, .top_box2, .top_box3 {font-size: 15px;}
.view_btn , .view_btn:hover, .view_btn:active, .view_btn:focus, .view_btn_red , .view_btn_red:hover, .view_btn_red:active, .view_btn_red:focus, .edit_btn, .edit_btn:hover, .edit_btn:active, .edit_btn:focus {font-size: 16px!important;width:37px!important;height:37px!important;}
.grid-container {width: 97%;}
.head_name {font-size: 20px;line-height:23px;margin-top:10px;}
.top_box3,.top_box4 {padding:5px;}
.text {font-size: 38px!important;}
}


@media screen and (max-width: 1280px){
.menu_icon {font-size: 15px;line-height:19px!important;width: 80px!important;}
.top_box1, .top_box2, .top_box3 {font-size: 14px;}
.view_btn , .view_btn:hover, .view_btn:active, .view_btn:focus, .view_btn_red , .view_btn_red:hover, .view_btn_red:active, .view_btn_red:focus, .edit_btn, .edit_btn:hover, .edit_btn:active, .edit_btn:focus {font-size: 14px!important;width:30px!important;height:30px!important;}
.grid-container {width: 97%;}
.search_box {width:150px;}
.head {width:98%;}
.head_name {font-size: 20px;line-height:23px;margin-top:10px;}
.top_box3,.top_box4 {padding:5px;}
.text {font-size: 30px!important;}
.fullScreen, .fullScreen:active, .fullScreen:focus {right: -10px;}
}