@import url('https://fonts.googleapis.com/css2?family=Titillium+Web');

:root{
    --mnuActiveColor1: #38a3e9;
    --backColor1: #38a3e9;
    --blueDark: #1a689b;
    --blueGreen: #3dc2a8;
    --backBlueGreen: #d4eeff;
/*    --backBlueGreen: #E9F8F6;*/
    --backGray: #eaeef4;
    --backDisabled:#aaa;
    --shadow:#00000088;

    --btnBackColor: #38a3e9;
    --btnHoverBackColor: #3dc2a8;
    --btnColor:#fff;

}


/* global */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
	border: none;
	font-size: 100%;
/*	font: inherit;*/
	vertical-align: baseline;
    font-family: 'Titillium Web', sans-serif;
}
*.center{
    text-align: center;
}
sup {
    vertical-align: super;
    font-size: 0.6em;
    font-weight: bold;
    line-height: 0.6em;
}
sub{
    vertical-align: sub;
    font-size: 0.6em;
    font-weight: bold;
    line-height: 0.6em;
}
hr{
    height: 1px;
    background-color: var(--backDisabled);
}
body{
    font-family: 'Titillium Web', sans-serif;
    font-size: 18px;
}

h1, h2{
    font-size: 35px;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
h3{
    font-size: 30px;
    font-weight:bold;
    margin:20px 0 10px 0;
}
h3:first-child, br + h3{
    margin-top:0;
}
h4{
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 16px;    
}
a, a:visited{color:#fff;}
.content a, .content a:visited{
    color:var(--blueGreen);
}
.content a.button, .content a.button:visited{
    color:#fff;
}

input, select{
    font-size: 24px;
    border-radius: 10px;
    border: 1.5px solid #aaa;
    padding:15px 0 15px 20px;
}
input[notValid="1"]:invalid, input[badInput="1"], div[notValid="1"]{
    border-color:red !important;
}
input[type="checkbox"]{
    text-align: left;
    width: 20px;
    height: 20px;
}
textarea{
    font-size: 15px;
    border-radius: 10px;
    border: 1.5px solid #aaa;
    padding:5px 10px;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       /* Remove default arrow */
    background-image:url('images/arrowDown.svg');
    background-repeat: no-repeat;
    background-position: 97% center;
    padding-right:25px !important;
}
option{
    font-size: 18px;
}
button, .button{
    display:inline-block;
    border:none;
    border-radius: 35px;
    background-color: var(--btnBackColor);
    font-weight: bold;
    color:#fff;
    height:70px;
/*    padding:0 50px;*/
    padding:0 30px;
    min-width:300px;
    align-self: center;
    font-size: 24px;
}
button:disabled, .button:disabled{
    background-color: var(--backDisabled);
}

a.button{
    line-height: 70px;
    text-decoration: none;
}
button:enabled:hover, .button:enabled:hover, a.button:hover, button.text:hover{
    background-color: var(--btnHoverBackColor);
    cursor: pointer;
}
a.arrLeft, *.arrRight, button.text{
    color:var(--blueGreen);
    font-size:15px;
    font-weight: bold;
    display:inline-block;
    width:100%;
    cursor: pointer;
}
a.arrLeft:visited, *.arrRight:visited{
    color:var(--blueGreen);
}
*.arrRight::after{
    display:inline-block;
    background: url('images/anchorRight.svg') right no-repeat;
    content:' ';
    width: 22px; height: 22px;
    padding-left:28px;
    vertical-align:bottom;
}
a.arrLeft:hover, *.arrRight:hover, button.text:hover {
    text-decoration: underline;
}
*.arrLeft::before{
    display:inline-block;
    background: url('images/anchorLeft.svg') right no-repeat;
    content:' ';
    width: 22px; height: 22px;
    margin-right:4px;
    vertical-align: middle;
}
button.arrLeft, button.arrRight, button.text{
    border:none;
    background:none;
    color:var(--blueGreen);
    height:auto;
    padding:0 10px;
    min-width:max-content;
    width:max-content;
    align-self:initial;
    font-size:initial;
}
button.text{
    padding:0;
}
button.arrLeft:hover, button.arrRight:hover, button.text:hover{
    background-color: initial;
}
form.inquiryEdit select, form.inquiryEdit input{
    padding:5px 10px;
    font-size: 1em;
}
form.inquiryEdit h2{
    font-size:1.6em;
    padding-top: 15px;
}
form.inquiryEdit h4{
    font-size:18px;
}

iframe{
    transition: height .5s;
}
*.suppPrgRem{
    font-weight:bold;
}
*.suppPrgRemAll, *.suppPrgRemStock,  div.suppPrgRemSrvc{
    font-weight: normal;
}
*.suppPrgRemAll:after{
    content:var(--word-suppPrgRemAll);
}
*.suppPrgRemStock:after{
    content:var(--word-suppPrgRemStock);
}
div.suppPrgRemSrvc:after{
    content:var(--word-suppPrgRemSrvc);
}

#suppTerms{
    background-color: #eee;
    border-radius: 10px;
    border: 1px solid #888;
    padding: 10px 40px;
    margin: 0 auto 20px auto;
    font-size: .9em;
    width: max-content;
}
#suppTerms thead{
    background: none;
}
#suppTerms table th, #suppTerms table td {
    border-left: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    padding: 4px 6px;
}
#suppTerms table::before{
    content: var(--word-minOrder);
    display:inline-block;
    width:100%;
    font-weight:bold;
    font-size:1.2em;
    text-align: center;
    margin-bottom: 5px;
}
#suppTerms table th, #suppTerms table td{
    text-align: center;
}
#suppTerms table th:first-child{
    border-left:none;
    text-align: start;
}
#suppTerms:empty{
    display:none;
}
#suppTerms table tfoot th, #suppTerms table tfoot td {
    border: none;
}
/*
#suppTerms table tfoot tr td:nth-child(2) {
    border-left: #ccc 1px solid;
}
*/
form.inquiryEdit>button.matWeight{
    display: inline-block;
    background: linear-gradient(to left, #38a3e900, #38a3e9ff 25%, #38a3e9ff 75%, #38a3e900);
    color:#fff;
/*    background: none;
    color: var(--btnHoverBackColor);
*/
    font-weight: normal;
    font-size: 1.4em;
    width: 100%;
    padding: 0;
    margin: 0;
    height: min-content;
/*    border: solid 0.5px #38a3e9;*/
    border-radius: 0;
    border-left: none;
    border-right: none;
}
form.inquiryEdit>button.matWeight:hover{
    background: linear-gradient(to left, #3dc2a800, #3dc2a8ff 25%, #3dc2a8ff 75%, #3dc2a800);
/*    border: solid 0.5px var(--btnHoverBackColor);
    border-left: none;
    border-right: none;
*/
}
a.itemBlock {
    display: block;
    color:black;
    text-decoration: none;
}

div.scroll{
    max-width: 100%;
    overflow: auto;    
}
div.scroll>table>thead{
    position: inherit;
}
table.suppPrg>thead th{
    text-align: center;
}
table.suppPrg>thead th:first-child{
    text-align: left;
}
table.suppPrg>tbody td, #suppTerms table.suppPrg td{
    text-align: center;
}

table.suppPrg>tbody td:first-of-type{
    text-align: left;
}
table.suppPrg>tbody td:empty::after{
    display:inline-block;
    content:"🞷";
/*    color:var(--blueGreen);*/
    text-align: center;
/*    font-weight: bold;*/
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    width:100%;
}


img.maskHex{
    clip-path:polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.6% 75%, 6.6% 25%);
    object-fit: cover;
    object-position: 50% 30%;
}

table{
    display: inline-block;
    text-align: left;
    border-collapse:collapse;
    max-height: 600px;
    overflow: auto;
}

table thead{
/*    position: -webkit-sticky;
    position: sticky;*/
    top:0px;
/*    background-image: linear-gradient(#fff 90%, #ffffff00);*/
    background:#fff;

}
div.results>table>thead{
    position: -webkit-sticky;
    position: sticky;
} 
table th, table td{
    border-left:3px solid white;
    border-bottom:#ccc 1px solid;
    padding:8px;
    vertical-align: middle;
}
table th{
    font-weight: bold;
}
table tbody tr:hover>td, table tr[checked="1"]{
    background-color: #f0f0f0;
}

thead th>input{    /* search */
    width:180px;
    min-width: auto;
    height: auto;
    font-size: 1.2em;
    padding: 5px 10px;
    margin-left:-10px;
}
thead th.search::after{
    position: absolute;
    display: inline-block;
    content: '🔍';
    margin:5px 0 0 -30px;
    font-size: 20px;
    opacity: .5;

}

