/*gutena kit admin dashboard */
$gutenakit_primary_color: #0EA489;
$gutenakit_red_color: #E24F4F;
$gutenakit_white_color: #ffffff;
$gutenakit_body_text_color : #484952;
$gutenakit_heading_color : #21222F;
$loader-size: 1.5em;
$check-height: calc($loader-size/2);
$check-width: calc($check-height/2);
$check-left: calc(calc($loader-size/14) + calc($loader-size/14));
$check-thickness: 3px;
$check-color: $gutenakit_primary_color;

.appearance_page_gutenakit_admin_dashboard #wpcontent{
    padding: 0;
}

#wpbody-content .notice:not(.gk-notice)  {
	display: none;
}

.gk-notice .notice-dismiss {
	top:2px;
}

.gutena-buttons {
	display: flex;
	gap: 21px;
	a:visited{
		color:$gutenakit_white_color;
	}
}

/*Gutena Btn*/
.gutena-button {
	background: $gutenakit_primary_color;
	border-radius: 5px;
	color: $gutenakit_white_color;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.31;
	padding: 0.8125rem 1.1875rem;
	text-decoration: none;
	text-align: center;
}

.gk-black-btn.gutena-button {
	background-color: $gutenakit_heading_color;
	display: flex;
    align-items: center;
}

/*Gutena Theme installation modal :start*/
.gutena-theme-require-modal {
	.components-modal__content {
		margin-top: 0;
		padding: 45px 36px;
		max-width: 500px;
	}

	.gutena-theme-require-modal-description {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		padding-bottom: 29px;

		img {
			padding-top: 10px;

			&.success{
				padding-top: 5px;
			}
		}


		p {
			margin: 0;
			font-size: 20px;
			line-height: 1.6;
			font-weight: 600;
		}
	}

	.gutena-theme-require-modal-buttons {
		padding-left: 28px;
		.gutena-button {
			color: $gutenakit_white_color;
			font-size: 15px;
			line-height: 1.27;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 8px;
			width: inherit;
			position: relative;
			overflow: hidden;
			&::before{
				background: linear-gradient(97.91deg, rgba(0,0,0,0.2) 11.27%, rgba(0,0,0,0.2) 86.28%);
				border-radius: 5px;
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				height: 100%;
				width: 100%;
			}
	
			&.start-installing::before {
				animation: gkinstalling 50s ease-in-out forwards;
			 } 
	
			 @keyframes gkinstalling {
				0%{
					left:-100%;
				} 
				10%{
					left:-80%;
				} 
				20%{
					left:-70%;
				} 
				30%{
					left:-65%;
				} 
				40%{
					left:-60%;
				} 
				50%{
					left:-50%;
				} 
				60%{
					left:-40%;
				} 
				80%{
					left:-20%;
				} 
				90%{
					left:-10%;
				} 
				100%{
					left:0%;
				} 
			 }
		}
	}

	
}
/*Gutena Theme installation modal :end*/

