body
{
    --cartCol1Width     : 90px;
    --cartCol2Width     : 250px;
    --cartCol3Width     : 90px;
}
#walletContent
{
    --tokenImgSizeMax : 240px;
    --tokenImgSizeMin : 120px;
    --tokenImgSizeMinPixelated:96px;
    margin-top: 20px;
    margin-right:calc( var(--cartCol1Width) + var(--cartCol2Width) + var(--cartCol3Width) );
}
#collection .thumbnails
{   display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
    align-items: flex-start;
}
.collection_title .atitle
{
    margin-left: calc(var(--shadowSize) + var(--paddingLeft));
    text-transform: uppercase;
    display: inline-block;
}
.collection_title .atitle
{   border-bottom: 1px solid #888;
}
.collection_title .collection_count
{
    padding-left:5px;
    font-size:0.85em;
}
#collection .category
{
    display:inline-block;
}
ul.tokens
{
    --chkWidth:36px;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    flex-direction: row;
}
ul.tokens li
{
    display:inline-block;
    margin-right: 10px;
    margin-bottom : 30px;
    min-height: calc( var(--tokenImgSizeMax) + 2*var(--mattingWidth) + 39px);

}
#Collection8Bidou ul.tokens li 
{
    min-height : auto;
}
ul.tokens li.walletTokenError
{
    min-height: auto;   
    padding : 10px;
    color : #fff;
    background: var(--mattingColor);
    border-radius: 5px;
    font-family: var(--fontFamily1);
    letter-spacing: 0.05em;
	font-weight: var(--fontWeightLight);
}
ul.tokens li .item
{
    margin-right : 0;
}
ul.tokens li .tokentitle
{
    display: block;
    padding-left: var(--paddingLeft);
    font-family: var(--fontFamily1);
    font-weight: 200;
    font-size : 0.7rem;
}
ul.tokens li .editions
{
    font-size : 0.6rem;
    padding: 2px 0 5px var(--paddingLeft);
    display: inline-block;
}
ul.tokens li .editions .longform
{
    font-size:9px;
}
ul.tokens li .img
{
    display:inline-block;
    margin:0;
    background : var(--mattingColor);
    padding		: var(--mattingWidth);
    box-shadow: var(--frameShadow);
    position:relative;
    top:0;
    left:0;
}
ul.tokens li .img img
{
    max-height : var(--tokenImgSizeMax);
    max-width : var(--tokenImgSizeMax);
    min-width : var(--tokenImgSizeMin );
    min-height : var(--tokenImgSizeMin );

}
ul.tokens li .img img.pixelated
{   image-rendering: pixelated;
    min-width : var(--tokenImgSizeMinPixelated );
    min-height : var(--tokenImgSizeMinPixelated );
    width : var(--tokenImgSizeMinPixelated );

}                            
ul.tokens input.chk, ul.tokens abbr
{
    display : inline-block;
    width : var(--chkWidth);
    height: var(--chkWidth);
    background-color: var(--mattingColor);
    color : #fff;
    cursor : pointer;
    margin:0;
    position:relative;
    right : calc(0px + var(--mattingWidth) + var(--chkWidth) + 2px );
    bottom : calc( 0px - 20px );
}
ul.tokens .btnLink
{
    position:absolute;
    width : var(--chkWidth);
    color : #fff;
    background-color: var(--mattingColor);
    text-decoration: none;
    text-align:center;
    padding:2px;
    font-size : 0.6rem;
    left : calc(0px + var(--mattingWidth) + 2px);
    bottom : calc(0px + var(--mattingWidth));
}
ul.tokens .slot2
{
    right : calc(0px + var(--mattingWidth) + var(--chkWidth) + 2px );

}
ul.tokens abbr
{
    background-color:rgba(255,255,255,0.5);
    background-color: var(--mattingColor);
    display:inline-block;
    line-height: var(--chkWidth);
    text-align: center;
    font-size:18px;
    text-decoration: none;
    cursor : help;
    padding : 0;
    margin:0;
}
ul.tokens abbr.slot2
{   
    background-color: #fff;
    color : #000;
    border:1px solid var(--mattingColor);
    border-radius: 3px;
}

ul.tokens .icLock
{
    background-image: url(../Img/iclock.svg);
    background-position: 70% 50%;
    background-repeat: no-repeat;
    background-size: 30px 30px;
}
.tokens .item .itemTitle, .tokens .item .edition
{   opacity:1;
    background: transparent;
    color: var(--textColor);
}
.tokens .item .itemTitle
{
    top: calc(0px - var(--mattingWidth) - 1em );
}
.tokens .item .edition
{    bottom: calc(0px - var(--mattingWidth) - 1em  );
}