tbody tr[hidden]{
    display: none;
}
td[dims]::before{
    display:block;
    width:20px;
    height:20px;
    text-align: center;
    content:'ℹ';
    color:white;
    margin:3px 10px 0 0;
    line-height: 18px;
    background-color: var(--blueDark);
    border-radius: 50%;
    float:left;
}
td[dims]{
    cursor: pointer;
}
div.results table td, div.results table th{
    vertical-align: top;
}
div.tdDims{
    float: left;
    margin: -1px 0 -3px 0;
}
div.tdDims>span{
    display:inline-block;
    min-width:32px;
}
td.noDims{
    padding-left: 38px;
}
td>a.button{
/*  for icons 
    padding: 0;
    width: auto;
    min-width: 50px;
    height: auto;
    margin: 0 10px 0 0;
    background: #00000011;
    color: #000;
    border-radius: 5px;
    text-align: center;
    line-height:36px;
*/
    width: auto;
    height: auto;
    line-height:normal;
    font-weight: normal;
    padding:0 10px;
    min-width:80px;
    text-align: center;
    margin:0 5px;
    font-size:medium;
    color:white;
}
td>a:visited.button{
    color:white;
}
td>a.file{
    color: var(--blueDark);
}

.dialog table{
    background-color:#f4f4f4;
    margin-left:30px;
    margin-top:30px;
    box-shadow: 2px 2px 6px #666;
}
/*
td>button{
    padding: 0;
    width: auto;
    min-width: 50px;
    height: auto;
    margin: 0 10px 0 0;
    background: #00000011;
    color: black;
    border-radius: 5px;
}
td>button:nth-of-type(1){
    font-weight: bold;
    font-size: 18px;
    line-height: 36px;
    vertical-align: top;
}

td>button:nth-of-type(3){
    font-size: 18px;
    line-height: 36px;
    vertical-align: top;
}
*/
/* custom elements */
add-files{
    margin-left: 10px;
    text-align: left;
    display:inline-block;
    max-width:300px;
    border-radius: 10px;
    border: 1.5px solid #aaa;
    padding: 0px 10px 4px 10px;
    vertical-align: sub;
    background-color:#fff;
    height: max-content;
}
add-files * {
    vertical-align: baseline;

}
add-files label{
    display: inline;
    margin:0;
    cursor: pointer;
    float: none;
    width:auto;
}
add-files label::before{
    display:inline-block;
    width:20px;
    height: 20px;
/*    border:var(--shadow);
    background-color: white;
    box-shadow: inset 1px 1px 3px;
    border-radius: 4px;
    vertical-align: sub;
*/
    content: "+";
    font-size: 1.4em;
    margin-right: 2px;
}


add-files input[type="file"]{
    display:none;
}
add-files>div{
    display: block;
    margin:2px auto;
    width:100%;
}
add-files>div>div{
    text-align: left;
    margin-bottom:4px;
    display: block;
    width: 100%;
}

add-files span{
    padding-right: 4px;
    max-width: calc(100% - 28px);
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;}

add-files button{
    width: 24px;
    height: 24px;
    padding: 0;
    min-width: auto;
    border-radius: 2px;
/*    background-color: #00000000;*/
/*    color: #d44;*/
    color: #000;
    font-size: 16px;
    float: right !important;
    border: 1px solid silver;
}

mat-weight{
    display: inline-grid;
    width:min-content;
    height:max-content;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
    align-items: stretch;
    justify-items: stretch;
    grid-auto-flow: row;
    min-height: 470px;
	border:1px solid aliceblue;
	background-color: var(--backBlueGreen);
	padding:20px;
}
mat-weight>div{
    padding: 0;
    display: inline-grid;
    grid-template-columns: 1fr;
    gap: 0;
    grid-auto-flow: row;
    justify-content: stretch;
    align-items: stretch;
    justify-items: stretch;
}
mat-weight>div:first-child{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
mat-weight>div:first-child>div:last-child{
	height:100px;
}
mat-weight svg{
    display: block;
    margin: auto;
}
/*mat-weight>select{
    padding:10px 20px;
    background: url("images/footBack.jpg") center center no-repeat;
    background-size: cover;
    color:white;
    width: fit-content;
    border: none !important;
    overflow: visible;
    border-radius: 0;
}
*/
mat-weight select{
	padding: 0 25px 0 15px;
	line-height:50px;
	margin-right:20px;
}
mat-weight select>option{
    list-style-type: none;
    font-size: 0.90em;
    line-height: 50px;
    cursor: pointer;
}

mat-weight select>option:hover, mat-weight select>option:checked{
    color:var(--mnuActiveColor1);
    background:none;
}


mat-weight>div>div{
    padding:0px 20px;
}

mat-weight>div *{
    white-space: nowrap;;
}
mat-weight input{
    width:100px;
    padding: 5px;
    margin: 10px 10px 15px 10px;
    font-size:1.00em;
    text-align: end;
}
mat-weight div.input{
    background-color: var(--blueGreen);
    text-align: end;
}
mat-weight span.unit{
    display:inline-block;
    width:35px;
    text-align: start;
}
mat-weight div.result, mat-weight div.alert{
    background-color: var(--btnBackColor);
    text-align: center;
    font-size: 1.2em;
    display:none;
}
mat-weight div.result[active="1"]{
    display: block;
	height:100px;
}
mat-weight div.result[active="0"] + div.alert{
    display: block;
    background-color:#f88;
}
mat-weight div.alert>h4{
    white-space:normal;
}
mat-weight div.result span{
    font-weight: bold;
    margin:0 10px;
}

div.backDialog, div.backEdit{
    position: fixed;
    background-color: var(--shadow);
    inset:0;
    overflow:auto;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    z-index:1;
}
div.backDialog>div, div.backEdit>div{
    background-color: var(--backBlueGreen);
    text-align: center;
    width: max-content;
    padding: 0 53px;
    margin: auto;    
}

/**** login  dialog ***/
div.backDialog>div.login, div.backDialog>div.info{
    width:400px;
    padding:20px;
}
div.backDialog>div.alert{
    padding:20px;
}
div.backDialog>div.maxContent{
    width: max-content;
    height: max-content;
    padding: 20px 20px;
}
/*div.login>*{float:left}*/
div.login>img{
    clear:left;
    float:left;
    height: 30px;
    margin-top:28px;
}
div.login>span.img{
    clear: left;
    float: left;
    margin-top: 20px;
    font-size: 32px;
    color: #969696;
    font-weight: 900;
}
div.backDialog>div>div.close{
    margin-right: -13px;
    float: right;
    margin-left: -100%;
    margin-top: -23px;
    font-size: 28px;
    color: #666;
    cursor: pointer;
}
div.login input[type=text], div.login input[type=email], div.login input[type=password], div.login input[type=submit], div.login button{
/*	padding:15px;
	border-radius: 30px;
	border: none;
*/
	margin:10px 0;

}


div.login input[type=text], div.login input[type=email], div.login input[type=password]{
	width:290px;
}
div.login p.error{
    color: red;
    font-weight: bold;
}
#lostPwd{
    display:none;
}
/*
input[bad]{
	border: 3px solid red;
	width:300px;
}

input[type=submit], input[type=button]{
	width:320px; color:#fff; background-color:navy;
	font-size:14px; font-weight:bold; cursor: pointer;
}
#eye{
	clear:both; position:relative;
	background-image: url('themes/default/icons/eye.png');
	background-repeat: no-repeat;
	background-position: center;
	margin:-57px auto 15px 280px;
	height:47px; width:32px;
	cursor: pointer;
	z-index: 1000;
}
.chk {
	text-align:center;
	width:100%;
	margin:10px;
	font-size:14px;
}
hr {margin:10px 0 0 0; padding:0; clear:both;width:100%}

input[type=button]{
	width:143px;
	padding:15px 6px 15px 24px;
	background-repeat:  no-repeat;
}
#fb {
	background-image: url('themes/default/icons/facebook.png');
	background-position: 8px 5px;
	background-color: #3b5999;
	margin-right:30px;
}
#gCmd {
	background-image: url('themes/default/icons/google.png');
	background-position: 14px 10px;
	background-color: #e46044;
}

p.badMsg, p.infoMsg {
	width:100%;
	text-align: center;
}
#aLogin{
	float:right;
}

/**** Header ***/
    #preHead{
        display:none;
        width:100%;
        height:339px;
        padding:0px;
    }

    #searchForm{
        width:100%;
        height:148px;
        padding: 40px 0;
        text-align: center;
    }
    #searchForm>input{
        background-image: url('images/find.svg');
        background-size: 30px;
        background-position-y: center;
        background-position-x: 98%;
        background-repeat: no-repeat;
        width:500px;
        padding-right:50px;
    }

