/*
Theme Name:     Giraffe
Theme URI:      https://themeisle.com/themes/neve/
Template: neve
Author:         ThemeIsle
Author URI:     https://themeisle.com
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Version:        1.0.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, post-formats, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles
*/
/* Global Setting */
::marker {
    color: var(--nv-secondary-accent) ;
}
/* ul, li {
    list-style-type: none!important ;
} */

#entry_day_value {
	color: #ffffff!important ;
}
.highlighted-day {
	color: #253142!important ;
}
h1.title.entry-title {
    margin: 0.5em 0em ;
}
/* Header */
.menu-item.nv-active {
	background-color: var(--nv-dark-bg) ;
	border-radius: 1em ;
}
.menu-item.nv-active > .wrap {
	padding: 0px 10px ;
}
.menu-item:hover {
	background-color: var(--nv-dark-bg);
	border-radius: 1em ;
}
.row.row--wrapper {
    overflow: hidden ;
}
.header-button-container {
    position: relative ;
}

button.logout-btn {
    background-color: var(--nv-dark-bg) ;
    border-radius: 20px ;
    border: 2px solid var(--nv-primary-accent) ;
}
.header-divider {
    height: 60px ;
    width: 1px ;
    background-color: var(--nv-text-color) ;
    position: absolute ;
    top: -5px ;
    left: -30px ;
}
button.login-btn {
    background-color: var(--nv-secondary-accent) ;
    border-radius: 35px ;
    border: 2px solid var(--nv-text-color) ;
    color: var(--nv-text-color) ;
    padding: 0.5em 1.2em ;
    font-size: 1em ;
    margin-bottom: 8px ;
}
button.login-btn:hover {
    background-color: var(--nv-dark-bg) ;
    border-radius: 35px ;
    border: 2px solid var(--nv-text-dark-bg );
    color: var(--nv-text-dark-bg) ;
    padding: 0.5em 1.2em ;
    font-size: 1em ;
    margin-bottom: 8px ;
}
.giraffe-head > div {
	height: 48vh ;
	width: 20em ;
	background-image: url(/wp-content/themes/giraffe/images/header-giraffe-1.svg) ;
	background-position: center ;
	background-repeat: no-repeat ;
	position: absolute ;
	top: -13em ;
	right: -10em ;
	opacity: .2 ;
	z-index: 0 ;
	pointer-events: none ;
}
@media (max-width: 960px) {
	.giraffe-head > div {
		height: 52vh ;
		width: 13em ;
		background-image: url(/wp-content/themes/giraffe/images/header-giraffe-1.svg) ;
		background-position: center ;
		background-repeat: no-repeat ;
		position: absolute ;
		top: -13em ;
		right: -21em ;
		opacity: .2 ;
		z-index: 0 ;
		pointer-events: none ;
	}
}
@media (max-width: 815px) and (max-height: 590px) {
	.giraffe-head > div {
		height: 52vh ;
		width: 13em ;
		background-image: url(/wp-content/themes/giraffe/images/header-giraffe-1.svg) ;
		background-position: center ;
		background-repeat: no-repeat ;
		position: absolute ;
		top: -10em ; 
		right: -21em ;
		opacity: .2 ;
		z-index: 0 ;
		pointer-events: none ;
	}
}
@media (max-width: 600px) {
	.giraffe-head > div {
		height: 45vh ;
		width: 10em ;
		background-image: url(/wp-content/themes/giraffe/images/header-giraffe-1.svg) ;
		background-position: center ;
		background-repeat: no-repeat ;
		position: absolute ;
		top: -11em ;
		right: -15em ;
	}
}
/* Z-index set here for gariffe head in header */
.builder-item.has-nav {
    z-index: 1 ;
}
/* adds a gap between sliders and main content */
#content > div > div > div > div.nv-content-wrap.entry-content > p {
    margin-bottom: 3.5rem ;
}
img.page-featured-image {
    margin-bottom: 50px ;
}
/* featured image title */
.featured-image-container {
    position: relative ;
}
.page-title {
    position: absolute ;
    top: 60% ;
    left: 50% ;
    transform: translate(-50%, -50%) ;
	color: white ;
    padding: 10px 20px ;  
    font-size: 5rem ; 
}
/* Footer */
.footer-menu.nav-ul > .menu-item:hover {
	outline: 1px solid var(--nv-site-bg) ;
	border-radius: 0px ;
}
/* Patient Video Exercise area - temp css */
.exercise-video-instructions-container {
    display: grid ;
    grid-template-columns: 2fr 1fr ;
    margin-bottom: 2em ;
}
.video-border {
	border: 1px solid var(--nv-secondary-accent) ;
	height: 100% ;
	position: absolute ;
	top: -3px ;
	z-index: 99 ;
	width: -webkit-fill-available ;
}
.instructions {
    padding: 0em 2em ;
}
.instructions > h3 {
	color: var(--nv-secondary-accent) ;
	margin-bottom: .5em ;
}
@media (max-width: 960px) {
	.exercise-video-instructions-container {
    display: grid ;
    grid-template-columns: 1fr;
}
	.instructions {
    	margin-top: 1em ;
		padding: 0px ;
	}
}
/* Patient Exercise Dashbaord */
.patient-dashbaord-notice {
    text-align: center ;
}
.sort-order {
    background-color: var(--nv-secondary-accent);
    color: var(--nv-text-dark-bg);
    position: absolute;
    top: -30px;
    left: -40px;
    border-radius: 50%;
    font-size: 2em;
    width: 55px;
    text-align: center;
    padding: .8em 2em;
    z-index: 9999;
}
.video-feed-container {
    display: grid ;
    margin: 3em 0em ;
    grid-template-columns: repeat(4, 1fr) ;
}
.video-feed-container > span > a {
    position: relative ;
    margin: 1em ;
}
.video-block-elements {
	overflow: hidden ;
	margin: 2em ;
	position: relative ;
}
.video-feed-container > span > a > .blue-circle {
    width: 10em ;
    height: 10em ;
    background-color: var(--nv-secondary-accent) ;
    border-radius: 50% ;
    position: absolute ;
    top: -6em ;
    left: -6em ;
    z-index: 1 ;
}
.video-feed-container > span > a > p {
    position: absolute;
    top: 0.2em ;
    left: 0.5em ;
    z-index: 5 ;
    color: var(--nv-site-bg) ;
    font-weight: 600 ;
    font-size: 1.6em ;
}
.video-feed-container > span > a > img {
	object-fit: cover ;
	aspect-ratio: 1 ;
}
@media (max-width: 960px) {
	.video-feed-container {
    display: grid ;
    margin: 3em 0em ;
    grid-template-columns: repeat(3, 1fr) ;
}
}
@media (max-width: 600px) {
	.video-feed-container {
    display: grid ;
    margin: 3em 0em ;
    grid-template-columns: repeat(2, 1fr) ;
}
}
@media (max-width: 375px) {
	.video-feed-container {
    display: grid ;
    margin: 3em 0em ;
    grid-template-columns: 1fr ;
}
}
/* Patient Exercise - Page Banner elements */
.patient-progress-diagrams {
    display: grid ;
    grid-template-columns: 60% 40% ;
    width: 80% ;
    margin: 0 auto ;
}
.patient-progress-diagrams > div {
    padding: 4em ;
    background-color: var(--nv-primary-accent) ;
    margin: 1em ;
}
@media (max-width: 960px) {
	.patient-progress-diagrams {
    display: grid ;
    grid-template-columns: 1fr ;
}
}
/* Stopwatch Single Exercise */
.stopwatch-container {
    width: 35%;
    margin: 0 auto;
    background-color: var(--bs-gray-600);
    color: var(--nv-text-dark-bg);
    padding: 1em;
    margin-top: -5px;
}
@media (max-width: 960px) {
	.stopwatch-container {
		width: 100%;
		margin: 0 auto;
    	background-color: var(--bs-gray-600);
    	color: var(--nv-text-dark-bg);
		padding: 1em;
		margin-top: 35px;
	}
} 
.button-timer {
    background-color: var(--bs-gray-700);
    border: 1px solid white;
}
.button-timer:hover {
    background-color: var(--bs-gray-900);
	color: black ;
    border: 1px solid white;
}
.button-timer:hover {
    background-color: var(--bs-gray-900);
	color: black ;
    border: 1px solid white;
}
.button-timer-start {
    background-color: var(--nv-secondary-accent);
}
.button-timer-start:hover {
    background-color: var(--nv-primary-accent);
}
.button-timer-start:focus {
    background-color: var(--nv-primary-accent);
}
/* Diary Entry Form */
form.diary-entry-form-container {
    text-align: center;
    background-color: var(--nv-light-bg);
    padding: 2em;
	margin-top: 3em ;
}
form.diary-entry-form-container > div {
    margin-bottom: 2em ;
}
form.diary-entry-form-container > h3 {
    color: var(--nv-secondary-accent) ;
}
form.diary-entry-form-container > div > label {
    font-size: 1em!important;
    color: var(--nv-text-color);
    width: 70%;
    margin: 1em 0em;
}
@media (max-width: 600px) {
	.textarea-diary-entry-form {
		width: 100% ;
	}
	form.diary-entry-form-container > div > label {
		width: 100%;
	}
}
.btn-below-form-next::before {
	content: 'Next' ;
	margin-right: 1em ;
	color: var(--nv-text-dark-bg) ;
}
.btn-below-form-previous::after {
	content: 'Previous' ;
	margin-left: 1em ;
	color: var(--nv-text-dark-bg) ;
}
@media (max-width: 600px) {
	.btn-below-form-next::before {
	content: '' ;
}
.btn-below-form-previous::after {
	content: '' ;
}
}
.below-form-element {
	background-color: var(--nv-secondary-accent) ;
	color: var(--nv-text-dark-bg) ;
}
.exercises-btn-below-form > a {
    color: white;
    border-radius: 35px;
    border: 2px solid white;
    padding: .8em 1.2em;
}
/* contact form */
input#nf-field-5, input#nf-field-6, input#nf-field-9, textarea#nf-field-7 {
    border-radius: 10px;
}
/* submit button */
input#nf-field-8:hover {
    background-color: var(--nv-secondary-accent) ;
}
/* CSS to make the social divs appear in a horizontal row */
.socials-container {
    display: flex ;
    flex-direction: row ; 
    justify-content: center ; 
	padding-top: 15px ; 
}