#walletInfoText
{
    background-color: var(--mattingColor);
    color : #fff;
    border-radius:5px;
    box-shadow: var(--frameShadow);
    font-family: var(--fontFamily1);
	letter-spacing: 0.05em;
	font-weight: var(--fontWeightLight);
    padding:10px;
    margin-bottom: 15px;
    margin-left: 8px;
    max-width: var(--formWidthLarge);
    min-width : 200px;
}
#walletInfoText i
{
    font-size:0.8em;
}
#cart
{
    z-index : 10;
    position:fixed;
    top: calc( var(--topMargin) + 10px + 20px );
    right:10px;
    background : rgba(255,255,255,0.97);
    background : var(--mattingColor);
    border-radius:5px;
    box-shadow: var(--frameShadow);
    color : #fff;
    overflow: scroll;
    max-height: 100vh;
    min-width: 500px;
    --cartPadding : 10px;
    padding:var(--cartPadding);
}
.cartTitle
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    font-size : 1rem;
}
.cartTitle .unitSwitch, .cartTitle .currSel
{
    float:right;
    font-size:0.75rem;
    padding-left:10px;
}
.cartTitle label,.cartTitle select
{
    color: #fff;
    font-size:0.75rem;
    font-family: var(--fontFamily1);
    font-weight: 400;

}
.cartTitle .currSel select
{   background-color: #000;
    border: none;
    padding: 0;
}

.cartItems
{
    display : table;
    min-width: 500px;
    border-collapse: collapse;
}

.cartItem
{
    display : none;
    border-top : 1px dashed #888;
}
.cartPrice
{
    border-top : 1px solid #888;
    padding: 5px 0 5px 0;
    overflow: hidden;
}
.cartPrice .text
{
    line-height:1rem;
    font-weight:normal;
}
.cartPrice .textsmall
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    font-size: 0.7rem;
    line-height:1rem;
    max-width:400px;
}
.cartPrice .textsmall b
{
    font-family: var(--fontFamily1);
    font-weight:300;
}

.cartPrice .right
{
    display: block;
    float : right;
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    font-size : 1rem;
}
.cartOrder
{
    padding-top:10px;
}

.cartOrder a
{
    float:right;
    color:#000;
    background:#fff;
}

.cartItem.active
{
    display : table-row;
}
.cartItem .colImg
{
    display: block;
    width : var(--cartCol1Width);
    padding : 5px 10px 5px 0;
    display: table-cell;
}
#cart .szColImg
{
    display: inline-block;
    width : var(--cartCol1Width);
}
.cartItem .colImg img
{
    max-width: 100%;
    max-height : 100px;
}
.cartItem  .colInfo
{
    min-width : var(--cartCol2Width);
    display: table-cell;
    vertical-align: top;
    padding : 5px 10px 5px 0;

}
.cartItem .title
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.cartItem  select.formats,.cartItem select.shipCountry
{
    min-width : 200px;
    max-width: 325px;
    border: none;
    padding: 2px 1px 2px 1px;
    margin-bottom: 2px;
    font-size: 0.6rem;
}
.cartItem  .formats .name
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    padding-right : 10px;
}
.cartItem  .formats .dim
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    padding-left : 10px;
    font-size : 0.7rem;
}

.cartItem .paper
{
	font-weight: var(--fontWeightLight);
    font-size: 0.7rem;
}
.cartItem .colPrice
{   
    display: table-cell;
    vertical-align: bottom;
    text-align: right;
    min-width : var(--cartCol3Width);
    padding : 5px 0 5px 0;
}
.cartItem .price
{   font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    padding: 5px;
}
.loader
{
	display: inline-block;
	width:300px;
    top : 14px;
    margin-left:10px;
}
.loader .t
{
    font-size : 0.75rem;
}
/* Form */
.frontForm
{
    --formWidthLarge : 530px;
    --formSep        : 20px;
    --formWidthHalf :  calc( ( var(--formWidthLarge) - var(--formSep) ) / 2 - 4px );

}
.frontForm .forminput .inputTitle
{
	font-size : 1rem;
	font-weight: 100;

}
.frontForm #address1 input, .frontForm #address2 input, .frontForm #address3 input, .frontForm input[name=transactionHash]
{
    width   : var(--formWidthLarge);
}

#FormInput_name > .inputControl , #postalCity, #phoneEmail, #countryAndState
{
    overflow: hidden;
}
.frontForm #name, .frontForm #contactName, .frontForm #postalCode, .frontForm #city,.frontForm #FormInput_phone, .frontForm #FormInput_email, .frontForm #FormInput_country, .frontForm #FormInput_state
{
    float : left;
}
.frontForm #contactName, .frontForm #city, .frontForm #FormInput_email, .frontForm #FormInput_state
{
    margin-left: var(--formSep);
}
.frontForm #name input, .frontForm #contactName input, #postalCode input, #city input, #FormInput_phone input,#FormInput_email input, .frontForm #FormInput_twitter input, .frontForm #FormInput_state input
{   width: var(--formWidthHalf);
}
.frontForm #FormInput_country select
{
    width: calc( var(--formWidthHalf) + 6px);
    font-size: 1.2rem;
}

.frontForm .forminput .inputControl input, .frontForm .forminput textarea, .frontForm label[for=agreed]
{
	font-family : var(--fontFamily1);
	font-weight: var(--fontWeightLight);
	font-size : 1rem;
	padding: 2px;
}
#FormInput_message
{
    margin-top: 20px;
}
#FormInput_message textarea
{
    width:  var(--formWidthLarge);
    height : 66px;
}