/*
    #searchForm{
        position:absolute;
        width:100%;
        height:148px;
        top:-148px;
        padding: 40px 0;
        text-align: center;
        transition: top .5s;
        z-index: 1;
    }
    #searchForm>input{
        background-image: url('images/find.svg');
        background-size: 30px;
        background-position-y: center;
        background-position-x: 98%;
        background-repeat: no-repeat;
        width:500px;
        padding-right:50px;
    }
    header[searching] #searchForm{
        top:0;
    }
*/
    header{
        display:block;
        background-image: linear-gradient(181.5deg, var(--backColor1) 51.8%, rgba(0,0,0,0) 52.3%);
/*        background-image: linear-gradient(181.5deg, var(--backColor1) 61.8%, rgba(0,0,0,0) 62.3%);*/
        background-position-x: 100px;
        background-repeat: no-repeat;
        height:259px;
        padding-bottom:30px;
/*        padding-bottom:40px;*/
        box-sizing: content-box;
    }
    header *{
        vertical-align: middle;
    }
    #hdrBack{
        background: url("images/hdrMnuBack.webp") no-repeat;
        background-clip:border-box;
        height:100%;
        width:100%;
        background-position-x: -90px;
	    background-position-y: -20px;	
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:space-evenly;
        transition: filter .5s;
    }
    header[searching] #hdrBack{
        filter:drop-shadow(0px -20px 0px black) blur(20px);
    }
    #hdrBack div.spacer{
        width:20px;
        flex-grow: 4;
    }
    #hdrBack div.spacer:last-child{
        min-width:10px;
        flex-grow: .5;
    }
    #logo{
        display:inline-block;
        min-width:158px;
        height:151px;
        background:center no-repeat;
        background-image: url("images/logo.svg");
        margin-left: 120px;
        margin-top:25px;
        flex-shrink: 0;
        flex-grow: 3;
        flex-basis: 140px;
/*        max-width:300px;*/
        max-width:250px;
    }
    #menuIcon {
        display:none;
    }
    header nav{
        line-height:30px;
        display: inline-block;
        color:#fff;
        min-width:475px;
        max-width: 600px;
        margin-top:45px;
        height:30px;
        text-transform: uppercase;
        font-weight: 700;

        flex-shrink: 1;
        flex-grow: 3;
        flex-basis: 450px;
    }
    header a{
        text-decoration: none;
    }
    header nav a svg{
        fill:#fff;
        margin-top: -2px;
    }
    header ul{
        width:100%;
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    header ul>li{
        display: inline-block;
        list-style-type: none;
    }
    #inqCount{
        display: block;
        height: 15px;
        min-width: 9.5px;
        font-size: 10px;
        padding: 0 3.5px 0 3px;
        border-radius: 50%;
        background-color: red;
        color: white;
        line-height: 15px;
        text-align: center;
        margin-top: 0px;
        float: right;
        box-sizing: content-box;
    }
    #inqCount:empty{
        display: none;
    }

    #hdrIcons{
        margin-top:45px;
        display: inline-block;
        flex-shrink: 3;
        flex-grow: 2;
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:flex-end;
    }

    #hdrIcons *{
        height:36px;
    }
    #calcWeight, #searchBtn{
        object-position: center;
        padding:0;
        align-self: baseline;
        min-width: auto;
        margin-right: 20px;
        margin-left: 15px;
        width:34px;

        background-color: #fff;
        border:none;
        border-radius: 5px;
        cursor: pointer;
    }
    #calcWeight svg, #searchBtn svg{
        margin: 6px auto auto 0px;
        width: 28px;
        height: 24px;
        vertical-align: top;
        stroke: var(--blueDark);
        fill: var(--blueDark);
    }
    #calcWeight:hover,  #searchBtn:hover{
        background-color: var(--blueDark);
        transition:background-color 0.3s;
        transition: stroke 0.3s;
    }
    #calcWeight:hover svg, #searchBtn:hover svg{
        stroke:#fff;
        fill:#fff;
    }

    #login{
        object-position: center;
        padding:0;
        align-self: baseline;
        min-width: auto;
    }
    #login svg{
        margin-left: 7.5px;
        width: 27px;
        height: 32px;
        vertical-align: top;
    }
    #userMenu{
        display:flex;
        width: max-content;
        height: max-content;
        text-align: left;
        background-position-x:-30%;
        background-position-y:center;
        background-image: url('images/footBack.jpg');
        font-size:18px;
        font-weight: normal;
        box-shadow: 2px 2px 6px #333;
        float:left;
        height: 0px;
        overflow: hidden;
        color:#000;
        border-radius: 6px;
        transition: all .5s;
        
        flex-direction: column;
        justify-content: space-evenly;
    }

    @keyframes firstLogin {
        0%  {height:0px; margin-left: 0px;}
        100% {height:150px; margin-left:0px;}
    }
    #userMenu[showed="1"]{
        height: 150px;
        border: 1px outset;
    }
    #userMenu[firstLogin]{
        animation-name: firstLogin;
        animation-duration: 1.5s;
        animation-iteration-count: 2;
        animation-direction:alternate;
    }
    
    #userMenu>li{
        display:block;
        white-space: nowrap;
        height:auto;
        padding:4px 8px;
    }
    #userMenu>li>a{
        height:auto;
    }
    #userMenu>li>a:hover{
        text-decoration: underline;

    }

    #cart{
        display:flex;
/*        min-width:80px;*/
        margin-right: 0px;
    }
    #cart span{
        font-size: 1.1em;
        line-height:35px;
        padding-left:3px;
        font-weight: 800;
        color: #f55;
    }
    #cart span:empty{
        display: none;
    }

    #cart * {
        float:left;
    }
    #cart svg {
        fill:var(--blueDark);
    }
    #cart div{
        height:100%;
        background-color: var(--blueDark);
        padding: 0 6px 0 10px;
    }
    #cart div svg{
        margin-top: 7px;
    }

    #cart:hover svg{
        fill:var(--blueGreen);
        transition: fill 0.3s;
    }
    #cart:hover div{
        background-color: var(--blueGreen);
        transition: background-color 0.3s;
    }

    #login{
        margin-right: 10px;
        width:34px;
        background-color: #fff;
        stroke: var(--backColor1);
        border:none;
        border-radius: 5px;
        cursor: pointer;
    }
    #login:hover{
        background-color: var(--blueDark);
        stroke:#fff;
        transition:background-color 0.3s;
        transition: stroke 0.3s;
    }

    #login line {
        stroke:none;
    }
    #login[loged="1"] svg{
        margin-left: 5px;
    }
    #login[loged="1"] line{
        stroke:var(--blueGreen);
    }
    #login[loged="1"] path{
        fill:var(--backColor1);
        stroke:var(--backColor1);
    }
    #login:hover[loged="1"] path{
        stroke:#fff;
        fill:#fff;

    }
    #lng{
/*    	display:none;*/
	margin-left: 15px;
	display: flex;
	place-items: center;
    }
    #lng:hover {
        text-decoration: underline;
    }

    #motto {
        margin-top:-70px;
    }
    #motto *{
        float:right;
        clear: right;
        margin-right:calc(min( max( ( 100% - 1070px ) / 6 , 10px ) , 100px ) );
        color:var(--backColor1);
    }
    #motto *:first-child{
        color:#666;
        font-size:32px;
        font-weight: normal;
        margin: 0 calc(min( max( ( 100% - 1070px ) / 6 , 10px ) , 100px ) ) 0 0;
    }



.history b{
    display:inline-block;
    width:80px;
    margin-left:-80px;
}

.history p{
    margin-left: 80px;
    margin-bottom: 10px;
    margin-top:10px;
}
/*
.history p::first-line{
    margin-left:-80px;
}
*/
.history a{
    color: var(--blueGreen) !important;
}
.hiddenContent{
    display: none;
    opacity: 0;
}
.hiddenContent[show="1"]{
    display: initial;
    opacity:1;
}



/** scrolled menu **/

@media only screen and (min-width: 1060px){
    body[scrolledTop='1'] #preHead{
        display:block;
    }
    body[scrolledTop='1'] header{
        position:fixed;
        top:-86px;
        height:80px;
        width:100%;
        background: var(--backColor1);
        padding:0;
        z-index:1 ;
        transition: top 0.5s;
        box-shadow: #333 0 0 6px;
    }
    body[scrolledTop='1'][scrollingToTop='1'] header{
        top:0px;
    }
    body[scrolledTop='1'] #hdrBack{
        background-position-x: 0;
        background-position-y: 0;
        background-image: url('images/hdrMnuScroll.webp');
    }
    body[scrolledTop='1'] header nav{
        margin-top:22px;
    }
    body[scrolledTop='1'] header ul{
        font-weight: 600;
    }

    body[scrolledTop='1'] #logo{
        width:149px;
        height:38px;
        margin:auto;
        background-image: url("images/logoRow.svg");
    }
    body[scrolledTop='1'] #hdrIcons{
        margin:auto;
    }

    body[scrolledTop='1'] #motto{
        display: none;
    }
}
/*** MAIN ****/
    main {
        padding: 0 100px;
        min-height: 415px;
    }
    main ul li{
        list-style-position: inside;
        list-style-type:none;
        margin-left:16px;
        text-align: left;
    }
    main ul>li::before{
        color: #82CEFF;
        content: '●';
        padding-right:10px;
        margin-left:-21px
    }
    main ul>li>ul>li::before{
        color: var(--blueGreen);
    }
    main ul>li>ul>li>ul>li::before{
        color: var(--backDisabled);
    }
    main ol>li{
        list-style-position: outside;
/*        list-style-type:1;*/
        margin-left:0px;
    }

