/*

	Theme Name: Eksell-hpwords
	Template: eksell

/* ---------------------------------------------------------------------------------------------
:root .has-small-font-size { font-size: .34em; }

:root {
	/* Typography */
	--eksell-body-font: 'Segoe UI', 'Oxygen', 'Ubuntu', 'Roboto', 'Helvetica Neue', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Roboto', 'Helvetica Neue', 'Noto Sans KR', 'Noto Sans JP', Helvetica, sans-serif;
	--eksell-headings-font: 'Roboto', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Roboto', 'Noto Sans KR', 'Noto Sans JP', 'Helvetica Neue', Helvetica, sans-serif;
	--eksell-headings-weight: 600;
	/* Colors */
	--eksell-accent-color: #d23c50;
	--eksell-primary-color: #1e2d32;
	--eksell-secondary-color: #707376;
	--eksell-border-color: #d6d5d4;
	--eksell-light-background-color: #f3efe9;
	--eksell-background-color: #fff;
	--eksell-menu-modal-background-color: #1e2d32;
	--eksell-menu-modal-text-color: #fff;
	/* Layout */
	--eksell-inner-width-thin: 65.2rem;
	--eksell-inner-width-small: 76rem;
	--eksell-inner-width-medium: 104rem;
	--eksell-inner-width-max: 205.2rem;
	--eksell-inner-gutter: 4.8rem;
	--eksell-aside-width: 6.4rem;
}


/* Font Sizes -------------------------------- */

:root .has-small-font-size { font-size: .882352941em; }
:root .has-regular-font-size, :root .has-normal-font-size { font-size: 1em; }
:root .has-large-font-size { font-size: 1.17647em; }
:root .has-larger-font-size { font-size: 1.29411em; }

:root .has-header-1 { 
	   display: none;
	   margin-top: 4.2rem; 
	   font-size: 3.8rem;
        }

:root .has-header-2 { 
	   display: none;
	   margin-top: 3.8rem; 
	   font-size: 2.8rem; 
	   }

:root .has-header-3 { 
	   display: none;
	   margin-top: 3.8rem; 
	   font-size: 2.6rem; 
       }

:root .has-header-4 { 
	   display: none;
	   margin-top: 3.8rem; 
	   font-size: 2.3rem; 
       }

:root .has-header-5 { 
	   display: none;
	   margin-top: 3.8rem; 
	   font-size: 1.9rem; 
       }

:root .has-header-6 { 
	   display: none;
	   margin-top: 3.8rem; 
	   font-size: 1.7rem; 
       }

	h6, .h6 {
		margin-top: 3.8rem;
		margin-bottom: 1.2rem;
	}

blockquote {
	border-color: var( --eksell-accent-color );
	border-style: solid;
	border-width: 0 0 0 .2rem;
	color: inherit;
	font-size: 1em;
	margin: 2rem 0;
	padding: 0 0 0 2rem;
}

blockquote.engparagraph{
	border-color: #C20F2D;
}

/* Ensure .search-toggle is always visible */
@media (max-width: 699px) {
    .header-toggles .search-toggle {
        display: flex !important;
    }
}

/* Additionally override any other display settings */
.header-toggles .search-toggle {
    display: flex !important;
}

@media (max-width: 490px) {
	
	.site-title {
	font-size: 1.7rem !important;
}
}

/* Post Grid --------------------------------- */

.posts {
	overflow: hidden;
	padding-bottom: 4.8rem;
	position: relative;
}

.posts:before {
	background-color: var( --eksell-background-color ) !important;
	content: "";
	display: block;
	position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		top: 2.4rem;
}

.image-container {
/*    background-image: linear-gradient(315deg, #ECD5E9 0%, white 50%, #DBDBEE 100%) !important;*/
    background-size: 210% 210% !important;
    animation: gradientAnimation 40s infinite alternate !important;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}


.page-template-homepage2-php #site-header.is-sticky {
    background: none;
	position: absolute;
   /* margin-bottom: 0 !important;  Remove the bottom margin for a seamless design */
}

.page-template-homepage2 #site-footer, 
.page-template-homepage2-php #site-footer {
  margin-top: 0 !important;
}

.dayliquote,
.dayliquote {
	padding: 24px 48px 24px;
	text-align: center;
	line-height: 1.5;
	background-image: none; 
	position: relative;
    background-color: transparent; /* Background with white transparency */
    border-radius: 0px; /* Rounded corners */
    overflow: hidden; /* Ensures child elements don't overflow rounded corners */
    transition: background-color 1s ease; /* Smooth transition for background changes */
	border-bottom: 2px solid #ECCD5B;
	border-top: 2px solid #ECCD5B;
}

/* Add the overlay effect */
.dayliquote::before,
.dayliquote::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Ensure the overlay doesn't block clicks */
}

/* Hover and active states for the overlay */
.dayliquote:hover::before,
.dayliquote:hover::before,
.dayliquote:active::before,
.dayliquote:active::before {
    background-color: rgba(160, 160, 160, 0.1); /* Light overlay on hover or active state */
}

/* Ensure the entire block is clickable */
.dayliquote,
.dayliquote {
    cursor: pointer; /* Indicate that the block is clickable */
}

.dayliquote a,
.dayliquote a {
    cursor: pointer; /* Ensure internal links have the default cursor */
}

.dayliquote a:hover,
.dayliquote a:hover {
    cursor: pointer; /* Ensure links show pointer on hover */
}

.preview-media {
    position: relative;
    border-radius: 16px; /* Adjust the value to control how rounded the corners are */
    overflow: hidden; /* Ensures the child elements don't overflow rounded corners */
}

.preview-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Initially transparent */
    transition: background-color 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Ensure the hover effect doesn't block clicks */
}

.preview-media:hover::before,
.preview-media:active::before {
    background-color: rgba(160, 160, 160, 0.1); /* Light overlay on hover */
}

.preview-media-link {
    display: block;
    position: relative; /* Ensure the link covers the full image */
    z-index: 1; /* Make sure the link remains clickable over the overlay */
}



.page-template-homepage2 .posts:before, 
.page-template-homepage2-php .posts:before {
    background-color: transparent !important;
	/*background-image: url('/wp-content/themes/eksell-child/assets/background14.jpg');*/
    }

/* Daily quote */



.dayliquote a {
color: #3861A8 !important;	
}

.dayliquote a:hover {
color: #0249C5 !important;	
}

.quotetitle { 
		margin-bottom: 1.6rem; 
		font-size: 1.4rem;
		font-weight: bold;
		color: var( --eksell-secondary-color );
        }

.has-quote-1 { 
	   margin-bottom: 2rem; 
	   font-size: 4.2rem;
        }

.has-korquote-1 { 
	   margin-bottom: 1.8rem; 
	   font-size: 4rem; 
	   }

.has-quote-2 { 
	   margin-bottom: 1.8rem; 
	   font-size: 3rem; 
	   }

.has-korquote-2 { 
	   margin-bottom: 1.8rem; 
	   font-size: 2.8rem; 
	   }

