html, body {
	width: 100%;
	height: 100%;
}

body {
	background-color: #eeeeee;
}

/* General Classes */
.table-responsive {
	margin-top: 30px;
}

.button-transparent {
	background: none;
	border: 0;
}

/* Padding */
.no-padding {
	padding: 0;
}

.no-padding-left {
	padding-left: 0;
}

.no-padding-top {
	padding-top: 0;
}

.no-padding-right {
	padding-right: 0;
}

.no-padding-bottom {
	padding-bottom: 0;
}

/* Colors */
.color-white {
	color: white;
}

.menu-color {
	color: #444444;
}

.label-tiket-buka-color {
	color: #0190b9;
}

.label-tiket-selesai-color {
	color: #23b800;
}

.label-tiket-tutup-color {
	color: #ed0202;
}

.action-ubah-color {
	color: #20B820;
}

.action-hapus-color {
	color: red;
}

.th-color {
	background-color: #f5f5f5;
}

.table-border-gray {
	border: none !important;
	border: 1px solid #dedede;
}

.border-gray {
	border: none !important;
	border-bottom: 1px solid #dedede !important;
}

/* Mouse */
.mouse-pointer:hover {
	cursor: pointer;
}

/* Icons */
.green-icon {
	color: #90bb0a;
}

/* End of General Classes */

/* Login Page */
	/*background: url('../images/login_bg/bg.jpg');*/
#login-main-container {
	height: 100%;
	background-position: 50%;
	background-size: cover;
}

#login-admin-box {
	background-color: rgba(255, 255, 255, 0.8);
	padding-top: 30px;
	padding-bottom: 10px;
	border-radius: 5px;
	margin-top: 10%;
}

#login-admin-box > div:first-child {
	text-align: center;
	margin-bottom: 30px;
}

#form_login > div {
	margin-bottom: 20px;
}

#form_login > div > div {
	margin-bottom: 5px;
}

/* Backend */
#main-container > div:first-child {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: white;
	box-shadow: 2px 2px 10px gray;
}

/* Backend Header */
#header > div:last-child > div:last-child {
	margin-top: 5px;
}

#header > div:first-child > div:last-child > span {
	background-color: #f5f5f5;
	padding: 5px 50px;
}

/* Maintenance */
#maintenance {
	width: 100%; 
	height: 100vh; 
	background: #eeeeee; 
	position: absolute; 
	z-index: 1; 
	display: table;
}

#maintenance > div {
	display: table-cell; 
	vertical-align: middle;
}

#maintenance div.maintenance-logo > i {
	font-size: 200px;
}

#maintenance div.maintenance-text {
	text-transform: uppercase;
}

#maintenance div.maintenance-text > div {
	font-size: 25px; 
	margin-top: 10px; 
	font-weight: bold;
}

/* Sistem Content */
#sistem_content > div:first-child {
	margin-top: 25px;
}

/* Dashboard Sistem */
#dashboard_sistem > div:first-child {
	margin-top: 10px;
}

#dashboard_sistem > div:first-child > span {
	color: #393939;
	font-weight: bold;
	font-size: 20px;
}

/* Tiket Sistem */
#tiket_sistem > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

/* Notifikasi Content */
#notifikasi_content > div:first-child {
	margin-top: 10px;
	margin-bottom: 15px;
}

#notifikasi_content > div:first-child > div:first-child {
	font-size: 25px;
	font-family: calibri;
}

#notifikasi_content > div:last-child > div {
	background: #f5f5f5;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#notifikasi_content > div:last-child > div > div:first-child {
	font-size: 12px;
}

#notifikasi_content > div:last-child > div > div:nth-child(3) {
	margin-top: 5px;
	margin-bottom: 10px;
}

/* Sistem Tiket Masuk */
#sistem_tiket_masuk {
	padding-bottom: 70px;
}

#sistem_tiket_masuk > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

#sistem_tiket_masuk > div:first-child > span {
	color: #00a1c4;
}

/* Sistem Tiket Selesai */
#sistem_tiket_selesai {
	padding-bottom: 70px;
}

#sistem_tiket_selesai > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Sistem Tiket Tutup */
#sistem_tiket_tutup {
	padding-bottom: 70px;
}

