/* ========================================================================
   SECTION 1: VARIABLES & BASE
   Variables :root and base tags
   ======================================================================== */

:root {
	/* ===== FONTS ===== */
	--font-main: "proxima-nova", "Lato", Helvetica, Arial, sans-serif;
	--font-condensed: "Fira Sans Condensed", sans-serif;
	--font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* ===== PRIMARY & ACCENT COLORS ===== */
	--color-primary: #5e79bb;
	--color-primary-hover: #4a65a4;
	--color-primary-active: #455a8e;
	--color-accent: #ff7f50;
	--color-accent-hover: #d26f48;
	--color-dark-bg: #2e3337;

	/* ===== BASE COLORS ===== */
	--color-white: #fff;
	--color-black: #000;
	--color-link: #3e65ae;
	--color-link-alt: #4469a3;
	--color-success: #18a850;
	--color-danger: #f41c1c;
	--color-warning: #ffb201;

	/* ===== BACKGROUND COLORS ===== */
	--color-bg-light: #f4f4f4;
	--color-bg-transparent: rgba(77, 77, 77, 0.05);
	--color-bg-cornsilk: cornsilk;
	/* Yellow backgrounds */
	--color-bg-yellow: #fdf3cd;
	--color-bg-yellow-bright: rgba(255, 220, 81, 0.9);
	--color-bg-yellow-pale: rgba(255, 220, 81, 0.31);
	--color-bg-yellow-soft: #fff8e3;
	/* Gray backgrounds */
	--color-bg-gray-light: rgb(232, 232, 232);
	--color-bg-gray-pale: #f0f0f0;
	--color-bg-gray-soft: #ececec;
	--color-bg-gray-muted: #e8e8e8;
	--color-bg-gray-dark: #404044;
	--color-bg-gray-ultra-light: #f2f2f2; /* Opaque version */
	/* Other backgrounds */
	--color-bg-purple: #4e5293;
	--color-bg-blue-pale: #edf0ff;
	--color-bg-red-pale: #ffdada;
	--color-bg-hover-menu: #71717182; /* Semi-transparent gray for menu hover */
	--color-bg-state-disabled: #888c; /* User state not reached */
	--color-bg-info: #e1e1e1; /* Info background */

	/* ===== BORDER COLORS ===== */
	--color-border: #eaeaea;
	--color-border-gray: #ddd;
	--color-border-gray-light: #d9d9d9;
	--color-border-gray-soft: #e3e3e3a3;
	--color-border-gray-muted: #ddd6;
	--color-border-dark: #686868;
	--color-border-orange: #f0aa7f;
	--color-border-white-pale: #fdfdfd4a;
	--color-border-semi: #eaeaea85; /* Semi-transparent border */
	--color-border-pink: #FBCEE4;

	/* ===== TEXT COLORS ===== */
	--color-text-dark: #3c3c3c;
	--color-text-muted: #7d7d7d;
	--color-text-light: #6a6a6a;
	--color-text-gray: #646464;
	--color-text-gray-dark: #333;
	--color-text-gray-soft: #44474a;
	--color-text-blue: #285395de;

	/* ===== STATUS COLORS ===== */
	--color-status-new: #e64646;
	--color-status-payed: #2b952bd6;
	--color-status-part-payed: #4da64d85;
	--color-status-pending: #efe1ff;
	--color-status-cancelled: #605e5e;
	--color-status-waiting: #2c5ab0;

	/* ===== UTILITIES ===== */
	/* Box shadows */
	--shadow-sm: 0 2px 3px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 0 8px 0 rgba(34, 60, 80, 0.05);
	/* Gradients */
	--gradient-in-work: linear-gradient(130deg, rgb(68, 135, 221) 24%, rgb(40, 83, 164) 94%);
}

/* Base tags */
a {
	color: var(--color-link);
}

.page-header h1,
.page-header h1 a,
.page-header h1 a:focus,
a:hover,
h3 {
    color: var(--color-text-dark);
}



/* ========================================================================
   SECTION 2: BUTTONS
   All buttons and their states
   ======================================================================== */

.btn-primary {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
	background-color: var(--color-primary-hover) !important;
	border-color: var(--color-primary-hover) !important;
}

.btn-primary.active, .btn-primary:active {
	border-color: var(--color-primary-active) !important;
}

.btn-change-object {
	display: block !important;
	position: absolute;
	z-index: 100 !important;
	top: 6px;
	right: 20px;
}

