/* @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=M+PLUS+Rounded+1c&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* --primary: #9b23eb;
    --primary-dark: #8318cb; */
    /* --primary: #4643d8;
    --primary-dark: #3936d5; */
    /* --primary: #684fe6; */
    /* --primary-dark: #5c44d7; */
    --primary: #684fe6;
    --primary-dark: #553bd4;
    --secondary: #f3f4f6;
    --secondary-dark: #ededed;
    --secondary-light: #f3f4f5;
    --secondary-odd: #eaeaea;
    --text: #483654;
    --light-text: #6b7280;
    --white: #ffffff;
    --border: #e5e7eb;
    --dark: #1a1a2e;
    --gray: #6c757d;
    --gray-light: #9ca6af;
    --gray-lighter: #d2d7db;
    --dark-gray: #6c757d;
    --red: #de5147;
    --del: #c8c8c8;
    --green: #28bd66;
    --success-color: #4ad38c;
    --warning-color: #f8961e;
    --progress-color: #4658e3;
    --danger-color: #c7414a;
    --light-color: #eef0f2;
    --medium-gray: #e9ecef;
    --light-gray: #ebedf0;
    --card-bg: rgba(255, 255, 255, 0.9);
    --bg-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);

    --primary-text-color: #2b2b2b;
	--accent-color: #684fe6;
	--primary-bg-color: #f0eef7;
	--add-bg-color: #dedede;
	--add-dark-bg-color: #292d3e;
	--add-white-bg-color: #f7f7fa;
	--border-color: #dfdfdf;
	--yellow: #ffb428;
    --secondary-bg-color: #816ee126;
}

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    /* color: #585858; */
    box-sizing: border-box;
}
  

  
html, body {
    /* font-family: "JetBrains Mono", monospace; */
    font-family: 'Inter', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
    background-color: #ffffff;
    /* background-color: #29317a; */
    /* background-color: #e3e8f3; */
    /* background: linear-gradient(0deg, rgba(116,116,124,1) 0%, rgb(118, 152, 177) 25%, rgba(116,116,124,1) 85%, rgba(22,111,129,1) 100%); */
    /* color: #f7f3f3; */
    color: #585656;
    line-height: 1.6;
}

label span, p span{
    font-weight: 600;
}

h1 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: normal;
}

h2 {
    font-size: 38px;
    font-weight: normal;
}

h3 {
    font-size: 20px;
    font-weight: normal;
}


/* header {
    z-index: 3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0px 2px 2px rgba(223, 218, 215, 0.36);
} */

a {
	color: var(--primary-text-color);
	text-decoration: none;
}

textarea {
    flex: 1;
    color: inherit;
    padding: 11px 15px;
    border: 1px solid #e1e1e1;
    /* border: none; */
    resize: none;
    border-radius: 25px;
    overflow-y: hidden;
}

select {
    color: inherit;
    padding: 11px 15px;
    border: 1px solid #e1e1e1;
    /* border: none; */
    resize: none;
    border-radius: 25px;
    overflow-y: hidden;
    width: 200px;
}

footer {
    /* background-color: #f1efef; */
    font-size: 13px;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 38px;
    padding-bottom: 38px;
    padding-left: 20vw;
    padding-right: 20vw;
    flex-direction: row;
    /* background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(116,116,124,1) 75%, rgba(22,111,129,1) 100%); */
    background: var(--secondary);
    border-top: 1px solid var(--border);
    color: #a3a3a3;
    /* -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(153, 151, 151); */
    text-align: center;
}

form {
    /* min-width: 400px;
    max-width: 400px; */
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    height: min-content;
}

.header_nav {
    background-color: #ffffff;
    transition: 0.1s;
    border-bottom: 1px solid #cecccc;
}

.header_navmenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20vw;
    padding-right: 20vw;
}

.header_submenu {
    display: flex;
    flex-direction: row;
}

.header_navlink {
    font-size: 15px;
    font-weight: 400;
    border: none;
    cursor: pointer;
    /* color: #f7f3f3; */
    color: #292727;
    padding: 10px;
    transition: 0.6s;
}
  
.header_navlink:hover {
    cursor: pointer;
    background-color: rgb(219, 219, 219);
}

.header_navmenu_terminal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5vw;
    padding-right: 5vw;
}

.page_contents {
    min-height: 67rem;
    margin-top: 4vh;
    padding-bottom: 8rem;
}

.block_v {
    display:flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 2vh;
    width: 100%;
    /* max-width: 1200px; */
    /* margin: 0 auto; */
    /* margin-left: 2vw; */
    /* margin-right: 2vw; */
    /* padding-left: 2vw; */
    /* padding-right: 2vw; */
}



.terminal_container {
    display:flex;
    flex-direction: column;
    gap: 10px;
    /* align-items: center; */
    /* justify-content: center; */
    margin-top: 2vh;
    margin-left: 5vw;
    margin-right: 5vw;
}

.terminal_workplace {
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: top;
    justify-content: space-between;
}

.terminal {
    margin-top: 1vh;
    height: 80vh;
    width: 58vw;
    box-shadow: 0px 2px 2px rgba(223, 218, 215, 0.36);
}

.xterm-screen {
    color: var(--light-gray);
}

/* .xterm-viewport {
    border-radius: 8px;
} */


.block_h {
    margin-top: 0.8vh;
    padding: 10px;
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: center;
    /* justify-content: center; */
    color: #585858;
}

.block_h_between {
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: center;
    justify-content: space-between;
}

.block_h_right {
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: center;
    justify-content: right;
}

.block_h_buttons {
    margin-top: 2vh;
    margin-left: 5vw;
    margin-right: 5vw;
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: center;
    justify-content: center;
}


.sb-btn {
    box-sizing: border-box;
    display: inline-block;
    /* font-family: "Amazon Ember",sans-serif; */
    line-height: 29px;
    position: relative;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    width: max-content;
    touch-action: manipulation;
    text-align: center;
    transition: 0.6s;
    background: var(--primary);
    color: white;
    border: none;
    padding: 4px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.sb-btn:hover, .sb-btn-action:hover{
    /* background-color: var(--secondary-dark); */
    filter: brightness(85%);
    cursor: pointer;
}

.sb-btn-wait {
  position: relative;
  overflow: hidden;
}

.sb-btn-wait::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--primary) 25%,
    var(--primary-dark) 25%,
    var(--primary-dark) 50%,
    var(--primary) 50%,
    var(--primary) 75%,
    var(--primary-dark) 75%
  );
  background-size: 30px 30px;
  z-index: -1;
  animation: moveStripes 1s linear infinite;
  /* border-radius: 100px; */
}

@keyframes moveStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 30px 30px;
  }
}

.sb-btn-secondary {
    background-color: var(--dark);
    color: white;
}

.sb-btn-third {
    color: var(--dark);
    background-color: var(--gray-lighter);
}

.sb-btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}

.sb-btn-cancel {
    color: var(--dark);
    /* background-image: linear-gradient(rgb(219, 105, 105), rgb(212, 76, 76)); */
    user-select: none;
    background-color: var(--gray-lighter);
}

.sb-btn-proceed {
    /* background-image: linear-gradient(rgb(73, 192, 109), rgb(43, 170, 81)); */
    user-select: none;
}

.sb-btn-del {
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    width: max-content;
    touch-action: manipulation;
    text-align: center;
    transition: 0.2s;
    color: white;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    /* background-color: var(--secondary-dark); */
    color: var(--del);
    /* border: 1px solid var(--del); */
    border-radius: 50%;
    border: none;
}

.sb-btn-del-rnd {
    width: 16px;
    height: 16px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    /* width: max-content; */
    touch-action: manipulation;
    text-align: center;
    transition: 0.2s;
    color: white;
    /* padding: 6px 12px; */
    cursor: pointer;
    font-size: 12px;
    /* background-color: var(--secondary-dark); */
    color: var(--del);
    /* border: 1px solid var(--del); */
    border-radius: 50%;
    border: none;
}

.sb-btn-del:hover, .sb-btn-del-rnd:hover {
    background-color: var(--red);
    color: white;
}

.sb-btn-icon {
    box-sizing: border-box;
    display: inline-block;
    /* font-family: "Amazon Ember",sans-serif; */
    line-height: 29px;
    position: relative;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: middle;
    touch-action: manipulation;
    text-align: center;
    transition: 0.6s;
    padding: 3px 12px;
    border-radius: 100px;
    cursor: pointer;
    border: none;
}

.sb-btn-icon:hover{
    background-color: var(--secondary-bg-color);
}

#render_preview_btn:hover {
    transform: rotate(90deg);
}

