:root {
    --base-color: #545a66;
    /*text, defolt liks*/
    --h1h6-color: #788091;
    /*h1-h6*/
    --hf-color: #5b5f68;
    /*header,footer*/
    --hf2-color: #6c757db9;
    /*header lighting*/

    --main-bg-color: #f9fafc;
    --acol-bg-color: #edeef2;
    --bcol-bg-color: #d3d7db;
    /*body-box*/

    --attn: #e03812;
    --attn-slight: #fce1da;



    --acc-color: #14a2b8;
    --acc2-color: #f3bc44;
    /*help*/


    --action-color: #48a881;
    --action-color-light: #59cb9d;
    --action-color-slight: #bcf6df;




    --border-width: 1px;
    --header-height: 50px;
    --footer-height: 200px;
    --panel-width: 300px;
    --doppanel-with: 50px;

    --space-item: 16px;
    --font-item: 1em;
    --font-item-small: 0.83rem;
    --font-item-bigger: 1.15rem;



}

::selection {
    background: var(--action-color);
    color: var(--main-bg-color);
}



.font-small {
    font-size: var(--font-item-small);
}

.font-bigger {
    font-size: var(--font-item-bigger);
}

.cutter {
    border-bottom: 1px dotted #c0392b99;
    padding: 3px;
    margin: 0px 0 30px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cutter p:nth-child(1) {
    font-size: 2em;
}

.cutter * {
    padding: 0;
    margin: 0;
}

.cutterlist a {
    font-weight: bold;
    color:#14a2b8;
}


.cutterlist li.newpoint::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: '\f06a \00A0';
    color:orangered;
}

.cutterlist .newpoint li {
    font-weight: bold;
}


.hidden {
    display: none;
}



.message {
    padding:20px;
    padding-left: 80px;
    border:2px solid #48a881;
    margin-bottom: 40px;
    margin-top: 20px;
    background-color: rgb(241, 241, 241);
}


.message::before {
    display: block;
    position: absolute;
    margin-left: -60px;
    float: left;
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='45' width='45' viewBox='0 -960 960 960'><path d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z' fill='%2348a881' /></svg>");
    display: inline-block;	
}



.attention {
    border:2px solid goldenrod;
}
    
.attention::before {
    font: var(--fa-font-regular);
    text-rendering: auto;    
    content: '\f071 \00A0';
    color: goldenrod;
    font-size: xx-large;
}


.inform {
    border:2px solid #48a881;
}


.inform::before {
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='45' width='45' viewBox='0 -960 960 960'><path d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z' fill='%2348a881' /></svg>");
}





.message a {
    text-decoration: underline;
    font-weight: bold;
}






article a {
    color:var(--action-color);
    text-decoration: underline;
}

html {
    box-sizing: border-box;
}


body {
    background-color: #b4b9bf;
    ackground-image: linear-gradient(315deg, #464d57 0%, #b4b9bf 74%);
    font-family: 'Ubuntu', sans-serif;
    font-size: var(--font-item);
    -webkit-font-smoothing: antialiased;
    color: var(--base-color);
}


form {
    display: flex;
    justify-content: stretch;
    gap: calc(var(--space-item)/2);
    padding: 0;
    flex-wrap: wrap;
}

input,
select,
textarea,
label {
    margin-bottom: calc(var(--space-item)/2);
    outline: 0;
}

input,
select,
textarea {
    border-radius: 4px;
    padding-left: 12px;
    font-weight: normal;
    border: 1px solid rgb(137, 151, 155);
    transition: border-color 150ms ease-in-out 0s;
    outline: none;
    color: rgb(33, 49, 60);
    background-color: rgb(255, 255, 255);
    padding-right: 12px;

}

input:hover,
select:hover,
textarea:hover {
    box-shadow: rgb(231 238 236) 0px 0px 0px 3px;
}


textarea {
    display: block;
    padding: 5px;
    overflow: auto;
    resize: vertical;
    min-height: 160px;
}

input[type="text"] {
    height:30px;
}

button,
input[type="button"],
input[type="submit"],
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-color: var(--action-color);
    border-radius: .25rem;
    box-sizing: border-box;
    color: var(--action-color);
    cursor: pointer;
    display: inline-flex;    
    font-weight: bold;
    justify-content: center;
    align-items: center;
    line-height: normal;
    outline: 0;
    padding: 4px 16px 6px 16px;
    position: relative;
    text-decoration: none !important;
    text-align: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height:30px;
    white-space: nowrap;
}


button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background-color: var(--action-color);
    color: var(--main-bg-color);
}

input[disabled],  input[disabled]:hover {
    background: linear-gradient(45deg, #eee 25%, #fff 0,#fff 50%,#eee 0,#eee 75%,#fff 0);
    background-size: 12px 12px;
    color: #333;
    border-color: #ccc;
    opacity: 0.5;
    cursor: default;
    transition: none;
    font-weight: normal;
    box-shadow: none;
}

label[disabled] {} 

button:focus {
    outline: 0px auto #000;
}


.spec {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--attn) !important;
    text-decoration: underline !important;
}