@media (max-width: 1024px) {
.dayliquote {
padding: 20px 32px 12px;
}

.has-quote-1 { 
	   margin-bottom: 2rem; 
	   font-size: 3.2rem;
        }

.has-korquote-1 { 
	   margin-bottom: 1.8rem; 
	   font-size: 3rem; 
	   }

.has-quote-2 { 
	   margin-bottom: 1.8rem; 
	   font-size: 2.4rem; 
	   }
	
.has-korquote-2 { 
	   margin-bottom: 1.8rem; 
	   font-size: 2.2rem; 
	   }

.quotetitle { 
		margin-bottom: 1.2rem; 
		font-size: 1.4rem;
        }
}

@media (max-width: 599px) {
.dayliquote {
padding: 24px 24px 16px;
}

.has-quote-1 { 
	   margin-bottom: 2rem; 
	   font-size: 2.4rem;
        }

.has-korquote-1 { 
	   margin-bottom: 1.8rem; 
	   font-size: 2.2rem; 
	   }

.has-quote-2 { 
		margin-bottom: 1.6rem; 
		font-size: 2rem;
		text-align: left;
	   }

.has-korquote-2 { 
		margin-bottom: 1.8rem; 
		font-size: 1.8rem;
		text-align: left;
	   }
	
.quotetitle { 
		margin-bottom: 1.2rem; 
		font-size: 1.2rem;
        }
}

@media (max-width: 412px) {
.dayliquote {
padding: 24px 24px 16px;
}

.has-quote-1 { 
	   margin-bottom: 2rem; 
	   font-size: 2.4rem;
        }
	
.has-korquote-1 { 
	   margin-bottom: 1.8rem; 
	   font-size: 2.2rem; 
	   }

.has-quote-2 { 
		margin-bottom: 1.8rem; 
		font-size: 1.8rem;
		text-align: left;
	   }

.has-korquote-2 { 
		margin-bottom: 1.8rem; 
		font-size: 1.6rem;
		text-align: left;
	   }
	
.quotetitle { 
		margin-bottom: 1.2rem; 
		font-size: 1.2rem;
        }
	
}

/* TOC formatting ---------------------------------- */

.toc-sub {
    margin-bottom: 12px;
}

.ja-toc-h1a {
		margin-left: -9px;
	}

.ja-toc-h2 {
		margin-left: -9px;
	}

.ja-toc-h3 {
		margin-left: 49px;
	}

.ja-toc-h3a {
		margin-left: 49px;
	}

.ja-toc-h3b {
		margin-left: 39px;
	}
	
.ja-toc-h4 {
		margin-left: 52px;
	}	

.ja-toc-h5 {
		margin-left: 39px;
	}
	
.ja-toc-h6 {
		margin-left: 39px;
	}
	
	
@media ( min-width: 720px ) {
	
.ja-toc-h1a {
		margin-left: 0px;
	}

.ja-toc-h2 {
		margin-left: 9px;
	}

.ja-toc-h3 {
		margin-left: 72px;
	}

.ja-toc-h3a {
		margin-left: 64px;
	}

.ja-toc-h3b {
		margin-left: 58px;
	}
	
.ja-toc-h4 {
		margin-left: 112px;
	}	

.ja-toc-h5 {
		margin-left: 136px;
	}
	
.ja-toc-h6 {
		margin-left: 176px;
	}
	
}

/* Sections ---------------------------------- */

section {
	padding: 5rem 0;
	width: 100%;
}

.section-inner {
	margin: 0 auto;
	max-width: var( --eksell-inner-width-max );
	width: calc( 100% - var( --eksell-inner-gutter ) );
}

.section-inner.max-percentage { width: 100%; }
.section-inner.no-margin { margin: 0; }

:root .mw-thin { max-width: 720px; }
:root .mw-small { max-width: var( --eksell-inner-width-small ); }
:root .mw-medium { max-width: var( --eksell-inner-width-medium ); }
:root .mw-max { max-width: var( --eksell-inner-width-max ); }



/* --------------------------------------------------------------------------------------------- */
/*	16. Site Footer
/* --------------------------------------------------------------------------------------------- */


#site-footer {
	margin-top: 6.4rem;
	padding: 3.2rem 0;
	background-color: var( --eksell-menu-modal-background-color );
}

.has-social-menu #site-footer {
	padding: 2.4rem 0;
	}

.footer-inner {
	align-items: center;
	display: flex;
	font-size: 1.4rem;
	color: #d4d4d4;
	justify-content: space-between;
	margin-right: 40px;
}

.has-footer-menu .footer-inner {
	align-items: baseline;
}

.footer-inner a {
	color: inherit;
	outline: none;
	text-decoration: none;
}

.footer-inner a:hover,
.footer-inner a:focus {
	text-decoration: underline;
}

/* Footer Credits ---------------------------- */

.footer-credits {
	align-items: baseline;
	display: flex;
	flex-shrink: 0;
	margin: -.4rem 2.4rem 0 -2.4rem;
}

.footer-credits p {
	margin: .4rem 0 0 2.4rem;
}

.theme-credits {
	display: none;
}

/* STATE: ONLY CREDITS */

.footer-credits:only-child {
	flex-wrap: wrap;
	justify-content: space-between;
	margin-right: 0;
}

.footer-credits:only-child .theme-credits {
	display: block;
}

/* Footer Menu ------------------------------- */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: -.4rem 0 0 -1.6rem;
	text-align: right;
}

.footer-menu li {
	margin: .4rem 0 0 1.6rem
}

/* Footer Social ----------------------------- */

#site-footer .social-menu {
	justify-content: flex-end;
	margin: 0 -1.2rem;
}

#site-footer .social-menu a:focus {
	box-shadow: inset 0 0 0 .2rem var( --eksell-border-color );	
}

.archive-page #site-footer {
	margin-top: 6.4rem !important;
}


/* -------------------------------------------------------------------------------- */
/*	4.	Site Header
/* -------------------------------------------------------------------------------- */


#site-header {
	background: transparent;
	display: flex;
	min-height: 6.4rem;
	padding: 1.2rem 0;
	position: relative;
	transition: none;
	margin-bottom: 1.2rem !important;
}

.breadcrumbs{
	margin-top: 8px;
	margin-bottom: 24px !important;
	}

@media ( min-width: 700px ) {

	#site-header {
		margin-bottom: 2.4rem !important;
		min-height: 12rem;
		padding: 2.4rem 0;
	}
	
/*.breadcrumbs{
	margin-top: 48px;
	}	*/

}


.header-inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.header-titles {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: -1.2rem 0 0 -2.4rem;
}

.wp-custom-logo .header-titles {
	align-items: center;
	flex-wrap: nowrap;
}

.site-title,
.site-logo,
.site-description {
	margin: 1.2rem 0 0 2.4rem;
}

.site-title {
	font-size: 2rem;
	font-weight: var( --eksell-headings-weight );
	line-height: 1;
}

.site-title a {
	color: inherit;
	display: block;
	outline: none;
	text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
	text-decoration: underline;
}

.site-logo a,
.site-logo img {
	display: block;
}

.site-logo img {
	max-height: 5.8rem;
	width: auto;
}