.sk_href {
    color: #0f1111;
    cursor: pointer;
    width: max-content;
    touch-action: manipulation;
    background: none!important;
    border: none;
    padding: 0!important;
    text-decoration: underline;
    font-weight: 500;
    font-size: 18px;
}

.hover:hover {
    filter: brightness(90%);
    cursor: pointer;
}


.image_preview {
    height: 3vw;
    object-fit: cover;
}

.inactive {
    /* filter: grayscale(1) brightness(1.5); */
    opacity: 0.9;
    cursor: not-allowed;
    pointer-events: none;
}

.column {
    display:flex;
    flex-direction: column;
}

.column_separated {
    gap: 10px;
}

.clipboard_button {
    /* padding: 4px; */
    background: var(--secondary);
    border: none;
    display:flex;
    align-items: center;
    justify-content: center;
}

.clipboard_button_image {
    width: 30px;
}

.clipboard_text {
    padding: 4px;
    background: var(--secondary);
    border: none;
    display:flex;
    align-items: center;
    justify-content: center;
}

.select_icon {
    width: 4vh;
}


.htmx-indicator{
    display:none;
    filter: sepia(93%) saturate(1352%) hue-rotate(87deg) grayscale(1);
}

.htmx-request .htmx-indicator{
    margin-top: 3vh;
    display:flex;
    align-items: center;
    justify-content: center;
}
#modal {
	/* Underlay covers entire screen. */
	position: fixed;
	top:0px;
	bottom: 0px;
	left:0px;
	right:0px;
	background-color:rgba(0,0,0,0.5);
	z-index:10;

	/* Flexbox centers the .modal-content vertically and horizontally */
	display:flex;
	flex-direction:column;
	align-items:center;

	/* Animate when opening */
	animation-name: fadeIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal > .modal-underlay {
	/* underlay takes up the entire viewport. This is only
	required if you want to click to dismiss the popup */
	position: absolute;
	z-index: -1;
	top:0px;
	bottom:0px;
	left: 0px;
	right: 0px;
}

#modal > .modal-content {
	/* Position visible dialog near the top of the window */
	margin-top:10vh;

	/* Sizing for visible dialog */
	width: 58vw;

	/* Display properties for visible dialog*/
	border:solid 1px #999;
	/* border-radius:8px; */
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
	background-color:white;
	padding-left:20px;
    padding-right:20px;
    padding-top: 20px;
    padding-bottom: 20px;

	/* Animate when opening */
	animation-name:zoomIn;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing {
	/* Animate when closing */
	animation-name: fadeOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

#modal.closing > .modal-content {
	/* Animate when closing */
	animation-name: zoomOut;
	animation-duration:150ms;
	animation-timing-function: ease;
}

@keyframes fadeIn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes zoomIn {
	0% {transform: scale(0.9);}
	100% {transform: scale(1);}
}

@keyframes zoomOut {
	0% {transform: scale(1);}
	100% {transform: scale(0.9);}
}

.create_session_types {
    list-style: none;
}

.create_session_categories {
    list-style: none;
}


.crc-chevron {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    font-size: 1rem;
    max-width: 10%;
}

.fa-chevron-down {
    color: #FFF;
    /* font-size: 30px; */
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: -webkit-transform .5s ease-in;
    transition: -webkit-transform .5s ease-in;
    -o-transition: transform .5s ease-in;
    transition: transform .5s ease-in;
    transition: transform .5s ease-in, -webkit-transform .5s ease-in;
    float: right;
    cursor: pointer;
    /* padding: 15px; */
}

.accordion {
    margin-top: 4px;
    width: 30vw;
}

.accordion-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -ms-flex-line-pack: center;
    align-content: center;

    background-color: #ffffff;
    cursor: pointer;
    padding: 18px;
    border-left: 1px solid #cecccc;
    border-right: 1px solid #cecccc;
    transition: 0.2s;
    box-shadow: 0px 2px 2px rgba(223, 218, 215, 0.36);
}

.accordion-head:hover {
    filter: brightness(92%);
    cursor: pointer;
}

.accordion-head-active {
    background-color: #909eac;
    color: #ffffff;
}

.accordion-content {
    padding: 20px;
    display: none;
    background-color: #e9ecef;
    overflow: hidden;
    border-left: 1px solid #cecccc;
    border-right: 1px solid #cecccc;
}

.accordion-top {
    border-top: 1px solid #cecccc;
    /* border-top-left-radius: 8px;
    border-top-right-radius: 8px; */
}

.accordion-bottom {
    border-bottom: 1px solid #cecccc;
    /* border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; */
}

.crc-close-anim {
	-webkit-transform: scale(.7);
	-ms-transform: scale(.7);
    transform: scale(.7);
}

.close {
    background-color: transparent;
    border: none;
}

/* .fa-times {
    color: #B34238;
    font-size: 20px;
    margin: auto;
    padding: 10px;
} */

.search-field {
    background-color: rgb(219, 219, 219);
    padding: 8px 12px;
    width: 12vw;
    border: none;
    border-radius: 16px;
}

.input-field {
    background-color: rgb(219, 219, 219);
    padding: 8px 12px;
    width: 12vw;
    border: none;
}

.radiowrapper {
    display: flex;
    grid-gap: 0px;
}

.radiowrapper label {
    padding: 4px 10px;
    border: 1px solid var(--border);
}

.radiowrapper input {
    visibility:hidden;
    width:0;
}

.radiowrapper label:hover {
    background: var(--secondary);
    cursor: pointer;
}

.radiowrapper input:checked + label {
    background: var(--secondary-bg-color);
}

.radiowrapper .left {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.radiowrapper .right {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

fieldset .radiowrapper label {
    background: var(--white);
}

fieldset .radiowrapper label:hover {
    background: var(--secondary-light);
}

fieldset .radiowrapper input:checked + label {
    background: var(--secondary-light);
    border: 1px solid #b9b9b9;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 10px rgba(67, 97, 238, 0.3);
}

.btn-primary:hover {
    background-color: #3a56d5;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--gray-lighter);
}

.btn-outline:hover {
    background: rgba(67, 97, 238, 0.1);
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
    box-shadow: 0 2px 10px rgba(247, 37, 133, 0.2);
}

.btn-danger:hover {
    background-color: #d74e58;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(247, 37, 133, 0.3);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.btn-terminal {
    background-color: var(--dark);
    color: white;
}

.btn-terminal:hover {
    background-color: #1a1b2e;
    transform: translateY(-1px);
}

.btn-link {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0.4rem;
    border-radius: 50%;
}

.btn-link:hover {
    background-color: rgba(67, 97, 238, 0.1);
}

#sessions-view{
    display:flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 2vh;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#sessions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

.environment-card {
    background: var(--card-bg);
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* backdrop-filter: blur(5px); */
}

.environment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: rgba(67, 97, 238, 0.2);
}

.card-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--medium-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.environment-name {
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.environment-icon {
    color: var(--primary-color);
    font-size: 1rem;
}

.environment-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    gap: 0.5rem;
}

.environment-status a, .environment-status i {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.status-creating {
    background-color: rgba(248, 150, 30, 0.15);
    color: var(--warning-color);
}

.status-active {
    background-color: rgba(76, 201, 240, 0.15);
    color: var(--success-color);
}

.status-active a {
    color: var(--success-color);
}

.status-completed {
    background-color: rgba(108, 117, 125, 0.15);
    color: var(--dark-gray);
}

.status-inprogress {
    background-color: rgba(0, 13, 255, 0.203);
    color: var(--progress-color);
}

.status-inprogress a {
    color: var(--progress-color);
}

.card-body {
    padding: 1.5rem;
}

.environment-info {
    margin-bottom: 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    grid-gap: 10px;
}

.info-label {
    color: var(--dark-gray);
    font-weight: 500;
}

.info-value {
    opacity: 0.8;
}

.environment-link-container {
    margin-top: 1.5rem;
}

.environment-link {
    display: flex;
    align-items: center;
    background-color: #dfdfdf40;
    border-radius: 15px;
    padding: 0.8rem;
    /* border: 1px solid var(--medium-gray); */
    transition: all 0.2s ease;
}

.environment-link:hover {
    border-color: var(--primary-color);
}

.environment-tags{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-gap: 4px;
    width: 60%;
    text-align: right;
}

.environment-tag{
    color: var(--dark-gray);
    /* background-color: var(--gray-lighter); */
    /* border-radius: 4px; */
    padding: 0 2px;
}

.link-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
}

.link-text:hover {
    text-decoration: underline;
}

.copy-btn {
    background: none;
    border: none;
    color: var(--dark-gray);
    cursor: pointer;
    padding: 0.4rem;
    margin-left: 0.5rem;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--primary-color);
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--medium-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: var(--light-gray); */
}