/** pages with text content **/
    div.content{
        text-align: justify;
    }
    .content li>ul{
        margin-top:0;
        margin-bottom:0;
    }
    .content p>a{
/*        color:var(--mnuActiveColor1);*/
        font-weight: bold;
    }

    div.content table{
        max-height:fit-content;
        margin:auto;
/*        display:block;*/
    }

    div.content table th, div.content table td{
        border:1px solid;
    }
/*    div.content table th, div.content table thead td, div.content table tbody td:first-child{
        font-weight:bold;
    }
*/
    div.content table>thead>tr>th[colspan], div.content table>thead>tr>td[colspan], table>thead>tr:nth-child(4)>td{
        text-align: center;
    }


    div.content table>thead>tr>th[colspan="11"]{
        font-size: 1.2em;
    }

    div.content>a.button{
        text-align: center;
        margin: 50px auto;
    }
    /*
    table.checkBoxs>tbody>tr>td[checked="1"]::after{
        display:inline-block;
        content:"🗸";
        color:var(--blueGreen);
        text-align: center;
        font-weight: bold;
        font-size: 26px;
        line-height: 20px;
        vertical-align: middle;
        width:100%;
    }
    table.checkBoxs>tbody>tr>td[checked="0"]::after{
        display:inline-block;
        content:"-";
        color:var(--backDisabled);
        text-align: center;
        font-weight: bold;
        width:100%;
    }

    table>tbody>tr, table>tbody>tr>td{
        transition: background .2s ease;
    }
    table>tbody>tr>td[hovered="1"]{
        background-color: #f0f0f0;
    }
    table.checkBoxs>tbody>tr>td:hover{
        background-color: #e0e0e0;
    }
*/
    div.mainImg{
	    padding: 0px 230px 0px 0px;
    	height: 520px;
	    margin: -5px -100px 10px 155px;
    	z-index: -1;
	    max-width: 800px;
    	float: right;
	    background: linear-gradient(30deg, #fff 199px, var(--backGray) 199px);
    }
    div.mainImg>img{
        float:right;
        clip-path:polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.6% 75%, 6.6% 25%);
        object-fit: cover;
        width:290px;
        height:290px;
        margin-left:-145px;
	background-color: var(--backColor1);
    }

    div.contentRight>h2, div.contacts>h1, div.contacts>h3{
        font-size: 30px;
        margin-bottom:20px;
    }
    div.contentRight>h3{
        font-size: 20px;
        margin-bottom:0;
    }

    div.contentRight>p, div.contacts p{
        margin-bottom:20px;
        text-align: justify;
    }

    div.contacts{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        height:min-content;
        white-space: nowrap;
/*        width: auto;
        max-width: 950px;
        padding-left:30px;*/
        width: calc(100% - 470px);
    }

    div.contacts h3{
        font-size: 16px;
        margin-bottom:0;
        margin-top:10px;
    }
    div.contacts h1{
        grid-column: 1 / span 3;
        width: max-content;
/*        margin-left: -30px;*/
    }
    div.contacts>div{
        padding:0 20px 10px 20px;
        border-left:1px solid #ccc;
        background-color: var(--backGray);
        text-align: start;
    }

    div.contacts>div:first-of-type{
        border-left:none;
    }
    div.contacts a, div.contacts a:visited{
        color:#000;
    }
    form.contacts{
        background-color: var(--backBlueGreen);
        margin: 30px 0;
        padding: 0 10px 0 30px;
        grid-column: 1 / span 3;
        height:max-content;

        display: flex;
        flex-direction:row;
        flex-wrap: wrap;

        width: calc(100% - 470px);
        min-width:750px;
    }
    form.contacts>h2{
        font-size: 30px;
        width: 100%;
        margin-top:10px;
        margin-bottom:20px;
    }
    form.contacts>div{

        width:33%;
        padding-right: 20px;
        min-width: 200px;
        margin-bottom:20px;
    }
    form.contacts>div:nth-of-type(4), form.contacts>div:nth-of-type(5) {
        width: 100%;
    }
    form.contacts input, form.contacts textarea{
        font-size:18px;
    }
    form.contacts>div>input, form.contacts>div>textarea{
        width:100%;
    }
    form.contacts>div>textarea{
        min-height:100px;
    }
    form.contacts>button{
        margin: auto 20px 20px auto;
    }

/*    form.contacts>h2{
        grid-column: 1 / span 3;
    }
    form.contacts>div{
        margin-bottom:20px;
    }
    form.contacts>div>input{
        width:100%;
        min-width: 120px;
    }
    form.contacts>div:nth-of-type(4) {
        grid-column: 1 / span 2;
    }
    form.contacts>div>textarea{
        width:100%;
    }
*/

    *.searchBox{
        width:100%;
        background-color:var(--backBlueGreen);
        margin-left:0;
        margin-top:40px;
        text-align: center;

    }
    *.searchBox>h2{
        text-align: center;
        padding-top:20px;
        font-weight: 900;
        margin-bottom:20px;
    }
    div.searchBox>h2{
        margin-bottom:-10px;
    }
    div.searchBox>div{
        display: flex;
        flex-direction: row;
        justify-content:space-evenly;
        column-gap: 10px;
        padding:0 5%;
        flex-wrap: wrap;
    }
    div.searchBox a{
        width:166px;
        text-align: center;
        padding:0;
        width:22%;
        margin-bottom: -20px;
        word-break: keep-all;
        margin-top:30px;
    }
    form.searchBox>input{
        width:400px;
        margin-right:-50px;
        margin-bottom:-20px;
    }

    *.searchBox select, div.baseSearch>input, div.baseSearch>select {
        min-width: 250px;
        margin-right:10px;
    }

    form.searchBox>select, form.searchBox>button,  form.inquiryEdit>button{
        margin-bottom: -20px;
        margin-top:25px;
    }
    #searchInfo, p.inqInfo {
        background-color: #d2ebd2;
        color: #060;
        border-radius: 5px;
        padding: 12px 20px;
        font-weight: 500;
        line-height: 1.5em;
        display: block;
        margin: 50px auto -50px auto;
        text-align: center;
        width: fit-content;
        min-width: 600px;
    }
    p.inqInfo{
        margin: -10px 10px 10px 3px;
        width: auto;
        box-shadow: 0px 0px 3px;
        font-weight: bold;
    }
    p.inqInfo span.notice{
        display:inline-block;
        width:100%;
        color:red;
    }

    #searchInfo:empty, p.inqInfo:empty{
        display:none;
    }

/*    form.searchBox label, form.inquiryEdit label{*/
    label{
        font-weight: bold;
        display: block;
        width: 0;
        padding:0;
        margin: -25px 0 0 0;
        overflow: visible;
        white-space: nowrap;;
    }
/*    form.searchBox label+input, form.inquiryEdit label+input{*/
    label+input{
        margin-bottom: 20px;
        margin-right:10px;
        width:250px;
    }

/*    form.searchBox label+select, form.inquiryEdit label+select{*/
    label+select{
        margin-bottom: 20px;
    }
    div.allSearch{
        width: min-content;
        display: inline-block;
    }
    #shapeImg{  /* svg is 227x227 */
        float:left;
        height: 227px;
        display: block;
        padding:0;
        background-color: white;
        width: 100%;
    }
    #shapeImg svg{
        height:227px;
    }
    .inquiryEdit #shapeImg{
        float: right;
        margin-top:-10px;
        margin-bottom:-20px;
        width: 227px;
        background:none;
    }
    .inquiryEdit label{
        margin:0;
    }
    #shapeImg text{
        font-weight:500;
    }
    #shapeImg text[focused], svg text[focused]{
        font-weight:700;
        fill:red;
    }
    div.baseSearch{
        display: flex;
        justify-content: space-between;
        width: fit-content;
    }

    div.dims, div.availability, div.units{
        display: flex;
        width: calc(100% - 250px);
        flex-wrap: wrap;
    }
    div.availability, div.units{
        display:none;        
    }
    div.availability *, div.itemInfo *, div.units *{
        float:left;    
    }
    div.itemInfo sup{
        float: none;
    }

    form.searchBox div.availability input, div.units input{
        text-align: left;
        width: 16px;
        height: 16px;
        margin: 7px 10px 0 0;
    }
    form.searchBox div.availability input:first-of-type, div.units input:first-of-type{
        margin-left:30px;
/*        clear:left;*/
    }
    form.searchBox div.availability input:last-of-type, div.units input:last-of-type{
        margin-left:50px;
    }
    div.availability label, div.units label{
        display: inline;
        width: auto;
        padding:0;
        margin: 0;
        font-weight: 500;
        font-size: 18px;
    }
    div.itemInfo{
        display:none;
/*        margin-top:5px;*/
        clear:both;
    }
    div.itemInfo textarea{
        min-width:510px;
        min-height:100px;
        margin-top: 25px;
    }
    div.itemInfo add-files{
        margin-top: 25px;
        max-width: 260px;
    }
    div.files{
        float:right;
    }
    div.files button{
        min-width: auto;
        width:100%;
        height: 35px;
        font-size: 22px;
        font-weight: 500;
    }
    div.amount{
        display: flex;
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        margin-top: 50px;
    }
    div.amount label{
        margin-top:-25px;

    }
    div.dims>div{
        margin-top: 5px;
    }
    div.dims>div>label{
        margin-top:0;
    }
    div.units+div.dims{
        margin-top:50px;
    }
    div.results {
        text-align:center;
        margin-top: 60px;
    }
    div.results>h2{
        font-weight: normal;
    }
    div.results>h4{
        margin-bottom: 20px;
    }
    div.results>table>thead>tr>th{
        vertical-align: bottom;
    }
    th[title]{
        cursor: pointer;
    }
    th[title]::after{
        display: inline;
        content: "*";
        margin-left: 5px;
        color:var(--blueGreen);
        vertical-align: super;
        font-size:26px;
    }