.site-logo img.logo-dark-mode {
	display: none;
}

.modal-search-form .search-field::placeholder {
	color: var( --eksell-secondary-color );
}

@media ( prefers-color-scheme: dark ) {
	.has-dark-mode-palette .site-logo img.logo-regular:not(:only-child) { display: none; }
	.has-dark-mode-palette .site-logo img.logo-dark-mode { display: block; }
}

.site-description {
	display: none;
	line-height: 1.25;
}

/* Sticky Header ----------------------------- */

#site-header.is-sticky {
	background: var( --eksell-background-color );
	position: fixed;
		left: var( --eksell-aside-width );
		right: 0;
		top: 0;
	z-index: 999;
}

.admin-bar #site-header.is-sticky { 
	top: 4.6rem; 
}

@media ( min-width: 782px ) {
	.admin-bar #site-header.is-sticky {
		top: 3.2rem; 
	}
}

.showing-menu-modal #site-header.is-sticky {
	box-shadow: none;
}

/* Header Toggles ---------------------------- */

.header-buttons {
	display: flex;
	flex-shrink: 0;
	justify-content: flex-end;
	margin: 0 -1rem 0 1.6rem;
}

.header-buttons a {
	border-radius: .8rem;
	padding: 1rem;	
}

.header-buttons .toggle {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	outline: none;
	position: relative;
	text-decoration: none;
	transition: transform .15s linear;
}

/*.header-buttons .social-menu {
	display: none;
}*/

.header-buttons .search-toggle {
	justify-content: center;
	width: 4.4rem;
	display: flex;
}

.header-buttons .search-toggle svg {
	transform: translateX( -.1rem );
}

.header-buttons .nav-toggle.icon-menu-search svg {
	transform: translateX( .2rem );
}

.header-buttons .mobile-nav-toggle-text {
	font-size: 1.6rem;
	margin-right: 1.2rem;
}


/* --------------------------------------------------------------------------------------------- */
/*	5. Site Aside
/* --------------------------------------------------------------------------------------------- */


#site-aside {
	background-color: var( --eksell-menu-modal-background-color );
	color: var( --eksell-menu-modal-text-color );
	display: none;
	position: fixed;
		bottom: 0;
		left: 0;
		top: 0;
	width: var( --eksell-aside-width);
	z-index: 1;
}

.admin-bar #site-aside {
	margin-top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar #site-aside {
		margin-top: 46px !important;
	}
}

#site-aside .nav-toggle {
	display: block;
	outline: none;
	width: 100%;
}

#site-aside .nav-toggle-inner {
	align-items: center;
	display: flex;
	height: 12rem;
	justify-content: center;
	position: relative;
}

#site-aside .nav-toggle .nav-toggle-inner:before {
	background: var( --eksell-menu-modal-text-color );
	border-radius: 50%;
	content: "";
	display: block;
	height: 4.4rem;
	opacity: 0;
	position: absolute;
		left: 50%;
		top: 50%;
	transform: translate( -50%, -50% );
	transition: opacity .15s linear;
	width: 4.4rem;
}

#site-aside .nav-toggle:focus .nav-toggle-inner:before {
	opacity: .11;
}

/* Navigation Toggle ------------------------- */

.nav-toggle .bars {
	animation: bars-fade-in .1s linear .3s both;
}

.nav-toggle-text {
	position: absolute;
		left: 50%;
		top: 100%;
	transform: translateY( min( 3.2rem, calc( .25 * var( --eksell-aside-width ) ) ) ) translateX( .1em ) rotate( 90deg );
	transform-origin: left center;
	text-transform: uppercase;
	white-space: nowrap;
}

.nav-toggle-text span {
	font-size: 1.4rem;
	letter-spacing: .05em;
}

.nav-toggle:not(.active) .nav-toggle-text .active,
.nav-toggle.active .nav-toggle-text .inactive {
	display: none;
}

.nav-toggle .bars {
	height: 1.4rem;
	position: relative;
	width: 2rem;
}

.nav-toggle .bar {
	animation: .4s forwards;
	background-color: currentColor;
	display: block;
	height: .2rem;
	position: absolute;
		right: 0;
		top: calc( 50% - .1rem );
	width: 100%;
}

.nav-toggle .bar:nth-child(1) { transform: translateY( -.6rem ); }
.nav-toggle .bar:nth-child(3) { transform: translateY( .6rem ); }

a.nav-toggle:focus,
a.nav-toggle:hover {
	color: inherit;
}

address {
	line-height: 1.5;
	margin: 0 0 2rem 0;
}

hr {
	background-image: linear-gradient( -45deg, transparent 22.5%, currentColor 22.5%, currentColor 27.5%, transparent 27.5%, transparent 47.5%, currentColor 47.5%, currentColor 52.5%, transparent 52.5%, transparent 72.5%, currentColor 72.5%, currentColor 77.5%, transparent 77.5%, transparent );
	background-position: .3rem 0;
    background-size: 1.2rem 1.2rem;
	border: none;
	color: var( --eksell-border-color );
	display: block;
	height: 1rem;
	image-rendering: pixelated;
	margin: 4rem 0;
	text-align: left;
	width: 6.6rem;
}

a {
	color: #0040B2;
	text-decoration: underline;
	}

a:hover,
a:focus {
	/*text-decoration: underline;*/
	text-decoration: none;
	color: #0000FF;
}

a.encyclopedia {
	color: #0040B2;
	}

a.encyclopedia:hover,
a.encyclopedia:focus {
	color: #0000FF;
	}

/* Preview: Post ----------------------------- */

.preview a {
	color: inherit;
	text-decoration: none;
}

.preview-media {
	overflow: hidden;
	position: relative;
}

.preview-media-link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.preview-media img {
	width: 100%;
}

.preview .preview-media .sticky-note,
.preview.sticky .preview-media .sticky-note {
	/* On image = always white on black */
	background-color: #1e2d32;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: normal;
	padding: .6rem .7rem;
	position: absolute;
		left: min( 1.6rem, 10% );
		top: min( 1.6rem, 10% );
	white-space: nowrap;
}

.preview-media + .preview-header {
	margin-top: 1.2rem;
}

.preview .preview-title {
	color: #0054e7;
	margin: 0;
}

.preview-title a:hover,
.preview-title a:focus {
	outline: none;
	text-decoration: underline;
}

.preview .post-meta-wrapper {
	font-size: 1.4rem;
	line-height: 1.25;
	margin-top: .8rem;
}

.post-meta {
	list-style: none;
	margin: 0;
}

.preview .post-meta {
	display: flex;
	flex-wrap: wrap;
	margin: -.25em 0 0 -1em;
}

.preview .post-meta li {
	margin: .25em 0 0 1em;
}

.post-meta a:hover,
.post-meta a:focus {
	outline: none;
	text-decoration: underline;
}


