/* ======================================================
 # Support Hours for Joomla! - v1.6.7 (pro version)
 # -------------------------------------------------------
 # For Joomla! CMS (v4.x, v5.x, v6.x)
 # Author: Web357 (Yiannis Christodoulou)
 # Copyright: (©) 2014-2026 Web357. All rights reserved.
 # License: GNU/GPLv3, https://www.gnu.org/licenses/gpl-3.0.html
 # Website: https://www.web357.com
 # Demo: https://demo-joomla.web357.com/support-hours
 # Support: support@web357.com
 # Last modified: Friday 02 October 2026, 04:34:27 PM
 ========================================================= */
 

/* ===================== Style for LAYOUT-3 ===================== */
/* load Google fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

.mod_sh_layout_3 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	background-color: #FFF;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12);
	position: relative;
	padding: 37px 0;
	margin-bottom: 20px;
	border: 1pt solid #E6E6E6;
}

/* top */
.mod_sh_layout_3 .mod_sh_top_staff {
	padding: 0 22px;
	overflow: hidden;
}

/* headings & status*/
.mod_sh_layout_3 .mod_sh_heading {
	color: #595959;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
	margin-bottom: 28px;
}
.mod_sh_layout_3 .mod_sh_heading span.mod_sh_state {
	font-weight: 700;
	letter-spacing: 0.5px;
} 
.mod_sh_layout_3 .mod_sh_status_row {
	padding-bottom: 29px;
	overflow: hidden;
}
.mod_sh_layout_3 .mod_sh_subheading {
	font-weight: 400;
	color: #909090;
	font-size: 15px;
	line-height: 17px;
	float: left;
	padding-top: 6px;
}
.mod_sh_layout_3 .mod_sh_status {
	float: right;
}
.mod_sh_layout_3 .mod_sh_status .mod_sh_status_btn .mod_sh_status_available,
.mod_sh_layout_3 .mod_sh_status .mod_sh_status_btn .mod_sh_status_offline {
	padding: 7px 18px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 15px;
	text-transform: uppercase;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	letter-spacing: 0.9px;
}
.mod_sh_layout_3 .mod_sh_status .mod_sh_status_btn .mod_sh_status_available {
	box-shadow: 0 2px 0 #19C0AA;
	background-color: #4be9d2;
	color: #18776A;
}
.mod_sh_layout_3 .mod_sh_status .mod_sh_status_btn .mod_sh_status_offline {
	box-shadow: 0 2px 0 #B34832;
	background-color: #fb6141;
	color: #942F1A;
}

/* center */
.mod_sh_layout_3 .mod_sh_center_staff {
	background-color: #f6f6f6;
	border-top: 2px solid #eee;
	border-bottom: 2px solid #eee;
	padding: 20px 22px;
	margin-bottom: 26px;
}

/* official support hours */
.mod_sh_layout_3 .mod_sh_official_support_hours_lbl {
	color: #909090;
	font-size: 15px;
	line-height: 18px;
	margin-bottom: 7px;
}
.mod_sh_layout_3 .mod_sh_official_support_hours_value {
	color: #595959;
	font-size: 13px;
	font-weight: 700;
	line-height: 16px;
	letter-spacing: 0.5px;
}
.mod_sh_layout_3 .mod_sh_official_support_hours_value .mod_sh_today_open_close {
	text-transform: lowercase;
}

/* bottom */
.mod_sh_layout_3 .mod_sh_bottom_staff {
	padding: 0 22px;
}
.mod_sh_layout_3 .mod_sh_gmt {
	color: #8b8b8b;
    font-size: 11px;
    font-weight: 300;
    padding-top: 5px;
    display: block;
}

/* links */
.mod_sh_layout_3 .mod_sh_links {
	margin-bottom: 28px;
}


/* Underline From Left */
.mod_sh_layout_3 .mod_sh_links a {
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
  	text-decoration: none;
	color: #595959;
	font-weight: 700;
	letter-spacing: 0.9px;
	font-size: 13px;
	line-height: 18px;
	padding: 4px 0;
	text-transform: uppercase;
	border-bottom: 3px solid #606574;
	display: inline-block;
}
.mod_sh_layout_3 .mod_sh_links a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  height: 3px;
  bottom: -3px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.mod_sh_layout_3 .mod_sh_links a:hover:before, .mod_sh_layout_3 .mod_sh_links a:focus:before, .mod_sh_layout_3 .mod_sh_links a:active:before {
  right: 0;
}
.mod_sh_layout_3 .mod_sh_links_available a:before {
  background: #19C0AA;
}
.mod_sh_layout_3 .mod_sh_links_offline a:before {
  background: #B34832;
}
.mod_sh_layout_3 .mod_sh_links .mod_sh_left_link {
	display: inline-block;
	margin-right: 26px;
}
.mod_sh_layout_3 .mod_sh_links .mod_sh_right_link {
	display: inline-block;
}

/* your & our time */
.mod_sh_layout_3 .mod_sh_datetime {}

/* your time */
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_your_time { 
	display: inline-block;
	color: #909090;
	font-size: 13px;
	line-height: 15px;
	margin-right: 20px;
}
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_your_time .mod_sh_your_time_lbl { 
	display: inline-block;
}
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_your_time .mod_sh_your_time_value {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.3px;
	line-height: 15px;
	padding-left: 7px;
}

/* our time */
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_our_time {
	display: inline-block;
	color: #909090;
	font-size: 13px;
	line-height: 15px;
}
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_our_time .mod_sh_our_time_lbl {
	display: inline-block;
}
.mod_sh_layout_3 .mod_sh_datetime .mod_sh_our_time .mod_sh_our_time_value {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.3px;
	line-height: 18px;
	padding-left: 6px;
}
.mod_sh_layout_3 .mod_sh_pmam {
	text-transform: lowercase;
}

/* copyright message */
.mod_sh_layout_3 .w357_copyright_msg { 
	display: block;
	top: 25px;
	position: relative;
	text-align: left; 
}
.mod_sh_layout_3 .w357_copyright_msg a { 
	font-size: 10px;
	font-weight: 300;
	color: #ccc; 
	text-decoration: none;
}
.mod_sh_layout_3 .w357_copyright_msg a:hover {
	text-decoration: underline;
}