.frontForm .forminput input[name=wallet], .frontForm .forminput input[name=transactionHash]
{
	font-size : 0.7rem;
}
.frontForm .forminput .inputComment, .buttonOrderInfo, #trsHash .info
{
	font-size : 0.65rem;
    line-height:1.1rem;
    font-weight: 400;
	letter-spacing: 0.1em;
	max-width:  var(--formWidthLarge);
}
.frontForm .forminput input[type=checkbox]
{
	font-size : 2rem;
}
.buttonOrderInfo, #trsHash .info
{
    display: block;
    margin-left:var(--paddingLeft);

    border-radius: 5px;
    box-shadow: var(--frameShadow);
    padding:5px;   
}
.buttonOrderInfo
{   background: var(--mattingColor);
    color : #ddd;
}
.buttonOrderInfo b
{
    color : #fff;
}
span.mandatory
{
    font-family: var(--fontFamily1);
	font-weight: var(--fontWeightLight);
    font-size: 0.8rem;
    padding-left:5px;
    color:#888;
}
.frontForm .errorMsg, #trsHash .info .error
{
    color:#800;
}
.frontForm .errorMsg
{
    padding : 4px;
    border : 1px solid #000;
    border-radius: 4px;
    background : var(--mattingColor);
    color : #fff;
    margin-top : 5px;
    margin-bottom:var(--shadowSize);
    position:relative;
    top:0;
    left:0;
    max-width:var(--formWidthHalf);
    box-shadow: var(--frameShadow);
    font-family: var(--fontFamily1);
    font-weight: 100;
}
.frontForm .errorMsg::after 
{
    content:" ";
    position : absolute;
    top: -5px;
    left:10px;
    z-index: 3;
    padding:0;
    display:block;
    width : 8px;
    height:8px;
    transform: rotate(45deg);
    border-top : 1px solid #000;
    border-left : 1px solid #000;
    background : var(--mattingColor);

}
#order .divBtns
{
    margin-top : 10px;
}
.info .loader 
{
	display : block;
	width : 400px;
	background:none;
    top : 0;
    margin-left : 0;
}
.tooltip
{   position:absolute;
    z-index:1;
    bottom:calc( var(--chkWidth) + var(--mattingWidth) + 2px);
    display:block;
    min-width:100px;
    max-width:200px;
    background : #000;
    border-radius: 5px;
    padding : 5px;
    box-shadow: var(--frameShadow);
    font-size: 0.7rem;
    color : #fff;
    animation-name: fadeIn;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;  

}
.tooltip.right
{
    right:calc( var(--mattingWidth) + 2px);
    text-align: right;
}
.tooltip.left
{
    left:calc( var(--mattingWidth) + 2px);

}
.btnClass .balance
{
    font-size:0.65rem;
    padding-left: 0.2em;
}

@media (max-width: 768px)
{
    ul.tokens li {   min-height: auto; }
    ul.tokens input.chk { position:relative; right:initial; left:0; top:-5px;}
    #cart {
        --cartCol1Width : 70px;
        --cartPadding : 5px;
        --mgHalf : calc( var(--sideMargin) * 0.5 );
        --cartWidth : calc( 100vw - 2 * var(--mgHalf ) ) ;
        box-sizing : border-box;
        width: var(--cartWidth);
        max-width: var(--cartWidth); 
        min-width: 0;
        overflow : hidden;
        left: calc( 0 - var(--sideMargin) + var(--mgHalf) );
        right : auto;
        position : relative;
        top : 0;
        --cartCol2Width : calc( var(--cartWidth) - var(--cartCol1Width) - var(--cartCol3Width) - 2 * var(--cartPadding) - 2 * 4px -2 * var(--sideMargin) );
    }
    .cartTitle .unitSwitch, .cartTitle .currSel
    {
        float:  none;
    }
    .cartItem.active
    {   display : grid;
		grid-template-columns: var(--cartCol1Width) auto var(--cartCol3Width);
		grid-template-rows: auto auto;
		gap: 2px 6px;

    }

    .cartItem .colImg
    {
        display : block;
    }
    .cartItem .colInfo
    {   display : block;
        min-width: none;

    }
    .cartItem .colPrice
    {   display: block;
        min-width:none;
        align-self: end;
    }
    .cartPrice .right
    {   float: none;
        display: inline-block;
    }

    .cartTitle
    {   display : flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        flex-direction: row;
        max-width: 100%;
    }
    .cartTitle .unitSwitch, .cartTitle.currSel
    {   float : none;

    }
    .cartItems
    {   display : block;
        min-width : 0;

    }
    .cartItem select.formats, .cartItem select.shipCountry .cartPrice .textsmall, .cartItem .paper
    {
        font-size:0.8rem;        
    }
    .cartItem select.formats, .cartItem select.shipCountry
    {   min-width : 0;
        max-width: var(--cartCol2Width);
        width : 100%;
        box-sizing: border-box;
        overflow: hidden;

    }
    #walletContent
    {   margin-right: 0;

    }
}