html,body{
    height: 100%
}

#content { min-height: 400px; }
.media-title { margin-top: 0px; }

.logo-area { float: left; font-size: 22px; color: #FFF; letter-spacing: 3px; text-transform: uppercase;}
.logo-area a { color: #FFF; }
.header-navigation { float: right; }
.header { margin-top: 20px; }
.header-bg { background: #3c9adc; }
.header-area { height: 80px; }
.header-navigation ul { list-style: none; }
.header-navigation a { color: #FFF; }
.header-navigation ul li { float: left; margin-left: 20px; margin-right: 20px; color: #FFF; text-transform: uppercase;  }
.user-bar-segment { position: relative; float: right; padding: 10px; color: #FFF; font-size: 12px; }
.icon-size { font-size: 14px; }
.top-bar { border-bottom: 1px dashed #3588c2; color: #FFF; }
.top-bar a { color: #FFF; }
.user-icon { border-radius: 8px; width: 15px; height: 15px; font-size: 11px;}
.user-icon-margin { margin-right: 10px; }
.content-margin { margin-top: 20px; }
.align-center{ text-align: center; }
.cat-links { font-size: 12px; }
.small-text { font-size: 11px; }
.alert a { color: inherit !important; }
.yellow-bg { background: #fdffe2 !important; }

/*user box*/
.user-box-avatar { position: relative; font-size: 11px; display: inline-block;}
.user-box-avatar img { display: inline-block; width: 30px; height: 30px; border-radius: 20px; margin-right: 5px; }
.online-dot-user { background: #26E612; width: 8px; height: 8px; border-radius: 4px; border: 1px solid #FFF; position: absolute; bottom: 0px; left: 0px;}
.offline-dot-user { background: #f40d0d; width: 8px; height: 8px; border-radius: 4px; border: 1px solid #FFF; position: absolute; bottom: 0px; left: 0px;}
.user-box-username {  float: left; margin-left: 6px; font-size: 11px;}

.ticket-border-left { border-left: 1px solid #DDD; }
.ticket-reply-options { float: right; }

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

.home-label { border-bottom: 1px solid #f1f1f1; text-align: left; padding: 5px; color: #343a3d; margin: 0px; background: #f8f8f8; margin-bottom: 10px; border-radius: 4px; font-weight: 550; }

.notification-badge { font-size: 8px !important; position: absolute; top: 6px; right: 4px;}
.badge { background: #FC2232 !important; padding: 1px; }

#noti-menu { right: 100px; left: auto; color: #000; }
#notifications-scroll { overflow: scroll; height: 150px; }

.panel-admin { border-color: #38b029; }
.notification-box-title { border-bottom: 1px solid #EEE; font-size: 14px; margin-bottom: 10px; font-weight: 600; padding: 10px; }
.notification-box-footer { border-top: 1px solid #EEE; font-size: 14px; font-weight: 500; padding: 10px; text-align: center; color: #000 !important; }
.notification-box-footer a { color: #2d89f0 !important; }
#notifications-box { position: absolute; width: 270px; top: 45px; right: 50px; background: #FFF; border: 1px solid #DDD; border-radius: 4px; min-height: 100px; z-index: 2000; display: none; }
#notifications-box a:hover { background-color: #FFF !important; }
.notification-box-bit { position: relative; width: 268px; padding: 10px;  }
.notification-box-bit:hover { background: #E1ECF3; }
.notification-icon-bit { float: left; margin-right: 5px; width: 33px;}
.notification-text-bit { float: left; width: 208px; vertical-align: top;}
.notification-text-bit a { color: #0B82F9 !important; }
.notification-text-bit a:hover { color: #0B82F9 !important; }
.notification-datestamp { padding: 0px; margin: 0px; color: #B0B0B0; }
.active-noti { border-right: 2px solid #F32838; }

.category-page { display: inline-block; width: 31%; border: 1px solid #DDD; border-radius: 4px; text-align: center; min-height: 260px; padding: 10px; margin: 10px; vertical-align: top; }
.category-page:hover {background: #f1f1f1;}
.category-title { margin-top: 10px; }
.circle-buttons { border: 1px solid #5d99e9; width: 30px; height: 30px; border-radius: 15px; padding: 5px; display: inline-block; color: #5d99e9;}
.article-padding {  }

.ticket-rating {  }
.click { cursor: pointer; }

.planarea { border-radius: 4px; padding: 10px; font-size: 13px; background: #68aa9b; color: #FFFFFF; min-height: 280px;}
.plan-title { margin: 0px; margin-bottom: 10px; padding: 0px; font-size: 24px; text-transform: uppercase; text-align: center;}
.plan-days { font-size: 18px; text-align: center; }
.plan-cost { font-size: 18px; text-align: center; }
.plan-title { font-size: 24px; }

@media (max-width: 420px) {
  .logo-area { position: relative; float: none; text-align: center; }
  .header-navigation { position: relative; float: none; text-align: center; margin: 0px !important; padding: 0px !important;}
  .header-navigation ul { position: relative; float: none; text-align: center; margin: 0px !important; padding: 0px !important;}
  .header-area { padding: 0px; }
  #noti-menu { right: -100px; left: auto; color: #000; }
}