/* Child additions ---------------------------------------------------------------/*

.widget-title {
	border-bottom: 2px solid #0067C7;
	display: inline-block;
	font-family: inherit;
	font-size: 0.78em;
	font-weight: 900;
	letter-spacing: 1px;
	margin: 40px 0 8px;
	padding-bottom: 3px;
	text-transform: uppercase;
	
	/* Alignments -------------------------------- */

	/* ALIGNMENTS */

	.alignnone,
	.aligncenter,
	.wp-block-image .aligncenter {
		margin-bottom: 0rem;
		margin-top: 0rem;
	}
	

		
/*--  TEXT COLOR BACKGROUND  --*/
.dp-red,
.dp-blue,
.dp-yellow {
	padding: 4px 2px;
}

.dp-red {
	background-color:#F8BBD0;
}

.dp-blue {
	background-color:#BBDEFB;
}

.dp-yellow {
	background-color:#FFF9C4;
}

/*-- END TEXT COLOR BACKGROUND  --*/

/*--  WORDS FONT STYLES  --*/


.words-hangeul {
	padding-top: 16px;
	font-size: 2.8125em;
	font-family: 'Noto Serif KR', serif;
	text-align: center;
	
}

.words-hanja {
	padding-top: 16px;
	font-size: 3.75em;
	font-family: 'Noto Serif KR', serif;
	text-align: center;
	
}

.words-transcription {
	font-size: 1em;
	text-align: center;
	color: #616161; 
	
}

.words-block {
	padding-top: 12px;
	background-color: #EDEDED;
	text-align: center;
	}

/*-- END WORDS FONT STYLES  --*/

/*-- FILTER --*/
/* For all screen sizes */
/*.scf_tags_groups {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    position: sticky;
    top: 64px;
}*/


.scf_tags_groups hr {
    margin: 0;
    height: 0;
}

.scf_tags_groups .scf_tags_group_heading_title {
	display:none;
}

/* .scf_tags_group {
	margin-top: 0;
} */
.scf_tags_groups .scf_tags_group{
	margin-top: 0;
}

.scf_tags_groups{
	justify-content:space-between;
}

.scf_tags_group:nth-child(2) {
	/*margin-left: 110px;*/
	margin-bottom: 0;
}


#scf_clear_filters_container {
    margin-left: auto;
	display:none;
}
/*-- END FILTER --*/

/* FILTER FIX */
.scf_tags_groups{
    background-color: white;
    position: fixed;
    justify-content:space-between;
	display: flex;
    flex-wrap: wrap;
    font-size: 14px;
	top: 64px;
	width: 720px;
	z-index: 2;
	}

.admin-bar .scf_tags_groups{
	top: 96px; 
}

@media (max-width: 890px) {
	.scf_tags_groups{
	width: calc(100vw - 160px);
}
	
	.scf_tag_button{
	height: 40px;
	border-radius: 40px;
	text-align: center;
	padding: 0rem 1.7rem 0rem;
}
	
}

@media (max-width: 700px) {
	.scf_tags_groups{
	font-size: 13px;
	width: calc(100vw - 64px);
}
	
	.scf_tag_button{
	height: 32px;
	border-radius: 16px;
	text-align: center;
	padding: 0rem 1.8rem 0rem;
}

	.admin-bar .scf_tags_groups{
	top: 104px; 
}
/*	
	.breadcrumbs{
	margin-top: 88px;
	margin-bottom: 24px;
	}*/
	
}

@media (max-width: 412px) {
	.scf_tags_groups{
	font-size: 13px;
	width: calc(100vw - 48px);
}
}



#wpadminbar + #site-header .scf_tags_groups{
	top: 152px; /*120+32*/
	/*top: 136px; 96+32*/
}

.pt {
/*  додає відступ до абзацу, коли фільтр фіксується*/
  padding-top: 4.8rem;
}


/* END FILTER FIX */

.preview .preview-title.h4{
	font-size:23px;
}

/*-- LANGUAGE MENU IN HEADER --*/
/* Hide the menu on screens with a maximum width of 870px */
@media screen and (max-width: 932px) {
    .language-menu-mobile {
        display: none;
    }
}

/*-- WPML LANGUAGE SWITCHER --*/
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}


/* Post Previews in TP-quotes ----------------------------- */

.tpquote-preview {
	width: 100%;
	padding-top: 8px;
	padding-bottom: 0px;
	position: relative;
}

.preview-tpquoteheader {
	margin-top: 0rem;
}

hr-tpquote {
	background-image: linear-gradient( -45deg, transparent 22.5%, currentColor 22.5%, currentColor 27.5%, transparent 27.5%, transparent 47.5%, currentColor 47.5%, currentColor 52.5%, transparent 52.5%, transparent 72.5%, currentColor 72.5%, currentColor 77.5%, transparent 77.5%, transparent );
	background-position: .3rem 0;
    background-size: 1.2rem 1.2rem;
	border: none;
	color: var( --eksell-border-color );
	display: block;
	height: 1rem;
	image-rendering: pixelated;
	margin: 0 0 1rem -32px;
	text-align: left;
	width: 6.6rem;
}

.tpquote_details {
  margin: 0px 8px 0px 8px;

}

.tpquote_list {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	justify-content: space-between;
	display: flex; /* Use flexbox */
    align-items: top; /* Align items vertically in the center */
}

.tpquote_list p {
    flex: 1; /* Allow paragraph to grow */
    /* Other styles for .search-result p */
}

.tpquote_details-icon {
	margin-top: 0px;
    margin-right: 0px; /* Adjust the margin as needed for spacing */
    position: inline; /* Ensure the paragraph is positioned relative */
    margin-left: 8px; /* Adjust the negative margin as needed */
	&:hover {
    cursor: pointer;
	transform: scale(1.15);
    outline: none; /*  Remove default focus outline */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease;  */
  }
}

.tpquote_details-icon img {
    width: 18px; /* Adjust the width of the icon */
    height: 18px; /* Adjust the height of the icon */
}

.two-column {
        column-count: 2;
}	

/* Media query for devices with width less than 530px */
@media (max-width: 530px) {
    /* Change to one column layout */
    .two-column {
        column-count: 1;
    }
}

.quote {
background-color: #FFF9C4;
}

/* Side sheet ----------------------------- */

:root {
    --scrollbar-width: 0px; /* Default value */
}

/* Ensure the body doesn't scroll when the sidesheet is open */
body.sidesheet-open {
    overflow: hidden;
	padding-right: var(--scrollbar-width);
}

.side-sheet {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 384px;
    height: 100%;
    padding: 0px 0px 24px 24px;
    background-color: #fff;
    box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    transform: translateX(100%); /* Initially hidden off-screen */
}


.side-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: #fff;
  padding: 10px 0 14px 0;
  z-index: 1;
}

	.admin-bar .side-sheet-header{
	margin-top: 32px; 
}

	.admin-bar .side-sheet-content{
  	padding: 8px 24px 56px 0px;
}

.side-sheet-content {
  overflow-y: auto;
  max-height: calc(100vh - 36px);
  font-size: 1.8rem;
  line-height: normal;
  color: var( --eksell-primary-color );
  font-family: var( --eksell-body-font );
  padding: 8px 24px 36px 0px;
  text-align: left;
}

.side-sheet-content a {
 color: var( --eksell-accent-color ) !important;
 }