.environment-actions {
    display: flex;
    gap: 0.5rem;
}

.session-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    /* background-color: var(--gray-lighter); */
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dark);
}

.badge i {
    font-size: 0.7rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    grid-column: 1 / -1;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--medium-gray);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.empty-state h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--dark);
}

.empty-state-text {
    color: var(--dark-gray);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.sessions_headers {
    padding-top: 1vw;
    padding-left: 14px;
    padding-right: 14px;
    display:flex;
    flex-direction: row;
    grid-gap: 10px;
    align-items: center;
    justify-content: right;
}

.session_entity {
    margin-top: 0.8vh;
    padding: 10px;
    padding-left: 14px;
    padding-right: 14px;
    display:flex;
    flex-direction: row;
    grid-gap: 1vw;
    align-items: center;
    justify-content: space-between;
    color: #585858;
    background: var(--secondary);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.session_timedeltas {
    margin-right: 10px;
    display:flex;
    flex-direction: row;
    grid-gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.session_timedelta {
    /* width: max-content; */
    width: 8vw;
}

.tooltiptext {
    visibility: hidden;
    background-color: var(--white);
    color: var(--black);
    text-align: center;
    /* border-radius: 8px; */
    padding: 5px;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 2;
}

.form_container {
    display:flex;
    flex-direction: column;
    grid-gap: 30px;
}

.categories {
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

.session_comments{
    grid-gap: 1vh;
    display:flex;
    flex-direction: column;
    align-items: left;
}

.category{
    display:flex;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 20px;
}

fieldset{
    padding: 20px;
    border: none;
    color: #585858;
    background: var(--secondary);
    border-radius: 10px;
}

legend{
    font-size: 24px;
}

.Radio {
    /* display: inline-flex; */
    vertical-align: bottom;
    /* margin-right: 10px; */
}

.test-checkbox{
    margin-right: 4px;
}

#new_session_form .tests {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    grid-gap: 2px;
}

.input-label{
    padding-right: 6px;
    padding-left: 6px;
    width: fit-content;
}

.tests .input-label:hover {
    cursor: pointer;
    text-decoration: underline;
}

.form_actions {
    display:flex;
    flex-direction: row;
    grid-gap: 20px;
    align-items: left;
}

.form_actions_col {
    display:flex;
    flex-direction: column;
    grid-gap: 1vh;
    align-items: left;
}

.form_actions_row{
    display:flex;
    flex-direction: row;
    grid-gap: 10px;
    justify-content: left;
    align-items: center;
}

.dashboard-body__item__line {
	width: 100%;
	height: 1px;

	background-color: var(--gray-lighter);
}

.sb_banner{
    margin-bottom: 30px;
    background: var(--primary);
    color: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 30px;
    grid-gap: 1vh;
    align-items: center;
}

.sb_form_container{
    padding-top: 8rem;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.sb_form{
    min-width: 800px;
    max-width: 800px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    padding: 60px;
    grid-gap: 10px;
	background-color: var(--add-white-bg-color);
	border: 1px solid white;
	border-radius: 25px;
    height: min-content;
}

.form_elements{
    display: flex;
    flex-direction: column;
    grid-gap: 6px;
}

.form_element{
    display: flex;
    flex-direction: column;
}

.form_element span{
    opacity: 70%;
	font-size: 0.875rem;
}

.form_element label{
    opacity: 70%;
	font-size: 0.875rem;
}

.form_elements .text-input{
    width: 100%;
}

.preloader{
    width: 40px;
}

.report_test_description{
    padding-left: 30px;
}

.report_test {
    background-color: #ffffff;
    border: 1px solid #cecccc;
    box-shadow: 0px 2px 2px rgba(223, 218, 215, 0.36);
    padding: 20px;
}

li{
    margin-top: 4px;
}

/* p{
    margin-top: 4px;
} */

.report_test_successful{
    border-right: 5px solid #73BD07;
}

.report_test_failed{
    border-right: 5px solid #bd2207;
}




.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar_group{
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-gap: 60px;
}

.logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.logo span {
    color: var(--text);
}

.logo a:visited {
    color: inherit;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 10px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--primary);
}

.header_navmenu_terminal a {
    text-decoration: none;
    color: var(--text);
}

.cta-buttons {
    display: flex;
    gap: 15px;
}

/* Герой-секция */
.hero {
    padding: 80px 0;
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
}

.hero-image {
    flex: 1;
}

.hero h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.highlight {
    color: var(--primary);
}

.hero p {
    font-size: 18px;
    color: var(--light-text);
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 20px;
    }

    .hero .container {
        flex-direction: column;
    }

    .hero-content, .hero-image {
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .pricing-cards, .features-grid {
        grid-template-columns: 1fr;
    }

    /* Адаптация форм для мобильных устройств */
    .sb_form {
        min-width: auto;
        max-width: 100%;
        width: 100%;
        margin: 0 20px;
        padding: 20px;
    }

    .sb_form_container {
        padding-top: 2rem;
    }

    form {
        min-width: auto;
        max-width: 100%;
        width: 100%;
    }

    .form_element {
        margin-bottom: 15px;
    }

    .form_element input,
    .form_element textarea,
    .form_element select {
        width: 100%;
        box-sizing: border-box;
    }

    .form_actions_row {
        flex-direction: column;
        gap: 10px;
    }

    .form_actions_row button {
        width: 100%;
    }

    /* Адаптация для форм с классом form_elements */
    .form_elements {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .form_elements .form_element {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .form_elements .form_element input,
    .form_elements .form_element textarea,
    .form_elements .form_element select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Адаптация для форм с классом column */
    .column {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .column input,
    .column textarea,
    .column select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Адаптация для элементов управления сессиями */
    .block_h_right {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .block_h_right .form-control {
        width: 100%;
        box-sizing: border-box;
    }

    .block_h_right .button {
        width: 100%;
        text-align: center;
    }

    .radiowrapper {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .radiowrapper label {
        padding: 8px 12px;
        border-radius: 6px;
        background-color: #f5f5f5;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .radiowrapper input[type="radio"]:checked + label {
        background-color: var(--primary);
        color: white;
    }

    /* Адаптация для environment-section__options на мобильных */

    .environment-section__options > li {
        width: 100%;
        padding: 12px 16px;
        border-radius: 8px;
        text-align: center;
        font-size: 14px;
    }

    .environment-section__options > li.active-sessions-filter,
    .environment-section__options > li.active-payment-filter {
        background-color: white;
        border-radius: 8px;
    }

    /* Адаптация для form-row с чекбоксами */
    .form-row {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
        width: auto;
        flex-wrap: nowrap;
    }

    .form-row input[type="checkbox"] {
        width: auto;
        flex-shrink: 0;
    }

    .form-row label {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Стили для авторизованного header */
.navbar.logged-in {
    background: #fff;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .quick-action {
    background: var(--primary);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
  }
  
  .notifications {
    position: relative;
    cursor: pointer;
  }
  
  .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .user-dropdown {
    position: relative;
    cursor: pointer;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 39px;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    width: 200px;
  }
  
  .dropdown-menu a {
    display: block;
    padding: 8px 20px;
    color: var(--text);
  }
  
  .dropdown-menu a:hover {
    background: #f3f4f6;
  }
  
  .user-dropdown:hover .dropdown-menu {
    display: block;
    z-index: 100;
  }

.text-input {
    width: 200px;
}


.empty-list-container {
    width: 1;
    padding: 100px 20px;
    /* background-color: var(--secondary); */
    border-radius: 25px;
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .empty-list-placeholder {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .placeholder-icon {
    color: #ccc;
    margin-bottom: 20px;
  }
  
  .empty-list-placeholder h3 {
    font-size: 1.5rem;
    color: #555;
    margin-bottom: 10px;
  }
  
  .empty-list-placeholder p {
    color: #777;
    margin-bottom: 20px;
  }
  
  .add-button:hover {
    background-color: #45a049;
  }

/* Добавьте эти стили для анимированной версии */
.empty-list-placeholder {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .placeholder-icon svg {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
  }


/* Герой-секция */
.hero {
    padding: 80px 0;
}

.hero .container {
    display: flex;
    align-items: center;
    gap: 50px;
}

.hero-content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-content p {
    font-size: 18px;
    color: var(--gray);
}

.hero-image {
    flex: 1;
}

.hero-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Возможности */
.features {
    padding: 80px 0;
    background-color: var(--light-gray);
}

.features h2 {
    text-align: center;
    margin-bottom: 50px;
    font-size: 36px;
}

.features-grid {
    margin-top: 6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); */
    transition: transform 0.3s ease;
    border: 1px solid var(--del);
}

.feature-card:hover {
    background-color: var(--secondary-dark);
}

.feature-card i {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-weight: 600;
    font-size: 22px;
}

.feature-card span {
    display: block;
}

.fc-dark{
    background-color: var(--secondary-light);
    box-shadow: none;
    border: none;
}

/* CTA */
.cta {
    padding: 60px 0;
    text-align: center;
    background-color: var(--primary);
    color: white;
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    align-items: center;
}

.cta h2 {
    margin-bottom: 20px;
    font-size: 32px;
}

.sb_url{
    cursor: pointer;
    width: max-content;
    touch-action: manipulation;
    padding: 0!important;
    text-decoration: underline;
    font-size: 16px;
    color: var(--gray);
}

/* Кнопки index */
.index .sb-btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 14px;
}

.index .sb-btn-secondary {
    background-color: var(--dark);
    color: white;
}

.test_part {
    grid-gap: 10px;
    display:flex;
    flex-direction: column;
    align-items: left;
    color: #585858;
    /* border-radius: 10px; */
    transition: transform 0.3s ease;
}

.test_part textarea {
    color: inherit;
    resize: none;
}

.test_part span {
    opacity: 70%;
    font-size: 0.875rem;
}

#render_preview_btn {
    position: absolute;
    bottom: -20px;
    right: 10px;
    z-index: 100;
}

#description_fields {
    display: flex;
    flex-direction: row;
    grid-gap: 20px;
    position: relative;
}

.test_parameters {
    display:flex;
    flex-direction: column;
    justify-content: left;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.test_parameters .row_separate {
    padding: 8px;
    padding-left: 15px;
    background-color: var(--primary-bg-color);
    border-radius: 100px;
}

.test_parameters > *:not(:first-child):not(:last-child) {
    border-radius: 0px;
    border-bottom: none;
}

.test_parameters div:first-child {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.test_parameters textarea:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.test_parameters *:last-child:first-child {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.test_parameters_predefined {
    grid-gap: 8px;
    display:flex;
    flex-direction: column;
    justify-content: left;
    /* border: 1px solid #e1e1e1; */
}

.appear{
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.row_separate {
    grid-gap: 1vh;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* .row_separate a{
    color: green;
} */

.variable_container {
    /* grid-gap: 10px; */
    display:flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.variable_container .test-variable-field:not(:first-child):not(:last-child) {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 1px;
    border-color: #e1e1e1;
    border-style: solid;
}

.variable_container .test-variable-field:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-color: #e1e1e1;
    border-style: solid;
}

.variable_container .test-variable-field:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 1px;
    border-color: #e1e1e1;
    border-style: solid;
}

.test-variable-field .sb-btn-del {
    position: absolute;
    right: 3px;
    z-index: 100;
    background-color: transparent;
}

.test-variable-field .sb-btn-del:hover {
    background-color: var(--red);
    color: white;
}

.test_parameters.invisible, .variable_container.invisible{
    opacity: 0;
    transform: translateX(20px);
}

.test_parameters.visible, .variable_container.visible{
    opacity: 1;
    transform: translateX(0);
}

.test-variable-field{
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
    position: relative;
    background-color: field;
}

.test-variable-field textarea{
    border: none;
    min-width: 200px;
    background: none;
}

.test-variable-field .copy-btn {
    position: absolute;
    right: 5px;
    z-index: 100;
}

#variables_header {
    display: flex;
    flex-direction: row;
    /* grid-gap: 10px; */
}

#variables_header a {
    padding-left: 10px;
    min-width: 200px;
}

.test-check, .test-preparation{
    border-radius: 100px;
    position: relative;
}

.test-preparation .sb-btn-del {
    background-color: transparent;
}

.test-preparation .sb-btn-del:hover {
    background-color: var(--red);
    color: white;
}

.elements-container{
    display:flex;
    flex-direction: column;
    grid-gap: 20px;
    align-items: left;
    color: #585858;
    transition: transform 0.3s ease;
}

#variables .elements-container{
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(270px, 540px)); */
    grid-gap: 8px;
}


/* Последняя активность */
.recent-activity {
    margin-top: 6rem;
    margin-bottom: 6rem;
    background-color: var(--secondary);
    display:flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1154px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
}

.recent-activity h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    color: var(--dark);
}

.activity-list {
    list-style: none;
    /* padding: 1.5rem; */
}

.activity-list li {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
}

.activity-list li:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.activity-time {
    font-size: 0.8rem;
    color: var(--gray-color);
    margin-bottom: 0.3rem;
}

.activity-text {
    font-size: 0.95rem;
}

.view-all {
    display: inline-block;
    margin-top: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.activity-container{
    padding-top: 6rem;
    display:flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Table */
table {
    border-collapse: collapse;
    /* border: 2px solid rgb(140 140 140); */
    font-family: sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    border-radius: 10px;
  }
  
  thead,
  tfoot {
    background-color: rgb(228 240 245);
  }
  
  th {
    padding: 8px 10px;
  }
  
  td:last-of-type {
    text-align: center;
  }
  
  tbody > tr:nth-of-type(even) {
    background-color: rgb(237 238 242);
  }
  
  tfoot th {
    text-align: right;
  }
  
  tfoot td {
    font-weight: bold;
  }


  .form-control{
    color: inherit;
    padding: 8px 10px;
    border: 1px solid #e1e1e1;
    /* border: none; */
    resize: none;
    border-radius: 10px;
    overflow-y: hidden;
  }







#references-view{
    display:flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 2vh;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#references{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

#create_reference {
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

.reference-card{
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.reference-name{
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reference-info{
    margin-bottom: 1.5rem;
}


/* Как это работает */
.how-it-works {
    padding: 60px 0;
    text-align: center;
}

.how-it-works h2 {
    margin-bottom: 40px;
    font-size: 2rem;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.step {
    flex: 1 1 200px;
    padding: 20px;
    background: var(--light);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-weight: bold;
}

/* Преимущества */
.benefits {
    padding: 60px 0;
    background: var(--gray-lighter);
}

.benefits h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.benefit {
    flex: 1 1 250px;
    padding: 25px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.benefit i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.account-container{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  grid-gap: 6px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input, 
.form-group select {
  width: 100%;
}

.form-group input:focus, 
.form-group select:focus {
  border-color: #4a6cf7;
  outline: none;
}

.form-group input[readonly] {
  background-color: #f9f9f9;
  color: #666;
}

.verified-badge {
  color: #28a745;
  font-size: 12px;
  margin-left: 5px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-start;
}

.sb-btn-action{
    display: block;
    text-align: center;
    /* padding: 12px; */
    /* border-radius: 5px; */
    text-decoration: none;
    /* font-weight: bold; */
    width: 100%;
    /* background-color: var(--primary);
    color: white;
    border: none;
    font-size: 16px; */
}


/* Стили для эмодзи-рейтинга */
.emoji-rating {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.emoji-rating input[type="radio"] {
    display: none; /* Скрываем стандартные radio-кнопки */
}

.emoji {
    font-size: 32px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
    transform: scale(1);
}

.emoji:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.emoji-rating input[type="radio"]:checked + .emoji {
    opacity: 1;
    transform: scale(1.2);
}

#notify {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

.sb-notification{
    font-size: var(--font-size);
    background-color: var(--gray-lighter);
    color: var(--text);
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.sb-notification-error{
    background-color: var(--danger-color);
}

#users_feedback .rating{
    display: flex;
    flex-direction: row;
    align-items: center;
}

#support_requests .high{
    background-color: red;
}

#support_requests .medium{
    background-color: orange;
}

#support_requests .low{
    background-color: yellow;
}

#node-create{
    margin-top: 6rem;
    min-width: 400px;
    max-width: 400px;
}

#nodes-list{
    display: grid;
    grid-template-columns: repeat(13, minmax(50px, 1fr));
    gap: 20px;
}

#nodes-list form{
    display: contents;
}

#nodes-list .form-control{
    width: 100%;
}

#nodes-list a{
    display: flex;
    justify-content: center;
    align-items: center;
}

textarea .unselectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

textarea:read-only {
  /* border: 0; */
  box-shadow: none;
  /* background-color: var(--grey-lighter); */
  background-color: none;
  outline: none;
}

.transactions-container{
    padding-top: 6rem;
    display:flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    min-width: 800px;
    max-width: 800px;
    margin: 0 auto;
}

.recent-transactions {
    margin-top: 6rem;
    margin-bottom: 6rem;
    background-color: var(--secondary);
    display:flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1154px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
}

.transactions-list {
    list-style: none;
    /* padding: 1.5rem; */
    /* max-width: 800px; */
}

.transactions-list li {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.transactions-list li:last-child {
    border-bottom: none;
}

.transaction-header{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.transaction-body{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.transaction-time {
    font-size: 0.8rem;
    color: var(--gray-color);
    margin-bottom: 0.3rem;
}

.transaction-text {
    font-size: 0.95rem;
}

input[type="number"] {
    flex: 1;
    color: inherit;
    padding: 8px 10px;
    border: 1px solid #e1e1e1;
    /* border: none; */
    resize: none;
    border-radius: 8px;
    overflow-y: hidden;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"] {
    flex: 1;
    color: inherit;
    padding: 10px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 25px;
    overflow-y: hidden;
}


/* Стили для модального окна */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.confirmation-modal {
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    position: relative;
    background: var(--secondary);
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.modal-title {
    margin-top: 0;
    color: #333;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex: 1;
    width: 100%
}

.modal-buttons .sb-btn {
    flex: 1;
}


.cookie-consent-banner {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 350px;
    background: white;
    color: #2d3748;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    border: 1px solid #e2e8f0;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-content {
    padding: 20px;
    position: relative;
}

.cookie-content h3 {
    margin-bottom: 12px;
    padding-right: 20px;
}

.cookie-content p {
    margin-bottom: 20px;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 15px;
    width: 100%;
    flex: 1;
}

.cookie-buttons .sb-btn{
    flex: 1;
}

.cookie-footer {
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
    text-align: center;
}

.cookie-footer a {
    text-decoration: none;
    font-size: 13px;
}

.cookie-footer a:hover {
    text-decoration: underline;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .cookie-consent-banner {
        width: calc(100% - 40px);
        right: 20px;
        left: 20px;
        bottom: 10px;
    }
    
    .cookie-buttons {
        flex-direction: column;
    }
}


.doc-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

.toc {
    width: 250px;
    padding-right: 30px;
    position: sticky;
    top: 20px;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
}
.doc-content {
    flex: 1;
    padding: 20px;
    background: #fff;
    border-left: 1px solid #eee;
}
.toc ul {
    list-style: none;
    padding: 0;
}
.toc li {
    margin-bottom: 10px;
}
.toc a {
    text-decoration: none;
    color: #0066cc;
}
.toc a:hover {
    text-decoration: underline;
}
.doc-content h1 {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
.doc-content h2 {
    color: #34495e;
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}
.doc-content p {
    margin-bottom: 15px;
}
.mark {
    background-color: #ffffcc;
    padding: 2px;
}
@media (max-width: 768px) {
    .doc-container {
        flex-direction: column;
    }
    .toc {
        width: 100%;
        position: relative;
        margin-bottom: 20px;
    }
}

.catalog-test{
    display: flex;
    flex-direction: row;
    grid-gap: 2px;
}

.catalog-test li{
    margin-left: 16px;
}

.catalog-test-buttons{
    display: flex;
    flex-direction: row;
    /* grid-gap: 4px; */
}

#test_editor {
    flex: 1;
}

#test_editor_container {
    display: flex;
    flex-direction: row;
}

#test_editor_helper {
    flex: 1;
}

.environment-section__options {
	display: flex;
	align-items: center;

	position: relative;

	padding: 10px 25px;

	list-style: none;
	background-color: var(--border-color);
	border-radius: 100px;
    grid-gap: 10px;
    width: min-content;
}

.environment-section__options > li {

	display: flex;
	justify-content: center;

	position: relative;
	z-index: 2;

	padding: 10px 0;

	cursor: pointer;

	font-weight: 500;

	transition: all 0.2s;
}

.environment-section__options .active-sessions-filter {
	background-color: white;
	border-radius: 100px;
}

#new_session_form{
    max-width: 100%;
}





/* Mainsoft */








a,
button {
	transition: all 0.2s;
}

a:hover,
button:hover {
	opacity: 70%;
}

.button {
	padding: 12px 20px;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	color: white;
	background-color: var(--accent-color);
	font-size: 0.9rem;
    width: max-content;
}

header {
	width: 100%;

	display: flex;
	justify-content: center;

	background-color: var(--add-bg-color);
	padding: 10px 0;
}

.header__wrapper {
	width: 80%;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
}

.header__link {
	justify-self: start;

	color: var(--primary-text-color);
	font-size: 0.875rem;
	text-decoration: none;
}

.header__logo {
	justify-self: center;

	font-size: 1.5rem;
	font-weight: 500;
}

.header__logo > span {
	color: var(--accent-color);
}

.header__sign-button {
	justify-self: end;

	background-color: var(--add-dark-bg-color);

	font-size: 0.875rem;
}

.main {
	flex: 1;
}

.footer {
	display: flex;
	justify-content: center;

	padding: 30px 10px;
}

.footer > span {
	opacity: 60%;

	color: var(--primary-text-color);
	font-size: 1.125rem;
}

.reg-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 150px;
	padding-bottom: 120px;
}

.reg-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;

	position: relative;
	overflow: hidden;
	padding: 60px 0;

	background-color: var(--add-white-bg-color);
	border-radius: 25px;
}

.reg-section__logo {
	justify-self: center;

	font-size: 1.5rem;
	font-weight: 500;
}

.reg-section__logo > span {
	color: var(--accent-color);
}

.reg-section__wrapper > h2 {
	margin-top: 30px;

	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
}

.reg-section__wrapper > p {
	opacity: 60%;

	font-size: 1.125rem;
}

.reg-section__wrapper > a {
	margin-top: 30px;

	background-color: var(--accent-color);

	font-size: 1rem;
}

.reg-section__top-circle,
.reg-section__bottom-circle {
	width: 700px;
	height: 700px;

	position: absolute;
}

.reg-section__top-circle > img,
.reg-section__bottom-circle > img {
	width: 100%;
	height: 100%;
}

.reg-section__top-circle {
	top: -300px;
	left: -300px;
}

.reg-section__bottom-circle {
	bottom: -300px;
	right: -350px;
}

.hero-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 30px;
}

.hero-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
}

.hero-section__wrapper > h1 {
	color: var(--accent-color);
	font-family: 'Monument';
	font-size: 9.25rem;
	font-weight: 400;
	line-height: 100%;
}

.hero-section__wrapper > p {
	margin-top: 15px;

	text-align: center;
	text-transform: uppercase;
	color: var(--primary-text-color);
	font-size: 1.75rem;
	font-weight: 500;
}

.hero-section__wrapper > p > span {
	font-weight: 400;
	font-style: italic;
}

.hero-section__wrapper > button {
	background-color: var(--accent-color);

	font-size: 1rem;
}

.hero-section__wrapper > img {
	width: 100%;

	margin-top: 25px;
}

.steps-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 150px;
}

.steps-section > h2 {
	display: none;
}

.steps-section__list {
	width: 80%;

	display: flex;

	border-top: 1px solid var(--border-color);

	list-style: none;
}

.steps-section__list__item {
	position: relative;
}

.steps-section__list__item > span {
	position: absolute;
	bottom: 85%;
	left: 0;
	z-index: 1;

	opacity: 10%;

	color: var(--primary-text-color);
	font-size: 5.25rem;
	font-family: 'Monument', sans-serif;
	line-height: 100%;
}

.steps-section__item__info {
	display: flex;
	flex-direction: column;
	gap: 10px;

	position: relative;
	z-index: 2;

	padding: 20px;

	border-right: 1px solid var(--border-color);
	background-color: var(--primary-bg-color);
}

.steps-section__list__item:first-child > .steps-section__item__info {
	padding-left: 0;
}

.steps-section__list__item:last-child > .steps-section__item__info {
	border-right: 0;
}

.steps-section__item__info > h3 {
	font-size: 1.125rem;
	font-weight: 500;
}

.steps-section__item__info > p {
	font-size: 0.875rem;
	line-height: 140%;
}

.info-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 150px;
}

.info-section > h2 {
	display: none;
}

.info-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	gap: 150px;

	position: relative;
}

.info-section__wrapper h3 {
	text-transform: uppercase;
	font-size: 1.125rem;
	font-weight: 500;
}

.info-section__top {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}

.info-section__top > h3 {
	grid-column: span 2;
}

.info-section__about-text {
	width: 33%;

	display: flex;
	flex-direction: column;
	gap: 20px;

	grid-column: span 3;

	padding: 0 10px;
}

.info-section__about-text > p:first-child {
	text-transform: uppercase;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 140%;
}

.info-section__about-text > p:last-child {
	line-height: 140%;
}

.info-section__about-text > p:first-child > span {
	color: var(--accent-color);
}

.info-section__bottom {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.info-section__advs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;

	list-style: none;
}

.info-section__advs > li {
	height: 80px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 20px 15px;

	background-color: white;
	border-radius: 15px;

	text-align: center;
	line-height: 140%;
}

.info-section__two-rows-block {
	grid-row: span 2;
}

.info-section__two-rows-block:nth-child(1),
.info-section__two-rows-block:nth-child(3) {
	align-self: end;
}

.info-section__bg {
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
}

.info-section__bg > div {
	width: 1px;

	position: absolute;
}

.info-section__bg > div:nth-child(1) {
	height: 38%;

	top: 40px;
	left: 0;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(2) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;

	top: 40px;
	left: 6.66%;
}

.info-section__bg > div:nth-child(2) > div {
	height: 76px;
	width: 1px;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(2) > span {
	rotate: 270deg;
	opacity: 20%;

	font-size: 0.75rem;
}

.info-section__bg > div:nth-child(3) {
	height: 19%;

	top: 40px;
	left: 13.33%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(4) {
	height: 100%;

	top: 0;
	left: 19.6%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(5) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;

	top: 0;
	left: 26.3%;
}

.info-section__bg > div:nth-child(5) > div {
	height: 154px;
	width: 1px;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(5) > span {
	rotate: 270deg;
	opacity: 20%;

	font-size: 0.75rem;
}

.info-section__bg > div:nth-child(6) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;

	top: 0;
	left: 32.66%;
}

.info-section__bg > div:nth-child(6) > div {
	height: 129px;
	width: 1px;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(6) > span {
	rotate: 270deg;
	opacity: 20%;

	font-size: 0.75rem;
}

.info-section__bg > div:nth-child(7) {
	height: 100%;

	top: 0;
	left: 39.83%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(8) {
	height: 100%;

	top: 0;
	right: 39.83%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(9) {
	height: 38%;

	top: 0;
	right: 32.66%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(10) {
	height: 25%;

	top: 0;
	right: 26.3%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(11) {
	height: 100%;

	top: 0;
	right: 19.6%;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(12) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;

	top: 40px;
	right: 13.33%;
}

.info-section__bg > div:nth-child(12) > div {
	height: 154px;
	width: 1px;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(12) > span {
	rotate: 270deg;
	opacity: 20%;

	font-size: 0.75rem;
}

.info-section__bg > div:nth-child(13) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;

	top: 0;
	right: 6.66%;
}

.info-section__bg > div:nth-child(13) > div {
	height: 129px;
	width: 1px;

	background-color: var(--border-color);
}

.info-section__bg > div:nth-child(13) > span {
	rotate: 270deg;
	opacity: 20%;

	font-size: 0.75rem;
}

/* Партнерам */

.details-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 60px;
}

.details-section > h1 {
	display: none;
}

.details-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	gap: 30px;
}

.details-section__top {
	display: flex;
	justify-content: space-between;
}

.details-section__top > h2 {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 500;
}

.details-section__top > p {
	max-width: 700px;

	font-size: 0.875rem;
}

.details-section__list {
	display: flex;
	gap: 20px;

	list-style: none;
}

.details-section__list__item {
	flex-basis: calc(25% - 5px);

	display: flex;
	flex-direction: column;
	gap: 10px;

	position: relative;
	overflow: hidden;

	padding: 20px 20px 250px 20px;

	background-color: var(--accent-color);
	border-radius: 25px;

	color: white;
}

.details-section__list__item > p {
	font-size: 0.875rem;
	line-height: 140%;
}

.details-section__item-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.details-section__item-heading > h3 {
	font-size: 1.125rem;
	font-weight: 500;
}

.details-section__item-heading > span {
	font-family: 'Monument', sans-serif;
	font-size: 1.125rem;
}

.details-section__list__item > img {
	width: 100%;

	position: absolute;
	left: 0;
	bottom: 0;

	object-fit: cover;
}

.advs-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 150px;
}

.advs-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	gap: 30px;
}

.advs-section__top {
	display: flex;
	justify-content: space-between;
}

.advs-section__top > h2 {
	text-transform: uppercase;
	font-size: 1rem;
	font-weight: 500;
}

.advs-section__top > p {
	max-width: 700px;

	font-size: 0.875rem;
}

.advs-section__list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 0;

	list-style: none;
}

.advs-section__list__item {
	width: 310px;
	height: 310px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;

	padding: 20px;

	border: 1px solid var(--primary-text-color);
	border-radius: 50%;
}

.advs-section__list__item > h3 {
	text-align: center;
	color: var(--accent-color);
}

.advs-section__list__item > h3 > span {
	font-family: 'Monument', sans-serif;
	font-size: 3.25rem;
	font-weight: 400;
}

.advs-section__list__item > p {
	text-align: center;
	font-size: 0.875rem;
}

/* dashboard-styles */

.d-page {
	width: 100%;

	display: flex;
	gap: 20px;

	position: relative;

	padding: 10px;
}

.aside-dashboard {
	width: 220px;
	height: calc(100vh - 20px);

	display: flex;
	flex-direction: column;
	gap: 60px;

	position: sticky;
	top: 10px;

	padding: 30px 10px;

	background-color: white;
	border-radius: 25px;
}

.aside__logo {
	font-size: 1.5rem;
	font-weight: 500;
}

.aside__logo > span {
	color: var(--accent-color);
}

.aside__mid {
	flex: 1;

	display: flex;
	flex-direction: column;
	gap: 30px;
}

.aside__mid > span {
	opacity: 0.7;

	font-size: 0.875rem;
}

.aside__nav {
	width: 100%;
}

.aside__nav > ul {
	display: flex;
	flex-direction: column;
	gap: 20px;

	list-style: none;
}

.aside__nav > ul > li {
	display: flex;
	align-items: center;
	gap: 10px;

	font-weight: 500;
}

.active-link,
.active-link a {
	color: var(--accent-color);
}

.aside__bottom {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 20px;
}

.aside__bottom > span {
	opacity: 0.7;

	font-size: 0.875rem;
}

.aside__bottom > a {
	display: flex;
	align-items: center;
	gap: 10px;

	background-color: transparent;
	border: 0;
	cursor: pointer;

	font-size: 1rem;
	font-weight: 500;
}

.aside__bottom > a:last-child {
	color: var(--red);
}

.main-dashboard {
	width: 100%;

	min-height: calc(100vh - 20px);
}

.mobile-nav {
	width: 90%;

	display: none;

	position: fixed;
	bottom: 20px;
	left: 50%;
	translate: -50% 0;
	z-index: 10;

	background-color: white;
	border-radius: 15px;
	box-shadow: 0px 4px 25px 0px #00000026;
}

.mobile-nav > ul {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 20px;

	list-style: none;
}

.dashboard-mobile-header {
	width: 100%;

	display: none;
	align-items: center;
	justify-content: space-between;

	padding: 20px;

	background-color: var(--add-bg-color);
}

.burger-button {
	width: 42px;
	min-width: 42px;
	height: 42px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;

	position: relative;

	padding: 10px 0;

	background-color: white;
	border-radius: 50%;
	border: 0;
}

.burger-button > span {
	width: 50%;
	height: 1px;

	background-color: black;

	transition: all 0.3s;
}

.burger-button-close > span:nth-child(2) {
	opacity: 0;
}

.burger-button-close > span:nth-child(1),
.burger-button-close > span:nth-child(3) {
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: 4;
}

.burger-button-close > span:nth-child(1) {
	rotate: 45deg;
}

.burger-button-close > span:nth-child(3) {
	rotate: -45deg;
}

.burger-menu {
	width: 100vw;
	height: calc(100vh - 80px);

	display: flex;
	flex-direction: column;

	position: fixed;
	top: 82px;
	left: 0;
	z-index: 11;

	padding: 30px 20px;

	background-color: white;

	translate: 0 100vh;
	opacity: 0;

	transition: all 0.3s ease;
}

.burger-opened {
	translate: 0 0;
	opacity: 1;
}

.prices-section {
	width: 100%;

	display: flex;
	justify-content: center;

	padding-top: 60px;
}

.prices-section__wrapper {
	width: 80%;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.prices-section__wrapper > h1 {
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
	line-height: 140%;
}

.selections-radio-wrapper {
	display: flex;
	align-items: center;

	position: relative;

	padding: 5px 5px;

	list-style: none;
	background-color: var(--border-color);
	border-radius: 100px;
}

/* .prices-section__active-option {
	width: 50%;
	height: calc(100% - 10px);

	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;

	background-color: white;
	border-radius: 100px;
} */

.selections-radio-wrapper > input {
    visibility:hidden;
    width:0;
}

.selections-radio-wrapper > label {
    min-width: 115px;

	display: flex;
	justify-content: center;

	position: relative;
	z-index: 2;

	padding: 10px 18px;

	cursor: pointer;

	font-weight: 500;

	transition: all 0.4s;
}

.selections-radio-wrapper > input:checked + label {
	background-color: white;
	border-radius: 100px;
}

#search-filter {
    margin-top: 30px;
}

.prices-section__list {
	width: 100%;

	display: flex;

	overflow: hidden;

	list-style: none;
	border-radius: 25px;
}

.prices-section__list__item {
	flex-basis: 33.3333%;

	display: flex;
	flex-direction: column;
	gap: 10px;

	position: relative;
	overflow: hidden;

	padding: 40px 30px;

	background-color: white;
}

.prices-section__list__item:nth-child(2) {
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
}

.prices-section__list__item > h2 {
	font-size: 1.5rem;
	font-weight: 700;
}

.prices-section__list__item:first-child > h2 {
	color: var(--accent-color);
}

.prices-section__item__price {
	display: flex;
	align-items: center;
	gap: 10px;
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

.prices-section__item__price.hidden {
    opacity: 0;
    transform: translateY(-10px);
}

.prices-section__item__price.showing {
    opacity: 1;
    transform: translateY(0);
}

.prices-section__item__price > span {
	font-size: 2rem;
	font-weight: 500;
}

.prices-section__item__price > p {
	opacity: 60%;

	font-weight: 500;
}

.prices-section__list__item > button {

	background-color: var(--accent-color);
}

.prices-section__list__item > p {
	margin-top: 10px;

	opacity: 60%;

	font-size: 0.875rem;
	font-weight: 500;
}

.prices-section__tech-list {
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin-top: 20px;

	list-style: none;
}

.prices-section__tech-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.prices-section__tech-list__item > span {
	font-size: 0.875rem;
	font-weight: 500;
}

.prices-section__item__left-circle,
.prices-section__item__right-circle {
	width: 500px;
	height: 100%;

	position: absolute;
	z-index: 1;
}

.prices-section__item__left-circle {
	bottom: 0;
	left: -20%;
}

.prices-section__item__right-circle {
	bottom: 90px;
	right: -20%;
}

.prices-section__list__item
	> *:not(.prices-section__item__left-circle):not(
		.prices-section__item__right-circle
	) {
	z-index: 2;
}

.price_yearly {
    display: none;
}

.payment_till {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 6px 18px;
    color: #585656;
	border: 3px solid var(--accent-color);
	border-radius: 100px;
    width: max-content;
    font-size: 0.9rem;
    font-weight: 500;
}

.dashboard-body__stats {
	display: flex;
	align-items: stretch;
	gap: 15px;

	list-style: none;
}

.dashboard-body__stats__item {
	flex-basis: calc(25% - 11px);
	flex-grow: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 30px;

	border-radius: 25px;
	border: 1px solid #fff;
	background: linear-gradient(
			0deg,
			rgba(223, 223, 223, 0.25) 0%,
			rgba(223, 223, 223, 0.25) 100%
		),
		#f7f7fa;
}

.dashboard-body__stats__item > h2 {
	text-align: center;
	font-size: 1.125rem;
	font-weight: 500;
}

.dashboard-body__stats__item > div {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-body__stats__item > div > span {
	font-size: 2rem;
	font-weight: 800;
	color: var(--accent-color);
}

.dashboard-body__list__item {
	/* flex-basis: calc(25% - 12px); */

	display: flex;
	flex-direction: column;
	gap: 10px;

	padding: 20px;

	background-color: white;
	border-radius: 25px;
}

.dashboard-body__list__item > h2 {
	font-size: 1rem;
	font-weight: 500;
}

.not-found-message {
	font-size: 1.125rem;
	font-weight: 400;
}

@media (max-width: 1480px) {
	.prices-section__wrapper {
		width: 100%;

		padding: 0 20px;
	}
}

@media (max-width: 1290px) {
	.d-page {
		flex-direction: column;

		padding: 0;
	}

	.aside-dashboard {
		display: none;
	}

	.mobile-nav {
		display: block;
	}

	.dashboard-mobile-header {
		display: flex;
	}

	.main-dashboard {
		padding-bottom: 100px;
	}
}

@media (max-width: 1250px) {
	.header__wrapper {
		width: 100%;

		grid-template-columns: 1fr auto auto;
		gap: 20px;

		padding: 0 20px;
	}

	.header__wrapper > a:nth-child(1) {
		order: 2;
		justify-self: start;
	}

	.header__wrapper > a:nth-child(2) {
		order: 1;
	}

	.header__wrapper > a:nth-child(3) {
		order: 3;
	}

	.reg-section {
		padding: 120px 20px;
	}

	.reg-section__wrapper {
		width: 100%;

		padding: 60px 10px;
	}
}

@media (max-width: 1250px) {
	.hero-section__wrapper {
		width: 100%;

		gap: 20px;

		padding: 0 20px;
	}

	.hero-section__wrapper > h1 {
		font-size: 2.625rem;
	}

	.hero-section__wrapper > p {
		margin-top: 0;

		font-size: 1.125rem;
	}

	.steps-section {
		padding-top: 60px;
	}

	.info-section {
		padding-top: 120px;
	}

	.steps-section__list,
	.info-section__wrapper {
		width: 100%;

		padding: 0 20px;
	}

	.steps-section__list {
		flex-wrap: wrap;
		gap: 40px;

		border: 0;
	}

	.steps-section__list__item {
		width: 100%;

		z-index: 1;
	}

	.steps-section__list__item > span {
		position: static;
	}

	.steps-section__item__info {
		padding: 0;

		border: 0;
	}

	.info-section__wrapper {
		gap: 120px;
	}

	.info-section__bg {
		display: none;
	}

	.info-section__top,
	.info-section__bottom {
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	.info-section__about-text {
		width: 100%;

		padding: 0;
	}

	.info-section__advs {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
}

@media (max-width: 1250px) {
	.details-section__wrapper,
	.advs-section__wrapper {
		width: 100%;

		padding: 0 20px;
	}

	.details-section__top,
	.advs-section__top {
		flex-direction: column;
		gap: 10px;
	}

	.details-section__list {
		flex-wrap: wrap;
	}

	.details-section__list__item {
		flex-basis: calc(50% - 10px);
	}

	.details-section__list__item > img {
		width: 70%;
	}

	.advs-section {
		padding-top: 120px;
	}
}

@media (max-width: 1050px) {
	.prices-section__list {
		flex-wrap: wrap;
		gap: 30px;
	}

	.prices-section__list__item {
		flex-basis: 100%;

		border-radius: 25px;
		border: 0;
	}
}

@media (max-width: 800px) {
	.details-section__list__item > img {
		width: 100%;
	}
}

@media (max-width: 750px) {
	.info-section__advs > li {
		width: 100%;
	}
}

@media (max-width: 659.5px) {
	.advs-section__list {
		justify-content: center;
	}
}

@media (max-width: 500px) {
	.details-section__list__item {
		flex-basis: 100%;
	}

	/* Дополнительная адаптация форм для очень маленьких экранов */
	.sb_form {
		margin: 0 10px;
		padding: 15px;
	}

	.sb_form_container {
		padding-top: 1rem;
	}

	.form_element input,
	.form_element textarea,
	.form_element select {
		font-size: 16px; /* Предотвращает зум на iOS */
	}

	.form_actions_row {
		gap: 8px;
	}

	/* Дополнительная адаптация для form_elements и column */
	.form_elements {
		gap: 12px;
	}

	.form_elements .form_element {
		gap: 4px;
	}

	.column {
		gap: 12px;
	}

	/* Дополнительная адаптация для управления сессиями на очень маленьких экранах */
	.block_h_right {
		gap: 10px;
	}

	.radiowrapper {
		gap: 8px;
	}

	.radiowrapper label {
		padding: 6px 10px;
		font-size: 14px;
	}

	.dashboard-body__item__link a {
		font-size: 11px;
	}

	.dashboard-body__item__controls > a,
	.dashboard-body__item__controls > button {
		padding: 8px 12px;
		font-size: 14px;
	}

	.dashboard-body__item__info span {
		font-size: 13px;
	}

	.dashboard-body__item__tech {
		font-size: 12px;
	}

	.dashboard-body__item__time-info li {
		font-size: 12px;
	}
}

/* Специальная адаптация для очень узких экранов (до 400px) */
@media (max-width: 400px) {

	/* Дополнительная оптимизация для form-row на очень маленьких экранах */
	.form-row {
		gap: 6px;
	}

	.form-row label {
		font-size: 14px;
	}
}

.dashboard {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dashboard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-top > a:first-child {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 10px;

	background-color: var(--secondary-bg-color);
	border-radius: 100px;
	border: 1px solid white;
	cursor: pointer;

	font-size: 1rem;
	font-weight: 500;
	color: var(--accent-color);
}

.dashboard__search {
	width: 300px;

	display: flex;
	align-items: center;
	gap: 10px;

	padding: 14px;

	background-color: var(--add-white-bg-color);
	border-radius: 100px;
}

.dashboard__search > input {
	width: 100%;

	background-color: transparent;
	border: 0;

	font-size: 0.875rem;
}

.dashboard__search > input:focus {
	outline: 0;
}

.dashboard-top__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-top__right > a {
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

.dashboard-top__right #pricesButton {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 10px 20px;

	background-color: #684fe626;
	border-radius: 100px;
	border: 1px solid white;

	font-size: 1rem;
	font-weight: 500;
	color: var(--accent-color);
}

.dashboard-top__right #notificationButton {
	width: 42px;
	height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--add-white-bg-color);
	border: 1px solid white;
	border-radius: 50%;
}

.dashboard-profile-wrapper {
	position: relative;
	display: inline-block;
}

.dashboard-profile {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-profile img{
	width: 63px;
}

.dashboard-profile-wrapper:hover > .profile-hovered {
	opacity: 1;
	visibility: visible;
}

.profile-hovered,
.burger-profile {
	display: flex;
	flex-direction: column;
	gap: 10px;

	background-color: white;
	border-radius: 15px;

	transition: all 0.2s;
}

.profile-hovered {
	align-items: center;

	position: absolute;
	top: 0;
	right: 0;

	padding: 15px;

	opacity: 0;
	visibility: hidden;
}

.profile-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.profile-info > img {
	width: 42px;
	height: 42px;
}

.dashboard-profile__links {
	width: 100%;

	display: flex;
	flex-direction: column;

	list-style: none;
}

.dashboard-profile__links > li {
	width: 100%;

	padding: 10px 5px;
}

.dashboard-profile__links > li {
	border-top: 1px solid #dfdfdf;
	/* border-bottom: 1px solid #dfdfdf; */
}

.dashboard-profile__name {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dashboard-profile__name > span {
	font-weight: 500;
}

.dashboard-profile__name > span:last-child {
	opacity: 60%;

	font-size: 0.875rem;
}

.dashboard-body {
	width: 100%;

	display: flex;
	flex-direction: column;
	gap: 40px;

	padding: 30px;

	background-color: var(--add-white-bg-color);
	border: 1px solid white;
	border-radius: 25px;
}

.dashboard-body__top {
	display: flex;
	align-items: start;
	justify-content: space-between;
}

.dashboard-body__heading > h1 {
	font-size: 2.125rem;
	font-weight: 400;
}

.dashboard-body__heading > span {
	opacity: 70%;
	font-size: 0.875rem;
}

.dashboard-body__top > a {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 20px;

	background-color: var(--accent-color);
	border: 0;
	border-radius: 100px;
	cursor: pointer;

	font-size: 1rem;
	font-weight: 500;
	color: white;
}

.dashboard-body__list {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;

	list-style: none;
}

.dashboard-body__item__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-body__item__avatar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-body__item__avatar img{
	width: 63px;
}

.dashboard-body__item__info {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dashboard-body__item__info > span:first-child {
	font-weight: 500;
}

.dashboard-body__item__info > span:last-child {
	font-size: 0.875rem;
	color: var(--accent-color);
}

.dashboard-body__item__top > span {
	height: 30px;

	display: flex;
	align-items: center;

	padding: 5px 10px;

	border-radius: 100px;
}

.dashboard-body__item__top > span > svg {
	padding-right: 5px;
}

.s-creating {
	background-color: #f7f7f7;
}

.s-active,
.s-completed {
	background-color: #1eaf62;

	color: white;
}

.s-processing {
	background-color: var(--yellow);
}

.s-checking {
	background-color: #4b4b4b;

	color: white;
}

.s-off {
	background-color: #b81e1e;

	color: white;
}

.s-cancel,
.s-error {
	background-color: #ff3b3b;

	color: white;
}

.dashboard-body__item__mid {
	flex: 1;

	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dashboard-body__item__tech {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	padding: 5px 10px;

	background-color: #dfdfdf40;
	border-radius: 10px;

	font-size: 0.875rem;
	font-weight: 500;
}

.dashboard-body__item__time-info {
	display: flex;
	flex-direction: column;
	gap: 10px;

	list-style: none;
}

.dashboard-body__item__time-info > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-body__item__time-info > li > span {
	font-size: 0.875rem;
	font-weight: 500;
}

.dashboard-body__item__time-info > li > span:first-child {
	opacity: 60%;
}

.categories .category:not(:last-of-type) {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.dashboard-body__item__bottom {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dashboard-body__item__link {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 10px;

	background-color: #dfdfdf40;
	border-radius: 10px;
}

.dashboard-body__item__link > button {
	background-color: transparent;
	border: 0;
	cursor: pointer;
}

.dashboard-body__item__link > a {
	opacity: 60%;

	font-size: 0.875rem;
	font-weight: 500;
}

.dashboard-body__item__controls {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 10px;
}

.dashboard-body__item__controls > a {
	height: 44px;

	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;

	background-color: transparent;
	border: 1px solid black;
	border-radius: 100px;
	opacity: 40%;
	cursor: pointer;

	font-size: 0.875rem;
	font-weight: 500;
}

.dashboard-body__item__controls > button {
	width: 44px;
	height: 44px;

	background-color: red;
	border: 1px solid var(--red);
	border-radius: 50%;
	cursor: pointer;
}

.dashboard-body__item__controls > button > svg {
	position: relative;
	top: 1.5px;
}

.aactivity__table {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.activity__table__header {
	display: grid;
	grid-template-columns: 1fr 200px 100px;
	gap: 10px;
}

.activity__table__header > span {
	opacity: 70%;

	font-size: 0.875rem;
	font-weight: 500;
}

.activity__table__body {
	display: flex;
	flex-direction: column;
}

.activity__table__body > li {
	display: grid;
	grid-template-columns: 1fr 200px 100px;
	gap: 10px;

	padding: 13px 0;
}

.activity__table__body > li > span {
	font-weight: 500;
}

.activity__table__body > li > span:first-child {
	display: -webkit-box;

	overflow: hidden;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.label-input {
	width: 100%;

	display: flex;
	flex-direction: column;
	gap: 5px;
}

.label-input > label {
	opacity: 60%;

	font-size: 0.875rem;
}

.modal {
	width: 100vw;
	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;

	background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;

	transition: all 0.3s ease;
}

.modal-content {
	width: 50%;
	max-width: 1080px;

	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;

	position: relative;

	padding: 40px 35px;

	background-color: white;
	border-radius: 25px;
}

.modal.modal-link-opened {
	visibility: visible;
	opacity: 1;
}

.modal-content > h2 {
	font-size: 2rem;
	font-weight: 500;
}

.modal-content > button:last-child,
.modal-content > a {
	width: 100%;

	background-color: var(--accent-color);
}

.close-button {
	width: 30px;
	height: 30px;

	position: absolute;
	top: 20px;
	right: 20px;

	background-color: transparent;
	border: 0;
	cursor: pointer;
}

.close-button > span {
	width: 100%;
	height: 1.5px;

	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;

	background-color: #dfdfdf;
	border-radius: 100px;
}

.close-button > span:first-child {
	rotate: 45deg;
}

.close-button > span:last-child {
	rotate: -45deg;
}

.custom-input {
	width: 100%;

	padding: 14px;

	background-color: var(--add-white-bg-color);
	border-radius: 100px;
	border: 0;

	font-size: 0.875rem;
}

.custom-input:focus {
	outline: 0;
}


@media (max-width: 1330px) {
	.dashboard-body {
		padding: 20px;
	}

	.dashboard-body__top {
		flex-direction: column;
		align-items: start;
		gap: 20px;
	}

	.dashboard-body__top > a {
		width: 100%;

		display: flex;
		justify-content: center;
	}

}

@media (max-width: 1050px) {
	.dashboard-top {
		padding: 0 20px;
	}
}

@media (max-width: 800px) {
	.dashboard__search {
		width: 100%;
	}

	.dashboard-top__right {
		display: none;
	}

	.dashboard-body__list__item {
		flex-basis: 100%;
		margin: 0 5px 15px 5px;
		width: calc(100% - 10px);
		max-width: none;
	}

	.activity__table__header {
		grid-template-columns: 1fr 80px 80px;
	}

	.activity__table__body > li {
		grid-template-columns: 1fr 80px 80px;
	}
}

@media (max-width: 450px) {
	.prices-section__options > li {
		font-size: 0.875rem;
	}
}