html, body{padding:0; margin:0; border:0; outline:0; background-color:#FAFAFA; font-size:1em;}
body{font-size:100%; vertical-align:baseline; font-family:arial,Droid Sans, sans-serif; color:#111; max-width:100%; overflow-x:hidden; font-family:'Roboto', sans-serif;}
div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font-size:100%; vertical-align:baseline; border:0; outline:0; background:transparent; margin:0; padding:0}
ol,ul {list-style:none}
blockquote,q {quotes:none}
html img{max-width:100%;}

a {color:#2872b1; text-decoration:none; cursor:pointer;}
a:hover {color:#0b4f8a; text-decoration:none; text-shadow:1px 1px 1px #AAA;}
quote{color:#777;}
u{text-decoration:none; border-bottom:1px dotted #E5E5E5;}
hr{height:0; border:0 none; border-top:1px solid #E5E5E5;}
p{font-size:0.875em;}

.cf {clear:both}
.cf:after {clear:both; content:" "; display:block; font-size:0; height:0; visibility:hidden}
.fl{float:left;}
.fr{float:right;}

.w99{width:99%;}
.w95{width:95%;}
.w70{width:70%;}

.hide{display:none;}

.pointer{cursor:pointer;}
.pointer:hover{cursor:pointer; box-shadow:1px 1px 2px #DDD;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

.bbd1{border-bottom:1px dotted #E5E5E5;}
.bbd2{border-bottom:5px dotted #777;}

.bg5{background-color:#555;}
.bgd{background-color:#DDD;}
.bgf0{background-color:#F0F0F0;}
.bg3c{background-color:#64adc5;}
.bgo1{background-color:#FFEFCF;}
.bgo2{background-color:#FFCBCB;}
.bgg1{background-color:#D1ECC7;}
.bgp1{background-color:#F8E5FF;}
.bgb1{background-color:#C5D4EC;}
.bgl_1{background:rgb(48,85,163);
background:linear-gradient(90deg, rgba(48,85,163,1) 0%, rgba(124,200,188,1) 57%, rgba(179,224,197,1) 79%, rgba(244,251,207,1) 100%);}
.white{color:#FFF!important;}

/* Border */
.bor_d1{border:1px solid #DDD;}
.bor_o1{border:1px solid #F2C0A7;}
.bor_g1{border:1px solid #A7F2AF;}
.bor_p1{border:1px solid #DEA7F2;}

/* Color */
.c_white{color:#FFF;}
.c_orange{color:#FF4D00;}
.c_grey1{color:#999;}
.c_grey2{color:#555;}
.c_green{color:#048e00 !important}
.c_green2{color:#07C401 !important}
.c_blue1, .c_blue1 a{color:#335995 !important}
.c_blue2, .c_blue2 a{color:#0b4f8a !important}
.c_red{color:#ff3000 !important}

/* Font */
.font10{font-size:10px!important; font-weight:normal;}
.font11{font-size:11px!important; font-weight:normal;}
.font12{font-size:12px!important; font-weight:normal;}
.font14{font-size:14px!important; font-weight:normal;}

/* Heading */
h1, h2, h3, h4, h5{font-weight:normal;}
h1{font-size:2em; line-height:1.5em;}
h2{font-size:1.5em; line-height:1.6em;}

/* Margin Padding */
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb40{margin-bottom:40px;}
.mr10{margin-right:10px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.mr20{margin-right:20px;}
.mr40{margin-right:40px;}
.mt20{margin-top:20px;}
.mt40{margin-top:40px;}

.ptb10{padding:10px 0;}
.ptb30{padding:30px 0;}
.pad10{padding:10px;}
.pad20{padding:20px;}
.pb10{padding-bottom:10px;}

.dib{display:inline-block;}
.w200px{width:200px;}
.w275px{width:275px;}

/* Box */
.titcon{height:15px;}
.boxactive{border:1px solid #2996f5!important;} /* blue */
.boxactive2{border:1px solid #f57f29!important;} /* orange */
.boxe1{border:1px solid #DDD; border-radius:3px; background-color:#F3F3F3; padding:20px; vertical-align:top;}

/* Wrapper */
.wrapper{max-width:1000px; width:100%; margin:0 auto;}
.wrapper2{max-width:100%; width:100%; margin:0;}
.wrapperin{padding:20px;}

/* Table */
.de_table{display:inline-table; width:100%;}
.de_table tr, .de_table td{}
.de_table td{padding:7px 10px; border-bottom:1px solid #DDD;}
.de_table th{background-color:#8c98a5; padding:5px 10px; color:#FFF; font-weight:normal;}

/* Form */
.input{padding:10px 20px; border:1px solid #DDD; border-radius:3px; max-width:97%; min-width:75%;}
.finput{border:1px solid #DDD; padding:10px 20px; border-radius:3px; background-color:#F5F5F5;}

/* Button */
.button_blue{background-color:#3f78ff;}
.button_green{background-color:#3ee130;}
.button_green2{background-color:#318b29;}
.button_brown{background-color:#c44a2e;}
.button_orange{background-color:#fd9220;}
.button_black{background-color:#111;}
.button_grey{background-color:#BBB;}
.button_purple{background-color:#bf6ef7;}

.button_blue, .button_green, .button_green2, .button_orange, .button_black, .button_brown, .button_purple, .button_grey{
	border:0px; color:white; padding:10px 15px; border-radius:3px; box-shadow:1px 1px 2px #777; font-size: 14px;
}

.button_blue:hover, .button_green:hover, .button_green2:hover, .button_orange:hover, .button_black:hover, .button_brown:hover, .button_purple:hover, .button_grey:hover{
	cursor:pointer; box-shadow:0 0 0 #555;
}

/* Header */
#header{background-color:#EEE;}
#header img{height:20px; width:auto; vertical-align:bottom; margin-right:10px; filter:invert(100%) sepia(600%) saturate(600%) hue-rotate(150deg) brightness(69%) contrast(69%);}

@media only screen and (max-width:640px){
	.h_logo, .h_menu, .h_search{max-width:100%; float:none; padding:5px 0;}
	.h_menu a{padding:0; margin-right:20px;}
	.h_search{margin:10px 0;}
	.h_search input{max-width:100%; width:77%; float:none; padding:10px;}
}

#scr_warning{position:absolute; height:auto; width:100%; background-color:#EEE; z-index:99; left:0; top:120px;}
#scr_content{width:70%; height:auto; padding:20px; background-color:#FFF; margin:50px auto; border:1px solid #DDD; border-radius:3px;}
#close_scr_warning{}

/* Writer */
.wrt_task_expand, .wrt_newpost_expand, .wrt_task_new_expand, .wrt_task_update_expand{width:19px; height:auto;}


/* Designer */
#user_id{font-weight:bold;}
.task_min_list, .task_min_list_new{border-bottom:1px dotted #EEE; margin-bottom:10px;}
.task_min_list:hover, .task_min_list_new:hover{background-color:#F3F3F3;}
.task_min_list .dsg_task_expand{width:19px; height:auto;}
.task_min_list_new .task_expand_new{width:19px; height:auto;}
#dsg_task_imgbox{height:800px; overflow-y:scroll;}
#dsg_task_completing_div img, .dsg_img_task img{max-width:100%; height:auto;} .dsg_img_task_new img{max-width:100%; height:auto;}
.a_icon{width:19px; height:auto; vertical-align:top;}

/* Tab Jquery */
#tabs{width:100%; height:30px; border-bottom:solid 1px #CCC; } 
#tabs li{ float:left; list-style:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px; border-top-left-radius:3px;  border-top-right-radius:3px; outline:none; }
#tabs li a{ font-size:14px; font-weight:bold; color:#5685bc; padding:5px 15px 7px 15px; display:block; background:#FFF; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; outline:none; border-bottom:1px solid #FFF;}
#tabs li a.inactive{ padding:5px 15px 7px 15px; color:#666666; background:#EEE; outline:none; border-bottom:solid 1px #CCC; }
#tabs li a:hover, #tabs li a.inactive:hover{color:#5685bc; outline:none; }
.tab_container{ clear:both; width:100%; text-align:left; padding:20px; max-height:1200px; overflow-y:scroll;}
.tab_container h2{ margin-left:15px; margin-right:15px; margin-bottom:10px; color:#5685bc; }
.tab_container p{ margin-left:15px; margin-right:15px; margin-top:10px; margin-bottom:10px; line-height:1.3; font-size:14px; }
.tab_container ul{ margin-left:25px; font-size:14px; line-height:1.4; list-style-type:disc; }
.tab_container li{ padding-bottom:5px; margin-left:5px;}
.task_expand_box{margin-bottom:30px;}

/* Leftbar */
#leftbar{float:left; background-color:#4f4f4f; color:#EEE; width:15%; height:95vh;}
#leftbar a{color:#DFEAEE;}
#leftbar .menu{padding:15px 20px; transition:0.3s;} 
#leftbar .menu:hover{padding:30px 20px; background-color:#FFF; color:#333;} 
#leftbar .menu:hover a{color:#333;} 
/* border-bottom:1px solid #406171; */
#leftbar .menu img{height:20px; width:auto; vertical-align:top; margin-right:15px;}
/* filter:invert(100%) sepia(79%) saturate(100%) hue-rotate(86deg) brightness(69%) contrast(69%); */
.menuactive{background-color:#FAFAFA; font-weight: bold;}
.menuactive a{color:#333 !important;}

/* Product */
.edit_products{cursor:pointer; margin-bottom:10px;}
.edit_products:hover{color:#0b4f8a;}

/* Main */
#main{float:left; width:85%;}

/* Main Left */
#data_task_wrap{width:27%; float:left; margin-right:20px; border-right:1px solid #EEE;}
.box_month, .box_year{display:inline-block; padding:7px; margin:3px; font-size:14px; border:1px solid #DDD; cursor:pointer;}
.ui-datepicker-today { background-color:#FFCFB8; }
#ui-datepicker-div{background-color:#FAFAFA; padding:20px;}

.box_dates{display:inline-block; border:1px solid #DDD; background-color:#F7F7F7; margin:10px 3px; font-size:13px;}
.box_dates_done{background-color:green; color:#FFF;}
.box_dates_done:hover{background-color:green;}
.box_dates_done a, .box_dates_done{color:#FFF;}
.box_dates_revision{background-color:orange; color:#FFF;}
.box_dates_revision:hover{background-color:orange;}
.box_dates_revision a, .box_dates_revision{color:#E54311;}

/* Main Right */
#task_main_wrap{float:left; width:70%;}

.wrt_ck{transform:scale(1.5);}

/* Report */
.menu_box_1{padding:5px 10px; border:1px solid #DDD; background-color:#EEE; display:inline-block; margin:2px;}
.menu_box_1_active{padding:5px 10px; border:1px solid #333; background-color:#333; display:inline-block; margin:2px; color:#FFF;}

/* Pagination */
.pagination{padding:20px 0; background-color:#EFEFEF;}
.pagination a{padding:3px 5px; border:1px solid #DDD; border-radius:3px; background-color:#EEE; margin:2px;}

/* Footer */
#footer{background-color:#EEE;}