/*    th[title]::after{
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        content: "ℹ";
        color: white;
        line-height: 18px;
        background-color: var(--blueDark);
        margin-left: 5px;
        border-radius: 50%;
    }
*/

    form.searchBox>hr{
        visibility: hidden;
    }
    div.searchEnd{
        width:100%;
        text-align: center;
    }
    div.searchEnd>hr {
        display: inline-block;
        width: 50%;
        height: 1px;
        margin-top: 40px;
        visibility: hidden;
        background-color: var(--backDisabled);
    }

    .dialog table.dimInfo{
        margin-left:0;
        margin-right:0;
    }

    table.dimInfo td, table.dimInfo th{
        text-align: center;
    }
    table.dimInfo td:first-child, table.dimInfo th:first-child{
        text-align: left;
    }

    #btnEnqChecked{
        display:block;
        width: 320px;
        margin: 50px auto auto calc(50% - 160px);
    }


    /** inquiry **/
    div.inquiry {
        text-align: center;
/*        margin-top: -60px;*/
    }
    div.inquiry>h1{
        margin-bottom: 5px;
        text-align: left;
    }
    div.inquiry>table{
        margin-bottom:30px;
    }
    form.inquiryEdit{
        background-color: var(--backBlueGreen);
        text-align: center;
        width: max-content;
        padding: 0 53px;
        margin: auto;
    }
    form.inquiryEdit>hr{
        height: 0;
    }
    form.inquiryEdit sup{
        font-size:1.1em;

    }
    #addItem{
        display: block;
        margin: 10px auto 30px auto;
    }
    #addItem2{
        display: none;
        margin: 10px auto 30px auto;
    }
    #listBody tr[bad='1']{
        color:red;
    }
    #listBody tr>td:nth-child(5){
        max-width:200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #listBody tr>td:nth-child(6), #listBody tr>td:nth-child(7), #listBody tr>td:nth-child(8){
        font-weight: bold;
        font-size: 20px;
        text-align: center;
    }
    #listBody tr>td:nth-child(6){
        color:var(--btnBackColor);
    }
    #listBody tr>td:nth-child(7), #listBody tr>td:nth-child(8){
        cursor: pointer;
    }

    #listBody tr>td:nth-child(7)::before{
        color:var(--blueGreen);
        content:"🖉";
    }
    #listBody tr>td:nth-child(8)::before{
        color:#000;
        content:"🗑";
    }
    div.backEdit{
        display:none;
    }
    #btnSave, #btnAdd, #btnDel{
        display:none;
    } 
    #btnClose, #btnInquiry{
        background-color: var(--btnColor);
        color:var(--btnBackColor);
        border: 2px solid var(--btnBackColor);
    }

    #btnClose:hover, #btnInquiry:hover{
        background-color: var(--btnHoverBackColor);
        color: var(--btnColor);
        border-color: var(--btnHoverBackColor);
    }

    form.customer, form.signUp, form.restore, form.inquiryEnd{
        display:block;
        width: 100%;
        text-align: center;
        background-color: var(--backBlueGreen);
        padding:30px 0 0 0;
        margin:-10px 0 80px 0;
    }

    form.signUp{
        padding-top:10px;
    }
    
    form.customer>div, form.signUp>div {
        display: inline-block;
        margin-top: 10px;
    }
    form.customer>p.inqInfo{
        margin: -10px 10% 10px 10%;
    }
    form.inquiryEnd{
        display: grid;
        justify-content: space-evenly;
        padding:0 0 10px 30px;
        grid-template-columns: auto 350px auto auto ;
        gap: 20px;
    }

    form.inquiryEnd>div{
        text-align: left;
    }
    form.inquiryEnd>h2{
        display: block;
        margin:20px auto 30px auto;
        width:max-content;
        grid-column: 1 / span none;
    }
    form.inquiryEnd>textarea{
        grid-column: 1 / span 2;
        width: auto;
        margin-bottom:20px;
        min-height:80px;
    }
    form.inquiryEnd>add-files{
        margin-left:0;
    }
    #inqType{
        display: inline-block;
        padding: 11px 10px 0 10px;
        margin-bottom: -6px;
        height: 50px;
        background-color: #fff;
        border: 1.5px #aaa solid;
        border-radius: 10px;
        min-width:350px;
    }

    #inqType *{
        float:left;
        width:auto;
        margin:0;
        font-size: 1.05em;
        
    }
    #inqType>input{
        margin: 6px 10px 0 0px;
    }
    #inqType>label:first-of-type{
        margin-right: 30px;
    }
    form.restore>div, form.restore>div{
        display: block;
        margin-top: 20px;
    }
    form.restore>button{
        margin-bottom:-30px;
    }
    form.customer>div>label, form.signUp>div>label, form.restore>div>label{
        display: inline-block;
        vertical-align: top;
    }
    form.customer input, form.signUp input, form.inquiryEnd input{
        font-size: 1.05em;
        padding: 10px;
    }
    form.signUp>div:first-of-type{
        display:block;
        margin-bottom:30px;
    }
    form.signUp>div:first-of-type>label{
        display: inline;
        padding:0 10px;
    }
    form.signUp>div:first-of-type>a{
        vertical-align: top;
        color: var(--backColor1);
        font-weight: lighter;
        cursor:pointer;
    }
    form.signUp>h2{
        margin:0px 0 20px 0;
    }
    form.customer>h2{
        margin:-20px 0 20px 0;
    }
    form.customer>button{
        margin: 10px auto -40px auto;
    }
    form.customer>textarea{
        display:inline-block;
        width:min(510px, 80%);
        min-width:250px;
        min-height:80px;
        margin:0 auto 20px auto;
        vertical-align: bottom;
    }

    #sendInquiry{
        margin-top:35px;
    }
    /** cont-Grey-Down **/
    div.productsBy, div.industries, div.contGreyDown, div.asortment, div.services {
        width:100%;
        margin:100px 0 130px 0;
        background-color:var(--backGray);
        padding-bottom:27px;
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size:16px;
    }
    div.productsBy>div, div.industries>div, div.contGreyDown div, div.asortment>div, div.services>div{
        width:96%;
        padding: 0 2%;
        margin:-100px auto 0 auto;
        background: none;
        text-align: left;

        display:flex;
        flex-direction: row;
        flex-wrap:wrap;
        justify-content:space-evenly;
        gap: 2%;
    }
    /* next 2 */
    div.productsBy{
        margin:-210px 0 180px 0;
    }
    div.productsBy>div{
        margin: 60px auto -145px auto;
    }
    div.productsBy>div>*.itemBlock, div.industries>div>*.itemBlock, div.contGreyDown>div>*.itemBlock, div.asortment>div>*.itemBlock, div.services>div>*.itemBlock{
        display: block;
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 300px;
        max-width: 315px;
/*        height: 182px;*/
        padding:20px 5px 0 25px;
        background-color:#fff;
        box-shadow: 0 4px 16px rgba(0,0,0,.16);
        margin:0 0 35px 0; 
        box-sizing: content-box;
    }
    div.itemBlock>a>h3::before{
        display:block;
        background: url('images/anchorRight.svg') right no-repeat;
        content:' ';
        width: 22px; height: 22px;
        float: right;
        padding-left:28px;
        margin: 6px 10px 0 0;
    }
    div.itemBlock>a>h3, div.itemBlock>h3{
        font-weight: bold;
/*        line-height:35px;*/

    }
    div.itemBlock>a:hover>h3{
        text-decoration: underline;
    }
    div.itemBlock a::after{
        float:right;
        padding-left:0;
        margin-right:10px;
    }
    div.itemBlock a, div.itemBlock a:visited{
        text-decoration: none;
        color:black;
        font-weight: normal;
        font-size:inherit;
    }
    
    .contGreyDown .button{
        display:block;
        margin:20px 0 -60px 0;
    }
    .productsBy .button{
        margin: -33px 0 -11px 0;
    }
    /** Boast **/
    div.fndPrdBlck{
        text-align:center;
        background-color:#eaeef4;
        height:160px;
        margin-bottom:-100px;
        margin-top:60px;
    }
    .fndPrdBlck a{
        margin-top: -35px;
        vertical-align: top;
        line-height: 30px;
        padding-top: 5px;
    }
    .fndPrdBlck a span{
        font-weight: normal;
    }
    div.counters {
        display: block;
        width:auto;
/*        height:500px;
        margin: 230px -100px 0 -100px;*/
        height:410px;
        margin: 100px -100px 0 -100px;
    }
    div.counters>div{
        width:100%;
        padding: 0 0;
        display: flex;
        flex-direction: row;
        justify-content:stretch;
        flex-wrap:nowrap;
        background: none;
        text-align: center;
    }
    div.counters>div>*.itemBlock{
        width:25%;
    }
    div.counters>div>*.itemBlock>div{
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='214.084' height='247.2' viewBox='0 0 214.084 247.2'> <path id='Path_6711' data-name='Path 6711' fill='%23d2d5df' d='M2345.98,1159.2l107.042-61.8,107.042,61.8v123.609l-107.042,61.8-107.042-61.8Z' transform='translate(-2345.98 -1097.403)'/></svg>") no-repeat;
    /*eaeef4    fill='#eef4f9'*/
        background-size: contain;
        width: 188px;
        height: 217px;
        flex-shrink: 0;
        flex-grow: 0;
        flex-basis: 214px;
        font-weight: normal;
        margin: -100px auto auto auto;
        padding-top: 40px;
    }    
    
    div.counters>div>*.itemBlock:nth-child(1)>div{
        margin-right: -5%;
    }
    div.counters>div>*.itemBlock:nth-child(2)>div{
        margin-right: calc((95% - 188px) / 3);
    }
    div.counters>div>*.itemBlock:nth-child(3)>div{
        margin-left: calc((95% - 188px) / 3);
    }
    div.counters>div>*.itemBlock:nth-child(4)>div{
        margin-left: -5%;
    }
    mechanic-counter, div.counters>div>*.itemBlock>div>span{
        float:left;
        clear:left;
        width:100%;
        text-align:center;
    }

    mechanic-counter {
        display: block;
        width:188px;
        height:80px;
        font-size: 54px;
        font-weight:bold;
        line-height: 80px;
        float:none;
        margin: 0 auto;
        overflow: hidden;
    }
    mechanic-counter div.value{
        width: max-content;
        height:80px;
        float:none;
        margin: 0 auto;
        overflow: hidden;
    }
    mechanic-counter span{
        display:block;
        float:left;
        margin-top:0;
    }
    mechanic-counter>div.shadow{
        display:block;
        position: absolute;
        margin-top: -80px;
        margin-left:25px;
        width:138px;
        height:80px;
/*        background-image: linear-gradient(#eef4f9, #00000000 30%, #00000000 75%, #eef4f9 100%);*/
        background-image: linear-gradient(#d2d5df, #00000000 30%, #00000000 80%, #d2d5df 100%);

    }
    div.counters>div>*.itemBlock>div>span{
/*        font-size: medium;*/
        font-size:20px;
        text-transform: uppercase;
    }
    div.counters>div>*.itemBlock:first-of-type>div>span{
        padding:0 20px;
    }
    div.counters>div>*.itemBlock:first-of-type>div>span::first-line{
        font-weight: 900;
        font-size:1.25em;
        vertical-align: top;
        line-height: 1.25em;
    }

    div.counters>div>*.itemBlock>img{
        display:block;
        position: absolute;
        z-index:-1;
        margin:0;
/*        height:343px;*/
        height:200px;
        width:25%;
        object-fit: cover;
    }

    /** cont-Grey-Up **/

    div.industries, div.asortment, div.services{
        margin-bottom:210px;
        margin-top:40px;
    }

    div.asortment{
        margin-bottom:210px;
        margin-top:95px;
    }
    div.asortment>a{
        margin: 40px auto 20px auto;
    }
    .industries h2,.asortment h2,.services h2{
        margin-bottom:40px;
    }
    div.industries>div, div.asortment>div, div.services>div{
        margin-top:0px;
        margin-bottom:-210px;
    }

    div.industries>div>*.itemBlock, div.asortment>div>*.itemBlock, div.services>div>*.itemBlock{
        padding-top:60px;
        margin-top:50px;
        margin-bottom:45px;
        transition: padding 0.3s, margin 0.3s;
    }
    div.productsBy>div>*.itemBlock{
        transition: padding 0.3s, margin 0.3s;        
    }

    div.asortment>div>*.itemBlock{
        max-width:320px;
        min-width:315px;
    }

    div.services>div>*.itemBlock{
        max-width:330px;
        min-width:330px;
    }

    .industries>div>*.itemBlock>img, .asortment>div>*.itemBlock>img, .services>div>*.itemBlock>img{
        position:absolute;
        width:100px;
        height:100px;
        margin-top:-110px;
        margin-left:-10px;
        margin-bottom:30px;
    }
    .industries>div>*.itemBlock>h3, .asortment>div>*.itemBlock>h3, .services>div>*.itemBlock h3{
        line-height:35px;
        height:65px;
        padding-right: 5px;
    }
    .services>div>*.itemBlock h3{
        height:75px;
    }
    .industries>div>*.itemBlock>ul, .asortment>div>*.itemBlock>ul, .services>div>*.itemBlock>ul, .productsBy>div>*.itemBlock>ul{
        margin-bottom:30px;
    }
    a.itemBlock>span.arrRight{
        padding-bottom:27px;
    }
    .productsBy>div>*.itemBlock:hover{
        background-image: linear-gradient(white calc(100% - 85px), var(--blueGreen) calc(100% - 80px));
        margin-top:-5px;
        margin-bottom:30px;
        padding-bottom: 10px;
    }
    .industries>div>*.itemBlock:hover, .asortment>div>*.itemBlock:hover, .services>div>*.itemBlock:hover{
        background-image: linear-gradient(white calc(100% - 85px), var(--blueGreen) calc(100% - 80px));
        margin-top:43px;
        margin-bottom:37px;
/*        padding-bottom: 5px;*/
/*        padding-top:65px;*/
    }

    .industries>div>a:hover span.arrRight, .asortment>div>a:hover span.arrRight, .services>div>a:hover span.arrRight, .productsBy>div>a:hover span.arrRight{
        color:#fff;
        text-decoration: none;
    }
    .industries>div>a:hover span.arrRight::after, .asortment>div>a:hover span.arrRight::after, .services>div>a:hover span.arrRight::after,
    .productsBy>div>a:hover span.arrRight::after, .services>div>a:hover span.arrRight::after{
        background-image: url('images/anchorRightInv.svg');
    }

    /** NEWS **/

    #news{
        padding: 0 15%;
    }
    #news h2{
        width:100%;
        text-align: center;
    }
    #news>div{
        background-color: var(--backGray);
        border-left:143.25px solid #fff;
        min-height:287.5px;
        padding:0 50px 0 180px;
        margin-bottom: 30px;
        text-align: left;
        max-height:max-content;
