/* Form */

.sh-form ul, .sh-form ol {
	margin: var(--sp-0);
	padding: var(--sp-0);
	list-style: none;
}

.sh-form ul li, .sh-form ol li {
	margin: var(--sp-2) var(--sp-0);
}

.sh-form ul li:first-child, .sh-form ol li:first-child {
	margin-top: var(--sp-0);
}

.sh-form ul li:last-child, .sh-form ol li:last-child {
	margin-bottom: var(--sp-0);
}

.sh-form ul li label, .sh-form ol li label, .sh-form-fieldset-content label {
	display: block;
	margin-bottom: var(--sp-1);
	font-size: 14px;
	font-weight: 600;
}

.sh-form ul li label span {
	display: block;
	margin-top: var(--sp-1);
	color: var(--sh-text-light);
	font-size: 12px;
}

.sh-form-input, .sh-form ul li input:not([type="checkbox"]), .sh-form ol li input:not([type="checkbox"]),
.sh-form-fieldset-content input,
input.button, 
input.textbox, 
input.invalid_field, 
input.valid_field, 
textarea {
	font-family: 'Lexend', sans-serif;
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--sh-form-input-bg);
	color: var(--sh-form-input-clr-placeholder);
	border-radius: var(--sp-1);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: 
		color 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease,
		border 0.3s ease;
}

.sh-form-input:hover, .sh-form ul li input:not([type="checkbox"]):hover, .sh-form ol li input:not([type="checkbox"]):hover,
.sh-form-fieldset-content input:hover,
input.button:hover, 
input.textbox:hover, 
input.invalid_field:hover, 
input.valid_field:hover, 
textarea:hover {
	background-color: var(--sh-form-input-bg-hover);
	color: var(--sh-form-input-clr-hover);
	border-color: var(--sh-form-input-border-hover);
}

.sh-form-input:focus, .sh-form ul li input:not([type="checkbox"]):focus, .sh-form ol li input:not([type="checkbox"]):focus,
.sh-form-fieldset-content input:focus,
input.button:focus, 
input.textbox:focus, 
input.invalid_field:focus, 
input.valid_field:focus, 
textarea:focus {
	background-color: var(--sh-form-input-bg-focus);
	color: var(--sh-form-input-clr-focus);
	border-color: rgb( var(--sh-form-input-border-focus) );
	box-shadow: 0 0 0 4px rgba( var(--sh-form-input-border-focus), 0.3 );
	outline: 0;
}

.sh-form-input::placeholder, .sh-form ul li input:not([type="checkbox"])::placeholder, .sh-form ol li input:not([type="checkbox"])::placeholder,
.sh-form-fieldset-content input::placeholder,
input.button::placeholder, 
input.textbox::placeholder, 
input.invalid_field::placeholder, 
input.valid_field::placeholder, 
textarea::placeholder {
	color: var(--sh-form-input-clr-placeholder);
} 

.sh-form-input.sh-form-input-full-width, .sh-form ul li input:not([type="checkbox"]).sh-form-input-full-width, .sh-form ol li input:not([type="checkbox"]).sh-form-input-full-width,
.sh-form-fieldset-content input.sh-form-input-full-width {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}

button,
button.sh-form-button,
input[type="submit"],
a.button,
.button {
	font-family: 'Lexend', sans-serif;
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--sh-form-input-bg);
	color: var(--sh-form-input-clr);
	border-radius: var(--sp-1);
	font-size: 14px;
	font-weight: 600;
	border: 0px;
	box-shadow: unset;
	transition: all 0.3s ease;
}

.sh-form-button-full-width {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
}

button:hover,
.sh-form-button:hover,
input[type="submit"]:hover,
a.button:hover,
.button:hover {
	background-color: var(--sh-form-button-bg-hover);
	color: var(--sh-very-light-clr);
    background-color: var(--sh-register-button-hover);
    box-shadow: 0 0 8px rgb( var(--sh-register-button-hover-shadow), 0.6 );
	cursor: pointer;
}

button:focus,
.sh-form-button:focus,
input[type="submit"]:focus,
a.button:focus,
.button:focus {
	outline: 0;
}

.sh-form-item.sh-form-item-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: var(--sp-3) var(--sp-0);
}

.sh-form-item.sh-form-item-tools a {
	color: var(--sh-light-clr);
}

.sh-form-item.sh-form-item-tools a:hover {
	color: var(--sh-link-hover-clr);
}

.sh-form-item .sh-form-item-remember {
	display: flex;
	align-items: center;
	grid-gap: var(--sp-3);
}

