@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/light/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/fill/style.css');


/*
:-moz-placeholder{opacity: 0; color: transparent;}
::-moz-placeholder{opacity: 0; color: transparent;}
::-webkit-input-placeholder{opacity: 0; color: transparent;}
:-ms-input-placeholder{opacity: 0; color: transparent;}
:focus:-moz-placeholder{opacity: 0; color: transparent;}
:focus::-moz-placeholder{opacity: 0; color: transparent;}
:focus::-webkit-input-placeholder{opacity: 0; color: transparent;}
:focus:-ms-input-placeholder{opacity: 0; color: transparent;}
*/

:root {
    --blue-color: #6699ff;
    --white-color: #ffffff;
    --black-color: #252833;
    --brown-color: #B28E5F;
    --orange-color: #FF7043;
    --dark-color: #444444;
    --silver-color: #eeeeee;
    --green-color: #00B05A;
    --gray-color: #DCDCDC;
    --red-color: #E57373;
    --margin-left: 15px;
    --margin-bottom: 15px;
    --border-color: #E5E5E5;
    --back-color: #F7F6F8;
}
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance:none;
    appearance: none;
}
html,
body {
     max-width: 100%;
     height: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    font-family: 'Ubuntu';
    font-size: 14px;
}
body {
    color: var(--black-color);
    letter-spacing: 0.3px;
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 24px;
    line-height: 24px; 
    font-weight: 700;
    padding: 0px 0px 15px 0px;
    color: var(--black-color);
}
p{
    line-height: 22px;
    padding: 5px 0px;
}
a{
    color: var(--black-color);
    cursor: pointer;
    text-decoration: none;
}
ul{
    margin:0px 0px 5px 0px;
}
ul li{
    padding:0px;
    margin: 0px;
    vertical-align: middle;
}
hr{background: none;height: 0px;border: none;border-bottom: 1px var(--silver-color) solid;margin-bottom: 15px;}
strong{font-weight: 500;}
.app-bl-c{margin: 0px auto;}
.app-br{padding: 3px 6px;border-radius: 3px;}
.app-center{margin: 0px auto;}
.app-alg-l{text-align:left;}
.app-alg-c{text-align:center;}
.app-alg-r{text-align:right;}
.app-fx-l{display: flex;align-items: center;justify-content: left;}
.app-fx-c{display: flex;align-items: center;justify-content: center;}
.app-fx-r{display: flex;align-items: center;justify-content: right;}
.app-cl-red{color:var(--red-color);}
.app-cl-blue{color:var(--blue-color);}
.app-cl-green{color:var(--green-color);}
.app-cl-gray{color:var(--gray-color)}
.app-cl-white{color:var(--white-color)}
.app-cl-black{color:var(--black-color)}
.app-cl-dark{color: var(--dark-color);}
.app-cl-brown{color: var(--brown-color);}
.app-bg-red{background-color:var(--red-color);}
.app-bg-blue{background-color:var(--blue-color);}
.app-bg-green{background-color:var(--green-color);}
.app-bg-gray{background-color:var(--gray-color)}
.app-bg-white{background-color:var(--white-color)}
.app-bg-black{background-color:var(--black-color)}
.app-bg-dark{background-color: var(--dark-color);}
.app-bg-brown{background-color: var(--brown-color);}
.app-mw-50{max-width:50px;} .app-mw-100{max-width:100px;} .app-mw-150{max-width:150px;} .app-mw-200{max-width:200px;} .app-mw-250{max-width:250px;} .app-mw-300{max-width:300px;} .app-mw-350{max-width:350px;} .app-mw-400{max-width:400px;} .app-mw-450{max-width:450px;} .app-mw-500{max-width:500px;} .app-mw-550{max-width:550px;} .app-mw-600{max-width:600px;} .app-mw-650{max-width:650px;} .app-mw-700{max-width:700px;} .app-mw-750{max-width:750px;} .app-mw-800{max-width:800px;}
.app-w-10{width:10px;} .app-w-20{width:20px;} .app-w-30{width:30px;} .app-w-40{width:50px;} .app-w-50{width:50px;} .app-w-60{width:60px;} .app-w-70{width:70px;} .app-w-80{width:80px;} .app-w-90{width:90px;} .app-w-100{width:100px;} .app-w-150{width:150px;} .app-w-200{width:200px;} .app-w-250{width:250px;} .app-w-300{width:300px;} .app-w-350{width:350px;} .app-w-400{width:400px;} .app-w-450{width:450px;} .app-w-500{width:500px;} .app-w-550{width:550px;} .app-w-600{width:600px;} .app-w-650{width:650px;} .app-w-700{width:700px;} .app-w-750{width:750px;} .app-w-800{width:800px;}
.app-h-10{height: 10px;} .app-h-20{height: 20px;} .app-h-30{height: 30px;} .app-h-40{height: 40px;} .app-h-50{height: 50px;} .app-h-60{height: 60px;} .app-h-70{height: 70px;} .app-h-80{height: 80px;} .app-h-90{height: 90px;} .app-h-100{height: 100px;} .app-h-150{height: 150px;} .app-h-200{height: 200px;} .app-h-250{height: 250px;} .app-h-300{height: 300px;} .app-h-350{height: 350px;} .app-h-400{height: 400px;} .app-h-450{height: 450px;} .app-h-500{height: 500px;}
.app-mr-5{margin-right: 5px;}
.app-mr-15{margin-right: 15px;}
.app-ml-10{margin-left: 10px;}
.app-font-16{font-size: 16px;}
.app-font-18{font-size: 18px;}
.app-font-20{font-size: 20px;}
.app-font-22{font-size: 22px;}
.app-font-24{font-size: 24px;}
/* App - Popup */  
.app-popup{background: rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(3px);backdrop-filter: blur(10px);width: 100%;height: 100%;position: fixed;overflow-y: auto;display: flex;align-items: center;justify-content:center;z-index: 100;left: 0px;top: 0px;}
.app-popup-win{border: 0px solid #e9ecef;min-width: 100px;padding: 0px;border-radius: 16px;background: #ffffff;box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1);margin: auto;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.app-popup-html{text-align: left;padding:20px;}
.app-popup-button{display: block;text-decoration: none;position: absolute;width: 24px;height: 24px;cursor: pointer;right: 10px;top: 10px;overflow: hidden;background: #ffffff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+PHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHBvaW50cz0iMTQsMC43IDEzLjMsMCA3LDYuMjk5IDAuNywwIDAsMC43IDYuMyw3IDAsMTMuMjk5IDAuNywxNCA3LDcuNyAxMy4zLDE0IDE0LDEzLjI5OSA3LjcsNyIvPjwvc3ZnPg==') center no-repeat;}
.app-popup-show{overflow: hidden;}
/* App - Message */
.app-msg{position: relative;margin-bottom: 10px;min-height: 40px; font-size: 14px; border-radius: 10px;padding: 10px 18px;display: flex;align-items: center; line-height: 18px;letter-spacing: 0.4px;}
.app-msg:hover .app-msg-button{display: block;}
.app-msg-button{width: 8px;height: 8px;display: none;text-align: center;text-decoration: none;position: absolute;cursor: pointer;right: 10px;top: 12px;opacity: 0.8;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+PHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHBvaW50cz0iMTQsMC43IDEzLjMsMCA3LDYuMjk5IDAuNywwIDAsMC43IDYuMyw3IDAsMTMuMjk5IDAuNywxNCA3LDcuNyAxMy4zLDE0IDE0LDEzLjI5OSA3LjcsNyIvPjwvc3ZnPg==') no-repeat center;}
.app-msg-success{background-color: rgba(76,175,80,0.1);color: rgba(0,0,0,0.8);}
.app-msg-error{background-color: rgba(255,235,238,0.6);color: rgba(0,0,0,0.8);}

.app-table{
    overflow-x: auto;
}
.app-table table{
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
.app-table table thead th{
    white-space: nowrap;
    padding: 10px 15px;
    border: solid 1px var(--silver-color);
    vertical-align: middle;
    font-weight: 500;
    height: 42px;
}
.app-table table thead th a{
    font-weight: 500;
}
.app-table table tfoot td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 15px;
    border: solid 1px var(--silver-color);
    vertical-align: middle;
    height: 42px;
}
.app-table table tfoot td ul{
    margin: 0px;
    padding: 0px 5px;
}
.app-table table tfoot td ul > li{
    display: table-cell;
    padding: 0px;
    margin: 0px;
    white-space: nowrap;
    list-style: none;
}
.app-table table tfoot td ul > li + li::before{
    padding: 0px 15px;
    color: var(--gray-color);
    content: "|";
}
.app-table table tbody td{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 15px;
    border: solid 1px var(--silver-color);
    vertical-align: middle;
    height: 42px;
}
.app-table table tbody tr:hover{
    background-color: var(--silver-color);
}
.app-table table tbody a{
    text-decoration: none;
    outline: none;
}
.app-cut{
    height: 15px;
    overflow: hidden;
    white-space: wrap;
    padding: 0px;
}
.app-status{
    padding: 4px 6px;
    border-radius: 3px;
    line-height: 14px;
    margin-right: 10px;
}
.app-status-0{
    background-color: #F5F5F5;
}
.app-status-1{
    background-color: #E1F5FE
}
.app-status-2{
    background-color: #E8F5E9;
}
.app-status-3{
    background-color: #F3E5F5;
}
.app-status-4{
    background-color: #FFF3E0;
}
.app-status-5{
    background-color: #FBE9E7;
}

/* App - Loader */
.app-auth{
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-auth .wrap{
    width: 100%;
    max-width: 320px;
    padding: 150px 0px 100px 0px;
}

/*
----------------------------
----- <App-User-Dash> 
----------------------------
*/

.app-user-dash{
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-user-dash .wrap{
    width: 100%;
    max-width: 800px;
    padding: 100px 10px 50px 10px;
}
.app-user-dash .login{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 15px;
    gap: 20px;
}
.app-user-dash .list{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.app-user-dash .list a{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    background-color: var(--back-color);
    border-radius: 10px;
    padding: 10px;
    min-height: 100px;
}
.app-user-dash .list a i{
    font-size: 40px;
}

@media only screen and (max-width: 500px){
    .app-user-dash .wrap{
        padding: 80px 10px 20px 10px;
    }
    .app-user-dash .list{
        grid-gap: 10px;
    }
    .app-user-dash .login{
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 10px;
        gap: 5px;
    }
}





.app-scan-load > div{
    margin: 0px auto;
    width:100px;
    height:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 10px solid #ffffff;
    border-radius: 5px;
    background: #ffffff url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MDAgODAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InBhdGgxIiBmaWxsPSIjMzkzYzUwIiBzdHJva2U9Im5vbmUiIGQ9Ik0gNTk0Ljg0NjY4IDM1OC44NTY2NTkgTCA1ODUuNjA0MTg3IDM0OS4wNzA0OTYgTCA1NTMuMTY0OTE3IDI2MS42Mjk1MTcgQyA1NDcuNjM3NTczIDI0Ni44NTk2OCA1MzMuNTAyMDE0IDIzNy4wNzM1NDcgNTE3LjczNTQ3NCAyMzYuOTgyOTEgTCAyODYuMDM5NDI5IDIzNi45ODI5MSBDIDI3MC4yNzI4NTggMjM2Ljk4MjkxIDI1Ni4xMzcyOTkgMjQ2Ljg1OTY4IDI1MC42MDk5NCAyNjEuNjI5NTE3IEwgMjE4LjYyMzc0OSAzNDcuOTgzMTU0IEwgMjA1LjMwMzcxMSAzNjAuMzA2NDU4IEMgMTkzLjcwNTMyMiAzNzAuMTgzMTk3IDE4NyAzODQuNjgxMjEzIDE4NyAzOTkuOTA0MTE0IEwgMTg3IDUyNy4zMDUxNzYgQyAxODcuMDkwNjA3IDU0OC4xNDYxMTggMjA0LjAzNTE0MSA1NjUgMjI0Ljg3NjAwNyA1NjUgTCAyNDguNzk3Njk5IDU2NSBDIDI2OS42Mzg1NSA1NjUgMjg2LjU4MzA5OSA1NDguMTQ2MTE4IDI4Ni42NzM3MDYgNTI3LjMwNTE3NiBMIDI4Ni42NzM3MDYgNTA4LjgyMDI4MiBMIDUxMS4zOTI1NzggNTA4LjgyMDI4MiBMIDUxMS4zOTI1NzggNTI3LjMwNTE3NiBDIDUxMS40ODMyMTUgNTQ4LjE0NjExOCA1MjguNDI3NzM0IDU2NSA1NDkuMjY4NjE2IDU2NSBMIDU3My4xOTAzMDggNTY1IEMgNTk0LjAzMTE4OSA1NjUgNjEwLjk3NTcwOCA1NDguMTQ2MTE4IDYxMS4wNjYyODQgNTI3LjMwNTE3NiBMIDYxMS4wNjYyODQgMzk2LjU1MTQ1MyBDIDYxMC45NzU3MDggMzgyLjMyNTI1NiA2MDUuMTc2NTE0IDM2OC43MzMzOTggNTk0Ljg0NjY4IDM1OC44NTY2NTkgWiBNIDI2Ny42NDUwODEgMjY3Ljc5MTEzOCBDIDI3MC41NDQ2NzggMjYwLjA4OTExMSAyNzcuODg0MzA4IDI1NS4xMDU0MDggMjg2LjAzOTQyOSAyNTUuMTA1NDA4IEwgNTE3LjgyNjExMSAyNTUuMTA1NDA4IEMgNTI1Ljk4MTIwMSAyNTUuMTA1NDA4IDUzMy4zMjA4NjIgMjYwLjE3OTY4OCA1MzYuMjIwMzk4IDI2Ny43OTExMzggTCA1NjQuNDkxNTE2IDM0My45MDU2MDkgTCA1NDMuMzc4Nzg0IDM0My45MDU2MDkgQyA1MzguMzk1MDgxIDMwOS45MjU5MzQgNTA2Ljc3MTMzMiAyODYuNDU3MzM2IDQ3Mi43OTE2ODcgMjkxLjUzMTYxNiBDIDQ0NS42OTg1NzggMjk1LjUxODU1NSA0MjQuNDA0NjMzIDMxNi44MTI0NjkgNDIwLjQxNzY5NCAzNDMuOTA1NjA5IEwgMjM5LjM3Mzk5MyAzNDMuOTA1NjA5IEwgMjY3LjY0NTA4MSAyNjcuNzkxMTM4IFogTSA1MjQuODkzODYgMzQzLjkwNTYwOSBMIDQzOC43MjE0MDUgMzQzLjkwNTYwOSBDIDQ0My43MDUwNzggMzIwLjA3NDUyNCA0NjcuMDgzMTMgMzA0Ljg1MTYyNCA0OTAuOTE0MTU0IDMwOS44MzUyOTcgQyA1MDcuOTQ5MzEgMzEzLjQ1OTgwOCA1MjEuMjY5MzQ4IDMyNi43Nzk4NDYgNTI0Ljg5Mzg2IDM0My45MDU2MDkgWiBNIDI2OC41NTEyMDggNTI3LjMwNTE3NiBDIDI2OC40NjA2MDIgNTM4LjE3ODcxMSAyNTkuNjcxMTczIDU0Ni44Nzc1MDIgMjQ4Ljc5NzY5OSA1NDYuODc3NTAyIEwgMjI0Ljg3NjAwNyA1NDYuODc3NTAyIEMgMjE0LjAwMjUxOCA1NDYuODc3NTAyIDIwNS4yMTMxMDQgNTM4LjE3ODcxMSAyMDUuMTIyNDk4IDUyNy4zMDUxNzYgTCAyMDUuMTIyNDk4IDUwMy41NjQ3NTggQyAyMTAuNTU5MjM1IDUwNy4wOTg2MzMgMjE3LjcxNzYyMSA1MDguODIwMjgyIDIyNC44NzYwMDcgNTA4LjgyMDI4MiBMIDI2OC41NTEyMDggNTA4LjgyMDI4MiBMIDI2OC41NTEyMDggNTI3LjMwNTE3NiBaIE0gNTkyLjk0Mzc4NyA1MjcuMzA1MTc2IEMgNTkyLjg1MzIxIDUzOC4xNzg3MTEgNTg0LjA2Mzc4MiA1NDYuODc3NTAyIDU3My4xOTAzMDggNTQ2Ljg3NzUwMiBMIDU0OS4yNjg2MTYgNTQ2Ljg3NzUwMiBDIDUzOC4zOTUwODEgNTQ2Ljg3NzUwMiA1MjkuNjA1NzEzIDUzOC4wODgxMzUgNTI5LjUxNTA3NiA1MjcuMzA1MTc2IEwgNTI5LjUxNTA3NiA1MDguODIwMjgyIEwgNTczLjE5MDMwOCA1MDguODIwMjgyIEMgNTgwLjM0ODY5NCA1MDguODIwMjgyIDU4Ny41MDcwMTkgNTA3LjA5ODYzMyA1OTIuOTQzNzg3IDUwMy41NjQ3NTggTCA1OTIuOTQzNzg3IDUyNy4zMDUxNzYgWiBNIDU3My4xOTAzMDggNDkwLjY5Nzc4NCBMIDIyNC44NzYwMDcgNDkwLjY5Nzc4NCBDIDIxNC4wOTMxMjQgNDkwLjc4ODM5MSAyMDUuMjEzMTA0IDQ4Mi4xODAyMzcgMjA1LjEyMjQ5OCA0NzEuMzA2NzMyIEwgMjA1LjEyMjQ5OCAzOTkuOTA0MTE0IEMgMjA1LjEyMjQ5OCAzODkuOTM2NzM3IDIwOS41NjI1IDM4MC40MjI0MjQgMjE3LjE3Mzk1IDM3My45ODg5MjIgTCAyMjkuODU5Njk1IDM2Mi4wMjgxMDcgTCA1NzMuMDA5MDMzIDM2Mi4wMjgxMDcgTCA1ODIuMTYwOTUgMzcxLjgxNDI0IEMgNTg4Ljk1Njg0OCAzNzguMjQ3NzExIDU5Mi44NTMyMSAzODcuMjE4MzUzIDU5Mi44NTMyMSAzOTYuNTUxNDUzIEwgNTkyLjk0Mzc4NyA0NzEuMzA2NzMyIEMgNTkyLjg1MzIxIDQ4Mi4wODk2IDU4My45NzMyMDYgNDkwLjc4ODM5MSA1NzMuMTkwMzA4IDQ5MC42OTc3ODQgWiIvPgogICAgPHBhdGggaWQ9InBhdGgyIiBmaWxsPSIjMzkzYzUwIiBzdHJva2U9Im5vbmUiIGQ9Ik0gMzA2LjYwODQ1OSAzOTguMjczMTAyIEwgMjM4LjY0OTA5NCAzOTguMjczMTAyIEMgMjMzLjY2NTQyMSAzOTguMjczMTAyIDIyOS41ODc4NiA0MDIuMzUwNjQ3IDIyOS41ODc4NiA0MDcuMzM0MzIgTCAyMjkuNTg3ODYgNDU0LjQ1MjgyIEMgMjI5LjU4Nzg2IDQ1OS40MzY0OTMgMjMzLjY2NTQyMSA0NjMuNTE0MDM4IDIzOC42NDkwOTQgNDYzLjUxNDAzOCBMIDMwNi42MDg0NTkgNDYzLjUxNDAzOCBDIDMxMS41OTIxMzMgNDYzLjUxNDAzOCAzMTUuNjY5NzA4IDQ1OS40MzY0OTMgMzE1LjY2OTcwOCA0NTQuNDUyODIgTCAzMTUuNjY5NzA4IDQwNy4zMzQzMiBDIDMxNS42Njk3MDggNDAyLjM1MDY0NyAzMTEuNTkyMTMzIDM5OC4yNzMxMDIgMzA2LjYwODQ1OSAzOTguMjczMTAyIFogTSAyOTcuNTQ3MjExIDQ0NS4zOTE1NzEgTCAyNDcuNzEwMzQyIDQ0NS4zOTE1NzEgTCAyNDcuNzEwMzQyIDQxNi4zOTU1NjkgTCAyOTcuNTQ3MjExIDQxNi4zOTU1NjkgTCAyOTcuNTQ3MjExIDQ0NS4zOTE1NzEgWiBNIDU1OS40MTcxNzUgMzk4LjI3MzEwMiBMIDQ5MS40NTc4NTUgMzk4LjI3MzEwMiBDIDQ4Ni40NzQxODIgMzk4LjI3MzEwMiA0ODIuMzk2NjA2IDQwMi4zNTA2NDcgNDgyLjM5NjYwNiA0MDcuMzM0MzIgTCA0ODIuMzk2NjA2IDQ1NC40NTI4MiBDIDQ4Mi4zOTY2MDYgNDU5LjQzNjQ5MyA0ODYuNDc0MTgyIDQ2My41MTQwMzggNDkxLjQ1Nzg1NSA0NjMuNTE0MDM4IEwgNTU5LjQxNzE3NSA0NjMuNTE0MDM4IEMgNTY0LjQwMDg3OSA0NjMuNTE0MDM4IDU2OC40Nzg0NTUgNDU5LjQzNjQ5MyA1NjguNDc4NDU1IDQ1NC40NTI4MiBMIDU2OC40Nzg0NTUgNDA3LjMzNDMyIEMgNTY4LjQ3ODQ1NSA0MDIuMzUwNjQ3IDU2NC40MDA4NzkgMzk4LjI3MzEwMiA1NTkuNDE3MTc1IDM5OC4yNzMxMDIgWiBNIDU1MC4zNTU5NTcgNDQ1LjM5MTU3MSBMIDUwMC41MTkxMDQgNDQ1LjM5MTU3MSBMIDUwMC41MTkxMDQgNDE2LjM5NTU2OSBMIDU1MC4zNTU5NTcgNDE2LjM5NTU2OSBMIDU1MC4zNTU5NTcgNDQ1LjM5MTU3MSBaIE0gNDQyLjc5ODk1IDQzNi4zMzAzMjIgTCAzNTUuMjY3MzM0IDQzNi4zMzAzMjIgQyAzNTAuMjgzNjMgNDM2LjMzMDMyMiAzNDYuMjA2MDg1IDQ0MC40MDc4NjcgMzQ2LjIwNjA4NSA0NDUuMzkxNTcxIEMgMzQ2LjIwNjA4NSA0NTAuMzc1MjQ0IDM1MC4yODM2MyA0NTQuNDUyODIgMzU1LjI2NzMzNCA0NTQuNDUyODIgTCA0NDIuNzk4OTUgNDU0LjQ1MjgyIEMgNDQ3Ljc4MjYyMyA0NTQuNDUyODIgNDUxLjg2MDE5OSA0NTAuMzc1MjQ0IDQ1MS44NjAxOTkgNDQ1LjM5MTU3MSBDIDQ1MS44NjAxOTkgNDQwLjQwNzg2NyA0NDcuNzgyNjIzIDQzNi4zMzAzMjIgNDQyLjc5ODk1IDQzNi4zMzAzMjIgWiBNIDQ0Mi43OTg5NSA0MDguMjQwNDQ4IEwgMzU1LjI2NzMzNCA0MDguMjQwNDQ4IEMgMzUwLjI4MzYzIDQwOC4yNDA0NDggMzQ2LjIwNjA4NSA0MTIuMzE4MDI0IDM0Ni4yMDYwODUgNDE3LjMwMTY5NyBDIDM0Ni4yMDYwODUgNDIyLjI4NTM3IDM1MC4yODM2MyA0MjYuMzYyOTQ2IDM1NS4yNjczMzQgNDI2LjM2Mjk0NiBMIDQ0Mi43OTg5NSA0MjYuMzYyOTQ2IEMgNDQ3Ljc4MjYyMyA0MjYuMzYyOTQ2IDQ1MS44NjAxOTkgNDIyLjI4NTM3IDQ1MS44NjAxOTkgNDE3LjMwMTY5NyBDIDQ1MS44NjAxOTkgNDEyLjMxODAyNCA0NDcuNzgyNjIzIDQwOC4yNDA0NDggNDQyLjc5ODk1IDQwOC4yNDA0NDggWiIvPgogICAgPHBhdGggaWQ9InBhdGgzIiBmaWxsPSIjMzkzYzUwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgZD0iTSAwIDIwMCBMIDMwIDIwMCBMIDMwIDMwIEwgMjAwIDMwIEwgMjAwIDAgTCAwIDAgTCAwIDIwMCBaIi8+CiAgICA8cGF0aCBpZD0iLSIgZmlsbD0iIzM5M2M1MCIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIGQ9Ik0gODAwIDIwMCBMIDc3MCAyMDAgTCA3NzAgMzAgTCA2MDAgMzAgTCA2MDAgMCBMIDgwMCAwIEwgODAwIDIwMCBaIi8+CiAgICA8cGF0aCBpZD0iLS0yIiBmaWxsPSIjMzkzYzUwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgZD0iTSA4MDAgNjAwIEwgNzcwIDYwMCBMIDc3MCA3NzAgTCA2MDAgNzcwIEwgNjAwIDgwMCBMIDgwMCA4MDAgTCA4MDAgNjAwIFoiLz4KICAgIDxwYXRoIGlkPSItLTMiIGZpbGw9IiMzOTNjNTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiBkPSJNIDAgNjAwIEwgMzAgNjAwIEwgMzAgNzcwIEwgMjAwIDc3MCBMIDIwMCA4MDAgTCAwIDgwMCBMIDAgNjAwIFoiLz4KPC9zdmc+') center no-repeat;
  }
  .app-scan-load > div > div{
    width:60px;
    height:60px;
    position:relative;
  }
  .app-scan-load > div > div::before {
    content:"";
    position:absolute;
    top:0px;
    bottom:0px;
    left:0;
    width:4px;
    background:linear-gradient(to right,
      transparent 0%,
      rgba(0,176,90,.14) 28%,
      rgba(0,176,90,.45) 40%,
      var(--green-color) 43%,
      var(--green-color) 57%,       /* ядро 30px×(57-43)% ≈ 4px, насыщенный */
      rgba(0,176,90,.45) 60%,
      rgba(0,176,90,.14) 72%,
      transparent 100%);
    box-shadow:0 0 12px 3px rgba(0,176,90,.4);
    clip-path:inset(0);
    animation:
      x 1s linear infinite alternate,
      y 2s linear infinite;
  }
  @keyframes x {
    to {
      transform:translateX(-100%);
      left:100%;
    }
  }
  @keyframes y{
     33% {
       clip-path:inset(0 0 0 -20px);    
     }
     50% {
       clip-path:inset(0 0 0 0);    
     }
     83%{
       clip-path:inset(0 -20px 0 0); 
     }
  }

  .app-detect-load2 > div{
    margin: 0px auto;
    width:100px;
    height:100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 10px solid #ffffff;
    border-radius: 5px;
    background: #ffffff url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MDAgODAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggaWQ9InBhdGgxIiBmaWxsPSIjMzkzYzUwIiBzdHJva2U9Im5vbmUiIGQ9Ik0gNTk0Ljg0NjY4IDM1OC44NTY2NTkgTCA1ODUuNjA0MTg3IDM0OS4wNzA0OTYgTCA1NTMuMTY0OTE3IDI2MS42Mjk1MTcgQyA1NDcuNjM3NTczIDI0Ni44NTk2OCA1MzMuNTAyMDE0IDIzNy4wNzM1NDcgNTE3LjczNTQ3NCAyMzYuOTgyOTEgTCAyODYuMDM5NDI5IDIzNi45ODI5MSBDIDI3MC4yNzI4NTggMjM2Ljk4MjkxIDI1Ni4xMzcyOTkgMjQ2Ljg1OTY4IDI1MC42MDk5NCAyNjEuNjI5NTE3IEwgMjE4LjYyMzc0OSAzNDcuOTgzMTU0IEwgMjA1LjMwMzcxMSAzNjAuMzA2NDU4IEMgMTkzLjcwNTMyMiAzNzAuMTgzMTk3IDE4NyAzODQuNjgxMjEzIDE4NyAzOTkuOTA0MTE0IEwgMTg3IDUyNy4zMDUxNzYgQyAxODcuMDkwNjA3IDU0OC4xNDYxMTggMjA0LjAzNTE0MSA1NjUgMjI0Ljg3NjAwNyA1NjUgTCAyNDguNzk3Njk5IDU2NSBDIDI2OS42Mzg1NSA1NjUgMjg2LjU4MzA5OSA1NDguMTQ2MTE4IDI4Ni42NzM3MDYgNTI3LjMwNTE3NiBMIDI4Ni42NzM3MDYgNTA4LjgyMDI4MiBMIDUxMS4zOTI1NzggNTA4LjgyMDI4MiBMIDUxMS4zOTI1NzggNTI3LjMwNTE3NiBDIDUxMS40ODMyMTUgNTQ4LjE0NjExOCA1MjguNDI3NzM0IDU2NSA1NDkuMjY4NjE2IDU2NSBMIDU3My4xOTAzMDggNTY1IEMgNTk0LjAzMTE4OSA1NjUgNjEwLjk3NTcwOCA1NDguMTQ2MTE4IDYxMS4wNjYyODQgNTI3LjMwNTE3NiBMIDYxMS4wNjYyODQgMzk2LjU1MTQ1MyBDIDYxMC45NzU3MDggMzgyLjMyNTI1NiA2MDUuMTc2NTE0IDM2OC43MzMzOTggNTk0Ljg0NjY4IDM1OC44NTY2NTkgWiBNIDI2Ny42NDUwODEgMjY3Ljc5MTEzOCBDIDI3MC41NDQ2NzggMjYwLjA4OTExMSAyNzcuODg0MzA4IDI1NS4xMDU0MDggMjg2LjAzOTQyOSAyNTUuMTA1NDA4IEwgNTE3LjgyNjExMSAyNTUuMTA1NDA4IEMgNTI1Ljk4MTIwMSAyNTUuMTA1NDA4IDUzMy4zMjA4NjIgMjYwLjE3OTY4OCA1MzYuMjIwMzk4IDI2Ny43OTExMzggTCA1NjQuNDkxNTE2IDM0My45MDU2MDkgTCA1NDMuMzc4Nzg0IDM0My45MDU2MDkgQyA1MzguMzk1MDgxIDMwOS45MjU5MzQgNTA2Ljc3MTMzMiAyODYuNDU3MzM2IDQ3Mi43OTE2ODcgMjkxLjUzMTYxNiBDIDQ0NS42OTg1NzggMjk1LjUxODU1NSA0MjQuNDA0NjMzIDMxNi44MTI0NjkgNDIwLjQxNzY5NCAzNDMuOTA1NjA5IEwgMjM5LjM3Mzk5MyAzNDMuOTA1NjA5IEwgMjY3LjY0NTA4MSAyNjcuNzkxMTM4IFogTSA1MjQuODkzODYgMzQzLjkwNTYwOSBMIDQzOC43MjE0MDUgMzQzLjkwNTYwOSBDIDQ0My43MDUwNzggMzIwLjA3NDUyNCA0NjcuMDgzMTMgMzA0Ljg1MTYyNCA0OTAuOTE0MTU0IDMwOS44MzUyOTcgQyA1MDcuOTQ5MzEgMzEzLjQ1OTgwOCA1MjEuMjY5MzQ4IDMyNi43Nzk4NDYgNTI0Ljg5Mzg2IDM0My45MDU2MDkgWiBNIDI2OC41NTEyMDggNTI3LjMwNTE3NiBDIDI2OC40NjA2MDIgNTM4LjE3ODcxMSAyNTkuNjcxMTczIDU0Ni44Nzc1MDIgMjQ4Ljc5NzY5OSA1NDYuODc3NTAyIEwgMjI0Ljg3NjAwNyA1NDYuODc3NTAyIEMgMjE0LjAwMjUxOCA1NDYuODc3NTAyIDIwNS4yMTMxMDQgNTM4LjE3ODcxMSAyMDUuMTIyNDk4IDUyNy4zMDUxNzYgTCAyMDUuMTIyNDk4IDUwMy41NjQ3NTggQyAyMTAuNTU5MjM1IDUwNy4wOTg2MzMgMjE3LjcxNzYyMSA1MDguODIwMjgyIDIyNC44NzYwMDcgNTA4LjgyMDI4MiBMIDI2OC41NTEyMDggNTA4LjgyMDI4MiBMIDI2OC41NTEyMDggNTI3LjMwNTE3NiBaIE0gNTkyLjk0Mzc4NyA1MjcuMzA1MTc2IEMgNTkyLjg1MzIxIDUzOC4xNzg3MTEgNTg0LjA2Mzc4MiA1NDYuODc3NTAyIDU3My4xOTAzMDggNTQ2Ljg3NzUwMiBMIDU0OS4yNjg2MTYgNTQ2Ljg3NzUwMiBDIDUzOC4zOTUwODEgNTQ2Ljg3NzUwMiA1MjkuNjA1NzEzIDUzOC4wODgxMzUgNTI5LjUxNTA3NiA1MjcuMzA1MTc2IEwgNTI5LjUxNTA3NiA1MDguODIwMjgyIEwgNTczLjE5MDMwOCA1MDguODIwMjgyIEMgNTgwLjM0ODY5NCA1MDguODIwMjgyIDU4Ny41MDcwMTkgNTA3LjA5ODYzMyA1OTIuOTQzNzg3IDUwMy41NjQ3NTggTCA1OTIuOTQzNzg3IDUyNy4zMDUxNzYgWiBNIDU3My4xOTAzMDggNDkwLjY5Nzc4NCBMIDIyNC44NzYwMDcgNDkwLjY5Nzc4NCBDIDIxNC4wOTMxMjQgNDkwLjc4ODM5MSAyMDUuMjEzMTA0IDQ4Mi4xODAyMzcgMjA1LjEyMjQ5OCA0NzEuMzA2NzMyIEwgMjA1LjEyMjQ5OCAzOTkuOTA0MTE0IEMgMjA1LjEyMjQ5OCAzODkuOTM2NzM3IDIwOS41NjI1IDM4MC40MjI0MjQgMjE3LjE3Mzk1IDM3My45ODg5MjIgTCAyMjkuODU5Njk1IDM2Mi4wMjgxMDcgTCA1NzMuMDA5MDMzIDM2Mi4wMjgxMDcgTCA1ODIuMTYwOTUgMzcxLjgxNDI0IEMgNTg4Ljk1Njg0OCAzNzguMjQ3NzExIDU5Mi44NTMyMSAzODcuMjE4MzUzIDU5Mi44NTMyMSAzOTYuNTUxNDUzIEwgNTkyLjk0Mzc4NyA0NzEuMzA2NzMyIEMgNTkyLjg1MzIxIDQ4Mi4wODk2IDU4My45NzMyMDYgNDkwLjc4ODM5MSA1NzMuMTkwMzA4IDQ5MC42OTc3ODQgWiIvPgogICAgPHBhdGggaWQ9InBhdGgyIiBmaWxsPSIjMzkzYzUwIiBzdHJva2U9Im5vbmUiIGQ9Ik0gMzA2LjYwODQ1OSAzOTguMjczMTAyIEwgMjM4LjY0OTA5NCAzOTguMjczMTAyIEMgMjMzLjY2NTQyMSAzOTguMjczMTAyIDIyOS41ODc4NiA0MDIuMzUwNjQ3IDIyOS41ODc4NiA0MDcuMzM0MzIgTCAyMjkuNTg3ODYgNDU0LjQ1MjgyIEMgMjI5LjU4Nzg2IDQ1OS40MzY0OTMgMjMzLjY2NTQyMSA0NjMuNTE0MDM4IDIzOC42NDkwOTQgNDYzLjUxNDAzOCBMIDMwNi42MDg0NTkgNDYzLjUxNDAzOCBDIDMxMS41OTIxMzMgNDYzLjUxNDAzOCAzMTUuNjY5NzA4IDQ1OS40MzY0OTMgMzE1LjY2OTcwOCA0NTQuNDUyODIgTCAzMTUuNjY5NzA4IDQwNy4zMzQzMiBDIDMxNS42Njk3MDggNDAyLjM1MDY0NyAzMTEuNTkyMTMzIDM5OC4yNzMxMDIgMzA2LjYwODQ1OSAzOTguMjczMTAyIFogTSAyOTcuNTQ3MjExIDQ0NS4zOTE1NzEgTCAyNDcuNzEwMzQyIDQ0NS4zOTE1NzEgTCAyNDcuNzEwMzQyIDQxNi4zOTU1NjkgTCAyOTcuNTQ3MjExIDQxNi4zOTU1NjkgTCAyOTcuNTQ3MjExIDQ0NS4zOTE1NzEgWiBNIDU1OS40MTcxNzUgMzk4LjI3MzEwMiBMIDQ5MS40NTc4NTUgMzk4LjI3MzEwMiBDIDQ4Ni40NzQxODIgMzk4LjI3MzEwMiA0ODIuMzk2NjA2IDQwMi4zNTA2NDcgNDgyLjM5NjYwNiA0MDcuMzM0MzIgTCA0ODIuMzk2NjA2IDQ1NC40NTI4MiBDIDQ4Mi4zOTY2MDYgNDU5LjQzNjQ5MyA0ODYuNDc0MTgyIDQ2My41MTQwMzggNDkxLjQ1Nzg1NSA0NjMuNTE0MDM4IEwgNTU5LjQxNzE3NSA0NjMuNTE0MDM4IEMgNTY0LjQwMDg3OSA0NjMuNTE0MDM4IDU2OC40Nzg0NTUgNDU5LjQzNjQ5MyA1NjguNDc4NDU1IDQ1NC40NTI4MiBMIDU2OC40Nzg0NTUgNDA3LjMzNDMyIEMgNTY4LjQ3ODQ1NSA0MDIuMzUwNjQ3IDU2NC40MDA4NzkgMzk4LjI3MzEwMiA1NTkuNDE3MTc1IDM5OC4yNzMxMDIgWiBNIDU1MC4zNTU5NTcgNDQ1LjM5MTU3MSBMIDUwMC41MTkxMDQgNDQ1LjM5MTU3MSBMIDUwMC41MTkxMDQgNDE2LjM5NTU2OSBMIDU1MC4zNTU5NTcgNDE2LjM5NTU2OSBMIDU1MC4zNTU5NTcgNDQ1LjM5MTU3MSBaIE0gNDQyLjc5ODk1IDQzNi4zMzAzMjIgTCAzNTUuMjY3MzM0IDQzNi4zMzAzMjIgQyAzNTAuMjgzNjMgNDM2LjMzMDMyMiAzNDYuMjA2MDg1IDQ0MC40MDc4NjcgMzQ2LjIwNjA4NSA0NDUuMzkxNTcxIEMgMzQ2LjIwNjA4NSA0NTAuMzc1MjQ0IDM1MC4yODM2MyA0NTQuNDUyODIgMzU1LjI2NzMzNCA0NTQuNDUyODIgTCA0NDIuNzk4OTUgNDU0LjQ1MjgyIEMgNDQ3Ljc4MjYyMyA0NTQuNDUyODIgNDUxLjg2MDE5OSA0NTAuMzc1MjQ0IDQ1MS44NjAxOTkgNDQ1LjM5MTU3MSBDIDQ1MS44NjAxOTkgNDQwLjQwNzg2NyA0NDcuNzgyNjIzIDQzNi4zMzAzMjIgNDQyLjc5ODk1IDQzNi4zMzAzMjIgWiBNIDQ0Mi43OTg5NSA0MDguMjQwNDQ4IEwgMzU1LjI2NzMzNCA0MDguMjQwNDQ4IEMgMzUwLjI4MzYzIDQwOC4yNDA0NDggMzQ2LjIwNjA4NSA0MTIuMzE4MDI0IDM0Ni4yMDYwODUgNDE3LjMwMTY5NyBDIDM0Ni4yMDYwODUgNDIyLjI4NTM3IDM1MC4yODM2MyA0MjYuMzYyOTQ2IDM1NS4yNjczMzQgNDI2LjM2Mjk0NiBMIDQ0Mi43OTg5NSA0MjYuMzYyOTQ2IEMgNDQ3Ljc4MjYyMyA0MjYuMzYyOTQ2IDQ1MS44NjAxOTkgNDIyLjI4NTM3IDQ1MS44NjAxOTkgNDE3LjMwMTY5NyBDIDQ1MS44NjAxOTkgNDEyLjMxODAyNCA0NDcuNzgyNjIzIDQwOC4yNDA0NDggNDQyLjc5ODk1IDQwOC4yNDA0NDggWiIvPgogICAgPHBhdGggaWQ9InBhdGgzIiBmaWxsPSIjMzkzYzUwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgZD0iTSAwIDIwMCBMIDMwIDIwMCBMIDMwIDMwIEwgMjAwIDMwIEwgMjAwIDAgTCAwIDAgTCAwIDIwMCBaIi8+CiAgICA8cGF0aCBpZD0iLSIgZmlsbD0iIzM5M2M1MCIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2U9Im5vbmUiIGQ9Ik0gODAwIDIwMCBMIDc3MCAyMDAgTCA3NzAgMzAgTCA2MDAgMzAgTCA2MDAgMCBMIDgwMCAwIEwgODAwIDIwMCBaIi8+CiAgICA8cGF0aCBpZD0iLS0yIiBmaWxsPSIjMzkzYzUwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0ibm9uZSIgZD0iTSA4MDAgNjAwIEwgNzcwIDYwMCBMIDc3MCA3NzAgTCA2MDAgNzcwIEwgNjAwIDgwMCBMIDgwMCA4MDAgTCA4MDAgNjAwIFoiLz4KICAgIDxwYXRoIGlkPSItLTMiIGZpbGw9IiMzOTNjNTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSJub25lIiBkPSJNIDAgNjAwIEwgMzAgNjAwIEwgMzAgNzcwIEwgMjAwIDc3MCBMIDIwMCA4MDAgTCAwIDgwMCBMIDAgNjAwIFoiLz4KPC9zdmc+') center no-repeat;
  }

.app-detect-load2 > div > div{
    width:60px; height:60px;
    position:relative;
    overflow:hidden;
}
.app-detect-load2 > div > div::before {
    content:"";
    position:absolute;
    top:0; bottom:0; left:0;
    width:30px;
    transform-origin:right center;
    background:linear-gradient(to right,
      transparent 0%,
      rgba(76,175,80,.12) 25%,
      rgba(76,175,80,.45) 65%,
      var(--green-color) 92%,
      var(--green-color) 100%);        /* яркая голова на ведущем крае */
    animation:scan 3s linear infinite;
    pointer-events:none;
}
@keyframes scan {
    0%   { transform:translateX(-30px) scaleX(1);  animation-timing-function:ease-in-out; }
    49%  { transform:translateX(30px)  scaleX(1);  animation-timing-function:step-end; }
    50%  { transform:translateX(30px)  scaleX(-1); animation-timing-function:ease-in-out; }
    98%  { transform:translateX(-30px) scaleX(-1); animation-timing-function:step-end; }
    100% { transform:translateX(-30px) scaleX(1);  animation-timing-function:ease-in-out; }
}
.app-detect-load4 > div > div{
    width:60px; height:60px;
    position:relative;
    overflow:hidden;
}

.app-detect-load4 > div > div::before {
    content:"";
    position:absolute;
    top:0; bottom:0; left:0;
    width:30px;
    background:linear-gradient(to right,
      transparent 0%,
      rgba(76,175,80,.15) 25%,
      rgba(76,175,80,.55) 50%,      /* яркий центр = столбик */
      rgba(76,175,80,.15) 75%,
      transparent 100%);
    filter:blur(1px);
    animation:x 1s ease-in-out infinite alternate;   /* торможение в начале/конце хода */
    pointer-events:none;
}

@keyframes x {
    to { left:100%; transform:translateX(-100%); }
}
/* App - Notice */
.app-notice{position: fixed;z-index: 101;bottom: 0px;left: 0px;right: 0px;padding: 0px 30px 10px 30px;}
.app-notice-button{width: 8px;height: 8px;text-align: center;text-decoration: none;position: absolute;cursor: pointer;right: 10px;top: 10px;opacity: 0.3;z-index: 1;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCI+PHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHBvaW50cz0iMTQsMC43IDEzLjMsMCA3LDYuMjk5IDAuNywwIDAsMC43IDYuMyw3IDAsMTMuMjk5IDAuNywxNCA3LDcuNyAxMy4zLDE0IDE0LDEzLjI5OSA3LjcsNyIvPjwvc3ZnPg==') no-repeat center;}
.app-notice-item{font-size: 14px;background: #393c50;color: rgba(255,255,255,0.9);box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);letter-spacing: 0.6px;line-height: 18px;padding: 10px 25px 12px 15px;text-align: center; border-radius: 5px;position: relative;max-width: 320px;width: 100%;margin: 10px auto 0px auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

/* общий вид поля */
.ts-control {
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.ts-control input{
    font-size: 14px;
}

/* подсветка пункта */
.ts-dropdown .option.active {  }
.ts-dropdown .option.selected {  }

/* выбранный чип */
.ts-control .item {
    
}

/* выключенный */
.ts-wrapper.disabled .ts-control { 
    opacity: 1; 
    cursor: not-allowed; 
    background-color: var(--back-color);
}

.app-none{display: none;}
.app-title{
    font-size: 24px;
    line-height: 30px;
    margin: 0px 0px 15px 0px;
    padding: 0;
}
.app-wrap-index{
    padding: 60px 20px;
    max-width: 1280px;
    margin: 0px auto;
}
@media only screen and (max-width: 500px){
    .app-wrap-index{
        padding: 10px;
    }
    .app-title{
        font-size: 20px;
        line-height: 25px;
        margin: 0px 0px 15px 0px;
        padding: 0;
    }
}
.app-paginator{
    padding: 20px 0px 0px 0px;
    overflow: hidden;
} 
.app-paginator ul{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.app-paginator ul li{
    padding: 0px;
    white-space: nowrap;
    list-style: none;
    overflow: hidden;
    border-radius: 10px;
    font-weight: 400;
    font-size: 14px;
}
.app-paginator ul li a{
    display: block;
    height: 34px;
    min-width: 34px;
    text-align: center;
    line-height: 34px;
    padding: 0px 12px;
    margin: 0px;
    background-color: #eeeeee;
    text-decoration: none;
}
.app-paginator ul li span{
    display: block;
    height: 34px;
    min-width: 34px;
    text-align: center;
    line-height: 34px;
    padding: 0px 12px;
    margin: 0px;
    background-color: var(--brown-color);
    color: #ffffff;
}
.app-paginator ul li a.app-paginator-prev{
    background: #eeeeee url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik01NjAtMjQwIDMyMC00ODBsMjQwLTI0MCA1NiA1Ni0xODQgMTg0IDE4NCAxODQtNTYgNTZaIi8+PC9zdmc+') center no-repeat;
}
.app-paginator ul li a.app-paginator-next{
    background: #eeeeee url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik01MDQtNDgwIDMyMC02NjRsNTYtNTYgMjQwIDI0MC0yNDAgMjQwLTU2LTU2IDE4NC0xODRaIi8+PC9zdmc+') center no-repeat;
}
.swiper-horizontal > .swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, 
.swiper-pagination-fraction{
    bottom: 0;
}
.swiper-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 20px 0;
    margin: 0;
}
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    opacity: 1;
    transition: width 0.25s, background 0.25s;
    bottom: 0;
}
.swiper-pagination-bullet-active{
    border-radius: 4px;
    background: var(--green-color);
    width: 24px;
}

/*
----------------------------
----- <App-Tab> 
----------------------------
*/

.app-tab{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    max-width: 600px;
    gap: 10px;
}
.app-tab a{
    color: var(--black-color);
    background-color: var(--back-color);
    border-radius: 10px;
    text-align: center;
    line-height: 35px;
    height: 35px;
    width: calc(100% / 3);
}
.app-tab .select{
    background-color: var(--black-color);
    color: var(--white-color);
    border: none;
}

/*
----------------------------
----- <App-Button-Answer> 
----------------------------
*/

.app-button-answer{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 15px;
    background-color: #00b05b24;
    font-weight: 500;
    height: 40px;
    margin-bottom: 20px;
    text-align: center;
}
.app-button-answer i{
    font-size: 20px;
    margin-right: 6px;
}

/*
----------------------------
----- <App-Filter-Select> 
----------------------------
*/

.app-filter-select{
    padding: 0px;
    position: relative;
    padding-bottom: 10px;
}
.app-filter-select .select{
    position: relative;
    margin-bottom: 10px;
}
.app-filter-select .select i{
    position: absolute;
    color: var(--black-color);
    height: 20px;
    width: 20px;
    font-size: 20px;
    display: block;
    top: 10px;
    left: 10px;
}
.app-filter-select select > * {
    visibility: hidden;
}
.app-filter-select select::-ms-expand{
    display: none;
}
.app-filter-select select{
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 15px 0px 35px;
    color: var(--black-color);
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    display: block;
    border-radius: 10px;
    font-size: 14px;
    appearance: none!important;
}
.app-man-select{
    padding-bottom: 10px;
}
.app-man-select .ts-control {
    margin-bottom: 10px;
}
@media only screen and (max-width: 500px)
{
    .app-man-select{
        padding-bottom: 0px;
    }
}
/*
----------------------------
-----<App-Bread> 
----------------------------
*/

.app-bread{
    color: #00000079;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    white-space: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 5px;
    line-height: 11px;
    height: 11px;
}
.app-bread::-webkit-scrollbar {
  display: none;
}

.app-bread *{
  flex-shrink: 0;
}
.app-bread a{
    color: #00000079;
    text-transform: uppercase;
    font-size: 11px;
}

/*
----------------------------
----- <App-Bar>
----------------------------
*/

.app-bar{
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 60px;
    background-color: var(--white-color);
    box-shadow: 0px -10px 10px -8px rgba(0, 0, 0, 0.24);
}
.app-bar a i{
    display: block;
    font-size: 22px;
    height: 22px;
    width: 22px;
    display: block;
    margin: 0px auto;
    color: var(--black-color);
}
@media only screen and (max-width: 500px)
{
    .app-bar{
        display: flex;
    }
}

/*
----------------------------
----- <App-Prod-Desc>
----------------------------
*/

.app-prod-desc p{
    margin: 0px 0px 8px 0px;
    padding: 0px;
    line-height: 22px;
}
.app-prod-desc img{
    width: 100%;
    height: auto;
    display: block;
    margin: 0px 0px 8px 0px;
    padding: 0px;
}
.app-prod-desc ul{
    margin: 0px 0px 10px 20px;
    padding: 0px;
}
.app-prod-desc ul li{
    line-height: 22px;
}

/*
----------------------------
----- <App-Prod-Short>
----------------------------
*/

.app-prod-short{
    border-radius: 16px;
    border: 1px solid var(--border-color);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}
.app-prod-short .fav{
    position: absolute;
    right: 20px;
    top: 20px;
}
.app-prod-short .fav i{
    font-size: 20px;
    display: block;
}
.app-prod-short .fav .ph-light{
    color: var(--border-color);
}
.app-prod-short .fav .ph-fill{
    color: var(--red-color);
}
.app-prod-short .best{
    display: block;
    border-radius: 6px;
    padding: 4px 8px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    background-color: var(--blue-color);
    color: var(--white-color);
    position: absolute;
    left: 20px;
    top: 20px;
}
.app-prod-short img{
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}
.app-prod-short .price{
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    margin: 10px 0px 4px 0px;
    font-family: "Google Sans", sans-serif;
}
.app-prod-short .name{
    display: block;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    margin: 0px 0px 8px 0px;
    line-height: 20px;
}
.app-prod-short .count{
    margin-bottom: 8px;
    color: var(--brown-color);
    white-space: nowrap;
    line-height: 14px;
}
.app-prod-short .art{
    display: flex;
    margin-bottom: 55px;
    align-items: center;
    white-space: nowrap;
}
.app-prod-short .art span{
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    color: #888888;
    margin: 0px 5px;
}
.app-prod-short .art a{
    font-size: 18px;
    color: #888888;
}
.app-prod-short .addcart{
    cursor: pointer;
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: var(--green-color);
    color: var(--white-color);
    text-decoration: none;
    padding: 0px 15px;
    border-radius: 10px;
    line-height: 35px;
    height: 35px;
}
.app-prod-short .addcart.is-in-cart {
  background: var(--back-color);
  color: var(--black-color);
}

.app-prod-short .addcart .label-in,
.app-prod-short .addcart .label-remove { display: none; }
.app-prod-short .addcart.is-in-cart .label-add { display: none; }
.app-prod-short .addcart.is-in-cart .label-in { display: inline; }
.app-prod-short .addcartis-in-cart .label-remove { display: none; }

.app-prod-short .nocart{
    cursor: pointer;
    display: block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
    text-decoration: none;
    padding: 0px 15px;
    border-radius: 10px;
    line-height: 33px;
    height: 35px;
}

@media only screen and (max-width: 500px)
{
    .app-prod-short{
        padding: 10px;
    }
    .app-prod-short .name{
        margin: 0px 0px 5px 0px;
    }
    .app-prod-short .art{
        margin-bottom: 45px;
    }
    .app-prod-short .fav{
        right: 10px;
        top: 10px;
    }
    .app-prod-short .best{
        left: 10px;
        top: 10px;
    }
    .app-prod-short .price{
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        margin: 10px 0px 4px 0px;
    }
    .app-prod-short .addcart,
    .app-prod-short .nocart{
        text-align: center;
        bottom: 10px;
        right: 10px;
        left: 10px;
    }
}

/*
----------------------------
----- <App-Prod-Photo> 
----------------------------
*/

.app-prod-photo{
    position: relative;
    margin-bottom: 10px;
}
.app-prod-photo .fav{
    display: block;
    position: absolute;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 4px;
    z-index: 10;
    top: 10px;
    right: 10px;
}
.app-prod-photo .fav i{
    font-size: 26px;
    display: block;
    height: 26px;
    width: 26px;
}
.app-prod-photo .fav .ph-light{color: var(--black-color);}
.app-prod-photo .fav .ph-fill{color: var(--red-color);}

.app-prod-photo .swiper{
    border-radius: 16px;
    border: 1px solid var(--border-color);
}
.app-prod-photo .swiper-pagination{
    z-index: 10;
    position: absolute;
    background-color: var(--black-color);
    border-radius: 10px;
    padding: 5px 3px;
    width: auto;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    gap: 1px;
}
.app-prod-photo .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-color);
    opacity: 1;
    transition: width 0.25s, background 0.25s;
    bottom: 0;
}
.app-prod-photo .swiper-pagination-bullet-active{
    border-radius: 4px;
    background: var(--green-color);
    width: 20px;
}
.app-prod-photo .item{
    display: flex;
    padding: 10px;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 400px;
}
.app-prod-photo .item img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0px;
}
.app-prod-photo .item.has-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  z-index: 5;
}
.app-prod-photo .item.has-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  transform: translate(-50%, -50%);
  z-index: 6;
}
@media only screen and (max-width: 500px)
{
    .app-prod-photo .item{
        height: 300px;
    }   
}

/*
----------------------------
----- <App-Prod-Prop>  
----------------------------
*/

.app-prod-prop .rating{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.app-prod-prop .rating .stars{
    margin: 0px 10px 0px 0px; 
    width: 85px;
    height: 14px;
    line-height: 14px;
    height: 14px;
    display: block;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTggMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSI+CjxwYXRoIGQ9Ik02Ljk4NSAxMC45OSBMMy4xODEgMTMuMzEzIEMyLjk4OCAxMy40MzEgMi43NDIgMTMuNDIgMi41NTggMTMuMjg1IDIuMzc2IDEzLjE1MSAyLjI5MiAxMi45MiAyLjM0NyAxMi42OTkgTDMuNDUgOC4zMDggMC4yNTIgNS44MTkgQzAuMDY5IDUuNjc4IC0wLjAwOCA1LjQzOSAwLjA1NyA1LjIxNyAwLjEyNCA0Ljk5NiAwLjMxOCA0LjgzNyAwLjU0OCA0LjgxOCBMNC43MzIgNC40NzQgNi40NzcgMC40MDYgQzYuNTY2IDAuMTk5IDYuNzY5IDAuMDY2IDYuOTkzIDAuMDY2IDcuMjE3IDAuMDY2IDcuNDIgMC4yMDEgNy41MDcgMC40MDcgTDkuMjM4IDQuNDc0IDEzLjQ0OSA0LjgyIEMxMy42NzkgNC44MzggMTMuODc0IDQuOTk3IDEzLjkzOSA1LjIxNyAxNC4wMDUgNS40MzkgMTMuOTI5IDUuNjc3IDEzLjc0NyA1LjgxOSBMMTAuNTM2IDguMzA4IDExLjYzNiAxMi43MDIgQzExLjY5MSAxMi45MjIgMTEuNjA4IDEzLjE1NCAxMS40MjUgMTMuMjg4IDExLjI0MiAxMy40MjQgMTAuOTk2IDEzLjQzNCAxMC44MDIgMTMuMzE2IEw2Ljk4NSAxMC45ODkgWiIgZmlsbD0iI2RkZGRkZCIvPjwvc3ZnPg==') left repeat-x;
}
.app-prod-prop .rating .stars span{
    height: 14px;
    display: block;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxNHB4IiB2aWV3Qm94PSIwIDAgMTggMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSI+CjxwYXRoIGQ9Ik02Ljk4NSAxMC45OSBMMy4xODEgMTMuMzEzIEMyLjk4OCAxMy40MzEgMi43NDIgMTMuNDIgMi41NTggMTMuMjg1IDIuMzc2IDEzLjE1MSAyLjI5MiAxMi45MiAyLjM0NyAxMi42OTkgTDMuNDUgOC4zMDggMC4yNTIgNS44MTkgQzAuMDY5IDUuNjc4IC0wLjAwOCA1LjQzOSAwLjA1NyA1LjIxNyAwLjEyNCA0Ljk5NiAwLjMxOCA0LjgzNyAwLjU0OCA0LjgxOCBMNC43MzIgNC40NzQgNi40NzcgMC40MDYgQzYuNTY2IDAuMTk5IDYuNzY5IDAuMDY2IDYuOTkzIDAuMDY2IDcuMjE3IDAuMDY2IDcuNDIgMC4yMDEgNy41MDcgMC40MDcgTDkuMjM4IDQuNDc0IDEzLjQ0OSA0LjgyIEMxMy42NzkgNC44MzggMTMuODc0IDQuOTk3IDEzLjkzOSA1LjIxNyAxNC4wMDUgNS40MzkgMTMuOTI5IDUuNjc3IDEzLjc0NyA1LjgxOSBMMTAuNTM2IDguMzA4IDExLjYzNiAxMi43MDIgQzExLjY5MSAxMi45MjIgMTEuNjA4IDEzLjE1NCAxMS40MjUgMTMuMjg4IDExLjI0MiAxMy40MjQgMTAuOTk2IDEzLjQzNCAxMC44MDIgMTMuMzE2IEw2Ljk4NSAxMC45ODkgWiIgZmlsbD0iI2ZmY2MwMCIvPjwvc3ZnPg==') left repeat-x;
}
.app-prod-prop .rating .stars span[data-star='0']{width: 0px;}
.app-prod-prop .rating .stars span[data-star='1']{width: 18px;}
.app-prod-prop .rating .stars span[data-star='2']{width: 36px;}
.app-prod-prop .rating .stars span[data-star='3']{width: 54px;}
.app-prod-prop .rating .stars span[data-star='4']{width: 72px;}
.app-prod-prop .rating .stars span[data-star='5']{width: 85px;}

.app-prod-prop .tag{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    gap: 10px;
}
.app-prod-prop .tag a{
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #dcedff;
    text-decoration: none;
    padding: 0px 6px;
    height: 24px;
    line-height: 24px;
    border-radius: 6px;
    font-size: 13px;
}
.app-prod-prop .tag a i{
    font-size: 16px;
    margin-right: 5px;
}
.app-prod-prop .start{
    margin: 0px 6px 5px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-prod-prop .start .art{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.app-prod-prop .start .art i{
    font-size: 20px;
    height: 20px;
    width: 20px;
    margin-left: 5px;
}
.app-prod-prop .start .count{
    display: flex;
    align-items: center;
}
.app-prod-prop .start .count.stock::before{
    content: "";
    height: 8px;
    width: 8px;
    margin-right: 8px;
    background-color: var(--green-color);
    border-radius: 4px;
}
.app-prod-prop .start .count.soldout::before{
    content: "";
    height: 8px;
    width: 8px;
    margin-right: 8px;
    background-color: var(--red-color);
    border-radius: 4px;
}
.app-prod-prop .price{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    font-weight: 700;
    margin: 0px 0px 10px 6px;
    font-family: "Google Sans", sans-serif;
    display: flex;
    align-items: flex-start;
}
.app-prod-prop .best{
    margin-left: 10px;
    border-radius: 5px;
    padding: 0px 6px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    line-height: 20px;
    height: 20px;
    background-color: var(--blue-color);
    color: var(--white-color);
}
.app-prod-prop .price .discont{
    display: flex;
    align-items: flex-start;
}
.app-prod-prop .price .discont span{
    font-size: 14px;
    height: 14px;
    line-height: 14px;
    font-weight: 400;
    text-decoration: line-through;
    margin: 0px 0px 0px 10px;
    color: #000000ba;
}
.app-prod-prop .price .discont i{
    font-size: 12px;
    font-style: normal;
    line-height: 12px;
    background-color: var(--red-color);
    font-weight: 700;
    padding: 4px 4px;
    border-radius: 5px;
    margin: 0px 0px 0px 10px;
    color: #ffffff;
}
.app-prod-prop .cart{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 10px;
}
.app-prod-prop .cart .add{
    flex: 0 0 calc(50% - 5px);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--white-color);
    background-color: var(--green-color);
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
.app-prod-prop .cart .add.is-in-cart {
  background: var(--back-color);
  color: var(--black-color);
}

.app-prod-prop .cart .add .label-in,
.app-prod-prop .cart .add .label-remove { display: none; }
.app-prod-prop .cart .add.is-in-cart .label-add { display: none; }
.app-prod-prop .cart .add.is-in-cart .label-in { display: inline; }
.app-prod-prop .cart .add.is-in-cart .label-remove { display: none; }


.app-prod-prop .cart .one{
    flex: 0 0 calc(50% - 5px);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--black-color);
    background-color: #ffcc0050;
    border-radius: 10px;
    text-align: center;
    line-height: 40px;
    height: 40px;
}
.app-prod-prop .ozon{
    height: 40px;
    line-height: 40px;
    display: block;
    color: var(--white-color);
    background-color: #005bff;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
.app-prod-prop .ozon img{
    width: auto;
    height: 18px;
    margin-left: 8px;
}
.app-prod-prop .wb{
    height: 40px;
    line-height: 40px;
    display: block;
    color: var(--white-color);
    background-color: #a73afd;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
.app-prod-prop .wb img{
    width: auto;
    height: 18px;
    margin-left: 8px;
}
.app-prod-prop .avito{
    height: 40px;
    line-height: 40px;
    display: block;
    color: var(--white-color);
    background-color: #00aaff;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}
.app-prod-prop .avito img{
    width: auto;
    height: 18px;
    margin-left: 8px;
}
/*
----------------------------
----- <App-Related> 
----------------------------
*/

.app-related{
    margin-bottom: 20px;
}
.app-related .item{
    display: flex;
    margin-bottom: 10px;
    color: var(--black-color);
}
.app-related .item img{
    width: 60px;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-right: 10px;
    padding: 5px;
}
.app-related .item span{
    display: block;
    max-height: 34px;
    overflow: hidden;
    margin-bottom: 5px;
}
.app-related .item strong{
    display: block;
    color: var(--black-color);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
}

/*
----------------------------
----- <App-Related> 
----------------------------
*/

.app-doc{
    margin-bottom: 20px;
}
.app-doc .item{
    display: flex;
    margin-bottom: 10px;
    color: var(--black-color);
}
.app-doc .item i{
    width: 60px;
    height: 60px;
    font-size: 40px;
    border-radius: 8px;
    color: var(--red-color);
    border: 1px solid var(--border-color);
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    display: flex;
    padding: 5px;
}
.app-doc .item span{
    display: block;
    max-height: 34px;
    overflow: hidden;
    margin-bottom: 5px;
}
.app-doc .item strong{
    display: block;
    color: var(--black-color);
    font-family: "Google Sans", sans-serif;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
}

/*
----------------------------
----- <App-Header> 
----------------------------
*/

.app-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--black-color);
    transition: background 0.3s ease;
}

.app-header.scrolled{
    background: #252833;
}
.app-header .wrap{
    display: flex;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    height: 60px;
}
.app-header .logo{
    flex-grow: 0;
}
.app-header .soc{
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0 20px;
    gap: 10px;
}
.app-header .soc a{
    width: 24px;
}
.app-header .soc a img{
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.app-header .logo img{
    width: auto;
    height: 40px;
    display: block;
}
.app-header a.phone{
    font-size: 16px;
    font-weight: 700;
    color: var(--white-color);
}
.app-header .icon{
    flex-grow: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.app-header .icon .search,
.app-header .icon .cart,
.app-header .icon .user,
.app-header .icon .menu{
    font-size: 28px;
    position: relative;
    color: var(--white-color);
    height: 28px;
    width: 28px;
}
.app-header .icon .menu{
    display: none;
}

.app-header .nav{
    flex-grow: 1;
    overflow: auto;
    margin-right: 20px;
}
.app-header .nav ul{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0px 0px;
    padding: 0;
}
.app-header .nav ul li{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.app-header .nav ul li a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}



@media (max-width: 1080px){
    .app-header .soc{
        display: none;
    }
    .app-header .phone{
        display: none;
    }
    .app-header .nav ul{
        display: none;
    }
    .app-header .icon .menu{
        display: flex;
    }
}

/* 
----------------------------
-----<App-Hero> 
----------------------------
*/

.app-hero{
    background-color: #252833;
}
.app-hero .items{
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 200px 200px rgba(0, 0, 0, 0.8);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding: 0px;
}

.app-hero .swiper-pagination{
    z-index: 100;
    position: absolute;
    padding: 0px 0px 0px 0px;
    bottom: 20px;
}

.app-hero .items .wrap{
    width: 100%;
    max-width: 1280px;
    padding: 300px 20px 60px 20px;
    margin: 0px 0px 0px 0px;
    min-height: 550px;
}
.app-hero .items h1{
    max-width: 500px;
    color: var(--white-color);
    font-size: 40px;
    line-height: 50px;
}
.app-hero .items .form{
    flex: none;
    max-width: 360px;
    background-color: #252833;
    border-radius: 20px;
    padding: 20px;
}
.app-hero .items .form .search{
    height: 40px;
    width: 100%;
    max-width: 400px;
    line-height: 40;
    padding: 0px 15px;
    border-radius: 10px;
    color: #0000007a;
    font-size: 14px;
    border: none;
}
.app-hero .items .form .alter{
    height: 40px;
    line-height: 40px;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
}
.app-hero .items .form .alter span{
    padding: 0px 20px;
}
.app-hero .items .form .alter::before,
.app-hero .items .form .alter::after{
    content: '';
    display: block;
    background-color: #ffffff;
    width: 100%;
    height: 1px;
}
.app-hero .items .form .select2{ 
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
}
.app-hero .items .form .select2  .tom{
    width: 50%;
}
.app-hero .items .form .button{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 50px;
    text-align: center;
    font-size: 15px;
    color: var(--white-color);
    background-color: var(--green-color);
    border-radius: 10px;
    padding: 0px 20px;
}
.app-hero .items .form .button i{
    font-size: 20px;
    margin-left: 10px;
}
.app-hero .image .name{
    color: var(--white-color);
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 10px;
}
.app-hero .image .info{
    color: var(--white-color);
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 24px;
    max-width: 500px;
    opacity: 0.7;
}
.app-hero .image .url{
    display: inline-flex;
    border-radius: 10px;
    color: var(--white-color);
    background-color: var(--green-color);
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    padding: 0px 20px;
}
.app-hero .video .wrap-video{
    width: 100%;
    padding: 100px 20px 60px 20px;
    max-width: 600px;
}
.app-hero .video .wrap-video .sdfsdfsdf{
    display: block;
    width: 100%;
    margin: 0px auto;
    height: auto;
}
.app-hero .video a img{
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}
.app-hero .video a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .55);
    border-radius: 50%;
    z-index: 5;
}
.app-hero .video a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    transform: translate(-50%, -50%);
    z-index: 6;
}
.app-hero .video .player{
    margin-top: 60px;
    width: 100vw;
    min-width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
}
@media (max-width: 500px){
    .app-hero .items{
        box-shadow: inset 0px 0px 100px 100px rgba(0, 0, 0, 0.8);
        align-items: flex-end; 
    }
    .app-hero .items h1{
        font-size: 30px;
        line-height: 40px;
    }
    .app-hero .items .form{
        max-width: 100%;
    }   
    .app-hero .video .player{
        max-width: 100%;
    }
}

/* 
----------------------------
-----<App-Own-Index> 
----------------------------
*/

.app-own-index{
    display: flex;
    margin-bottom: 0px;
}
.app-own-index .left{
    width: 60%;
    padding: 0px 40px 0px 0px;
    margin: 0px;
}
.app-own-index .left .title{
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 20px;
}
.app-own-index .left .text{
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 30px;
    max-width: 700px;
}
.app-own-index .left .button{
    display: inline-flex;
    white-space: nowrap;
    padding: 0px 20px;
    height: 50px;
    border-radius: 10px;
    background-color: var(--green-color);
    color: var(--white-color);
    align-items: center;
    justify-content:center;
    font-size: 15px;
}
.app-own-index .left .button i{
    font-size: 16px;
    margin-left: 10px;
}
.app-own-index .right{
    width: 40%;
}
.app-own-index .right img{
    display: block;
    border-radius: 20px;
    width: 100%;
    height: auto;
}
.app-own-index .swiper-pagination{
    padding: 20px 0px;
}
@media only screen and (max-width: 1280px)
{
    .app-own-index .left,
    .app-own-index .right{
        width: 50%;
    }
    .app-own-index .left .text{
        margin-bottom: 16px;
    }
}
@media only screen and (max-width: 500px)
{
    .app-own-index{
        margin-bottom: 0px;
        flex-direction: column;
    }
    .app-own-index .left,
    .app-own-index .right{
        width: 100%;
    }
    .app-own-index .left{
        margin-bottom: 18px;
        padding-right: 0px;
    }
    .app-own-index .left .title{
        font-size: 22px;
        line-height: 28px;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }
    .app-own-index .left .button{
        width: 100%;
    }
    .app-own-index .left .text{
        margin-bottom: 16px;
        line-height: 22px;
        font-size: 14px;
    }
    .app-own-index .swiper-pagination{
        padding: 10px 0px;
    }
}


/*
----------------------------
----- <App-Cat-Index> 
----------------------------
*/

.app-cat-index .swiper-wrapper {
    align-items: stretch;
}
.app-cat-index .swiper-slide {
    height: auto;
    display: flex;
    flex-direction: column;
}
.app-cat-index .swiper-slide > * {
    height: 100%;
}
@media only screen and (max-width: 500px)
{
    .app-cat-index .swiper-pagination{
        padding: 10px 0px;
    }
    .app-cat-index .app-cat-item{
        padding: 10px;
    }
}

/*
----------------------------
----- <App-Prod-Index> 
----------------------------
*/

.app-prod-index .title{
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 20px;
}
.app-prod-index .swiper-slide {
  height: auto;          /* участвует в stretch */
}
@media only screen and (max-width: 500px)
{
    .app-prod-index .title{
        font-size: 22px;
        line-height: 28px;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }
    .app-prod-index .swiper-pagination{
        padding: 10px 0px;
    }
}

/*
----------------------------
----- <App-Texcen-Index> 
----------------------------
*/

.app-texcen-index{
    display: flex;
}
.app-texcen-index .left{
    width: 40%;
    margin-right: 40px;
}
.app-texcen-index .left a{
    position: relative;
}
.app-texcen-index .left a span{
    position: absolute;
    left: 20px;
    bottom: 20px;
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}
.app-texcen-index .left img{
    display: block;
    border-radius: 16px;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    width: 100%;
    height: auto;
}
.app-texcen-index .right{
    width: 60%;
    padding: 0px;
    margin: 0px;
}
.app-texcen-index .right .title{
    height: 30px;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 20px;
    padding: 0px;
}
.app-texcen-index .right .list{
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 20px;
    margin-bottom: 20px;
}
.app-texcen-index .right .list .all{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.app-texcen-index .right .list .all strong{
    font-size: 14px;
    text-transform: uppercase;
    margin-right: 5px;
}
.app-texcen-index .right .list .all a{
    text-decoration: underline;
    font-size: 14px;
}
.app-texcen-index .right .list .marka{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.app-texcen-index .right .list .marka .auto{
    background-color: var(--brown-color);
    color: var(--white-color);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}
.app-texcen-index .right .sub{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 15px;
}
.app-texcen-index .right .services{
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.app-texcen-index .right .services li{
    margin: 0px;
    padding: 0px;
    width: 30%;
    display: flex;
    align-items: center;
}
.app-texcen-index .right .services li i{
    font-size: 22px;
    margin-right: 5px;
    color: var(--brown-color);
}
.app-texcen-index .right .services li a{
    text-decoration: underline;
}
@media only screen and (max-width: 500px)
{
    .app-texcen-index{
        flex-direction: column;
        margin-bottom: 10px;
    }
    .app-texcen-index .left,
    .app-texcen-index .right{
        width: 100%;
    }
    .app-texcen-index .right .services{
        margin-left: 10px;
    }
    .app-texcen-index .right .services li{
        width: 100%;
    }
    .app-texcen-index .right .list{
        padding: 10px;
    }
    .app-texcen-index .swiper-pagination{
        padding: 10px 0;
    }
    .app-texcen-index .right .title{
        font-size: 22px;
        line-height: 22px;
        height: 22px;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }
    .app-texcen-index .right .list{
        margin-bottom: 10px;
    }
}

/*
----------------------------
----- <App-News-Index> 
----------------------------
*/

.app-news-index{
    margin: 0px auto;
    max-width: 1280px;
    padding: 0px 0px;
}
.app-news-index .title{
    height: 28px;
    font-size: 28px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 20px;
}
.app-news-index .item img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.app-news-index .item .date{
    font-weight: 700;
    margin: 10px 0px 6px 0px;
}
.app-news-index .item .name{
    font-weight: 400;
    line-height: 20px;
}
@media only screen and (max-width: 500px)
{
    .app-news-index .title{
        font-size: 22px;
        line-height: 22px;
        height: 22px;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }
}

/*
----------------------------
----- <App-Footer>
----------------------------
*/

.app-footer{
    color: #ffffff79;
    background-color: var(--black-color);
    padding: 60px 20px;
}
.app-footer .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    margin-bottom: 10px;
    color: var(--white-color);
    display: flex;
    align-items: center;
}
.app-footer .title i{
    height: 20px;
    width: 20px;
    font-size: 20px;
    margin: 0px 10px 0px 0px;
    display: none;
    padding: 0px;
}
.app-footer ul{
    list-style: none;
    margin: 0px;
    padding: 0px 0px 10px 0px;
}
.app-footer ul li{
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
.app-footer ul li a{
    color: #ffffff79;
    text-decoration: none;
    font-size: 15px;
    line-height: 20px;
}
.app-footer .wrap{
    max-width: 1280px;
    margin: 0px auto;
    padding: 0px;
    display: flex;
}
.app-footer .wrap .col{
    margin: 0px;
    padding: 0px 20px 0px 0px;
    width: 20%;
}
.app-footer .wrap .col .tab{
    color: #ffffff;
}
.app-footer .wrap .col .logo img{
    width: auto;
    height: 18px;
    display: block;
    margin: 0;
    padding: 0;
}
.app-footer .desc{
    font-size: 15px;
    line-height: 22px;
    color: #ffffff79;
    margin: 15px 0px 15px 0px;
}
.app-footer .phone{
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    color: #FECB00;
    margin: 0px 0px 10px 0px;
    display:block;
}
.app-footer .adress{
    font-size: 15px;
    line-height: 22px;
    color: #ffffff79;
    margin: 0px 0px 20px 0px;
}
.app-footer .adress a{
    color: #ffffff79;
    text-decoration: underline;
    font-size: 15px;
}
.app-footer .soc{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}
.app-footer .soc img{
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 6px;
}
.app-footer .copy{
    max-width: 1280px;
    margin: 20px auto 0px auto;
    color: #ffffff79;
    border-top: 1px solid #ffffff18;
    padding-top: 18px;
    line-height: 20px;
    font-size: 14px;
}
@media only screen and (max-width: 500px)
{
    .app-footer{
        padding: 40px 20px 80px 20px;
    }
    .app-footer .wrap{
        flex-direction: column;
    }
    .app-footer .wrap .col{
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    .app-footer .title i{
        display: block;
    }
    .app-footer .list{
        display: none;
        margin-left: 30px;
    }
    .app-footer .dropdown:checked ~ .title i{
        transform: rotate(180deg);
    }
    .app-footer .dropdown:checked ~ .list{
        display: block;
    }
    .app-footer .phone{
        margin-top: 10px;
    }
}


.app-shop{
    padding: 100px 20px 60px 20px;
    max-width: 1280px;
    margin: 0px auto;
    display: flex;
}
.app-shop .left{
    width: 280px;
    margin-right: 20px;
}
.app-shop .right{
    width: 1000px;
}
.app-shop .right .title{
    font-size: 24px;
    line-height: 30px;
    margin: 0px 0px 15px 0px;
    padding: 0;
}


/**************************
***************************
***************************
***************************
***************************
***************************
**************************/


.app-shop .app-cat-menu{
    margin-bottom: 12px;
}
.app-shop .app-cat-menu .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    margin: 0px;
    display: flex;
    align-items: center;
}
.app-shop .app-cat-menu .title i{
    height: 20px;
    width: 20px;
    font-size: 20px;
    margin: 0px 8px 0px 0px;
    display: none;
    padding: 0px;
}
.app-shop .app-cat-menu ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.app-shop .app-cat-menu ul li{
    padding: 5px 0px;
    margin: 0px;
}
.app-shop .app-cat-menu ul li a{
    font-size: 15px;
    line-height: 20px;
}
.app-shop .app-cat-list{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0px auto;
}

/**************************
***************************
***************************
***************************
***************************
***************************
**************************/

.app-cat-item{
    border-radius: 20px;
    border: 1px solid var(--border-color);
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.app-cat-item .img img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    margin: 0px auto;
    border-radius: 10px;
    max-width: 140px;
    height: auto;
}
.app-cat-item .name{
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    line-height: 18px;
    display: block;
}
.app-cat-item .desc{
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    padding: 0px;
    margin: 10px 0px;
    flex: 1;
}
.app-cat-item .more{
    text-align: center;
    color: var(--brown-color);
    display: flex;
    align-items: center;
    justify-content:center;
    padding: 0px;
    margin: 0px auto;
    margin-top: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 14px;
    height: 14px;
}
.app-cat-item .more i{
    margin-left: 5px;
}

/**************************
***************************
***************************
***************************
***************************
***************************
**************************/

.app-shop .text{
    padding: 0px;
    margin: 0px 0px 20px 0px;
    line-height: 20px;
}
.app-shop .video{
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
}


.app-prod-list{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(180px, 1fr));
    margin: 0px auto;
}

.app-shop .app-info .title2{
    font-size: 15px;
    font-weight: 700;
    line-height: 15px;
    margin-bottom: 10px;
}



.app-shop .sub{
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 10px;
    padding: 0px;
}

.app-prod-info{
    
}
.app-prod-info .app-prod-photo{
   max-width: 600px;
}
.app-prod-info .app-prod-prop{
    max-width: 600px;
}

@media only screen and (max-width: 500px)
{
    .app-shop{
        flex-direction: column;
        padding: 70px 10px 20px 10px;
    }
    
    /***********************/

    .app-shop .app-cat-list{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
        margin: 0px auto;
    }
    .app-shop .app-cat-list .app-cat-item{
        padding: 10px;
    }
    
    /***********************/

    .app-prod-list{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-template-rows: repeat(auto-fit, minmax(150px, 1fr));
        margin: 0px auto;
    }
    
    .app-prod-list .app-shop .app-cat-item{
        padding: 10px;
    }
    .app-shop .left,
    .app-shop .right{
        width: 100%;
    }
    .app-shop .app-filter-select{
        padding: 0px;
    }
    .app-shop .right .title{
        font-size: 20px;
        line-height: 25px;
        margin: 0px 0px 8px 0px;
        padding: 0;
    }
    .app-shop .right .text{
        margin: 0px 0px 10px 0px;
    }
    .app-shop .app-cat-menu{
        border-radius: 10px;
        border: 1px solid var(--border-color);
        padding: 10px;
    }
    .app-shop .app-cat-menu ul{
        display: none;
    }
    .app-shop .app-cat-menu .title{
        font-size: 15px;
        font-weight: 700;
        line-height: 16px;
    }
    .app-shop .app-cat-menu .title i{
        display: block;
    }
    .app-shop .app-cat-menu .dropdown:checked ~ .title i{
        transform: rotate(180deg);
    }
    .app-shop .app-cat-menu .dropdown:checked ~ ul{
        display: block;
        margin-left: 10px;
        margin-top: 5px;
    }
    .app-shop .photo .swiper-pagination{
        
    }
}

/*
----------------------------
----- <App-Auto>
----------------------------
*/

.app-auto{
    padding: 110px 20px 40px 20px;
    max-width: 1280px;
    margin: 0px auto;
}
@media only screen and (max-width: 500px)
{
    .app-auto{
        padding: 80px 10px 20px 10px;
    }
    .app-filter-select{
        padding-bottom: 0px;
    }
    .app-auto .app-paginator{
        padding: 10px 0px 0px 0px;
    }
}

/*
----------------------------
----- <App-Auto-Main>
----------------------------
*/

.app-auto-main{
    display: flex;
}
.app-auto-main .left{
    width: 40%;
    margin-right: 40px;
}
.app-auto-main .left a{
    position: relative;
}
.app-auto-main .left a img{
    display: block;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
}
.app-auto-main .left a span{
    left: 16px;
    bottom: 16px;
    position: absolute;
    max-width: 85%;
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
.app-auto-main .right{
    width: 60%;
    padding: 0px;
    margin: 0px;
}
.app-auto-main .right .title{
    height: 30px;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 20px;
    padding: 0px;
}
@media only screen and (max-width: 500px)
{
    .app-auto-main{
        flex-direction: column;
        margin-bottom: 10px;
    }
    .app-auto-main .left,
    .app-auto-main .right{
        width: 100%;
    }
    .app-auto-main .right .services{
        margin-left: 10px;
    }
    .app-auto-main .swiper-pagination{
        padding: 10px 0;
    }
    .app-auto-main .right .title{
        font-size: 22px;
        line-height: 22px;
        height: 22px;
        padding: 0px;
        margin: 0px 0px 10px 0px;
    }
}

/*
----------------------------
----- <App-Auto-Model>
----------------------------
*/

.app-auto-model{
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 20px;
    gap: 10px;
}
.app-auto-model a{
    background-color: var(--brown-color);
    color: var(--white-color);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
}
.app-auto-model::-webkit-scrollbar {
  display: none;
}
.app-auto-model *{
  flex-shrink: 0;
}
.app-auto-filter{
    padding-bottom: 20px;
}
@media only screen and (max-width: 500px)
{
    .app-auto-model{
        margin-bottom: 10px;
    }
    .app-auto-filter{
        padding-bottom: 10px;
    }
}
/*
----------------------------
----- <App-Auto-List>
----------------------------
*/

.app-auto-list{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: 0px auto;
}
.app-auto-list .item{
    position: relative;
}
.app-auto-list .item img{
    border-radius: 16px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    display: block;
}
.app-auto-list .item i{
    left: 16px;
    top: 16px;
    position: absolute;
    background-color: var(--green-color);
    color: var(--white-color);
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 12px;
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}
.app-auto-list .item span{
    left: 16px;
    bottom: 16px;
    position: absolute;
    max-width: 85%;
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
}
@media only screen and (max-width: 500px)
{
    .app-auto-list{
        grid-gap: 10px;
    }
    .app-auto-list .item img{
        aspect-ratio: 16 / 9;
    }
    .app-auto-list .item i{
        left: 10px;
        top: 10px;
    }
    .app-auto-list .item span{
        left: 10px;
        bottom: 10px;
    }
}

/*
----------------------------
----- <App-Auto-Photo>
----------------------------
*/

.app-auto-photo .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 0px;
    padding: 0px;
}
.app-auto-photo ul{
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin: 0px auto;
}
.app-auto-photo .item{
    margin: 0px;
    padding: 5px;
    list-style: none;
    border: 1px solid var(--border-color);
    border-radius: 16px;
}
.app-auto-photo .item img{
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    display: block;
}
@media only screen and (max-width: 500px)
{
    .app-auto-photo ul{
        grid-gap: 10px;
    }
}

/*
----------------------------
----- <App-Auto-Video>
----------------------------
*/

.app-auto-video .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 0px;
    padding: 0px;
}
.app-auto-video ul{
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin: 0px auto;
}
.app-auto-video .item{
    margin: 0px;
    padding: 5px;
    list-style: none;
    border: 1px solid var(--border-color);
    position: relative;
    border-radius: 16px;
}
.app-auto-video .item a{
    position: relative;
    display: block;
}
.app-auto-video .item a.has-video::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .55);
  border-radius: 50%;
  z-index: 5;
}
.app-auto-video .item a.has-video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-left: 10px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.app-auto-video .item img{
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    display: block;
}
@media only screen and (max-width: 500px)
{
    .app-auto-photo ul{
        grid-gap: 10px;
    }
}


.app-auto-work{
    margin-bottom: 10px;
}
.app-auto-work .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    margin-bottom: 0px;
    padding: 0px;
}
.app-auto-work ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    gap: 10px;
}
.app-auto-work li{
    margin: 0px;
    padding: 2px 0px;
    display: flex;
    align-items: center;
}
.app-auto-work li i{
    font-size: 22px;
    margin-right: 5px;
    color: var(--brown-color);
}
.app-auto-work li a{
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
    line-height: 14px;
}

.app-auto-info .title{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-auto-info p{
    line-height: 20px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-auto-info ul{
    padding: 0px;
    margin: 0px 0px 10px 10px;
}
.app-auto-info ol{
    padding: 0px;
    margin: 0px 0px 10px 20px;
}
.app-auto-info ul li,
.app-auto-info ol li{
    padding: 0px;
    margin: 0px;
    line-height: 20px;
}

.app-auto-phone{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--green-color);
    color: var(--white-color);
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    width: 350px;
}
.app-auto-phone b{
    font-size: 14px;
    margin-left: 5px;
}
@media only screen and (max-width: 500px)
{
    .app-auto-phone{
        width: 100%;
    }
}

/*
----------------------------
----- <App-Page>
----------------------------
*/

.app-page{
    padding: 110px 20px 40px 20px;
    max-width: 1280px;
    margin: 0px auto;
}
.app-page h1{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-page p{
    line-height: 20px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-page a{
    text-decoration: underline;
    color: var(--green-color);
}
.app-page ul{
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
.app-page ul li{
    line-height: 20px;
    margin: 0px 0px 0px 20px;
    padding: 2px 0px;
}
@media only screen and (max-width: 500px)
{
    .app-page{
        padding: 80px 10px 20px 10px;
    }
}

/*
----------------------------
----- <App-Otziv>
----------------------------
*/

.app-otziv{
    padding: 110px 20px 40px 20px;
    max-width: 1280px;
    margin: 0px auto;
}
.app-otziv-title{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.app-otziv-title h1{
    padding: 0px;
    margin: 0px 15px 0px 0px;
    white-space: nowrap;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
}
.app-otziv-title .add{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--green-color);
    color: var(--white-color);
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    width: 200px;
}
.app-otziv-title .add i{
    font-size: 20px;
    margin-left: 5px;
}
.app-otziv .item{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
}
.app-otziv .item .info{
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.app-otziv .item .text{
    line-height: 20px;
}
.app-otziv .item .answer{
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 10px;
    background-color: var(--back-color);
    line-height: 20px;
}

@media only screen and (max-width: 500px)
{
    .app-otziv{
        padding: 80px 10px 20px 10px;
    }
    .app-otziv-title{
        margin-bottom: 10px;
    }
    .app-otziv-title h1{
        margin-right: 10px;
    }
    .app-otziv-title .add{
       width: 100%;
    }
    .app-otziv .item{
        margin-bottom: 10px;
    }
    .app-otziv .app-paginator{
        justify-content: center;
    }
}
/*
----------------------------
----- <App-News>
----------------------------
*/

.app-news{
    padding: 110px 20px 40px 20px;
    max-width: 1280px;
    margin: 0px auto;
}
.app-news h1{
 
}
.app-news-list{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin: 0px auto;
}
.app-news-list .item img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.app-news-list .item .date{
    font-size: 14px;
    font-weight: 700;
    margin: 10px 0px 6px 0px;
}
.app-news-list .item .name{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
.app-news-full h1{
    padding: 0px;
    margin: 0px 0px 8px 0px;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}
.app-news-full .date{
    margin-bottom: 10px;
}
.app-news-full h1{
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-news-full .text p{
    line-height: 20px;
    padding: 0px 0px 5px 0px;
    margin: 0px;
}
.app-news-full .text img{
    display: block;
    width: 100%;
    max-width: 500px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px;
}
.app-news-full .text a{
    text-decoration: underline;
}
@media only screen and (max-width: 500px)
{
    .app-news{
        padding: 80px 10px 20px 10px;
    }
    .app-news-list{
        grid-gap: 10px;
    }

}



.app-soc{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--back-color);
    border-radius: 10px;
    padding: 10px 0px;
    gap: 10px;
}
.app-soc a{
    width: 28px;
}
.app-soc img{
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}
.app-form-title{
    font-size: 20px;
    line-height: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 0px;
    letter-spacing: 0.2px;
    text-align: center;
}
.app-form-item{
    padding: 0px;
    margin-bottom: 12px;
    position: relative;
    vertical-align: middle;
    line-height: 18px;
}
.app-form-item:last-child{
    margin-bottom: 0px;
}
.app-form-phone{
    border-radius: 10px;
    padding: 0px 10px;
    border: 1px solid var(--border-color);
}
.app-form-phone div{
    display: flex;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    height: 42px;
}
.app-form-phone div:last-child{
    border: none;
}
.app-form-phone span{
    margin-right: 10px;
}
.app-form-phone a{
    font-size: 14px;
    font-weight: 700;
    color: var(--black-color);
    margin: 0px 8px;
}
.app-form-phone i{
    font-size: 20px;
    margin-left: 10px;
}

/*
----------------------------
----- <App-Textarea>
----------------------------
*/

.app-textarea{
    font-weight: 400; 
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 5px 10px;
    height: 100px;
    width: 100%;
    box-shadow: none;
    line-height: 20px;
    display: block;
    background: none; 
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
    appearance: none!important;
    resize: none;
}
.app-textarea:focus + label, 
.app-textarea:not(:placeholder-shown) + label
{
    top: -1px;
    font-size: 12px;
    color: #acacac;
    background: #ffffff;
    padding: 2px 5px;
}
.app-textarea + label{
    top: 18px;
    left: 6px;
    font-weight: 400;
    position: absolute;
    transform: translateY(-50%);
    color: var(--placeholder-color);
    font-size: 14px;
    pointer-events: none;
    padding: 0 5px;
    transition: .2s;
}
.app-textarea::placeholder,
.app-input-label::placeholder{
    color: transparent;
    opacity: 0; 
}

/*
----------------------------
----- <App-Input-Text>
----------------------------
*/

.app-input-text{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0px 15px;
    height: 42px;
    width: 100%;
    font-size: 14px;
    box-shadow: none;
    outline: none;
    line-height: normal;
    display: block;
    background: none; 
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none!important;
}
.app-input-label + label{
    position: absolute;
    top: 50%;
    left: 10px;
    font-size: 14px;
    font-weight: 400;
    transform: translateY(-50%);
    color: var(--placeholder-color);
    padding: 0 5px;
    pointer-events: none;
    transition: .2s;
}
.app-input-label:focus + label,
.app-input-label:not(:placeholder-shown) + label
{
    top: 0;
    font-size: 12px;
    background: #ffffff;
    color: #acacac;
    border-radius: 3px;
    padding: 2px 5px;
}
.app-form-alter{
    height: 42px;
    line-height: 42px;
    display: flex;
    flex-wrap: nowrap;
    margin-top: -10px;
    color: var(--black-color);
    justify-content: center;
    align-items: center;
}
.app-form-alter span{
    padding: 0px 10px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
}
.app-form-alter::before,
.app-form-alter::after{
    content: '';
    display: block;
    background-color: var(--black-color);
    opacity: 0.2;
    width: 100%;
    height: 1px;
}

.app-input-check{
    display: none;
}
.app-input-check + label{
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0px 12px;  
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.app-input-check + label span{
    font-size: 11px;
    line-height: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--black-color);
}
.app-input-check + label span a{
    text-decoration: underline;
    color: var(--brown-color);
}
.app-input-check + label:before{
    content:'';
    margin-right: 12px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--border-color) url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTAgMTAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwIDEwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNC4yNzIsOS4wNDFjLTAuMDkxLDAuMTA1LTAuMjUsMC4xMTMtMC4zNTEsMC4wMThMMC4wNzksNS40MjJjLTAuMTAyLTAuMDk2LTAuMTA2LTAuMjU4LTAuMDEtMC4zNiBsMS4yMjQtMS4yOTNjMC4wOTYtMC4xMDIsMC4yNTgtMC4xMDYsMC4zNi0wLjAxbDIuMDk5LDEuOTg2YzAuMTAyLDAuMDk3LDAuMjYsMC4wODgsMC4zNTEtMC4wMTlsNC4xMDEtNC43NjQgYzAuMDkyLTAuMTA2LDAuMjUzLTAuMTE4LDAuMzU5LTAuMDI3bDEuMzUsMS4xNjJjMC4xMDUsMC4wOTEsMC4xMTcsMC4yNTIsMC4wMjYsMC4zNThMNC4yNzIsOS4wNDF6Ii8+PC9zdmc+') center -16px no-repeat;
}
.app-input-check:checked + label:before{
    content:'';
    border: none;
    width: 20px;
    height: 20px;
    background-color: var(--green-color);
    background-position: center;
}
.app-radio + label{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0px 10px;
    height: 42px;
    width: 100%;
    font-size: 14px;
    box-shadow: none;
    outline: none;
    line-height: normal;
    display: flex;
    align-items: center;
    background: none; 
    outline: none;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none!important;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-radio + label i{
    display: none;
    margin-right: 5px;
    color: var(--green-color);
    font-size: 24px;
    height: 24px;
    width: 24px;
}
.app-radio + label span{
    margin-right: 5px;
    color: var(--border-color);
    font-size: 24px;
    height: 24px;
    width: 24px;
}
.app-radio:checked + label{
    border: 1px solid var(--green-color);
    background-color: #00b05b0e;
}
.app-radio:checked + label i{
    display: block;
}
.app-radio:checked + label span{
    display: none;
}
.app-button-green{
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    background: var(--green-color);
    color: #ffffff;
    border-radius: 10px;
    letter-spacing: 0.6px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    border: none;
    text-align: center;
    outline: none;
}
.app-button-green i{
    margin: 0px 5px;
    font-size: 20px;
    height: 20px;
    width: 20px;
}
.app-button-silver{
    font-weight: 500;
    font-size: 13px;
    text-transform: uppercase;
    background: var(--back-color);
    color: var(--black-color);
    border-radius: 10px;
    letter-spacing: 0.6px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
    border: none;
    text-align: center;
    outline: none;
}
.app-button-silver i{
    margin-right: 5px;
    font-size: 20px;
    height: 20px;
    width: 20px;
}
.app-button-silver:active,
.app-button-green:active{transform: scale(0.98);-webkit-transform: scale(0.98);-moz-transform: scale(0.98);-o-transform: scale(0.98);-ms-transform: scale(0.98);}
.app-button-two{display: flex;justify-content:space-between;gap: 10px;} 

.app-buttons{
    position: fixed;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 90;
}
.app-buttons a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 50px;
    padding: 10px 0 15px 0;
    color: #fff;
    text-decoration: none;
    writing-mode: sideways-lr;
    font-size: 13px;
    font-weight: 500;
}
.app-buttons .search{
    background-color: var(--green-color);
    border-top-left-radius: 16px;
}
.app-buttons .contact{
    background-color: var(--green-color);
    border-bottom-left-radius: 16px;
    border-top-left-radius: 16px;
}
.app-buttons i{
    margin-bottom: 4px;
    transform: rotate(90deg);
    transform-origin: center;
    font-size: 20px;
}
input:user-invalid,
select:user-invalid {
    border-color: var(--red-color);
}
@media only screen and (max-width: 500px)
{
    .app-buttons a{
        width: 40px;
        padding: 8px 0 15px 0;
        font-size: 10px;
    }

}
.app-user-edit{
    width: 100%;
    max-width: 400px;
    margin: 0px auto;
    padding: 100px 10px 50px 10px;
}
.app-user-edit .app-bread{
   justify-content: center;
   margin-bottom: 10px;
}
@media only screen and (max-width: 500px)
{
    .app-user-edit{
        padding: 80px 10px 20px 10px;
    }
}

.app-user-fav{
    width: 100%;
    max-width: 960px;
    min-height: 500px;
    margin: 0px auto;
    padding: 100px 10px 50px 10px;
}
.app-user-fav .app-bread{
   justify-content: center;
   margin-bottom: 10px;
}
.app-user-fav .nofound i{
    width: 60px;
    font-size: 60px;
    margin: 0px auto 10px auto;
    display: block;
}
.app-user-fav .nofound p{
    text-align: center;
}

@media only screen and (max-width: 500px)
{
    .app-user-fav{
        min-height: 300px;
        padding: 80px 10px 20px 10px;
    }
}
.app-final{
    display: flex;
    flex-direction: column; /* стопка вертикально */
    align-items: center;     /* по центру по горизонтали */
    justify-content: center; /* по центру по вертикали (если нужно) */
    margin: 0px auto;
    min-height: 400px;
    max-width: 300px;
}
.app-final h1{
    font-size: 22px;
    line-height: 30px;
    margin: 0px 0px 15px 0px;
    padding: 0px;
}
.app-final i{
    width: 60px;
    font-size: 60px;
    margin: 0px auto 10px auto;
    display: block;
}
.app-final p{
    text-align: center;
}