:root{
    --upload-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1600'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='0' fill='%23647d8f' d='M1018.42 1300.82c-29.22,0 -52.92,-23.7 -52.92,-52.92 0,-29.22 23.7,-52.92 52.92,-52.92l154.83 0c85.07,0 162.2,-34.91 218.05,-91.01 56.07,-56.34 90.83,-134.14 90.83,-219.56 0,-84.73 -34.38,-161.75 -89.83,-217.7 -55.71,-56.23 -132.52,-91.43 -216.97,-92.18 -24.03,-0.18 -44.18,-16.43 -50.35,-38.47 -1.07,-3.44 -1.47,-6.19 -2.25,-10.92 -6.08,-37.38 -46.48,-285.09 -313.63,-275.71 -85.68,3.01 -155.9,31.18 -208.53,77.7 -55.84,49.36 -93.05,120.22 -109.03,204.38 -4.75,25.39 -26.95,43.1 -51.88,43.08l0 0.13 -12.11 0c-85.1,0 -162.53,34.87 -218.67,91.01 -56.14,56.15 -91.01,133.58 -91.01,218.68 0,85.11 35.06,162.75 91.43,219.13l2.43 2.6c56.03,54.84 132.63,88.84 216.64,88.84l155.25 0c29.22,0 52.92,23.7 52.92,52.92 0,29.22 -23.7,52.92 -52.92,52.92l-155.25 0c-112.62,0 -215.47,-45.78 -290.8,-119.6l-3.09 -2.86c-75.49,-75.51 -122.45,-179.65 -122.45,-293.95 0,-114.31 46.75,-218.21 122.03,-293.5 68.62,-68.62 161.02,-113.52 263.4,-120.94 24.16,-89.07 69.3,-165.27 133.25,-221.8 70.67,-62.47 163.39,-100.24 275.09,-104.16 308.32,-10.83 391.57,228.2 414.13,327.81 96.1,11.04 182.43,55.11 247.19,120.47 74.59,75.27 120.85,178.62 120.85,292.12 0,114.22 -46.63,218.4 -121.85,293.98 -75.14,75.48 -178.73,122.43 -292.87,122.43l-154.83 0zm-163.46 -557.63l1.57 660.4c0,29.11 -23.6,52.71 -52.71,52.71 -29.11,0 -52.71,-23.6 -52.71,-52.71l-1.57 -661.02 -164 164c-20.66,20.66 -54.16,20.66 -74.82,0 -20.66,-20.66 -20.66,-54.16 0,-74.82l253.82 -253.81c20.66,-20.66 54.16,-20.66 74.82,0l253.83 253.85c20.66,20.66 20.66,54.16 0,74.82 -20.66,20.66 -54.16,20.66 -74.82,0l-163.41 -163.42z'/%3e%3c/svg%3e");

    --close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --close-icon-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

    --reload-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath d='M2.73 4.49l0.28 -0.37c0.62,-0.89 1.45,-1.62 2.42,-2.12 0.93,-0.49 1.99,-0.76 3.12,-0.76 1.87,0 3.55,0.76 4.78,1.98 1.22,1.22 1.97,2.92 1.97,4.78 0,1.87 -0.75,3.56 -1.97,4.79 -1.23,1.22 -2.91,1.98 -4.78,1.98 -0.44,0 -0.89,-0.06 -1.34,-0.14l-1.12 -0.22 0.52 -2.09c0.28,0.12 0.69,0.24 0.99,0.31 0.3,0.05 0.61,0.08 0.95,0.08 1.3,0 2.48,-0.53 3.33,-1.38 0.85,-0.85 1.38,-2.03 1.38,-3.33 0,-1.3 -0.53,-2.47 -1.38,-3.34 -0.85,-0.84 -2.03,-1.38 -3.33,-1.38 -0.79,0 -1.53,0.2 -2.18,0.53 -0.68,0.36 -1.25,0.87 -1.69,1.49 -0.09,0.09 -0.29,0.41 -0.38,0.55l2.04 0 0 2.05 -5.64 0 -0.01 -5.57 2.04 0 0 2.16 0 0z'/%3e%3c/svg%3e");

    --dropdown-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666666'%3e%3cpath d='M14.27 4.14c0.28,-0.28 0.72,-0.28 1,0 0.27,0.27 0.27,0.72 0,1l-6.81 6.81c-0.28,0.27 -0.73,0.27 -1,0l-6.82 -6.81c-0.27,-0.28 -0.27,-0.73 0,-1 0.28,-0.28 0.73,-0.28 1,0l6.32 6.31 6.31 -6.31z'/%3e%3c/svg%3e");

}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    opacity: 0.5;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