.side-sheet-content a:hover,
.side-sheet-content a:focus {
	color: #303F9F !important;
}

@media (max-width: 360px) { /* Adjust the breakpoint as needed */
    .side-sheet {
        max-width: calc(100% - 64px); /* Set max-width to device width - 40px */
        right: -100%; /* Initially hide it off the screen */
    }
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent black */
    z-index: 1001; /* Ensure overlay is above other content */
    display: none; /* Initially hidden */
	
}



/* Post Previews in Category ----------------------------- */

.post-preview {
	width: 100%;
	border-bottom: 1px solid rgba( 0, 0, 4, .125 );
	padding-top: 17px;
	padding-bottom: 17px;
	position: relative;
}

.post-preview a {
	justify-content: space-between;
	font-size: 1.2;
	font-weight: 400;
	text-decoration: none;
}

.post-preview.no-title a {
	justify-content: flex-end;
}

.post-preview a:hover {
	text-decoration: none;
}

.post-preview a .title {
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.25;
	margin: 0;
		-ms-word-break: break-word;
	word-break: break-word;
}

.post-preview a .title span {
	border-bottom: 1px solid transparent;
	transition: border-color .2s linear;
}

.post-preview a:hover .title span {
	border-bottom-color: #121212;
}

.post-preview time {
	color: rgba( 0, 0, 4, 0.4 );
	line-height: 1.25;
	margin-left: 30px;
	white-space: nowrap;
}

/* Styling for the Table of contents slide menu */

.fadeInDown {
  opacity: 1 !important;
  transform: translateY(40px) !important;
}

#tocmenu-btn {
  top: 420px; 
	right: -1px; 
	position: fixed;
	transform-origin: bottom right;
	transform: rotate(90deg) translateY(100%); 
	background-color: #BBDEFB;
  border-radius: 0px 0px 12px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 12px 12px 10px 12px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  user-select: none;
  transition: border-color 0.3s;
  &:hover {
    cursor: pointer;
    border-color: #424242;
  }
}

/* Correct text rotation 
#tocmenu-btn span {
    display: inline-block;
    transform: rotate(-90deg);
} */

#tocmenu__panel {
  position: fixed; 
  top: 252px; 
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  overflow-y: auto;
  max-height: calc(100vh - 324px);
  display: none
}

#table-of-contents {
  font-size: 1.6rem;
  line-height: 1.8;
  overflow-y: auto;
  padding-right: 16px;
  max-height: calc(100vh - 408px);
}

.table-of-contents-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: #EDEDED;
  padding: 10px 8px 14px 0;
  z-index: 1;
}

.table-of-contents-title {
  font-size: 1.8rem;
  font-weight: bold;
}

.generaltoc-button {
	width: 100%;
    display: flex;
	justify-content: center;
    align-items: center;
	font-weight: regular;
	cursor: pointer;
	padding: 12px 24px 12px 0px;
	border-top: 1px solid rgba( 0, 0, 4, .125 );
	border-bottom: 1px solid rgba( 0, 0, 4, .125 );
	margin-bottom: 16px;
	margin-right: 24px;
	}

.generaltoc-button:hover,
.generaltoc-button:focus {
	text-decoration: none;
	background-color: #E0E0E0;
}

.rotate-90 {
  transform: rotate(90deg);
  transition: transform 0.3s ease; /* Optional: to make the rotation smooth */
}

.tocmenu__close {
  padding: 8px 8px;
  transition: transform 0.5s;
  &:hover {
    cursor: pointer;
	transform: scale(1.15);
    outline: none; /* Remove default focus outline */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition effects */
  }
}

.toc-active-link {
    color: #F4511E;
}


/* Styling for the Bookmarks slide menu */

#bookmarksmenu-btn {
  position: fixed;  
    top: 112px; 
    right: -1px; 
/*  width: 36px;*/
  z-index: 100;
  background-color: #BBDEFB;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 8px 8px 8px 8px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    cursor: pointer;
    border-color: #424242;
  }
}

#bookmarksmenu__panel {
  position: fixed;
  top: 104px;
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  max-height: calc(100vh - 144px);
  display: none;
}

#bookmarkslist {
  font-size: 1.6rem;
  line-height: 1.8;
  overflow-y: auto;
  padding-right: 8px;
  max-height: calc(100vh - 408px);
}

.bookmarkslist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background-color: #EDEDED;
  padding: 10px 8px 14px 0;
  z-index: 1;
}

.bookmarkslist-title {
  font-size: 1.8rem;
  font-weight: bold;
}

.bookmarksmenu__close {
  padding: 8px 8px;
  transition: transform 0.5s;
  &:hover {
    cursor: pointer;
	transform: scale(1.15);
    outline: none; /* Remove default focus outline */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition effects */
  }
}


.anchoricon::before {
    content: url('/wp-content/themes/eksell-child/assets/svg/bookmark.svg');
	margin-top: 8px;
    margin-right: 8px; /* Adjust the margin as needed for spacing */
    position: relative; /* Ensure the paragraph is positioned relative */
    margin-left: -32px; /* Adjust the negative margin as needed */
    z-index: 1;
}

/* CSS for placing the delete icon to the right of the link */

#bookmarkslist ul,
#bookmarkslist ol {
	margin: 0;
}

#bookmarkslist li {
    display: flex;
	justify-content: space-between;
    align-items: start;
	padding-top: 4px;
    padding-bottom: 16px;
	margin: 0rem;
}

#bookmarkslist li span {
    margin-right: 8px; /* Adjust the margin as needed for spacing */
}

#bookmarkslist li a {
    background: initial;        /* Reset background */
    border: initial;            /* Reset border */
}

.delete-icon {
    margin-left: 8px; /* Adjust the margin as needed for spacing */
}

/* Apply the same hover and focus styles as social icons */
.delete-icon:hover,
.delete-icon:focus {
	cursor: pointer;
    transform: scale(1.15);
    outline: none; /* Remove default focus outline */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition effects */
}

#questionmenu-btn {
   position: fixed;
    top: 140px; 
    right: -1px;
  z-index: 100;
  background-color: #FFCDD2;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 8px 8px 8px 8px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  user-select: none;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    cursor: pointer;
    border-color: #424242;
  }
}

#questionmenu__panel {
  position: fixed;
  top: 132px;
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  max-height: calc(100vh - 144px);
  display: none;
}

.questionmenu__close {
  padding: 8px 8px;
  transition: transform 0.5s;
  &:hover {
    cursor: pointer;
	transform: scale(1.15);
    outline: none; /* Remove default focus outline */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add smooth transition effects */
  }
}

#button-container {
    position: fixed;
	top: 80px; 
    right: -1px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 412px) {

#tocmenu-btn {
    position: fixed;
	top: 324px;
	right: -1px;
	transform-origin: bottom right;
	transform: rotate(90deg) translateY(100%); 
  background-color: #BBDEFB;
  border-radius: 0px 0px 12px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 6px 10px 3px 10px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  user-select: none;
  transition: border-color 0.3s;
  &:hover {
    cursor: pointer;
    border-color: #424242;
	}
}
	
