/* action button delete*/
button, input {
    border: none;
}
button {
    background: none;
    cursor: pointer;
}

/* No outer space */
.main .space{
	padding: 0px;
	margin: 0px;
}

ul {
	list-style-type: none;
}

.container {
	border-radius: 5px;
	background-color: #575967;
	padding: 20px;
}

.label2 {
	float: left;
	width: 54%;
	margin-top: 6px;
	padding-left: 10px;
	font-size: 16px;
	color: white;
}

.label2 label{
	color: white;
	width: 50%;
	margin-top: 10px;
	margin-left: 40px;
}

.input {
	float: right;
	width: 75%;
	margin-top: 6px;
	padding: 12px;
}

.input_text {
	width: 85%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	resize: vertical;
	background-color: #eee;
	color: black;
	margin-left: 60px;
	margin-top: -60px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.img {
	flex-shrink: 0;
	min-width: 100%;
}

td {
	font-family: 'Russo One', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 0.9em;
}

th {
	font-family: 'Russo One', Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.2em;
}

.textHeader {
	color: black;
	border-bottom: 200px solid red;
	overflow: auto;
	font-weight: bold;
	font-family: 'Russo One', Arial, Helvetica, sans-serif;
}

  .page-content1 {
    position: relative;
    left: var(--page-header-width);
    width: calc(100% - var(--page-header-width));
    min-height: 300vh;	
    padding: 30px;
    background-color: #575967;
    color: black;
}


/* Announcement */
.round{
	width:20px;
	height:20px;
	border-radius:50%;
	position:relative;
	background:red;
	display:inline-block;
	margin-right: 38px;
	right: -15px;
	top: -3px;
  }

  .round > span {
	color:white;
	display:block;
	text-align:center;
	font-size:15px;
	padding-top: 1.5px;
  }

  #announcement_list{
	display: none;
	top: 33px;
	position: absolute;
	right: 2%;
	background: #F0E68C;
	z-index: 100;
	width: 28%;
	margin-left: -37px;	
  }

  .message{
	background:#FFFACD;
	padding-top: 5px;
	width:100%;
	display:block;
	color: blue;
	padding-bottom: 5px;
  }

  .message msg span {
	 width:90%;
	 color: blue;
	 font-size: 15px;
	 padding-top: 20px;
	 text-align:justify;
	 font-weight:bold;
	 display:block;
	 word-wrap: break-word;
  }
  
  .message > span {
	width:100%;
	display:block;
	color:blue;
	text-align:justify;
	margin:0.2rem 0.3rem !important;
	padding:0.3rem !important;
	line-height:1rem !important;
	font-weight:bold;
	font-size:28px;
	padding-bottom: 10px;

 }
  .message .date span{
	width: 90%;
	color: black;
	font-size: 14px;
	padding-top: 20px;
	text-align: justify;
	font-weight: bold;
	display: block;
	word-wrap: break-word;
 }
  
  .message .comment span{
	width: 90%;
	color: black;
	font-size: 15px;
	padding-top: 20px;
	text-align: justify;
	font-weight: bold;
	display: block;
	word-wrap: break-word;
 }

 /* Announcement dropdown design */
 ul #announcement_list li {
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: nowrap;
  }


  /*Task table*/
@media(max-width: 768px){
	.nav-tabs-custom{
	margin-top: 1rem;
	}
}

/* .nav-tabs-custom > li.active > a, .nav-tabs-custom > li .active > a:focus, .nav-tabs-custom > li.active > a:hover{
	background-color: #E2B840;
}

.nav-tabs-custom > li.active > a, .nav-tabs-custom > li.active > a:focus, .nav-tabs-custom > li.active > a:hover {
    border: 1px solid #012B39;
} */

.table-custom {
  background: white;
  border-radius: 0.25em;
  border-collapse: collapse;
}

.table-custom>thead>tr>th {
  border-bottom: 1px solid #364043;
  color: #E2B842;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.5em 1em;
  text-align: center;
}

.table-custom>tbody>tr td {
  color: #012B39;
  font-weight: 550;
  padding: 0.65em 0.2em;
  text-align: center;
}

.disabled td {
  color: #4F5F64;
}
.table-custom>tbody>tr {
  transition: background 0.25s ease;
}

.table-single-product{
	background: #012B39;
	color: #fff;
}

.table-custom tbody tr:hover td{
	color: red !important;
background-color: #f7e6cb;
  }

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: black;
}

/* Button */
.add_btn{
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	float: right;
	width: auto;
	height: auto;
	color: orange;
	border-width: 3px;
	border-style: outset;
	background-color: white;
	border-color: orange;
	border-radius: 10px;
	padding: 5px 18px 5px 18px;	
	margin: 5px;
	font-family: 'Russo One', Arial, Helvetica, sans-serif;
	display: block;
}

.add_btn:hover {
	background-color: orange;
	border-color:orange;
	color: white;
	cursor: pointer;
}

.cancel_btn{
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
	font-weight: bold;
	float: right;
	width: auto;
	height: auto;
	color: #d11b27;
	border-width: 3px;
	border-style: outset;
	background-color: white;
	border-color: #d11b27;
	border-radius: 0.3em;
	padding: 5px 18px 5px 18px;	
	margin: 5px;
	font-family: 'Russo One', Arial, Helvetica, sans-serif;
	display: block;
}

