global-style.css

body {
  background-image: none!important;
}

/* HEADINGS */
h1 {
  font-size: 4.2em!important;
  line-height: 110%!important;
}
h2 {
  font-size: 3.56em!important;
  line-height: 110%!important;
}
h3 {
  font-size: 2.6em !important;
  line-height: 110%!important;
  padding: 15px 0;
}
h4 {
  font-size: 2.28em !important;
  line-height: 110%!important;
}
/* used in submit ticket template*/
#new-ticket-search.h4 {
  font-size: 1.6em!important;
}
.page-content {
  margin: 25px 0 50px;
}
.page-content h2{
  margin: 25px 0;
}
.page-content p {
  margin: 1em 0;
}
.content {
	margin-top: 0!important;
}
.container-footer {
  margin: 0 15px;
}

/* VIDEO WRAPPER */
.video-wrapper {
	margin: 10px 0; 
}

@media print {
  .video-wrapper {
    display: none; 
  }
}

/*REMOVE AGENT ICON*/
.helpdesk_view .agent_view {
  display: none!important;
}

/* Pagination fix - css so ugly it hurts*/
.pagination li a {
  line-height: 41.75px;
  background: none!important;
}
.pagination li {
  height: 43px;
  display: inline-block!important;
  background-color: transparent!important;
}
.pagination li.active {
  background-color: #02708C!important;
  color: #fff;
}
.pagination li.active span {
    border: 1px solid #02808c;
}
.pagination li.disabled {
  background-color: #efefef!important;
}
.pagination li.disabled a {
  text-decoration: none;
}

/* Search Results/Folder List Fixes*/
.topic-title-listing {
  font-size: 1.35em;
}

.match {
  background-color: rgba(62, 171, 164, .25)!important;
}

/* SEARCH CONTAINER */
.search-container {
  	min-height: 300px;
	background: no-repeat center url("https://cdn.rawgit.com/evosus/freshdesk/Phase-1/img/search-image.jpg");
	background-size: cover;
}

.search-box-wrapper {
	padding-top: 125px;
	margin: 0 auto;
	max-width: 600px;   
}

@media only screen and (max-width: 600px) {
  .hc-search-form {
    margin: 0 15px;
    min-width: 400px;
  }
  .search-container input[type=text]:not(.browser-default) {
    font-size: 1.3em;
  }
}

/* OVERRIDE FRESHDESK STYLES */
.banner {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
.breadcrumb-article {
    margin: 0 0 20px -20px;
    font-size: 16px;
    color: rgba(51,51,51,0.8);
}
.breadcrumb-article a{
    color: rgba(51,51,51,0.5);
    transition: color 0.5s;
    transition-timing-function: ease-in;
}
.breadcrumb-article a:hover {
    color: rgba(51,51,51,0.9);
    text-decoration: none;
}
.breadcrumb-menu {
  color: #666666;
  margin: 10px 0 10px -5%;
}

#related_articles {
  margin-top: 50px;
}
a.no-style,
a.no-style:hover{
  color: #fff;
  text-decoration: none;
}

/* FIX TO THE LOGIN FORM */
.alt-login-button a.btn:hover {
    display: block;
}

/* SIDE MENU */
nav.main-nav {
  height: 3.5em;
}
.welcome {
  font-size: 1.4em;
  height: 2.5em;
}
.user-view {
  background-color: #FA9346;
  color: #fff;
  padding: 0 10px!important;
}
.user-view a,
.user-view a:hover {
  color: #fff;
  font-size: .9em;
}

.sub-nav a:hover{
  color: white;
  text-decoration: none;
}

.main-nav a.button-collapse i {
  margin-left: -5px;
}

.main-nav a.button-collapse,
.main-nav a.button-collapse i
{
  border-radius: 50%;
  height: 2.3em!important;
  width: 2.3em!important;
  line-height: 1.8em!important;
  font-size: 1.4em!important; /* So hack it hurts!*/
}

.main-nav a.button-collapse:hover {
  color: #fff;
  background-color: transparent;
  box-shadow:0 5px 10px rgba(0,0,0,0.25);
}

/* MAIN PAGE AUTO SLIDE CAROUSEL*/
.carousel .indicators {
  text-align: right;
}

