@charset "utf-8";

/* Noto*/
@font-face {font-family:'Noto'; src:url('../font/NotoDL.otf') format('opentype'); src:local(※), url('../font/NotoDL.woff') format('woff'); font-weight: 300;}
@font-face {font-family:'Noto'; src:url('../font/NotoR.otf') format('opentype'); src:local(※), url('../font/NotoR.woff') format('woff'); font-weight: 400;}
@font-face {font-family:'Noto'; src:url('../font/NotoB.otf') format('opentype'); src:local(※), url('../font/NotoB.woff') format('woff'); font-weight: 500;}
@font-face {font-family:'Roboto'; src:url('../font/Roboto-Regular.otf') format('opentype'); src:local(※), url('../font/Roboto-Regular.woff') format('woff');}

/*Reset*/
*{box-sizing: border-box;}
html, body, div, span, p, a, address, big, cite, 
h1, h2, h3, h4, h5, h6, em, img, strong, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, 
menu, nav, section, summary,time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, main, nav, section {display: block;}
h1, h2, h3, h4, h5, h6, h7{clear:both; font-weight:normal;}
.loader h1{clear:both; font-weight:normal; font-size:xx-large; color:white}
ol, ul {list-style: none;}
td {word-break:break-all;}
a, a:hover{color: inherit; text-decoration: none; font-family:inherit;}
em, i, address{font-style:normal;}
button{cursor: pointer; border: 0; font-family:Roboto, Noto;}
img {vertical-align:middle; border:0}
hr{border:0; border-bottom:1px dashed #b9b9b9; margin:8px 0 12px; }
input{margin:0; border:1px solid rgba(0,0,0,0.3); color:#555; letter-spacing: -1px; background:#fff;}

/*common*/
.fl{float:left !important}
.fr{float:right !important}
.clb{clear:both !important}
.al{text-align:left !important;}
.ar{text-align:right !important;}
.ac{text-align: center !important;}
.hidden {visibility:hidden !important; overflow:hidden !important; width:0 !important; height:0 !important; font-size:0 !important; line-height:0 !important; margin:0 !important}
.ml15{margin-left:15px !important;}
.mt15{margin-top:15px !important;}

html{width: 100%; height: 100%; min-width:1920px; min-height:900px;}
body{background: #eee; height:100%; font-family:'Roboto','Noto','san-serif'; line-height: 1.15; font-size: 1.1rem; letter-spacing: -0.02em;  }

#wrapper{width: 100%; height: 100%;}

/*Top메뉴*/
.navbar{height:60px; min-height:60px; margin-bottom:0; border:none; border-radius:0; box-shadow: 0px 2px 2px -2px rgba(0,0,0,0.15);} 
.navbar-default{position:absolute; left:300px; background: #fff;}
.navbar-default .nav > li>a, .navbar-default .nav>li>a:focus { color: #000;  font-size: 15px;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: #fff !important; margin-left:300px !important;}
.navbar-default .navbar-toggle { border-color: #6445ff;}
.navbar-default .navbar-toggle .icon-bar { background: #6445ff !important;}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {color: #fff !important; background-color: #8F85E8 !important;}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { background-color: #7162ff; color: #fff !important;}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {background-color: #8F85E8;color: #fff !important;}
.navbar-brand {height:66px; text-align:center; vertical-align:middle; padding:17px 28px;}
.navbar-brand > img{text-align:center; vertical-align:middle}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {background: none !important; color: #fff !important;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover { background: #8F85E8; !important; color: #fff !important;}
.navbar-default .navbar-brand { color: #c0c8d3 !important;}
.navbar-fixed-top{position:inherit;}
.navbar-nav{margin:0}
.dropdown-menu>li>a {color: #fff !important;}
.dropdown-menu { min-width: 168px; background: rgb(0, 21, 132); width: 168px;}	
.dropdown-menu>li>a:hover {background: #8F85E8 !important;  color: #fff !important;}
/*운수사 위반현황*/
nav .company {height:100%; display:inline-block; color:#000; padding:5px 20px 0 40px }
nav .company h2{float:left; line-height:50px;}
nav .company ul{float:left; margin-left:5px; font-size:1rem; margin-top:10px;}
nav .company li{display:inline-block; position:relative; padding-left:70px; margin-right:15px;  border-left:1px solid #d9d9d9; }
nav .company li:first-child{border-left:none;}
nav .company li::before{content:""; display:block; width:38px; height:34px; position:absolute; left:20px }
nav .company li.drink::before{top:-3px; background:url('../images/bg_sprite.png')no-repeat 8px 0; }/*음주*/
nav .company li.narrow::before{top:-5px; background:url('../images/bg_sprite.png')no-repeat -36px 0;}/*몰림*/
nav .company li.interval::before{top:-5px; background:url('../images/bg_sprite.png')no-repeat -81px 0;}/*벌어짐*/
nav .company li.earlyArr::before{top:-5px; background:url('../images/bg_sprite.png')no-repeat -125px 0;}/*조착*/
nav .company li.earlyStart::before{height:31px; top:-2px; background:url('../images/bg_sprite.png')no-repeat -168px 0;}/*조발*/
nav .company li.delay::before{top:-2px; background:url('../images/bg_sprite.png')no-repeat -208px 0;}/*연발*/
nav .company li strong{color:#f86b4f; font-size:1.8rem; font-weight:500; margin-left:15px; vertical-align:sub;}

/*조합 위반현황*/
nav .union {display:inline-block; color:#000; padding:5px 20px 0 40px; margin-top:10px; }
nav .union dl{float:left;}
nav .union dl dt{float:left; border-radius:40px; background:#ededed; font-size:1rem; padding:5px 11px;}
nav .union dl dd{float:left; display:inline-block; position:relative; padding:0 45px 0 10px; margin:6px 10px 0 0; border-right:1px solid #d9d9d9; font-size:1rem; }
nav .union dl dd:last-child{border-right:none;}
nav .union dl dd::after{content:""; display:block; position:absolute; width:28px; height:25px; top:-4px; right:10px;}
nav .union dl dd.on::after{background:url('../images/bg_sprite.png')no-repeat -35px -37px;}
nav .union dl dd.off::after{background:url('../images/bg_sprite.png')no-repeat -4px -35px;}

/*로그인정보*/
.navbar .loginInfo{float:right; font-size:0.95rem; margin:18px 30px 0 0; color:#485560; }
.navbar .loginInfo button{background:rgba(45,53,62,0.5); color:#FFF; padding:5px 8px; margin-left:10px;}
.navbar .loginInfo button:hover{box-shadow:inset 2px 2px 3px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8);}

	/*@media (max-width: 911px) {
	  .navbar-header {float: none;}
	  .navbar-left,.navbar-right {float: none !important;margin: 0 auto !important;}
	  .navbar-toggle { display: block;}
	  .navbar-collapse {border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);  }
	  .navbar-fixed-top {top: 0; border-width: 0 0 1px;	  }
	  .navbar-collapse.collapse {display: none!important;}
	  .navbar-nav {float: none!important; margin-top: 7.5px;}
	  .navbar-nav>li {float: none;}
	  .navbar-nav>li>a {padding-top: 10px;   padding-bottom: 10px;	  }
	  .collapse.in{display:block !important; }
	}
	@media (min-width: 768px) {
	    .navbar-nav-size > li > a {padding-top: 10px; padding-bottom: 10px;}
	    .navbar-nav-size > li > ul > li > a {padding-top: 8px; padding-bottom: 8px; padding: 10px 15px 10px 38px;  }
	    .navbar-nav-size > li > ul > li > ul {list-style: none; padding: 0; text-align: center; }
	    .navbar-nav-size > li {border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
	    .navbar-nav-size > li > ul > li {border-bottom: 1px solid rgba(255, 255, 255, 0.15);}
	    .navbar-nav-size > li > ul > li > ul > li {border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
	    .navbar-nav-top > li {border-left: 1px solid #d0d0d0; }
	    .dropdown-submenu {position: relative;}
	   	.dropdown-submenu .dropdown-menu {top: 0; left: 100%; margin-top: -1px; }
	    .dropdown-submenu {position: relative;}
	    .dropdown-submenu > .dropdown-menu {top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px;  -moz-border-radius: 0 6px 6px;    border-radius: 0 6px 6px 6px;}
	    .dropdown-submenu:hover > .dropdown-menu { display: block;}
	    .dropdown-submenu > a:after {display: block;  content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid;  border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px;  margin-right: -10px;  }
	    .dropdown-submenu:hover > a:after { border-left-color: #fff; }
	    .dropdown-submenu.pull-left {float: none; }
	    .dropdown-submenu.pull-left > .dropdown-menu {left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px;  border-radius: 6px 0 6px 6px;}
	}*/
	@media(min-width:1645px) {
		.dropdown{text-align: center;width:168px;}
		.dropdown-big{width:222px;}
	}
	
	@media(max-width:1280px) {
		.dropdown-menu {  min-width: 149px;   background-color: rgb(0, 21, 132);   width: 149px;}
	}

/*Left메뉴*/
.side-nav {position: fixed; top: 0; left: 0px; width: 300px; border: none; border-radius: 0; overflow-y: auto; background: #34495e; bottom: 0; overflow-x: hidden; box-shadow: 3px 0px 3px -3px rgba(0,0,0,0.2);}
.side-nav>li {border-bottom: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.05); }
.side-nav>li>a {display: block; width: 300px; color:#FFF; padding:5px 0; font-size:1.15rem; font-weight:400; padding:12px 0 12px 25px;}
.side-nav li a:hover, .side-nav li a:focus {background:none; color: #7cbde8;}
.side-nav>li.active{ position: relative; background:none; color: #7cbde8 !important;}
.side-nav>li>ul { }
.side-nav>li>ul>li{background:#FFF; color:#424242; padding:2px 5px;}
.side-nav>li>ul>li>a {display: block; padding: 5px 5px 5px 38px; color:#424242; font-size:0.95rem; text-decoration:none;}
.side-nav>li>ul>li>a:hover {}
.side-nav>li>ul>li.active {position: relative;background: #7cbde8; color: #485560;}
.side-nav>li>ul>li.active a{color: #485560;}
	.collapse.in {}
	
.side-nav ol{display:inline-block; margin:25px;}
.side-nav ol li{display:block;  font-size:1rem; line-height:180%;}
.side-nav ol li a{color:rgba(255,255,255,0.5);}
	
/*sub title영역(사용안함)*/
.sectionHeader{} 
	.container .pageHeaderContainer {min-height: 50px; width: 85%;}
	.row{margin:0;}
	.headerText{ padding-left: 45px; letter-spacing: 14px;    font-size: 26px !important;   opacity: 0.8;  color: black;}
	.panel-info{border-color:none;}
	.panel-info > .panel-heading {color: #2b2f3e; background: rgb(242, 242, 242); border-color: rgb(170, 170, 170);}
	
	@media only screen and (max-width: 768px) {
	.headerText {padding-left: 0px; }
	.h1, h1 {font-size: 18px;}
	.h4, h4 {}	   
	.LoginHeader{margin: 10 auto;color: #2d3c51;padding-left: 5px;letter-spacing: 5px;font-size: 15px;}
	}	
.sectionHeaderImg{-webkit-filter: grayscale(50%);filter: grayscale(50%);background-attachment: fixed;}
.marker-label { background: white; border: 1px solid #ccc; text-align: center; padding: 2px 5px;}
.divide-page-left{width:15%;float:left;padding-left: 30px;}
.divide-page-right{width:85%;float:right;padding-left: 50px;   padding-right: 30px;}
	
.list-arrow{float:left; top: 3px; font-size:0.1rem; margin-right:5px }
.list-arrow-top{top: 3px; margin-left: 5px;}
	
 /*sub content영역*/
section{float:right; width:calc(100% - 300px); height:inherit;}
.sectionContent{padding:30px 35px 0;}
	.sectionContent h3.panel-title {text-align:left; margin-bottom:5px}
	.sectionContent h3.panel-title strong{color:#000; font-size:1.7rem; font-weight:500; }
	.sectionContent h3.panel-title span{color:#4e4e4e; font-size:11px; font-family:'Dotum','돋움'; letter-spacing:0.01em; margin-left:20px;} 

.pageContainer{background:#FFF; min-height: 650px; width: 100%; }
.container{width:auto; padding:13px 15px 8px;}
.container h4{font-size:1.2rem; color:#34495e;}

/*tab스타일*/
.tab{clear:both; position:relative; width:100%; display:block; margin-bottom:15px; }
.tab:after{content:""; width:100%; position:absolute; top:35px; left:0; border-bottom:2px solid #34495e;}
.tab li{display:inline-block; background:#e9e9e9; color:#757575; font-size:1.2rem; text-align:center; padding:8px 40px 5px; margin-left:-2px;}
.tab li a:hover{color:#333}
.tab li:first-child{margin-left:0}
.tab li:last-child{border:none;}
.tab li.select{position:relative; background:#fff; color:#000; border-left:2px solid #34495e; border-right:2px solid #34495e; border-top:2px solid #34495e; }
.tab li.select:after{content:""; width:100%; position:absolute; top:33px; left:0; border-bottom:2px solid #fff; z-index:5;}
.tab li.select a:hover{color:#34495e}

/*검색*/
fieldset{display:table; background:#34495e; padding:10px 10px 5px; font-size:1rem; color:#FFF; margin:0 0 15px;}
fieldset .form-group{display:inline-flex; float:left; margin:0 15px 0 0; line-height:initial; width:auto;}	
fieldset label{width:auto; padding:2px 5px; font-size:0.9rem;}
fieldset input[type="text"], fieldset input[type="password"] fieldset select{border:rgba(0,0,0,0.3); width:100px;}
fieldset .form-actions{float:left;}
fieldset .clb{display:inline-block; margin-top:8px;}
fieldset .btn{background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.15);  color:#FFF; border-radius:1px; padding:4px 10px}
fieldset .btn:hover{box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8); border:1px solid rgba(255,255,255,0.15); color:#FFF;}
	.input-group{width: 100%;}

/*게시판(View & Write)*/
.tblView table{width:100%; text-align:left; border-top:2px solid #34495e;}
.tblView th{text-align:left; font-size:1rem; color:#333; background:#f2f2f2; border-right:1px solid #c2c2c2; font-weight:400;}
.tblView tr{border-bottom:1px solid #c2c2c2}
.tblView th, .tblView td{padding:10px 30px; font-size:1rem; color:#424242;}

.form-horizontal .control-label { color: #002776;}
.btn-primary:hover {color: #fff; background: #2d3c51; border-color: #2d3c51;}
.btn-primary{color: #fff;  background: #3f5574;   border-color: #3f5574;}
.btn-primary-delete{padding: 0px 12px !important; color: #fff; background: #3f5574; border-color: #3f5574;}
.search-input{ width: 47% !important; height: 34px !important;}
.time-search-input{width: 6% !important; height: 34px !important;}
.search-btn {background: transparent; border: none; position: absolute; overflow: hidden; right: 1px; top: 50%; height: 40px; width: 42px; outline: none; margin-top: -20px; line-height: 38px; font-size: 1rem; color: #d9d9d9;}
.modalText{letter-spacing: 10px;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background: #FFAD00;   border-color: #FFAD00;  color: rgba(0, 0, 255, 0.52);}
.pagination>li>a, .pagination>li>span {color: rgba(0, 0, 255, 0.52);}
.collapseMain.in { display: block; background: #02114a;}
.collapseMain { display: none;}

.fillResponsive { width: 100% !important; height: 125% !important; background-position: center !important;
    -moz-background-size: cover !important;  background-size: cover !important; background-repeat: no-repeat;}
.finishHr{border-top: 3px solid rgba(255, 173, 0, 0.7); width: 10%;}

.panel-default>.panel-heading { background: #FFAD00;}
.circleColor{color: rgba(0, 0, 255, 0.52);}

.carousel-inner {height: 100% !important;}
.fill {width: 101% !important; height: 118% !important; background-position: center !important; 
	-webkit-background-size: cover !important;  -moz-background-size: cover !important; background: no-repeat;  background-size: cover !important; -o-background-size: cover !important;}
.carousel-control.right { background-image: none !important; background-image: none !important; background-image: none !important; background-image: none !important;}
.carousel-control.left { background-image: none !important; background-image: none !important; background-image: none !important; background-image: none !important;}

.footerSection{display:none; background: #f7f7f7;}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {background: #ddddff !important; border-color: #bfbfff!important;}
.breadcrumb {background: #faf9e2 !important;}
.footerStyle{ text-align: center;color: #b1b1b1;}
.text-primary { color: #ddddff !important;}
	
/*--------------------login layout----------------------------*/
.LoginDiv{border-radius: 10px;background: rgba(255,255,255,0.5);max-width: 400px;padding: 25px;	margin: 0% auto;}
.Loginbtn{border: 1px solid transparent !important;	width: 100%;}
.LoginHeader{margin: 10 auto;color: #2d3c51;padding-left: 23px;letter-spacing: 15px;}
.navLogout{  margin-right: 20px;}

.small-list-div{height:25px;}
	@media(min-width:911px) {
    /*#wrapper {padding-left: 200px;}*/
    #wrapper.toggled {padding-left: 0;}
    #sidebar-wrapper {width: 250px;}
    #wrapper.toggled #sidebar-wrapper {width: 0;}
	#page-content-wrapper {padding: 20px; position: relative;}
    #wrapper.toggled #page-content-wrapper {position: relative; margin-right: 0;}
	.nav > li > ul.collapse.in {}
	.nav > li > ul.collapseMain.in { border-left: 4px solid #7becd6;}
	}
	
/*--------------------UI Grid----------------------------*/
.grid{height: 650px;/*min-height:650px;*/ font-size:1rem;}
.grid-header-align{ text-align:center;}
.grid-text-align{text-align:center;}
.grid-lastcol-align{text-align:right;}
.ui-grid-column-menu-button-last-col { margin-right: 0px !important;}

.subGrid{height:437px; font-size:1rem;}

.grid-loading { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 1.5em; z-index: 100; background:rgba(168, 168, 168, 0.20); background-repeat: no-repeat; background-position: center; left: 0; bottom: 0; right: 0; top: 0;}
.page-loading { position: absolute; width: 100%; height: 100%; text-align: center; font-size: 1.5em; z-index: 100; background:rgba(0, 0, 0, 0.95);background-repeat: no-repeat; background-position: center; left: 0; bottom: 0; right: 0; top: 0;}
.LoadingImg{ position: absolute; left: 45%; top: 50%;}

/*--------------------UI Grid Control Header----------------------------*/
.yellow-col{
	background-color: yellow;
}
.ddl-form{
    width:50% !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.ddl-form-120{
    width:120px !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.ddl-form-150{
    width:150px !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.ddl-form-180{
    width:180px !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.ddl-form-200{
    width:200px !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.ddl-form-250{
    width:250px !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    /*border-radius: 4px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.ddl-form-accept{
    width:20% !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.ddl-type-form{
    width:9% !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.ddl-line-form{
    width:10% !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.register-ddl-form{
    width:100% !important;
    font-size:0.95rem;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
/*------------------------------------------------------------*/
/*----------------------------FILE UPLOAD--------------------------------*/
table { border-collapse: collapse; }
.percent {position: absolute; width: 470px; height: 14px; z-index: 1; text-align: center; font-size: 0.8em; color: white;
}
.progress-bar {width: 100%; height: 14px; border-radius: 10px; border: 1px solid #CCC; background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95)); border-image: initial;}
.uploaded {padding: 0; height: 14px; border-radius: 10px;background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500)); border-image: initial;}
.dropbox { width: 100%; height: 3em; border: 2px solid #DDD; border-radius: 8px; background: #FEFFEC; text-align: center; color: #BBB; font-size: 2em;}
.dropbox span {margin-top: 0.9em; display: block;}
.dropbox.not-available { background: #F88;}
.dropbox.over {background: #bfb;}
/*------------------------------------------------------------*/

.search-menu-left {float: left;}
.search-menu-right {position:relative; float: right; margin-top:-20px;}
.tblView .search-menu-right{ margin-top:10px !important;}
.search-menu-left button, .search-menu-right button{background:rgba(45,53,62,0.8); color:#FFF; padding:6px 15px; font-size:1rem; border:0 none; border-radius:2px}
.search-menu-left button:hover, .search-menu-right button:hover{box-shadow:inset 2px 2px 3px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.9); color:#7cbde8;}

.search-menu-left-355 {float: left; width: 355px; display: table;}
.search-menu-left-550 { float: left; width: 550px; display: table;}
.search-menu-left-715 {float: left; width: 715px; display: table;}
.search-menu-accept-left {float: left; display: table; width: 523px;}

.input-form-control {display: block; padding:3px; font-size:0.95rem;  color: #424242; background: #fff; 
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

.input-ddl-form{
     padding:0px 3px; font-size:1rem;  color: #424242; vertical-align: middle; background: #fff;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);   box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;}

.input-form-control-modal {width:40%; padding: 0px 3px; font-size:1rem;  color: #424242;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

.input-ddl-form-modal{height:28px; padding: 0px 3px; font-size:1rem;  color: #424242; vertical-align: middle;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;}
.date-form-control{ width:100px; height:38px; padding: 3px 6px; font-size:1rem;  color: #424242; vertical-align: middle;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

.date-search-control{width:100px; padding: 0px 3px; font-size:1rem;  color: #424242; vertical-align: middle;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

	@media(max-width:1440px) {
		.divide-page-left {width: 30%; float: left; padding-left: 30px;}
		.divide-page-right { width: 70%; float: right; padding-left: 50px;padding-right: 30px;}
	}
.loginHeaderImg{width: 100%;}

.login-form-control {
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 1rem;
    line-height: 1.42857143;
    color: #555;
    background: #fff;
    background-image: none;
    border: 1px solid #ccc;
    /*border-radius: 2px;*/
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin-bottom: 10px;
}

.login-btn-primary {
    color: #fff;
    background: #404040;
    border-color: #3f5574;    
    width: 100%;
    height: 50px;
    margin-top: 10px;
}

.login-btn-primary:hover {
    color: #fff;
    background: #006e96;
    border-color: #2d3c51;
}

/*----------------------------FILE UPLOAD--------------------------------*/
.percent {position: absolute; width: 30%; height: 14px; z-index: 1; text-align: center; font-size: 0.8em; color: white;}
.progress-bar {width: 100%; height: 14px; border-radius: 10px; border: 1px solid #CCC; background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95)); border-image: initial;}
.uploaded { padding: 0; height: 14px; border-radius: 10px; background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500)); border-image: initial;}
.dropbox {
    width: 100%;
    height: 3em;
    border: 2px solid #DDD;
    border-radius: 8px;
    background: #FEFFEC;
    text-align: center;
    color: #BBB;
    font-size: 2em;
    font-family: Arial, sans-serif;
}
.dropbox span { margin-top: 0.9em; display: block;}
.dropbox.not-available {background: #F88;}
.dropbox.over {background: #bfb;}

/*------------------------------------------------------------*/
.signatureImgDiv{ text-align: center;}
.signatureImgDiv:before{ content: ''; height: 100%; display: inline-block; vertical-align: middle;}
.signatureImg{display: inline-block;vertical-align: middle;border: 10px solid rgb(0, 21, 132); border-style: inset;}
.signatureContainer{width:35%;}

	@media(max-width:500px) {
	.signatureContainer{width:100%}
	.percent {position: absolute; width: 100%; height: 14px; z-index: 1; text-align: center; font-size: 0.8em; color: white;}
}
	
.two-divide-page-left{width:70%; float:left;}
.two-divide-page-right{width:30%; float:right;}
.two-divide-page-left-65{width:65%; float:left; }
.two-divide-page-right-35{width:35%; float:right;}
.two-divide-page-left-50{width:49.5%; float:left; padding-right:0.5% }
.two-divide-page-right-50{width:49.5%; float:right;}
.two-divide-page-left-40{width:35%; float:left; padding-right:1% }
.two-divide-page-right-60{width:64%; float:right;}
.two-divide-payment-page-left{	width:50%; float:left;}
.two-divide-payment-page-right{width:50%; float:right;}

.approval-toggle-span{width: 150px;}
.toggle{width: 150px;}
.divide-page-left-40 {width:40%;float:left;padding-left: 65px;padding-rigth: 25px;}
.divide-page-right-60 {	width:60%;	float:right;	padding-left: 50px;	padding-rigth: 0px;}
.divide-page-left-50 {	width:50%;	float:left;	padding-left: 30px;	padding-rigth: 15px;}
.divide-page-right-50 {	width:50%;	float:right;	padding-left: 20px;	padding-rigth: 0px;}

.btn{font-size:0.9rem; font-weight:400; border-radius:2px; border:1px solid rgba(0,0,0,0.4); padding-top:5px; padding-bottom:5px;}
.btn-default{color:#FFF; border-color:rgba(255,255,255,0.15); padding-top:5px; padding-bottom:5px; background:-webkit-gradient(linear, left top, left bottom, from(#7dbce5), to(#519fd4));}
.btn-default:hover{box-shadow:inset 2px 2px 3px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8); border-color:rgba(0,0,0,0.2); color:#fff; }

.btn-default-cancel{color:#FFF; border-color:rgba(255,255,255,0.15); padding-top:5px; padding-bottom:5px; background:-webkit-gradient(linear, left top, left bottom, from(#FFA2A2), to(#FF6C6C));}
.btn-default-cancel:hover{box-shadow:inset 2px 2px 3px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8); border-color:rgba(0,0,0,0.2); color:#fff; }

/*------------------------------------------------------------*/
.approvalImgDiv{text-align: center;}
.approvalImgDiv:before{content: ''; height: 100%; display: inline-block; vertical-align: middle;}
.approvalImg{width: 1492px;	height: 1080px;display: inline-block; vertical-align: middle; border: 5px solid rgb(0, 21, 132); border-style: inset;}
.approvalContainer{width:90%;}
	@media(max-width:500px) {
		.approvalContainer{	width:100%}
		.percent {position: absolute; width: 100%; height: 14px; z-index: 1; text-align: center; font-size: 0.8em; color: white;}
	}

.approval-ddl-form{
    width:105px !important;
    height: 38px;
    padding: 6px 12px;
    font-size: 1rem;
    line-height: 1.4285;
    color: #424242;
    /* vertical-align: middle; */
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.document-ddl-form{
    width:188px !important;
    height: 38px;
    padding: 6px 12px;
    font-size: 1rem;
    line-height: 1.4285;
    color: #424242;
    /* vertical-align: middle; */
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.authImgDiv{}

.authImgDiv:before{ content: ''; height: 100%; display: inline-block; vertical-align: middle;}
.authImg{display: inline-block; vertical-align: middle; border: 1px solid rgb(0, 21, 132); border-style: inset;}
.approval-div{float: right;}
.documentImg{width: 1492px; height: 1080px;}
.approval-btn-default { width: 200px; border-color: #ccc !important;  height: 45px;}
.all-approval-btn { width: 100px; border-color: #ccc !important; height: 33px; float: right;}
.approval-grid{	height:700px;}

.approval-divide-page-left{width:35%; float:left;  padding-left: 30px;}
.approval-divide-page-right{width:65%; float:right;	padding-left: 50px; padding-right: 30px;}
.approve-divide-page-left{width:35%; float:left; padding-left: 30px;}
.approve-divide-page-right{width:65%; float:right; padding-left: 50px; padding-right: 30px;}
	@media(max-width:800px) {	
		.approve-divide-page-left{width:100%;float:left;   padding-left: 30px;padding-right: 30px;}
		.approve-divide-page-right{	width:100%;float:right;padding-left: 30px;   padding-right: 30px;}
		.divide-page-left{width:100%;float:left;padding-left: 30px;   padding-right: 30px;}
		.divide-page-right{	width:100%;	float:right;padding-left: 30px;   padding-right: 30px;}
		.two-divide-page-left{width:100%;float:left;padding-left: 30px;  padding-right: 30px;	}
		.two-divide-page-right{width:100%;float:right;padding-left: 30px;   padding-right: 30px;}
	}

.pdfStyle{width: 60px;}
.divForCanvas{border: 5px solid rgb(0, 21, 132); border-style: inset; width: 1027px; max-height: 700px;}
 
	@media(max-width:500px) {
		.documentImg{width: 350px;height: 300px;}	
		.pdfStyle{width: 30px;}
	}
.canvasDiv{overflow:scroll; text-align:center;	max-height:800px;	width: 1017px;	max-height: 643px;}
.approve-signatrue{max-width: 15%;	float: right;}

canvas {  display: inline;}
.pdf-btn-default {   width: 150px;  border-color: #ccc !important; height: 40px;}

.gridBtn{padding:0px 12px;  width: 50px;}
.modal-backdrop{  opacity:0.95 !important;}
.whole-content-page {width: 100%;  float: right;  padding-left: 30px; padding-right: 0px;}
.gridBtn{ width: 100%; height: 100%;  padding-left: 6%; padding-right: 7%; }
.grey-col{background: #848484;}
.green-col{background: #E6F8E0;}
.outFormButton{width: 100%;}
.modal-dialog-accident{width: 20%;}
.modal-dialog-changeOrder{width: 70%;}


	@media(max-width:1680px) {
		.documentImg{width: 700px;height: 500px;}
		.divForCanvas{border: 1px solid;	width: 880px;		max-height: 700px;	}
		.canvasDiv{	overflow:scroll;  	text-align:center;max-height:800px;width: 870px;max-height: 600px;}
		.pdf-btn-default {  width: 120px;  border-color: #ccc !important;  height: 30px;}
		.approval-btn-default {   width: 160px;   border-color: #ccc !important;   height: 45px;}
		.approval-grid{	height:600px;}
	}

	@media(max-width:1280px) {
		.documentImg{width: 670px;height: 500px;}
		.divForCanvas{	border: 1px solid;	width: 710px;	max-height: 600px;}
		.canvasDiv{		overflow:scroll;	   	text-align:center;	max-height:800px;width: 708px;	max-height: 500px;}
		.pdf-btn-default {    width: 85px;   border-color: #ccc !important;   height: 30px;}
		.approval-btn-default {   width: 130px;   border-color: #ccc !important;   height: 45px;}
		.approval-grid{height:400px;	}
	}
	
	@media(max-width:1024px) {
		.documentImg{width: 670px;height: 500px;}
		.divForCanvas{border: 1px solid;width: 480px;max-height: 600px;	}
		.canvasDiv{	overflow:scroll;  text-align:center;max-height:800px;width: 477px;max-height: 500px;	}
		.pdf-btn-default { width: 65px;   border-color: #ccc !important;   height: 30px;}
		.approval-btn-default {width: 95px;   border-color: #ccc !important;   height: 45px;}
		.approval-grid{height:400px;}
		.pdfStyle {    	width: 30px;}
		.signatrue-title{padding: 0px 0px;	}
	}
	
	@media(max-width:800px) {
		.documentImg{width: 670px;height: 500px;}
		.divForCanvas{border: 1px solid;width: 710px;max-height: 600px;}
		.canvasDiv{ overflow:scroll;  	text-align:center;	max-height:800px;  width: 708px; max-height: 500px; }
		.pdf-btn-default { width: 85px; border-color: #ccc !important;   height: 30px;}
		.approval-btn-default { width: 130px;  border-color: #ccc !important;   height: 45px;}
		.approval-grid{height:400px;}
		.pdfStyle {width: 60px;}
		.signatrue-title{padding: 0px 0px;}
	}
	
.redCell{
	background-color:#ec4a41 !important;
}
.blueCell{
	background-color:#519fd4 !important;
}