.cancel_btn:hover {
	background-color: #d11b27;
	border-color:#d11b27;
	color: white;
	cursor: pointer;
}

/* Main header */
.main_header{
	color: white; 
	text-align: center;	
	font-weight: bold;
	background-color: #fd7e14;
}

/* task header list */
.task_header th{
	background-color: #003CC5;
	border-color: white;
	border-right-style: solid;
	border-left-style: solid;
	border-width: 2px;
	color:white;	
}

  /* Side bar panel*/
  .header_side{
	width: 160px;
	height: 100vh;
  }

  .side-nav{
	width: 120px;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding-left: 15px;
	padding-right: 15px;
	background: #81b2e3;
	backdrop-filter: blur(5px);
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	transition: width 0.5s;
	border-color: #00309e; 
	border-width:2px;
  }

.company_name{
	text-align: center;
	font-weight: bold;
	margin: 0;
	color: white;
	font-size: 1px;
}
.company_name h3{
	text-align: center;
	font-weight: bold;
	color: white;
	margin-top: 28px;
	font-size: 17px;
}

.side-nav ul li .glyphicon {
	font-size: 16px;
}

.side-nav:hover ul li .glyphicon {
	font-size: 14px;
}

  .side-nav:hover{
	width: 210px;
  }

  .side-nav:hover .company_name h3{
	font-size: 23px;
	margin-top: 21px;
  }

  .side-nav:hover .user div{
	display: block; 
 }

 .side-nav:hover .user{
	width: 100%;
	background: #003CC5;
	backdrop-filter: blur(5px);
 }

 .side-nav:hover .user_img{
	margin-left: 15px;
	width: 40px;
	margin-left: auto;
	margin-right: auto;
 }

 .side-nav:hover .user div h2{
	padding-right: 15px;
	margin: 0;
 }

 .side-nav:hover .user div p{
	padding-right: 15px;
	margin: 0;
 }

 .side-nav:hover ul li p{
	display: block;
	padding-top: 12px;
 }

 .side-nav:hover ul li span{
	margin-right: 15px;
 }

 .side-nav:hover ul li{
	justify-content: flex-start;
	padding-top: 13px;
	margin: 5px;
	cursor: pointer;
 }

 /* sidebar profile icon */
  .user{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 60px;
	font-size: 12px;
	padding: 10px;
	border-radius: 8px;
  }

  .user_img{
	width: 60px;
	border-radius: 50%;
	margin: auto;	
	align-items: center;
  }

  .user div{
	display: none;
  }

  .user h2{
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
  }

  ul{
	list-style: none;
	padding: 0 15px;
  }

  ul li {
	margin: 30px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	white-space: nowrap;
  }


ul li p{
	display: none;
}

  ul li span{
	margin-right: 15px;
	display: none;
  }

  /* Task label */
  .task_label{
	text-align: center;
	margin-bottom: 0;
	padding-top: 7px;
  }

  .task_insert{
	display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .task_insert input{
	width: 58.33333333%;
  }

  .scrollbar {
	overflow: scroll;
	height: 455px;
	border: 1px solid #003cc5;
	border-radius: 10px;
	}

	 .noti-bell:before {
		content: "\f0f3";
		margin-left: -5px;
	}

	 ::after {
		box-sizing: border-box;
		margin-left: 40px;
	}

	 /* Orange Color Header */
	 .main_content {
		margin-left: 120px; /* Same as the width of the sidenav */
		font-size: 28px; /* Increased text to enable scrolling */
		padding-top: 1px;
		width: 91.8%;
		margin-top: 0;
		background-color: #fd7e14;
	}


	@media(min-width: 768px){
		.box{
			min-height: 35rem;
			margin-top: 0.5rem;
			border-radius: 10px;
		}
	}

	.well .box{
		border-radius: 10px;
	}


	/* user_first_login */
	.ufl_body{
		margin: 0;
		padding: 0;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.ufl_section{
		height: 60%;
	}

	.ufl_container{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 420px;
		text-align: center;
		background-color: #003CC5;
		border-radius: 10px;
	}

	.ufl_form{
		position: relative;
		box-sizing: border-box;
		padding: 60px 30px;
		transition: 0.5s;
	}

	.ufl_form:hover{
		background: rgba(255, 255, 255, .3);
		border-radius: 10px;
	}

	.ufl_form h1{
		margin-bottom: 30px;
		color: white;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size: 28px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	.ufl_input{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
		margin-bottom: 25px;
		border-radius: 20px;
		outline: none;
		letter-spacing: 2px;
		font-size: 15px;
		color: black;
		border: none;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	.ufl_input ::placeholder{
		color: white;
	}

/* index.php */
.login {
	border: 2px solid #fd7e14;
	border-radius: 10px;
  }
  .login:after {
	content: "";
	display: table;
	clear: both;
  }
  .login .login_title {
	background: #fd7e14;
	padding: 11px 16px;

  }
 
  .login .form-group {
	margin: 20px;
  }