.sh-form-item .sh-form-item-remember label {
	margin-bottom: var(--sp-0);
	line-height: 22px;
}

/* Modal */

.sh-modal {
	font-family: 'Lexend', sans-serif;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
	position: fixed;
	top: var(--sp-0);
	left: var(--sp-0);
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	z-index: 99;
}

.sh-modal.sh-modal-open {
	opacity: 1;
	display: block;
}

.sh-modal-content,
.modal {
	background-color: var(--sh-modal-content);
	border: 1px solid var(--sh-modal-content-border);
	max-width: 650px;
	min-width: 650px;
	padding: var(--sp-0);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--sp-5) var(--sp-4);
	border-radius: var(--sp-1);
}

.modal .thead {
	border: 0;
	font-size: 15px;
}

.sh-modal-content .sh-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--sh-very-light-clr);
	margin-bottom: var(--sp-4);
}

.sh-modal-content .sh-modal-header .sh-modal-header-icon {
	background-color: var(--sh-modal-content-icon-bg);
	position: absolute;
	left: 50%;
	top: -25px;
	transform: translate(-50%, 0%);
	padding: 6px;
	border-radius: var(--sp-10);
}

.sh-modal-content .sh-modal-header .sh-modal-header-icon i {
	background-color: var(--sh-modal-content-icon-bg);
	color: var(--sh-very-light-clr);
	font-size: 1.2rem;
	width: 35px;
	height: 35px;
	text-align: center;
	line-height: 35px;
	border-radius: var(--sp-10);
}

.sh-modal-content .sh-modal-header h3 {
	color: var(--sh-very-light-clr);
	border: 0;
	font-size: 20px;
	margin: var(--sp-0);
}

.sh-modal-content .sh-modal-header .sh-modal-close {
	color: var(--sh-modal-light-color);
	position: absolute;
	right: var(--sp-3);
	top: var(--sp-6);
	cursor: pointer;
	font-size: 1.4rem;
	transition: all 0.2s linear;
}

.modal a.close-modal::after {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    text-indent: 0px;
    position: absolute;
    right: 40px;
    top: 30px;
    font-size: 20px;
}

.sh-modal-content .sh-modal-header .sh-modal-close:hover {
	color: var(--sh-modal-close-hover);
}

