/*!
 * Plugin Name: Go Night Pro 
 * Author: Web_Trendy
 * Copyright 2020 - 2021 © Web_Trendy (https://codecanyon.net/user/web_trendy/portfolio)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "I slept well last night, but I woke up drunk. I must have dreamed of you!" -Rumi
 *
 */ 

 


 /*----------------------[Table of contents]-----------------------

1.0 Variables
2.0 Button Styles
3.0 Active Button Styles
4.0 Dark Mode Styles
5.0 Theme Support
6.0 Animations 
7.0 Media Queries 

-------------------------------------------------------------------*/



/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
$transition: all 300ms ease;


/*--------------------------------------------------------------
2.0 Button Styles
--------------------------------------------------------------*/
	.gn-toggle-button {
		background-color: var(--gn-button-inactive-bg-color);
		width: var(--gn-button-width);
		cursor: pointer;
	    user-select: none;
	    box-sizing: border-box;
	    &.gn-fixed {
	    	position: fixed !important;
	    	z-index: 99999999;
	    }
	    &.topleft {
	    	top: 0;
	    	left: 0;
	    }
	    &.topcenter {
	    	top: 0;
	    	left: 50%;
	    	transform: translateX(-50%);
	    }
	    &.topright {
	    	top: 0;
	    	right: 0;
	    }
	    &.bottomleft {
	    	bottom: 0;
	    	left: 0;
	    }
	    &.bottomcenter {
	    	bottom: 0;
	    	left: 50%;
	    	transform: translateX(-50%);
	    }
	    &.bottomright {
	    	bottom: 0;
	    	right: 0;
	    }
	    &.centerleft {
	    	top: 50%;
	    	transform: translateY(-50%);
	    	left: 0;
	    }
	    &.centerright {
	    	top: 50%;
	    	transform: translateY(-50%);
	    	right: 0;
	    }
	}

	.gn-toggle-button.style-1 {
		color: var(--gn-button-text-inactive-color);
		display: flex;
		padding: calc( var(--gn-button-width) / 30 ) calc( var(--gn-button-width) / 6.9 );
		align-items: center;
		justify-content: space-between;
	    border-radius: 500px;
		& > span, & > svg {
			width: 50%;
		}
		& > span {
			font-size: calc( var(--gn-button-width) / 7.5 );
			line-height: 1.1;
		}
		& > svg {
			padding: 8px;
			width: calc( var(--gn-button-width) / 3 );
			path {
				fill: var(--gn-button-text-inactive-color);
			}
			#star1 {
				animation-delay: 300ms;
			}
		}
	}

	.gn-toggle-button.style-2 {
		height: calc(var(--gn-button-width)/2);
		border-radius: 100px;
		position: relative;
		.knob {
			position: absolute;
			top: calc(var(--gn-button-width)/14);
			left: calc(var(--gn-button-width)/14);
			height: calc(var(--gn-button-width)/2.8);
			width: calc(var(--gn-button-width)/2.8);
			border-radius: 50%;
			background-color: white;
			transition: $transition;
		} 
		span.label {
			position: absolute;
			top: calc(50% - var(--gn-button-width) / 30);
			left: calc(100% + var(--gn-button-width) / 9);
			white-space: nowrap;
			font-size: calc( var(--gn-button-width) / 6.4 );
			margin-top: calc( var(--gn-button-width) / 10 * -1);
			transition: $transition;
			&:last-of-type {
				transform: translateY(150%);
				opacity: 0;
			}
		}
	}

	.gn-toggle-button.style-3 {
		border-radius: 50%;
		display: inline-flex;
		align-items: center;
	    justify-content: space-around;
		padding: 0 calc( var(--gn-button-width) / 9 );
		height: var(--gn-button-width);
		svg {
			width: calc(var(--gn-button-width)/2.8);
		    margin-left: 5px;
		}
		path {
			fill: var(--gn-button-text-inactive-color);
		}
		#star1 {
			animation-delay: 300ms;
		}
	}
	.gn-toggle-button.style-4 {
		position: relative;
		border-radius: 150px;
		height: calc(var(--gn-button-width)/2.3);
		.stage {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 100%;
			width: 100%;
			padding: 0 calc(var(--gn-button-width) / 18 );
			font-size: calc( var(--gn-button-width) / 6.4 );
			overflow-y: hidden; 
			box-sizing: border-box;
			&:first-of-type {
				span {
					color: var(--gn-button-text-inactive-color);
				}
				svg {
					path {
						fill: var(--gn-button-text-inactive-color);
					}
				}
			}
			&:last-of-type {
				position: absolute;
				top: 0;
				left: 0;
				svg {
					transform: translateY(150%);
					opacity: 0;
					path {
						fill: var(--gn-button-text-active-color);
					}
				}
				span {
					transform: translateY(-150%);
					opacity: 0;
					color: var(--gn-button-text-active-color);
				}
			}
			svg, span {
				transition: $transition;
			}
		}
		svg {
			width: calc(var(--gn-button-width)/4);
			margin-right: 5px;
		}
	}

	.gn-toggle-button.style-5 {
		width: calc(var(--gn-button-width)*1.2);
		height: calc(var(--gn-button-width)/2.7);
		
		border-radius: 100px;
		position: relative;
		
		font-size: calc( var(--gn-button-width) / 7 );
    	font-weight: 500;
		.knob {
			position: absolute;
			top: 0;
			left: 0;
			height: calc(var(--gn-button-width)/2.7);
			width: 50%;
			border-radius: 100px;
			background-color: white;
			z-index: 99;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
		    transition: $transition;
		    span {
		    	position: absolute;
		    	top: 50%;
		    	left: 50%;
		    	transform: translate(-50%, -50%);
		    	color: var(--gn-button-text-inactive-color);
		    }
		    span:last-child {
		    	display: none;
		    }
		} 
		[class*=label] {
			position: absolute;
			top: calc(50% - var(--gn-button-width) / 30);
			white-space: nowrap;
			margin-top: calc(var(--gn-button-width) / -10);
		}
		span.label1 {
			left: calc(var(--gn-button-width) / 9);
		}
		span.label2 {
			right: calc(var(--gn-button-width) / 9);
		}
	}

	.gn-toggle-button.style-6 {
		position: relative;
		width: calc(var(--gn-button-width)*1.4);
		height: calc(var(--gn-button-width)/2.3);
		background-color: transparent;
		.text {
			font-size: calc( var(--gn-button-width) / 6.5 );
			font-weight: 500;
			position: absolute;
			left: 0;
			top: 0;
			width: 80%;
			height: 100%;
			overflow: hidden;
			div {
				position: absolute;
				top: 50%;
				right: calc( var(--gn-button-width) / 9 );
				transform: translateY(-50%);
				height: 100%;
			    display: flex;
			    align-items: center;
			    transition: $transition;
				&:last-child {
					transform: translateY(100%);
				}
			}
		}
		.icon {
			position: absolute;
			right: 0;
			top: 0;
			width: 20%;
			height: 100%;
			svg {
				position: absolute;
				right: 0;
				top: 50%;
				width: 20%;
				height: 100%;
				transform: translateY(-50%);
				width: calc(var(--gn-button-width)/5);
				#star1 {
					animation-delay: 300ms;
				}
			}
		}
		
	}

	.gn-toggle-button.style-7 {
		height: calc(var(--gn-button-width)*1.2);
		width: calc(var(--gn-button-width)/2.7);
		
		border-radius: 100px;
		position: relative;
		
		font-size: calc( var(--gn-button-width) / 7 );
    	font-weight: 500;
		.knob {
			position: absolute;
			bottom: 0;
			left: 0;
			width: calc(var(--gn-button-width)/2.7);
			height: 50%;
			border-radius: 100px;
			background-color: white;
			z-index: 99;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
		    transition: $transition;
		    span {
		    	position: absolute;
		    	top: 50%;
		    	left: 50%;
		    	transform: translate(-50%, -50%) rotate(-90deg);
		    	color: #555;
		    }
		    span:last-child {
		    	display: none;
		    }
		} 
		[class*=label] {
			position: absolute;
			left: calc(50% - var(--gn-button-width) / 7.5);
			white-space: nowrap;
			writing-mode: vertical-lr;
		    transform: rotate(180deg);
		}
		span.label1 {
			bottom: calc(var(--gn-button-width) / 9);
		}
		span.label2 {
			top: calc(var(--gn-button-width) / 9);
		}
	}

	.gn-toggle-button.style-8 {
		display: inline-flex;
		align-items: center;
	    justify-content: center;
		height: var(--gn-button-width);
		background-color: transparent;
		svg {
			width: calc(var(--gn-button-width)/2.8);
		    margin-left: calc(var(--gn-button-width) / 18);
		}
		path {
			fill: var(--gn-button-text-inactive-color);
		}
		#star1 {
			animation-delay: 300ms;
		}
	}

	.gn-toggle-button.style-9 {
		display: inline-flex;
		align-items: center;
	    justify-content: center;
		height: var(--gn-button-width);
		background-color: transparent;
		svg {
			width: calc(var(--gn-button-width)/2.8);
		    margin-left: calc(var(--gn-button-width) / 18);
		}
		path:nth-child(2) {
			transform-origin: center;
		}
	}

	.gn-toggle-button.style-10 {
		display: inline-flex;
		align-items: center;
	    justify-content: center;
		height: var(--gn-button-width);
		background-color: transparent;
		svg {
			width: calc(var(--gn-button-width)/2.8);
		    margin-left: calc(var(--gn-button-width) / 18);
		}
		path:nth-child(2) {
			transform-origin: center;
		}
	}

	.gn-toggle-button.style-11 {
		height: calc(var(--gn-button-width)/2.3);
		border-radius: 100px;
		position: relative;
		overflow: hidden;
		.knob {
			position: absolute;
			top: calc(var(--gn-button-width)/14);
			left: calc(var(--gn-button-width)/14);
			height: calc(var(--gn-button-width)/3.3);
			width: calc(var(--gn-button-width)/3.3);
			border-radius: 50%;
			background-color: white;
			transition: $transition;
			&:before {
				content: '';
				height: calc(var(--gn-button-width)/3.5);
				width: calc(var(--gn-button-width)/3.5);
				position: absolute;
				top: -100%;
				left: -100%;
				background-color: var(--gn-button-inactive-bg-color);
				border-radius: 50%;
				transition: $transition;
			}
		} 
	}

	.gn-toggle-button.style-12 {
		height: var(--gn-button-width);
		border-radius: calc(var(--gn-button-width) / 4.5);
		padding: calc(var(--gn-button-width) / 6);
		svg {
			path {
				fill: var(--gn-button-text-active-color);
			}
		}
	}

	.gn-toggle-button.style-13 {
	    font-size: calc(var(--gn-button-width) / 6.4);
	    display: flex;
	    background-color: transparent;
	    div {
	    	flex-grow: 1;
	    	background-color: var(--gn-button-inactive-bg-color);
	    	&:first-child {
	    		border-top-left-radius: calc(var(--gn-button-width) / 1.8);
	    		border-bottom-left-radius: calc(var(--gn-button-width) / 1.8);
	    		padding: calc(var(--gn-button-width) / 30) 0 calc(var(--gn-button-width) / 30) calc(var(--gn-button-width) / 9);
	    		background-color: var(--gn-button-active-bg-color);
	    		color: var(--gn-button-text-active-color);
	    	}
	    	&:last-child {
	    		border-top-right-radius: calc(var(--gn-button-width) / 1.8);
	    		border-bottom-right-radius: calc(var(--gn-button-width) / 1.8);
	    		padding: calc(var(--gn-button-width) / 30) calc(var(--gn-button-width) / 9) calc(var(--gn-button-width) / 30) 0;
	    		text-align: right;
	    	}
	    }
	}

	.gn-toggle-button.style-14 {
		height: calc(var(--gn-button-width)/2.3);
		border-radius: 100px;
		position: relative;
		background-color: transparent;
		border: 3px solid var(--gn-button-inactive-bg-color);
		.knob {
			position: absolute;
			top: 50%;
			left: calc(var(--gn-button-width)/26);
			height: calc(var(--gn-button-width)/3.5);
			width: calc(var(--gn-button-width)/3.5);
			border-radius: 50%;
			background-color: var(--gn-button-inactive-bg-color);;
			transition: $transition;
			transform: translateY(-50%);
		} 
	}

	.gn-toggle-button.style-15 {
		width: calc(var(--gn-button-width)/2.3);
		height: var(--gn-button-width);
		border-radius: 100px;
		position: relative;
		background-color: transparent;
		border: 3px solid var(--gn-button-inactive-bg-color);
		.knob {
			position: absolute;
			left: 50%;
			top: calc(var(--gn-button-width)/26);
			height: calc(var(--gn-button-width)/3.5);
			width: calc(var(--gn-button-width)/3.5);
			border-radius: 50%;
			background-color: var(--gn-button-inactive-bg-color);;
			transition: $transition;
			transform: translateX(-50%);
		} 
	}



