body {
	background: #d5d4d0 !important;
	font-family: 'Roboto', sans-serif !important;
}
html,body {
    overflow: auto;
    overflow-x: hidden;
}
p { font-size: 0.875rem !important; }

.list-group-item {
	font-size: 0.875rem !important;

}
.badge {
	vertical-align: text-top !important;
}
#container {
	width:100% !important;
	background: none !important;
	box-shadow: none;
}
.error {
	font-size: 0.875rem !important;
}

#header-wrapper {
	min-height: 100px;
	height: auto !important;
	background: #000 !important;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

#header, #content {
	max-width: 1140px !important;
	margin:auto !important;
	padding: 0 !important;
}
#header #logo img {
    max-height: 85px !important;
}
#header #logo {
	display: grid;
	align-content: center;
}
#header {
	min-height: 100px !important;
	    height: auto;
}
.menu-toggle.open + .header-menu {
    display: block;
}
.header-menu ul {
	align-content: center;
	text-transform: uppercase;
	font-size: 1.25rem;
}
.header-menu a {
	color: #FFF;
}

#notif-bar {
	background: #FFF;
	height: 40px;
}


#body-wrapper {
	padding: 60px 0;
}
#notif-wrapper {
	height: 58px;
}

a { margin: 0 !important; }
a:hover, .link:hover {
    border: none !important;
    color:#FFF !important;
}

.action-box h3 {
	text-align: center;
}
.action-box .card {
	min-height: 265px;
}
.action-box .card-body {
	padding-top: 25px;
}

h3 {
	font-size: 1.25rem !important;
}
h6 {
	font-size: 1rem !important;
	font-weight: normal !important;
}
.card-header {
	padding:12px 16px !important;
}
.card-body h3, .card-body i {
	width: 100%;
}
i.x-cardicon {
	margin: 0 0 20px 0;
}

.card-body p {
	text-align: justify !important;
	margin-bottom:0;
}
.card-footer {
	background: none !important;
	border: none !important;
	padding: 0 30px 30px 30px !important;
}


.main-content {
	width: 100% !important;
}


.card-header-primary {
    /* background: linear-gradient(60deg ,#f44336 ,#aa2e25 ) !important; */
    background-color: #000 !important;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(0, 0, 0, 0.4);
    color: #FFF;
    margin: 0 15px;
    margin-top: -20px;
	border-radius: 0.375rem !important;
	padding: 0.75rem 1.25rem !important;
}
.card-header-primary h1 {
	color: #FFF !important;
	font-weight: normal !important;
	margin-bottom: 0 !important;
}
.card-main {
    -webkit-box-shadow: 0 7px 14px 0 rgba(59,65,94,.1), 0 3px 6px 0 rgba(0,0,0,.07);
    box-shadow: 0 7px 14px 0 rgba(59,65,94,.1), 0 3px 6px 0 rgba(0,0,0,.07);
}


/*Hide Elements*/
#poweredBy {
	display: none !important;
}


.navbar-brand {
	padding: 7.5px 0 !important;
}
#login {
	max-width: 450px;
	margin: auto;
	min-height: 300px;
}
input[type="submit"] {
	color: #FFF !important;
}
.ext-auth {
	margin-bottom: 10px;
}




.separator {
  display: flex;
  align-items: center;
  text-align: center;
    width: 100%;
    margin: 20px 0;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}
.ext-auth i.fa-brands {
	display: inline !important;
}
a.btn-block {
	border: none !important;
	border-width:0 !important;
	margin: 0 !important;
	height: 38px !important;
	line-height: 1.6 !important;
}




#footer {
	position: absolute;
    bottom: 25px;
    width: 100%;
}





.alert {
	display: none;
	border-radius: 0 !important;
}



li.nav-item {
	 overflow: hidden;
}

li.nav-item a.nav-link::before {
content: "";
    position: absolute;
    display: block;
    height: 2px;
    transition: .3s ease-in-out;
    background-color: #c00;
}
li.nav-item a.nav-link { position:relative;color:#FFF !important;text-transform: uppercase; }	
li.nav-item a.nav-link:hover::before, li.nav-item a.nav-link.active::before { transition: .3s; left: -5px; }			
li.nav-item a.nav-link::before {width:110%;  left: -140%; top:5px;}	




@media only screen and (max-width: 767px) {
	h1 { font-size: 28px !important; }
	#body-wrapper #content {
		padding: 0 20px !important;
	}
	.header-menu { position:relative;display: none;padding:0 !important;z-index: 3; }
	
	.header-menu a { color: #000 !important; }

	.header-menu ul { display: inline-block;width: 100%;background: #FFF; color: #000 !important; }
	
	li.nav-item a.nav-link:hover::before, li.nav-item a.nav-link.active::before { top: 0 !important;}			
	
	li.nav-item a.nav-link::before {top: 0 !important;}	
	
	#header .col-lg-4 { min-height: 100px !important; }
	#header .col-lg-8 { background: #FFF; }

}



@media (min-width: 768px) and (max-width: 1024px) {
	h1 { font-size: 32px !important; }
	#body-wrapper #content {
		padding: 0 20px !important;
	}
	.action-box.col-md-4 .card {
		min-height: 340px;
	}
	.header-menu { display: none; }
	li.nav-item:not(:first-child) {
		padding-right:15px !important;
		padding-left:15px !important;
}
li.nav-item:first-child {
		margin-left:0px !important;
		margin-right:0px !important;
}


}
@media (min-width: 1025px) and (max-width: 1140px) {
	h1 { font-size: 32px !important; }
	#body-wrapper #content {
		padding: 0 20px !important;
	}
	.action-box.col-md-4 .card {
		min-height: 295px;
	}
	.menu-toggle { display: none !important; }
	li.nav-item:not(:first-child) {
		padding-right:15px !important;
		padding-left:15px !important;
}
li.nav-item:first-child {
		margin-left:0px !important;
		margin-right:0px !important;
}
}
@media only screen and (min-width: 1141px) {
	h1 { font-size: 32px !important; }
	.menu-toggle { display: none !important; }

li.nav-item:not(:last-child) {
		padding-right:15px !important;
		padding-left:15px !important;
}
li.nav-item:last-child {
		margin-left:15px !important;
		margin-right:0px !important;
}
#navbarTogglerDemo02 {
	min-width: 670px;
}

}
	#content .row .col-lg-12 {
		margin-top: 0 !important;
}