#gutenakit-admin-dashboard-page .gutenakit-admin-dashboard {

	.components-tab-panel__tabs-item:focus:not(:disabled) {
		box-shadow: none;
		outline: none;
	}
	/*Primary color*/
	.gk-primary-color {
	  	color: $gutenakit_primary_color;
	}

	/* Header */
	.gutena-header {
		background: $gutenakit_white_color;
		display: flex;
		padding: 1.25rem;
		justify-content: space-between;
	}
	
	.gutena-header .gutena-admin-logo img{
		max-width: 182px;
	}
	
	/* Tabs */
	.gutena-tab-panel .components-tab-panel__tabs {
		background-color: $gutenakit_white_color;
		display: flex;
		justify-content: center;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 3px rgba(0, 0, 0, 0.1);
	}
	
	.gutena-tab-panel .components-tab-panel__tabs-item {
		border: none;
		border-left: 1px solid #E5E7EB;;
		background: $gutenakit_white_color;
		color: #1D2327;
		font-style: normal;
		font-weight: 600;
		font-size: 0.9375rem;
		line-height: 1.25;
		padding: 1rem 3.75rem;
		cursor: pointer;
	}
	
	.gutena-tab-panel .components-tab-panel__tabs-item:nth-child(1) {
		border: none;
	}
	
	/* Active Tab */
	.gutena-tab-panel .components-tab-panel__tabs-item.active-tab {
		color: $gutenakit_primary_color;
		border-bottom: 2px solid $gutenakit_primary_color;
	}
	
	/* Tab Body */
	.gutena-tab-panel .components-tab-panel__tab-content {
		max-width: 950px;
		margin: 0 auto;
	}
	
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-tab-body {
		margin-top: 3.75rem;
	}
	
	
	/* Tab Body : Title */
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-title {
		font-weight: 600;
		font-size: 1.75rem;
		line-height: 1.32;
		color: #1D2327;
	}
	
	/* Tab Body : Paragraph */
	.gutena-tab-panel .components-tab-panel__tab-content p{
		color: $gutenakit_body_text_color;
		font-style: normal;
		font-weight: 400;
		font-size: 0.9375rem;
		line-height: 1.6;
	}
	
	.margin-auto{
		margin: auto;
	}
	
	 .gutena-notice {
		position: absolute;
		top: 10rem;
		right: 0;
		padding: 1rem;
	}
	
	 .gutena-notice.failed-notice {
		border-right: 5px solid #cc1818;
		background: #f4a2a2;
	}
	
	 .gutena-notice.success-notice {
		border-right: 5px solid #4ab866;
		background: #eff9f1;
	}
	
	 .gutena-notice .gutena-dismiss-notice {
		font-weight: 1.5rem;
		font-weight: 900;
		margin-right: 10px;
		cursor: pointer;
	}
	
	 .gutena-notice.notice-dismissed {
		display: none;
	}
	
	
	/* Tab Body : Button hover */
	.gutena-tab-panel .gutena-button:hover {
		color: $gutenakit_white_color;
		box-shadow: inset 0 0 0 100px rgb(0 0 0 / 10%);
		cursor: pointer;
	}
	
	/* Tab Body :thematic break */
	.gutena-tab-panel .components-tab-panel__tab-content hr {
		border: 1px solid #1D2327;
		opacity: 0.1;
		height: 0;
	}
	
	/* Tab Body :Welcome Tab */
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-grid {
		display: grid;
		grid-template-columns: 430px 400px;
		grid-gap: 3rem;
	}
	
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-welcome-tab .gutena-title {
	   margin-bottom: 1rem;
	}
	
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-description {
		padding-bottom: 1.75rem;
	}
	
	/* Tab Body :Templates Tab */
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-templates-tab .gutena-details{
		text-align: center;
		max-width: 506px;
		margin: 0 auto;
		padding-bottom: 4rem;
	}
	
	.gutena-tab-panel .components-tab-panel__tab-content .gutena-templates-tab .gutena-title{
		margin-bottom: 1rem;
	}
	
	/* Tab Body :Changelog Tab */
	.gutena-knowledge-tab {
		background: $gutenakit_white_color;
		padding: 2.5rem 2.875rem;
		/* Tab Body :Doc Tab */
		.gutena-doc-tab {
			hr {
				margin: 3.8rem 0;
			 }
			 
			 .gutena-topics a {
				 color: $gutenakit_heading_color;
				 font-weight: 600;
				 font-size: 1rem;
				 line-height: 1.6;
				 text-decoration-line: none;
			 }
			 
			.gutena-support {
				max-width: 321px;
				.gutena-title, .gutena-description {
					margin: 0;
				}

				.gutena-description {
					padding: 0.85rem 0 1.8rem 0;
				}

			}
		}

		.gutena-changelog-tab {
			.gutena-title {
				margin-bottom: 1rem;
			}
			
			 .gutena-description {
				white-space: pre;
			}
			
			 .version {
				color: #1D2327;
				font-weight: 600;
				font-size: 1.125rem;
				line-height: 1.3;
			}
			
			 hr:nth-child(1) {
				display: none;
			}
		}
	}
	 
	/*Tab panel settings : end*/
	/*Starter template : start*/
	.gk-dashboard {
		padding-top: 30px;
		/*========================================================================
		Header : It contains some filter for demos which may be enable in future
		==========================================================================*/
		.gk-top-header {
			// display: flex;
			display: none;
			background: $gutenakit_white_color;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			.gk-logo img {
				max-width: 182px;
			}
	
			.gk-center-tabs {
				display: flex;
				gap: 45px;
				cursor: pointer;
			}
	
			.gk-center-tabs .gk-tab {
				padding: 8px 12px;
				border-radius: 6px;
			}
	
			.gk-center-tabs .gk-tab.selected, 
			.gk-center-tabs .gk-tab:hover {
				color: $gutenakit_primary_color;
				background: #E5EDFF;
			}
		}

		.gk-demo-grid {
			width: 100%;
			margin: 39px auto;
			display: grid;
			grid-template-columns: repeat(3,1fr);
			grid-gap: 50px;
		}

		.gk-demo-card {
			background: $gutenakit_white_color;
			box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
			height: 345px;
			position: relative;
			overflow: hidden;

			.gk-demo-link {
				display: none;
			}

		    .gk-demo-pro-icon {
				position: absolute;
				top: 13px;
				left: 13px;
				z-index: 9;
			}
			
			&:hover {
				box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);

				.gk-demo-link {
					display: block;
					position: absolute;
					top: 15px;
					right: 15px;
					z-index: 9;
				}
			}
	
			.gk-demo-card-img img { 
				position: relative;
				overflow: hidden;
			}
			.gk-demo-card-footer {
				border-top: 1px solid rgba(29, 35, 39, 0.1);
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 50px;
				background-color: $gutenakit_white_color;
				display: grid;
				grid-template-columns: 2fr 1fr;
				justify-content: space-between;
				align-items: center;
				
				.gk-demo-import-action {
					cursor: pointer;
					display: flex;
					gap: 0.5rem;
					justify-content: center;
					align-items: center;
					height: 100%;
					border-left: 1px solid rgba(33, 34, 47, 0.2);

					.import-btn-name {
						padding-bottom: 3px;
					}
				}

				.gk-demo-title {
					color: #1D2327;
					font-size: 14px;
					line-height: 1.357;
					font-weight: 600;  
					padding-left: 1rem ;
				}
			}
	
		}

		/*==========================================
		Gutena Theme installation notice
		===========================================*/

		.gutena-theme-require-notice {
			display: grid;
			gap: 14px;
			padding: 7px 7px 7px 20px;
			margin: 0 0 0 0;
			align-items: center;
			grid-template-columns: 1fr 30fr 12fr;
			
			p{
				font-size: 15px;
				line-height: 1.6;
				font-weight: 600;
				color:#92400E;
			}

			.dismiss-link{
				color: $gutenakit_heading_color;
				cursor: pointer;
				text-decoration: underline 2px;
    			text-underline-offset: 2px;
				
				&:hover{
					color: $gutenakit_primary_color;
				}
				
			}
			
			&.notice-warning{
				background-color: #FFFBEB;
			}

			&.notice-error{
				background-color: #fce1e2;
			}

			&.notice-success{
				background-color: #E2F2EF;
				p {
					color: $gutenakit_primary_color;
				}
			}

			.gutena-button {
				font-size: 15px;
				line-height: 1.27;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 8px;
				width: inherit;
			}
		}
		/*=====================================
		DEMO PREVIEW SCREEN START
		======================================*/

		/*======================================
		DEMO PREVIEW SCREEN : LEFT SECTION
		========================================*/
		.gk-demo-preview .gk-left-section {
			background: $gutenakit_white_color;
			filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
		}
		.gk-demo-preview .gk-header,
		.gk-demo-preview .gk-style-variations {
			padding: 15px 17px;
			border-bottom: 1px solid rgba(29, 35, 39, 0.1);
		}

		.gk-demo-preview .gk-header .gk-back-button {
			display: flex;
			gap: 6px;
			padding-bottom: 15px;
			align-items: center;
		}

		.gk-demo-preview .gk-header .gk-back-button,
		.gk-section-title-reset-icon .gk-reset-icon {
			cursor: pointer;
		}

		.gk-header .gk-back-button .gk-icon .dashicons,
		.gk-header .gk-back-button .gk-icon .dashicons-before:before { 
			width: 13px;
			height: 15px;
			font-size: 15px;
			font-weight: 600;
			line-height: 1.35;
		}

		.gk-header .gk-back-button .gk-text {
			font-size: 13px;
			line-height: 1.4;
			font-weight: 600;
			letter-spacing: 0.03em;
			color: $gutenakit_body_text_color;
		}

		.gk-section-title-reset-icon .gk-reset-icon:hover,
		.gk-header .gk-back-button:hover,
		.gk-header .gk-back-button .gk-text:hover {
			color: $gutenakit_primary_color;;
		}

		.gk-demo-preview .gk-demo-title {
			font-size: 18px;
			line-height: 1;
			font-weight: 600;
		}

		/*======================================
		LEFT SECTION : STYLE VARIATION 
		========================================*/
		.gk-demo-preview .gk-style-variations {
			max-height: calc(100vh - 186px);
			overflow-y: auto;
		}

		.gk-demo-preview .gk-section-title-reset-icon {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;
		}

		.gk-demo-preview .gk-section-title {
			font-size: 14px;
			line-height: 1.4;
			font-weight: 500;
		}

		.gk-color-demo-variation-card {
			box-sizing: border-box;
			cursor: pointer;
			display: flex;
			gap: 18px ;
			align-items: center;
			padding: 11px 19px;
			border: 2px solid rgba(29, 35, 39, 0.2);
			border-radius: 5px;
			margin-top: 7px;
			transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
		}

		.gk-color-demo-variation-card.style-selected, 
		.gk-color-demo-variation-card:hover {
			border: 2px solid $gutenakit_primary_color;
		}

		.gk-color-demo-variation-card .gk-demo-color-palette {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 6px;
		}

		.gk-demo-color-palette .gk-color-swatch {
			width: 19px;
			height: 19px;
			border-radius: 50%;
			border: 1px solid #efefef;
		}


		.demo-style-details .style-title {
			font-size: 16px;
			line-height: 1.4;
			font-weight: 600;
			color: #1D2327;
			margin-bottom: 5px;
		}

		.demo-style-details .font-families { 
			font-size: 12px;
			line-height: 1.4;
			font-weight: 600;
			color: $gutenakit_body_text_color;
		}

		/*======================================
		LEFT SECTION : IMPORT BUTTON
		========================================*/
		.gk-demo-preview .import-demo-action {
			padding: 12px 21px;
			border-bottom: 1px solid rgba(29, 35, 39, 0.1);
		}

		.import-demo-action .import-demo-btn {
			display: inline-block;
			text-decoration: none;
			cursor: pointer;
			padding: 12px 20px;
			background: $gutenakit_primary_color;
			color: $gutenakit_white_color;
			border-radius: 3px;
			display: flex;
			gap: 8px;
			justify-content: center;
			transition: all 0.3s ease;
			-webkit-transition: all 0.3s ease;
			-moz-transition: all 0.3s ease;
			-o-transition: all 0.3s ease;
		}

		.import-demo-action .import-demo-btn:hover {
			box-shadow: inset 0 0 0 100px rgba(0,0,0,.1);
		}

		.import-demo-action .import-demo-btn .gk-btn-icon svg {
			width: 18px;
			height: 20px;
		}

		.import-demo-action .import-demo-btn .gk-btn-text {
			font-size: 16px;
			line-height: 1.4;
			font-weight: 600;
		}
	}
	/*Starter template : end*/
	/*Block settings tab: start*/
	.gk-block-settings-tab {
		padding-top: 69px;
	}

	.gk-block-settings-card {
		background-color: $gutenakit_white_color;
		padding: 32px 38px 25px 34px;
		margin-bottom: 45px;
		font-weight: 600;

		.gk-header {
			display: flex;
			justify-content: space-between;

			.gk-title {
				font-size: 28px;
				line-height: 1.32;
			}
		}
		/*Block list for activate deactivate settings*/
		.gk-block-list{
			padding-top: 38px;
			padding-bottom: 38px;
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat( 2, 1fr );

			.gk-block-control-section {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 0.8rem;
			}
			
			.gk-block-control-section:nth-child(odd) {
				border-right: 1px solid rgba(33, 34, 47, 0.1);
			}

			.gk-block-control-wrapper {
				width: 260px;
				padding: 15px 4px;
				border-bottom: 1px solid rgba(33, 34, 47, 0.1);
				font-size: 15px;
				line-height: 1.6;
				display: flex;
    			justify-content: space-between;
			}

			/*Gk loader: start*/
			.gk-block-loader {
				visibility: hidden;
				&.start{
					visibility: visible;
				}
			}
			.gk-loader {
				/*margin-bottom: $loader-size/2;*/
				border: 2.5px solid rgba(0, 0, 0, 0.2);
				border-left-color: $check-color;
				animation: gk-loader-spin 1.2s infinite linear;
				position: relative;
				display: inline-block;
				vertical-align: top;
				border-radius: 50%;
				width: $loader-size;
				height: $loader-size;
				&.deactivation{
					border-left-color: $gutenakit_red_color;
				}
			}
			
			.load-complete {
				-webkit-animation: none;
				animation: none;
				border-color: $check-color;
				transition: border 500ms ease-out;
				.gk-checkmark {
					display: block;
				}
			}
			
			.gk-checkmark {
				display: none;
				
				&.draw:after {
				animation-duration: 800ms;
				animation-timing-function: ease;
				animation-name: gk-checkmark;
				transform: scaleX(-1) rotate(135deg);
				}
				
				&:after {
				opacity: 1;
				height: $check-height;
				width: $check-width;
				transform-origin: left top;
				border-right: $check-thickness solid $check-color;
				border-top: $check-thickness solid $check-color;
				content: '';
				left: $check-left;
				top: $check-height;
				position: absolute;
				}
			}
			
			@keyframes gk-loader-spin {
				0% {
				transform: rotate(0deg);
				}
				100% {
				transform: rotate(360deg);
				}
			}
			
			@keyframes gk-checkmark {
				0% {
				height: 0;
				width: 0;
				opacity: 1;
				}
				20% {
				height: 0;
				width: $check-width;
				opacity: 1;
				}
				40% {
				height: $check-height;
				width: $check-width;
				opacity: 1;
				}
				100% {
				height: $check-height;
				width: $check-width;
				opacity: 1;
				}
			}
			
			/*Gk loader: end*/
		}



	}
	.gk-save-block-settings {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 15px;
		.gutena-button {
			position: relative;
			width: 150px;
    		overflow: hidden;
			&::before{
				background: linear-gradient(97.91deg, rgba(0,0,0,0.2) 11.27%, rgba(0,0,0,0.2) 86.28%);
				border-radius: 5px;
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				height: 100%;
				width: 100%;
			}

			&.start-installing::before {
				animation: gkinstalling 50s ease-in-out forwards;
			 } 

			 @keyframes gkinstalling {
				0%{
					left:-100%;
				} 
				10%{
					left:-80%;
				} 
				20%{
					left:-70%;
				} 
				30%{
					left:-65%;
				} 
				40%{
					left:-60%;
				} 
				50%{
					left:-50%;
				} 
				60%{
					left:-40%;
				} 
				80%{
					left:-20%;
				} 
				90%{
					left:-10%;
				} 
				100%{
					left:0%;
				} 
			 }
		}

		.gk-skip-settings {
			cursor: pointer;
			font-weight: 600;
			&:hover{
				color: $gutenakit_primary_color;
			}
		}
	}
	
	/*Block settings tab: end*/

	/*Toggle Switch : tick cross : start*/
	.gk-toggle-tick-cross {

		input[type="checkbox"] {
		display: none;
		}
		
		
		/* Toggle State is :CHECKED */
		
		input[type="checkbox"]:checked ~ .gk-toggle {
		background: #CEEEE8;
		/* Teal bg */
		box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2) 0 1px 1px 0 rgba(0, 0, 0, .14) 0 1px 3px 0 
		}
		
		input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob {
		left: 21px;
		transform: rotate(360deg);
		background-color: #0EA489;
		}
		
		
		/* Shared */
		
		.gk-toggle,
		.gk-toggle-knob {
		border-radius: 9999px;
		}
		
		
		/* Toggle State is 'un':checked */
		
		.gk-toggle {
		height: 24px;
		width: 44px;
		background: rgba(224, 224, 224, 1);
		position: relative;
		display:block;
		}
		
		.gk-toggle-knob {
		height: 20px;
		width: 20px;
		background: rgba(255, 255, 255, 1);
		/* white knob */
		position: absolute;
		top: 2px;
		left: 2px;
		cursor: pointer;
		box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2) 0 1px 1px 0 rgba(0, 0, 0, .14) 0 1px 3px 0 rgba(0, 0, 0, .12);
		}
		
		.gk-toggle-knob::before {
		content: '';
		height: 10px;
		width: 2px;
		/* stroke */
		position: absolute;
		top: calc(50% - 4.5px);
		left: calc(50% - 1px);
		transform: rotate(45deg);
		}
		
		.gk-toggle-knob::after {
		content: '';
		height: 2px;
		/* stroke */
		width: 10px;
		position: absolute;
		top: calc(50% - 0.5px);
		left: calc(50% - 5px);
		transform: rotate(45deg);
		}
		
		.gk-toggle-knob::before,
		.gk-toggle-knob::after {
		background: $gutenakit_red_color;
		border-radius: 2px;
		}
		
		/* pesduo class on toggle - on checked */

		input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::before {
		height: 7px;
		top: calc(55% - 5px);
		left: calc(60% - 1px);
		background: #ffffff;
		}
		
		input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::after {
		width: 5px;
		top: calc(95% - 9px);
		left: calc(22.5% + 1px);
		background: #ffffff;
		}
	
		/* If action required to perform - install or uninstall*/
		&.action-required {
			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::before,
			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::after,
			.gk-toggle-knob::before,
			.gk-toggle-knob::after {
				background: transparent;
			}
		}

		/*Large toggle*/
		&.large{
			/*toggle length and height*/
			.gk-toggle {
				height: 36px;
				width: 198px;
			}
			/*toggle knob*/
			.gk-toggle-knob {
				height: 32px;
				width: 32px;
			}

			/* Message */
			.gk-toggle-msg {
				height: 100%;
				display: flex;
				align-items: center;
				position: absolute;
    			left: 45px;
				font-weight: 400;
			}
	
			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::before {
				height: 12.5px;
				top: calc(55% - 7px);
				left: calc(60% - 1.5px);
			}
	
			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob::after {
				width: 7px;
				top: calc(95% - 13px);
				left: calc(22.5% + 2px);
			}
	
			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-knob {
				left: 164px;
			}

			input[type="checkbox"]:checked ~ .gk-toggle .gk-toggle-msg {
    			left: 25px;
			}
			
		}
	
	}
	/*Toggle Switch : tick cross : end*/

	/*On boarding : Start*/
	&.gk-onboarding {
		font-size: 15px;
		line-height: 1.6;
		font-weight: 400;
		color: $gutenakit_body_text_color;


		.gutena-header {
			gap: 10px;
			align-items: center;
			justify-content: flex-start;
			
			h3{
				font-size: 17px;
				line-height: 1.3;
				font-weight: 500;
			}
		}

		/*Step rings*/
		.gk-onboarding-steps {
			padding-top: 50px;
			padding-bottom: 10px;
			display: grid;
			grid-template-columns: 1fr 4fr 1fr;
			gap:13px;
			max-width: 250px;
			margin-left: auto;
			margin-right: auto;
			align-items: center;

			.gk-step {
				border: 2px solid #C7C7CA;
				border-radius: 50%;
				width: 32px;
				height: 32px;
				display: flex;
				justify-content:center;
				align-items:center;
				font-weight: 600;
				
				&.active{
					border: 2px solid $gutenakit_primary_color;
					color: $gutenakit_primary_color;
				}

				&.done{
					border: 2px solid $gutenakit_primary_color;
					background-color: $gutenakit_primary_color;
					color: $gutenakit_white_color;
				}

			}
			
			.gk-step-link {
				border-bottom: 2px solid #C7C7CA;
				&.active{
					border-bottom: 2px solid $gutenakit_primary_color;
				}
			}
		}

		.gk-steps-name {
			max-width: 300px;
			margin: auto;
			display: flex;
			justify-content: space-between;
			padding-bottom: 50px;
			font-weight: 500;

			.gk-step-name {
				&.active {
					font-weight: 600;
				}
	
				&.done {
					font-weight: 600;
					color:$gutenakit_primary_color;
				}
			}
		}

		.gutena-details {
			max-width: 620px;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			* {
				margin: 0;
			}

			.gutena-description {
				padding: 15px 0 30px 0;
				text-align: center;
			}
		}

	}
	/*On boarding : End*/
	
	  
}