#sistem_tiket_tutup > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Departemen Sistem */
#departemen_sistem > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

/* User */
#user > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

#menu-sistem-user > span > span:hover {
	cursor: pointer;
	font-weight: bold;
}

/* Sistem Level User */
#sistem_level_user {
	padding-bottom: 70px;
}

#sistem_level_user > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

#sistem_level_user > div:nth-child(2) {
	margin-bottom: 25px;
}

#sistem_level_user > div:nth-child(2) > div:first-child {
	margin-bottom: 10px;
	overflow: auto;
}

/* Sistem Database */
/* Sistem Level User */
#sistem_database {
	padding-bottom: 70px;
}

#sistem_database > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Sistem User */
#sistem_user {
	padding-bottom: 70px;
}

#sistem_user > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Chat */
#chat {
	padding-top: 15px;
	padding-bottom: 30px;
}

#chat > div:first-child > div:first-child {
	color: #393939;
	font-size: 20px;
}

#chat > div:first-child > div:nth-child(3) {
	margin-top: 10px;
	font-weight: bold;
}

#chat > div:first-child > div:last-child {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* Chat */
div.chat-container {
	border: 3px solid #cccccc;
	border-radius: 5px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 15px;
}

div.chat-container > div:first-child {
	font-weight: bold;
	font-size: 16px;
}

div.chat-container > div:nth-child(2) {
	color: #484848;
	margin-bottom: 15px;
}

div.chat-container-darker {
	background-color: #dddddd;
}

/* Sistem Member Departemen */
#sistem_member_departemen {
	padding-bottom: 70px;
}

#sistem_member_departemen > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

#sistem_member_departemen > div:nth-child(2) {
	margin-bottom: 25px;
}

/* Pengaturan Sistem */
#pengaturan_sistem > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

#pengaturan_sistem > div:last-child {
	margin-top: 10px;
	margin-bottom: 70px;
}

#pengaturan_sistem > div:last-child > div > div:first-child {
	font-size: 25px;
	margin-bottom: 10px;
}

/* View Others Ticket */
#view_others_ticket > div:first-child {
	margin-top: 10px;
	margin-bottom: 70px;
}

#view_others_ticket > div:first-child > div > div:first-child {
	font-size: 25px;
	margin-bottom: 10px;
}

/* Report Sistem */
#report_sistem > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

#report_sistem > div:last-child {
	margin-top: 10px;
	margin-bottom: 70px;
}

#report_sistem > div:last-child > div > div:first-child {
	font-size: 25px;
	margin-bottom: 10px;
}

#menu-sistem-report > a {
	color: black;
	text-decoration: none;
}

#menu-sistem-report > a:hover {
	cursor: pointer;
	font-weight: bold;
}

/* User */
#menu-sistem-pengaturan > span > span:hover {
	cursor: pointer;
	font-weight: bold;
}

/* Detail Level */
#detail_level > div {
	margin-top: 10px;
	margin-bottom: 70px;
}

#detail_level > div > div > div:first-child {
	font-size: 25px;
	margin-bottom: 10px;
}

/* Profile */
#profile {
	padding-bottom: 80px;
	overflow: auto;
}

#profile > div:first-child > div {
	font-size: 25px;
	margin-bottom: 25px;
}

#profile > div:nth-child(2) > div:last-child > div > div:first-child {
	font-weight: bold;
}

#profile > div:nth-child(2) > div:last-child > form > div {
	margin-bottom: 10px;
	padding-bottom: 10px;
}

#profile > div:nth-child(2) > div:last-child > form > div.with-border {
	border-bottom: 1px solid #dedede;
}

#profile > div:nth-child(2) > div:last-child > form > div:first-child > div:last-child > input:first-child {
	margin-bottom: 10px;
}

/* User Content */

/* Sistem Content */
#user_content > div:first-child {
	margin-top: 25px;
}

/* Dashboard Sistem */
#dashboard_user > div:first-child {
	margin-top: 10px;
}

#dashboard_user > div:first-child > span {
	color: #393939;
	font-weight: bold;
	font-size: 20px;
}


/* Quick Count */
#quick-count {
	margin-top: 20px;
	margin-bottom: 20px;
}

#quick-count > div {
	margin-right: 20px;
}

