@import url(/Resource/Style/bpv3.wa.common.css);

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

	Copyright (c) 2013 Epience.co.Ltd
	FileName		: bpv3.sp.object.css
	Description		: Web Application Object CSS

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



/* *********************
Button 
*********************** */
.pop_button, .pop_button_wh80 {float:right;margin:0px 15px 15px;cursor:pointer;}
.pop_button_wh80 input {
    border: 1px solid #C0C0C0;
    color: #3B1D1E;
    cursor: pointer;
    font-family: "NotoSansR", "Segoe UI Light", "Segoe UI", "Segoe", "Malgun Gothic","맑은 고딕";
    font-size: 11px;
    margin-left: 5px;
    min-width: 6em;
    padding: 7px 10px;
	background-color:rgba(255, 255, 255, 0.7);
}



/* *********************
Menu in List
*********************** */
.contents_menu {margin-top:10px;}
.contents_menu li.menu_li {display:inline-block;padding:0px 10px;}
.contents_menu li.new {background:url("/Resource/Image/accsvcthemed-accent.png") no-repeat -1px -376px;padding-left:23px;}
.contents_menu li.new a {color:#0073c6;}
.contents_menu li.menu_li .align, .s4-itm-selected .ms-list-itemLink-td.callout {position:relative;}


/* *********************
TreeView in User Management
*********************** */

td.ui-usermanage-treeview {width:250px; vertical-align:top;}
td.ui-usermanage-treeview .ui-treeview-wrap {width:250px;overflow:auto; height:560px; position:relative; height:100%;}
.ui-treeview-wrap .ui-treeview-company {background-color:#cdd5ec; color: #2530B0;margin-bottom:10px; position:relative;height:40px;line-height:40px;border-radius:4px;}
.ui-treeview-wrap .ui-treeview-company .ui-treeview-title {display:inline-block; padding:0px 10px;height:40px;line-height:40px;}
.ui-treeview-wrap .ui-treeview-company .ui-treeview-select {display:inline-block; padding-right:5px;}
.ui-treeview-wrap .ui-treeview-company .ui-treeview-select .selectbox {width:120px;}
.ui-treeview-container {background-color:#f5f5f5; height:560px; overflow-y:auto; padding:10px;border-radius:4px;}


/* *********************
List in User Management
*********************** */
.ui-list-wrap {width:300px;overflow-x:hidden; overflow:auto; height:560px;background-color:#f5f5f5; padding:10px;border-radius:4px;}
.bpv3_list {
    /*margin: 10px !important;
    width: 300px !important;
    float:left !important;*/
    padding-right:15px;
}
td.ui-usermanage-list {width:200px; vertical-align:top;padding: 0px 10px;}
.ui-usermanage-list-section {
    background-color: #dcdbdb;
    color: #444444;
    display: block;
    margin: 0 0 10px;
    padding: 0px 10px;
    width: 300px;
    height:40px;
    line-height:40px;
    font-size:14px;
	border-radius:4px;
}

/* *********************
DataView Office Management
*********************** */
.ui-dataview-table .ui-dataview-logo {vertical-align: top; width:225px;}
.listview_data_office_logo {width:215px; height:100%; display: inline-block; margin-bottom:0; background:#e6e6e6;}
.listview_data_office_img {width: 215px; height: 172px; position: relative;}
.listview_data_office_img .office_image {width:215px; height: 172px;}
.listview_data_info_text {background: none repeat scroll 0% 0% rgb(140, 140, 140); text-align: center; width: 100%; display: inline-block; position: relative; line-height: 25px;}
.listview_data_info_text .info_text_box {position: relative;height: 39px;}
.listview_data_info_text .info_text_box .info_text_title {position: relative; display: inline-block;}
.listview_data_info_text .info_text_box .info_text_title .office_title {padding-top: 6px; color: rgb(255, 255, 255); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width:170px;}
.listview_data_info_text .info_text_box .callout_vertical {top: 0px; position: absolute; right: 0px; width: 23px; height: 39px;}
.listview_data_info_text .info_text_box .callout_vertical:hover {background: #616161; cursor:pointer;}
.callout_vlink {display:inline-block;}


/* *********************
DataView in User Management
*********************** */
.ui-usermanage-dataview-section {
    background-color: #dcdbdb;
    color: #444444;
    display: block;
    margin: 0 0 10px;
    padding: 0px 10px;
    /* width: 300px; */
    height:40px;
    line-height:40px;
	font-size:14px;
	border-radius:4px;
}
td.ui-usermanage-dataview {vertical-align:top;}
.ui-dataview-table{
	padding-right: 20px;
}
.ui-dataview-wrap {background-color:#f5f5f5; overflow-x:hidden; overflow-y:scroll; height:560px; margin:0; padding:10px;border-radius:4px;}
.ui-dataview-icon {border:0; padding:0; margin:0;}
.ui-dataview-wrap .ui-dataview-titlerow {
	display: block;
    height: 40px;
    vertical-align: middle;
	text-align:left;
	font-size:15px;
	color:#444444;
	font-family: "NotoSansR","Malgun Gothic","맑은 고딕",Segoe UI,dotum,"돋움";
}

.ui-dataview-wrap .ui-dataview-titlerow span.ui-dataview-titicon {/* padding-right:10px; display:inline-block; */}
.ui-dataview-wrap .ui-dataview-titlerow .ui-dataview-text {display:inline-block; vertical-align:top; padding-top:10px;}
.ui-dataview-wrap .ui-dataview-title {background-color:#daeaf7;}
.ui-dataview-wrap .ui-dataview-body {}
.ui-dataview-body .ui-dataview-field {margin-bottom: 10px;	padding: 10px;	background-color: #ffffff; border-bottom:none;overflow:hidden;border-radius:4px;box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 16px 0px;}
.ui-dataview-body .ui-dataview-field .ui-dataview-infotitle {} 
.ui-dataview-body .ui-dataview-field .ui-dataview-infotitle .ui-dataview-infotitle-area {
	vertical-align: middle;
	text-align:left;
	font-size:15px;
	color:#444444;
	font-family: "NotoSansR","Malgun Gothic","맑은 고딕",Gulim,"굴림",sans-serif;
}
.ui-group-title {
    font-size:15px;
}
.ui-dataview-body .ui-dataview-field .ui-infotitle-icon {display:inline-block; vertical-align:middle;}
.ui-dataview-body .ui-dataview-field .ui-dataview-label {color:#444444; padding:3px; /*padding:13px 10px 13px 10px;*/ text-align:left; min-width:120px; height:25px;}
.ui-dataview-body .ui-dataview-field .ui-dataview-data {color:#444444;text-align:left; padding:5px; /*padding:13px 10px 13px 0;*/}
.ui-dataview-data input {/*color: #2530B0; */text-align: left;}
.ui-dataview-body .ui-dataview-field .ui-dataview-label, .ui-dataview-body .ui-dataview-field .ui-dataview-data {border-bottom:#e0e0e0 1px solid;}
.ui-dataview-data div.ui-label-div01,
.ui-dataview-data div.ui-label-div02 {width:130px!important;white-space:nowrap; word-break:break-all; overflow:hidden;text-overflow:ellipsis;}
.ui-dataview-data div.ui-data-div01,
.ui-dataview-data div.ui-data-div02 {width:200px; white-space:nowrap; word-break:break-all; overflow:hidden; text-overflow:ellipsis;}

.mCSB_container {
    display: inline-block;
    margin-right: 5px !important;
    overflow: hidden;
    /*width: 100% !important;*/
}

/* Listview_empty */
.listview_emt_box {
    margin: 100px auto 0;
    display:block;
    width:100%;
    height:90px;
}
.listview_emt {
    display:block;
    width:100%;
    height:90px;
    margin: 0px auto 0px 0px;
    background: url("/Resource/image/emt_ellipsis.png") no-repeat center top;
}
.listview_code_emt {
	background:url("/Resource/image/emt_code.png") no-repeat center top;
	display:block;
	height:68px;
	margin:0 auto 0;
	width:100%;
}
.listview_usermagage_emt {
	background:url("/Resource/image/emt_usermanage.png") no-repeat center top;
	display:block;
	height:104px;
	margin:0 auto 0;
	width:100%;
}
.listview_office_emt {
	background:url("/Resource/image/emt_office.png") no-repeat center top;
	display:block;
	height:104px;
	margin:0 auto 0;
	width:100%;
}
.listview_datamanage_emt {
	background:url("/Resource/image/emt_datamanage.png") no-repeat center top;
	display:block;
	height:85px;
	margin:0 auto 0;
	width:100%;
}
.listview_emt_txt {
    text-align:center;
    display:block;
    float:left;
    width:100%;
}

/* Listview_data */

.listview_data_emt {
    display:block;
    width:100%;
    height:90px;
    margin: 0px auto 0px 0px;
    background: url("/Resource/image/emt_user.png") no-repeat center top;
}
.listview_data_info {
    display:block;
    width:100%;
    height:50px;
    background-color:#f4f4f4;
    margin-bottom:10px;
}
.listview_data_info_img img {
    float:left;
    width:50px;
    height:50px;
}
.listview_data_info_txt {
    margin-left:50px;
    padding:0px 10px;  
	/*line-height:50px;	 */
}
.listview_data_info_txt dt {
    /* font-weight:bold; */
    font-size:12px;
    color:#444444;
}
.listview_data_info_txt dd {
    font-size:1.2rem;
    color:#2530B0;
    font-weight:bold;
}


/* Button in contents */
.ui-viewtoolbar-box {
    float: left;
    font-family: "NotoSansR", "Malgun Gothic","맑은 고딕",Segoe UI,dotum,"돋움";
    font-size: 13px;
}
.ms-textXLarge {font-size:14px;}
.ms-heroCommandLink, .ms-heroCommandLink:visited {font-size:14px;color:#E96F33;}
.ms-heroCommandLink:hover,
.ms-heroCommandLink:active {color:#c45828;text-decoration:none;}

.ms-list-addnew {
    font-weight: normal;
    padding-bottom: 15px;
    text-align: left;
}

.ms-list-addnew-imgSpan, .ms-list-addnew-imgSpan20 {
    background: url("/Resource/Image/ico_new_write.png") no-repeat left top rgba(0, 0, 0, 0);
    height: 16px !important;
    vertical-align: bottom;
    width: 16px !important;
    display: inline-block;
    margin-right: 5px;
    overflow: hidden;
    position: relative;
}
.ms-list-addnew-imgSpan20 img {display: none;}


/*==================================================================================
  Add-New style    
==================================================================================*/


/* add-new-user */
.ui-button-tbl a {color:#616161;padding-right:15px;padding-bottom: 3px;float:left;}
.ui-button-tbl a.ui-btn-color {color: #2530B0;}
.ui-button-tbl a:hover {color:#2530B0;}
.ui-button-tbl .ui-textXLarge {font-family: "NotoSansR", "Malgun Gothic","맑은 고딕",Segoe UI,dotum,"돋움";
    font-size: 13px;
}
.ui-button-tbl .ui-list-addnew-aligntop {
    padding-top: 0px;
}
.ui-button-tbl .ui-list-addnew-imgSpan18 {
    display: inline-block;
    height: 20px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: 18px;
}
.ui-button-tbl .ui-list-addnew-imgSpan18 > .ui-list-addnew-plusicon {
    left:0px;
    top: 0px;
	position:absolute;
}

.ui-button-tbl .ui-list-addnew-imgSpan18 .ui-list-addnew-plusicon {
	left:0px;
	top:0px;
}
.ui-button-tbl .ui-list-addnew-imgSpan:hover .ui-list-addnew-imgSpan18 .ui-list-addnew-plusicon {
    left:-18px;
    top: 0px;
}

.ui-button-tbl .ui-button-box img {display:block;}



/* Login */
.login-wrap {
	display:flex;
	align-items: center;
    height: 100vh;
}
 .login-container {
    background-color: #041196;
    /* margin: 200px auto 0px; */
    /* padding: 40px 0; */
    width: 100%;
    height: 330px;
 }
 .login-box {
    display: flex;
    margin: auto;
    height: 100%;
    align-items: center;
 }
 .login-top {
    display: flex;
    height: 380px;
    margin: -50px auto 0;
	align-items: center;
 }
 .login-left {
    display: flex;
	width:550px;
    height: 100%;
    align-items: center;
 }
 .login-left img {
	height: 350px;
    margin-bottom: 15px;
}
 .login-button {     
	 /* display:inline-block; */
 }
 .login-button input[type="button"] {
	border:1px solid #040b3c;
	background-color:#040b3c;
	color:#ffffff;
	font-weight:bold;
	margin-left:0px;
	text-align:center;
	font-size:18px;
	border-radius: 5px;
	width: 100%;
	height: 50px;
 }
 .login-button input[type="button"]:hover {
	background-color:#01020c;
	color:#ffffff; 	
 }
 .login-right {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
 }
 .login-title {
     color: #ffffff;
     font-family: "NotoSansB", Segoe UI, Malgun gothic !important;
     font-size: 45px;
     margin-bottom: 5px;
     display:block;
	 font-weight: bold;
 }
 .login-description {
     margin-bottom: 20px;
     display:block;
     color:#ffffff;
 }
.login-section {}
 .login-section li {
     margin-bottom: 15px;
 }
 .login-section li span {
    display: flex;
    vertical-align: middle;
    width: 300px;
 }
 .login-section-input input {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    height: 30px;
    padding: 3px 10px;
    width: 100%;
    border-radius: 5px;
 }
 .login-section-txt {
     width:70px;
     color:#ffffff;
     font-size:14px;
 }
 .login-noti {
     background-color:#ffffff;
     display:block;
     width:100%;        
    padding:15px 0px;
     text-align:center;
     color:#ff0000;
 }
 #PlaceHolderMain_PlaceHolderMain_BatchLogDiv.bpv3_list {
	padding: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
 }
 .div-flex-gap {
	 display:flex;
	 gap:15px;
 }