@charset "utf-8";
/*
/*      ADD YOUR CUSTOM CSS
/*		TO THIS FILE.
/*
/*		Don't forget to make
/*		a backup of this file
/*		when you upgrade your
/*		osTicket Awesome 
/*		installation.
*/

/* ==========================================================================
 CUSTOMIZATIONS MADE TO OSTA SOURCE
 
 	inc/client-head.html,
	inc/staff-head.html
		<!--custom-->
		<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap" rel="stylesheet">
		
  css/staff-desktop.css
	 	/* table.list .checkbox label::before {} * /
		/* table.list .checkbox label::after {} * /
		/* table.list .checkbox input[type="checkbox"] {} * / 

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

/* ==========================================================================
 LAZY HIDING, BECAUSE LAZY
========================================================================== */

.faq-page #content > h1 /* hides extra name on kb article in user view */,
.tip_content.faq .thread-body /* hides preview of kb article in agent panel */ {
	display: none;
}

/* ==========================================================================
 GLOBAL STYLES
========================================================================== */
/* @import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap'); */

:root {
	font-size: 14px;
}

body {
	font-size: 1rem !important;
	font-family: Arial, 'Open Sans', sans-serif !important;
}

/* Increase container width */
#content, .sticky.bar .content {
	max-width: 1600px !important;
}

@media screen and (max-width: 1600px)
#content {
    max-width: calc(100% - 4%);
    margin: 2% !important;
    padding: 2% !important;
}

/* ==========================================================================
 TEXT STYLING
========================================================================== */


/* FONTS EN MASSE - OSWALD */ 
h1, h2, h3, h4, h5, h6,
#open-title, #check-status,
th,
.tooltip,
.faq-content .article-title,
#kb > li h4 a {
	font-family: Oswald, 'Open Sans', sans-serif !important;
}

/* FONTS EN MASSE - ARIAL */ 
p {
	font-family: Arial, 'Open Sans', sans-serif !important;
}

/* ALL CAPS */
h1, h2, h3, h4, h5, h6,
#open-title, #check-status,
th,
.tooltip,
.faq-content .article-title {
	text-transform: uppercase;
}

/* LINK: MAKE IT BLUE */
* a, * a svg {
    color: #1c689e !important;
		fill: #1c689e !important;
}

/* LINK: WHITE */
#nav li a, #nav li svg, #header a,
.client-choice-icon svg, .client-choice-icon svg:hover,
.sticky.bar.fixed .flush-left h2 a {
	color: #fff !important;
	fill: #fff !important;
}

/* LINK HOVER: ORANGE FLAT */
* a:hover, * a svg:hover, *:not([id='']) a:hover {
    color: #e67e22 !important;
		fill: #e67e22 !important;
}

/* DARK GRAY */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
#open-title, #check-status,
th,
.tooltip,
.faq-content .article-title {
	color: #191f29 !important;
}

/* Tool tips And Buttons */
.tooltip-inner, .action-button,
.sticky.bar.fixed .action-button,
.sticky.bar.fixed .green.button,
.sticky.bar.fixed .sort-button-text {
	background-color: #fff !important;
	border: solid 1px #000 !important;
		color: #191f29 !important;
		font-size: 1.2rem !important;
}

.sticky.bar.fixed .action-button {
	background-color: rgba(0,0,0,0) !important;
	border: solid 1px #fff !important;
}

/* Agent/User Submit Button */
button.submit.button, #open-new div#sign-in-button {
	background-color: #e67e22 !important;
	color: #fff !important;
	font-family: Oswald, 'Open Sans', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
}

/* Agent/Admin/User Main Nav */
#header * {
    font-family: Oswald, 'Open Sans', sans-serif !important;
		font-weight: 400 !important;
    font-size: 1.2rem !important;
		letter-spacing: .2rem;
		text-transform: uppercase;
}

/* Add "Hello" to User Nav */
#header p::before {
	content: "Hello, ";
}

/* Table Header Coloring */
table.list * {
	color: #191f29 !important;
	text-shadow: none !important;
}

/* Table Sizing */
table.list tbody td {
	font-size: inherit !important;
}

/* Hide OSTicket Branded Footer */
#footer #osticket a,
#footer #ostawesome a {
    display: none !important;
}

/* Login Form Text */
#loginBox h3 {
	color: #d8d8d8 !important;
	font-weight: 400;
}

/* ==========================================================================
 TICKETS
========================================================================== */
/* This code is so garbled... not sure if it's worth the work of pretty-ing this up */
/* .thread-entry.response .header {
	background: #1c689e !important;
	color: #fff !important;
}

a time {
	color: #fff !important;
}

.thread-entry.message .header {
	background: #e67e22 !important;
	color: #fff !important;
} */

/* ==========================================================================
 KNOWLEDGEBASE
========================================================================== */
/* Knowledge Base */
.faq-content h1 {
  text-transform:uppercase;
  border-bottom:3px solid #e3e3e3;
  margin-top:25px;
  margin-bottom:5px;
}

.faq-content h1:nth-child(n+2) {
	padding-top:5rem;
}

.faq-content h4 {
  border-bottom:1px dashed #757575;
  margin:15px 0 5px;
  color:#757575;
  text-transform:uppercase;
}
.faq-content h4:nth-child(n) {
	padding-top:3rem;
}
.faq-content li:nth-child(n+2) {
	padding-top: 2rem;
}
.faq-content img {
	max-width: 75%;
}
.enlarge {
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
  margin:25px 10px;
	background: rgba(0,0,0,.8);
	/* padding:0;
	margin: 1.5rem; */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.enlarge:hover {
  /* transform:scale(2,2);
  transform-origin:0 0;
  max-width:100%; */
}
kbd, .kbd {
  border:1px solid #aaa;
  -moz-border-radius:0.2em;
  -webkit-border-radius:0.2em;
  border-radius:0.2em;
  -moz-box-shadow:0.1em 0.2em 0.2em #ddd;
  -webkit-box-shadow:0.1em 0.2em 0.2em #ddd;
  box-shadow:0.1em 0.2em 0.2em #ddd;
  background-color:#f9f9f9;
  background-image:-moz-linear-gradient(top,#eee,#f9f9f9,#eee);
  background-image:-o-linear-gradient(top,#eee,#f9f9f9,#eee);
  background-image:-webkit-linear-gradient(top,#eee,#f9f9f9,#eee);
  background-image:linear-gradient(to bottom,#eee,#f9f9f9,#eee);
  padding:0.1em 0.3em;
  font-family:inherit;
  font-size:0.75em;
  color:#191f29;
}