#tocmenu__panel {
  position: fixed;
  top: 72px;
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  max-height: calc(100vh - 88px);
  display: none;
}	
	
#table-of-contents {
  font-size: 1.6rem;
  line-height: 1.8;
  overflow-y: auto;
  padding-right: 16px;
  max-height: calc(100vh - 178px);
}
	
#bookmarksmenu-btn {
    position: fixed;
    top: 112px; 
    right: -1px; 
  z-index: 100;
  background-color: #BBDEFB;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 6px 6px 6px 6px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    cursor: pointer;
    border-color: #424242;
  }
}	
	
#bookmarksmenu__panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  max-height: calc(100vh - 72px);
  display: none;
}	
	
#bookmarkslist {
  font-size: 1.6rem;
  line-height: 1.8;
  overflow-y: auto;
  padding-right: 8px;
  max-height: calc(100vh - 178px);
}	
	
#questionmenu-btn {
    position: fixed;
    top: 132px; 
    right: -1px; */
  z-index: 1000;
  background-color: #FFCDD2;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  padding: 6px 6px 6px 6px;
  border: 1px solid transparent;  /* To avoid icon movement on hover */
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  user-select: none;
  transition: border-color 0.3s;
  margin-bottom: 24px;
  &:hover {
    cursor: pointer;
    border-color: #424242;
  }
}	
	
#questionmenu__panel {
  position: fixed;
  top: 56px;
  right: 0;
  width: 316px;
  padding: 0px 0px 24px 24px;
  z-index: 1000;
  background-color: #EDEDED;
  border-radius: 12px 0px 0px 12px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  user-select: none;
  transform: translateX(316px);
  transition: transform 0.3s;
  min-height: auto;
  max-height: calc(100vh - 72px);
  display: none;
}	
	
}


/* Table of contents on the DP main page */


.toc-item {
    align-items: left;

}

.dp-chapter {
    display: flex;
    align-items: top;
	line-height: 2;
	margin-top: 20px;
	margin-bottom: 20px;
}

.dp-sub-items {
    display: none;
	line-height: 2;
    margin-left: 36px;
	margin-top: 12px;
	margin-bottom: 48px;
}

.dp-toggle-btn {
    cursor: pointer;
}