:focus {
    outline: -webkit-focus-ring-color auto 0;
}

div, section, nav, header, footer, li, ul, article, blockquote {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

input:not([type=checkbox]), select, textarea{
    font-family: var(--main-font), verdana, arial, sans-serif;
    outline: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

}

input:not([type=checkbox]) {
    -webkit-appearance: none;
}


/* FORM */

.form-field {
    margin-bottom: 15px;
    position: relative;
}
.form-field label {
    font-weight: bold;
    position: relative;
    display: block;
}
.form-field label.required:after {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    text-transform: uppercase;
    padding: 2px 5px;
    font-size: 8px;
    color: #ffffff;
    border-radius: 4px;
    background-color: #ff8080;
    content: "обязательное";
    margin-left: 4px;
    font-weight: bold;
}
.form-field input,
.form-field textarea,
.form-field .input-select{
    width:100%;
    padding:8px 12px;
    font-size: var(--main-font-size);
    border-radius: 4px;
    margin:5px 0;
    background: var(--input-background);
}
.form-field.size-lg input,
.form-field.size-lg textarea,
.form-field.size-lg .input-select{
    font-size: var(--lg-font-size);
    padding:10px 15px;
}
.form-field textarea{
    line-height: 1.4;
}
.form-field.size-lg label{
    font-size: var(--lg-font-size);
}
.form-field.size-xl input,
.form-field.size-xl textarea,
.form-field.size-xl .input-select{
    font-size: var(--xl-font-size);
    padding:10px 15px;
}
.form-field.size-xl label{
    font-size: var(--xl-font-size);
}
.form-field .form-field-description {
    font-style: italic;
    font-size: 0.8rem;
    color: #8fa1c0;
}
.form-field .input-wrapper{
    position:relative;
}
.form-field.prepended input{
    padding-left:45px;
}
.form-field.appended input{
    padding-right:45px;
}
.form-field .prepend-icon{ /* иконка слева от инпута */
    position:absolute;
    left:15px;
    top:50%;
    transform: translateY(-50%);
    z-index:2;
    font-size: 20px;
    color:var(--white-color);
}
.form-field .append-icon{ /* иконка справа от инпута */
    position:absolute;
    right:15px;
    top:50%;
    transform: translateY(-50%);
    z-index:2;
    font-size: 20px;
    color:var(--white-color);
    cursor: pointer;
}
.form-field .input-error {
    position: absolute;
    display: none;
    left: 0;
    top: 65px;
    padding: 5px;
    border-radius: 5px;
    background: var(--bs-danger);
    color: #ffffff;
    z-index: 3;
}
.form-field .input-error:after {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 6px 7px;
    border-color: transparent transparent var(--bs-danger) transparent;
    left: 15px;
    top: -6px;
    content: "";
    z-index: 10;
}
.form-field .input-error.for-checkbox{
    top: 25px;
}
.form-field.error {
    color: var(--bs-danger) !important;
}
.form-field.error input {
    border-color: var(--bs-danger);
}
.form-field.error .input-error {
    display: block;
}

.form-field .input-select{
    display: flex;
    align-items: center;
    gap:5px;
    position: relative;
}
.form-field .input-select:not(.selected):after{
    position: absolute;
    content: attr(placeholder);
    top:50%;
    left:12px;
    transform: translateY(-50%);
    color:var(--waiting-color);
}
.form-field .input-select .select-value{
    flex:1 0 0;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.form-field .input-select .select-value .badge{
    background: var(--main-link-color);
    color:var(--white-color);
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 5px;
    border-radius: 4px;
    gap:5px;
}
.form-field .input-select .select-value .badge .cancel{
    width:20px;
    height:20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px 10px;
    background-image: var(--close-icon-white);
}
.form-field .select.opened .icon-select{
    transform: rotate(180deg);
}
.form-field .input-select .icon-select{
    width: 28px;
    height:28px;
    cursor: pointer;
    background-repeat:no-repeat;
    background-size:12px 12px;
    background-position: center center;
    transition: 0.1s;
    background-image: var(--dropdown-icon);
}
.form-field .input-select .icon-select:hover{
    background-size:15px 15px;
}

.form-field .select .options-list{
    position: relative;
    display: none;
}
.form-field .select.opened{
    z-index:5;
}
.form-field .select.opened .options-list{
    display:block;
}
.form-field .select .options-list ul{
    margin:0;
    max-height:350px;
    overflow: auto;
    position:absolute;
    padding: 8px 0;
    border-radius: 10px;
    top:0;
    width:100%;
    left:0;
    background: var(--white-color);
    box-shadow: 5px 10px 12px rgba(0,0,0,.1);
}
.form-field .select .options-list li{
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}
.form-field .select .options-list li:hover{
    background: var(--max-muted-waiting-color);
}
.form-field .select .options-list li.selected{
    background: var(--main-link-color);
    color:var(--white-color);
}

/* /FORM */

/* FILES */

.form-field .file-input{
    width:1px;
    height:1px;
    overflow: hidden;
}
.form-field .file-area{
    width:100%;
    padding:8px 12px 8px 48px;
    font-size: var(--main-font-size);
    border-radius: 4px;
    margin:5px 0;
    background: var(--input-background);
    min-height: 38px;
    display: flex;
    position: relative;
    align-items: center;
    gap:8px;
    background-repeat:no-repeat;
    background-position: left 12px center;
    background-size: 25px 25px;
    background-image: var(--upload-icon);
}
.form-field .file-area:after{
    position: absolute;
    content: attr(placeholder);
    top:50%;
    left:48px;
    transform: translateY(-50%);
    color:var(--waiting-color);
}
.form-field .file-area.fill:after{
    display:none;
}
.form-field .file-area .icon.cancel{
    width:32px;
    display: none;
    height:28px;
    flex: 0 0 auto;
    cursor: pointer;
    background-repeat:no-repeat;
    background-size:10px 10px;
    background-position: center center;
    transition: 0.1s;
    background-image: var(--close-icon);
}
.form-field .file-area .icon.cancel:hover{
    color:var(--danger-color);
    background-size:13px 13px;
}
.form-field .file-area.fill .icon.cancel{
    display: block;
}
.form-field .file-area .browse-btn{
    padding:6px 12px;
    background: var(--main-link-color);
    color: var(--white-color);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border:none;
    border-radius: 5px;
    flex: 0 0 auto;
}
.form-field .file-area .browse-btn:hover{
    background: var(--main-menu-active-color);
}
.form-field .file-area .file-title{
    overflow: hidden;
    flex: 1 0 0;
}
.form-field .file-area .file-title small{
    color:var(--waiting-color);
}

.form-field .file-area.dropable{
    background:transparent;
    border:dashed 1px var(--success-color);
}
.form-field .file-area.dropable *{
    display: none!important;
}
.form-field .file-list{
    display: flex;
    flex-direction: column;
    gap:6px;
    padding:8px 0;
    max-height: 400px;
    overflow: auto;
}
.form-field .file-list .file-item{
    padding: 6px 15px;
    border: solid 1px var(--waiting-color);
    border-radius: 5px;
    display: flex;
    user-select: none;
    cursor: pointer;
    gap:5px;
    position: relative;
    align-items: center;
}
.form-field .file-list .file-item .image{
    width:60px;
    height:60px;
    flex: 0 0 auto;
}
.form-field .file-list .file-item .image img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.form-field .file-list .file-item.deleted{
    border-color: var(--danger-color);
    color:var(--danger-color);
    text-decoration: line-through;
    opacity: 0.8;
}
.form-field .file-list .file-item .title{
    flex: 1 0 0;
    overflow: hidden;
}
.form-field .file-list .file-item .title small{
    color:var(--waiting-color);
}
.form-field .file-list .file-item .cancel{
    width:28px;
    height:28px;
    flex: 0 0 auto;
    cursor: pointer;
    background-repeat:no-repeat;
    background-size:10px 10px;
    background-position: center center;
    transition: 0.1s;
    background-image: var(--close-icon);
}
.form-field .file-list .file-item .cancel:hover{
    color:var(--danger-color);
    background-size:13px 13px;
}
.form-field .file-list .file-item.deleted .cancel{
    background-image: var(--reload-icon);
}
.form-field .file-list .file-item.clone .cancel{
    display: none;
}
.form-field .file-list .file-item.dragging{
    opacity:0.3;
}
.form-field .file-list .file-item.target.before:not(.dragging):after{
    width:100%;
    height:2px;
    background: var(--main-link-color);
    content: '';
    position: absolute;
    top:-5px;
    left:0;
}
.form-field .file-list .file-item.target.after:not(.dragging):after{
    width:100%;
    height:2px;
    background: var(--main-link-color);
    content: '';
    position: absolute;
    bottom:-5px;
    left:0;
}

.form-field .file-list .file-item.clone{
    opacity: 0.9;
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(10px, 10px) scale(0.85);
    background: var(--white-color);
    box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
}

/* /Files */

/* Images */

.form-field .image-preview{
    width: 100%;
    margin: 10px 0;
    max-height: 400px;
}
.form-field .image-preview img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 400px;
}

/* /Images */

/* switchbox  */

.switchbox {
    padding-left: 2.5rem;
    margin:5px 0;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    user-select: none;
}
.switchbox:before {
    width: 1.8rem;
    position: absolute;
    height: 15px;
    border-radius: 20px;
    background: #b6c2d6;
    left: 0px;
    top: 50%;
    content: "";
    transform: translateY(-50%);
}
.switchbox:after {
    width: 15px;
    content: "";
    position: absolute;
    border-radius: 20px;
    height: 15px;
    background: #ffffff;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: left 0.2s ease;
}
.switchbox.checked:before,
.switchbox.lg.checked:before{
    background: #4fc2a0;
}
.switchbox.checked:after {
    left: calc(1.8rem - 15px);
}

.switchbox.lg {
    padding-left: 3.2rem;
    font-size: 120%;
}
.switchbox.lg:before {
    width: 2.3rem;
    height: 20px;
    border-radius: 50px;
    background: #b6c2d6;
}
.switchbox.lg:after {
    width: 20px;
    height: 20px;
}
.switchbox.lg.checked:after {
    left: calc(2.3rem - 20px);
}

/* /switchbox  */

/* Checkbox */
.checkbox {
    margin:5px 0;
    padding-left: 30px;
    position: relative;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    user-select: none;
}
.checkbox.checked i.icon-check {
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkbox i.icon-check {
    position: absolute;
    width: 17px;
    height: 17px;
    font-size: 13px;
    left: 9px;
    top: 13px;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 4;
    color: var(--bs-success);
}
.checkbox:after {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: solid 1px var(--bs-gray-500);
    content: "";
    left: 0;
    top: 3px;
}
.checkbox.checked:after {
    border-color: var(--bs-success);
}
.checkbox.checked:before {
    width: 10px;
    height: 7px;
    left: 4px;
    top: 6px;
    transform: rotate(-45deg);
    content: '';
    position: absolute;
    border-bottom: solid 2px var(--bs-success);
    border-left: solid 2px var(--bs-success);
}

/* /Checkbox */