#quick-count-user {
	background: #00c0ef; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	border-radius: 3px;
}

#quick-count-user:hover {
	background: #01b7e4;
}

#quick-count-user > div:first-child > span {
	color: #00a3cb; 
	font-size: 40px;
}

#quick-count-level {
	background: #00a65a; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	border-radius: 3px;
}

#quick-count-level:hover {
	background: #009c55;
}

#quick-count-level > div:first-child > span {
	color: #008d4d; 
	font-size: 40px;
}

#quick-count-unit {
	background: #f39c12; 
	padding-top: 10px; 
	padding-bottom: 10px; 
	border-radius: 3px;
}

#quick-count-unit:hover {
	background: #ea940c;
}

#quick-count-unit > div:first-child > span {
	color: #cf850f; 
	font-size: 40px;
}

/* Tiket User */
#tiket_user > div:first-child {
	background-color: #f5f5f5;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #dedede;
}

/* User Tiket Masuk */
#user_tiket_masuk {
	padding-bottom: 70px;
}

#user_tiket_masuk > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

#user_tiket_masuk > div:first-child > span {
	color: #00a1c4;
}

/* User Tiket Selesai */
#user_tiket_selesai {
	padding-bottom: 70px;
}

#user_tiket_selesai > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* User Tiket Tutup */
#user_tiket_tutup {
	padding-bottom: 70px;
}

#user_tiket_tutup > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* User Tiket Forward */
#tiket_forward_detail_container > div {
	margin-bottom: 10px; 
	padding-bottom: 10px; 
	border-bottom: 1px solid #dedede;
}

/* User Buat Tiket */
#user_buat_tiket {
	padding-bottom: 20px;
}

#textarea-ticket {
	height: 150px;
	resize: vertical;
}

#user_buat_tiket > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* User Tiket Forward */
#user_tiket_forward {
	padding-bottom: 70px;
}

#user_tiket_forward > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

#user_tiket_forward > div:first-child > span {
	color: gray;
}

/* User Buka Tiket */
#user_buka_tiket {
	padding-bottom: 20px;
}

#user_buka_tiket > div:first-child {
	font-size: 25px;
	margin-top: 10px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Detil Tiket Internal */
#detil_tiket_internal {
	padding-top: 15px;
	padding-bottom: 30px;
}

#textarea-chat {
	height: 150px;
	resize: vertical;
}

#detil_tiket_internal > div:first-child > div:first-child {
	color: #393939;
	font-size: 20px;
}

#detil_tiket_internal > div:first-child > div:nth-child(3) {
	margin-top: 20px;
	margin-bottom: 20px;
}

#detil_tiket_internal > div:first-child > div:nth-child(4) {
	font-weight: bold;
	margin-bottom: 10px;
}

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

#detil_tiket_internal > div:nth-child(2) {
	margin-top: 30px;
}

#detil_tiket_internal > div:nth-child(2) > div {
	margin-bottom: 20px;
}

#detil_tiket_internal > div:last-child {
	margin-top: 30px;
}

#chat-box-container > div:first-child {
	margin-bottom: 10px;
}

#chat-box-container > form {
	margin-bottom: 20px;
}

#chat-box-container > form > div {
	margin-bottom: 10px;
}

div.chat-box {
	border: 1px solid #dedede;
	height: 300px;
	overflow-y: scroll;
}

div.chat-item {
	padding: 10px 15px;
	border-bottom: 1px solid #dedede;
}

div.my-chat > div:first-child {
	font-weight: bold;
}

div.my-chat > div:nth-child(2) {
	font-size: 12px;
	color: gray;
}

div.my-chat > div:nth-child(3) {
	margin-top: 5px;
	color: red;
	font-size: 12px;
}

div.my-chat > div:last-child {
	margin-top: 10px;
}

div.sender-chat > div:first-child {
	font-weight: bold;
}

div.sender-chat > div:nth-child(2) {
	font-size: 12px;
	color: gray;
}

div.sender-chat > div:last-child {
	margin-top: 10px;
}

div.my-chat {
	background-color: #dddddd;
}

/* Footer */
#footer {
	text-align: center;
	margin-top: 25px;
	margin-bottom: 25px;
}

#footer > div:first-child {
	color: #545454;
	margin-bottom: 15px;
}