@charset "utf-8";

/****************************************************************************
 *	common variable 
 ***************************************************************************/
:root {
	
	color-scheme: light only;
	
	--wrap-bg-color:#ffffff;
	--left-wrap-bg-color:#ffffff;
	--right-wrap-bg-color:#f5f6fa;
  
	--default-font-color:#15151f;

	--bg-color1:#ffffff;
	--bg-color2:#f5f6fa;
	--bg-color3:#f3f6ff;
	--bg-color4:#e8edfa;
	--bg-color5:#97aeed;
	--bg-color6:#1d4fd7;
	
	--gray-color1:#ebedee;
	--gray-color2:#e5e8ed;
	--gray-color3:#cbd1dc;
	--gray-color4:#8d99ae;
	--gray-color5:#747e8f;
	--gray-color6:#2b2d42;
	--gray-color7:#15151f;
	
	--btn-color1:#97aeed;
	--btn-color2:#1d4fd7;
	--btn-color3:#0011c7;
	--btn-color4:#ed1b23;
	--btn-color5:#26c054;
	
	--common-black:#404040;
	--common-blue:#1E90FF;
	--common-gray:#c6c6c6;
	--common-green:#32cd32;
	--common-orange:#ff8c00;
	--common-purple:#cc7df5;
	--common-red:#ff0000;
	--common-ultramarine:#1d4fd7;
	--common-white:#ffffff;
	--common-yellow:#fcf358;
	
	--tr-event:#F8EBEB;
}

::-webkit-scrollbar {
	width:5px;
	height:5px;
	border-radius:10px;
}
::-webkit-scrollbar-track {
	background-color:#ffffff;
}
::-webkit-scrollbar-thumb {
	background-color:var(--gray-color4);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
	background: #b1b1b1;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
	width: 1px;
	height: 1px;
	background: #ffffff;
}