.btn-restart-task {
	display: block !important;
	position: absolute;
	z-index: 100 !important;
	top: 6px;
	right: 149px;
}

.btn.submit-button {
	border-radius: 40px !important;
}

.btn.skip-button.btn-link {
	display: none !important;
}

.uploadifive-button,
.uploadifive-button:hover {
	background-image: none;
}

.note-editor .btn-primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .dropdown-toggle:focus, .standard-page-content :focus, .standard-page-content a:focus {
	outline: unset !important;
	outline-offset: unset !important;
}

.pull-left > a {
	font-weight: bold;
}


/* ========================================================================
   SECTION 3: ALERTS, ERRORS & NOTIFICATIONS
   Alerts, error messages and notifications
   ======================================================================== */

.alert {
	padding: 15px;
	margin-bottom: 10px;
	border: 1px solid transparent;
	border-radius: 4px;
}

.alert-strong_danger {
	color: var(--color-white) !important;
	font-weight: bold !important;
}

.errorMessage {
	color: var(--color-danger);
	padding-top: 5px;
	font-size: 16px;
	border-style: dashed;
	padding-bottom: 5px;
	border-width: 2px;
	margin-top: 7px;
	text-align: center;
}

.error-summary {
	background: var(--color-danger) !important;
}


/* ========================================================================
   SECTION 4: FORMS & INPUTS
   Forms, inputs, selects and tags
   ======================================================================== */

#select2-drop {
	width: 400px ;
	min-width: 290px !important;
}

.select2-container {
	max-width: unset;
}

.select2-container-active .select2-choice, .select2-container-multi.select2-container-active .select2-choices, .select2-container-multi.select2-dropdown-open .select2-choices {
	outline: unset !important;
	outline-offset: unset;
}

.select2-container .select2-choice, .select2-container .select2-choices, .select2-container .select2-choices .select2-search-field input {
	font-family: var(--font-helvetica) !important;
}

.tags_js_pretty, .tag-editor .placeholder {
	font-family: var(--font-main) !important;
	font-size: 14px !important;
}

.gc-tags span, .gc-tags a {
	font-size: 14px;
}

.emoji-wysiwyg-editor {
	resize: none !important;
}


/* ========================================================================
   SECTION 5: LAYOUT & NAVIGATION
   Page structure, sidebar, navigation menu
   ======================================================================== */

.gc-account-leftbar {
	background: var(--color-dark-bg);
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
	color: var(--color-dark-bg);
}

.gc-account-leftbar .gc-account-user-menu li a {
	background: var(--color-dark-bg);
}

.gc-account-leftbar .gc-account-user-menu li a:hover {
	background-color: var(--color-bg-hover-menu);
}

.gc-account-leftbar .gc-account-user-menu li.active a, .gc-account-leftbar .gc-account-user-menu li.selected a {
	background: var(--color-bg-gray-pale);
}

.content-menu a {
	color: var(--color-text-gray-dark);
}

.gc-account-user-submenu-bar h3 {
	color: var(--color-text-dark);
	font-weight: bolder;
}

.gc-account-leftbar .toggle-link {
	background: var(--color-dark-bg);
}

.standard-page-content .breadcrumb a {
	font-weight: lighter;
	color: var(--color-text-light);
}

.breadcrumb {
	margin-bottom: 0 !important;
}

.breadcrumbs a {
	font-weight: lighter;
	color: var(--color-text-dark);
}

.standard-page-content .page-header {
	margin-top: 20px;
}

.gc-right-active-block .block-items-menu li:hover, .gc-right-active-block .block-items-menu li.active {
	background: var(--color-primary);
}

.gc-right-active-block .date-panel {
	color: var(--color-text-gray);
	padding-top: 2px;
	font-weight: lighter;
	padding-left: 7px;
	font-size: 0.83em;
}


/* ========================================================================
   SECTION 6: COMPONENT - TASK FORM
   Task form and all related elements
   ======================================================================== */

.task-form {
	border: 1px solid var(--color-border-gray-light);
	margin-bottom: 20px;
	padding-bottom: 0;
	border-left: solid 4px var(--color-primary);
}

.task-form .task-body {
	padding: 15px !important;
	font-weight: lighter !important;
}

.task-form .task-object {
	background: var(--color-bg-gray-pale);
	padding: 10px 20px;
	margin-bottom: 10px;
}