.dp-arrow-icon {
	width: 24px;
	height: 24px;
	stroke: #757575;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 5px;
	margin-right: 10px;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.dp-toc-item.expanded .dp-arrow-icon {
    transform: rotate(180deg);
}

.dp-toc-item.expanded .dp-sub-items {
    display: block;
}

.dp-toc-item.expanded .dp-chapter a {
    font-weight: bold;
}



.rotated90-text {
    transform: rotate(-90deg);
	/* display: inline-block;
    transform-origin: left top;  Adjust as needed */
}

/* Chapters spoiler */

.hpspoiler-header {
	width: 100%;
    display: flex;
	justify-content: space-between;
    align-items: center;
	line-height: 1.5;
	font-weight: bold;
	padding: 10px 12px 10px 20px;
	margin-bottom: 24px;
	background-color: #EDEDED;
	border-radius: 4px;
}

.hpspoiler-content {
    display: none;
	margin: 8px 0 48px 20px;
	line-height: 2;
}

.hpspoiler-toggle {
    cursor: pointer;
}

.hpspoiler-arrow-icon {
	width: 24px;
	height: 24px;
	stroke: #757575;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 2px;
	margin-left: 10px;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.hpspoiler.expanded .hpspoiler-arrow-icon {
    transform: rotate(180deg);
}

.hpspoiler.expanded .hpspoiler-content {
    display: block;
}

.tocinpage {
	margin: 8px 0 24px 0px;
	line-height: 2;
}

/* QA spoiler */

.qaspoiler-header {
	width: 100%;
    display: flex;
	justify-content: space-between;
    align-items: top;
	font-weight: regular;
	padding: 17px 0px 16px 0px;
	border-bottom: 1px solid rgba( 0, 0, 4, .125 );
}

.qaspoiler.expanded .qaspoiler-header {
    font-weight: bold;
	border-bottom: none;
}

.qaspoiler-content {
    display: none;
	margin: 0px 0px 0px 0px;
	border-bottom: 1px solid rgba( 0, 0, 4, .125 );
}

.qaspoiler-toggle {
    cursor: pointer;
}

.qaspoiler-arrow-icon {
	width: 24px;
	height: 24px;
	stroke: #757575;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 2px;
	margin-left: 10px;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.qaspoiler.expanded .qaspoiler-arrow-icon {
    transform: rotate(180deg);
}

.qaspoiler.expanded .qaspoiler-content {
    display: block;
}

.tocinpage {
	margin: 8px 0 24px 0px;
}

/* DP examples spoiler */

.dpspoiler {
	margin-bottom: 1em;
}

.dpspoiler-header {
	width: 100%;
    display: flex;
	justify-content: space-between;
    align-items: top;
	font-weight: regular;
	font-style: italic;
	padding: 13px 4px 13px 20px;
	border-bottom: 1px dashed #000;
	border-top: 1px dashed #000;
}

.dpspoiler.expanded .dpspoiler-header {
    font-weight: bold;
	border-bottom: none;
	background-color: #F5F5F5;
}

.dpspoiler-content {
    display: none;
	padding: 0px 20px 0px 20px;
	border-bottom: 1px dashed #000;
	background-color: #F5F5F5;
}

.dpspoiler-toggle {
    cursor: pointer;
}

.dpspoiler-arrow-icon {
	width: 24px;
	height: 24px;
	stroke: #757575;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	margin-top: 2px;
	margin-left: 10px;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.dpspoiler.expanded .dpspoiler-arrow-icon {
    transform: rotate(180deg);
}

.dpspoiler.expanded .dpspoiler-content {
    display: block;
}

/* DP examples spoiler 

.dpspoiler .dpspoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: -40px;
    margin-bottom: 1em;
    font-style: italic;
    text-align: left; 
}


@media (max-width: 699px) {
	.dpspoiler .dpspoiler-header {
		margin-left: -12px;
	}
}

.dpspoiler .dpspoiler-dashed {
    flex-grow: 1;
    border-bottom: 1px dashed #000;
    margin: 0px 0px 0px 0px;
    height: 0;
}

.dpspoiler .dpspoiler-line {
    border-bottom: 1px dashed #000;
}

.dpspoiler .dpspoiler-content {
    display: none;
	margin: 0px 0 0px 0px;
	}

.dpspoiler .dpspoiler-toggle {
    cursor: pointer;
}

.dpspoiler .dpspoiler-arrow-icon {
    width: 24px;
    height: 24px;
    stroke: #757575;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-top: 2px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.dpspoiler.expanded .dpspoiler-arrow-icon {
    transform: rotate(180deg);
}


.dpspoiler .dpspoiler.expanded .dpspoiler-content {
    display: block;
} */

.tpquotedp {
	border-color: #AD2131;
	border-style: solid;
	border-width: 0 0 0 .2rem;
	font-size: 1em;
	margin: 0em 0em 2em 0em;
	}

.dpspoiler-linktext {
	font-size: .882352941em;
	}

/* Right-click context menu */

.context-menu {
    display: none;
    position: absolute;
    background-color: #fff;
	padding-top: 8px;
	padding-bottom: 8px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.context-menu-item {
	display: flex;
    padding: 12px 16px;
    cursor: pointer;
}

.context-menu-item .icon {
    width: 24px; 
    height: 24px; 
    margin-right: 12px; 
}

.context-menu-item:hover {
    background-color: #f0f0f0;
}


/* Right-click context menu */

.paragraphicons {
	display: flex;
	visibility: hidden;
    flex-direction: column;
	position: absolute; /* Ensure the paragraph is positioned relative */
    z-index: 1;
}

@media (max-width: 720px) {
    /* Media query for window width less than or equal to 800px */
    .paragraphicons {
        flex-direction: row;
    }
}

.paragraphicons.visible {
    visibility: visible;
}

.paragraphicons.hidden {
    visibility: hidden;
}

.paragraphicons-item {
    cursor: pointer;
	padding: 8px;
}

.paragraphicons-item .icon {
    width: 24px; 
    height: 24px;
	background-color: #fff;
}

.paragraphicons-item .icon:hover {
    transform: scale(1.15);
}

.toast-message {
    position: absolute;
    top: 8px; /* Adjust the top position as needed */
    left: 32px; /* Adjust the right position as needed */
    font-size: 14px;
	font-weight: normal;
    visibility: hidden;
    background-color: #272D34;
    color: white;
    text-align: center;
    padding: 6px 8px;
    border-radius: 4px;
    z-index: 2;
	min-width: 136px;
	width: auto;
}

.toast-message.visible {
    visibility: visible;
}


/* Search results */

.search-preview {
	border-bottom: 1px solid rgba( 0, 0, 4, .125 );
	padding-top: 24px;
	padding-bottom: 24px;
}

.search-result {
	margin-top: 24px;
	margin-bottom: 24px;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: flex; /* Use flexbox */
    align-items: top; /* Align items vertically in the center */
}

.search-result-icon {
	margin-top: 0px;
    margin-right: 8px; /* Adjust the margin as needed for spacing */
    position: inline; /* Ensure the paragraph is positioned relative */
    margin-left: 0; /* Adjust the negative margin as needed */
}

.search-result-icon img {
    width: 24px; /* Adjust the width of the icon */
    height: 24px; /* Adjust the height of the icon */
}

.link-search {
    text-decoration: none !important;
}

.link-search a:hover,
.link-search a:focus {
	outline: none;
	text-decoration: underline;
	color:#0054e7; !important;
}

.search-query {
    background-color:#FFFF00;
}

/* Visibility of blockquote content */
.korparagraph {
  display: none; 
}

.engparagraph {
  display: none; 
}

/* Dictionary Encyclopaedia archive preview style */

.preview-words {
    /* Make the entire header clickable */
    display: block;
}

.preview-words a {
    /* Ensure the link fills the entire header */
    display: block;
    text-decoration: none; /* Optional: Remove text underline */
    color: #0054e7;
    width: 100%; /* Ensure the link spans the entire width */
    height: 100%; /* Ensure the link spans the entire height */
}

.preview-words .word-title {
    color: #0054e7; /* Set the title text color */
	font-size: 1.17647em;
	font-weight: 500;
}

.preview-words .word-title a:hover,
.preview-words .word-title a:focus {
	outline: none;
	color: #303F9F;
}

/* Footer menu */

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}


footermenu a:focus,
footermenu a:hover {
	color: white;
}

footermenu a {
    color: #d4d4d4;
}

.f-item-con {
    padding: 4rem 8rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 4rem;
	background-color: var( --eksell-menu-modal-background-color );
	
}

@media (max-width: 1279px) {
	.f-item-con {
	padding: 2rem 5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 3rem;
}
}

@media (max-width: 800px) {
	.f-item-con {
	padding: 2rem 3.4rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
	.menu-social-2 {
	display: none;
}
}

@media (max-width: 700px) {
	.f-item-con {
	padding: 2rem 2rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
}

@media (max-width: 375px) {
	.f-item-con {
	padding: 2rem 1.2rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
}

footermenu .footermenu-title{ 
    font-size: 1.17647em;
    line-height: 1.5em;
    color: white;
    border-left: 4px solid var( --eksell-accent-color );
    padding-left: 12px;
	margin-bottom: 8px;
    height: fit-content;
}

footermenu ul{ 
    padding-left: 1.75rem;
    font-size: 1em;
    line-height: 1.25rem;
    margin-top: .5rem;
}

footermenu ul li{ 
    margin: .25rem 0;
    cursor: pointer;
    color: #d4d4d4;
    width: fit-content;
}

footermenu .menuitem{
	line-height: 1.5em;
	padding-left: 18px;
    margin-bottom: 8px;
}

footermenu .secondblock{
    grid-column-start: 2;
}

footermenu .cr-con{
    background-color: #232127;
    color: white;
    padding: 1rem 4rem;
    text-align: center;
}

/* Numeric pagination ------------------- */

/* Pagination Container */
.num-pagination {
    display: flex;
    justify-content: center;
    margin: 3.2rem 0;
}

/* Numeric Buttons */
.page-numbers {
    margin: 0 8px;
    padding: 12px 16px;
    border: 1px solid var(--eksell-secondary-color);
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}

/* Current Page Button */
.current {
    background-color: var(--eksell-accent-color);
    color: white;
    border-color: var(--eksell-accent-color);
    border-radius: 4px;
}

/* Hover State for Numeric Buttons */
.page-numbers:hover {
    background-color: #303F9F;
    color: white;
}

/* Arrow Button Styling */
.arrow-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid var(--eksell-secondary-color);
    border-radius: 4px;
    color: var( --eksell-primary-color );
    text-decoration: none;
    margin: 0 12px;
}

/* Arrow SVG Styling */
.arrow-button svg {
    width: 24px; /* Adjust SVG size */
    height: 24px;
    fill: var( --eksell-primary-color ); /* Default arrow color */
    vertical-align: middle; /* Vertically align arrow */
}

.arrow-button:hover {
    background-color: #303F9F;
    color: white;
}

.arrow-button:hover svg {
    fill: white; /* Arrow turns white on hover */
}

/* Ellipsis Styling */
.dots {
    border: none;
    padding-top: 10px;
    margin: 0 2px;
    color: var( --eksell-primary-color );
    background: none;
    cursor: default;
    pointer-events: none; /* Disable interaction with ellipsis */
    line-height: 1;
}

/* Media Query to Hide Only Numeric Buttons on Small Screens */
@media (max-width: 800px) {
    .page-numbers {
        display: none;
    }

	/* Arrow SVG Styling */
.arrow-button svg {
    width: 36px; /* Adjust SVG size */
    height: 36px;
    fill: var( --eksell-primary-color ); /* Default arrow color */
    vertical-align: middle; /* Vertically align arrow */
}
	
    .arrow-button {
        margin: 0 16px; /* Adjust margin for small screens */
    }
}


/* Page navigation arrows ------------------------------------- */

#pagenavarrows .arrow {
    cursor: pointer;
    display: block;
    width: 24px; /* $size / 1.414 */
    height: 48px; /* $size / 1.414 * 2 */
    position: fixed; /* Changed to fixed to stay in the viewport */
    top: 184px; /* Vertically center */
    transform: translateY(-50%); /* Adjust for centering */
    z-index: 999; /* Ensures arrows appear above other content */
}

#pagenavarrows .arrow span,
#pagenavarrows .arrow:before,
#pagenavarrows .arrow:after {
    background: #757575;
    content: '';
    display: block;
    width: 36px; /* $size */
    height: 2px; /* $width */
    position: absolute;
    top: calc(50% - 1px); /* Center the lines */
	border-radius: 1px; /* Fully round the edges */
}

#pagenavarrows .arrow:before {
    transform: rotate(-45deg);
}

#pagenavarrows .arrow:after {
    transform: rotate(45deg);
}

#pagenavarrows .arrow span {
    width: 0;
}

#pagenavarrows .arrow:hover span {
    width: 48px; /* Enlarged on hover */
}