/*--------------------------------------------------------------
3.0 Active Button Styles
--------------------------------------------------------------*/
html {
	&.gn-dark-mode {
		.gn-toggle-button {
			background-color: var(--gn-button-active-bg-color);
		}
		.gn-toggle-button.style-1 {
			color: var(--gn-button-text-active-color);
			svg {
				path {
					fill: var(--gn-button-text-active-color);
				}
			}
			.moon-star {
				animation-name: gn-blink;
				animation-duration: 1s;
				animation-fill-mode: both;
				animation-iteration-count: infinite;
			}
		}
		.gn-toggle-button.style-2 {
			span.label {
				&:first-of-type {
					transform: translateY(-150%);
					opacity: 0;
				}
				&:last-of-type {
					transform: translateY(0);
					opacity: 1;
				}
			}
			.knob {
				left: calc(100% - var(--gn-button-width)/2.3);
			}
		}
		.gn-toggle-button.style-3 {
			path {
				fill: var(--gn-button-text-active-color);
			}
			.moon-star {
				animation-name: gn-blink;
				animation-duration: 1s;
				animation-fill-mode: both;
				animation-iteration-count: infinite;
			}
		}
		.gn-toggle-button.style-4 {
			.stage {
				&:first-of-type {
					svg {
						transform: translateY(-150%);
						opacity: 0;
					}
					span {
						transform: translateY(150%);
						opacity: 0;
					}
				}
				&:last-of-type {
					svg {
						transform: translateY(0);
						opacity: 1;
					}
					span {
						transform: translateY(0);
						opacity: 1;
					}
				}
			}
		}
		.gn-toggle-button.style-5 {
			background-color: var(--gn-button-inactive-bg-color);
			.knob {
				left: 100%;
				transform: translateX(-100%);
				span:first-child {
			    	display: none;
			    }
				span:last-child {
			    	display: block;
			    }
			}
		}
		.gn-toggle-button.style-6 {
			background-color: transparent;
			.text {
				color: var(--gn-button-text-active-color);
				div {
					&:first-child {
						transform: translateY(-200%);
					}
					&:last-child {
						transform: translateY(-50%);
					}
				}
			}
			.icon {
				svg {
					path {
						fill: var(--gn-button-text-active-color);
					}				
				}
			}
			.moon-star {
				animation-name: gn-blink;
				animation-duration: 1s;
				animation-fill-mode: both;
				animation-iteration-count: infinite;
			}
		}
		.gn-toggle-button.style-7 {
			background-color: var(--gn-button-inactive-bg-color);
			.knob {
				bottom: 100%;
				transform: translateY(100%);
				span:first-child {
			    	display: none;
			    }
				span:last-child {
			    	display: block;
			    }
			}
		}
		.gn-toggle-button.style-8 {
			background-color: transparent;
			.moon-star {
				animation-name: gn-blink;
				animation-duration: 1s;
				animation-fill-mode: both;
				animation-iteration-count: infinite;
			}
			path {
				fill: var(--gn-button-text-active-color);
			}
		}
		.gn-toggle-button.style-9 {
			background-color: transparent;
			path:nth-child(2) {
				fill: var(--gn-button-text-active-color);
				animation-name: gn-rotate;
				animation-duration: 3s;
				animation-iteration-count: infinite;
			}
		}
		.gn-toggle-button.style-10 {
			background-color: transparent;
			path:nth-child(2) {
				fill: var(--gn-button-text-active-color);
				animation-name: gn-rotate-half;
				animation-duration: 0.5s;
				animation-timing-function: ease-in-out;
				animation-fill-mode: both;
				animation-direction: alternate;
				animation-iteration-count: infinite;
			}
		}
		.gn-toggle-button.style-11 {
			background-color: var(--gn-button-inactive-bg-color);
			.knob {
				left: calc(100% - var(--gn-button-width)/2.6);
				&:before {
					top: -20%;
					left: -30%;
				}
			}
		}
		.gn-toggle-button.style-13 {
			background-color: transparent;
		    div {
		    	&:first-child {
		    		background-color: var(--gn-button-inactive-bg-color);
		    		color: var(--gn-button-text-inactive-color);
		    	}
		    	&:last-child {
		    		background-color: var(--gn-button-active-bg-color);
		    		color: var(--gn-button-text-active-color);
		    	}
		    }
		}
		.gn-toggle-button.style-14 {
			background-color: transparent;
			.knob {
				left: calc(100% - var(--gn-button-width)/2.9);
				background-color: var(--gn-button-active-bg-color);
			}
		}
		.gn-toggle-button.style-15 {
			background-color: transparent;
			.knob {
				top: calc(100% - var(--gn-button-width)/2.9);
				background-color: var(--gn-button-active-bg-color);
			}
		}
	}
}