.task-form .task-title {
	background: var(--color-bg-gray-pale);
	padding: 8px;
	font-weight: lighter !important;
}

.task-form > div > .change-logs {
	display:none !important;
}

.task-form.task-form-closed .open-btn,
.task-form .close-btn {
	display: inline;
	cursor: pointer;
	font-size: 20px !important;
	padding: 10px !important;
	position: relative !important;
	top: 2px;
}

.task-form .active-task-script {
	padding-bottom: 0 !important;
	margin-bottom: 5px !important;
}

.task-script-row .small {
	font-size: 14px;
	color: var(--color-text-muted);
	font-weight: lighter;
}

.small .text-muted {
	color: var(--color-success) !important;
	font-weight: lighter;
	font-size: 13px;
}

.bg-lightblue {
	background: var(--color-bg-yellow);
}

.resp-table .resp-left-block .resp-list li.fixed-by-manager.is-manager {
	border: 0;
	border-left: 6px solid var(--color-warning) !important;
	background: var(--color-bg-gray-soft) !important;
}

.resp-table .resp-content .resp-content-title.fixed-by-me {
	background: var(--color-bg-gray-muted);
	border-left: solid var(--color-warning) 5px;
}

.resp-table .resp-left-block .resp-list li.fixed-by-manager .resp-blocked-by {
	display: block;
	position: absolute;
	width: 30px;
	right: 0;
	top: 0;
	height: 30px;
	background: none;
}


/* ========================================================================
   SECTION 7: COMPONENT - LESSON LIST
   Lesson list and its structure
   ======================================================================== */

.lesson-list {
	background: var(--color-bg-gray-ultra-light) !important;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	border-radius: 4px;
	margin-bottom: 20px;
}

.lesson-list li .title {
	color: var(--color-text-dark);
}

.lesson-list .description {
	width:100% !important;
}

.lesson-list li.divider {
	min-height: 100%;
	margin-bottom: inherit;
}

.lesson-list li .state-icon-block {
	color: var(--color-text-dark);
}

.stream-title {
	color: var(--color-text-dark) !important;
	font-weight: lighter;
}


/* ========================================================================
   SECTION 8: COMPONENT - USER STATES
   All user statuses for lessons
   ======================================================================== */

.user-state-answered .user-state-label {
    color: var(--color-text-dark);
}

.user-state-answered .user-state-bg {
    background: var(--color-accent);
}

.user-state-has_mission .user-state-label {
	color: var(--color-dark-bg);
}

.user-state-has_mission .user-state-bg {
	background: var(--color-text-dark);
}

.lesson-list li.user-state-reached .user-state-label.has-start-at {
	color: var(--color-text-blue);
}

.user-state-need_accomplish .user-state-bg {
	background: var(--color-danger);
}

.user-state-not_reached .user-state-bg {
	background: var(--color-bg-state-disabled) !important;
}

.lesson-list li.user-state-not_reached .info {
	background: var(--color-bg-info) !important;
}


/* ========================================================================
   SECTION 9: COMPONENT - COMMENTS & ANSWERS
   Comments, answer forms and discussions
   ======================================================================== */

/* Comments block */
.lesson-answer-comment {
	overflow: hidden;
	margin-bottom: 10px;
	background: var(--color-bg-transparent);
	padding: 10px 4px 4px 10px;
	border-width: 2px;
	border-bottom: 2px;
	border-left: 5px solid var(--color-accent);
	margin-top: 3px;
}

.comment-form-wrapper .new-comment-textarea {
	resize: none !important;
	padding-top: 3px;
}

.comment-form-wrapper .new-comment.active .btn-send {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	padding-top: 8px;
}

.new-comment.active .btn-send {
	background-color: var(--color-accent) !important;
	border-color: var(--color-accent) !important;
	font-weight: lighter;
}

.new-comment.active .btn-send:hover {
	font-weight: lighter;
	background-color: var(--color-accent-hover) !important;
	border-color: var(--color-accent-hover) !important;
}

.simple-answer .new-comment-textarea {
	resize: none !important;
	padding-top: 7px;
	padding-left: 7px;
}

.simple-answer {
	background: var(--color-bg-transparent);
}

.answer-form {
	padding: 20px;
	background: var(--color-bg-transparent);
}

.answer-form textarea {
	resize: block !important;
}

.answer-form .addfield {
    padding-bottom: 1px;
}

