/* General Classes */

/* Display */
.visibility-hidden {
	visibility: hidden;
}

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

/* 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 */
.menu-color {
	color: #444444;
}

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

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

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

.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;
}

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

/* End of General Classes */

body {
	background-color: #eeeeee;
}

/* 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;
}

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

/* Header */
#header > div:first-child > div:first-child {
	margin-bottom: 15px;
}

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

/* Content */

/* Index Content */
#index_content {
	padding-top: 15px;
	padding-bottom: 15px;
}

#index_content > div:first-child > div:first-child {
	color: #393939;
	font-size: 20px;
	margin-bottom: 15px;
}

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

#index_content > div:last-child > div:first-child {
	color: #393939;
	font-size: 20px;
	margin-bottom: 15px;
}

#index_content > div:last-child > div:nth-child(2) {
	margin-bottom: 15px;
}

/* Register Content */
#register_content {
	padding-top: 15px;
	padding-bottom: 100px;
}

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

#register_content > div:first-child > div:last-child {
	color: #393939;
}

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

#register_content > div:last-child {
	margin-top: 15px;
}

#register_content > div:last-child > form > div:first-child {
	border-right: 1px solid #dedede;
}

#register_content > div:last-child > form > div:last-child > div:nth-child(3) {
	margin-top: 20px;
	margin-bottom: 15px;
}

/* Dashboard Content */
#dashboard_content {
	padding-top: 15px;
	padding-bottom: 30px;
}

#dashboard_content > div:first-child {
	text-align: center;
}

#dashboard_content > div:first-child > div:first-child {
	color: #393939;
	font-family: calibri;
	font-size: 50px;
}

#dashboard_content > div:first-child > div:last-child {
	margin-top: -10px;
}

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

#dashboard_content > div:last-child {
	text-align: center;
	margin-top: 50px;
}

#dashboard_content > div:last-child > div:first-child {
	color: #393939;
	font-weight: bold;
	font-size: 35px;
	font-family: calibri;
}

#dashboard_content > div:last-child > div:nth-child(2) > div {
	margin-bottom: 5px;
}

#dashboard_content > div:last-child > div:nth-child(3) {
	margin-top: 20px;
}

#dashboard_content > div:last-child > div:last-child {
	margin-top: 20px;
}

/* 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;
}

/* Create Ticket Content */
#create_ticket_content {
	padding-top: 15px;
	padding-bottom: 30px;
}

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

#create_ticket_content > div:nth-child(2) {
	margin-top: 15px;
	margin-bottom: 15px;
}

#create_ticket_content select {
	width: 30%;
}

#create_ticket_content input[type="text"] {
	width: 30%;
}

#create_ticket_content textarea {
	resize: vertical;
	width: 50%;
}

#create_ticket_content input[type="file"] {
	/*width: 30%;*/
}

/* Open Ticket Content */
#open_ticket_content {
	padding-top: 15px;
	padding-bottom: 30px;
}

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

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

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

#open_ticket_content > div:last-child {
	margin-top: 10px;
}

#open_ticket_content > div:last-child > div:first-child {
	margin-bottom: 10px;
}

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

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

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

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

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

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

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

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

#detil_tiket > 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;
}

/* 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;
}

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

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