.menu-toggle {
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: relative;
    position: absolute;
    right: 20px;
    top: 35px;
}

.bar {
    width: 30px;
    height: 4px;
    background-color: #fff;
    margin: 5px 0;
    transition: transform 0.4s, opacity 0.4s, background-color 0.4s;
}

.menu-toggle.open .bar:first-child {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.open .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .bar:last-child {
    transform: translateY(-9px) rotate(-45deg);
}

.menu-toggle.open .bar {
    background-color: #f00; /* Change the color when menu is open */
}



#ticketForm div input, #ticketForm div textarea, #ticketForm div select {
    width: 100% !important;
    border: 1px solid #ccc !important;
}
.filedrop {
    padding-bottom: 0px !important;
}
.filedrop .files .file {
    padding: 10px 5px !important;
    height: 50px !important;
}
.filedrop .files .file .filename {
	font-size: 14px !important;
}
.filedrop .files .file .trash {
    margin-right: 10px;
}
.dforms {
	opacity: 0;
}
.dforms-df h5 {
	color: #CCC !important;
	padding-top: 150px;
	text-align: center;
}
.gj-datepicker-md [role=right-icon] {
    right: 5px !important;
    top: 7px !important;    
    text-align: right;

}

.gj-textbox-md {
    padding: .375rem .75rem !important;
    line-height: 1.5 !important;
}
#dynamic-form .card-body .form-group {
	margin-top:1rem !important;
}
.card #dynamic-form .card-header:nth-child(5) {
	border-top:1px solid #CCC !important;
}

#reply {
	padding: 0 !important;
	border: none !important;
	margin-top: 0 !important;
}

.footer-wrapper {
	width:100% !important;
	background-color: #d5d4d0 !important;
}
	.footer-content {
            padding: 25px 0;
		margin: auto;
		text-align: center;
		width:100% !important;
	}
	.footer-content p {
	font-size: .875rem !important;
	}
	.footer-content p a {
	color:#000 !important; text-decoration: none;
	}




/*Forms*/
.thread-entry.message .header {
    background: #CCC !important;
}
.thread-entry.avatar.message .header:before {
    border-right-color: #777 !important;
}
.thread-entry.avatar.message .header:after {
    border-right: 7px solid #CCC !important;
}
.thread-entry.response .header {
    background: #EEE !important;
}
.thread-entry.avatar.response .header:after {
    border-left: 7px solid #EEE !important;
}
.thread-body .attachments {
    background-color: #fff3cd !important;
}
.thread-event span.description {
	font-size: 0.875rem !important;
}


/*Sub Nav*/
nav.xsubnav {
    border: 1px solid #ddd;
    border-radius: 0.375rem;
}
nav.bg-body-tertiary {
    background-color: #ffffff !important;
	padding: 0 !important;
	height: 60px;
}
nav.bg-body-tertiary div.container-fluid {
	padding: 10px !important;
}
.xnav-link-label { color: #777 }
.xbadge-outline {
    color: #fff !important;
    background-color: #6c757d !important;
    font-weight: normal !important;
}

.xnav-link-label {
    line-height: 54px;
}
#ticketSearchForm {
	width: 200px;
}

nav.xsubnav .show #ticketSearchForm {
	width: 100% !important;
}
@media only screen and (max-width: 991px) {

#xsubnav-menu {
    z-index: 9999;
    background: #FFF;
    padding: 15px;
    margin-top: 10px;
}

}

/*Ticket Table*/
.tickets-table {
	font-size: 0.875rem !important;
}
.tickets-table a {
	text-decoration: none !important;
}
.tickets-table a.btn:hover {
	border: 1px solid #dc3545 !important;
}
.tickets-table table thead tr th {
	background: #f4f4f2 !important;
}

.btn-linkx-outline {
    border: 1px #dc3545 solid !important;
    color: #dc3545 !important;
    background-color: #fff !important;
}
.btn-linkx-outline:hover {
    background-color: #fff !important;
    color: #bb2d3b !important;
    border: 1px #bb2d3b solid !important;
}
.page-link, .page-link:hover {
    color: #000 !important;
    border: 1px solid #dee2e6 !important;
}


.privacy-page p, .tos-page p {
	padding: 0 20px !important;
	text-align: justify !important;
}
.privacy-page h2, .tos-page h2 {
	font-size: 20px !important;
	font-weight: 500 !important;
	padding: 0 20px !important;
	margin-top: 30px !important;
    margin-bottom: 15px !important;
}