input::placeholder {
    opacity: 0.8;
}

input:focus::placeholder {
    opacity: 0;
}

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    accent-color: var(--base-color);
    margin: 0;
}


label.error {
    color:  var(--attn);
    padding: 0px 0px 8px 0px!important;
    line-height: 100% !important;
    flex: none;
    width: max-content;
    width: 100%;
    border-radius: 4px 4px 0px 0px;
    margin-bottom: -20px !important;
}


p.error {
    background: var(--attn);
    color: #fff;
    padding: 6px 12px !important;
    line-height: 150% !important;
    flex: none;
    width: max-content;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 20px !important;
}


input.error,
select.error,
textarea.error {
    border: 2px solid var(--attn) !important;
    color: #000;
}


.bt_small {
    padding: 2px 8px !important;
    font-size: var(--font-item-small);
    text-transform: uppercase;
    min-height: 0px !important;
    height: 20px !important;
    overflow: hidden;
}

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

a:hover {
    color: var(--action-color);
}

a span {
    opacity: 0.6;
}


h1 {
    font-size: 2em;
    font-weight: normal;
    padding: 3px;
    margin: 0px 0 5px 0;    
}

h3 {
    font-size: 1.6em;    
    font-weight: normal;
    padding: 3px;
}

h4 {
    font-size: calc(var(--font-item)*1.05);
}

.nobr {
    text-wrap: nowrap;
}


.link {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    line-height: 110%;
    ackground-color: #b4b9bf;
    padding: 5px;
    order-radius: 7px;
    justify-content: space-between;
    text-decoration: none !important;
    border-bottom: 1px solid var(--base-color);
    color: var(--base-color) !important;
}

.link span {
    display: block;
    padding-left: 20px;
    opacity: 1;
    float: right;
}

.paginator {
    display: flex;
    justify-content: center;
    gap: var(--space-item);
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.paginator .button,
.paginator .button:active {
    background-color: var(--acol-bg-color) !important;
    border: 1px solid var(--bcol-bg-color) !important;
    color: var(--base-color) !important;
    text-shadow: 0px 0px !important;
}

.paginator * {
    font-weight:normal!important;
}

.paginator .button.sel {
    background-color: var(--main-bg-color) !important;
    font-weight: bold!important;
}

.cardbal {
    display: flex;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 40px;
}

.cardbal h3 {
    font-size: 1.2em;    
}

.cardbal p {
    margin-bottom: 4px;
}

.cardbal>div {
    flex: 1;
    min-width: 400px;
}




.cardbal form {
    display: block;
    white-space: nowrap;
    border-radius: 10px;
    ackground-color: #d9d9d9;
    border: 2px solid var(--bcol-bg-color);
    padding: 20px 20px 10px 20px;
    width: fit-content;
    margin-bottom: 10px;
}

.cardbal select {
    width: 200px;
    padding: calc(var(--space-item)/4) calc(var(--space-item)/2);
}

.cardbal input:not(type=radio) {
    width: 200px;
}

.cardbal input[type=radio] {
    margin-right: 10px;
}

.landing-content {
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
    display: grid;
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
        "header"
        "main"
        "footer";
    position: relative;
    min-height: 100vh;
}

.landing-content header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}


.landing-content header a.button {
    color: white;
    font-weight: bold;
}


.landing-content article {
    margin: 0;
    padding: 30px 60px;
}

.landing-content article h1 {
    font-size: 2em;
}


.landing-content .logo {
    flex: auto;
}

.landing-content header p {
    flex: none;

}

.landing-content .body-box {
    grid-area: main;
    background-color: #fff;
    display: block;
}


.landing-content .tariff .pt-footer {
    display: none;
}


.landing-content .tariff {
    font-size: 0.95rem;
}

.land {
    /*
    background-color: #fff;
    background-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%);
    */
    width: 100%;
    border-radius: 6px;
    padding: 50px 80px;
    margin-bottom: 40px;
    border-left: 6px solid var(--action-color);
    font-size: var(--font-item-bigger);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);

}

.land a {
    color: var(--action-color);
}

.land-00>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    gap: 80px;
    flex-direction: row;
}

.land-00>div>div {
    flex: none;
    width: 45%;
    max-width: 55%;
}

.land-00>div>div:last-child {
    flex: none;
    width: 35%;
    max-width: 45%;

}


.land form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /*background-color: #ecf0ee;
    border-radius: 6px;
    border:6px solid var(--main-bg-color);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;*/
}


.land input,
.land textarea {
    margin-bottom: 10px;
}

.land input[type="submit"] {
    width: max-content !important;
    flex: none;
}


.land form label {
    line-height: 110%;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
}


