@font-face {
    font-family: 'RobotoFlex';
    src: url('../../adminpanel/interface/fonts/RobotoFlex.ttf');
    font-weight: normal;
    font-style: normal;
}

/* Default styles */
*{margin: 0; padding: 0; box-sizing: border-box;}
html{background: #151d2e url(../images/intro.png) top right no-repeat; height: 100%;}
body{font: 18px/24px 'RobotoFlex', sans-serif; padding-bottom: 100px; color: #fff; height: 100%; 
background: url(../images/intro-left.png) top left no-repeat;}
pre{white-space: break-spaces;}
.hidden{display: none;}

/* Main structure */
header{height: 120px; display: flex; align-items: center; color: #fff; margin: 0 auto 50px auto;
max-width: 1400px;}
header a.logo{margin-right: 40px;}
header a.logo img{display: block; width: 90px;}
header a{color: #fff; text-decoration: none;}
header ul.menu{display: flex; width: 100%; gap: 1.7%; font-size: 16px;}
header ul.menu li{list-style: none;}
header ul.menu li.active a{color: #1cb596;}

main{margin: 0 auto; padding-bottom: 50px; max-width: 1400px;}
main a{color: #1cb596; text-decoration: none;}
main a:hover{text-decoration: none;}
main h1, main h2, main h3{margin-bottom: 15px;}
main h1{font-size: 56px; line-height: 66px; font-weight: 600;}
main h2{font-size: 56px; line-height: 66px; font-weight: 600;}
main h3{font-size: 30px; line-height: 40px; font-weight: 600;}
main ul, main ol{margin-bottom: 20px;}
main li{margin-bottom: 10px; list-style-position: inside;}
main h1{margin-bottom: 50px;}
main p{margin-bottom: 15px; line-height: 30px;}
main p.settings{margin-bottom: 50px;}
main p.settings span{color: #1cb596;}
main a{border-bottom: 1px solid #1cb59633; padding-bottom: 1px;}
main a::after{background: #151d2e url(../images/arrow.svg) bottom center no-repeat; width: 24px; height: 24px; margin-left: 5px;
display: inline-block; content: ''; position: relative; bottom: -7px; padding: 0 0 2px 3px; white-space: nowrap;}
main a:hover{border-color: transparent;}
main p.settings a::after{display: none;}

main section.grid{display: grid; grid-template-columns: 65% 35%; border-top: 1px solid #ffffff1a; width: 100%;}
main section.grid > *{border-bottom: 1px solid #ffffff1a; padding: 60px 3%; display: flex; align-items: center;}
main section.grid.index > p{display: block;}
main section.grid h2{counter-increment: step-counter; padding-right: 10%;}
main section.grid h2::before{content: counter(step-counter); margin-right: 30%; color: #1cb596; font-size: 18px;
line-height: 24px; font-weight: normal;}
main section.content{margin-bottom: 50px;}

/* Form styles */
form div.field-wrapper{margin-bottom: 20px;}
form div.field-name{margin-bottom: 4px;}
form div.field-name span.required{color: #1cb596;}
form input[type='text'], form select, form textarea{border: 1px solid #eeeed9; border-radius: 6px; padding: 0 10px;
background: #151d2e; width: 450px; color: #fff; font-size: 18px;}
form input[type='text'], form select{height: 48px;}
form select{background: #151d2e url(../images/select.svg) no-repeat right 12px center; appearance: none;
cursor: pointer;}
form textarea{padding: 10px; height: 200px !important;}
form button{border: none; border-radius: 6px; cursor: pointer; font-size: 16px; background: #1cb596;
color: #fff; padding: 15px; width: 450px;}
form input[type='checkbox']{margin-right: 4px;}
form label{cursor: pointer;}
form div.buttons{padding-top: 20px;}
form .image-input{width: 300px; padding: 10px 0; border: 1px solid transparent; border-radius: 6px;}
form .file-params{margin-bottom: 15px;}
form .file-params span.delete, form .multiple-files-data span.delete{margin-left: 12px; color: #1cb596; cursor: pointer;}
form .multiple-files-data{width: 600px;}
form .multiple-files-data div.file-element{margin-bottom: 5px;}
form .multiple-files-data div.file-input{margin-top: 15px;}
form .form-multi-images-wrapper{display: grid; grid-template-columns: 150px 150px 150px; gap: 15px; margin-bottom: 20px;
width: fit-content; padding: 15px 0;}
form .form-multi-images-wrapper > div{display: flex; flex-direction: column; align-items: center;}
form .form-multi-images-wrapper > div > img{height: 100px; margin-bottom: 3px; max-width: 100%;}
form .form-multi-images-wrapper span.delete{color: #1cb596; cursor: pointer;}
form div.field-input:has(input[name='captcha']){display: flex; flex-direction: row-reverse; align-items: center;
gap: 1%; justify-content: flex-end;}
form div.field-input:has(input[name='captcha']) input[type='text']{width: 250px;}
form div.field-input:has(input[name='captcha']) img{border-radius: 4px;}

.error-field > *{border-color: #ff4343 !important;}
div.form-errors, div.form-success{margin: 0 0 20px 0; padding: 10px 20px; width: 450px; border-radius: 6px;
background: #ffffff1a;}
div.form-errors p, div.form-success p{margin: 0 0 5px 0;}
div.form-errors p:last-child, div.form-success p:last-child{margin: 0;}
div.form-errors{color: #ff4343;}
div.form-success{color: #1cb596;}

/* Styles for Workshop examples */
main.workshop pre{margin-bottom: 30px; max-width: 800px;}
main.workshop a::after{display: none;}
main.workshop section.items-list{display: flex; flex-direction: column; gap: 30px; margin-bottom: 30px;}
main.workshop section.items-list > *{max-width: 800px;}
main.workshop section.items-list h2{font-size: 18px; line-height: 24px;}
main.workshop section.items-list.gallery a{display: inline-block; border: none;}
main.workshop section.items-list a > img{display: block;}
main.workshop section.items-list > div .name{text-align: center; padding: 12px;}
main.workshop section.items-list div.brief{margin-bottom: 10px;}
main.workshop section div.date{font-size: 16px; margin-bottom: 10px;}
main.workshop section.item-details > img{margin-bottom: 20px;}
main.workshop section.item-details section.content{max-width: 800px;}
main.workshop section.item-details div.extra-images{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px; max-width: 640px; margin-bottom: 20px;}
main.workshop section.item-details div.extra-images img{max-width: 100%; display: block;}
main.workshop section.item-details div.price{margin-bottom: 30px; text-align: left;}
main.workshop section.columns{display: flex; justify-content: space-between;}
main.workshop section.columns section.left{width: 300px;}
main.workshop section.columns section.right{width: calc(100% - 300px - 5%);}

main.workshop section.items-list.gallery{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
main.workshop section.items-list.gallery > div{display: flex; flex-direction: column; align-items: center; 
gap: 15px}
main.workshop section.items-list.gallery.catalog{grid-template-columns: 1fr 1fr 1fr;}
main.workshop section.items-list.faq div.question{background: #ffffff1a; border-radius: 6px; padding: 10px 3%;
margin-bottom: 10px;}
main.workshop section.items-list.faq div.date{margin: 0 3% 20px 3%;}
main.workshop section.items-list.faq div.answer{font-size: 16px; margin: 0 3%;}

main.workshop section.items-gallery{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;
max-width: 800px;}
main.workshop section.items-gallery a{display: block; padding: 0; border: none;}
main.workshop section.items-gallery a img{display: block; max-width: 100%;}

main.workshop div.paginator{display: flex; gap: 10px; align-items: center; margin-bottom: 30px;}
main.workshop div.paginator span{margin-right: 5px;}
main.workshop div.paginator a{padding: 2px 0; border-radius: 4px; min-width: 30px; text-align: center;
border: none;}
main.workshop div.paginator a:hover{background: #30384a;}
main.workshop div.paginator a.active{background: #1cb596; color: #fff;}
main.workshop div.previous-next{display: flex; justify-content: space-between; max-width: 800px;}
main.workshop div.previous-next a.next{margin-left: auto;}

main.workshop div.breadcrumbs{margin-bottom: 20px; font-size: 14px;}
main.workshop div.breadcrumbs a{margin-right: 8px;}
main.workshop div.breadcrumbs a::after{content: '/'; background: none; display: inline; position: static;}
main.workshop div.breadcrumbs span{color: #aaa;}

main.workshop ul.catalog-tree li{list-style: none; margin-bottom: 10px;}
main.workshop ul.catalog-tree li:last-child{margin: 0;}
main.workshop ul.catalog-tree li.open > a{color: #aaa;}
main.workshop ul.catalog-tree ul{margin: 10px 0 10px 25px;}

main.workshop section.filtration{max-width: 1100px;}
main.workshop form.filters{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
margin-bottom: 30px;}
main.workshop form.filters > div{width: 23%;}
main.workshop form.filters > div:first-child{width: 8%;}
main.workshop form.filters > div:has(.interval){width: 30%;}
main.workshop form.filters > div:has(.interval) div.filter-name{margin-left: 30px;}
main.workshop form.filters > div:has(.interval) div.filter-input{display: flex;
justify-content: flex-end; align-items: center;}
main.workshop form.filters button{width: 120px; align-self: flex-end;}
main.workshop form.filters{font-size: 15px; color: #1cb596;}
main.workshop form.filters input[type='text'], main.workshop form.filters select{max-width: 100%;
color: #1cb596; outline: none;}
main.workshop form.filters > div:has(.interval) input{width: 40%;}
main.workshop form.filters .filter-interval-name{margin-right: 8px;}
main.workshop form.filters #filter-price-from{margin-right: 3%;}

main.workshop section.filtration > table{width: 100%; border-collapse: collapse;}
main.workshop section.filtration > table th{text-align: left; background: #ffffff1a; padding: 10px 2%;
color: #1cb596;}
main.workshop section.filtration > table td{padding: 10px 2%;}
main.workshop section.filtration > table tr:nth-child(2n + 1) td{background: #ffffff1a;}

@media all and (max-width: 1440px)
{
    header, main{margin-left: 20px; margin-right: 20px;}
    header ul.menu{gap: 2.5%;}
    header, main h1, main p.settings{margin-bottom: 30px;}
}

@media all and (max-width: 800px)
{
    main section.grid{grid-template-columns: 1fr;}
    main section.grid > *{padding: 30px 2%;}
    h1, h2{font-size: 30px !important; line-height: 36px !important; margin-bottom: 20px !important;}
    main section.grid h2{border: none; margin: 0; padding-bottom: 0;}
    main section.grid h2::before{margin-right: 10%;}
    main h3{margin-bottom: 25px; font-size: 26px; line-height: 30px;}
}

@media all and (max-width: 640px)
{
    main.workshop section.item-details img{max-width: 100%;}
}

@media all and (max-width: 600px)
{
    body{font-size: 16px; line-height: 20px;}
    header ul.menu{flex-direction: column; gap: 5px;}
    form input[type='text'], form select, form textarea, form button, div.form-errors, div.form-success{
    width: 100% !important;}
}