/*      max-height:320px;*/
        overflow: hidden;
        transition: all .5s;
        padding-bottom:10px;
    }


    #news a{
        color: var(--blueGreen);
        font-weight: bold;
    }
    #news div>img{
        position: absolute;
        display:block;
        height:287.5px;
        width:287.5px;
        margin-left:-324px;
        object-position: top center;
        object-fit: cover;
	background: linear-gradient(100deg, var(--backGray), #fff);
    }
    #news h3{
        padding-top:30px;
    }
    #news p{
        display:block;
        margin-bottom:15px;
    }
    #news ul{
        margin-bottom:15px;
    }
    #news>a{
        width: 100%;
        text-align: center;
    }
    #news>div p a{
        color:var(--blueGreen);
        text-decoration: underline;
        font-weight: bold;
    }

    #news table:first-of-type th, #news table:first-of-type td{
        border:none;
        padding: 2px 5px 0 0;
    }
    
    table.newsSum>thead>tr>th{
        font-size:1.15em;
    }
    table.newsSum tr>td, table.newsSum tr>th{
        padding:2px;
        border: none;
    }
    table.newsSum>tbody>tr>td:first-child{
        font-weight: normal;
    }
    table.newsSum tr>td:last-of-type{
        text-align:right;
    }
/*
    div.readAll{
        position: sticky;
        bottom:-10px;
        width:100%;
        background: linear-gradient(#eaeef400, #eaeef4 50%);
        height: 60px;
        padding-top: 30px;
        min-width: fit-content;
        text-align: end;
    }
    #news>div[expanded="1"]{
        max-height:max-content;
    }
    #news>div[expanded="1"]>div.readAll{
        display:none;
    }
    .readAll button, .readAll button:hover{
        width:auto;
        height:auto;
        background:none;
        padding:0;
        min-width: fit-content;

    }
*/
    #sitemap a{
        color: var(--mnuActiveColor1);
    }