.land form label.error {
    color:  var(--attn);
    padding: 0px !important;
    line-height: 100% !important;
    flex: none;
    width: max-content;
    width: 100%;
    border-radius: 4px 4px 0px 0px;
    margin-bottom: 0px !important;
    font-size: 0.9rem;
}



.landing-content footer {
    grid-area: footer;
}




.newchannel form {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.collapsible {
    position: relative;
}

.lamp {
    font-size: var(--font-item-bigger);
    padding: 3px;
    width: 34px;
    height: 34px;
    text-align: center;
    vertical-align: middle;
    border-radius: 100%;
    position: absolute;
    right: 0px;
    border: 3px solid #b6d5c9;
    background-color: #ecf8f3;
    margin-top: -3px;
}

.lamp:hover {
    border: 3px solid var(--action-color);
    background-color: var(--action-color);
}


.editing-space .lamp {
    right: 0px;
}


.lamptext {
    border: 1px dotted var(--acc2-color);
    border: 3px solid #b6d5c9;
    background-color: rgba(243, 188, 68, 0.199);
    background-color: #ecf8f3;
    padding: 15px 15px;
    display: none;
    overflow: hidden;
    margin: 0px 40px 20px 0;
}

.lamptext h3 {
    position: relative !important;
    margin-top: 0px !important;
    display: inline-block !important;
    background-color: rgba(243, 188, 68, 0) !important;
    color: var(--base-color) !important;
    padding: 0 !important;
    font-weight: bold !important;
    font-size: calc(var(--font-item)*1.2) !important;
}


.hidden {
    display: none;
}

.visible {
    display: block;
}



.all-content {
    background-color: var(--main-bg-color);
    display: grid;
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
        "header"
        "main"
        "footer";
    max-width: 1800px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
}

header {
    background-color: var(--hf-color);
    color:white;
    width: 100%;
    grid-area: header;
    grid-template-columns: min-content min-content auto min-content;
    display: grid;
    column-gap: calc(var(--space-item)*2);
    grid-template-areas:
        "logobox headl searchpoint userpoint";
    padding: 15px var(--space-item);
    height: fit-content;
}

#flaxx {
    display: none;
}


.mainmenu {
    grid-area: headl;
    display: flex;

}

.mainmenu p {
    display: inline-block;
    padding: 0;
    margin: 0;
}

.mainmenu a {
    display: flex;
    align-items: center;
    height: 100%;
    color: var(--main-bg-color);
    text-decoration: none !important;
    padding: 0 calc(var(--space-item)/2);
}

.mainmenu a:hover {
    background: var(--hf2-color);
    color: var(--action-color-light);
}

.mainmenu .sel a {
    color: var(--action-color-light);
}

.logo-box {
    grid-area: logobox;
    display: flex;
    align-items: center;
}


.searchpoint {
    margin-right: 40px;
}

header .searchpoint {
    grid-area: searchpoint;
    margin-right: 0px;
}

.searchpoint form {
    display: flex;
    padding: 0;
    gap: 10px;
    padding-bottom: 20px;
    flex-wrap: wrap;
}


.searchpoint form>div {
    display: flex;
    flex: 1;
    padding: 0;
    gap: 0px;
    flex-wrap: no-wrap;
}


.searchpoint form input {
    flex: 1;
}

header .searchpoint form {
    padding-bottom: 0px;
}

.searchpoint * {
    margin: 0% !important;
}


.searchpoint a {
    color: var(--main-bg-color);
}

.searchpoint .searchterm {
    border: 1px solid var(--action-color);
    padding: 5px;
    height: 36px;
    border-radius: 5px 0 0 5px;
    outline: none !important;
    box-shadow: none !important;
    color: #9DBFAF;
    margin: 0px !important;
    background-color: var(--main-bg-color);
}

.searchtype {
    border: 1px solid var(--action-color);
    border-right-width: 1px;
    border-radius: 5px;
    outline: none !important;
    box-shadow: none !important;
    height: 36px;

}

.searchterm:focus {
    color: #000;
    background-color: #fff;
}

.searchterm::placeholder {
    opacity: 1;
}

.searchterm:focus::placeholder {
    opacity: 0;
}


.searchpoint .searchbutton {
    width: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-items: center;
    height: 36px;
    border: 3px solid var(--action-color);
    color: #fff;
    border-radius: 0 5px 5px 0;
    background-color: var(--action-color);
    cursor: pointer;
    font-size: 18px;
}


.searchlink {
    font-size: 20px;
}

.userpoint {
    display: flex;
    align-items: center;
    grid-area: userpoint;
}


