html {
    scroll-behavior: smooth;
}
.newato {
    background-color: gray;
    color: yellow;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.delord {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: red;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 10px;
}
.newatp-alert {
    position: fixed;
    bottom: 50px;
    left: 0;
    background-color: rgba(255, 0, 0, 0.899);
    z-index: 99999999;
    width: 100%;
    text-align: center;
    color: white;
    padding: 10px 0;
}
.newatp-alert a {
    color: #02ff2b;
}
.oldatp {
    color: #02ff2b;
    font-size: 12px;
    padding: 3px;
    border: 1px solid #02ff2b;
    margin-left: 10px;
    text-align: center;
}
.oldatp a {
 color: #02ff2b;
}
.basefloor {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-left: 15px;
    padding: 5px;
    border: 1px solid gray;
}
.defblock {
    display: flex;
    flex-direction: row;
}
.allbasedown {
    display: flex;
    flex-direction: row;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
#d1, #d2, #d3 {
    width: 30%;
}
.app-no {
    display: flex;
    text-align: center;
    justify-content: center;
    gap: 20px;
}
.app-totalblock {
    margin-top: 20px;
    width: 95%;
    margin-inline: auto;
    margin-bottom: 50px;
    display: block;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    position: relative;
}
#app-alert {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9999999;
    background-color: rgb(241, 75, 37);
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    min-width: 30%;
    text-align: center;
    transition: all .3s ease;
}
.masterdel {
    padding: 10px 15px;
    background-color: rgba(255, 0, 0, 0.297);
    color: white;
    border-radius: 9999999999px;
    cursor: pointer;
}
.app-title {
    color: var(--tg-theme-text-color);
    display: table;
    margin-inline: auto;
    padding: 5px 10px;
    font-size: 19px;
    margin-bottom: 15px;
}
.app-add-block {
    display: block;
    overflow: hidden;
    border: 1px solid var(--tg-theme-hint-color);
    padding: 10px;
    border-radius: 10px;
    height: 35px;
    transition: all .3s ease;
    margin-bottom: 20px;
}
.app-addorder {
    color: var(--tg-theme-button-text-color);
    display: table;
    margin-inline: auto;
    padding: 5px 15px;
    border-radius: 5px;
    min-width: 30%;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--tg-theme-button-color);
    border-radius: 5px;
    cursor: pointer;
}
.app-add-title {
    color: var(--tg-theme-hint-color);
    display: table;
    margin-inline: auto;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 15px;
}
.app-input {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--tg-theme-text-color);
    display: table;
    margin-inline: auto;
    padding: 5px 10px;
    font-size: 19px;
    margin-bottom: 15px;
    outline: none;
    text-align: center;
    color: var(--tg-theme-text-color);
    border-radius: 0;
}
.app-button {
    color: var(--tg-theme-button-text-color);
    display: table;
    margin-inline: auto;
    padding: 5px 15px;
    border-radius: 5px;
    min-width: 30%;
    align-items: center;
    margin-bottom: 15px;
    background-color: var(--tg-theme-button-color);
    border-radius: 5px;
    border: none;
}
.app-orders-block {
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}
.app-orders-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.app-menu-point {
    font-size: 16px;
    color: var(--tg-theme-hint-color);
}
.app-show-myorders {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-wrap: nowrap;
}
.app-card-floor {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.app-ordercard {
    background-color: var(--tg-theme-section-bg-color);
    padding: 10px;
    border-radius: 10px;
}
.app-oc-title {
    color: var(--tg-theme-section-header-text-color);
}
.app-oc-name, .app-oc-type, .app-oc-message {
    color: var(--tg-theme-subtitle-text-color);
}
.app-oc-status {
    padding: 2px 10px;
    color: white;
    border-radius: 5px;
}

.callsblock {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}
.callsfavblock {
    display: none;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 20px;
}
.pinblock {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 5px;
    color: white;
    border: 1px solid yellow;
    padding: 5px;
    border-radius: 5px;
    max-height: 150px;
    overflow-y: scroll;
}
.call-text {
    width: 90%;
    resize: none;
    background-color: transparent;
    font-size: 14px;
    color: white;
    border: none;
    overflow: hidden;
}
.favcall {
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.favcall img {
    width: 50%;
    display: flex;
    margin-inline: auto;
    cursor: pointer;
}
.myfav {
    background-color: transparent;
    border: 1px solid yellow;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 0 5px 0 5px;
    cursor: pointer;
}



.ablock2 {
    display: flex;
    flex-direction: column;
}
.add2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.add2plus {
    width: 30%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ablock3 {
    display: flex;
    flex-direction: column;
}
.add3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.add3plus {
    width: 30%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.aplus {
    width: 10%;
    margin-inline: auto;
    background-color: rgba(128, 128, 128, 0.362);
    border-radius: 500000000px;
    padding: 10px;
    cursor: pointer;
    transition: all .3s ease;
}
.aplus:hover {
    background-color: rgba(128, 128, 128, 0.505);
    transform: scale(1.1);
}
.addesc {
    color: white;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
}



body {
    background-color: rgb(53, 53, 53);
    margin: 0;
    padding: 0;
    color: #757575;
    font-family: 'Nunito Sans', sans-serif;
}
.hidden {
    position: absolute;
    z-index: -9999999;
    top: -1000%;
    opacity: 0;
}
.contacts-block {
    display: none;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 60%;
    padding-top: 20px;
    padding-bottom: 50px;
    border: 1px solid white;
    border-radius: 5px;
    background-color: rgb(53, 53, 53);
    color: white;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-height: 80vh;
    overflow: scroll;
    overflow-x: hidden;
}
.ff {
    display: block;
    flex-wrap: wrap;
    flex-direction: column;
    width: 50%;
    margin-inline: auto;
    border: 2px solid rgb(92, 92, 92);
    border-radius: 20px;
    padding: 20px 10px;
    margin-bottom: 30px;
    position: relative;
    height: 30px;
    overflow: hidden;
    transition: all .3s ease;
    cursor: pointer;
}
.ff:hover {
    background: #414141;
}
.dfloor {
    display: inline-block;
    margin-inline: auto;
    align-items: baseline;
    justify-content: center;
}
#down-btn {
    display: none;
}
.downbase {
    justify-content: center;
    color: white;
    margin-inline: auto;
    display: flex;
    align-items: center;
    font-size: 21px;
    margin-bottom: 20px;
}
#contacts {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    cursor: pointer;
    transition: all .3s ease;
    padding: 5px;
    border-radius: 5px;
}
#contacts:hover {
    background-color: rgb(81, 81, 81);
}
.fiofloor {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin-inline: auto;
    align-items: center;
    margin-bottom: 10px;
}
.one-contact {
    background-color: red;
    width: 50%;
    margin-inline: auto;
    padding: 5px 10px;
    text-align: center;
    background-color: rgb(74, 74, 74);
    border-radius: 5px;
    cursor: pointer;
    transition: all .3s ease;
}
.one-contact:hover {
    background-color: rgb(86, 86, 86);
}
.close-cb {
    position: absolute;
    top: 33px;
    z-index: 999;
    right: 22%;
    background-color: rgb(86, 86, 86);
    cursor: pointer;
    color: white;
    width: 25px;
    height: 25px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

.predform {
    position: absolute;
    background-color: #a8a8a8;
    left: 0;
    top: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    width: 300px;
    padding: 10px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.predgo {
    width: 100%;
    background-color: #186B18;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
    margin-bottom: 10px;
}
.predgo:hover {
    background-color: #1ab01a;
}
.predclose {
    width: 100%;
    background-color: transparent;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
}
.predclose:hover {
    background-color: #b83c4f;
}

.orderdate {
    margin-left: 5px;
    color: gray;
}
.showfiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
    }
.file-wrap {
    width: 10%;
    margin-left: 20px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    border: 2px solid rgb(220, 220, 220);
    border-radius: 10px;
    transition: all .3s ease;
    padding: 10px 0;
    height: 20vh;
    position: relative;
}

.delfile-form {
    position: absolute;
    top: 0;
    background-color: gray;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    z-index: -99999;
    opacity: 0;
}
.delfile-form label{
    font-size: 12px;
    text-align: center;
    color: white;
    margin-top: 15px;
    margin-bottom: 15px;
}
.delfile-form button {
    cursor: pointer;
    background-color: rgb(250, 91, 91);
    border: none;
    color: white;
    padding: 5px 0;
    transition: all .3s ease;
}
.delfile-form button:hover {
    background-color: red;
}
.not-delite {
    font-size: 12px;
    display: flex;
    padding-bottom: 5px;
    border-bottom: 1px solid white;
    justify-content: center;
    color: white;
    margin-top: 20px;
    width: 70%;
    margin-inline: auto;
    cursor: pointer;
    transition: all .3s ease;
    padding: 5px;
    border-radius: 10px;
}
.not-delite:hover {
    background-color: rgb(175, 175, 175);
}
    .fileicon {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: all .3s ease;
    height: 20vh;
    }
    .file-wrap:hover {
    border: 2px solid #3C8DBC;
    }
    .fileicon img {
        max-height: 60%;
        padding: 5px;
        object-fit: cover;
        image-rendering: optimizeSpeed;
    }
    .filetitle {
    text-decoration: none;
    font-size: 12px;
    color: gray;
    text-align: center;
    }
    .delite-file-cross {
        position: absolute;
        top: -10px;
        right: -10px;
        background-color: red;
        color: white;
        width: 25px;
        height: 25px;
        border-radius: 50000px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .fileicon2 {
    width: 10%;
    margin-left: 5px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    border-radius: 10px;
    transition: all .3s ease;
    padding: 10px 5px;
    height: 60%;
    }
    .fileicon2:hover {
        background-color: rgb(73, 73, 73);
    }
    .fileicon2 img {
        max-height: 60%;
        object-fit: cover;
        image-rendering: optimizeSpeed;
    }
    .filetitle2 {
    text-decoration: none;
    font-size: 10px;
    color: gray;
    text-align: center;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }

    .filename {
    text-align: center;
    margin-bottom: 10px;
    color: rgb(126, 126, 255);
    }
    .closefile {
    position: absolute;
    right: 20px;
    top: 10px;
    color: #3C8DBC;
    padding: 3px 10px;
    border-radius: 500px;
    cursor: pointer;
    transition: all .3s ease;
    }
    .closefile:hover {
    background-color: #3C8DBC;
    color: white;
    }
    .emptyfile {
    border: 2px dotted rgb(195, 195, 195);
    border-radius: 10px;
    height: 60px;
    text-align: center;
    width: 90%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(195, 195, 195);
    margin-inline: auto;
    transition: all .3s ease;
    }
    .filen {
        display: flex;
        flex-direction: column;
        width: 40%;
    }
    .filen2 {
        display: flex;
        flex-direction: column;
        width: 60%;
    }
    .emptyfile::after {
    content: 'Файлы не выбраны';
    }
    .emptyfile:hover {
    color: rgb(161, 161, 161);
    border: 2px solid rgb(161, 161, 161);
    }
    .addedfile {
    border: 2px solid rgb(104, 223, 0);
    background-color: rgb(104, 223, 0);
    border-radius: 10px;
    height: 60px;
    text-align: center;
    width: 90%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    margin-inline: auto;
    transition: all .3s ease;
    }
    .addedfile::after {
    content: '√ Файл выбран';
    }
    .formfile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: top;
        border: 2px solid white;
        border-radius: 20px;
        align-items: center;
        padding: 10px 5px;
        width: 60%;
        margin-inline: auto;
    }
    .formfile input {
        width: 30%;
        display: flex;
        margin-inline: auto;
        border: 1px solid rgb(117, 117, 117);
        background-color: #494949;
        color: white;
        padding: 5px 10px;
        outline: none;
        height: 30px;
        border-radius: 500px;
    }
    .formfile label {
        text-align: center;
        color: white;
    }
    .formfile button {
        margin-top: 10px;
    }
    .fileswrap {
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

.title {
    font-family: 'Nunito Sans', sans-serif;
}
.refresherblock {
    display: flex;
}

.send {
    display: flex;
    justify-content: center;
    width: 80%;
    margin-inline: auto;
    color: #ed4c4c;
    text-align: center;
}

.paymentform {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.paymentlabel {
    font-size: 19px;
    margin-bottom: 20px;
    text-align: center;
}
.paymentinput {
    margin-bottom: 20px;
    height: 20px;
    width: 50%;
    text-align: center;
    padding: 10px 20px;
    border-radius: 500px;
    outline: none;
    /* background-color: #464646; */
    background: linear-gradient(to left, #464646, #525252);
    color: white;
    font-size: 16px;
    border: 2px solid rgb(122, 122, 122);
    transition: all .3s ease;
}
.paymentbtn {
    width: 30%;
    height: 60px;
    border-radius: 500px;
    margin-inline: auto;
    border: none;
    margin-top: 30px;
    background-color: #464646;
    color: white;
    font-size: 18px;
    transition: all .3s ease;
    cursor: pointer;
}
.paymentbtn:hover {
    background-color: #555555;
    }

.payblock {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    text-align: center;
}
.payqr {
    width: 25%;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 15px;
    border-radius: 20px;
    background: white;
}
.paydown {
    color: white;
    margin-bottom: 20px;
}
.paydesk {
    padding: 10px;
    border-radius: 20px;
    border: 1px solid white;
    color: white;
    width: 90%;
}
.paydown:visited {
    color: white;
}
.paysumm {
    margin-bottom: 20px;
}



.updatemark {
    width: 25px;
    height: 25px;
    background-color: rgb(255 141 24);
    border-radius: 500px;
    position: absolute;
    right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    transition: all .5s ease;
}
.pricetable {
    border: 1px solid #7A7A7A;
    border-collapse: collapse;
    margin-top: 5px;
}
.pricetable td {
    border: 1px solid #7A7A7A;
    padding: 5px;
}
.updatemark::before {
    content: '';
    position: absolute;
    border: 2px solid rgb(255 141 24); 
    left: -5px;
    opacity: 0;
    right: -5px;
    top: -5px;
    bottom: -5px;
    border-radius: 50%;
    animation: pulse 2.5s linear infinite;
}
@keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }

main {
    padding-top: 60px;
    padding-bottom: 200px;
    width: 90%;
    margin-inline: auto;
}
.mains {
    width: 90%;
    margin-inline: auto;
}

.barndlist {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    cursor: default;
}
.ob {
    transition: all .3s ease;
    padding: 0 5px 0 5px;
    cursor: default;
}
.ob:hover {
    color: white;
}

.none-decor {
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.navbarmother {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    margin-bottom: 30px;
}
.navbarmother a{
    font-size: 14px;
    padding: 10px 10px;
    background-color: #4D4D4D;
    border-radius: 500px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    transition: all .3s ease ;
}
.navbarmother a:hover{
    background-color: #6d6d6d;
}

.header {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    font-family: 'Open Sans', sans-serif;
}

.header-logoblock {
    margin-bottom: 0;
    display: flex;
    background-color: #00000096;
    position: relative;
    backdrop-filter: blur(10px);
}

.logoblock-glass {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9995;
    box-shadow: inset 0 0 0 3000px rgba(97, 97, 97, 0.192);
    filter: blur(10px);
}

.martop {
    margin-top: 100px;
}

.header-logoblock img {
    height: 40px;
    padding: 10px 0;
    margin-inline: auto;
    z-index: 9996;
}

.header-navigation {
    padding: 0;
    background-color: #00000059;
    backdrop-filter: blur(10px);
}

.nav-list {
    margin: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 50px;
}

.nav-points,
.nav-points-two,
.nav-points-three,
.nav-points-four,
.nav-points-seven,
.nav-points-eight,
.nav-points-six,
.nav-points-five {
    padding: 5px 50px;
    color: #a7a7a7;
    z-index: 9999;
    mix-blend-mode: screen;
    text-align: center;
    display: flex;
    align-items: center;
    height: 50px;

}
.fiofloor {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    align-items: center;
}
.fizfloor {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.fizfloor label {
    font-size: 12px;
    margin-left: 5px;
}
.urfiz {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 5px;
    justify-content: space-between;
}
.sel-fiz, .sel-ur {
    width: 50%;
    text-align: center;
    cursor: pointer;
    transition: all .3s ease;
    border: 1px solid gray;
}
.sel-fiz:hover, .sel-ur:hover {
    background-color: gray;
    color: white;
}

.content {
    position: relative;
}

.welcome {
    margin-top: 50px;
    font-size: 30px;
    text-align: center;
}

.text-logo {
    font-family: 'Righteous', cursive;
    color: white;
    font-size: 35px;
}

/* .hello-animation {
    border-bottom: 1px solid white;
    width: auto;
    display: inline-block;
    position: relative;
    left: 15%;
    transform: translate(-50%,0);
    padding-bottom: 10px;
    width: 15%;
    transition: all 10s ease
} */

.hello-animation {
    clip-path: polygon(50% 30%, 15% 100%, 45% 100%);
    background-color: white;
    width: 100%;
    height: 315px;
    position: absolute;
    top: -275px;
    left: 50%;
    transform: translate(-50%, 0);
    /* background-blend-mode: difference; */
    mix-blend-mode: overlay;
}

.fakebtn {
    background-color: green;
    border-radius: 5px;
    margin-left: 15px;
    cursor: pointer;
    padding: 3px 5px;
    transition: all .3s ease;
    display: none;
    width: 20%;
    width: 20%;
}
.fakebtn::after {
    display: grid;
    color: white;

    justify-content: center;
    align-items: center;
    content: 'Применить';
    height: 100%;
}
.fakebtn:hover {
    background-color: rgb(0, 166, 0);
}

.hello-circle {
    background-color: #ffffffce;
    width: 30%;
    height: 50px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 40px;
    left: 30%;
    transform: translate(-50%, 0);
}
.motherspan {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
}
.motherspan input, .motherspan select, .motherspan textarea{
    display: flex;
    margin-left: auto;
    width: 100%;
    border: 1px solid rgb(117, 117, 117);
    background-color: #494949;
    color: white;
    padding: 5px 10px;
    outline: none;
}
.motherspan textarea {
    height: 150px;
    resize: none;
}
.editbtn {
    margin-inline: auto;
    border-radius: 500px;
    background-color: #186B18;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    margin-top: 20px;
    padding: 5px 10px;

}
.filebtn {
    width: 30%;
    height: 50px;
    border-radius: 500px;
    background-color: rgb(76, 76, 253);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
}
.btnsfloor {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    margin-bottom: 20px;
}

.motherspan input::-webkit-outer-spin-button,
.motherspan input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; 
}

.hello-circleTwo {
    background-color: #ffffffce;
    width: 30%;
    height: 50px;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    position: absolute;
    top: 40px;
    left: 30%;
    transform: translate(-50%, 0);
    filter: blur(20px);
}
.callnote {
    width: 25%;
}

.pathblock {
    width: 60%;
    margin-inline: auto;
    margin-top: 20px;
    margin-bottom: 30px;
    border: 1px solid white;
    border-radius: 20px;
    padding: 20px 10px;
}
.path-string {
    font-size: 19px;
    color: white;
}
.path-arrow {
    transform: rotate(180deg);
    width: 5%;
}

.nav-btn,
.nav-btn-two,
.nav-btn-three,
.nav-btn-four,
.nav-btn-seven,
.nav-btn-eight,
.nav-btn-five, 
.nav-btn-six {
    position: relative;
}

.decor-btn,
.decor-btn-two,
.decor-btn-three,
.decor-btn-seven,
.decor-btn-eight,
.decor-btn-four,
.decor-btn-six,
.decor-btn-five {
    background-color: #989898;
    width: 0%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease;
    z-index: -3;
}

.service-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 120px;
}

.service-floor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
    justify-content: center;
}

.cardlink {
    border-radius: 10px;
    padding: 20px;
    background-color: #383838f1;
    margin: 5px;
    width: 15%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    transition: all .5s ease;
    text-decoration: none;
    color: white;
    text-align: center;
    cursor: pointer;
}

.service-card {
    position: relative;
    height: 200px;
}

.service-icon {
    width: 50%;
    display: flex;
    margin: auto;
    opacity: .5;
    margin-bottom: 30px;
    transition: all .5s ease;
    transform: scale(1);
}

.service-title {
    margin-inline: auto;
    margin-bottom: 20px;
    text-align: center;
    height: 30px;
}

.goto {
    background-color: rgb(153, 153, 153);
    margin-top: 10px;
    display: flex;
    margin: 10px;
    width: 5%;
    height: 20px;
    border-radius: 200px;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    padding: 5px 10px;
    left: 80%;
    transform: translate(-50%, 0);
    overflow: hidden;
    transition: all .5s ease;
    cursor: pointer;
}

.goto-arrow {
    height: 70%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translate(0, -50%);
}

.goto-text {
    opacity: 0;
    transition: all 1s ease;
    color: white;
}

.whitetitle {
    color: white;
}

.sendform {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 30px;
}

.sendform input {
    margin-bottom: 20px;
    height: 20px;
    padding: 10px 20px;
    border-radius: 500px;
    outline: none;
    /* background-color: #464646; */
    background: linear-gradient(to left, #464646, #525252);
    color: white;
    font-size: 16px;
    border: 2px solid rgb(122, 122, 122);
    transition: all .3s ease;
}

.sendform input:focus {
    outline: none;
    /* background-color: #686868; */
    background: linear-gradient(to left, #6b6b6b, #525252);
    border: 2px solid rgb(255, 255, 255);
}

.sendform input::placeholder {
    color: rgb(172, 172, 172);
}

#goform {
    opacity: .5;
}
#gocheck {
    opacity: .5;
}

.spec-select {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 500px;
    outline: none;
    background: linear-gradient(to left, #464646, #525252);
    color: white;
    font-size: 16px;
    border: 2px solid rgb(122, 122, 122);
    transition: all .3s ease;
}
.spec-select option{
    background-color: gray;
}

.deskblock {
    width: 58%;
    margin-inline: auto;
    font-size: 14px;
}

.spec-select:focus {
    outline: none;
    /* background-color: #686868; */
    background: linear-gradient(to left, #6b6b6b, #525252);
    border: 2px solid rgb(255, 255, 255);
}

.inps {
    color: rgb(172, 172, 172);
}




.sendform button {
    width: 30%;
    height: 60px;
    border-radius: 500px;
    margin-inline: auto;
    border: none;
    margin-top: 30px;
    background-color: #464646;
    color: white;
    font-size: 18px;
    transition: all .3s ease;
    cursor: pointer;
}

.sendform button:hover {
    background-color: #686868;
}

.inputblock {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 60%;
    margin-inline: auto;
}

.inputblock label {
    padding-left: 20px;
    margin-bottom: 10px;
    color: white;
    font-size: 16px;
}

.special-label {
    padding-left: 20px;
    margin-bottom: 10px;
    color: white;
    font-size: 16px;
}
#bdinput {
        position: relative;
    }
#bdinput::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    /* left: 0; */
    right: 0;
    /* bottom: 0; */
    width: 30px;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="white" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>') no-repeat;
    background-size: 40%;
    background-position: center;
    cursor: pointer;
    
}
#bdinput::-webkit-inner-spin-button,
#bdinput::-webkit-clear-button {
        z-index: 1;
    }    

.price-block {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin-inline: auto;
    margin-bottom: 10px;
    margin-bottom: 20px;
}
.price-block2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 10px;
    margin-bottom: 20px;
}

.price-block select {
    padding: 0px 10px;
    height: 50px;
    background: linear-gradient(to left, #464646, #353535);
    color: white;
    cursor: pointer;
    outline: none;
    border: 2px solid rgb(122, 122, 122);
    border-radius: 50px;
    appearance: none;
    background: url(img/gotoarrow.svg) no-repeat right;
    background-position-x: calc(100% - 20px);
    background-size: 10px;
}

.price-block select option {
    width: 10%;
    display: flex;
    background-color: #353535;
    color: white;
    outline: none;
}
.galery-block {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}
.galery-card {
    width: 40%;
    margin-right: 30px;
    position: relative;
    left: 0px;
    margin-left: auto;
    margin-right: auto;
}
.photo {
    width: 100%;
}
.photo-desk {
    text-align: center;
    margin-top: 10px;
}
.dates {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.bb3 {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.back-btn2 {
    width: 80px;
    height: 80px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #484848;
    border-radius: 20px;
    cursor: pointer;
}
.back-btn2 img {
    transform: rotate(-90deg);
}
.forward-btn {
    width: 80px;
    height: 80px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    background-color: #484848;
    border-radius: 20px;
    cursor: pointer;
}
.forward-btn img {
    transform: rotate(90deg);
}

.prev-floor {
    width: 60%;
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-inline: auto;
}
.prev-card {
    width: 10%;
    border-radius: 10px;
    cursor: pointer;
}
.prev-card img{
    display: flex;
    margin: auto;
    width: 60%;
    height: 80px;
    padding: 10px 0;
}


.video {
    display: flex;
    margin-inline: auto;
    margin-top: 20px;
    width: 60%;
    border-radius: 20px;
}
.navigator-block {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
.navigatorbtn {
    background-color: #484848;
    color: white;
    width: 30%;
    padding: 20px 30px;
    margin-bottom: 20px;
    border-radius: 500px;
    border: 2px solid rgb(122, 122, 122);
    margin-inline: auto;
    text-align: center;
    text-decoration: none;
}
.qrblock {
    width: 60%;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 40px;
    justify-content: space-between
}
.qrtext {
    width: 50%;
    display: flex;
    align-items: center;
}
.qrtext p {
    text-align: right;
    color: white;
}
.qrtext a {
    text-align: right;
    color: #5d9ce0;
}
.teleqr {
    width: 40%;
}

.map {
    height: 400px;
    width: 60%;
    display: flex;
    margin-inline: auto;
    margin-top: 20px;
    border-radius: 20px;
    margin-bottom: 50px;
}
.about-total {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20px;
}
.aboutus-block {
    width: 40%;
    color: white;
}
.about-point a {
    text-decoration: underline;
    color: white;
}

.price-menu {
    width: 60%;
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 2px solid gray;
    cursor: pointer;
    transition: all .3s ease;
    padding: 5px 10px;
}

.price-menu:hover {
    background-color: #4D4D4D;
}

.price-title {
    font-size: 29px;
    color: white;
}

.price-arrow {
    height: 30px;
    padding: 0px 15px;
    transform: rotate(180deg);
    transition: all .3s ease;
}

.price-hidden {
    overflow: hidden;
    height: 0px;
    transition: all .3s ease;
    opacity: 0;
}

.price-table {
    color: white;
    font-size: 19px;
    width: 60%;
    margin-inline: auto;
    margin-top: 20px;
}

.table-string {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 15px 10px;
    color: white;
    transition: background-color 10s ease;
    width: 59%;
    margin-inline: auto;
    border-radius: 20px;
}

.table-string:hover {
    background-color: rgb(192, 31, 31);
}

.close-menu {
    width: 60%;
    margin-inline: auto;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    transition: all .3s ease;
    cursor: pointer;
}

.close-menu:hover {
    background-color: #4D4D4D;
}

.close-title {
    font-size: 19px;
    display: flex;
    text-align: center;
    color: white;
}

.close-arrow {
    height: 30px;
    padding: 0px 15px;
    transform: rotate(-90deg);
    margin-left: 10px;
}

.wash {
    width: 33%;
    text-align: center;
}

.tab-top {
    margin-top: 20px;
    font-weight: bold;
    font-size: 21px;
}

#priceSix .price-hidden .price-table .table-string div {
    width: 25%;
    text-align: center;
}

.brands-wrapper {
    margin-top: 30px;
    overflow: hidden;
    margin-inline: auto;
    position: relative;
    height: 120px;

}

.clearblock {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}
.cleardesk {
    font-size: 12px;
}

.clearmsgbtn {
    width: 20%;
    margin-left: auto;
    margin-right: 10px;
    padding: 10px;
    border-radius: 500px;
    border: none;
    background-color: #b83c4f;
    color: white;
    height: 40px;
    cursor: pointer;
}
.formess {
    display: flex;
    flex-direction: row;
}

.brands-block {
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 30s linear;
}

.brands-block-two {
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: -100%;
    transition: all 30s linear;
}

.brand-one {
    height: auto;
    width: 18%;
    opacity: .4;
    transition: all .3s ease;
    transform: scale(1);
}

.brand-one:hover {
    position: relative;
    display: flex;
    opacity: 1;
    transform: scale(1.1);
}

.status-block {
    width: 80%;
    margin-inline: auto;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid white;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.status-title {
    color: white;
    font-size: 30px;
    text-align: center;
}

.status-content {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.status-step {
    background-color: rgb(65 65 65);
    display: flex;
    height: 50px;
    padding: 5px 5px;
    width: 20%;
    align-items: center;
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}

.step-ok {
    background-color: #186b18;
    color: white;
}

.status-number {
    font-size: 21px;
    display: flex;
    margin-left: 10px;
    width: 10%;
}

.status-info {
    font-size: 19px;
    display: flex;
    text-align: center;
    margin-right: 10%;
    width: 90%;
}

.status-info span {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}

.status-upd {
    width: 60%;
    display: flex;
    margin-inline: auto;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
    background-color: #414141;
    padding: 10px;
    border-radius: 10px;
}

.status-text {
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgb(102, 102, 102);
}

.format25 {
    width: 25%;
    text-align: center;
}

.authorization {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.nd-plus {
    display: flex;
    justify-content: space-between;
}
.areanew {
    height: 100px;
}
.autho-input {
    width: 80%;
    margin-inline: auto;
    display: flex;
    margin-bottom: 20px;
    height: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid gray;
    background-color: #353535;
    color: white;
    outline: none;
    transition: all .3s ease;
    text-align: center;
    resize: none;
}

.autho-input:focus {
    width: 83%;
    border: 2px solid white;
    background-color: #5e5e5e;
}
.autho-input2 {
    width: 60%;
    margin-inline: auto;
    display: flex;
    margin-bottom: 20px;
    height: 20px;
    padding: 10px 20px;
    border-radius: 5px;
    border: 2px solid gray;
    background-color: #353535;
    color: white;
    outline: none;
    transition: all .3s ease;
    text-align: center;
    resize: none;
}

.autho-input2:focus {
    width: 63%;
    border: 2px solid white;
    background-color: #5e5e5e;
}

.autho-btn {
    width: 60%;
    border: none;
    height: 50px;
    padding: 10px 20px;
    color: white;
    border-radius: 500px;
    margin-inline: auto;
    background-color: #464646;
    cursor: pointer;
    margin-inline: auto;
    display: block;
}
.autho-btn:hover {
    background-color: #686868;
}

.loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999999;
    display: none;
    background-color: rgba(128, 128, 128, 0.344);
}
.loading::after {
    content: url(img/loading.svg);
    width: 80px;
    height: 80px;
    position: absolute;
    bottom: 50px;
    right: 50px;
    animation: loading 1s linear infinite;
}
.loadingbtn {
    width: 50%;
    border: none;
    height: 30px;
    padding: 10px 20px;
    color: white;
    border-radius: 500px;
    margin-inline: auto;
    background-color: #464646;
    cursor: not-allowed;
    margin-inline: auto;
    display: none;
    justify-content: center;
    align-items: center;
}
.loadingbtn::after {
    content: url(img/loading.svg);
    width: 30px;
    height: 30px;
    animation: loading 1s linear infinite;
}
@keyframes loading {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

.autho-title {
    text-align: center;
    font-size: 25px;
    color: white;
    margin-bottom: 20px;
}

.alert {
    text-align: center;
    font-size: 19px;
    color: rgb(255, 80, 80);
    margin-bottom: 20px;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%, 0);
    background: #3a3a3a;
    padding: 10px;
    border: 1px solid rgb(255, 80, 80);
    border-radius: 5px;
    z-index: 999999999999;
}

.plusclient {
    background-color: #505050;
    width: 30%;
    margin-inline: auto;
    display: flex;
    height: 50px;
    padding: 10px 20px;
    border-radius: 500px;
    justify-content: space-evenly;
    align-items: center;
    border: 2px solid rgb(151, 151, 151);
    font-size: 19px;
    color: white;
    transition: all .3s ease;
    cursor: pointer;
    margin-bottom: 30px;
    text-decoration: none;
}

.plus-img {
    width: 8%;
    background-color: #696969;
    padding: 10px;
    border-radius: 500px;
}

.plusclient:hover {
    background-color: #666666;
    border: 2px solid rgb(212, 212, 212);
}

.findform {
    display: block;
    flex-wrap: wrap;
    flex-direction: column;
    width: 50%;
    margin-inline: auto;
    border: 2px solid rgb(92, 92, 92);
    border-radius: 20px;
    padding: 20px 10px;
    margin-bottom: 30px;
    position: relative;
    height: 30px;
    overflow: hidden;
    transition: all .3s ease;
    cursor: pointer;
}
.findform:hover {
    background: #414141;
}

.findform-topic {
    color: white;
}

.admin-btn {
    background-color: #464646;
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    margin-inline: auto;
    padding: 10px 20px;
    text-align: center;
    border: 2px solid rgb(92, 92, 92);
    color: white;
    border-radius: 500px;
    display: flex;
    align-items: center;
    transition: all .3s ease;
    cursor: pointer;
}

.admin-btn span {
    margin-inline: auto;
}

.admin-btn:hover {
    background-color: #686868;
    border: 2px solid white;
}
.btnsfloor-photo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 120px;
}
.galery-incard {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: scroll;
    height: 100%;
    scrollbar-width: thin;
}
.scroll {
    max-height: 60vh;
    resize: none;
    background-color: #494949;
    padding: 10px;
    border-radius: 5px;
    color: white;
    overflow-y: scroll;
    margin-bottom: 20px;
}
.addcallblock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    display: none;
}
.addcallblock form{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.callclose {
    position: absolute;
    top: 0;
    right: 20%;
    color: white;
    font-size: 25px;
    cursor: pointer;
}
.neworder-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    margin-inline: auto;
    margin-top: 20px;
}
.formsection {
    width: 32%;
    height: 85vh;
    margin-top: 20px;
}
.formsection1 {
    width: 35%;
    height: 85vh;
    margin-right: 2%;
    margin-top: 20px;
}
.formsection3 {
    width: 32%;
    height: 85vh;
    margin-left: 2%;
    margin-top: 20px;
}
.infdiv {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.hide {
    position: absolute;
    top: -10000px;
}
.ordercardform {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.neworder-desk {
    color: white;
    width: 80%;
    margin-inline: auto;
    font-size: 14px;
    margin-bottom: 10px;
}

.allok {
    color: rgb(0, 209, 0);
    border: 1px solid rgb(0, 209, 0);
}
#subbtn {
    z-index: -999999;
    opacity: 0;
}
.predtorg {
    display: none;
    justify-content: center;
    cursor: pointer;
    color: white;
}
.predban {
    padding: 3px 5px;
    color: white;
    background-color: #186B18;
    border-radius: 5px;
    cursor: pointer;
}
.back-btn {
    width: 30%;
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    align-items: center;
}

.back-btn img {
    height: 30px;
    transform: rotate(180deg);
    margin-right: 10px;
}
.back-btn3 {
    width: 40px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    display: flex;
    margin-bottom: 20px;
    padding: 10px;
    align-items: center;
}

.back-btn3 img {
    height: 30px;
    transform: rotate(180deg);
    margin-right: 10px;
}

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

.cardblock-info {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 14px;
}
#savecom {
    display: none;
}
.cardblock-line {
    text-align: left;
    align-items: center;
    display: flex;
    justify-content: space-between;
    color: white;
    border-bottom: 1px dotted rgb(99, 99, 99);
}

.cardblock-line span {
    /* overflow: hidden; */
}

.cardblock-line-block span {
    overflow: hidden;
    width: 100%;
}

.cardblock-line-block {
    text-align: left;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    border-bottom: 1px dotted rgb(99, 99, 99);
}
.messfl {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.sendmessage {
    width: 95%;
    margin-inline: auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    border: 2px solid gray;
    padding: 20px 10px;
    border-radius: 20px;
}

.send-desk {
    color: rgb(190, 190, 190);
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

.send-area {
    resize: none;
    height: 50px;
    background-color: #494949;
    padding: 10px;
    border-radius: 5px;
    color: white;
    outline: none;
    margin-bottom: 20px;
    width: 95%;
    margin-inline: auto;
}

.send-area-note {
    resize: none;
    height: 10%;
    background-color: #494949;
    padding: 10px;
    border-radius: 5px;
    color: white;
    outline: none;
    margin-bottom: 20px;
}

.savebtn {
    background-color: palegoldenrod;
    width: 90%;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    border-radius: 500px;
    padding: 10px 20px;
    height: 30px;
    border: 2px solid gray;
}

.savebtn-cover {
    background-color: #494949;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 500;
    transition: all .3s ease;
    color: white;
    cursor: pointer;
}

.savebtn-cover span {
    margin-inline: auto;
}

.under-btn {
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
}

.savebtn-cancel-left {
    background-color: #F1304D;
    width: 0;
    height: 100%;
    cursor: pointer;
}

.savebtn-cancel-right {
    background-color: #F1304D;
    width: 80%;
    height: 100%;
    cursor: pointer;
}

.savebtn-ok {
    width: 10%;
    border: none;
    background-color: #43CB11;
    color: white;
    cursor: pointer;
}

.status-select {
    padding: 0px 10px;
    height: 40px;
    background: linear-gradient(to left, #464646, #353535);
    color: white;
    cursor: pointer;
    outline: none;
    border: 2px solid rgb(122, 122, 122);
    border-radius: 50px;
    appearance: none;
    background: url(img/gotoarrow.svg) no-repeat right;
    background-position-x: calc(100% - 20px);
    background-size: 10px;
    width: 55%;
}

.status-select option {
    background-color: gray;
}

.ministatus {
    width: 100%;
    height: 10px;
    margin-top: 10px;
    margin-inline: auto;
    display: flex;
}

.ministatus-one {
    background-color: #494949;
    height: 10px;
    width: 20%;
    clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}

.ms-green {
    background-color: #186B18;
}

.backblock {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 90%;
    margin-inline: auto;
    height: 30px;
}
.backblock3 {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
    margin-inline: auto;
    height: 30px;
    margin-top: 20px;
    justify-content: start;
    align-items: center;
    color: white;
}

.coverred {
    background-color: #672932;
}

.ms-finish {
    background-color: #f15656;
}

.hello-message {
    color: #ff9638;
}

.step-fin {
    background-color: rgb(245 200 78);
}

.fin-alert {
    color: rgb(245 200 78);
}

.hud {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 19997;
    width: 100%;
    height: 100%;
    display: initial;
}

.sendscreen-graybox {
    background-color: #00000096;
    backdrop-filter: blur(4px);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 19998;
}

.sendscreen-infoblock {
    z-index: 19999;
    position: absolute;
    background-color: #3a3a3a;
    left: 50%;
    top: 30%;
    transform: translate(-50%, 0);
    padding: 40px 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 10px;
}

.sc-title {
    text-align: center;
    font-size: 25px;
    color: white;
    margin-bottom: 10px;
}

.sc-desk {
    color: gray;
    border-bottom: 1px solid rgb(83, 83, 83);
    padding-bottom: 3px;
    text-align: center;
}

.sc-cross {
    transform: rotate(45deg);
    position: absolute;
    width: 25px;
    top: 0px;
    right: 0px;
    padding: 10px;
    border-radius: 500px;
}

.admin-btn span {
    display: flex;
    align-items: center;
}

.newdot {
    margin-left: 10px;
    background-color: #b50000;
    padding: 0px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 500px;
}

.oper-btns {
    text-decoration: none;
    width: 50%;
    display: flex;
    margin-inline: auto;
}

.ordersString {
    background-color: #4d4d4d;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 5px;
}

.codeStringBlock {
    color: white;
    text-align: center;
    width: 15%;
    overflow: hidden;
}

.ordersStringSelect {
    background-color: gray;
    padding: 5px 10px;
    border-radius: 500px;
    color: white;
    outline: none;
    height: 30px;
}

.ordersStringSub {
    background-color: gray;
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 500px;
    cursor: pointer;
    height: 30px;
}

.admintitle {
    margin-bottom: 20px;
    margin-top: 0;
}

.adminmain {
    padding-top: 20px;
    padding-bottom: 20px;
}

.operback {
    width: 60%;
    margin-inline: 0;
}

.secret-btn {
    display: none;
}

.redstar {
    color: red;
    font-size: 21px;
}

.ordpass {
    background-color: #616161;
    font-size: 21px;
}

.passlink {
    color: white;
}

.reverce {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

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

.mastername {
    position: absolute;
    top: 10px;
    left: 10px;

}

.guarant-radio {
    width: 55%;
    margin-inline: auto;
    display: flex;
    justify-content: space-around;
}

.guarant-radio div {
    padding: 10px 20px;
    border: 1px solid gray;
    border-radius: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.radiobtn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-left: 15px;

    border: 1px solid #999;
    transition: 0.2s all linear;
    outline: none;
    cursor: pointer;
}

.radiobtn:checked {
    background-color: #ff3b3b;
    border: none;
}
.newbtn {
    margin-right: 5px;
    background-color: #494949;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    border: none;
    height: 30px;
    cursor: pointer;
    margin: auto;
    transition: all .3s ease;
    padding: 0 5px;
}
.newbtn:hover {
    background-color: #747474;
}

.download {
    background-color: #494949;
    text-align: center;
    padding: 10px 20px;
    border-radius: 500px;
    text-decoration: none;
    color: white;
    margin-inline: auto;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
}

.guarant-block {
    border: 2px solid #ff3b3b;
    border: 2px solid transparent;
    margin-inline: auto;
    padding: 10px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    display: flex;
    margin-top: 10px;
    opacity: .2;
}
.titleodpass {
    margin-left: 10px;
    background-color: #616161;
    font-size: 21px;
    padding: 5px 10px;
    border-radius: 5px;
    border: 2px solid gray;
}

.guarant-block .neworder-desk {
    width: 100%;
}

.guarant-block .autho-input {
    width: 80%;
}

.burger-icon {
    display: none;
}

.side-menu {
    display: none;
}

.cookie {
    padding-top: 15px;
    padding-bottom: 20px;
    display: flex;
    background-color: rgba(8, 8, 8, 0.39);
    flex-direction: column;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(10px);
    position: fixed;
    bottom: 0;
    width: 100vw;
    min-height: 20vh;
}
.cookie-btn {
    border: 2px solid gray;
    cursor: pointer;
    display: inline-table;
    width: 10%;
    padding: 5px;
    margin-inline: auto;
    margin-top: 10px;
}



@media only screen and (max-width: 1440px) {}
main {
    width: 90%;
}

@media only screen and (max-width: 1024px) {
    main {
        width: 90%;
    }
    .cardlink {
        width: 14%;
    }
    .service-title {
        font-size: 13px;
    }
    .service-icon {
        width: 70%;
    }
    .map {
        width: 80%;
    }
    .navigatorbtn {
        width: 45%;
    }
    .galery-block {
        width: 95%;
        margin-inline: auto;
    }
    .prev-floor {
        width: 90%;
    }
    .video {
        width: 80%;
    }
}

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

    .nav-points {
        font-size: 14px;
    }

    .nav-points,
    .nav-points-two,
    .nav-points-three,
    .nav-points-four,
    .nav-points-six,
    .nav-points-five {
        padding: 5px 20px;
    }

    .qrblock {
        width: 80%;
    }

    .deskblock {
        width: 85%;
    }

    .welcome {
        font-size: 18px;
    }
    .galery-card {
        width: 60%;
    }
    .prev-floor {
        width: 100%;
    }

    main {
        width: 95%;
    }

    .service-floor {
        width: 100%;
    }

    .cardlink {
        width: 13%;
    }

    .service-title {
        font-size: 12px;
    }

    .service-icon {
        width: 80%;
    }

    .service-card {
        width: 100%;
        padding: 0;
        height: 170px;
    }

    .inputblock {
        width: 90%;
    }

    .sendform button {
        width: 60%;
    }

    .price-block {
        width: 90%;
    }

    .table-string {
        width: 90%;
    }

    .status-block {
        width: 95%;
    }

    .status-upd {
        width: 90%;
    }

    .status-number {
        font-size: 15px;
    }

    .status-info span {
        font-size: 12px;
    }
}

@media only screen and (max-width: 425px) {
    .burger-icon {
        display: flex;
    }
    .payqr {
        width: 80%;
    }
    .paymentinput {
        width: 80%
    }
    .paymentbtn {
        width: 70%;
    }

    .qrblock {
        width: 90%;
        flex-direction: column;
    }
    .qrblock p{
        text-align: center;
        width: 100%;
        margin-inline: auto;
    }
    .qrtext {
        width: 80%;
        margin-inline: auto;
        margin-bottom: 10px;
    }
    .teleqr {
        width: 70%;
        margin-inline: auto;
    }

    .side-menu {
        display: initial;
    }
    .pathblock {
        width: 90%;
    }

    main {
        width: 100%;
    }

    .service-icon {
        width: 50%;
    }
    .about-total {
        flex-direction: column;
    }
    .aboutus-block {
        width: 90%;
        margin-inline: auto;
        margin-bottom: 20px;
    }
    .video {
        width: 95%;
    }
    .map {
        width: 95%;
        height: 300px;
    }
    .navigatorbtn {
        width: 80%;
    }
    .prev-card img {
        height: 30px;
    }

    .service-floor {
        flex-direction: column;
    }

    .cardlink {
        width: 60%;
        margin-inline: auto;
    }

    .service-title {
        font-size: 14px;
    }

    .inputblock {
        width: 90%;
    }

    .sendform button {
        width: 60%;
    }

    .price-block {
        width: 90%;
    }

    .table-string {
        width: 90%;
    }

    .string-name,
    .string-price {
        font-size: 10px;
    }

    .brand-one {
        width: 17%;
    }
    .brands-wrapper {
        height: 70px;
    }
    .status-content {
        flex-direction: column;
    }

    .status-step {
        width: 95%;
        margin-bottom: 10px;
    }

    .status-upd {
        width: 90%;
    }

    .welcome {
        font-size: 16px;
    }

    .nav-list {
        display: none;
    }

    .lg {
        width: 60%;
    }

    .burger-icon {
        width: 20%;
    }

    .header-logoblock {
        display: flex;
        justify-content: space-between;
    }

    .side-menu {
        width: 95%;
        height: 500px;
        z-index: 99999;
        background-color: #000000c7;
        position: fixed;
        top: 0;
        right: -95%;
        backdrop-filter: blur(10px);
        border-radius: 0 0 0 20px;
        transition: all .3s ease;
    }

    .effect {
        position: relative;
        box-shadow: inset 0 0 0 3000px rgba(97, 97, 97, 0.192);
        width: 100%;
        height: 500px;
        top: 0;
        left: 0;
        filter: blur(10px);
    }

    .side-menu-list {
        position: relative;
        top: -80%;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 70%;
        text-align: right;
    }

    .side-points {
        margin-bottom: 30px;
        color: white;
    }

    .cross {
        position: absolute;
        top: 5px;
        right: 25px;
        width: 30px;
        height: 30px;
        padding: 10px;
    }
    
    .sendscreen-infoblock {
        width: 70%;
    }
    .sc-desk {
        text-align: center;
    }

    /* admin panel */
    main {
        padding-top: 20px;
    }
    .operback {
        margin-bottom: 50px;
    }
    .plusclient {
        width: 80%;
    }
    .findform {
        width: 80%;
    }
    .autho-title {
        font-size: 20px;
        margin-bottom: 26px;
    }
    .oper-btns {
        width: 80%;
    }
    .neworder-form {
        flex-direction: column;
    }
    .formsection {
        width: 100%;
        height: auto;
    }
    .bbmob {
        width: 100%;
        justify-content: space-evenly;
    }
    .guarant-radio {
        width: 80%;
    }
    .ordersString {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px;
    }
    .codeStringBlock {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.067);
    }
    .ordercardform {
        flex-direction: column;
    }
    .infdiv {
        flex-direction: column;
    }
    .dates {
        flex-direction: row;
    }
    .backblock3 {
        flex-direction: column;
        height: auto;
    }
    .bb3 { 
        width: 100%;
    }
    .formsection1 {
        width: 100%;
        height: auto;
    }
    .fakebtn {
        position: fixed;
        z-index: 999999;
        right: 5%;
        top: 50px;
    }
    .formsection3 {
        width: 100%;
    }
    .addcallblock {
        position: fixed;
    }
    .callnote {
        width: 80%;
    }
    .callclose {
        top: -30px;
        right: 15%;
    }
    .formfile {
        width: 80%;
        flex-direction: column;
    }
    .filen {
        width: 100%;
    }
    .filen2 {
        width: 80%;
    }
    .fileicon {
        width: 30%;
    }
    .navbarmother {
        flex-wrap: wrap;
    }
    .navbarmother a{
        margin-bottom: 10px;
    }

}

@media only screen and (max-width: 375px) {
    main {
        width: 100%;
    }

    .service-floor {
        flex-direction: column;
    }

    .cardlink {
        width: 60%;
        margin-inline: auto;
    }

    .service-title {
        font-size: 14px;
    }

    .inputblock {
        width: 90%;
    }

    .sendform button {
        width: 60%;
    }

    .price-block {
        width: 90%;
    }

    .table-string {
        width: 90%;
    }

    .string-name,
    .string-price {
        font-size: 10px;
    }

    .brand-one {
        width: 50%;
    }

    .status-content {
        flex-direction: column;
    }

    .status-step {
        width: 95%;
        margin-bottom: 10px;
    }

    .status-upd {
        width: 90%;
    }

    .welcome {
        font-size: 16px;
    }

    .nav-list {
        display: none;
    }

    .lg {
        width: 60%;
    }

    .burger-icon {
        width: 20%;
    }

    .header-logoblock {
        display: flex;
        justify-content: space-between;
    }

    .side-menu {
        width: 95%;
        height: 500px;
        z-index: 99999;
        background-color: #000000c7;
        position: fixed;
        top: 0;
        right: -95%;
        backdrop-filter: blur(10px);
        border-radius: 0 0 0 20px;
        transition: all .3s ease;
    }

    .effect {
        position: relative;
        box-shadow: inset 0 0 0 3000px rgba(97, 97, 97, 0.192);
        width: 100%;
        height: 500px;
        top: 0;
        left: 0;
        filter: blur(10px);
    }

    .side-menu-list {
        position: relative;
        top: -80%;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        width: 70%;
        text-align: right;
    }

    .side-points {
        margin-bottom: 20px;
        color: white;
    }

    .cross {
        position: absolute;
        top: 5px;
        right: 25px;
        width: 30px;
        height: 30px;
        padding: 10px;
    }
}