/*** FOOTER ***/

    #goTop {
        clip-path:polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.6% 75%, 6.6% 25%);
        object-fit: none;
        object-position: 50% 30%;
    
        display:block;
        position:fixed;
        bottom: 20px;
        width:50px;
        height: 50px;
        background-color: #fff;
        right:20px;
        opacity: 0;
        transition: opacity 1s;
    }
    #goTop::before{
        clip-path:polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.6% 75%, 6.6% 25%);
        object-fit: none;
        object-position: 50% 30%;
        background-color: #ddd;

        display: block;
        width:100%;
        text-align: center;
        content: "🡅";
        color: var(--btnBackColor);
        font-size:28px;
        line-height: 50px;
        opacity: .8;
    }

    #goTop::after{
        display: block;
        width:100%;
        text-align: center;
        content: "🡅";
        color: var(--btnBackColor);
        font-size:28px;
        line-height: 50px;
        opacity: .8;
        text-shadow: 1px 1px 5px #000;
        margin-top:-100%;
    }

    footer{
        background-color: var(--backColor1);
        color:#fff;
        padding: 0 100px;
        background-image: url('images/footBack.jpg');
        background-position: top center;
        background-repeat: repeat-x;
        background-size: auto 360px;
        margin-top:100px;
    }

    footer div.top {
        text-align:center;
        padding: 80px 0 100px 0;
        font-size: 32px;
    }
    footer div.top span{
        display: block;
    }
    footer div.top span:nth-child(1){
        font-weight: bold;
    }

    footer .button{  /* move to class*/
        border-radius: 25px;
        font-size:20px;
        height:50px;
        line-height: 50px;
        margin-top:40px;
        padding:0 60px;
    }
    /* footer sect 2 */

    footer div.icons{
        background-color: var(--backColor1);
        text-align: center;
        align-content:center;
    }
    footer div.icons a{
        margin:0;
        display: inline-block;
        margin: 45px 7px 20px 7px;
    }
    footer div.icons a .back{
        fill:#fff;
        transition: fill 0.3s;
    }
    footer div.icons a .fore{
        fill:var(--backColor1);
        transition: fill 0.3s;
    }
    footer div.icons a:hover .back{
        fill:var(--blueDark);
        transition: fill 0.3s;
    }
    footer div.icons a:hover .fore{
        fill:#fff;
        transition: fill 0.3s;
    }

    footer div.bottom div{
        padding:15px 0 40px 0;
        border-top:1px solid rgba(255,255,255,.3);
        margin-top: 20px;
    }
    
    footer p {
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:space-between;
        
        width:100%;
        max-width:380px;
        margin-top:30px;
    }
    footer address{
        display: inline;
    }

    footer p:last-child{
        display:inline;
    }
    footer p:last-child a{
        margin-left: 30px;
        float: right;
    }
/* user pages */
#inquiryTable caption{
    text-align:right;
}
#inquiryTable h3 {
    margin-bottom:0;
}
#inquiryTable th, #inquiryTable td{
    text-align:left;
}
#inquiryTable td{
    font-weight: normal;
}
#inquiryTable th[colspan="6"]{
    text-align:left;
}
#inquiryTable tr:hover{
    background-color:initial;
}
#profitSum{
    width:100%;
    text-align: center;
    background-color: var(--backBlueGreen);
    padding:10px;
    margin:20px 0;
}

#profitHist{
    font-size: 17px;
    max-height: 700px;
    border-top:1px solid;
}
#profitHist thead{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    background-image: linear-gradient(#fff 70%, #ffffff00);
}
#profitHist thead th{
    border-top:none;
}

#profitHist thead>tr{
    background-color:#fff;
}
#profitHist td{
    font-weight: normal;
    padding: 4px 6px;
}
#profitHist tr:hover{
    background:initial;
}

/* end user pages */
@media only screen and (max-width: 1400px){
    form.inquiryEnd{
        grid-template-columns: auto;
    }
    div.contacts{
        display:block;
    }
    div.contacts>div{
        border:none;
        padding:20px;
        margin-bottom:20px;
    }
}

@media only screen and (max-width: 1080px){
    header{
        height:80px;
        width:100%;
        background: var(--backColor1);
        padding:0;
        margin-bottom:200px;
    }

    #hdrBack{
        background-position-x: 90%;
    }
    header nav{
        margin-top:22px;
        font-weight: 600;
    }
    #cart {
        min-width:35px;
    }
    #logo{
        width:149px;
        height:38px;
        margin:auto;
        background-image: url("images/logoRow.svg");
    }
    #hdrIcons{
        margin:auto;
    }
    header nav li:first-of-type{
        visibility:hidden;
        display:block;
        width:1px;
    }
    
    #motto{
        margin-top:0px;
    }
    #motto *:first-child {
        font-size: 24px;
    }
    main, footer{
        padding:0 50px;
    }
    div.counters {
        margin: 230px -50px 0 -50px;
    }
        
    #news{
        padding: 0;
    }
    div.mainImg{
        margin-right:-50px;
    }

/* INQUIRY */
    form.inquiryEdit{
        width: 100%;
        padding:0;
    }

}
        

@media only screen and (max-width: 830px) {
    :root{
        --mnuActiveColor1: #82CEFF;
    }
    .searchBox label{
        margin-top:-10px;
    }

	mat-weight{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding:20px 0 0 0;
        width:100%;
	}
	mat-weight select{
		margin:0;
	}
	mat-weight>div{
		align-items: center;
	}
    mat-weight>div:first-child>div:last-child {
        width: 100%;
    }
    div.backDialog>div.dialog{
        width:100%;
        padding:20px 0;
    }
    h1{
        text-align: center;
    }
    h3{
        width:100%;
    }
    div.backDialog>div>div.close{
        margin-right: 6px;
    }
/*** header ***/
    header{
        height:185px;
        background-image: linear-gradient(181.5deg, var(--backColor1) 81.8%, white 82.3%);
        margin-bottom:100px;
    }
    #hdrBack{
        display: inline-block;
        background-position-x: -405px;
        background-position-y: -75px;
    }
    #logo{
        width:97px;
        min-width:auto;
        height:93px;
        margin:18px 0 0 18px;
        background: url("images/logo.svg");
        background-size: contain;
    }
    header nav{
        display:none;
        background-color: var(--backColor1);
        margin:0;

        width:100%;
        margin-top:20px;

        font-weight: normal;
        font-size:24px;

        text-transform: none;
    }
    header nav ul{
        flex-direction: column;
        padding: 30px 0 30px 0;
    }
    header nav ul>li{
        border-bottom: solid 2px #82CEFF;
        margin: 0 25px;
        padding: 8px 0 10px 0;
    }
    header nav ul li:first-child{
        border-top: solid 2px #82CEFF;
    }
    #menuIcon {
        display: block;
        position: absolute;
        top:25px;
        right:25px;
        width: 26px;
        height: 24px;
        margin: 0px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.5s ease-in-out;
        -moz-transition: 0.5s ease-in-out;
        -o-transition: 0.5s ease-in-out;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        background-color:var(--backColor1);
        border: solid 12px var(--backColor1);
        border-radius: 3px;
        border-top-width: 14px;
        border-bottom-width: 12px;
        box-shadow: 1px 1px 3px #333;
        box-sizing: content-box;
    }
    #menuIcon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;
        background: #fff;
    }
    #menuIcon span:nth-child(1) {
        top: 3px;
    }
    #menuIcon span:nth-child(2) {
        top: 10px;
    }
    #menuIcon span:nth-child(3) {
        top: 17px;
    }
    body[menuOpened='1'] #menuIcon span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    body[menuOpened='1'] #menuIcon span:nth-child(2) {
/*        opacity: 0;
        left: -37px;
*/
        display:none;
    }
    body[menuOpened='1'] #menuIcon span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    body[menuOpened='1'] #menuIcon {
        background-color: #fff;
        border-color: #fff;
    }
    body[menuOpened='1'] #menuIcon span{
        background-color: var(--backColor1);
    }
    #cart{
        min-width: auto;
        position: absolute;
        top:100px;
        right:10px;
    }    
    #login{
        position: absolute;
        top:25px;
        right:165px;
        width:50px;
        height: 50px;
        object-fit: contain;
        z-index: 1;
    }
    #login svg{
        width:22px;
    }
    #calcWeight{
        position: absolute;
        top: 25px;
        right: 80px;
        width: 50px;
        height: 50px;
        /* object-fit: contain; */
        /* z-index: 1; */        
    }
    #motto *:first-child{
       font-size: 18px;    
    }