.userpoint .ava div {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.userpoint .username {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(var(--space-item)/2);
}

.open-upm {
    font-weight: bold;
    color: var(--main-bg-color);
}

.open-upm,
.open-upm:hover,
.open-upm:focus {
    padding: 0;
    outline: 0;
}


.usermenu {
    z-index: 400000;
    position: absolute;
    right: var(--space-item);
    top: calc(var(--header-height)*1);
    padding: 10px;
    background-color: var(--main-bg-color);
    border: 3px solid var(--main-bg-color);
    border-radius: 0px;
    transition: transform ease-out .15s, opacity ease-out .15s;
    transform-origin: right top;
    transform: scale(.9);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
    opacity: 0;
    display: none;
    width: fit-content;
}

.usermenu hr {
    border: none;
    margin: 10px 0;
    border-top: 1px solid var(--bcol-bg-color);

}

.usermenu p {
    margin: 0 !important;
    padding: 8px 0px !important;
    line-height: normal;
}

.usermenu.is-open {
    transform: initial;
    opacity: 1;
    display: block;
}



.body-box {
    grid-area: main;
    background-color: var(--bcol-bg-color);
    display: grid;
    grid-template-columns: var(--panel-width) auto;
    grid-template-areas:
        "panel aria";
}


.panel {
    background-color: var(--acol-bg-color);
    grid-area: panel;
    padding: 0;
}

.list-box {
    padding: var(--space-item) 0;
}

.list-box .el-menu {
    margin: 0 0 calc(var(--space-item)/2) 0;
    padding: calc(var(--space-item)*0.4) var(--space-item);
    line-height: normal;
    display: block;
    border-left: 3px solid rgba(0, 0, 0, 0);
}

.list-box .el-menu-but {
    margin: calc(var(--space-item)/2*-1) 0 var(--space-item) 0;
    padding: calc(var(--space-item)*0.3) var(--space-item);
    display: block;
    border-left: 5px solid rgba(0, 0, 0, 0);
}

.list-box .sel {
    background-color: var(--bcol-bg-color);
    border-left: 6px solid var(--action-color);
}

.list-box hr {
    padding: 0;
    height: 0;
    border: none;
    border-top: 1px solid var(--bcol-bg-color);
    margin: 0 0 var(--space-item) 0;
    display: block;
}


section.aria {
    grid-area: aria;
    position: relative;
}


.userhead {
    max-height: fit-content;
    overflow: hidden;
    padding: 0;
}

.userhead div {
    background-color: var(--action-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(var(--space-item)*2);
    row-gap: calc(var(--space-item)/2);
    padding: calc(var(--space-item)/2) calc(var(--space-item)*2);
    flex-wrap: wrap;
}

.userhead p {
    line-height: 1em;
    padding: 0;
    margin: 0;
    color: white;
}

.userhead a {
    color: white;
    text-decoration: underline;
}

.userhead a:hover {
    color: white; 
}


.userhead .alarm {
    display: flex;
    gap: 5px;
    align-items: center;

}

.userhead .alarm::before {
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-regular);
    content: '\f071';
    color: orangered;
    padding: 0;
    line-height: 0;
    display: inline-block;
    font-size: x-large;
}

.userhead .alarm a {
    color: white;
}

.userhead .clienthead {
    background-color: var(--main-bg-color);
    color: var(--base-color);
}

.userhead .clienthead p,
.userhead .clienthead a {
    color: var(--base-color);
}


.wrapp-box {
    padding: calc(var(--space-item)*2);
}

.card {
    background-color: var(--main-bg-color);
    ox-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: calc(var(--space-item)*2);
    margin-bottom: calc(var(--space-item)*2);
    border-radius: 6px;
}

.card > h3  {   
    max-width: 1000px;
    overflow: hidden;      
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 30px;
}


.reqstat::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: '\f111 \00A0';
  }

.reqblue::before {
    color: DeepSkyBlue;
}

.reqgreen::before {
    color: green;
}

.reqyell::before {
    color: gold; 
}

.reqred::before {
    color: red;
}


.wcard {
    display: grid;
    grid-template-columns: auto 200px;
    column-gap: 20px;
}

.sticky {
    position: sticky;
    top: 20px;
}

.control-block {
    border-left: 6px solid var(--attn);
    border-radius: 6px;
    background-color: var(--acol-bg-color);
    margin-top: var(--space-item);
    padding: calc(var(--space-item)/1);
}

.control-block>button,
.control-block>.button {
    float: right;
    clear: both;
    margin-top: -2px;

}

.control-block dl {
    padding-top: 10px;
    margin-top: 4px;
    display: grid;
    row-gap: 4px;
    font-size: var(--font-item-small);
}

.control-block dl.logs {
    /*font-family: 'Courier New', Courier, monospace;*/
    grid-template-columns: max-content max-content auto;
}

.control-block dl.logs {
    line-height: 8px;
}


.control-block dl.reqs {
    grid-template-columns: max-content auto auto;
}

.control-block dt {
    padding-right: var(--space-item);
    font-weight: normal;
    text-align: right;
}

.control-block dt::after {
    content: ": ";
}

.control-block dd {
    /* text block in comment section*/
    max-width: 600px;
}



.notes {
    margin-top: calc(var(--space-item)*3);
    max-width: 600px;
}

