:root
{
    --main-bg-color: #1d067a;
    
    --primary-bg-color: #BD9B60;
    --secondary-bg-color: #9B7841;

    --primary-text-color: #000000;
    --secondary-text-color: #FFFFFF;
    
    --primary-gradiant: linear-gradient( -14deg , #BD9B60 , #EDE3D3 , #BD9B60 );  

    --inputs-color: #E8F0FE;

    --shadow-color: #000000;
    --border-dark: #000000;
    --border-light: #FFFFFF;
}

@font-face
{
    font-family: Poppins;
    src: url( "./fonts/Poppins-Regular.ttf" );
}

@font-face
{
    font-family: Poppins;
    src: url( "./fonts/Poppins-Bold.ttf" );
    font-weight: bold;
}

.dark-text { color: var(--primary-text-color) ;}
.light-text { color: var(--secondary-text-color) ;}
.shadow-text { text-shadow: 2px 2px 2px #000000 ;}

input[type="text"]    { background-color: var(--inputs-color) ; border: 1px solid #000000 ; padding:4px; border-radius: 3px;}
input[type="password"]{ background-color: var(--inputs-color) ; border: 1px solid #000000 ;}
input[type="number"]  { background-color: var(--inputs-color) ; border: 1px solid #000000 ;}

a { text-decoration:none; }
a:hover { font-weight: bold; }

/* select { background-color: var(--inputs-color) ; border: 1px solid #000000 ;  } */

select { background-color: var(--inputs-color) ;  border: 1px solid #000000 ; padding:4px; border-radius: 3px; }

.border   { border: 1px solid #000000 ; }
.top-left { text-align: left; vertical-align: top; }

.align-center{ text-align: center; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

.font-size-smal   { font-size: 14px; }
.font-size-medium { font-size: 16px; }
.font-size-large  { font-size: 18px; }
.font-size-xlarge { font-size: 20px; }

.display-table { width: 100%; display: table; }
.display-table > div { display: table-row; }
.display-table > div > div { display: table-cell; }

.margin10 { margin: 10px; }

.blacktext {color:#000000};

/*- page editor css ---------------------------------------*/

/* MAIN PANEL */

.title
{
    width: 99%;
    color:#ffffff;
    text-align: center;
}

.drag-seg
{
    padding-top:20px ;
    padding-bottom:20px ;
    margin-bottom:20px; /* distance between segments */
    margin-top:20px;
    margin-left:4px;
    width: 99.6%;
    background-color: #b2c3ff;
}

.edit-segment-info-wraper
{
    width: 99.6%;
    height: auto;
    margin: 0px auto 0px auto;
    padding: 0px;
    background-color: var(--primary-bg-color); 
    color: var(--primary-text-color);      
    box-shadow: 2px 2px 2px 0px var(--shadow-color);
}


.edit-box-settings
{
    display: block;
    width: 99%;
    height: auto;
    padding: 5px;
    margin: 0px ;
    border: 1px solid #000000;
}

.boxes-container
{
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
}

.box
{
    padding-top:20px;
    background-color: #868686; 
    border: 4px solid #000000; 
    min-width: 300px;
    flex: 1 1 100px;
}

.box-panel
{
    background: linear-gradient( 0deg , #B8B5B5 , #7d7c7c, #B8B5B5 );
    border: 1px solid #000000;
}

.box-settings
{
    background-color: #868686;
    border: 1px solid #000000;
    color: #FFFFFF;
    padding: 0px 5px ; 
    height:30px;
    width: 97%;  
}

.sub-element-title { color:#FFFFFF;}

.cms-edit-panel
{
    display:none;
}

/* subbox panel for adding Text Image Video HTML */
.subbox-panel
{
    width: 100%;
    display:inline-flex;
}

/* final page elements divs wraper*/
.subbox-content-panel
{
    color:#000000;
    width: 99.1%;
    background-color: #b8b5b5 ;
    display:inline-flex;
    border: 1px solid #000000;
    margin: 2px;  
}

.subbox-addpanel
{
    background-color: #868686;
    border: 1px solid #000000;
}

.edit-box-backgroud-color { background-color: #b0b0b0;}

.box-margin-textbox   { width: 50px ;} 
.box-margin-left-div  { text-align: left ;}
.box-margin-right-div { text-align: right;}

/* for youtube video */
.ytcontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.ytvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-image
{
    display:inline-flex;
    max-width: 100%;
    font-size:16px;
    border: 1px solid #000000;
    padding:4px;
    margin-right:4px;
    background-color: #baddfa;
}

.remove-slider-div
{
    cursor: pointer;
    width:20px;
    height:20px ;
    font-size:26px;
    color:#000000;
    border: 1px solid #000000;
    background-color: #ff0000;
    border-radius:50%;
    margin-right: 4px;
}
.remove-slider-x
{
    position: relative;
    top:-9px;
    left:1px;
}

.primary-color-picker
{
    border: 1px solid #000000;
    width:25px;
    height:25px;
    margin-left:5px;
}


/*- page editor css end ------------------------------------*/

.marginY
{
    margin-right: 6px;
}

.paddingX { padding-left:10px;}
.padding4 { padding: 4px; border-radius: 5px;}
.padding3 { padding-left: 4px;}

.bgsButton
{
    /* width: 60px; */
    border-radius: 5px;
    border: 1px solid var(--border-dark);
    box-shadow: 2px 2px 3px var(--shadow-color);
    background: var(--primary-bg-color) ;
    color:var(--primary-text-color);
    padding: 2px 4px 2px 4px;
    margin: 2px 10px 2px 2px;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.color-and-bg-settings-list { display:inline-block; white-space: nowrap; padding:2px;}

.bgsButton:hover { background: var(--secondary-bg-color); }

.bg-setting-name { vertical-align: text-bottom; }


.color-sampler-gradient
{
    width: 98%;
    height: 45px;
    border: 1px solid #000000;
    margin:10px;
}

.inline { display: inline-flex;}
.shade-color-picer { display:inline-block; text-align:center; }
#shade-colors-list { height:65px;}

.size-max{ width:  100%; } 
.size20  { width:  20px; }
.size30  { width:  30px; }
.size40  { width:  40px; }
.size50  { width:  50px; }
.size60  { width:  60px; }
.size70  { width:  70px; }
.size80  { width:  80px; }
.size90  { width:  90px; }
.size100 { width: 100px; }
.size110 { width: 110px; }
.size120 { width: 120px; }
.size130 { width: 130px; }
.size140 { width: 140px; }
.size150 { width: 150px; }
.size160 { width: 160px; }
.size170 { width: 170px; }
.size180 { width: 180px; }
.size190 { width: 190px; }
.size200 { width: 200px; }
.size210 { width: 210px; }
.size220 { width: 220px; }
.size230 { width: 230px; }
.size350 { width: 350px; }


html { scroll-behavior: smooth; }

BODY
{
    width: 100%;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background-attachment: fixed;
    background-repeat: repeat;

    /* max-width: 99.8vw; */
    color: var(--primary-text-color); 
    font-family: Poppins;
    font-size: 20px;
    margin: 0px;
    padding: 0px;                                                    

/* background-image: url('images/back.jpg'); */
/*    background-size: cover; */
/*    background: linear-gradient( 15deg , #3bc5fc , #FFFFFF, #3bc5fc ); */
/*    background: var(--primary-gradiant); */
/*    background: #FFFFFF; */
}

.center-frame
{
    max-width: 99.8vw;
}

P
{
    font-family: Poppins;
    font-size: 18px;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px 5px 5px;
}

H
{
    font-family: Poppins;
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px 5px 5px;
}

#main-video
{
    width: 100%;
    height: auto;
}

.crop-video
{
    max-height: 92vh;
}

.main-bgcolor { background-color: var(--primary-bg-color); }

/* div in defined index.php to center main .content-wraper */
.center-frame
{
    width: 100%;
    height: auto;
    margin: 0px auto 0px auto ;
    /* box-shadow: -2px 0px 10px var(--shadow-color) , 2px 0px 10px var(--shadow-color) ; */
    padding: 0px;
    /* border-radius: 5px; */
}

/* total page wraper div defined in index.php // id = main-content-wraper-id //  */
.main-content-warper
{
    max-width: 99.8vw;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

/* main info page css */
.main-page-top
{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.picture-text
{
    position: absolute;
    z-index: 3;
    bottom:30px;
    right:30px;
}

.picture-image1
{
    width: 30vw;
    height: auto;
    position: absolute;
    z-index: 3;
    top:30px;
    right:30px;
}

.picture-image2
{
    width: 20vw;
    height: auto;
    position: absolute;
    z-index: 3;
    bottom:30px;
    left:30px;
}

.main-presentation-picture
{
    width:100%;
    height:auto;
}


.admin-panel
{
    width: 99%;
    height: auto;
    min-height: 40px;
    background-color: aliceblue;
    color: #000000;
    margin: 0px auto 0px auto;
    padding: 10px;
}

.admin-panel-content-buttons
{
    background-color: aliceblue;
    margin-bottom: 10px;
}

.segment-handler-wrapper
{
    min-width:400px;
    max-height:90vh;
    width: 800px;
}

.segment-handler-fieldset
{
    height:87vh;
}

.segments-list-scroll
{
    overflow-y:scroll;
    height:73vh;
}

.segment-handler-content-div
{
    padding: 5px;
}

.elm-width
{
    width:250px;
}

.content
{
    min-height: 100px;
}

#loggoin-info { display: none;}

/* main info page css end */

/* top page fixed menu */


/* wraps all fixed header content */
.top-header-wrapper
{
    box-shadow: 0px 6px 6px var(--shadow-color);
    z-index: 5;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    Margin: 0px;
    padding: 0px;
    max-width: 99.8vw;
    /* opacity: 0.8; */
}

/* wraps logos-divs and center-spacer 3divs in flex row */
.top-header-logos-wrapper
{
    max-width: 99.8vw;
    background: var( --primary-gradiant ); 
    /* background: var( --primary-bg-color );  */
    Margin: 0px;
    padding: 5px 0px 5px 0px;
    /* border-top: 1px solid #000000; */
    /* border-bottom: 1px solid #000000; */

}

.logo-spacer
{
    width: 100%;
    height: auto;
    Margin: 0px;
    padding: 0px;
}

.top-logo-img
{
    max-height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
}

.top-logo-container
{
    Margin: 0px;
    padding: 0px;
}

/* main content display div */
#page-content-wraper
{
    padding: 0px;
    margin: 0px;
}

.text-input
{
    font-family: Poppins;
    border-radius: 5px;
    font-size: 16px;
    padding: 3px 3px 3px 3px ;
    margin: 3px 1px 3px 1px;
}

.login-form
{
    width: 90%;
    padding: 10px;
}

.button
{
    border-radius: 5px;
    border: 1px solid var(--border-dark);
    box-shadow: 2px 2px 3px var(--shadow-color);
    background: var(--primary-bg-color) ;
    color:var(--primary-text-color);
    padding: 4px 10px 4px 10px;
    margin: 10px 5px 10px 5px;
    font-size: 20px;
    display: inline-block;
    cursor: pointer;
}

.button:hover  { background: var(--secondary-bg-color); }
.button:active { box-shadow: 0px 0px 0px var(--shadow-color); }

.line
{
    display: flex;
}

.center
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.simple-view-products-wraper
{
    width: 100%;
    display:inline-block;
    text-align: center;
    padding-top:20px;
    padding-bottom:20px; ;
    /* background: linear-gradient( 10deg , var(--primary-bg-color) , var(--secondary-bg-color) , var(--primary-bg-color) ); */
    /* background-image: url('./images/transparantback.png'); */
}

.product-page-foot
{
    width: 100%;
    height: 15px;
    border-bottom: 1px solid #000000;
    background: var(--secondary-bg-color);
    opacity: 0.97;
}

.product-page-filler
{
    width: 100%;
    border-bottom: 1px solid #000000;
    /* background: var(--primary-bg-color); */
    background-image: url('./images/metal-black-grid.jpg?v=2');
    opacity: 0.97; 
}

.hide-me { visibility: hidden; }

.simple-product-wraper
{
    vertical-align: text-top;
    width: 260px;
    height: 466px;
    margin: 10px;
    padding: 10px;
    display: inline-block; 
    border-style: solid; 
    border-width:1px;
    border-color:var(--border-dark);
    background-color: white;
    box-shadow: 6px 6px 6px var(--shadow-color) ;
    overflow: hidden;
}

.product-drop-location
{

    width: 15px;
    height: 430px;
    margin: 20px 0px 0px 0px;
    padding: 0px;
    border: pointer1px solid #000000;
    background-color: var(--secondary-bg-color);
    box-shadow: 6px 6px 6px var(--shadow-color) ;
    border-radius: 10px;
    overflow: hidden;
    display:none;
}

.product-image-wraper
{
    width: 260px;
    height: 280px;
    position: relative;
}

.product-image
{
    max-width: 100%;
    max-height: 100%;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; 
}

.product-simple-text
{
    color: #000000;
    padding: 3px;
    max-width: 100%;
    height: 68px;
    max-height: 68px;
    font-size: 16px;
    overflow: hidden;
}

.product-simple-price
{
    color: #000000;
    padding: 3px;
    max-width: 100%;
    max-height: 20px;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
}

.product-simple-price-other
{
    color: #000000;
    padding: 3px;
    max-width: 100%;
    height:50px;
    max-height: 50px;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
}


.info-buy-wraper
{
    width: 100%;
    height: 60px;
    position: relative;
}

.product-info-image
{
    width: 45px;
    height: 45px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; 
    position: relative;
}

.product-info-image:hover
{
    opacity: 0.8;    
}

.iframe
{
    border: 1px solid #000000;
    padding:5px;
    margin-right:15px;
    margin-left:15px;
    border-radius: 10px;
}

/*---------------------------------------------------------------- top menu */
/*
#menu-seek { display: none; }
#menu-cart { display: none; }
#menu-test { display: none; }
*/

#menu-destination { display: none; }
#menu-test        { display: none; }

.top-menu-split-spacer
{
    width:100%;
}

.top-menu-button
{
    margin: 0px;
    padding: 0px;
}

.top-menu-back
{
    margin:0px;
    padding-top:2px;
    height: 40px;
    max-height: 40px;
    background-color: var(--primary-bg-color);
    /* border: 1px solid #000000; */
}

.top-menu-padding
{
    min-width: 15px;
}

/*
.top-menu-button:hover
{
    background-color: var(--secondary-bg-color) ;
    cursor: pointer;     
}
*/

.menu-icon
{
    width: auto;
    height: 28px;
    max-height: 28px;
    margin: 0px;
    padding: 0px 12px 0px 0px;
    position: relative;
    top: 6px;
}

.main-menu-icon
{
    width: auto;
    height: 28px;
    max-height: 28px;
    margin: 0px;
    padding: 6px 5px 0px 0px;
}

.menu-icon:hover
{
    opacity:0.6;
    cursor: pointer;
}

.product-menu-icon
{
    width: auto;
    height: 18px;
    max-height: 18px;

    margin: 0px;
}

.product-menu-icon:hover
{
    opacity:0.6;
    cursor: pointer;
}

.arrow-icon
{
    width: 16px;
    height: 16px;
    margin: 0px;
    padding: 0px 5px 0px 5px;
    position: relative;
    top: 4px;
}
/*------------------------------------------------------------------ content menu */
.content-menu-back
{
    opacity:0.8;
}


.content-menu-wraper
{
    text-align: right;
    white-space: nowrap;
}

.content-menu-selector
{
    display: inline-block;
    padding: 0px 5px 0px 5px;
}

.content-menu-selector:last-child
{
    margin-right: 20px;
}

.content-menu-text
{
    color: var(--primary-text-color);
    vertical-align: middle;
    font-size: 15px;
}

.content-menu-icon:hover
{
    opacity:0.7;
}

.content-menu-text:hover
{
    color: var(--secondary-text-color);
    cursor: pointer;  
}

#content-menu-dropdown-content
{
    width: auto;
    height: auto;
    padding: 0px ;
    margin: 0px; 
    max-width: 300px;
    background-color: var(--primary-bg-color);;
    color: var(--primary-text-color);
    font-size: 12px;
    position: absolute;
    display: none;
    box-shadow: 6px 6px 6px var(--shadow-color) ; 
    cursor: pointer;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #000000;
    z-index: 6;    
}


/*------------------------------------------------------------------ main menu */


.main-menu-back
{
    padding: 0px;
    background-color: var(--primary-bg-color);  
    white-space: nowrap;
}

.main-menu-text
{
    color: var(--primary-text-color);
    display: inline-block; 
    text-align: left;
    font-size: 20px;
}

.main-menu-selector
{
    display: inline-block;
    padding: 0px 5px 0px 5px;
}

.main-menu-selector:hover
{
    background-color: var(--secondary-bg-color);
    cursor: pointer;  
}

#main-menu-size-id
{
    display:inline-block;
}

#content-menu-width
{
    display:inline-block;
}

/*------------------------------------------------------------------ main menu end*/
/*--------------sub menu -*/

#burger-menu-items-container 
{
    width: auto;
    height: auto;
    padding: 0px ;
    margin: 0px; 
    max-width: 300px;
    background-color: var(--primary-bg-color);;
    color: var(--primary-text-color);
    font-size: 12px;
    position: absolute;
    display:none;
    box-shadow: 6px 6px 6px var(--shadow-color) ; 
    cursor: pointer;
    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #000000;
    z-index: 6;
}

#sub-menu-items-div
{
    width: auto;
    height: auto;
    padding: 0px ;
    margin: 0px; 
    max-width: 400px;
    background-color: var(--secondary-bg-color);;
    color: var(--primary-text-color);
    font-size: 12px;
    position: absolute;
    display: none;
    box-shadow: 6px 6px 6px var(--shadow-color) ; 
    cursor: pointer;
    max-height: 62vh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #000000;
    z-index: 6;
}


.burger-menu:hover
{
    background-color: var(--secondary-bg-color);
    cursor: pointer;    
}

.sub-meny-item:hover { background-color: var(--primary-bg-color); }


.sub-meny-item
{
    display: block;
    color: var(--secondary-text-color);
    width: 100%;
    text-align: left;
    margin: 0px ;
    padding: 5px 10px 5px 10px;
    font-size: 20px;
}

/*--------------sub menu end -*/

/*---------------------------------------------------------------- side cart css */

.cart-counter:hover
{
    cursor: pointer;
}

.cart-counter
{
    position: absolute;
    border-radius:50%;
    background-color: #FF0000;
    color:#FFFFFF;
    margin: 0px;
    padding: 1px 6px 1px 6px;
    z-index: 4;
    opacity: 0.9; 
    display:none; 
    font-weight: bold;
    font-size: 11px;
}

.cart-total-wraper
{
    margin-top:0px;
    padding:0px;
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--border-dark);
    width: 99%;
}

.cart-product-picture
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
}

.cart-product-picture-div
{
    margin: 0px 0px 0px 0px;
    padding: 15px 5px 5px 5px;
    width: 80px;
}

.cart-destination-wraper
{
    padding: 3px;
    margin-top: 0px 0px 0px 0px;
    padding:5px;
    background-color: #ffffff;
}

.cart-destination-title
{
    text-align: left;
    padding:3px;
    background-color: var(--secondary-bg-color);
    color: var(--primary-text-color);
    box-shadow: 2px 2px 2px var(--shadow-color) ;
    border: 1px solid var(--border-dark) ;
    font-size: 16px;
}

.cart-item-title
{
    color: #000000;
    margin: 0px 0px 0px 0px;
    padding: 5px 5px 5px 14px;
    text-align:left;
}

.cart-image-content-left-right
{
    margin: 4px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 99%;
    background-color: #FFFFFF ;
    border-bottom: 1px dashed var(--border-dark) ;
}

.dotted-line
{
    border-top: 1px dashed var(--border-dark) ;
    border-bottom: 1px dashed var(--border-dark) ;  
}

.cart-color-size-amount
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 14px;
    width: 92%; 
}

.cart-inputs 
{
    height:18px;
    white-space:nowrap;
    color:#000000;
    font-size:15px;
    margin: 0px 4px 0px 0px;
    padding: 2px 2px 2px 2px;
    border-radius: 4px;
}

.remove-size-icon
{
    width: 15px;
    height: 15px;
    margin: 0px;
    padding: 9px 4px 0px 0px;
}

.remove-size-icon:hover
{
    opacity:0.6;
    cursor: pointer;
}

.item-size-amount-wraper
{
    padding:4px;
    margin:2px;
    border-radius: 5px;
    background-color:#F5F5F5;
    border: 1px solid #e6e6e6;
    display: inline-flex;
}

/*---------------------------------------------------------------- side cart css end */

.sidemenu-wraper
{
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
    background: var( --primary-bg-color );
    overflow: auto;
}

.sidemenu-heading
{
    height: 40px;
    max-height: 40px;
    background: var( --primary-gradiant );
    display:flex;
    align-items: center;
    justify-content: center;
/*    color: var( --primary-text-color ); */
    background: var( --secondary-bg-color );
    font-size: 0.8em;
    font-weight: bold;
    border-bottom: 1px solid #000000;
}

.sidemenu-content-wraper
{
    width: 100%;
    height: auto;
    background: var( --primary-bg-color );
    color: var( --primary-text-color );
}

.sidemenu-content:hover
{
    background: var( --secondary-bg-color );  
}

.sidemenu-content
{
    width: 90%;
    height: 35px;
    max-height: 35px;
    display: flex;
    padding-left: 10px; 
    padding-top: 14px; 
    color: var( --primary-text-color );
    font-size: 16px;
    border-bottom: 1px solid #000000;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
}

/* file list styles */

.file-handler-container
{
    width:80vw;
    height:85vh;
}

.file-list
{
    border: 1px solid #000000 ;
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    overflow:auto;
    padding: 10px 10px;
}

.select-box
{
    border: 1px solid #000000 ;
    width:18px;
    height:18px;
    margin:5px;
}

.file-in-filelist:hover
{
    background-color: #b0b0b0;
}

/* file list styles end */
.msg-text-title
{
    font-size: 16px;
}

.msgs-textbox
{
    width:95%;
    height:90px;
    font-size: 18px;

}

.msg-textsize
{
    width:40px;
    font-size: 16px;
}

.segment-select-hover:hover
{
    background-color: #b0b0b0;    
}

/* ----------------------------------------------- */

.settings-panel
{
    background-color: #FFFFFF;
    color:#000000;
    border-radius: 10px;
    border: 1px solid #000000;
    margin: 20px 10px 20px 10px;
    padding: 10px;
    width: auto;
    height: auto;
}

.seek-shop-text-input
{
    font-size:16px;
}

.webshop-textbox-text
{
    font-size:16px; 
    font-weight: bold;
    color: #000000;
    width: 98%;
}

.webshop-settings-wraper
{
    color: #000000;
    padding: 8px 15px 8px 15px;
    background-color: #e7e7e7 ;
    font-size: 18px;
    border: 1px solid #000000;
    border-radius: 5px;
}

.webshop-type-options
{
    padding: 10px;
    border: 1px solid var( --secondary-text-color );
}


.webshop-textarea
{
    height:55px;
    font-size:16px; 
    font-weight: bold;
    border-radius: 3px;
    background-color: var(--inputs-color) ;
    width: 98%;
    color: rgb(65, 65, 65);
}

.shop-settings-tab
{
    margin-left: 60px;
}

/*------------------------------------------------------------------- old stuff */

.supplier-info-text
{
    margin-left: 20px;
}

.top-margin-20
{
    margin-top:20px;
}

.closed-supplier-form
{
    border-radius: 10px;
    border: 1px solid #000000;
    margin: 10px 10px 20px 10px;
    Padding: 5px;
    width: 98%;
    height: auto;
}

.new-supplier-div
{
    display: none;
}

.supplier-info
{
    background-color:#FFFFFF;
}

.supplier-text-input
{
    font-size:16px;
}

.supplier-textarea
{
    background-color:lightblue;
    width:99%;
    height:50px;
}

.supplier-info-to-orderer-div
{
    margin-top: 20px;
    margin-bottom: 20px;
}

/*----------------------------*/

.products-edit-page
{
    width:98%;
    height:auto;
    display: grid;
    grid-template-columns: 200px 200px 1fr;
}

.edit-product-panels
{
    border:1px solid #000000;
    padding:10px; 
    overflow: hidden;
}

.product-panel-list-item
{
    white-space: nowrap; 
}

/*---------------------*/

#display-info-messages-wrapper
{
    padding: 2px 10px 2px 10px;
    background-color: var(--secondary-bg-color);
    color: var( --primary-text-color );
    /* border-top: 1px solid black; */
    display: none;
}

.remove-selected-user
{
    background-color: var(--primary-bg-color);;
    color: var( --secondary-text-color );;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0px 10px 0px 10px;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 50%;
    font-size:20px;
    font-weight: bold;
    height:30px;
    max-height: 30px;
}

.remove-selected-user:hover
{
    opacity:0.6;
    cursor: pointer;
}


/*-------------------------------------*/

.edit-user-textbox
{
    width:98%;
    font-size: 20px;
    margin-bottom:10px;
}

.edit-user-name
{
    background-color: lightgrey;
    color: #000000;
    border: 1px solid rgb(0, 0, 0);
    border-radius:8px;
    padding:10px;
    margin-top: 10px;
}

.edit-user-name:hover
{
    background-color: rgb(190, 190, 190);
    cursor: pointer;    
}


.administrators-list-item
{
    background-color: rgb(212, 209, 209);
    border: 1px solid rgb(0, 0, 0);
    color: #000000;
    margin-bottom: 10px;
    padding:15px;  
    margin: 0px 10px 0px 10px;
    border-radius: 0px 0px 8px 8px;
    display: none;
}

.user-edit-panel-wraper
{ 
    margin-top: 10px;   
}

.user-edit-pane-textarea
{
    height:55px;
    font-size:20px; 
    font-weight: bold;
    border-radius: 3px;
    background-color: var(--inputs-color) ;
    width: 98%;
    color: rgb(65, 65, 65);
}

/*-----------------------------------------*/

/*
.order-history-wraper
{
    border: 5px solid rgb(255, 0, 0);   
}
*/

.order-history-order-wraper
{
    border: 4px solid lightgrey;  
    width: 80%;
    margin: 0px auto 20px auto;
    border-radius: 10px 10px 10px 10px;
    background-color: lightgrey;
}

.order-history-name-wraper
{
    border: 1px solid rgb(0, 0, 0);  
    width: 80%;
    margin: 0px auto 0px auto;
    border-radius: 10px 10px 10px 10px;
    background-color: rgb(162, 162, 162);
    padding:10px;
}

.product-history-title
{
    background-color: lightgrey;
    color: black;
    border-radius: 5px 5px 5px 5px;
    padding:10px;
    overflow: hidden;
}

.product-history-item
{
    background-color: #e7e7e7;
    color: black;
    padding:10px;
    border-bottom: 1px solid #000000;
    overflow: hidden;
}

.hsize0 { width:5%;}
.hsize1 { width:65%;}
.hsize2 { width:10%;}
.hsize3 { width:20%;}

.order-statistics-wraper
{
    border: 1px solid #000000;
    background-color: lightgrey;
    border-radius: 10px 10px 10px 10px;   
}

.statistics-top-bottom
{
    background-color: lightgrey;
    color: black;
    padding:10px;
    overflow: hidden;
    width: auto;
    font-size: clamp(12px, 3vw, 22px);    
    margin: 0px auto 0px auto;
}

.statistics-list-wrapper
{
    table-layout: auto;
    width: 90%;
    background-color: lightgrey;
    color: black;
    padding:10px;
    font-size: clamp(12px, 2vw, 20px); 
    margin: 0px auto 0px auto;
}

.statistics-content:hover
{
    color: rgb(150, 150, 150);
}

.statistics-content
{
    border-bottom: 1px solid #000000;
    padding:5px;
}

.heading { border-radius: 10px 10px 0px 0px; }
.fotter { border-radius: 0px 0px 10px 10px; }


.stat-modal
{
    width:85vw;
    max-height: 70vh;
    overflow: auto;
}

/*-----------------------------------------*/

.menus-headings
{
    color:#000000;
    padding:5px 10px 0px;
    margin:5px 10px 0px;
}

.categories-menu-wraper
{
    background-color: #FFFFFF;
    padding:5px;
    margin:5px;
    display:inline-block;      
}

.categories-menu-item
{
    border: 1px solid #000000;
    background-color: var(--secondary-bg-color);
    padding:5px;
    margin:5px;
    border-radius: 10px 10px 10px 10px;       
}

.menus-textbox
{
    font-size: 18px;
    width:160px;
}

/*------------------------------------------------------*/

#modal-product-picture-id
{
    display:block;
    width: 80%;
    height: 80%;
    max-height: 80%;
    max-width: 50vh;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

.modal-product-picture-wraper
{
    min-width: 30vw;
}

.modal-product-wraper
{
    width:80vw;
    max-height:80vh;
    display:flex;
    flex-wrap: wrap;
    min-width: 300px;
    overflow-y: auto;
}

.modal-product-panel
{
    padding:10px;
    flex-grow: 1;
}

.modal-product-title
{
    color:#000000;
    padding-top: 5px;
    font-size:15px;
}

.edit-product-textbox
{
    color:#000000;
    font-size:15px;
    width:90%;
    border-radius: 3px;
    padding:3px;
    background-color: var(--inputs-color);

}

.modal-product-textarea
{
    color:#000000;
    font-size:15px;
    width:90%;
    height:50px;
    background-color: var(--inputs-color);
    border-radius: 3px;
    padding-top:0px;
}

.pack-size
{
    display: inline;
    padding-left: 10px;
}

.modal-amount-selection
{
    display: inline-block;    
}

.modal-frame-amount
{
    margin:3px;
    padding:3px;
    border: 1px solid #000000; 
    width:88%;
    border-radius: 3px;
}

.modal-menu-select
{
    font-size: 15px;
    width:200px;
}

.testy
{
    display:flex;
    flex-wrap: wrap;
}

#modal-menu-selector-on-off
{
    visibility: hidden;
}

#modal-display-price-on-off
{
    visibility: hidden;
}

.modal-buttons
{
    margin-top:5px;    
}

.products-path
{
    background-color:#FFFFFF;
    border: 1px solid #000000;
    box-shadow: 6px 6px 6px var(--shadow-color) ;
    color:#000000;
    width:90%;
    margin: 0px auto 10px auto;
    border-radius: 15px 15px 15px 15px;
}

.modal-prod-info
{
    padding-bottom: 10px ;
    color:#000000;  
}

.modal-customer-product-info-wraper
{
    min-width: 40vw;
    max-width: 600px;
}

.login-message
{
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    color:#000000;
}

/*---------------------*/
.checkout-wraper
{
    padding:10px;
    background-image: url('./images/transparantback.png');
}

.checkout-order-wraper
{
    margin-top: 8px;
    padding:5px;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #000000;   
}

.checkout-message-to-customer
{
    border: 1px solid #000000;
    border-radius: 5px;
    margin-top: 15px;
    padding:10px;
    background-color: #FFFFFF;
    color: red;
}

.checkout-message-textarea
{
    background-color: var(--inputs-color) ;
    border-radius: 5px;
    border: 1px solid #000000;
    font-size:20px;
    font-weight: bold;
    width:95%;
    height:64px;
    margin-left: 10px;
    margin-right: 10px;
}

.orderer-information
{
    font-size: 18px;
    margin-top:10px;
    margin-left:15px;
    /* border-bottom: 1px solid #f1f1f1; */
}

.cart-user-info
{
    font-size: 14px;
    margin-top:5px;
    margin-left:10px;
}

.checkout-message-title
{
    width: 260px;
    margin-top: 10px;
    margin-left:15px;
    padding:3px 10px 3px 10px;
    /*border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;*/
    font-size:18px;
    color: #000000;
    /* border-top-left-radius: 7px;
    border-top-right-radius: 7px; */
}

.checkout-order-title
{
    text-align: center;
}

.checkout-custom-customer-settings
{
    /*
    border: 1px solid #000000;
    border-radius: 5px;
    margin-top: 15px;
    */
    padding:10px;
    background-color: #FFFFFF;
    color: black;   
}

.checkout-payment-method-wraper
{
    border: 1px solid #000000;
    border-radius: 5px;
    margin:10px;
    padding:10px;
    background-color: #FFFFFF;
    color: black;   
}

.checkout-cart-items-wraper
{
    margin-top: 10px;
}

.checkout-cart-wraper
{
    /*
    border: 1px solid #000000;
    border-radius: 5px;
    margin-top: 15px;
    */
    padding:10px;
    background-color: #FFFFFF;
    color: black;   
}

.checkout-textbox
{
    width:98%
}

#force-contact-id
{
    display: none;
}

#force-marking-id
{
    display: none;
}

.checkout-text-inputs
{
    width:98%;
    font-size: 16px;
    font-weight: bold;  
}

/*---------------------------------------------------*/
.checkout-delivery-methods
{
    display: flex;
    flex-wrap: wrap;
}

.checkout-delivery-method-wraper
{
  margin:5px;
  padding:8px;
  border: 1px solid #000000;
  border-radius: 5px; 
  flex-grow: 1;
}

.checkout-delivery-method-item
{
    display: inline-block;
    text-align:left;
    vertical-align:top;
    padding-right:10px;
    font-size: 16px;
}

/*-----------------------------------------*/

.delivery-method-text-area
{
    margin-top: 10px;
    margin-right: 10px;
    background-color: lightblue;
    width:180px;
    height:80px;
    font-size: 18px;
    color: #000000;
}

.delivery-methods-title
{
    margin-top:10px;
    margin-bottom:10px;
}


.delivery-methods
{
    display: flex;
    flex-wrap: wrap;
}

/*---------------------------------------------------*/

.user-information
{
    margin-top: 10px;
}

.add-checout-additional-textbox-wraper
{
    padding:5px;
    margin:5px;
    border: 1px solid #000000;
    border-radius: 5px; 
    background-color: lightgrey; 
}

.add-checout-additional-textbox-name
{
    width:250px;
}



.checkout-payments-methods-selections
{
    display: inline-flex;
    flex-wrap: wrap;
    display: none;
}

.payment-option-image
{
    max-height: 40px;
}

.checkout-payments-method
{
    display: none;
    width: 260px;
    padding:5px;
    margin:5px;
}

#payson-frame-id
{
    display: none;
}

.swish-payment-information
{
    border: 1px solid #000000;
    border-radius: 5px;
    margin:10px;
    padding:10px;
    background-color: #FFFFFF;
    color: black;
    display:none;
}

.swish-chekout-amount
{
    display: inline-block;
    border-bottom: 1px solid #000000;
    padding:5px;
    color: black;
}

.checkout-ordertotal
{
    margin-left: 10px;
    padding:5px 10px 5px 10px;
    border: 1px solid #000000;
    border-radius: 5px;
}

.thx-page-wraper
{
    text-align:center;
    border: 1px solid #000000;
    height:45vh;
    border-radius: 5px;
    margin:10px 20px 10px 20px;
    padding:10px;
    background-color: rgb(255, 255, 255);
    color: black;
    font-size: 24px;
}

.thx-spacer{ height:18vh;}
.thx-spacer-5{height:5px;}

.user-selection:hover
{
    opacity: 0.5;
}

.prod-admin-prodwarap
{
    color:#000000;
    border: 1px solid #000000;
    border-radius: 5px;
    background-color: rgb(223, 223, 223);
    padding: 10px;
    margin: 10px;
}

.prodadmin-company-name
{
    border: 1px solid #000000; 
    margin: 5px 0px 10px 0px;
    padding: 5px; 
    border-radius: 5px;
    background-color: #B8B5B5;
}

.prod-admin-prodpic
{
    height:50px;
    max-height: 50px;
}

.prodadmin-prodpic
{
    width: auto;
    height: auto;
    max-height: 180px;
    max-width: 210px;
}

.prodadmin-prodpic-wrap
{
    width: 200px;
    max-width: 200px;
    background-color: #FFFFFF;
    padding:10px;
    border: 1px solid #000000;
}


.prodadmin-product-title
{
    width:210px;
    vertical-align:top;
    padding-left: 10px;

    /* border: 1px solid #000000; */
}

.prodadmin-grid-container
{
    display: grid;
    grid-template-columns: 220px auto ;
}

.prodadmin-grid-item
{
    display: inline-grid;    
}

.prodadmin-product-textbox
{
    color:#000000;
    font-size:15px;
    width:90%;
    border-radius: 3px;
    padding:3px;
    background-color: var(--inputs-color);
}


.order-deliverd-button
{
    /* width: 60px; */
    border-radius: 5px;
    border: 1px solid var(--border-light);
    box-shadow: 2px 2px 3px var(--shadow-color);
    background: var(--secondary-bg-color) ;
    color:var(--primary-text-color);
    padding: 2px 4px 2px 4px;
    margin: 2px 10px 2px 12px;
    font-size: 14px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}

.user-button
{
    margin-left: 6px;
}

.user-button:hover
{
    opacity:0.8;
}

.user-icon
{
    position: absolute;
    margin-top: 5px;
    margin-left: 8px;
    height:23px;
}

.user-icon:hover
{
    opacity:0.8;
}

.user-login-too-icon
{
    margin-left: 38px;    
}

.user-grid-container
{
    display: grid;
    grid-template-columns: 25% auto ;
}

.user-grid-item
{
    display: inline-grid;
}

.categorie-grid-item
{
    margin-left: 7px;
    margin-right: 7px;
    padding-left: 5px;
    border-left: 1px solid #000000;
}

.checkbox-categories
{
    transform: scale(1.5);
}
.print-product-page-link
{   
    padding-top: 15px;
}

.print-product-page-link:hover
{
    opacity:0.5; 
    cursor: pointer;   
}

.prod-list-head
{
    background-color: lightgray;
    padding: 4px;
    text-align: left;
}

.prod-list-item
{
    font-weight: normal;
    padding: 4px;
    text-align: left;
}


/*
.prodadmin-product-textbox
{
    color:#000000;
    font-size:15px;
    width:90%;
    border-radius: 3px;
    padding:3px;
    background-color: var(--inputs-color);
}

*/