.sh-modal-content .sh-modal-header .sh-modal-close a {
	color: var(--sh-modal-light-color);
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

.sh-modal-content .sh-modal-header .sh-modal-close a:hover {
	color: var(--sh-modal-close-hover);
}

.sh-modal-content .sh-modal-main {
	margin-bottom: var(--sp-3);
}

.sh-modal-content .sh-modal-main button {
	display: block;
	width: 100%;
	margin-top: var(--sp-3);
}

/* Custom Form */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type='checkbox'],
    input[type='radio'] {
        --form-checkbox-active: #f08e2a;
        --form-checkbox-active-inner: #ffffff;
        --form-checkbox-focus: 2px rgba(240, 142, 42, 0.3);
        --form-checkbox-border: #282828;
        --form-checkbox-border-hover: #303030;
        --form-checkbox-background: #1e1e1e;
        --form-checkbox-disabled: #F6F8FF;
        --form-checkbox-disabled-inner: #E1E6F9;
        --form-checkbox-height: 21px;
        --form-checkbox-width: 21px;
        display: inline-block;
        background: var(--form-checkbox-b, var(--form-checkbox-background));
        height: var(--form-checkbox-height);
        border: 1px solid var(--form-checkbox-bc, --form-checkbox-border);
        position: relative;
        vertical-align: top;
        margin: var(--sp-0);
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
        box-sizing: border-box;
    }

    input[type='checkbox']::after {
        box-sizing: border-box;
        content: '';
        display: block;
        position: absolute;
        left: var(--sp-0);
        top: var(--sp-0);
        transition: transform var(--form-checkbox-d-t, 0.3s) var(--form-checkbox-d-t-e, ease), opacity var(--form-checkbox-d-o, 0.2s);
    }

    input[type='checkbox']:checked {
        --form-checkbox-b: var(--form-checkbox-active);
        --form-checkbox-bc: var(--form-checkbox-active);
        --form-checkbox-d-o: 0.3s;
        --form-checkbox-d-t: 0.6s;
        --form-checkbox-d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }

    input[type='checkbox']:disabled {
        --form-checkbox-b: var(--form-checkbox-disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type='checkbox']:disabled:checked {
        --form-checkbox-b: var(--form-checkbox-disabled-inner);
        --form-checkbox-bc: var(--form-checkbox-border);
    }

    input[type='checkbox'] + label {
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        line-height: 21px;
        cursor: pointer;
        margin-left: var(--sp-1);
    }

    input[type='checkbox']:hover:not(:checked):not(:disabled) {
        --form-checkbox-bc: var(--form-checkbox-border-hover);
    }

    input[type='checkbox']:focus {
        box-shadow: 0 0 0 var(--form-checkbox-focus);
        border-color: var(--form-checkbox-focus);
    }

    input[type='checkbox']:not(.sh-form-switch) {
        width: var(--form-checkbox-width);
    }

    input[type='checkbox']:not(.sh-form-switch)::after {
        opacity: var(--form-checkbox-o, 0);
    }

    input[type='checkbox']:checked {
        --form-checkbox-o: 1;
		border-color: var(--form-checkbox-active) !important;
    }

    input[type='checkbox'] {
        box-sizing: border-box;
    }

    input[type='checkbox']:not(.sh-form-switch) {
        border: 1px solid var(--form-checkbox-border);
        border-radius: var(--sp-1);
    }

    input[type='checkbox']::after {
        box-sizing: border-box;
        width: 5px;
        height: 9px;
        border: 2px solid var(--form-checkbox-active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--form-checkbox-r, 20deg));
    }

    input[type='checkbox']:checked {
        box-sizing: border-box;
        --form-checkbox-r: 43deg;
    }

    input[type='checkbox']:not(:checked) {
        box-shadow: unset;
    }

    input[type='checkbox'].sh-form-switch {
        width: 38px;
        border-radius: 11px;
		border: 1px solid transparent;
    }

    input[type='checkbox'].sh-form-switch::after {
        box-sizing: border-box;
        background: var(--form-checkbox-active-inner, var(--form-checkbox-border));
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        transform: translateX(var(--form-checkbox-x, 0));
    }

    input[type='checkbox'].sh-form-switch:checked {
        --form-checkbox-ab: var(--form-checkbox-active-inner);
        --form-checkbox-x: 15px;
    }

    input[type='checkbox'].sh-form-switch:disabled:not(:checked)::after {
        opacity: 0.6;
    }

    input[type='radio'] {
        border-radius: 50%;
		width: 21px;
    }

    input[type='radio']::after {
        background: var(--form-checkbox-active-inner);
        width: 19px;
        height: 19px;
        border-radius: 50%;
        opacity: 0;
        transform: scale(var(--form-checkbox-s, 0.7));
    }

    input[type='radio']:checked {
        --form-checkbox-s: 0.5;
		background: var(--form-checkbox-active) !important;
    }
}

/* menu */

.sh-custom-menu {
	display: none;
	background-color: var(--sh-menu-bg);
	border: 1px solid var(--sh-menu-border);
	max-width: 320px;
	min-width: 250px;
	position: absolute;
	border-radius: var(--sp-2);
	margin: var(--sp-3) var(--sp-0) var(--sp-0) var(--sp-0);
	padding: var(--sp-3) var(--sp-2);
	list-style: none;
	z-index: 9999;
}

.sh-custom-menu::after {
	content: '';
	position: absolute;
	top: -8px;
	left: 50%;
	margin-left: -8px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
 	border-bottom: 8px solid var(--sh-menu-border);
}

/* Badges */

.sh-notification-bubble {
	position: absolute;
	top: -10px;
	font-size: 11px;
	color: var(--sh-very-light-clr);
	display: inline-block;
	text-indent: 0%;
	line-height: 20px;
	padding: var(--sp-0) 6px;
	border-radius: var(--sp-2);
	z-index: 2;
	background: var(--sh-notification_bubble);
}

.sh-badge {
	background-color: var(--sh-register-button);
	padding: 0 1em;
    line-height: 2;
    border-radius: 100px;
    font-weight: 600;
	font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    text-shadow: none;
    letter-spacing: 0;
	border: 1px solid transparent;
}

.sh-badge.sh-badge-warning {
	background-color: rgba( var(--sh-messages-warning-alert), 0.6 );
	border-color: rgba( var(--sh-messages-warning-alert), 1 );
}

.sh-badge.sh-badge-yellow {
	background-color: rgba( var(--sh-messages-yellow-alert), 0.6 );
	border-color: rgba( var(--sh-messages-yellow-alert), 1 );
}

.sh-badge.sh-badge-information {
	background-color: rgba( var(--sh-messages-information-alert), 0.6 );
	border-color: rgba( var(--sh-messages-information-alert), 1 );
}

.sh-badge.sh-badge-success {
	background-color: rgba( var(--sh-messages-success-alert), 0.6 );
	border-color: rgba( var(--sh-messages-success-alert), 1 );
}