#pagenavarrows .arrow.arrow--left {
    left: calc(var(--eksell-aside-width) + 56px);
}

#pagenavarrows .arrow.arrow--left span,
#pagenavarrows .arrow.arrow--left:before,
#pagenavarrows .arrow.arrow--left:after {
    left: 0;
    transform-origin: left 50%;
}

#pagenavarrows .arrow.arrow--left:before,
#pagenavarrows .arrow.arrow--left:after {
    transition: left 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--left span {
    transition: width 0.3s, left 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--left:hover span,
#pagenavarrows .arrow.arrow--left:hover:before,
#pagenavarrows .arrow.arrow--left:hover:after {
    left: -24px; /* Left arrow hover effect */
}

#pagenavarrows .arrow.arrow--right {
    right: 56px; /* Adjust right position */
}

#pagenavarrows .arrow.arrow--right span,
#pagenavarrows .arrow.arrow--right:before,
#pagenavarrows .arrow.arrow--right:after {
    right: 0;
    transform-origin: right 50%;
}

#pagenavarrows .arrow.arrow--right:before,
#pagenavarrows .arrow.arrow--right:after {
    transition: right 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--right span {
    transition: width 0.3s, right 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--right:hover span,
#pagenavarrows .arrow.arrow--right:hover:before,
#pagenavarrows .arrow.arrow--right:hover:after {
    right: -24px; /* Right arrow hover effect */
}

@media (max-width: 1024px) {
#pagenavarrows .arrow {
    cursor: pointer;
    display: block;
    width: 28px; /* $size / 1.414 */
    height: 32px; /* $size / 1.414 * 2 */
    position: fixed; /* Changed to fixed to stay in the viewport */
    top: 184px;
    transform: translateY(-50%); /* Adjust for centering */
}

#pagenavarrows .arrow span,
#pagenavarrows .arrow:before,
#pagenavarrows .arrow:after {
    width: 24px; /* $size */
    height: 2px; /* $width */
}

#pagenavarrows .arrow:before {
    transform: rotate(-45deg);
}

#pagenavarrows .arrow:after {
    transform: rotate(45deg);
}

#pagenavarrows .arrow span {
    width: 0;
}

#pagenavarrows .arrow:hover span {
    width: 32px; /* Enlarged on hover */
}

#pagenavarrows .arrow.arrow--left {
    left: calc(var(--eksell-aside-width) + 12px);
}

#pagenavarrows .arrow.arrow--left span,
#pagenavarrows .arrow.arrow--left:before,
#pagenavarrows .arrow.arrow--left:after {
    left: 0;
    transform-origin: left 50%;
}

#pagenavarrows .arrow.arrow--left:before,
#pagenavarrows .arrow.arrow--left:after {
    transition: left 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--left span {
    transition: width 0.3s, left 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--left:hover span,
#pagenavarrows .arrow.arrow--left:hover:before,
#pagenavarrows .arrow.arrow--left:hover:after {
    left: -12px; /* Left arrow hover effect */
}

#pagenavarrows .arrow.arrow--right {
    right: 12px; /* Adjust right position */
}

#pagenavarrows .arrow.arrow--right span,
#pagenavarrows .arrow.arrow--right:before,
#pagenavarrows .arrow.arrow--right:after {
    right: 0;
    transform-origin: right 50%;
}

#pagenavarrows .arrow.arrow--right:before,
#pagenavarrows .arrow.arrow--right:after {
    transition: right 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--right span {
    transition: width 0.3s, right 0.3s 0.05s;
}

#pagenavarrows .arrow.arrow--right:hover span,
#pagenavarrows .arrow.arrow--right:hover:before,
#pagenavarrows .arrow.arrow--right:hover:after {
    right: -12px; /* Right arrow hover effect */
}
	
@media (max-width: 700px) {
#pagenavarrows .arrow {
    display: none;
}
}
	
body.swipe-left {
    animation: swipe-left 0.3s forwards; /* Adjust the duration to match the JS timeout */
}

body.swipe-right {
    animation: swipe-right 0.3s forwards; /* Adjust the duration to match the JS timeout */
}

@keyframes swipe-left {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50%); /* Moves the page to the left */
    }
	100% {
        transform: translateX(-100%); /* Moves the page to the left */
    }
}

@keyframes swipe-right {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50%); /* Moves the page to the left */
    }
    100% {
        transform: translateX(100%); /* Moves the page to the right */
    }
}
	
/* Page navigation arrows on bottom ------------------------------------- */

.pagenavleft {
  justify-content: flex-start; /* Aligns content to the left */
  float: left;
  width: calc(50% - 48px);
  display: flex;
  cursor: pointer;
  vertical-align: top;
  position: relative;
  transition: left 0.3s 0.05s ease;
}

.pagenavleft:hover {
  left: -24px;
}

.pagenavright {
  justify-content: flex-end; /* Aligns content to the left */
  float: right;
  width: calc(50% - 48px);
  display: flex;
  cursor: pointer;
  vertical-align: top;
  position: relative;
  transition: left 0.3s 0.05s ease;
}

.pagenavright:hover {
  right: -24px;
}

.navtextleft {
  color: #000;
  font-size: 1.17647em;
  text-align: start;
  line-height: 1.5;
}

.navtextright {
  color: #000;
  font-size: 1.17647em;
  text-align: end;
  line-height: 1.5;
}

.pagenav-arrow-icon {
  width: 48px;
  height: 48px;
  stroke: #757575;
  fill: none;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .pagenavleft {
    width: calc(50% - 24px);
  }

  .pagenavleft:hover {
    left: -16px;
  }

  .pagenavright {
    width: calc(50% - 24px);
  }

  .pagenavright:hover {
    right: -16px;
  }

  .navtextleft {
    font-size: 1em;
  }

  .navtextright {
    font-size: 1em;
  }

  .pagenav-arrow-icon {
    width: 28px;
    height: 28px;
    margin-top: 12px;
  }
}