.user-answer .comment-form-wrapper {
	padding-top: 18px;
	padding-left: 5px;
	border-width: 2px;
	border-left: 5px solid var(--color-text-gray-soft);
	padding-left: 10px;
	background: var(--color-bg-transparent);
	margin-right: 10px;
}

.user-answer .answer-status .answer-status-label {
	background: var(--color-dark-bg);
}

.comments-tree .worker .text {
	color: var(--color-dark-bg);
}

.comments-tree .user-image-wrapper img,
.user-answer .user-image img,
.answer-form img {
	border-radius: 30px;
}

.title a {
    color: var(--color-dark-bg);
}

.b-like .button,
.b-notifications-subscribe .button,
.more-comments,
.answer-status a,
.show-lesson-link {
	color: var(--color-link-alt);
}

.b-like .button,
.b-notifications-subscribe .button,
.answer-status a {
	font-weight: lighter;
}

.b-notifications-subscribe .button {
	border-bottom: 1px dotted var(--color-link-alt);
}

/* Conversation Widget */
.conversation-widget .comment > .text .text-content {
	background: var(--color-white);
	border: 1px solid var(--color-border-semi) !important;
	box-shadow: var(--shadow-md) !important
}

.conversation-widget .comment-wrapper .comment .text-content {
	border-radius: 4px !important;
}

.conversation-widget .own-user-comment .comment > .text .text-content,
.conversation-widget .my-comment .comment > .text .text-content {
	background-color: var(--color-bg-blue-pale) !important;
}


/* ========================================================================
   SECTION 10: COMPONENT - DEAL STATUSES
   All order statuses
   ======================================================================== */

.deal-status {
	background: var(--color-bg-purple);
	color: white;
}

.deal-status.status-new {
	background: var(--color-status-new);
}

.deal-status.status-payed {
	background: var(--color-status-payed);
}

.deal-status.status-part_payed {
	background: var(--color-status-part-payed);
	color: white;
}

.deal-status-light.status-deal-status.status-pending {
	background: var(--color-status-pending);
}

.deal-status.status-cancelled {
	background: var(--color-status-cancelled) !important;
	color: white;
}

.deal-status.status-payment_waiting {
	background: var(--color-bg-yellow-bright);
	color: black;
	font-weight: bold;
}

.deal-status.status-in_work {
	background: var(--gradient-in-work) !important;
	font-weight: bold;
}

.deal-status-light {
	color: var(--color-text-gray);
	font-weight: lighter;
}

.deal-status-light.status-payment_waiting {
	background: var(--color-bg-yellow-pale);
}

.deal-status.status-payed.not-payed {
	font-weight: bold;
	background: var(--color-bg-gray-light);
	border: var(--color-border-dark) 1px dashed;
	color: black;
}

.deal-status.status-waiting_for_return {
	background: var(--color-status-waiting);
	font-weight: bold;
	color: white;
}


/* ========================================================================
   SECTION 11: WIDGETS
   Specialized widgets and modules
   ======================================================================== */

/* Flowchart Widget */
.flowchart-block .flowchart-block-icon {
	width: 19px!important;
	height: 19px !important;
	float: left;
}

.operation-flowchart-block {
	background: var(--color-white) !important;
}

#flowchart .not-own-process-message, #testing {
	padding: 45px 20px 20px 20px !important;
}

.flowchart-container {
	background: none !important;
	width: 500vh;
}

.flowchart-container .flowchart-block {
	border: 1px solid var(--color-bg-gray-pale) !important;
	text-align: center;
	max-width: 200px;
	min-width: 200px;
	position: absolute;
	padding: 5px 10px;
	font-size: 13px !important;
	box-shadow: var(--shadow-sm);
	color: var(--color-black);
	font-weight: lighter;
	width: max-content !important;
	background: var(--color-bg-light);
	font-family: var(--font-main) !important;
	border-radius: 6px !important;
}

.flowchart-container .flowchart-block.condition-flowchart-block {
	background: var(--color-bg-yellow-soft);
}

.flowchart-container .flowchart-block.subtask-flowchart-block {
	background: var(--color-bg-light) !important;
 	font-weight: bold !important;
 	border-left: 3px var(--color-border-dark) solid !important;
 	border-right: 3px var(--color-border-dark) solid !important;
}

.flowchart-container .flowchart-block.delayed-flowchart-block {
	background: var(--color-bg-red-pale);
}


