@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');

:root {
--color-text: #555555;
--color-text-a: #555555;
--color-gray: #555555;
--color-gray-deep: #362F2F;
--color-red: #C93F3F;
--color-point: #4D95A8;
--color-footer: rgba(217, 239, 244, 0.54);
--color-line: #3F9FC9;
--main-color-green:green;
}
body {font-family: 'Montserrat', sans-serif;
 cursor:default; 
 -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;      
}

::-webkit-scrollbar {    width: 5px;}
::-webkit-scrollbar-thumb {    border-radius: 10px;    -webkit-box-shadow: inset 0 0 20px rgba(120,120,120,1);}
::-webkit-scrollbar-track {    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.2);    border-radius: 10px;}


header nav{ font-size:12px; line-height: 15px; }
*:focus {outline: none;}

a { color: var(--color-text-a); }
a:hover { color: var(--color-gray-deep); }
.menu-line { border-bottom: 0.5px solid var(--color-gray); border-top: 0.5px solid var(--color-gray);     background: #fff;}
.uk-search { background:#fff; }
.uk-search-navbar .uk-search-input, .uk-12px {font-size: 12px;}
.uk-drop {width: 180px;}
.select-lang {line-height: 25px;min-width: 65px;}
.select-cooperation, .search-result {line-height: 25px;}
.uk-search-navbar .uk-search-input {height: 30px;border-bottom: 1px solid var(--color-gray);}
.uk-text-tiny {font-size: 10px;}
.uk-heading-large { font-family: 'Nanum Gothic', sans-serif; color:var(--color-text); font-weight: 400;}
.uk-box-small-home { width: 36px;height: 36px; margin-right: 35px; border: 3px solid #FFF;box-shadow: 0 0 2px #FFF;    min-width: 36px;}
.uk-box-small { width: 36px;height: 36px; margin-right: 35px; cursor: pointer;border: 3px solid #FFF;box-shadow: 0 0 2px #FFF;    min-width: 36px;}

.uk-box-small-color { width: 26px;height: 26px; margin-right: 5px; cursor: pointer;border: 3px solid #FFF;box-shadow: 0 0 2px #FFF;}
.active-circle {border: 3px solid #FFF;box-shadow: 0 0 2px #000;height: 36px;width: 36px;}
.active-circle-small {height: 16px;width: 16px;}
.uk-background-gray { background:var(--color-gray); color:#fff;}
.uk-background-white { background:#fff;}
.a-more { font-weight: bold;min-width: 300px; color:#fff; }
.dotnav-home li {border: 1px solid #000; width: 20px;height: 20px;border-radius: 100px; padding: 0px;margin: 25px 0px; cursor: pointer;}
.dotnav-home { list-style: decimal-leading-zero; color: var(--color-gray); border: 0px;}
.dotnav-home>.uk-active>* {background-color: var(--color-gray);    width: 21px;    height: 21px;}
.dotnav-home>*>* {border: 0px;}
.dotnav-home a {width: 20px;height: 20px;background-color: rgba(0,0,0,0);}
.uk-button-default:focus, .uk-button-default:hover {background-color: var(--color-gray-deep);color:#ffffff;}
.uk-border { border:1px solid var(--color-gray); }
.uk-slider-dot {background: #fff;border: 1px solid var(--color-gray);border-radius: 100px; z-index: 2;}
a.uk-slider-dot span { padding: 7px; }
.bg-gradient-r { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);     position: absolute;    width: 120px;    height: 100%;     right: 0; z-index: 1;}
.bg-gradient-l { background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);     position: absolute;    width: 120px;    height: 100%;     left: 0; z-index: 1;}
.uk-hr, hr {border-top: 1px solid var(--color-gray); }
footer { background-color: var(--color-footer); }
.search-city {    border: 0px;    border-bottom: 1px solid var(--color-gray); padding-left: 25px;}
.mob-menu { display: none; position: absolute;left: 0;top: 0;width: 100%;height: 100vh;background: #fff;text-align: center;line-height: 22px;}
.mob-menu-show { display: block; }
#basket th { border-bottom: 1px solid var(--color-gray); color:#9F9F9F;     text-transform: none; font-weight: 500;font-size: unset;}
.basq {border: 0.5px solid #3E3F43;box-sizing: border-box;}
.deletebasket { cursor: pointer; }
.basketcount {right: -14px;top: -10px; font-size: 10px;min-width: 20px;height: 20px;background: var(--color-red);}
.comparecount {right: -14px;top: -10px; font-size: 10px;min-width: 20px;height: 20px;background: var(--color-red);}
a.cat-link:hover, a.cat-link-select, a.cat-link-select:hover { text-decoration: none;position: relative; }
a.cat-link-select { font-weight: 400; }
a.cat-link::before {     content: ' ';border-bottom: 5px solid var(--color-line); position: absolute;width: 0px;top: 25px;}
a.cat-link:hover::before {     content: ' ';border-bottom: 5px solid var(--color-line); position: absolute; width: 130px;top: 25px; -webkit-transition: width 0.5s ease-in-out;-moz-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out;}
a.cat-link-select::before {     content: ' ';border-bottom: 5px solid var(--color-line); position: absolute; width: 130px;top: 25px; -webkit-transition: width 0.5s ease-in-out;-moz-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out;}
.asort a {position: relative;}
.asort a:hover::before {    content: ' ';border: 1px solid var(--color-gray);width: 6px;height: 6px;display: block;position: absolute;top: 4px;left: -14px;border-radius: 16px; background: var(--color-gray); }
.asort a:hover::after { content: ' ';border: 1px solid var(--color-gray);width: 10px;height: 10px;display: block;position: absolute;top: 2px;left: -16px;border-radius: 16px;}
.asort a:before { content: ' ';border: 1px solid var(--color-gray);width: 10px;height: 10px;display: block;position: absolute;top: 2px;left: -16px;border-radius: 16px;}
.asort a.aselect:before {    content: ' ';border: 1px solid var(--color-gray);width: 6px;height: 6px;display: block;position: absolute;top: 4px;left: -14px;border-radius: 16px; background: var(--color-gray); }
.asort a.aselect:after { content: ' ';border: 1px solid var(--color-gray);width: 10px;height: 10px;display: block;position: absolute;top: 2px;left: -16px;border-radius: 16px;}
.a-morecat {min-width: 300px; text-transform: none !important;}
.uk-pointer { cursor: pointer; }
.pids:hover .pidshover { display: block !important; transition: all 0.5s ease-in-out;}
.pids:hover .head_image { opacity: 0;}
.pids:hover .uk-h4 { opacity: 0;}
.conf_name { font-size: 14px; }
.pidshover img { max-height: 340px; }
.uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before { content: "›";}
#pid-tab li a {font-family: Montserrat;font-size: 20px;font-style: normal;font-weight: 500;line-height: 24px;letter-spacing: 0em;text-align: left; text-transform: none;}
#pid-tab>.uk-active>a {color: #333;border-bottom: 5px solid var(--color-line);}
#pid-tab::before {border-bottom: 0px;}
.slidenav { color: var(--color-gray);    border: 1px solid var(--color-gray);    border-radius: 100px; }
.slidenav svg { transform: scale(0.5);}
.uk-offcanvas-bar {background: #fff;color:#000;}
.uk-offcanvas-bar .uk-close {color: #999;}
.uk-offcanvas-bar>* {color: #000;}
.uk-offcanvas-bar .uk-h3, .uk-offcanvas-bar .uk-h5, .uk-offcanvas-bar .uk-h4, .uk-offcanvas-bar a, .uk-offcanvas-bar a:hover, .uk-offcanvas-bar .uk-accordion-title, .uk-offcanvas-bar .uk-accordion-title:hover, .uk-offcanvas-bar .uk-accordion-title:focus {color: #000;}
.uk-offcanvas-bar .uk-accordion-title { font-size: 20px; }
.uk-offcanvas-bar .uk-h5 { font-size: 15px; }

.uk-offcanvas-bar .uk-accordion-title::before {filter: invert(1);}
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
    background-color: #3F9FC9;
}
#mob-menu { z-index: 99; }
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}


input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
   border:0px;
  border-radius: 30px;
  background: var(--color-gray);
  cursor: pointer;
  margin-top: -6px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  }

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: rgba(100,100,100,0.1);

}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgba(100,100,100,0.1);
}
.lineheight {     line-height: 20px; }


#pidgal .uk-active>* {
    width: 21px;
    height: 21px;
}

#interiors .uk-active>* {
    background-color: var(--color-gray);
    width: 21px;
    height: 21px;
}


.uk-border-rounded { border-radius: 10px; }
.selectstar { cursor: pointer; }
.selectstarselect svg polygon { fill:#F2C94C; }
.selectstarselect svg polygon { stroke:#F2C94C; }

.uk-notification-message-danger {background: rgba(255,0,0,1);color: #fff;padding: 20px;font-size: 1em;}
.uk-notification-message-danger h3, .uk-notification-message-success h3{ color: var(--color-white); }
.uk-notification-close { color: var(--color-white);  }

.uk-notification-message-success { background: var(--main-color-green); color: #fff; padding: 20px; font-size:1em;   }
.uk-notification-message-success h2 { color: #fff; }
.select_color_name {line-height: 17px;}
.add_opora_color { width: 50px; height: 50px; }
#select_color, #select_opora,#select_opora_color, .#select_canvas_type, .a-minus, .a-plus { cursor: pointer; }
#basket-form .uk-box-small {     cursor: default; }
#order_tab >*>a{ text-transform: none; text-align: left;margin-top: 2px;    margin-right: 20px;margin-left: 28px;}
#order_tab span {    background: #333;
    padding: 6px;
    width: 10px;
    color: #fff;
    border-radius: 100px;
    min-width: 24px;
    display: inline-block;
    text-align: center;    float: left;    margin-right: 5px;}


#order_tab li:after { content: ' ';
    position: absolute;
    left: 20px;
    top: 0px;
    background: #333;
    width: 32px;
    height: 28px;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    padding-top: 4px;}

#order_tab::before {
    border-bottom: 0px solid #e5e5e5;
}

#order_tab li { opacity: 0.5; }
#order_tab li.uk-active { opacity: 1; }
#order_tab li.uk-activestep { opacity: 1; }


#order_tab .li1:after { content: '1'; }
#order_tab .li2:after { content: '2'; }
#order_tab .li3:after { content: '3'; }

#order_tab>.uk-active>a {
    border-color: #fff;
}

#forders .uk-input { border: 0px; border-bottom: 1px solid var(--color-gray); }
#desreg .uk-input { border: 0px; border-bottom: 1px solid var(--color-gray); }

.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked {
    background-color: #333;
}
.search-result { display: none; position: absolute;
    background: #fff;}
#logindesreg { display: none; }
.p-select { position: relative; font-weight: bold; }

.p-select:after { content: ' ';
    border: 1px solid #000;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%; }
.interiors-circle {     display: flex;
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-left: -140px;
        bottom: 35px;
     }
.interiors-circle-div { height: 150px; }
.div-sort {display: none;}

.add_color, .add_canvas_type {   border: 2px solid #fff;}
.select_color { border: 2px solid #333; position:relative; }
.select_color::after {     content: '✓';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 200px;
    right: 0;
    margin-top: -5px;}

.add_opora_color {   border: 2px solid rgba(100,100,100,0.1);    background-size: contain;background-size: 110% 110%;
    background-position: center center;}
.select_color { border: 2px solid #333; position:relative; }
.select_color::after {     content: '✓';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    border-radius: 200px;
    right: -5px;
    margin-top: -5px;}




.li2 .select_color { border: 1px solid #F6F6F6; background:  #F6F6F6;}


.addbas, .hiddendiv { display:none; }
nav div:nth-child(3) a:nth-child(2) { display:none; }
.addcompare,.addcompareico { display:none; }

.uk-h1, h1 {
    font-size: 28px;
    line-height: 1.2;
}

.uk-h3, h3 {
    font-size: 1.25rem;
    line-height: 1.2;
}

.bjorn-logo { min-width:125px; opacity:0.7; max-width:125px; }
.bjorn-logo:hover { opacity:1; }

.uk-child-width-1-7>*{width:calc(100% * 1 / 7.001)}




@media (max-width: 640px) {
  .pidshover img {
    max-height: 130px;
}
.pidshover .uk-button {font-size: 12px;    padding: 0px 10px;}
.a-plus, .a-minus { padding: 5px; }
a.cat-link-select::before { width: 100%;}
.menu-line { border:0px; }
.height-mob { height: 300px; }
.dotnav-home li {border: 0px solid #000; width: 11px;height: 11px;border-radius: 100px; padding: 0px;margin: 15px 0px; cursor: pointer;}
.dotnav-home { list-style: decimal-leading-zero; color: var(--color-gray); border: 0px;}
.dotnav-home>.uk-active>* {background-color: var(--color-gray);    width: 11px;    height: 11px;}
.dotnav-home>*>* {border: 0px;}
.dotnav-home a {width: 10px;height: 10px;background-color: rgba(0,0,0,0);     margin-top: 4px;   border: 1px solid #000;}
.uk-drop {width: 160px;}
#pid-tab li a { font-size: 14px; }
#pid-tab>* {padding-left: 10px;}
#pid-tab > * > a {padding: 3px 3px;}

#piddetail {margin: 5px !important; padding: 15px; }
.section  { padding: 15px  !important; }
.slidenav {
    border: 0px solid var(--color-gray);
}

#basket-form .active-circle {
    height: 26px;
    width: 26px;
}
#basket-form .uk-box-small {
    min-width: 26px;
}
.article .uk-border {     border: 0px solid var(--color-gray); }

}

@media ((min-width: 1200px)) {
    .uk-child-width-1-7\@m>*{width:calc(100% * 1 / 7.001)}
}
@media (min-width: 960px) {
    .uk-offcanvas-bar {
        left: -350px;
        width: 40%;
        padding: 40px 40px;
    }
}