/*!
Theme Name: noskrien
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: noskrien
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

noskrien is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color:transparent !important;
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color)
}

.author {
	display: block;
}

.badge {
    text-transform: lowercase;
	--bs-badge-font-weight: 400;
    --bs-badge-padding-x: 0.7em;
    --bs-badge-padding-y: 0.35em;	
}


.icon-list {
  padding-left: 0;
  list-style: none;
}
.icon-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: .25rem;
}
.icon-list li::before {
  display: block;
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-right: .5rem;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fb8c00' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
}

.small_p {
	margin-bottom: 0.4rem;
	font-size: 0.875em;
}

.alert {
	--bs-alert-padding-x: 0.85rem;
	--bs-alert-padding-y: 0.65rem;
	--bs-alert-margin-bottom: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.45;
	box-shadow: none;
}

.alert.alert-success,
.alert.alert-info,
.alert.alert-warning,
.alert.alert-danger {
	border: 1px solid transparent;
	background-image: none;
}

.alert.alert-success {
	color: #27633b !important;
	background-color: #f0f7f1;
	border-color: #d5e8d8;
}

.alert.alert-info {
	color: #24577a !important;
	background-color: #eff6fb;
	border-color: #d5e6f2;
}

.alert.alert-warning {
	color: #76551b !important;
	background-color: #fff8e9;
	border-color: #f1e2bd;
}

.alert.alert-danger {
	color: #873c38 !important;
	background-color: #fff2f1;
	border-color: #f0d6d4;
}

.alert-dismissible .btn-close {
	padding: 0.65rem 0.85rem;
	opacity: 0.55;
}



/* Bootstrap dropdown arrows are handled natively via ::after pseudo-element
   No need for custom FontAwesome styling - Bootstrap CSS handles it automatically */

.profile-nav {
	gap: 0.25rem;
	position: relative;
}

.profile-nav .profile-nav-dropdown {
	position: relative;
}

.profile-nav .profile-nav-dropdown > .profile-menu-toggle {
	font: inherit;
	line-height: inherit;
	text-align: left;
	color: #000;
}

.profile-nav .profile-nav-dropdown > .profile-menu-toggle:not(.active) {
	color: var(--bs-danger);
}

.profile-nav .profile-nav-dropdown > .profile-menu-toggle::after {
	display: inline-block;
	margin-left: 0.4rem;
	vertical-align: 0.15rem;
	content: "";
	border-top: 0.3rem solid;
	border-right: 0.3rem solid transparent;
	border-bottom: 0;
	border-left: 0.3rem solid transparent;
}

.profile-nav .profile-nav-dropdown > .profile-menu-toggle:focus-visible {
	outline: 2px solid var(--bs-warning);
	outline-offset: 2px;
}

.profile-nav .profile-menu-panel {
	z-index: 1050;
	min-width: 14rem;
	max-width: calc(100vw - 2.5rem);
	display: none !important;
	position: absolute !important;
	top: 100% !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	margin: 0.25rem 0 0 !important;
	padding: 0.5rem;
	list-style: none;
	color: #344767;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0.75rem;
	box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.12);
}

.profile-nav .profile-nav-dropdown.is-open > .profile-menu-panel {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transform: none !important;
}

.profile-nav .profile-menu-item {
	display: block;
	padding: 0.65rem 0.85rem;
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.profile-nav .profile-menu-item:hover,
.profile-nav .profile-menu-item:focus-visible {
	background-color: #f5f5f5;
	color: #344767;
}

@media (max-width: 575.98px) {
	.profile-nav {
		row-gap: 0.5rem;
	}

	.profile-nav .profile-menu-panel {
		min-width: min(14rem, calc(100vw - 2.5rem));
	}
}

.comments-area {
	color: #344767;
}

.comments-title,
#reply-title {
	font-weight: 600;
}

.comment-list > li {
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.comment-list > li:first-child {
	padding-top: 0;
}

.comment-list .children {
	margin: 1.5rem 0 0 3rem;
	padding-left: 1.5rem;
	list-style: none;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.comment-avatar .avatar {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
}

.comment-content > :last-child {
	margin-bottom: 0;
}

.comment-reply a,
.comment-navigation a {
	color: var(--bs-warning-text-emphasis, #c77800);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.comment-reply a:hover,
.comment-navigation a:hover {
	text-decoration: underline;
}

#respond {
	position: relative;
	margin-top: 2rem;
	padding: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 1rem;
	background-color: #fff;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
}

#cancel-comment-reply-link {
	position: absolute;
	top: 0.75rem;
	right: 0.9rem;
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #5e6672;
	font-size: 1.5rem;
	line-height: 1;
	text-decoration: none;
}

#cancel-comment-reply-link:hover {
	background-color: rgba(0, 0, 0, 0.06);
	color: #344767;
}

#reply-title {
	padding-right: 2.5rem;
}

#respond .comment-form > p {
	margin-bottom: 1rem;
}

#respond label {
	display: inline-block;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
	display: block;
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid #d2d6da;
	border-radius: 0.5rem;
	background-color: #fff;
	color: #344767;
	font: inherit;
}

#respond textarea {
	min-height: 8rem;
	resize: vertical;
}

#respond input:focus,
#respond textarea:focus {
	border-color: #fb8c00;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(251, 140, 0, 0.15);
}

#respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

#respond .comment-form-cookies-consent input {
	margin-top: 0.25rem;
}

#respond .comment-form-cookies-consent label {
	margin-bottom: 0;
	font-weight: 400;
}

#respond .form-submit {
	margin-bottom: 0;
}

[data-profile-avatar-canvas] {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 50%;
	cursor: move;
	touch-action: none;
}

.profile-field-group + .profile-field-group {
	padding-top: 1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.profile-field-group-title {
	margin-bottom: 1rem;
	color: #344767;
	font-weight: 700;
}

.profile-field-label {
	color: #344767;
	font-size: 0.9rem;
	font-weight: 600;
}

.profile-field-description {
	display: block;
	margin-top: 0.35rem;
	color: #5e6672;
	font-size: 0.8rem;
	line-height: 1.4;
}

.profile-field-switch .form-check-input:checked {
	border-color: #fb8c00;
	background-color: #fb8c00;
}

@media (max-width: 575.98px) {
	.comment-list .children {
		margin-left: 1rem;
		padding-left: 1rem;
	}

	#respond {
		padding: 1rem;
	}
}

.form-control {
/* Lets add small border with very light color */
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding-left: 0.85rem;
}

.header-gallery {
	color: #344767;
}