/* -- */

select {
	font-family: 'Lexend', sans-serif;
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--sh-form-input-bg);
	color: var(--sh-form-input-clr);
	border-radius: var(--sp-1);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	transition: all 0.3s ease;
	color-scheme: dark;
}

select:hover {
	background-color: var(--sh-form-input-bg-hover);
	color: var(--sh-form-input-clr-hover);
	border-color: var(--sh-form-input-border-hover);
}

select:focus {
	background-color: var(--sh-form-input-bg-focus);
	color: var(--sh-form-input-clr-focus);
	border-color: rgb( var(--sh-form-input-border-focus) );
	box-shadow: 0 0 0 4px rgba( var(--sh-form-input-border-focus), 0.3 );
	outline: 0;
}

select::placeholder {
	color: var(--sh-form-input-clr-placeholder);
}

.sh-message {
	background-color: rgba( var(--sh-messages-red-alert), 0.4 );
	border: 1px solid rgba( var(--sh-messages-red-alert), 1 );
	color: var(--sh-very-light-color);
	padding: var(--sp-4) var(--sp-6);
	text-align: center;
	border-radius: var(--sp-2);
	font-size: 14px;
	font-weight: 500;
	margin: var(--sp-2) var(--sp-0);
}

.sh-message h4 {
	margin: var(--sp-0);
	padding: var(--sp-0);
}

.sh-message>a {
	color: var(--sh-very-light-color);
	font-weight: 700;
}

.sh-message.sh-warning {
	background-color: rgba( var(--sh-messages-warning-alert), 0.4 );
	border-color: rgba( var(--sh-messages-warning-alert), 1 );
}

.sh-message.sh-yellow {
	background-color: rgba( var(--sh-messages-yellow-alert), 0.4 );
	border-color: rgba( var(--sh-messages-yellow-alert), 1 );
}

.sh-message.sh-information {
	background-color: rgba( var(--sh-messages-information-alert), 0.4 );
	border-color: rgba( var(--sh-messages-information-alert), 1 );
}

.sh-message.sh-success {
	background-color: rgba( var(--sh-messages-success-alert), 0.4 );
	border-color: rgba( var(--sh-messages-success-alert), 1 );
}

.sh-button-row {
	padding: var(--sp-0) var(--sp-0);
	border: 0;
}

.sh-button-row {
	background-color: var(--sh-area-background-dark);
	border: 1px solid var(--sh-area-background-light);
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: var(--sp-2);
}

.sh-button-row:not(.sh-button-new) .pagination {
	padding: var(--sp-6);
}

.sh-button-row.sh-button-new {
	padding: var(--sp-6) var(--sp-5);
}

@media screen and (max-width: 979px) {
	.sh-modal-content, .modal {
		max-width: 92%;
		min-width: 92%;
	}
	.sh-form-switch {
		flex-wrap: wrap;
	}
	.sh-form-newthread-buttons>* {
		flex: 1 0 100% !important;
	}
}

.sh-form-switch {
	display: flex;
	align-items: center;
	grid-gap: var(--sp-2);
	margin-bottom: var(--sp-2);
}

.sh-form-switch label {
	margin: var(--sp-0) !important;
	padding: var(--sp-0) !important;
}

.sh-form-switch-2 input[type="radio"] {
    flex: 0 0 21px;
    padding: var(--sp-0) !important;
    border-radius: var(--sp-10) !important;
}

.sh-custom-menu.sh-usermenu {
	min-width: 340px;
	max-width: 340px;
	padding: var(--sp-0);
	top: 70px;
	right: var(--sp-0);
}

.sh-custom-menu.sh-usermenu::after {
	left: 85%;
}

.sh-userbar .sh-custom-menu.sh-usermenu li a {
	display: block;
	font-size: 13px;
	font-weight: 450;
	padding: var(--sp-3) var(--sp-5);
	color: var(--sh-menu-light-clr);
	transition: all 0.3s ease;
}

.sh-custom-menu.sh-usermenu li a:hover {
	background-color: var(--sh-menu-border);
	color: var(--sh-very-light-clr);
}

.sh-custom-menu.sh-usermenu li:first-child a {
	border-radius: calc( var(--sp-2) - 1px ) calc( var(--sp-2) - 1px ) var(--sp-0) var(--sp-0);
}

.sh-custom-menu.sh-usermenu li:last-child a {
	border-radius: var(--sp-0) var(--sp-0) calc( var(--sp-2) - 1px ) calc( var(--sp-2) - 1px );
}

[data-sh-menu-id="usermenu"]:hover {
	cursor: pointer;
}