.flowchart-container .flowchart-block.currentTime-flowchart-block {
	background: var(--color-bg-gray-ultra-light) !important;
}

.flowchart-container .proxy-flowchart-block {
	border-color: var(--color-border-pink);
}

.flowchart-container .flowchart-connection-label, .flowchart-container .flowchart-endpoint-label {
	display: none;
}

.flowchart-container .flowchart-block.finish-flowchart-block .text-muted {
	color: var(--color-black);
}

#flowchart .block-modal-window select {
	min-height: unset !important;
}

/* Testing Widget */
.testing-widget .before-start-block .start-btn {
	background: var(--color-bg-gray-dark);
	margin-bottom: -1px;
}

.testing-widget .before-start-block h3 {
	display: none;
}

.testing-widget .question .question-title-big {
	text-align: center;
	margin-bottom: 10px;
	font-weight: lighter;
}

.question-description {
	padding: 0 45px 20px;
}

/* Block Library Widget */
.block-library .blocks-list {
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
	grid-gap: 10px !important;
}

.block-library .blocks-list .block-preset .preset-preview {
	background-color: var(--color-white) !important;
	border-bottom: 1px solid var(--color-border);
}

.block-library .blocks-list .block-preset {
	padding: 0 0px 5px 0px !important;
	min-height: 160px !important;
	grid-gap: 5px !important;
	background-color: var(--color-bg-light) !important;
}

.preset-name {
	padding: 1px 8px !important;
	font-size: 13px !important;
	font-family: var(--font-condensed) !important;
}

/* Modals */
.gc-modal.chart-config-modal .modal-dialog {
	width: max-content;
}

.modal-without-padding > .modal-dialog > .modal-content > .modal-header {
	background: var(--color-primary);
	color: white;
	font-weight: bold;
}

.gc-notice-modal.in div {
	margin: auto !important;
	padding: 3px !important;
}

.gc-notice-modal.in {
	width: 500px !important;
	top: 0 !important;
	left: 0 !important;
	transform: unset !important;
	margin-left: auto;
	margin-right: auto;
	background: none !important;
}

.gc-notice-modal.in .modal-dialog {
	background: none !important;
}

.gc-notice-modal.in .confirm-email-popup-form form {
	gap: 3px !important;
}

/* Talks Widget */
.talks-widget-button {
	background: var(--color-dark-bg) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-image: url("/public/img/talks_widget/dialog.svg") !important;
}

/* Help Widget */
.help-widget-button {
	display: none !important;
}

/* Job Widget */
.abstract-job-widget {
	border: var(--color-border-gray) solid 1px;
	padding: 8px 10px;
	margin-top: 10px;
	background: var(--color-bg-cornsilk);
}


/* ========================================================================
   SECTION 12: UTILITIES & HELPERS
   Helper classes and utilities
   ======================================================================== */

.p-border1 {
	background: var(--color-bg-gray-pale);
	padding: 10px;
	border-left: 3px solid;
}

.divStyle {
	border: 2px solid var(--color-border-orange);
	border-radius: 2px;
	padding: 10px 8px 10px 8px;
}

.mailing-tip {
	display: none !important;
}

.change-time-block {
	margin-top: 10px;
}

.part-panel-new-page-admin-interface .panel-title,
#modal1,
.mission-update,
#testing {
	font-family: var(--font-main) !important;
}


/* ========================================================================
   SECTION 13: MEDIA QUERIES
   Responsive styles for different screen sizes
   ======================================================================== */

@media screen and (min-width: 1000px) {
	#s2id_addmailingmessageoperation-mailing_id {
		width: 100% !important;
	}
}

@media screen and (max-width: 768px) {
	.page-header {
		margin: 0 0 20px;
	}

	.page-header h1 {
		font-size: clamp(20px, 6vw, 25px) !important;
	}

	.page-header .clearfix {
		display: none;
	}

	.breadcrumb {
		margin-bottom: 0 !important;
		margin-top: 10px;
	}

	.lesson-title-value {
		font-size: clamp(20px, 6vw, 25px) !important;
	}

	.gc-account-leftbar .gc-account-user-menu {
		background: var(--color-dark-bg);
		width: 60px;
	}

	.gc-notice-modal.in {
		width: 360px !important;
	}

	.gc-notice-modal.in div {
		padding: 2px !important;
	}

	.lt-video {
		overflow: hidden;
	}

	.lesson-list li {
		margin: 0 10px 10px !important;
	}
}