.notes a {
    color: var(--action-color);
    text-decoration: underline;
}


.notes dt {
    ext-align: center;
    margin-bottom: 3px;
    padding-left: 15px;
    color: #788091;
    font-weight: 100;
}


.notes dl.lists img {
    max-width: 100%;
    height: auto;
}

.notes>button,
.notes>.button {
    float: right;
    clear: both;
    margin-top: -2px;
}

.notes div {
    padding: var(--space-item);
    margin-bottom: 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    /*background-color: #d9d9d9;
    background-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%);*/
    border: 2px solid #dee0e3;
}

.notes dd {
    text-align: left;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

.menu-section {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    padding: 0;
    margin: 0;
    margin-bottom: var(--space-item);
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 5px;
    flex-wrap: wrap;
}

.menu-section p {
    padding: 0;
    text-decoration: none;
    display: block;
    margin: 0;
}

.menu-section h6 {
    color: var(--action-color);
    padding: 0;
    text-decoration: none;
    display: block;
    margin: 0;
    text-transform: uppercase;
}

.menu-section p.sel {
    border-bottom: 3px solid var(--action-color);
    font-weight: 700;
    margin-bottom: -2px;
}


.filters {
    background-color: var(--acol-bg-color);
    padding: var(--space-item);
    display: flex;
}


.filters div {
    margin-right: var(--space-item);
}

.filters div:last-child {
    padding-left: var(--space-item);
    border-left: 1px solid var(--bcol-bg-color);
}


.filters div label {
    margin: 0;
    padding: 0;
}

.filters>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[title~=admin],
[title~=super] {
    font-weight: bold;
    color: var(--attn);
}

.dateview table {
    text-align: left;
    position: relative;
    width: 100%;
    border-top: 1px solid var(--bcol-bg-color);
    margin-bottom: calc(var(--space-item)*1);
    background-color: var(--main-bg-color);
}

.dateview input,
.dateview select,
.dateview textarea,
.dateview label {
    margin: 0;
    padding: 0;
}



.dateview input[type=checkbox]:checked {
    outline: 2px solid var(--base-color);
    border-radius: 2px;
}

.dateview a {
    color: var(--action-color);
    font-weight: bold;
}

.dateview td a {
    color: var(--action-color);
    font-weight: normal;
}


.dateview th,
.dateview td {
    padding: calc(var(--space-item)/3) calc(var(--space-item)/2);
    vertical-align: top;
    border-right: 1px solid var(--bcol-bg-color);
    border-bottom: 1px solid var(--bcol-bg-color);
}

.law {
    font-weight: bold; 
    color: slateblue !important;}


.dateview td.entname .button {
    float: right;
}

.dateview th p {
    padding: 0;
    margin: 0;
}

.dateview tr:not(.tableheader) th {
    padding: 0;
    border-bottom: 0px solid #000;    
}

.dateview tr:hover td {
    background-color: var(--acol-bg-color);
}

.dateview .plus {
    background-color: var(--action-color-slight);
}

.dateview .minus {
    background-color: var(--attn-slight);
}


.dateview thead {
    background-color: var(--main-bg-color);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.dateview tfoot td {
    padding: calc(var(--space-item)*1) calc(var(--space-item)*2);
}

.dateview .fragment {
    white-space: nowrap;
    /* Запрещаем перенос строк */
    overflow: hidden;
    /* Обрезаем все, что не помещается в область */
    padding: 5px;
    /* Поля вокруг текста */
    text-overflow: ellipsis;
    /* Добавляем многоточие */
    max-width: 150px;
}


.dateview .button {
    padding: 2px 10px;
    min-height: auto;
}

.dateview .buttonset {
    display: block;    
    margin-bottom:3px;     
}


.dateview .highlight {
      background-color: #f0f8ff; /* Цвет фона для выделения строки */
}

.dateview .highlight .action-btn {
      border:0px;
      color:var(--base-color);
      font-weight: 400;
}

.dateview .highlight .action-btn:hover {
      color:var(--base-color);
      background: none;
      font-weight: 400;
      cursor:default;
}


.dateview .undo-icon {
      margin-left: 10px;
      color: red;
      cursor: pointer;
      font-size: 16px;
      display: none; /* Скрываем крестик изначально */
}

.dateview .undo-icon.show {
      display: inline; /* Показываем крестик при необходимости */
}




.buttonsettop {
    display: flex;
    align-items: baseline;
    gap: calc(var(--space-item)/2);
    flex-wrap: wrap;
    margin-bottom: 30px;
    margin-top: -10px;      
    justify-items: end;
}

.buttonsettop  button {
    display: flex;
    align-items: baseline;
    gap: calc(var(--space-item)/2);
    flex-wrap: nowrap;
    margin-bottom: 0px;
    margin-top: 0px;
}



.dateview td .buttonset {
    display: flex;
    align-items: flex-end;
    gap: calc(var(--space-item)/2);
    flex-wrap: wrap;
    margin-bottom: 0px;
    margin-top: 0px;
}




.titleblock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}



.statinfo {
    display: flex;
    gap: calc(var(--space-item)*2);
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1px;
}

.statinfo p {
    padding: 0;
    margin: 0;
}

.infospace {
    display: grid;    
    grid-template-columns: 300px auto;
    grid-template-rows: auto;
    column-gap: 0.1em;    
    align-items: start;    
    border: 1px solid var(--bcol-bg-color);
    border-left: 6px solid var(--bcol-bg-color);
    border-radius: 6px;
    padding: 40px 10px 30px 10px;        
    margin-bottom: 40px;    
}

.savereset {
    padding-bottom:30px;
}


.infospace .savereset {
    padding-top:30px;
}

.infospace a {
    color: var(--action-color);
    font-weight: bold;
}

form.editing {
    display: block;
    argin-bottom: 70px;
}

.infospace>p>input[type=button],
.infospace>p>.button {
    padding: 2px calc(var(--space-item)/2);
}

.infospace>div,
.infospace>h4 {
    padding: calc(var(--space-item)/2) 0;
    margin: 0;
    width: auto;
    max-width: 600px;    
}

.infospace h4 {
    text-align: right;
    padding-right: var(--space-item);
    line-height: 120%;
}

.infospace div p:last-of-type {
    margin-bottom: 0;
}

.infospace span:not([title="admin"]),
.infospace span:not([title="super"]) {
    font-size: var(--font-item-small);
}

.admspace {    
    border: 1px solid var(--attn);
    border-left: 6px solid var(--attn);
    background-color: var(--acol-bg-color);
}

.infospace h3 {
    position: absolute;    
    margin-top:-41px;
    margin-left: 10px;
    display: block;        
    color: white;
    padding: 0px 10px 1px 10px;
    font-weight: 100;
    font-size: var(--font-item);
    align-self: flex-start;
    border-radius: 0px 0px 6px 6px;    
    background: var(--action-color);
}

.admspace h3 {
    background: var(--attn); 
}

.admspace pre {
    font-size:0.9rem;
    background-color: wheat;
    color: darkmagenta;
    padding: 1px 13px;
    margin:0;
    display: inline-block;
}

.form-group {
    width: 100%;
}

.editing-space .form-group {
    display: flex;    
    gap: var(--space-item);
    flex-wrap: wrap;
    padding-right: 50px;
}

.editing-space .form-group>div {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: calc(var(--space-item)/2);
    flex-wrap: wrap;
}


.form-group small {
    display: inline-block;
    margin-bottom: -15px;    
}

.form-group input[type=text],
.form-group input[type=tel], 
.form-group select {
    width: 100%;
}

.form-group label {
    padding: 0px;
    margin-bottom: 0px;
}

.regions {
    flex-direction: column;
}


.regions * {
    width: 90%;
    margin: 0;
    padding: 0;
}

.regions input {
    width: fit-content;

}

.regions fieldset {
    display: flex;
    gap: calc(var(--space-item)/2);
    width: 100%;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.27);
    padding: 20px;
}