/*--------------------------------------------------------------
4.0 Dark Mode Styles
--------------------------------------------------------------*/

	html {

		/*Hide Dark Images*/
		img.gn-dark-image {
			display: none !important;
		}
	
		&.gn-dark-mode {
			color-scheme: dark;
			background-color: var(--gn-bg-color) !important;
			color: var(--gn-text-color) !important;
			
			body {
				background-color: var(--gn-bg-color) !important;
				color: var(--gn-text-color) !important;
			}

			/*Background Color & Text Color*/
			*:not(.gn-ignore):not(img):not(mark):not(code):not(pre):not(ins):not(option):not(input):not(select):not(textarea):not(button):not(button *):not(a):not(a[class*=btn] *):not(a[class*=button] *):not(video):not(canvas):not(progress):not(iframe):not(svg):not(path):not(.mejs-iframe-overlay):not(.elementor-element-overlay):not(.elementor-background-overlay):not(.gn-toggle-button):not(.gn-toggle-button *):not(.photo-overlay):not(.photo-overlay *):not(.moxie-shim.moxie-shim-html5):not(.flickity-slider):not(.flickity-slider *):not(.box-overlay):not(.box-overlay *):not(.button):not(.button *):not([data-settings*="background_background"]):not([data-settings*="background_background"] *):not(.mejs-inner *):not(rs-slides):not(rs-slides *):not(.overlay):not(.overlay *):not(.blog-slider):not(.blog-slider *):not(.post-switch-item-content):not(.post-switch-item-content *):not(i.icon):not(.pp_content_container):not(.pp_content_container *):not(.sh-hamburger-menu):not(.sh-hamburger-menu *):not(.sh-header-mobile):not(.sh-header-mobile *):not(.post-overlay-content):not(.post-overlay-content *):not(.masonry-blog-item *):not(.mdp-readabler-trigger-button-box):not([data-bg-overlay=true] .row-bg-overlay):not([data-bg-overlay=true] .row-bg-overlay *):not(.column-bg-overlay-wrap):not(.column-bg-overlay-wrap *):not(.no-carousel):not(.no-carousel *):not(.cart-wrap):not(.cart-wrap *):not([data-bg-overlay=true]):not([data-bg-overlay=true] *):not(ul.controls li.previous-post *):not(ul.controls li.next-post *):not(ul.ui-tabs-nav li *):not(.magcover):not(.magcover *):not(.overlayed):not(.overlayed *):not(.nav-links *):not([class*=fold-shadow]):not(.sf-menu li a *) {
				background-color: var(--gn-bg-color) !important;
				color: var(--gn-text-color) !important;
				box-shadow: none !important;
				/*border-color: var(--gn-border) !important;*/
			}


			/*Input*/
			input:not(.gn-ignore):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="file"]), iframe:not(.gn-ignore), iframe *:not(.gn-ignore), select:not(.gn-ignore), textarea:not(.gn-ignore) {
				background-color: var(--gn-input-bg-color) !important;
				color: var(--gn-input-text-color) !important;
			}

			/*Links*/
			a:not(.gn-ignore):not([href="#gn-none"]):not(.full-slide-link), a *:not(.gn-ignore):not(.gn-toggle-button):not(.gn-toggle-button *):not(.activity-time-since *):not(.full-slide-link *), a:active:not(.gn-ignore), a:active *:not(.gn-ignore), a:visited:not(.gn-ignore), a:visited *:not(.gn-ignore) {
				color: var(--gn-link-color) !important;
			}

			/*Show Dark Image & Hide Light Image*/
			img.gn-dark-image:not(.bb-logo-dark):not(.mobile-only-logo) {
				display: inline-block !important;
			}
			img.gn-light-image {
				display: none !important;
			}

		}

	}



/*--------------------------------------------------------------
5.0 Theme Support
--------------------------------------------------------------*/



/*--------------------------------------------------------------
6.0 Animations
--------------------------------------------------------------*/
@keyframes gn-blink {
    from {
	    opacity: 0;
	}

	to {
	    opacity: 1;
	}
}

@keyframes gn-rotate {
	to {
	    transform: rotate(360deg);
	}
}

@keyframes gn-rotate-half {
	to {
	    transform: rotate(35deg);
	}
}


/*--------------------------------------------------------------
7.0 Media Queries
--------------------------------------------------------------*/

@media (max-width: 812px) {
	
}

@media only screen and (max-width: 1000px) {
	
}





/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/