.carousel .indicators .indicator-item {
  height: 12px;
  width: 12px;
}

/* EVOSUS THEME COLORS */
.ui-primary,.ui-secondary,.ui-accent,.ui-active,.ui-inactive,.ui-valid,.ui-invalid { color:white; }
.ui-inactive { opacity:0.5; }
.ui-primary { background:#02708C; }
.ui-secondary { background:#007F9C; }
.ui-accent { background:#F09419; }
.ui-active { background:#2196F3; }
.ui-inactive { background:transparent; }
.ui-valid { background:#3F9D2F; }
.ui-invalid { background:#AD423C; }
.ui-background-lt { background:#e7e5e2; }
.ui-background { background:#d7d5d2; }
.fg-primary { color:#6a6b6c; }
.fg-secondary { color:#8a8b8c; }
.fg-accent { color:#F09419; }
.fg-active { color:#2196F3; }
.fg-inactive { color:lightgray; }
.fg-valid { color:#3F9D2F; }
.fg-invalid { color:#AD423C; }

/* ADDITIONAL COLORS */
.ui-black, .ui-gray, .ui-red, .ui-red-dk, .ui-red-lt,
.ui-orange, .ui-orange-dk, .ui-orange-lt, .ui-gold,
.ui-gold-dk, .ui-gold-lt, .ui-green, .ui-green-dk,
.ui-green-lt, .ui-teal, .ui-teal-dk, .ui-teal-lt,
.ui-blue, .ui-blue-dk, .ui-blue-lt, .ui-purple,
.ui-purple-dk, .ui-purple-lt { color:white; } 
.ui-black { background:black; }
.ui-gray { background:#444444; }
.ui-gray-lt { background:#aaaaaa; }
.ui-red { background: #FF6347; }
.ui-red-dk { background: #B22222; }
.ui-red-lt { background:tomato; }
.ui-orange { background: #FA9345; }
.ui-orange-dk { background:darkorange; }
.ui-orange-lt { background:sandybrown; }
.ui-gold { background: #FFA500; }
.ui-gold-dk { background:darkgoldenrod; }
.ui-gold-lt { background:burlywood; }
.ui-green { background: #228B22; }
.ui-green-dk { background: #6D8D24; }
.ui-green-lt { background: #66CDAA; }
.ui-teal { background: #3eaba4; }
.ui-blue { background:#1E90FF; }
.ui-blue-dk { background:#4169E1; }
.ui-purple { background:#9370DB; }
.ui-purple-dk { background:#663399; }

/*******
Modal Fix 
*********/
.modalMat {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}

.modalMat {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity;
}

@media only screen and (max-width: 992px) {
  .modalMat {
    width: 80%;
  }
}

.modalMat .modalMat-content {
  padding: 24px;
}

.modalMat .modalMat-close {
  cursor: pointer;
}

.modalMat-overlay {
  position: fixed;
  z-index: 999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: #000;
  display: none;
  will-change: opacity;
}

.modalMat.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

/* New Ticket Modal */
.modalTicket {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}

.modalTicket {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: 70%;
  width: 55%;
  margin: auto;
  overflow-y: auto;
  border-radius: 2px;
  will-change: top, opacity;
}

@media only screen and (max-width: 992px) {
  .modalTicket {
    width: 80%;
  }
}

.modalTicket .modal-content {
  padding: 24px;
}

.modalTicket .modal-close {
  cursor: pointer;
}

.modalTicket .modal-footer {
  border-radius: 0 0 2px 2px;
  background-color: #fafafa;
  padding: 4px 6px;
  height: 56px;
  width: 100%;
}

.modalTicket .modal-footer .btn, .modalTicket .modal-footer .btn-large, .modalTicket .modal-footer .btn-flat {
  float: right;
  margin: 6px 0;
}
.modalTicket.modal-fixed-footer {
  padding: 0;
  height: 70%;
}
.modalTicket.modal-fixed-footer .modal-content {
  position: absolute;
  height: calc(100% - 56px);
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
}
.modalTicket.modal-fixed-footer .modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 0;
}

#ticket-list .lead  {
  padding: 100px 0;
  text-align: center;
}