.regions legend {
    font-size: 1em;
    font-weight: bold;
    padding: 0 12px;
    background-color: var(--main-bg-color);
    width: fit-content;
    display: flex;
    gap: 8px;
    justify-items: center;
    align-items: center;
}



.editing-space .form-group input[type="radio"]:checked+label {
    font-weight: bold;
}

.editing-space textarea {
    width: 100%;
    min-height: 200px;
}

.editing-space select {
    min-width: 120px;
    color: #363636;
    background-color: var(--main-bg-color);
    min-height: 30px;
}

.editing-space .comment {
    padding-bottom: var(--space-item);
    font-size: var(--font-item-small);
}

.clouds {
    display: flex;
    list-style: none;
    padding: 0;
    column-gap: var(--space-item);
}


footer {
    grid-area: footer; 
    padding: var(--space-item) calc(var(--space-item)*2);
    background-color: var(--hf-color);
    color: var(--main-bg-color);
    padding: 40px;
}






.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  .footer-block {
    flex: 1 1 100%;
    padding: 10px;
    text-align: left;
  }
  
  .footer-block ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-block ul li {
    margin-bottom: 5px;
  }
  
  .footer-block a {
    color: var(--action-color-light);
    text-decoration: none !important;
  }
  
  .footer-block a:hover {
    text-decoration: underline !important;
  }
  
  .footer-block h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .footer-block p {
    margin-bottom: 10px;
  }
  
  /* Адаптивность */
  @media (min-width: 768px) {
    .footer-block {
      flex: 1 1 50%; /* На планшетах два блока в строку */
    }
  }
  
  @media (min-width: 992px) {
    .footer-block {
      flex: 1 1 33.333%; /* На десктопах три блока в строку */
    }
  
    .footer-block:nth-child(4),
    .footer-block:nth-child(5),
    .footer-block:nth-child(6) {
      flex: 1 1 100%; /* Блоки 4, 5, 6 занимают всю ширину */
    }
  }