/* Style each individual social div */
.social-1, .social-2, .social-3, .social-4, .social-5, .social-6{
    display: flex ; 
    flex-direction: column ; 
    align-items: center ; 
	margin: 0 10px ;
    width: 40px ;
    height: 20px ;
}

/* header code */
.default-header-container {
    background-color: #253142 ;
    color: white ;
    height: 300px ;
    width: 100% ;
    text-align: center ;
    display: flex ;
    flex-direction: column ;
    justify-content: center ;
}
.default-title {
    text-align: center ;
    margin: 0 ;
    font-size: 4em ;
}
.page-title {
    text-align: center ;
    margin: 0 ;
    font-size: 2em ;
    font-weight: bold ;
    color: #fff ; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) ; 
}
.socials-container {
    display: flex ;
    justify-content: center ;
    margin-top: 20px ;
}
.social-1,
.social-2,
.social-3,
.social-4,
.social-5,
.social-6 {
    margin: 0 10px ; 
}
.social-1 a,
.social-2 a,
.social-3 a,
.social-4 a,
.social-5 a,
.social-6 a {
    text-decoration: none ; 
    transition: color 0.3s ease ; 
}
/* Style the social icons on hover */
.social-1 a:hover,
.social-2 a:hover,
.social-3 a:hover,
.social-4 a:hover,
.social-5 a:hover,
.social-6 a:hover {
   filter: brightness(0.8); /* Change the link color on hover */
}
.published-date {
    font-style: italic ;
    margin-top: 35px ;
}
.featured-image-container {
    position: relative ;
}
.page-featured-image {
    width: 100% ;
    object-fit: cover ;
}
.page-title {
    text-align: center ;
    position: absolute ;
    bottom: 0 ;
    width: 100% ;
    color: var(--nv-light-bg) ;
    margin: 0 ;
    padding: 10px 0 ;
}
/* Patient Dashboard */
@media (max-width:600px) {
	.my-programme-button {
		width:100%!important ;
	}
}
.exercise-border {
	border: 5px solid var(--nv-secondary-accent);
}
.exercise-thumbnail {
	height: 100% ;
	background-position: center;
	object-fit: cover;
	transition: transform 400ms;
	width: 100%;
	height: 14em !important;
}
.exercise-thumbnail:hover {
	transform: scale(1.1) ;
}
h3.patient-archived {
    text-align: center;
    padding: 1em;
    font-size: 3em;
}
/* Tabs Styling */
li.nav-item {
    list-style: none;
}
.tab-content > div > .alignfull {
	background-color: var(--nv-dark-bg) ;
}
.nav.nav-pills {
	background-color: var(--nv-primary-accent) ;
	text-transform: uppercase ;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--nv-text-dark-bg)!important;
    background-color: var(--nv-dark-bg) !important;
}
.nav-pills .nav-link {
    padding: 1em 2em;
}
@media (max-width: 600px) {
	.patient-dashbaord-tab-btn {
		font-size: .7em ;
	}
	.diary-output-img {
		height: 15em ;
	}
}
/* Patient Dashbaord Calendar */
@media (max-width: 960px) {
	div#month-days-container > div {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		align-items: center;
		justify-items: stretch;
	}
	div#month-days-container > div > span {
		font-size: .6em;
		margin: .5em;
	}
}
@media (max-width: 375px) {
	div#month-days-container > div > span {
		font-size: .7em;
		margin: .2em;
	}
}
/* Patient Dashbaord - Diary Output */
@media (max-width: 600px) {
	.table-text-size {
		font-size: .5em ;
	}
}


h3.therapist-notes-header {
    color: var(--nv-secondary-accent) ;
}

input#saveDiary {
    background-color: var(--nv-secondary-accent);
    color: var(--nv-text-dark-bg);
}
input#saveDiary:hover {
    background-color: var(--nv-primary-accent);
    color: var(--nv-text-dark-bg);
}
/* Chat Stlying */
.unread-message {
	border-left: 10px solid red;
}
.unread-message-patient {
	border-left: 10px solid green ;
}
/* diary month days container */
@media (min-width: 1024px) {
	.month-days-container {
		font-size: .3em;
		padding: 0em 20%;
	}
}