@keyframes rotate-obj {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes blink-obj {
	50% {
		opacity: 0;
	}
}

/****************************************************************************
 *	default setting
 ***************************************************************************/
html, body, form, input, select, textarea, div, table, button {
	font-family:Pretendard;
	font-weight:300;
	font-size:14px;
	color:var(--default-font-color);
} 

div {
	margin:0px;
	padding:0px;
	box-sizing: border-box !important;
}

a {text-decoration:none; cursor:pointer; color:#5684e9; }
a:hover {text-decoration:underline; cursor:pointer; color:#5684e9; }



input[type=text], input[type=password], select {
	box-sizing: border-box;

	margin:0px;
	padding:0px 5px;
	height:24px;
	
	border:1px solid #c6c6c6;
	border-radius:5px;
}

input[type=text]::placeholder, input[type=password]::placeholder, select::placeholder {
	color:var(--gray-color3);
}

input[type=text].search {
	background-image:url("/image/app/svg/gray/icon_search.svg");
	
	background-repeat:no-repeat;
	background-position:right 5px center;
	background-size:15px;
	
	padding:10px 25px 10px 5px;
}

/* 
input[type=text].search:focus {
	background-size:0px;
} 
*/

textarea {
	box-sizing: border-box;

	margin:0px;
	padding:5px;
	resize:none;
	
	border:1px solid #c6c6c6;
	border-radius:5px;
}

textarea:hover {
	border:1px solid #858585;
}

input[type=text]:hover, input[type=password]:hover {
	border:1px solid #858585;
}

input[readonly], select[readonly], textarea[readonly] {
	background-color:#f5f5f5;
}

img {
	border:0px;
	padding:0px;
	margin:0px;
}

/****************************************************************************
 *	common class 
 ***************************************************************************/
.link { text-decoration:none; cursor:pointer; color:#5684e9; }
.link:hover { text-decoration:underline; cursor:pointer; color:#5684e9; }
.link.gray { color:#666666; }
.link.gray:hover { color:#666666; }
.link.red { color:#ff1620; }
.link.red:hover { color:#ff1620; }

.cp { cursor:pointer; }
.textLeft { text-align:left !important; }
.textCenter { text-align:center !important; }
.textRight { text-align:right !important; }
.textCut { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ma0 { margin:0px !important; }
.mt0 { margin-top:0px !important; }
.mr0 { margin-right:0px !important; }
.mb0 { margin-bottom:0px !important; }
.ma3 { margin:3px !important; }
.mt3 { margin-top:3px !important; }
.mr3 { margin-right:3px !important; }
.mb3 { margin-bottom:3px !important; }
.ml3 { margin-left:3px !important; }
.ma5 { margin:5px !important; }
.mt5 { margin-top:5px !important; }
.mr5 { margin-right:5px !important; }
.mb5 { margin-bottom:5px !important; }
.ml5 { margin-left:5px !important; }
.ma10 { margin:10px !important; }
.mt10 { margin-top:10px !important; }
.mr10 { margin-right:10px !important; }
.mb10 { margin-bottom:10px !important; }
.ml10 { margin-left:10px !important; }
.ma15 { margin:15px !important; }
.mt15 { margin-top:15px !important; }
.mr15 { margin-right:15px !important; }
.mb15 { margin-bottom:15px !important; }
.ml15 { margin-left:15px !important; }
.ma20 { margin:20px !important; }
.mt20 { margin-top:20px !important; }
.mr20 { margin-right:20px !important; }
.mb20 { margin-bottom:20px !important; }
.ml20 { margin-left:20px !important; }

.pa0 { padding:0px !important; }
.pt0 { padding-top:0px !important; }
.pr0 { padding-right:0px !important; }
.pb0 { padding-bottom:0px !important; }
.pa3 { padding:3px !important; }
.pt3 { padding-top:3px !important; }
.pr3 { padding-right:3px !important; }
.pb3 { padding-bottom:3px !important; }
.pl3 { padding-left:3px !important; }
.pa5 { padding:5px !important; }
.pt5 { padding-top:5px !important; }
.pr5 { padding-right:5px !important; }
.pb5 { padding-bottom:5px !important; }
.pl5 { padding-left:5px !important; }
.pa10 { padding:10px !important; }
.pt10 { padding-top:10px !important; }
.pr10 { padding-right:10px !important; }
.pb10 { padding-bottom:10px !important; }
.pl10 { padding-left:10px !important; }

.bold { font-weight:bold; }
.fl { float:left; }
.fr { float:right; }
.cb { clear:both; }
.vt { vertical-align:text-top; }
.vb { vertical-align:text-bottom; }
.scroll { overflow:auto;}
.star { color:red; font-weight:normal; }

.hide { display: none; }
/****************************************************************************
 *	searchLayer
 ***************************************************************************/
.search-layer {
	width:100%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
}

.search-layer.right {
	justify-content:flex-end;
}

.search-layer > .search-text-set {
	/* flex-grow:1; */
}

.search-result {
	display:none;
	
	padding:5px;
	
	position:absolute; 
	z-index:1; 
	overflow-y:scroll; 
	height:auto; 
	max-height:400px;
	border:1px solid var(--gray-color3);
	background-color:var(--bg-color1);
	border-radius:5px;
}

.search-result > div {
	padding:3px 5px;
	cursor:pointer;
}

.search-result > div:hover {
	background-color:var(--bg-color4);
	border-radius:5px;
}

/****************************************************************************
 *	Contents
 ***************************************************************************/


/****************************************************************************
 *	button
 ***************************************************************************/
/* 기본 버튼 */
.button {
	
	margin:1px; 

	height:24px;
	
	background-color:var(--bg-color1);
	border:1px solid var(--gray-color3);
	border-radius:10px;
	
	font-weight:400;
	
	cursor:pointer;
	padding:3px 10px;
	
    /* box-shadow:2px 2px 5px 0px #c6c6c6; */
    /* transition:background-color 0.3s ease, border-color 0.3s ease; */
    
}

.button:hover {
	background-color:var(--bg-color2);
	border:1px solid var(--gray-color4);
	font-weight:500;
}

.button.blue {
	background-color:var(--btn-color2);
	border:1px solid var(--btn-color2);
	color:var(--bg-color1);
}

.button.blue:hover {
	background-color:var(--btn-color3);
	border:1px solid var(--btn-color3);
	color:var(--bg-color1);
}

.button.blue2 {
	background-color:var(--common-blue);
	border:1px solid var(--common-blue);
	color:var(--bg-color1);
}

.button.blue2:hover {
	background-color:var(--btn-color2);
	border:1px solid var(--btn-color2);
	color:var(--bg-color1);
}

.button.black {
	background-color:var(--common-black);
	border:1px solid var(--common-black);
	color:var(--bg-color1);
}

.button.black:hover {
	background-color:#000000;
	border:1px solid #000000;
	color:var(--bg-color1);
}

.button.red {
	background-color:var(--common-red);
	border:1px solid var(--common-red);
	color:var(--bg-color1);
}

.button.red:hover {
	background-color:var(--btn-color4);
	border:1px solid var(--btn-color4);
	color:var(--bg-color1);
}

.button.gray {
	background-color:#cbd1dc;
	border:1px solid #b3bdce;
	color:#ffffff;
}

.button.gray:hover {
	background-color:#c0c8d6;
}

.button.green {
	background-color:#32cd32;
	border:1px solid #2bac2b;
	color:#ffffff;
}

.button.green:hover {
	background-color:#2fbf2f;
}

.button.orange {
	background-color:#ff8c00;
	border:1px solid #df7b00;
	color:#ffffff;
}

.button.orange:hover {
	background-color:#f48700;
}

.button.purple {
	background-color:#cc7df5;
	border:1px solid #be5ef2;
	color:#ffffff;
}

.button.purple:hover {
	background-color:#c66ff4;
}

.button.yellow {
	background-color:#fcf358;
	border:1px solid #e6da04;
	color:var(--gray-color5);
}

.button.yellow:hover {
	background-color:#f7eb04;
}

.button.page-number {
	border-radius:5px;
	height:20px;
	padding:0px 5px;
	background-color:var(--bg-color1);
	border:1px solid var(--bg-color1);
	color:var(--gray-color7);
}

.button.page-number:hover {
	background-color:var(--gray-color5);
	border:1px solid var(--gray-color5);
	color:var(--bg-color1);
}

.button.page-number.active {
	background-color:var(--gray-color7);
	border:1px solid var(--gray-color7);
	color:var(--bg-color1);
}

/****************************************************************************
 *	FileUpload Style
 ***************************************************************************/
.fileProgress{
	color:#6e6e6e;
/*  	color:#fefefe; */
}
 
.fileIcon{
	width:16px;
	height:16px;
}
 
.filenameDisplay{
}