.user-agent,
.user-client,
.user-other {
    display: none !important;
}

input[name="type"][value="client"]:checked+label+.user-agent {
    display: block !important;
}

input[name="belong"][value="client"]:checked+label+.user-client {
    display: block !important;
}

input[name="belong"][value="other"]:checked+label+.user-other {
    display: block !important;
}

input[name="request-text"] {
    width: 100%;
}


.admbut {
    position: relative;
    text-align: right;
}


.admbut a {
    text-align: right;
    margin: 0 0 10px 0px;
}






.price-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px 20px;
    justify-content: space-between;
    padding: 0;
    padding-top: 20px;
}

.price-group .block {
    display: flex;
    flex-direction: column;
    margin:0 0 20px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 20px 10px;
}

.price-group .sel {
    background-color: #e2ebe6;
}

.price-group .sel .title h2::before {
    content: "\2713  \00A0";
    display: inline-block;
    margin-left: -40px;
    color: var(--action-color);
}

.price-group .title h2,
.price-group .pt-footer p {
    padding: 5px;
    margin: 0px;
    text-align: center;
    font-weight: 700;
}

.price-group .title {}


.price-group .content {
    padding: 20px 0 0px 0;
}

.price-group .price {
    position: relative;
    display: block;
    margin-bottom: 0.625rem;
    text-align: center;

}

.price-group .price span {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    font-weight: bold;

}


.price-group span.unic {
    font-size: 1.8rem;
}

.price-group .price sup {
    position: absolute;
    margin-left: -20px;
    margin-top: 30px;
    font-size: 1.5rem;
}

.price-group .hint {
    font-style: italic;
    text-align: center;
}

.price-group .features {
    text-align: left;
    padding: 0px;
    flex-grow: 1;   
}

.price-group .features ul {
    list-style-type: none;

}

.price-group .features li::before {
    content: "\2023";
    font-weight: bold;
    display: block;
    margin-left: -20px;
    float: left;

}

.price-group .pt-footer {
    text-align: center;
    font-size: 0.95rem;
}




.bottom-popup {
    position: fixed;
    z-index: 10000000000000;
    left: 0;
    right: 0;
    bottom: 50px;
    display: flex;    
    justify-content: center;
    transition: 0.3s ease;
    isplay: none;
    animation: slide-up 0.3s ease forwards;
    text-align: left;
}

.bottom-popup__wrp {
    background-color: #fff;
    padding: 35px 45px;
    box-shadow: 0px 4px 41px rgba(0, 0, 0, 0.25);
    max-width: 1100px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-radius: 20px;
}

.bottom-popup__title {
    font-size: 24px;
    line-height: 28px;
    color: #090C15;
    margin-bottom: 15px;
}

.bottom-popup__desc {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 150%;
    color: #7A808D;
}

.bottom-popup__btn button {
    white-space: nowrap;            
}

.bottom-popup.open {
    transform: translateY(0);
    display: block;
}

.bottom-popup__main {
    padding-right: 35px;
}

.bottom-popup__desc a {
    color: #000;
    text-decoration: underline;
}

@media screen and (max-width: 940px) {
    .bottom-popup {
        bottom: 0;
    }

    body>jdiv {
        z-index: 1000;
        position: relative;
    }
}

@media screen and (max-width: 580px) {
  
   .bottom-popup__main {
        padding-right: 0;
    }
  
    .bottom-popup__wrp {
        flex-direction: column;
    }

    .header-phones__links {
        margin-bottom: 12px;
    }


    .bottom-popup__btn {
        padding-top: 25px;
        width: 100%;
    }

    .bottom-popup__btn .btn {
        width: 100%;
        color: #fff;
    }
}

@media screen and (max-width: 480px) {
    .bottom-popup__wrp {
        padding: 20px 20px;
    }

    .bottom-popup__title {
        font-size: 18px;
        font-weight: 600;
    }

    .bottom-popup__desc {
        font-size: 14px;
    }


}




/*PERSONAL*/
/*
.personal .title{
    background: #78CFBF;
}
.personal .content,.personal .pt-footer{
    background: #82DACA;
}
.personal .content:after{
	border-top-color: #82DACA;
}
.personal .pt-footer:after{
    border-top-color: #FFFFFF;
}
*/

/*PROFESSIONAL*/
/*
.professional .title{
    background: #3EC6E0;
}
.professional .content,.professional .pt-footer{
    background: #53CFE9;
}
.professional .content:after{
	border-top-color: #53CFE9;
}
.professional .pt-footer:after{
    border-top-color: #FFFFFF;
}
*/

/*BUSINESS*/
/*
.business .title{
    background: #E3536C;
}
.business .content,.business .pt-footer{
    background: #EB6379;
}
.business .content:after{
	border-top-color: #EB6379;
}
.business .pt-footer:after {
	border-top-color: #FFFFFF;
}
*/