/** main 830 **/
    main{
        padding:0 0px;
    }

    div.content{
        margin-top: 0;
        grid-template-columns: 0fr 1fr 11fr 1fr;
        padding: 0 10px;
    }
    div.content h1, div.content h2, div.content h3{
        text-align: center;
    }
    div.content>h3{
        margin-top:20px;
    }
    
    #inquiryTable h3 {
        text-align: right;
    }
    .content ul{
        margin:20px;
        text-align: left;
    }
    div.content div.mainImg{
        display: none;
    }

    .content ul{
        margin:20px 5px;
    }

    div.contentRight>h2, div.contacts>h2 {
        margin: 0 0 20px 0;
    }
    div.contacts>div>h3 {
        text-align: left;
        font-size: 18px;
    }



    /* ***** Counters **** */
    div.fndPrdBlck {
        margin-top:110px;
    }
    div.counters {
        display: block;
        width:auto;
        height:1000px;
        margin: 60px 0 60px 0;
    }
    div.counters>div{
        flex-direction: column;
        height: 100%;
    }
    div.counters>div>*.itemBlock{
        width:100%;
        height: 25%;
        margin:0 auto;
    }
/*    div.counters>div>*.itemBlock:nth-child(1)>div {
        margin:-30px 0 0 0;
    }
    div.counters>div>*.itemBlock:nth-child(2)>div {
        margin:-45px 0 0 0;
    }
    div.counters>div>*.itemBlock:nth-child(3)>div {
        margin:-60px 0 0 0;
    }
    div.counters>div>*.itemBlock:nth-child(4)>div {
        margin:-75px 0 0 0;
    }
*/
    div.counters>div>*.itemBlock>div {
        margin:-55px 0 0 0 !important;
    }

    div.counters>div>*.itemBlock>img{
        margin-left:0;
        width:100%;
        height:250px;
        border-left:30px solid #eaeef4;
    }

/**** other auto blocks ****/
    div.productsBy{
        /*, div.industries, div.contGreyDown, div.asortment, div.services */
        margin-top:100px;
    }
    div.productsBy>div>*.itemBlock, div.industries>div>*.itemBlock, div.contGreyDown>div>*.itemBlock, div.asortment>div>*.itemBlock, div.services>div>*.itemBlock {
        margin-bottom: 10px;
    }
    .searchBox hr{
        visibility: hidden;
    }
    .industries h2, .asortment h2, .services h2 {
        margin-bottom: 10px;
    }
    .productsBy .button, .contGreyDown .button {
        margin-top:40px;
    }

    form.inquiryEnd{
        grid-template-columns: none;
    }
    #inqType{
        margin-bottom:15px;
        padding:10px;
        min-width: auto;
        height: auto;
    }
    #inqType>input{
        clear:both;
    }
    form.inquiryEnd>textarea{
        grid-column: auto;
    }
    div.contacts{
        width:100%;
    }
    div.contacts{
        width:100%;
    }
    form.contacts, form.contacts>div{
        width:100%;
        min-width: auto;
    }
    
    #news div>img{
        display: none;
    }
    #news>div{
        width: 100%;
        padding:0 30px 0 30px;
        border: none;
    }
    footer p:last-child a {
        margin-left: 0;
    }

/** Inquiry 830 **/
    div.inquiry>table>thead{
        display:none;
    }
    div.inquiry>table>tbody{
        display:grid;
    }
    div.inquiry>table>tbody>tr{
        display:block;
    }
    div.inquiry>table>tbody>tr{
        display:block;
        border-bottom: #333 1px solid;
    }
    div.inquiry>table>tbody>tr:last-child{
        border-bottom: #333 4px double;

    }
    div.inquiry>table>tbody>tr:nth-child(odd)>td{
        background-color: #eee;
    }

    div.inquiry>table>tbody>tr>*{
        border: none;
        max-width: none !important;
        display: inline-block;
        width:100%;
    }
    div.inquiry>table>tbody>tr>td:empty{
        display:none;
    }
    div.inquiry>table>tbody>tr>td::before{
        float:left;
        font-weight: bold;
    }
    div.inquiry>table>tbody>tr>td::after{
        content:":";
        float:left;
        font-weight: bold;
        margin-right:10px;
    }

    div.inquiry #listBody>tr>td:nth-of-type(1)::before{
        content:var(--word-shape);
    }
    div.inquiry #listBody>tr>td:nth-of-type(2)::before{
        content:var(--word-grade);
    }
    div.inquiry #listBody>tr>td:nth-of-type(3)::before{
        content:var(--word-dimensions);
    }
    div.inquiry #listBody>tr>td:nth-of-type(4)::before{
        content:var(--word-amount);
    }
    div.inquiry #listBody>tr>td:nth-of-type(5)::before{
        content:var(--word-addInfo);
    }
    div.inquiry #listBody>tr>td:nth-of-type(6)::before{
        content:var(--word-attachment);
    }
    div.inquiry #listBody>tr>td:nth-of-type(7), div.inquiry #listBody>tr>td:nth-of-type(8){
        display: block;
        width:50%;
        float: left;
        text-align: center;
    }
    div.inquiry #listBody>tr>td:nth-of-type(8){
        float: right;
        clear: none;
    }

    div.inquiry #listBody>tr>td:nth-of-type(7):before, div.inquiry #listBody>tr>td:nth-of-type(8):before{
        display:inline-block;
        border:none;
        border-radius: 35px;
        background-color: var(--btnBackColor);
        font-weight: bold;
        color:#fff;
/*        padding:0 50px;*/
        align-self: center;
        font-size: 24px;
        width: 100%;
    }
    div.inquiry #listBody>tr>td:nth-of-type(7):before{
        content: var(--word-tHeadEdit);
        float: none;
    }
    div.inquiry #listBody>tr>td:nth-of-type(8):before{
        content: var(--word-tHeadDelete);
        float: none;
    }
    
    div.inquiry #listBody>tr>td:nth-of-type(7)::after, div.inquiry #listBody>tr>td:nth-of-type(8)::after{
        display: none;
    }
/*    div.inquiry>table>tbody>tr>td:nth-of-type(3)::before{
        content:var(--word-grade);
    }
#dimensions</th><th>#amount</th><th>#addInfo</th><th>#attachment</th><th>#tHeadEdit</th><th>#tHeadDelete</th></tr></thead>
*/
    form.inquiryEdit{
        padding: 0 10px;
        text-align: start;
        display: inline-block;
    }
    #shapeGroup, #shape, p.inqInfo{
        max-width:100%;
        width:100%;
    }
    form.inquiryEdit>button, form.inquiryEdit>div.allSearch>*, form.inquiryEdit>div.allSearch>div>*{
        float:left;
        clear:both;
    }
    form.inquiryEdit>div.allSearch>*{
        width: auto;
    }
    div.allSearch, form.inquiryEdit>div.allSearch>div.baseSearch {
        width: 100%;
    }

    div.baseSearch {
        flex-direction: column;
    }

    .inquiryEdit #shapeImg {
        float:left;
        margin-bottom:0;
    }
    div.units label {
        display: inline;
        width: inherit;
        clear: none !important;
    }
    #searchInfo, p.inqInfo {
        min-width: auto;
    }

    form.searchBox div.availability input:last-of-type, div.units input:last-of-type {
    /*    margin-left:auto;*/
        clear: none !important;
    }
    form.searchBox>input[name="grade"]{
        width:300px;
        margin:auto;
    }
    add-files {
        margin-left: auto;
    }
    div.itemInfo>div:first-of-type, #itemInfo{
        width:calc(100% - 20px);
    }
    #itemInfo{
        min-width:auto;
    }

/** footer 830 **/
#goTop[showed] {
    opacity: .8;
}
footer {
        padding:0;
        text-align:center;
    }
    footer address, footer p{
        display: flex !important;
        flex-direction: column;
        max-width: none;
        line-height: 32px;
        padding: 30px 0 30px 0;
        float:none;
    }
    footer address{
        border-bottom:1px solid rgba(255,255,255,.3);
    }

/** opened menu 830**/
    body[menuOpened='1'] header{
        height: auto;
        margin-bottom:0;
    }
    body[menuOpened='1'] #hdrBack{
        background:var(--backColor1);
    }

    body[menuOpened='1'] header nav{
        display:inline;
    }
    body[menuOpened='1'] #cart{
        display: none;
    }
/*    body[menuOpened='1'] #login{
        display: none;
    }
*/
    body[menuOpened='1'] #hdrIcons>*:nth-child(4){
        display: block;
        position:absolute;
/*        right:10px;*/
        top:100px;
        text-transform: uppercase;
    }

    body[menuOpened='1'] #motto{
        display: none;

    }

    /* main - opened menu */

    body[menuOpened='1'] main{
        display: none;
    }
    /*** footer - opened menu ***/
    body[menuOpened='1'] footer{
        margin-top: 0;
        background-image: none;
    }
    body[menuOpened='1'] footer>div:first-child{
        display:none;
    }

}   /* End 830 */