/*
<link rel='stylesheet' media='(max-width: 999px) and (min-width: 810px)' href='css21/nwide.css' />
<link rel='stylesheet' media='(max-width: 809px) and (min-width: 620px)' href='css21/zwide.css' />
<link rel='stylesheet' media='(max-width: 619px)' href='css21/zzwide.css' />
*/


@media screen and (max-width: 1500px) {


.price-group {
    grid-template-columns: repeat(2, 1fr);
}    

}



@media screen and (max-width: 1240px) {

    /* 
header {
    border-bottom: var(--border-width) solid var(--border-color);
    grid-area: header;
    grid-template-columns: min-content auto min-content;
    display: grid;
    grid-template-areas:
    "logobox searchpoint userpoint"
    "headl headl headl";
}
*/
    header .searchpoint form {
        display: none;
    }

    header .searchpoint p {
        display: block;
        float: right;
    }

    .aria {
        overflow-x: hidden;
    }

    .table {
        border-width: 0px !important;
        display: block;
    }

    .dateview .filters {
        display: flex;
        flex-wrap: wrap;
        row-gap: 10px;
    }


    .dateview tr {
        border-width: 0px;
        display: flex;
        flex-direction: column;
        margin: 10px;
        background-color: var(--main-bg-color) !important;
    }

    .dateview tr:nth-child(1) td {
        padding-top: calc(var(--space-item)/3);
    }

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

    .dateview tbody td {
        display: block;
        border-width: 0px !important;
        padding: 4px 8px 4px 8px;
        margin: 0;
        background-color: var(--acol-bg-color);
    }

    .dateview .tableheader {
        display: none;
    }

    .dateview thead {
        position: static;
        background-color: none;
        display: block;
        top: 0;
        z-index: 100;
        box-shadow: none;
    }

    .dateview thead tr {
        padding-bottom: 0px;
    }

    .dateview .fragment {
        white-space: wrap;
        /* Разрешаем перенос строк */
        max-width: none;
    }

    .dateview .hidden {
        display: inline-block;
        /*    width: 250px;
    margin-left:-0px; */
        /*border-bottom:1px dotted #b4b9bf;*/
        margin-right: 10px;
        font-weight: bold;
    }

    .dateview .hidden br,
    .dateview td br {
        display: none;
    }


    .dateview .buttonset {
        margin-top: 50px;
    }






}



@media screen and (max-width: 1000px) {


    .wrapp-box,
    .card,
    .userhead div {
        padding: calc(var(--space-item)*0.5);
    }

    .buttonsettop {margin-top:6px;}


    header {
        grid-template-columns: min-content auto fit-content fit-content;
        column-gap: calc(var(--space-item)*1);
        display: grid;
        grid-template-rows: auto auto;
        grid-template-areas:
            "flaxx logobox searchpoint userpoint"
            "headl headl headl headl";
        align-items: center;
    }


    header .searchpoint form {
        display: none;
    }

    header .searchpoint p {
        display: block;
        float: right;
    }

    .mainmenu {
        padding: 15px 0px !important;
    }

    .body-box {
        grid-template-columns: min-content auto;
    }


    .infospace {
        grid-template-columns: auto;
    }

    .infospace h4 {
        text-align: left;
        padding-right: var(--space-item);
        border-bottom: none;
        padding-bottom: 0
    }



    .aria {
        overflow-x: hidden;
    }


    #flaxx {
        display: flex;
        justify-items: center;
        align-items: center;
        grid-area: flaxx;
        z-index: 300001;
        height: fit-content;
        color: #fff !important;
        opacity: 1;
        font-size: calc(var(--font-item-bigger)*1.2);
        font-size: 1.6em;
        width: 32px;
        overflow: hidden;


    }

    .visible {
        display: none;
    }

    .block {
        display: inline-block;
    }

    .noscroll {
        overflow: hidden;
    }


    #flaxxslide {
        position: fixed;
        background: var(--acol-bg-color);
        z-index: 300000;
        right: 0px;
        left: 0;
        top: 0;
        width: fit-content;
        bottom: -20px;
        margin-top: 93px;
        overflow-y: scroll;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .9);
    }


    .land-00>div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: none;
        gap: 40px;
        flex-direction: row;
    }

    .land-00>div>div {
        flex: none;
        width: 60%;
        max-width: 60%;
    }

    .land-00>div>div:last-child {
        flex: none;
        width: 35%;
        max-width: 40%;

    }

}


@media screen and (max-width: 820px) {

    .land-00>div {
        flex-direction: column;
        gap: 60px;
    }

    .land-00>div>div {
        width: 100% !important;
        max-width: 100% !important;
    }

    footer .disclamer {
        columns: 1;
    }




    .price-group {
        grid-template-columns: repeat(1, 1fr);
    }    


}