/* CSS File Last Update : 31 May 2022 Project: oppastar.com (OppaStar) Website Designed & Coded by: Aditama (pandavamedia.net) Main colors: - Background: #FFFFFF; rgba(255,255,255, 1); - Pale Pink (block content): #fbf2f6; rgba(251,242,246, 1.0); - Dark Red: #bd055e; rgba(189,5,94, 1.0); - Bold Pink: #e5006e; rgba(229,0,110, 1.0); - Bright Yellow (bg links): #f9faa8; rgba(249,250,168, 1); - Bright Pink (link): #e75c9f; rgba(231,92,159, 1); - Blue: #3097dc; rgba(48,151,220, 1); - Logo Yellow: #fdc064; rgba(253,192,100, 1); - Black: #333333; Left-right margin from screen : none Desktop max width: width:92%; max-width:1224px; Mobile max width: 96%; */ /*html { height: 100%; }*/ @charset "UTF-8"; * { margin:0; padding:0; box-sizing:border-box; font-family: 'Poppins', sans-serif; -webkit-font-smoothing:antialiased; font-smooth:always; } :root { --black: #333333; --pitch-black: #000000; --grey: #666666; --soft-grey: #999999; --pale-grey: #eeeeee; --white: #ffffff; /* theme color */ --blue: #0490db; --dark-blue: #105495; --pale-blue: #daeefa; --bright-blue: #70cbfb; --bright-yellow: #f9faa8; --side-box: #daeefa; --side-box-border: #105495; --side-box-title: #0490db; --drop-menu_box: #daeefa; --top-header-drop-menu_box: #FFFFFF; /* theme link */ --link: #70cbfb; --link-hover: #ff5541; --list-link: #333333; --list-link-hover: #ff5541; --top-header-link: #FFFFFF; /* menu link */ --drop-lnk: #333333; --drop-lnk-hover: #0490db; /* ----------- */ --modal-black: rgba(0,0,0, 0.8); --font-family-normal: 'Poppins', sans-serif; --font-family-heading: 'Roboto Slab', serif; /* table theme */ --tbl-header-line: #0099CC; --tbl-header-bg: #0099CC; --tbl-header-text: #0099CC; /* product */ --prd-thb-bg: #FFFFFF; --prd-thb-line: #EEEEEE; /* carousel */ --crsl-dots: #CCCCCC; --crsl-dots-active: #0099CC; /* footer */ --fotr-mbl-bg: #0490db; } html { -webkit-text-size-adjust: 100%; } body { position:relative; background-color:#FFFFFF; font-size:15px; letter-spacing:0.1px; line-height:22px; color:#333333; margin:0; padding:0; border:0; width:100%; height: 100%; font-weight:400; } #pageBody { width:100%; } .boldTxt { font-family: 'Poppins', sans-serif; font-weight:500; } form { MARGIN-LEFT: 0px;MARGIN-RIGHT: 0px;MARGIN-BOTTOM: 0px;MARGIN-TOP: 0px } td,div,p { font-family: 'Poppins', sans-serif; font-size:inherit; } input[type=text],input[type=password],input[type=number],textarea,select { font-family: 'Poppins', sans-serif; font-size: 1.2em; border: 0 !important; -webkit-appearance: none; /* keep button styling on ios device */ -moz-appearance: none; /* keep button styling on ios device */ appearance: none; /* keep button styling on ios device */ cursor: text; color:#333333; width:92%; border:1px #DDDDDD solid; border-radius:5px; padding:10px; background:#FFFFFF; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } textarea { width:95% !important; } select { width:100% !important; padding:5px; border:1px #DDDDDD solid; border-radius:5px; background-color:#FFFFFF; -webkit-appearance: menulist !important; } input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,textarea:focus,select:focus { color:#000000; border:1px #666666 solid; outline: none; background-color:#FFFFFF; } input[type=submit],input[type=button] { font-family: 'Poppins', sans-serif; font-size:16px; cursor:pointer; color:#FFFFFF; background-color:#F9BE31; border:0; padding:12px 20px 13px 20px; opacity:0.9; border-radius: 5px; -webkit-appearance: none; /* keep button styling on ios device */ -moz-appearance: none; /* keep button styling on ios device */ appearance: none; /* keep button styling on ios device */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } input[type=submit]:hover,input[type=button]:hover { opacity:1.0; } input[type=text]:disabled,input[type=checkbox]:disabled,input[type=password]:disabled,textarea:disabled,select:disabled { opacity: .60; filter:Alpha(Opacity=60); /* support: IE8 */ background-image: none; background-color:#F0F0F0; } input[type=text]:read-only,input[type=checkbox]:read-only,input[type=password]:read-only,textarea:read-only,select:read-only { opacity: .80; filter:Alpha(Opacity=60); /* support: IE8 */ background-image: none; background-color:#F3F3F3; color:#000000; /*border:1px #DDDDDD solid;*/ } input[type=text]:-moz-read-only,input[type=checkbox]:-moz-read-only,input[type=password]:-moz-read-only,textarea:-moz-read-only,select:-moz-read-only { opacity: .60; filter:Alpha(Opacity=60); /* support: IE8 */ background-image: none; background-color:#F0F0F0; } input[readonly]:focus,textarea[readonly]:focus,select[readonly]:focus { /*border:1px #CCCCCC solid;*/ } img, div, input, a { behavior: url("iepngfix.htc") } img { max-width:100%; max-height:100%; } ul,ol { list-style-position:outside; } ol.smallList>li { margin:5px 7px; line-height:18px; } ol.lower-alphabet { list-style-type:lower-alpha; } ol.upper-alphabet { list-style-type:upper-alpha; } ol.inBx, ul.inBx { margin-left:20px; } p { margin-bottom:22px; } b { font-weight:bold; } a { position:relative; cursor:pointer; color:var(--link); text-decoration:none; outline: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } a:visited { color:var(--link);text-decoration:none; outline: 0; } a:hover { color:var(--link-hover); text-decoration:none; outline: 0; } a.lnkAnim { position: relative; padding-bottom:2px; } a.lnkAnim::before { content: ""; position: absolute; /*width: 20%;*/ width: 15px; height: 1px; bottom: 0; left: 0; background-color: #666666; visibility: hidden; transform-origin: 10% 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } a.lnkAnim:hover::before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .bx-wrapper a { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } a.lnkOpacity { opacity:0.7 !important; } a.lnkOpacity:hover { opacity:1.0 !important; } h1 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:38px; letter-spacing:0.3px; color:#000000; line-height:40px; margin-bottom:25px; font-weight:700; } h2 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:36px; letter-spacing:0.3px; color:#000000; line-height:38px; margin-bottom:25px; font-weight:700; } h3 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:22px; letter-spacing:0.3px; color:#000000; line-height:26px; margin-bottom:10px; font-weight:700; } h4 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:20px; letter-spacing:0.3px; color:#000000; line-height:22px; margin-bottom:10px; font-weight:700; } h5 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:18px; letter-spacing:0.3px; color:#000000; line-height:20px; margin-bottom:10px; font-weight:700; } h6 { position:relative; display:block; font-family: 'Roboto Slab', serif; font-size:16px; letter-spacing:0.3px; color:#000000; line-height:18px; margin-bottom:10px; font-weight:700; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } * { padding: 0; margin: 0; } .addTopMargin10 { margin-top:10px; } .addTopMargin15 { margin-top:15px; } .addTopMargin20 { margin-top:20px; } .addTopMargin30 { margin-top:30px; } .addSideMargin5 { margin-left:5px; margin-right:5px; } .markSrch { color:#000000; font-weight:bold; } .loadingIcn { width:100%; text-align:center; } .algnCenter { text-align:center; } #byPandavamedia { color:#FFFFFF; } #byPandavamedia>a { color:#FFFFFF; } #byPandavamedia>a:hover { color:#FFFFFF; } .cYellow { color:#FFFF00 !important; } .cRed { color:#FF0000 !important; } .cGrey { color:#999999 !important; } .cBlue { color:#0099CC !important; } .cGreen { color:#0099CC !important; } .clr{clear:both} .topSpc { display:block; height:70px; } .gapSpc { display:block; height:40px; } .noBorder { border:0 !important; } .noMargin { margin:0 !important; } .noPadding { padding:0 !important; } .dispBig { font-size:30px; color:#FF6600; font-weight:bold; } .tooltipLoading { margin-top:60px; color:#000000; font-size:14px; } .tooltipLoading a { background-color:#666666; padding:3px 10px; color:#FFFFFF; } .tooltipLoading a:hover { background-color:#000000; color:#FFFFFF; } .noRecord { padding:40px 10px; } .goLeft { float:left !important; } .goRight { float:right !important; } .go2Column { width:48% !important; } .noResult { color:#CCCCCC; margin:50px 0px; } .fldError { border:2px #fbc5c4 solid !important; } .imageInsert { margin:5px; } .noDataFound { color:#666666; font-style:italic; opacity:0.6; } .noScroll { overflow:hidden; } .noScrollMbl { overflow-x:hidden !important; overflow-y:hidden !important; position:relative !important; } .goUpperCs { text-transform:uppercase !important; } .allCenter { text-align:center !important; } .allLeft { text-align:left !important; } .allRight { text-align:right !important; } .allJustify { text-align:justify !important; } .justifyCenter { text-align:justify !important; text-align-last:center !important; } .justifyCenter li { text-align:left !important; text-align-last:left !important; } .hiBrand { color:#58cada !important; } .noShow { display:none !important; } .cmsHeader { margin-top:28px !important; } .alertErr { display:block; padding:10px; border:2px #FF0000 solid; color:#FF0000; } .alertDone { display:block; padding:10px; border:2px #0099CC solid; color:#0099CC; } .offRecord { color:#990000; font-style:italic; } .textBx ul, .textBx ol { margin-left:20px; } .smMrgn5 { margin-bottom:5px !important; } .smMrgn10 { margin-bottom:10px !important; } .noRecords { width:90%; max-width:500px; min-height:20vh; opacity:0.6; } .bgContainer { position:relative; background-repeat:no-repeat; background-position:center center; background-size:cover; } .imgCover { z-index:0; position:absolute; top:0; bottom:0; left:0; right:0; } .coverCnt { z-index:1; position:relative; } small { font-size:13px; opacity:0.5; } table td { vertical-align:top; } .lineTtl { padding-bottom:10px !important; } .lineTtl::after { position:absolute; content:''; bottom:0; left:0; width:8%; max-width:50px; height:3px; background-color:#333333; } .dashedLn { position:relative; } .dashedLn.topLn::before { content:''; position:absolute; top:0; left:0; right:0; width:100%; height:1px; margin:auto; background:url('../../i/dashedln.png') repeat-x center center; } .dashedLn.btmLn::after { content:''; position:absolute; bottom:0; left:0; right:0; width:100%; height:1px; margin:auto; background:url('../../i/dashedln.png') repeat-x center center; } a>label { cursor:pointer; } ul.noBullet, ol.noBullet { list-style-type:none !important; margin-left:0 !important; } section,header,footer { display:block; position:relative; width:100%; } .pageLoading { display:none; z-index:999999; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.8) url('../../i/page-loading.png') no-repeat center center; } .pageLoading>label { position:absolute; width:100px; height:20px; top:52%; left:0; right:0; margin:auto; text-align:center; background:#333333; color:#FFFFFF; } .ajxLoading { display:none; z-index:10; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255, 0.7) url('../../i/mdl-loading.gif') no-repeat center center; } .loadingThis { position:relative; } .loadingThis::after { z-index:10; content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255, 0.8) url('../../i/ajx-loading-sm.png') no-repeat center; } /* ---------------------------------------------------------- */ /* anim keyframe */ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-ms-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* FLEX MIDDLE BOX */ .flexBxContainer { display:flex; justify-content:center; align-items:center; } .flexBxContent { align-self:center; } .flexBxLf { justify-content:left; } .flexBxRg { justify-content:right; } .flexCldLf { margin-right:auto; } .flexCldRg { margin-left:auto; } [filter=clickThis] { cursor:pointer !important; } /* COLUMN CONTENT */ .rowBx { /*overflow:hidden;*/ width:100%; margin-top:50px; } .rowBx:first-child { margin-top:0; } .rowBx::after{ clear: both; content: ''; display: block; } .colBx { position:relative; } .colBx.colLf { float:left; width:47%; text-align:left; } .colBx.colRg { float:right; width:47%; text-align:left; } .colCntBrf { width:65% !important; } /* flex style column */ .flexCol { display:flex; justify-content:center; align-items:center; } .flexCol .colBx.colLf { float:none !important; margin-right:auto; } .flexCol .colBx.colRg { float:none !important; margin-left:auto; } .colImage { position:relative; width:100%; padding-bottom:25%; border-radius:5px; overflow:hidden; background-color:#FFFFFF; } .colBx.colLf.txtToRight { text-align:right; } /* GRID COLUMN */ ul.gridBx { list-style-type:none; text-align:left; padding:0; display: grid; overflow: hidden; text-align: center; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-column-gap: 10px; grid-row-gap: 10px; margin-left:0 !important; margin-top:10px; } ul.gridBx:first-child { margin-top:0; } ul.gridBx>li { position:relative; overflow:hidden; width:100%; text-align:left; } ul.gridBx.fullRw { grid-template-columns: repeat(1, 1fr); max-height:500px; } ul.gridBx.blogLst { grid-template-columns: repeat(2, 1fr); grid-column-gap: 50px; grid-row-gap: 50px; } ul.gridBx.contCol { grid-template-columns: 60% 40%; grid-column-gap: 10%; grid-row-gap: 0px; } ul.gridBx.colGrid { grid-column-gap: 10%; grid-row-gap: 0px; } ul.gridBx>li.col2Span { grid-column:2/4 !important; } ul.gridBx>li.col3Span>.pointBx { max-width: 700px; text-align:center !important; } /*ul.gridBx>li:nth-child(-n + 2) { border-top:0; }*/ /* ---------- */ /* WEBSITE CUSTOM CSS */ .ui-widget { font-family: 'Poppins', sans-serif; !important; font-size:14px !important; } /* ICON SET */ .dvIcn { background-image:url('../../i/icons/icn-set.png?x=2236'); background-repeat:no-repeat; } i.dvIcn { display:inline-block; line-height:0; vertical-align:top; width:25px; height:25px; } i.dvIcn.dvRg { float:right; } i.dvBigIcn { width:35px; height:35px; margin-top:-7px; margin-right:4px; } i.dvSmIcn { width:20px; height:20px; } i.dvLf { margin-right:5px !important; } i.dvRg { margin-left:5px !important; } a.dvLnk { padding:3px 3px 3px 20px; color:#8e9b74; opacity:0.7; } a.dvLnk:hover { opacity:1.0; } /* ---------------------------------------------------------- */ .dvIcn.icnMenu { cursor:pointer; background-position:0 0px !important; } .dvIcn.icnSearch { background-position:0 -45px !important; } .dvIcn.icnUser { background-position:0 -90px !important; } .dvIcn.icnNvWhatsapp { background-position:0px -175px !important; } .dvIcn.icnLnkLoc { background-position:0px -220px !important; margin-top:-6px; margin-left:-5px; margin-right:8px; } .dvIcn.icnBlLnkLoc { background-position:-46px -220px !important; margin-top:-6px; margin-left:-5px; margin-right:8px; } .dvIcn.icnMore { background-position:-35px -45px !important; margin-top:-2px; margin-left:0; } .dvIcn.icnRemove { background-position:0 -436px !important; } .dvBigIcn.icnValue { background-position:0px -175px !important; } .dvBigIcn.icnTeam { background-position:0px -225px !important; } .dvBigIcn.icnStrength { background-position:0px -275px !important; } .dvSmIcn.icnEnter { background-position:0 0 !important; } .dvSmIcn.icnEnter.icnDark { background-position:-32px 0 !important; } .dvSmIcn.icnMember { background-position:0 -32px !important; } .dvSmIcn.icnMember.icnDark { background-position:-32px -32px !important; } .dvSmIcn.icnMember.icnLogged { background-position:0 -468px !important; margin-top:-1px; } .dvSmIcn.icnCategory { background-position:0 -96px !important; } .dvSmIcn.icnCategory.icnDark { background-position:-32px -96px !important; } .dvSmIcn.icnMore { background-position:0 -224px !important; } .dvSmIcn.icnMore.icnDark { background-position:-32px -224px !important; } .dvSmIcn.icnWhatApp { background-position:0 -128px !important; } .dvSmIcn.icnEmail { background-position:0 -160px !important; } .dvSmIcn.icnSubscrSend { background-position:0 -192px !important; } .dvSmIcn.icnCheck { background-position:0 -592px !important; } .dvSmIcn.icnCancel { background-position:-32px -592px !important; } .dvSmIcn.icnInfo { background-position:0 -320px !important; } .dvSmIcn.icnPromo { background-position:-32px -624px !important; } .dvSmIcn.icnClose { z-index:10; background-position:-32px -320px !important; } .dvSmIcn.icnLoc { background-position:0 -352px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnAddrs { background-position:0 -532px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnLock { background-position:-32px -352px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnBuy { background-position:0 -380px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnBuyWA { background-position:0 -624px !important; width:18px !important; height:18px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnBuyCall { background-position:0 -656px !important; width:18px !important; height:18px !important; margin-right:4px; margin-top:-2px; } .dvSmIcn.icnConfirm { background-position:0 -592px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-1px; } .dvSmIcn.icnSecure { background-position:-32px -380px !important; width:16px !important; height:16px !important; margin-right:4px; margin-top:-1px; } .dvSmIcn.icnClean { background-position:-32px -408px !important; margin-right:4px; margin-top:1px; } .dvSmIcn.icnRemove { background-position:-30px -435px !important; } .dvSmIcn.icnEdit { background-position:0 -560px !important; } .dvSmIcn.icnAddNote { background-position:-32px -560px !important; } /* ---- */ i.dvIcnLf { margin-right:3px !important; margin-left:0 !important; } i.dvIcnRg { margin-left:3px !important; margin-right:0 !important; } /* MOBILE MENU ICON */ /*.mblNvIcn { background-image:url('../../i/icons/icn-mblnv.png?281023') !important; background-repeat:no-repeat !important; }*/ .mblNvIcn { background-image:url('../../i/icons/icn-mblnv.svg?x=020124') !important; background-repeat:no-repeat !important; } /* SOCIAL MEDIA ICON */ .dvIcnScMd { background-image:url('../../i/icons/icn-set-socmed.png?x=1540'); background-repeat:no-repeat; } i.dvIcnScMd { display:inline-block; line-height:0; vertical-align:top; width:32px; height:32px; } /* ---------------------------------------------------------- */ .icnFtWhatsapp { background-position:0 -210px !important; } .icnFtEmail { background-position:-55px -210px !important; } .icnFtCall { background-position:-109px -210px !important; } .icnInstagram { background-position:0 0 !important; } .icnFacebook { background-position:-42px 0 !important; } .icnLinkedIn { background-position:-84px 0 !important; } .icnYoutube { background-position:-126px 0 !important; } .icnTwitter { background-position:-168px 0 !important; } .icnTiktok { background-position:-210px 0 !important; } /* FILE ICON */ .dvIcnFl { background-image:url('../../i/icons/icn-set-filetype.png?x=1146'); background-repeat:no-repeat; } i.dvIcnFl { display:inline-block; line-height:0; vertical-align:top; width:25px; height:25px; margin-top:-6px; margin-right:8px; } /* ---------------------------------------------------------- */ .icnFlPDF { background-position:0 0 !important; } .icnFlExcel { background-position:0 -42px !important; } .icnFlDoc { background-position:0 -84px !important; } .icnFlZip { background-position:0 -126px !important; } /* FACT ICON */ .dvFctIcn { background-image:url('../../i/icons/icn-set-fact.png?x=1046'); background-repeat:no-repeat; } i.dvFctIcn { display:inline-block; line-height:0; vertical-align:top; width:45px; height:45px; margin-right:12px; } /* ---------------------------------------------------------- */ .icnFctArea { background-position:0 0 !important; } .icnFctClimate { background-position:-55px 0 !important; } .icnFctUnique { background-position:-110px 0 !important; } /* A LINKS */ a.titleLnk { color:#000000; opacity:0.7; } a.titleLnk:hover { opacity:1.0; } a.blockLnk { display:inline-block !important; color:#03a7fc; opacity:0.7; font-size:16px; line-height:18px; margin:10px 0; padding-right:25px; background:url('../../i/icons/icn-more-block.png') no-repeat right center; } a.blockLnk:hover { opacity:1.0; } a.lnkMore { display:inline-block !important; font-size:15px; line-height:16px; color:var(--dark-blue); opacity:0.8; font-weight:500; } a.lnkMore:hover { opacity:1.0; } a.lnkMore.sml { font-size:14px; line-height:14px; } a.lnkMore.blu { color:#00abeb; } a.lnkMore.gren { color:var(--bright-yellow); } a.lnkButton { display:inline-block; color:#FFFFFF; background-color:rgba(1,190,253, 0.8); border-radius:8px; padding:10px 25px; font-size:14px; line-height:14px; font-weight:bold; text-align:center; margin:10px 0; } a.lnkButton:hover { background-color:rgba(1,190,253, 1.0); } a.lnkButton.btnBlack { background:rgba(28,132,85, 1.0); color:#FFFFFF; padding:10px 20px; } a.lnkButton.btnBlack:hover { background:rgba(28,132,85, 0.8); } a.lnkButton.smBtn { min-width:auto; margin:3px 0; } a.lnkButton.lnBtn { min-width:auto; margin:3px 0; background-color:#FFFFFF; border:2px #CCCCCC solid; color:#05cbe8; } a.lnkButton.lnBtn:hover { background-color:#6F6F6; } a.lnkButton.lockBtn { min-width:auto; margin:3px 0; background-color:#CC0000; border:2px #CCCCCC solid; color:#FFFFFF; } a.lnkButton.lockBtn:hover { background-color:#6F6F6; } /*a.lnkButton.buyBtn { min-width:auto; margin:3px 0; background-color:#fdc064; border:2px rgba(91,201,150, 0.5) solid; color:#FFFFFF; opacity:0.8; } a.lnkButton.buyBtn:hover { background-color:#6F6F6; opacity:1.0; }*/ a.lnkButton.buyBtn { min-width:auto; width:99%; padding:10px 0; margin:3px 0; background-color:#0099CC; border:2px rgba(50,187,124, 1.0) solid; color:#FFFFFF; opacity:0.8; } a.lnkButton.buyBtn:hover { opacity:1.0; } a.lnkButton.callBtn { min-width:auto; width:auto; padding:10px 15px; margin:3px 0; background-color:var(--bright-yellow); border:2px #FFFFFF solid; color:var(--dark-blue); opacity:0.7; } a.lnkButton.callBtn:hover { opacity:1.0; } a.lnkButton.callBtn.waBtn { background-color:#25D366; border:2px #FFFFFF solid; color:#FFFFFF; } a.lnkButton.fltrBtn { min-width:auto; width:99%; padding:13px 0; margin-top:15px; background-color:#0099CC; border:2px rgba(50,187,124, 1.0) solid; color:#FFFFFF; opacity:0.8; } a.lnkButton.fltrBtn:hover { background-color:#6F6F6; opacity:1.0; } a.lnkHelp { padding-left:20px; background:url('../../i/icons/icn-helpm.png') no-repeat left center; } a.lnkLanguage { padding-left:20px; background:url('../../i/icons/icn-globe.png') no-repeat left center; } a.lnkSendTo { padding-left:28px; background:url('../../i/icons/icn-delivery.png') no-repeat left center; } .lnkAnm { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } a.linedLnk { position:relative; display:inline-block; color:#000000; padding-bottom:4px; } a.linedLnk::after { position:absolute; content:''; bottom:0; left:0; right:0; margin:auto; width:0; height:1px; background:#666666; transition: all 0.3s; } a.linedLnk:hover::after { width:100%; } a.labelLnk { display:flex; justify-content:center; align-items:center; } /* ---------------------------------------------------------- */ /* PRELOADER */ /*.preloader { z-index:1000; position:fixed; top:0; bottom:0; left:0; right:0; background:#F0F0F0 url('../../i/logo-opening.gif') no-repeat center center; }*/ /* LAZY LOADING */ .lzLoading { display:none; height:80px; background:url('../../i/lz-loading.png') no-repeat center center; } /* ADD THIS */ .dtlShare { margin-top:40px; } .dtlShare>label { display:block; font-size:12px; font-style:italic; padding:0 3px; opacity:0.6; } .dtlShare .at-share-btn { margin-right:5px !important; } /* SLICK ARROW NAV */ .carouselArrwBx { z-index:10; position:absolute; width:35%; top:15%; bottom:13%; } .carouselArrwBx.bxLf { left:0; } .carouselArrwBx.bxRg { right:0; } .carouselArrw { z-index:20; display:none; cursor:pointer; position:absolute; width:35px; height:35px; top:0; bottom:0; margin:auto; border-radius:50%; background-image:url('../../i/icons/icn-arrw.png'); background-repeat:no-repeat; background-repeat:no-repeat; transition: all 0.5s; opacity:0.5; } .carouselArrw:hover { background-color:rgba(255,255,255, 0.7); opacity:1.0; } .carouselArrw.arrwPrev { left:4px; background-position:0 0; } .carouselArrw.arrwNext { right:4px; background-position:-105px 0; } .carouselArrwBx .carouselArrw { opacity:0.3; } .carouselArrwBx:hover .carouselArrw { opacity:1.0; } .carouselArrwBx .arrwPrev { left:5%; } .carouselArrwBx .arrwNext { right:5%; } /* SLICK CUSTOMIZE */ .carouselArea { position:relative; width:100%; min-height:100px; } .carouselArea.loading::before { z-index:0; content:''; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:50px; height:50px; background:url('../../i/crsl-loading.png') no-repeat center center; } /* hide slick before loading */ .slick-slider:not(.slick-initialized) .slick-slider:not(:first-of-type) { display:none !important; /*visibility: hidden !important;*/ } ul.carouselList:not(.slick-initialized) li { display:none !important; /*visibility: hidden !important;*/ } ul.slick-initialized li { display:inline-block !important; /*visibility: visible !important; */} ul.carouselList li:focus { outline: none; } /* ------------------------- */ .nvCrsl { display:none; outline:0; z-index:10; cursor:pointer; position:absolute; bottom:0; top:0; margin:auto; width:30px; height:30px; background-repeat:no-repeat; background-position:center center; background-image:url('../../i/icons/icn-crsl-arrw.png'); transition: all 0.2s; opacity:0.3; } .nvCrsl:hover { opacity:0.8; } .nvCrsl.crslPrv { left:2%; background-position:0 0; } .nvCrsl.crslNxt { right:2%; background-position:-80px 0; } /* slick dots */ .slick-sides:focus { outline:none; } ul.slick-dots { z-index:100; position:absolute; right:0; left:0; /*bottom:3%;*/bottom:-50px; height:20px; margin:auto !important; } ul.slick-dots li { display:inline-block !important; width:14px !important; height:14px !important; min-height:0 !important; padding:2px !important; margin:0 2px !important; background-color:transparent !important; } ul.slick-dots button::before { font-size:36px !important; } ul.slick-dots li.slick-active button::before { font-size:51px !important; color:var(--crsl-dots-active) !important; } ul.slick-dots li button>label { cursor:pointer; position:absolute; top:1px; right:25px; margin:auto; font-size:14px !important; line-height:14px !important; color:var(--crsl-dots); } ul.slick-dots li.slick-active button>label { font-weight:bold; color:#FFFFFF; font-size:14px !important; } /* bar style */ ul.bar-dots { z-index:100; position:absolute; left:50%; transform:translateX(-50%); bottom:5% !important; height:20px; } ul.bar-dots li { cursor:pointer; display:inline-block !important; width:35px !important; height:5px !important; min-height:auto !important; border-radius:3px; padding:0 !important; overflow:hidden; background:#879596; margin:0 3px; } ul.bar-dots li button { display:none !important; opacity:0 !important; font-size:0 !important; content:none !important; } ul.bar-dots li button:before { display:none !important; opacity:0 !important; font-size:0 !important; content:none !important; } ul.bar-dots li.slick-active { background:#d1ae6c; } /* vertical style */ ul.vertical-dots { z-index:100; position:absolute; left:-5%; right:auto; width:25px; } ul.vertical-dots li { display:block !important; width:25px !important; height:25px !important; } ul.vertical-dots button::before { font-size:15px !important; color:#CCCCCC; } ul.vertical-dots li.slick-active button::before { font-size:20px !important; color:#f37021 !important; } /* number style */ ul.number-dots { background-color:#efefef; padding:7px 0; height:37px; bottom:-10% !important; } ul.number-dots li { margin:3px 8px !important; } ul.number-dots li button { font-size:16px !important; line-height:16px !important; font-weight:bold; } ul.number-dots li.slick-active { width:30px !important; height:30px !important; } ul.number-dots li.slick-active button { border-radius:100%; width:30px; height:30px; } /* slick progress bar dots */ .progressBarContainer { z-index:10; position: absolute; bottom: 18%; left:0; right:0; width:90%; margin:auto; text-align: center; } .progressBarContainer.photoHeader { bottom: 5% !important; } .progressBarContainer div { position: relative; display: inline-block; width: 40px; padding: 0; cursor: pointer; margin: 0; color: white; text-align:left; } .progressBarContainer div:last-child { margin-right: 0; } .progressBarContainer div span.progressBar { width: 100%; height: 5px; background-color: #879596; display:block; overflow:hidden; border-radius:3px; } .progressBarContainer div span.progressBar .inProgress { background-color: #d1ae6c; width: 0%; height: 5px; } /* text select */ .slick-slider { -webkit-user-select: text !important; -khtml-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; } .slick-list.draggable { -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* ----------------------------------- */ /* SWIPEBOX CUSTOMIZE */ #swipebox-prev { z-index:10; position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important; margin:auto !important; } #swipebox-next { z-index:10; position:absolute !important; right:0 !important; top:0 !important; bottom:0 !important; margin:auto !important; } /* ------------------ */ /* MODAL SCREEN */ .mdlScrn { display:none; z-index:10000; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(252,248,244, 0.95); } .mdlLoading { display:none; z-index:10; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:70px; height:70px; background:url('../../i/mdl-loading.gif') no-repeat center center; } .mdlArea { display:none; position:absolute; top:2%; bottom:2%; left:2%; right:2%; margin:auto; max-width:900px; max-height:70vh; background:#FFFFFF; border-radius:15px; box-shadow: 1px 1px 5px 0 rgba(0,0,0, 0.1); overflow:hidden; } .mdlArea.mdlPaymtInstc { max-width:400px; max-height:500px; } .mdlArea.mdlSubscribe { max-width:650px; max-height:475px; } .mdlArea.mdlJob { max-width:400px; max-height:460px; } .mdlArea.mdlPageContent { max-width:1000px; max-height:550px; } .mdlArea.mdlPageValue { max-width:1000px; max-height:450px; } .mdlArea.mdlPageTeam { max-width:1000px; max-height:430px; } .btnMdlClose { z-index:5; position:absolute; top:3px; right:3px; width:25px; height:25px; background:url('../../i/icons/icn-mdlclose.png') no-repeat center center; opacity:0.5; transition: all 0.5s; } .btnMdlClose:hover { opacity:1.0; } .mdlBox { position:absolute; top:0; left:0; bottom:0; right:0; } .mdlTitle { position:absolute; left:15px; top:25px; height:30px; right:10px; text-align:left; padding:0 5px; } .mdlTitle::after { z-index:0; content:''; position:absolute; top:0; bottom:0; left:50px; right:0; margin:auto; height:5px; border-bottom:1px #CCCCCC dashed; } .mdlTitle>h6 { z-index:1; position:relative; left:0; display:inline-block; font-size:24px; line-height:24px; background:#FFFFFF; padding-right:20px; } .mdlContent { position:absolute; left:20px; top:80px; bottom:20px; right:10px; overflow-y:auto; text-align:left; } /* modal content */ .mdlContent>div { margin:18px 0; font-size:14px; line-height:20px; } .mdlContent>div:first-child { margin-top:0; } ul.mdlInfLst { list-style-type:initial; } ul.mdlInfLst>li { margin:2px 0; margin-left:20px; padding-left:-5px !important; } ul.mdlPntLst { list-style-type:none; } ul.mdlPntLst>li { background-color:rgba(0,153,204, 0.2); margin:1px 0; padding:7px 10px; border-radius:5px; } a.btnDone { width:92%; font-size:18px; padding:13px; } /* STICKY DIVS */ .stickyDiv.stickyThis { position:fixed; top:62px; left:0; } .stickyDiv.goBottom { position:absolute; left:0; bottom:0; } /* SECTION */ .contentSection { min-height:100px; padding:50px 0; background-repeat:no-repeat; background-position:center center; background-size:cover; } .contentSection.headBnrSection { padding:0; } .contentSection.topSection { margin-top:125px; } .contentSection.smlSection { padding:30px 0; } .contentSection.fitSection { padding:0; } .contentSection.singleBlock { min-height:55vh; } .contentSection.noBtmBlock { min-height:76vh; } .contentSection.hlghtSection { background-color:#fbe8f1; } .contentSection.gradSection { background-image:linear-gradient(rgba(221,221,221, 0.3),rgba(221,221,221, 0),rgba(221,221,221, 0)); } .contentSection.lstPreview { padding:35px 0; } .contentSection.gradtSection::before { z-index:0; content:''; position:absolute; left:0; right:0; top:0; height:55vh; background-image:linear-gradient(rgba(0,0,0, 0.05),rgba(0,0,0, 0)); opacity:0.6; } /* WRAPPER */ .contentWrap { position:relative; width:96%; max-width:1360px; } .contentWrap.fullWrap { width:100%; max-width:none; } .contentWrap.pageHeadWrap { width:92%; max-width:800px; margin-bottom:40px; } .contentWrap.blockWrap { padding:50px 0; } .contentWrap.mapWrap { width:100%; max-width:none; height:90vh; } .contentWrap.readWrap { min-height:400px; padding:50px 0 80px 0; } .contentWrap.destDetWrap { width:100%; max-width:1000px; } .contentWrap.listingWrap { width:100%; min-height:400px; padding:50px 0; } .contentWrap.regWrap { min-height:450px; display:flex; justify-content:center; align-items:center; } /* NORMAL HEADER BAR */ .mobileHeader { display:none; } .desktopHeader { display:block; } #headerSection { z-index:1000; position:fixed; top:0; left:0; right:0; transition: all 0.3s; box-shadow: 0 0 2px 0 rgba(0,0,0, 0.1); } .headerWrap { position:relative; width:96%; max-width:1360px; padding:0; } .headerRow { position:relative; width:100%; padding:4px 0; } .headerRow.topRow { z-index:5; background-color:var(--dark-blue); } .headerRow.mainRow { z-index:3; background-color:var(--pale-blue); min-height:80px; } .headerRow.btmRow { z-index:1; background-color:var(--blue); padding:0; } .headerLf { margin-right:auto; text-align:left; padding-right:3%; } .headerMd { width:50%; } .headerRg { margin-left:auto; padding-left:3%; /*gap:40px;*//* flex item gap */ } .headerRow.topRow .headerLf, .headerRow.topRow .headerRg { width:auto !important; } .headerGap { height:130px; } /* NAVIGATION & LOGO */ .webLogo { transition: all 0.5s; } .webLogo img { max-width:100%; } .webLogo img.normalLogo { display:none; } .webLogo img.stickyLogo { display:block; } .menuBx { padding:0 20px; } .menuBx:nth-child(n+2) { border-left:1px #cf1b71 solid; padding:0 10px !important; } .menuBx.mnLf { width:20% !important; padding:0 20px; margin-right:5%; } .menuBx.mnRg { width:80% !important; padding:0 0 0 20px !important; border-left:1px #cf1b71 solid; } a.mobileNav,a.mblNavClose,.mobileMenu { display:none; } ul.nvMenu { display:inline-block; list-style-type:none; } ul.nvMenu::after{ clear: both; content: ''; display: block; } ul.nvMenu>li { position:relative; float:left; margin:2px 5px; padding:2px 0; font-size:15px; font-weight:500; letter-spacing:0.4px; transition: all 0.3s; } ul.nvMenu>li a { color:#4b3b31; opacity:0.8; } ul.nvMenu>li a:hover { opacity:1.0; } ul.nvMenu.menuBtn { display:flex; } ul.nvMenu.menuBtn>li { float:right; margin:0 0 0 10px; padding:0; } ul.nvMenu.menuBtn>li a { opacity:1.0; } ul.nvMenu.menuBtn>li a:hover { opacity:1.0; } /* top side menu */ ul.nvMenu.headSdMenu { margin:0; } ul.nvMenu.headSdMenu>li { float:left; padding:2px 12px 2px 0; margin:0 12px; border-left:1px rgba(102,102,102, 0.3) solid; font-size:12px; line-height:14px; font-weight:500; } ul.nvMenu.headSdMenu>li:first-child { width:auto; border-left:0; padding-left:3px; margin-left:0; } ul.nvMenu.headSdMenu>li>a { color:var(--top-header-link); } /* _|style-theme|_ */ ul.nvMenu.headSdMenu>li.wDrop { padding-right:12px; background:url('../../i/icons/icn-sdnvarrw.png') no-repeat 100% center; } .headerRg ul.nvMenu.headSdMenu>li:last-child { margin-right:0; } /* menu bottom row */ .headerRow.btmRow ul.nvMenu.headSdMenu>li>a { color:#FFFFFF; } /* _|style-theme|_ */ /* icon navigation */ ul.nvIcon { list-style-type:none; } ul.nvIcon>li { position:relative; display:inline-block; vertical-align:top; margin:0 6px; transition: all 0.3s ease; } a.icnNav { display:inline-block; width:30px; height:30px; opacity:0.8; transition:none; } a.icnNav:hover { opacity:1.0; } /* drop down navigation */ ul.nvMenu>li.wDrop { /*margin-right:20px;*/ } ul.nvMenu>li.wDrop>a { /*padding-right:13px; background:url('../../i/icons/icn-nvarrw.png') no-repeat right center;*/ } .nvDrop { display:none; position:absolute; top:100%; left:0; margin-top:2px; background-color:var(--drop-menu_box); border-radius:2px 2px 5px 5px; padding:10px 15px 10px 10px; box-shadow: 2px 2px 0 0 rgba(0,0,0, 0.1); } .nvDrop.right { left:auto; right:-2px; } ul.nvDownMenu { list-style-type:none; text-align:left; white-space:nowrap; } ul.nvDownMenu>li { padding:3px 2px !important; min-width:115px; border-top:1px rgba(102,102,102, 0.3) dashed; font-size:12px; line-height:16px; font-weight:normal; } ul.nvDownMenu>li:first-child { border:0 !important; } ul.nvDownMenu>li a { color:#000000; opacity:0.8; } ul.nvDownMenu>li a:hover { opacity:1.0; } .nvDrop.right ul.nvDownMenu>li { text-align:right; padding:5px 2px !important; } ul.nvMenu.headSdMenu>li .nvDrop { margin-top:5px; background-color:var(--top-header-drop-menu_box); } .farRg .nvDrop { left:auto !important; right:0; } /* HEADER SEARCH BAR */ .hdrSearch { position:relative; display:block; border-radius:10px; background:#FFFFFF; } .hdrSearch::after{ clear: both; content: ''; display: block; } .hrdSrchBx { display:flex; justify-content:flex-start; align-items:center; } .hdrSrchGrp { cursor:pointer; position:relative; width:26%; height:38px; background-color:var(--dark-blue); color:var(--white); border-radius:10px 0 0 10px; } .hdrSrchGrp:hover { background-color:var(--blue); } .hdrSrchEntry { width:74%; height:38px; } .hdrSrchCategory { width:80%; font-size:14px; line-height:15px; white-space:nowrap; background:url('../../i/icons/icn-srcharrw.png') no-repeat right center; padding:2px 15px 2px 0; text-align:left; overflow:hidden; } input.hdrSrchFld { background:transparent; border:0; margin:3px; padding:4px 10px; width:80%; font-size:15px; line-height:15px; } input.hdrSrchFld:focus { background:transparent; border:0; } input[type=submit].hdrSrchBtn { cursor:pointer; width:32px; height:32px; border:0; margin:3px; margin-left:auto; border-radius:10px; background-color:transparent; background:url('../../i/icons/icn-search.png') no-repeat center center; opacity:0.8; transition: all 0.3s ease; } input[type=submit].hdrSrchBtn:hover { opacity:1.0; background-color:rgba(1,119,66, 0.2); } input[type=submit].hdrSrchBtn.btnOn { opacity:0.8; } input[type=submit].hdrSrchBtn.btnOn:hover { opacity:1.0; background-color:rgba(1,119,66, 0.2); } input[type=submit].hdrSrchBtn:disabled { opacity:0.2; } input[type=submit].hdrSrchBtn:disabled:hover { opacity:0.3; background-color:transparent; } /* pop up */ .hdrSrchCatPop { display:none; position:absolute; left:0; top:110%; border-radius:5px; overflow:hidden; text-align:left; padding:15px 8% 15px 15px; background:#EFEFEF; box-shadow: 3px 3px 1px 0 rgba(0,0,0, 0.1); } .hdrSrchCatPop>label { display:block; font-size:13px; font-weight:bold; margin-bottom:5px; } .hdrSrchCatBx { position:relative; white-space:nowrap; } ul.srchCatLst { display:inline-block; list-style-type:none; /*width:32%;*/min-width:80px; margin-right:2%; } ul.srchCatLst:nth-last-child(1) { margin-right:0; } ul.srchCatLst>li { white-space:nowrap; font-size:15px; padding:1px 0; } ul.srchCatLst>li>a { padding:0 7px; border-radius:10px; color:#333333; } ul.srchCatLst>li>a:hover { background:rgba(76,190,138, 0.6); color:#FFFFFF; } ul.srchCatLst>li>a.selcOn { background:#4cbe8a; color:#FFFFFF; } /* HEADER RIGHT NAVIGATION */ li.iconShopCart { cursor:pointer; position:relative; width:30px; height:35px; background:url('../../i/icons/icn-cart.png') no-repeat center; opacity:0.8; } li.iconShopCart:hover { opacity:1.0; } li.iconShopCart>a { position:absolute; top:0; bottom:0; left:0; right:0; } /*.iconCartLbl { position:absolute; right:-13px; top:-2px; width:18px; height:18px; border-radius:50%; background-color:#FF0000; } .iconCartLbl>span { color:#FFFFFF; font-size:11px; line-height:10px; font-weight:bold; }*/ .cartNotify { position:absolute; right:-12px; top:-2px; } .cartNotify>.cartLbl { display:flex; justify-content:center; align-items:center; width:18px; height:18px; border-radius:50%; background-color:#0099CC; color:#FFFFFF; font-size:9px; line-height:9px; font-weight:bold; } /* buttons */ a.btnHdrLn { background-color:transparent; border:2px var(--dark-blue) solid; width:100px; height:30px; border-radius:10px; } a.btnHdrLn:hover { box-shadow: 1px 1px 4px 0 rgba(0,0,0, 0.4); } a.btnHdrLn.fullBg { background-color:var(--dark-blue); border:2px var(--dark-blue) solid; } a.btnHdrLn.myProfl { width:140px; background-color:#4cbe8a; background-image:linear-gradient(#fda21a,#f9faa8); border:2px rgba(253,192,100, 1) solid; box-shadow: 1px 1px 4px 0 rgba(0,0,0, 0.3); } a.btnHdrLn>label { font-size:14px; line-height:14px; letter-spacing:0.1px; font-weight:bold; color:var(--dark-blue); } a.btnHdrLn.myProfl>label { color:var(--dark-blue); } a.btnHdrLn.fullBg>label { color:var(--pale-blue); } ul.nvMenu.menuBtn>li:hover a.btnHdrLn.myProfl { background-image:linear-gradient(#ef9105,#f9faa8); box-shadow: 1px 1px 4px 0 rgba(0,0,0, 0.5); } ul.nvMenu.menuBtn>li:hover a.btnHdrLn.myProfl>label { color:#000000; } /* HEADER CATEGORY BAR */ .hdrCatLf { position:relative; margin-right:auto; text-align:left; } .hdrCatMd { width:55%; margin-right:auto; text-align:left; padding:0 10px; height:38px; overflow:hidden; } .hdrCatRg { width:30%; position:relative; margin-left:auto; text-align:right; /*gap:40px;*//* flex item gap */ } a.catBtn { background-color:var(--dark-blue); width:180px; height:37px; opacity:0.6; } a.catBtn:hover { opacity:1.0; } a.catBtn>label { font-size:13px; line-height:13px; letter-spacing:0.1px; font-weight:bold; color:#FFFFFF; padding-right:14px; background:url('../../i/icons/icn-catarrw.png') no-repeat 100% center; } ul.hdrCatLnk { list-style-type:none; overflow:hidden; display:flex; flex-wrap:nowrap; flex-direction:row; } ul.hdrCatLnk>li { margin-right:20px; } ul.hdrCatLnk>li>a { font-size:13px; line-height:13px; color:#f9faa8; white-space:nowrap; font-weight:500; } ul.hdrCatLnk>li>a:hover { color:#FFFFFF; } ul.hScrlCatMenu { height:90px; padding:8px 0; white-space:nowrap; overflow-x: scroll; overflow-y: hide; /*-webkit-overflow-scrolling:touch; */ } /* category pop up */ .catCvr { display:none; z-index:100; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0, 0.7); } /*.hdrCatBx { display:none; position:absolute; background:#F0F0F0; top:30px; left:0; width:240px; max-width:1050px; height:62vh; min-height:420px; overflow:hidden; border-radius:0 0 10px 10px; }*/ .hdrCatBx { display:none; } .hdrCatBx.expnd { /*width:96vw;*/ } .hdrCat { display:flex; position:absolute; background:#F0F0F0; top:37px; left:0; overflow:hidden; border-radius:0 0 10px 10px; } /*.colCat { position:absolute; left:0; top:0; bottom:0; width:240px; padding:10px 0; overflow-y:auto; } .colSubCat { display:none; position:absolute; left:23%; top:0; bottom:0; width:77%; border-left:1px #CCCCCC solid; } .subCatBx { position:absolute; top:13px; bottom:13px; left:30px; right:30px; overflow:hidden; }*/ .colCat { float:left; position:relative; width:270px; height:60vh; max-height:400px; padding:10px 0; overflow-y:auto; } .colSubCat { float:left; position:relative; border-left:1px #CCCCCC solid; overflow:hidden; min-width:200px; padding:13px 30px 0 30px; } .subCatBx { display:block; position:relative; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; /*overflow:hidden;*/ } ul.nvCat { list-style-type:none; padding:3px 0; } ul.nvCat>li { position:relative; cursor:pointer; padding:10px 10px 3px 20px; /*white-space:nowrap;*/ font-size:16px; font-weight:bold; } ul.nvCat>li:first-child { padding-top:3px; } ul.nvCat>li>a { color:#333333; } ul.nvCat>li:hover>a { color:#000000; } h6.nvCatTtl { display:block; font-size:1.2em; line-height:1.2em; height:30px; margin-bottom:20px; white-space:nowrap; border-bottom:1px #999999 dashed; } ul.nvCat.categoryGroup { padding-top:3px; } ul.nvCat.categoryGroup>li { padding:2px 10px 2px 10px; width:95%; font-size:14px; font-weight:normal; border-bottom:1px #DDDDDD dashed; } ul.nvCat.categoryGroup>li:first-child { border-top:1px #DDDDDD dashed; } ul.nvCat.categoryGroup>li:hover { background-color:rgba(0,0,0, 0.1); background-image:url('../../i/icons/icn-arrw-subnv.png'); background-repeat:no-repeat; background-position:96% center; } ul.nvCat.categoryGroup>li>a {} /*.subNvBx { position:absolute; top:13%; bottom:0; left:0; width:70%; margin-right:-5%; overflow-y:auto; } .colBnr { position:absolute; top:13%; bottom:0; right:0; width:27%; }*/ .subNvBx { float:left; position:relative; /*min-width:550px;*/ height:355px; margin-right:20px; overflow-y:auto; display:flex; flex-flow:column wrap; justify-content:flex-start; align-content:flex-start; align-items:flex-start; flex-wrap:wrap; } .subNvBx.flexBx { display:block; overflow-y:visible; margin-top:-8px; } .colBnr { float:left; position:relative; width:250px; height:330px; margin-left:30px; background:#DDDDDD; border-radius:10px; overflow:hidden; background-repeat:no-repeat; background-position:center; background-size:cover; } ul.nvSubCat { width:100%; position:relative; list-style-type:none; display:inline-block; vertical-align:top; /*min-width:28%;*/ margin-right:1%; margin-bottom:25px; width:31%; } /*ul.nvSubCat:nth-child(3n) { margin-right:0; }*/ ul.nvSubCat>li { padding:5px 0; font-size:0.9em; line-height:1.1em; /*white-space:nowrap;*/ } ul.nvSubCat>label { display:block; font-size:16px; font-weight:bold; color:#4cbe8a; margin-bottom:5px; } ul.nvSubCat>label>a { color:#4cbe8a; opacity:0.8; } ul.nvSubCat>label>a:hover { color:#4cbe8a; opacity:1; } ul.nvSubCat>li>span { white-space:nowrap; } ul.nvSubCat>li a { cursor:pointer !important; color:var(--drop-lnk); } ul.nvSubCat>li a:hover { color:var(--drop-lnk-hover); } ul.nvSubCat.flexNvCat { display: flex; align-items: flex-start; flex-flow: row wrap; max-height: 350px; width: auto; align-content: flex-start; justify-content: flex-start; writing-mode: vertical-lr; } ul.nvSubCat.flexNvCat>li { text-align:left; width:100%; max-width:200px; margin-right:10%; padding:7px 10px 5px 10px; border-bottom:1px #DDDDDD dashed; writing-mode:horizontal-tb; } ul.nvSubCat.gridNvCat { display: grid; grid-auto-flow: column; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(13, 1fr); } ul.nvSubCat.gridNvCat>li { margin-right:25px; border-bottom:1px #DDDDDD dashed; } /* HEADER MENU NAVIGATION BAR */ ul.hdrMnNav { position:relative; list-style-type:none; display:flex; justify-content:flex-start; align-items:center; gap:15px; } ul.hdrMnNav>li { position:relative; font-size:14px; font-weight:bold; } ul.hdrMnNav>li>a { display:inline-block; color:#FFFFFF; padding:5px 10px; } ul.hdrMnNav>li>a:hover { background-color:var(--dark-blue); } ul.hdrMnNav>li.wDrop>a { padding-right:20px; background-image:url('../../i/icons/icn-sdnvarrw.png'); background-repeat:no-repeat; background-position:92% center; } /* FOOTER */ #footerSection { position:relative; width:100%; } .footerNvRow { position:relative; width:100%; background-color:var(--pale-grey); padding:40px 0 50px 0; } .footerCprghtRow { position:relative; width:100%; background-color:var(--blue); padding:10px 0; } .footerWrap { position:relative; width:96%; max-width:1360px; overflow:hidden; } .footerLf { float:left; width:28%; margin-right:3%; text-align:left; font-size:14px; line-height:20px; font-weight:500; overflow:hidden; color:#FFFFFF; } .footerRg { float:right; width:67%; text-align:left; padding-top:5px; overflow:hidden; color:#000000; } /* address */ .ftLogo { margin-bottom:10px; } h6.ftName { position:relative; font-size:20px; line-height:24px; margin-bottom:10px; text-align:left; color:#000000; } .ftAddress { display:block; margin-bottom:25px; font-weight:normal; } ul.ftLinkLst { list-style-type:none; } ul.ftLinkLst>li { margin:3px 0; } a.ftLink { display:inline-block; color:#0099CC; } a.ftLink:hover { color:#000000; } a.ftLink .dvLf { margin-right:10px !important; } /* foot navigation */ ul.ftNavBx { list-style-type:none; overflow:hidden; text-align:left; display:flex; } ul.ftNavBx>li { vertical-align:top; margin-left:3.5%; min-width:24%; } ul.ftNavBx>li.lstCol { flex-grow:1; } ul.ftNavBx>li:first-child { margin-left:0; } ul.ftNav { list-style-type:none; text-align:left; } ul.ftNav>label { display:block; color:#000000; font-weight:16px; font-weight:bold; margin-bottom:10px; } ul.ftNav>li { padding:3px 0; color:#000000; margin-bottom:3px; font-size:15px; line-height:17px; } ul.ftNav>li>a { color:#000000; opacity:0.7; } ul.ftNav>li>a:hover { opacity:1.0; } label.ftSmLbl { display:block; padding:0 3px; margin-bottom:5px; font-size:10px; line-height:12px; color:#666666; } /* social media */ ul.ftSocMed { list-style-type:none; overflow:hidden; margin-top:2px; } ul.ftSocMed>li { float:left; margin:0 5px 0 0; opacity:0.7; transition: all 0.3s; } ul.ftSocMed>li:hover { opacity:1.0; transform: rotate(360deg); } /* payment */ ul.ftPartnersIcn { list-style-type:none; overflow:hidden; margin-top:2px; } ul.ftPartnersIcn>li { float:left; margin:5px 10px 5px 0; width:60px; height:22px; background-repeat:no-repeat; background-position:center; background-size:contain; } /* copyright */ .ftCopyright { color:#CCCCCC; font-size:14px; line-height:16px; margin:5px 0; } .ftSdNavBx { margin:0 auto 0 3%; } .ftRgCorner { margin-left:auto; } .ftRgCorner.chatOn { margin-right:9%; } ul.ftSdNav { list-style-type:none; text-align:left; display:flex; justify-content:flex-start; } ul.ftSdNav>li { padding:3px 7px 3px 7px; border-left:1px rgba(255,255,255, 0.3) solid; font-size:0.8em; line-height:0.8em; color:rgba(255,255,255, 0.8); white-space:nowrap; } ul.ftSdNav>li:first-child { border-left:0; } ul.ftSdNav>li>a { color:#FFFFFF; opacity:0.8; } ul.ftSdNav>li>a:hover { opacity:1; } /* scroll top */ a.scrlTop { display:inline-block; color:#fbe8f1; font-size:14px; line-height:14px; white-space:nowrap; background:url('../../i/icons/icn-top.png') no-repeat right center; padding-right:18px; opacity:0.6; } a.scrlTop:hover { opacity:1.0; } /* FOOTER CONTENT BLOCK */ ul.footerBlock { list-style-type:none; } ul.footerBlock>li { position:relative; display:block; margin-top:20px; color:#000000; text-align:left; } ul.footerBlock>li:first-child { margin-top:0; } /* subscribe input */ .subscrBx { position:relative; } input.subscrFld { background-color:#FFFFFF; color:#333333 !important; padding:5px 40px 5px 5px; width:79%; border:0; border-radius:5px; } input.subscrFld:focus { background-color:rgba(255,255,255, 0.6); color:#1c8455 !important; border:0; } input.subscrBtn { position:absolute; top:0; bottom:0; left:84%; padding:0; margin:auto; width:25px; height:25px; background-color:transparent; background:url('../../i/icons/icn-send.png') no-repeat center center; opacity:0.7; } input.subscrBtn:hover { opacity:1.0; } /* FOOTER MARQUEE */ .footFltGap { height:0; } .footFltGap.footWithMarquee { height:28px; } #footFltBar { z-index:1500; position:fixed; display:block; background:#333333; bottom:0; left:0; right:0; } .footFltWrap { position:relative; width:95%; min-height:18px; margin:5px 0; color:#FFFFFF; font-size:13px; line-height:15px; } /* HEAD BANNER */ #headBanner { position:relative; width:100%; /*margin-top:81px;*/ } .bannerWrap { position:relative; width:100%; padding:30px 0 30px 0; /*height:48vh; max-height:350px;*/min-height:400px; /*background:#EEEEEE;*/ overflow:hidden; } ul.bannerLst { list-style-type:none; } ul.bannerLst>li { position:relative; width:100%; } ul.bannerLst.carouselList li.slick-slide { position:relative; /*height:335px;*/ margin:0 10px; display:flex !important; justify-content:center; align-items:center; overflow:hidden; border-radius:10px; background-color:#FFFFFF; } ul.bannerLst .slick-list { padding:0 3.3% !important; } /* padding side to give space for prev-next item reveal */ ul.bannerLst.carouselList ul.slick-dots { bottom:0 !important; } ul.bannerLst.carouselList ul.slick-dots li { width:10px !important; height:10px !important; } ul.bannerLst.carouselList ul.slick-dots li button { padding:0 !important; width:10px !important; height:10px !important; } ul.bannerLst.carouselList ul.slick-dots li button::before { margin:auto !important; top:0 !important; bottom:0 !important;left:0 !important; right:0 !important; width:8px !important; height:8px !important; margin:auto; color:var(--crsl-dots) !important; opacity:0.3; } ul.bannerLst.carouselList ul.slick-dots li.slick-active button::before { color:var(--crsl-dots-active) !important; opacity:1; } .bannerArrw { z-index:20; cursor:pointer; position:absolute; width:35px; height:35px; top:0; bottom:0; margin:auto; border-radius:50%; background-image:url('../../i/icons/icn-arrw-bnr.png'); background-repeat:no-repeat; background-repeat:no-repeat; opacity:0.8; transition: all 0.5s; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.1); } .bannerArrw:hover { background-color:#DDDDDD; opacity:1.0; } .bannerArrw.arrwPrev { left:7.5% !important; background-position:0 0; } .bannerArrw.arrwNext { right:7.5% !important; background-position:-105px 0; } /* banner content */ .bannerBg { z-index:0; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; background-repeat:no-repeat; background-position:center center; background-size:cover; } .bannerBx { z-index:1; position:relative; width:100%; /*padding-bottom:30%;*/padding-bottom:27%; } /* CONTENT HEADER */ h1.pgTitle { font-size:28px; line-height:30px; margin-bottom:15px; } h2.pgSubTitle { display:inline-block; position:relative; z-index:1; font-size:28px; line-height:32px; padding:5px 20px; } .pgBrief { margin:20px 0; max-width:750px; } /* HEADER TITLE LINE */ .ttlLineBx { position:relative; width:100%; padding:0; } .ttlLineBx::before { z-index:0; content:''; position:absolute; left:0; right:0; top:8px; bottom:0; margin:auto; width:100%; height:1px; background-color:#cccccc; } .ttlLineBx>h1, .ttlLineBx>h2, .ttlLineBx>h3 { z-index:1; display:inline-block; position:relative; margin:0; background-color:#FFFFFF; line-height:auto; } /* title line flex style */ .ttlLineFlex { display:flex; justify-content:center; align-items:center; } .ttlLineFlex::before { content:''; flex: 1 1 auto; height:1px; background-color:#CCCCCC; } .ttlLineFlex::after { content:''; flex: 1 1 auto; height:1px; background-color:#CCCCCC; } .ttlLineFlex>h1, .ttlLineFlex>h2, .ttlLineFlex>h3 { z-index:1; display:inline-block; position:relative; margin:0 20px 7px 20px; line-height:auto; } .ttlLineFlexRg { display:flex; justify-content:left; align-items:center; } .ttlLineFlexRg::after { content:''; flex: 1 1 auto; height:3px; background-color:#DDDDDD; } .ttlLineFlexRg>h1, .ttlLineFlexRg>h2, .ttlLineFlexRg>h3 { z-index:1; display:inline-block; position:relative; margin:0 20px 7px 0; line-height:auto; } /* HILIGHTED BOXES */ .hmHlBoxs { margin:0 -20px; } ul.hlBoxsLst { list-style-type:none; } ul.hlBoxsLst.carouselList li.slick-slide { position:relative; border:1px #CCCCCC solid; background-color:#fcfcfc; /*padding-bottom:2.5%;height:120px;*/ border-radius:10px; margin:0 20px; overflow:hidden; } .hlBoxsBx { position:relative; width:100%; padding-bottom:30%; background-repeat:no-repeat; background-position:center; background-size:cover; } .hlBoxsCnt { display:flex; justify-content:center; align-items:center; position:absolute; left:10px; right:10px; top:10px; bottom:10px; margin:auto; } .hlBoxsIcn { width:24%; margin:0 10px; } .hlBoxsMsg { width:73%; margin:0 10px; text-align:left; } h2.hlBoxsTtl { font-family: 'Poppins', sans-serif; font-size:18px; line-height:22px; font-weight:bold; margin-bottom:5px; color:#333333; } .hlBoxsBrf { font-size:13px; line-height:15px; color:#666666; } /* SELECTED PRODUCTS BOX */ .bxHilight { min-height:150px; padding:0; border-radius:10px; overflow:hidden; } .bxHilight.wOutline { border:1px #CCCCCC solid; } .bxHilight.wColor { background-color:#EEEEEE; } /* _|style-theme|_ */ .bxHilight.spotLght { background-color:var(--pale-blue); margin-top:30px; } /* _|style-theme|_ */ .bxHeadBar { overflow:hidden; width:100%; border-bottom:1px #333333 dashed; } .bxHeadBar.clean { border:0; } .bxHeadLf { float:left; width:45%; padding:12px 28px; margin-right:auto; text-align:left; } .bxHeadRg { float:right; width:45%; padding:12px 28px; margin-left:auto; text-align:right; } h3.bxTtl { font-size:28px; line-height:28px; margin-bottom:0; color:#333333; } h4.bxTtl { font-size:22px; line-height:26px; margin-bottom:0; } /* hilighted box */ .bxHilight.wColor .bxHeadBar { background-color:#999999; border-bottom:0; } /* _|style-theme|_ */ .bxHilight.wColor h3.bxTtl { color:#FFFFFF; } .bxHilight.spotLght .bxHeadBar { background-color:var(--bright-blue); border-bottom:0; } /* _|style-theme|_ */ .bxHilight.spotLght h3.bxTtl { color:#FFFFFF; } /* BRANDS LIST */ ul.brandsList { list-style-type:none; } ul.brandsList>li { cursor:pointer; position:relative; display:inline-block; vertical-align:top; width:20%; height:65px; border:5px #EEEEEE solid; padding:10px; overflow:hidden; margin:15px; background:#FFFFFF; border-radius: 10px; transition: all 0.5s; } ul.brandsList>li:hover { border:5px rgba(251,242,246, 0.8) solid; } .brandsBx { z-index:1; position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content: center; align-items: center; } .brandsImg { position:relative; width:25%; height:80%; margin-right:15px; } .brandsName { width:60%; font-size:18px; background-color:transparent; } .brandsName>a { color:#666666; } .brandsName.lf { text-align:left; } ul.brandsList>li:hover .brandsName>a { color:#000000; } /* BG Style */ ul.brandsList>li.bgLst>.brandsImg { z-index:0; position:absolute; top:0; bottom:0; left:0; right:0; width:auto; height:auto; margin-right:0; transition: all 0.5s; } ul.brandsList>li.bgLst .brandsName { display:inline-block; padding:2px 10px; border-radius:5px; width:auto; background-color:rgba(0,0,0, 0.5); transition: all 0.5s; } ul.brandsList>li.bgLst .brandsName>a { color:#FFFFFF; } ul.brandsList>li.bgLst:hover>.brandsImg { opacity:0.5; } ul.brandsList>li.bgLst:hover .brandsName { background-color:rgba(0,0,0, 1); } /* CATEGORY PICK LIST HOME */ ul.catBoxsLst.carouselList li.slick-slide { cursor:pointer; position:relative; margin:2px 10px; border:1px #DDDDDD solid; border-radius:5px; } ul.catBoxsLst.carouselList li.slick-slide:hover { box-shadow: 0 0 3px 0 rgba(0,0,0, 0.2); } .catLstBx { position:relative; width:100%; padding-bottom:110%; } .catLstArea { position:absolute; top:5px; bottom:5px; left:5px; right:5px; display:flex; justify-content:flex-start; align-items:center; flex-direction:column; } .catPckThb { position:relative; width:100%; padding-bottom:75%; margin-bottom:8px; overflow:hidden; } .catPckNm { display:block; width:100%; text-align:center; font-size:13px; line-height:13px; margin:0; } /* ETALASE LIST */ ul.etalaseList { list-style-type:none; } ul.etalaseList>li { cursor:pointer; position:relative; display:inline-block; vertical-align:top; width:20%; min-height:35px; border:3px #EEEEEE solid; padding:10px; margin:5px; background:#FFFFFF; border-radius: 10px; transition: all 0.5s; } ul.etalaseList>li:hover { border:3px rgba(251,242,246, 0.5) solid; } ul.etalaseList>label { display:block; width:90%; margin-top:20px; margin-bottom:5px; text-align:center; font-weight:bold; padding:5px 0; font-size:20px; } ul.etalaseList>label:first-child { margin-top:0; } .etalaseBx { position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content: center; align-items: center; } .etalaseName { font-size:15px; line-height:18px; } .etalaseName>a { color:#666666; } .etalaseName.lf { text-align:left; } ul.etalaseList>li:hover .etalaseName>a { color:#000000; } /* HOT NEWS */ .htNewsBx { margin:20px 0 40px 0; padding-top:20px; } ul.htNewsLst { list-style-type:none; width:100%; } ul.htNewsLst.carouselList li.slick-slide { position:relative; display:inline-block; vertical-align:top; text-align:left; margin:0 2vw; } /* NEWS LIST */ .newsLstBx { position:relative; } .newsLstTtl { font-size:20px; line-height:24px; font-weight:bold; margin-bottom:20px; } .newsLstTtl>a { color:#000000; opacity:0.7; } .newsLstTtl>a { opacity:1; } .newsLstDate { font-size:14px; line-height:16px; color:#999999; margin-bottom:10px; } .newsLstBrf { margin-bottom:10px; text-align:justify; } /* PRODUCT LISTING */ /* filter area */ .colFiltr { position:absolute; width:22% !important; left:0; top:0; bottom:0; } .colList { position:relative; width:73% !important; min-height:60vh; } .filtrBx { position:sticky !important; top:150px !important; width:88%; } .filtrBx.stickyScroll.stickyOn { } .filtrSqr { width:100%; background:#FFFFFF; padding:4% 5%; margin-top:10px; border:1px #DDDDDD solid; border-radius:5px; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.1); } .filtrSqr:first-child { margin-top:0; } .filtrArea { /*max-height:15vh;*/max-height:7vh; overflow-y:auto; } .filtrArea.sml { max-height:auto !important; overflow:inherit; } .filtrArea.cat { max-height:27vh; } .filtrArea.lrg { max-height:40vh; } .filtrArea::-webkit-scrollbar { width: 4px; background:#F9F9F9; } .filtrArea::-webkit-scrollbar-track { border-radius: 10px; } .filtrArea::-webkit-scrollbar-thumb { background: #CCCCCC; border-radius: 10px; } ul.filtrLst { list-style-type:none; width:100%; } ul.filtrLst>label { display:block; opacity:0.5; font-size:14px; line-height:16px; font-weight:bold; padding:5px; margin:5px 0 3px 0; border-radius:3px; background:#EEEEEE; } ul.filtrLst.fltrGroup>li { border-top:1px #B2B2B2 dashed; padding:16px 0 16px 0; } ul.filtrLst.fltrGroup>li:first-child { border-top:0; padding-top:0; } ul.filtrLst.fltrGroup>li>label { display:block; width:100%; color:#333333; font-size:15px; line-height:18px; font-weight:bold; padding:5px 0; margin-bottom:5px; background:url('../../i/icons/icn-srcharrw.png') no-repeat right center; } ul.filtrLst.fltrOptn>li { padding:3px 0; width:100%; font-size:13px; line-height:14px; } ul.filtrLst.fltrOptn>li>label>input[type=checkbox] { float:left; margin-top:0.5px; margin-right:7px; } ul.filtrLst>li.lvl1 { padding-left:calc(0.5 * 5%); } ul.filtrLst>li.lvl2 { padding-left:calc(1 * 10%); background:url('../../i/fltr-tree-ln.png') no-repeat 3% center; } ul.filtrLst>li.lvl2:last-child, ul.filtrLst>li.lvl2:has(+ .lvl1), ul.filtrLst>li.lvl2:has(+ .lvl3) { background-image:url('../../i/fltr-tree-ln-end.png') !important; } ul.filtrLst>li.lvl3 { padding-left:18%; background:url('../../i/fltr-tree-ln.png') no-repeat 11% center; } ul.filtrLst>li.lvl3:last-child, ul.filtrLst>li.lvl3:has(+ .lvl2), ul.filtrLst>li.lvl3:has(+ .lvl1) { background-image:url('../../i/fltr-tree-ln-end.png') !important; } a.mblFiltrClose { display:none; } a.btnFiltr { display:none; } /* selected option */ .lstprdOptn { margin-top:10px; overflow:hidden; } ul.optPick { list-style-type:none; } ul.optPick>li { display:inline-block; position:relative; vertical-align:top; margin:5px 8px 5px 0; padding:5px 18px 5px 10px; border:1px #CCCCCC solid; border-radius:8px; } ul.optPick>li a.closeOpt { display:inline-block; position:absolute; top:3px; right:5px; width:7px; height:7px; background:url('../../i/icons/icn-closeopt.png') no-repeat center center; background-size:contain; opacity:0.6; } ul.optPick>li a.closeOpt:hover { opacity:1; } /* price range slider */ .price-input { width: 100%; display: flex; margin: 20px 0 25px; align-items: center; justify-content: center; } .price-input .field { display: flex; width: 100%; height: 10px; font-size:13px; line-height:13px; align-items: center; } .field input { width: 100%; height: 100%; outline: none; font-size: 12px; line-height: 13px; margin-left: 5px; border-radius: 5px; text-align: center; /*padding:8px 8px 6px 8px;*/ border: 1px solid #CCC !important; -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; } .price-input .separator { width: 20%; display: flex; font-size: 18px; line-height:18px; margin-top:3px; align-items: center; justify-content: center; } .slider { height: 3px; position: relative; background: #ddd; border-radius: 5px; } .slider .progress { height: 100%; /*left: 25%;*/left: 0; /*right: 25%;*/right: 0; position: absolute; border-radius: 5px; background: #4cbe8a; } .range-input { position: relative; } .range-input input { position: absolute; width: 100%; height: 5px; top: -5px; background: none; pointer-events: none; -webkit-appearance: none; -moz-appearance: none; } input[type="range"]::-webkit-slider-thumb { height: 15px; width: 15px; border-radius: 50%; background: #4cbe8a;/*#17a2b8;*/ pointer-events: auto; -webkit-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); } input[type="range"]::-moz-range-thumb { height: 15px; width: 15px; border: none; border-radius: 50%; background: #4cbe8a; pointer-events: auto; -moz-appearance: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.05); } /* ------- price range slider */ /* listing area */ .lstprdHead { padding:10px 15px; margin:10px 0 20px 0; display:flex; justify-content:center; align-items:center; border-radius:10px; background:rgba(186,218,204, 0.2); /*border-bottom:1px #DDDDDD solid;*/ } .lstprdSummry { margin-right:auto; } .lstprdSummry>span { font-weight:bold; } .lstprdOptn { margin-left:auto; } .lstprdBx { position:relative; min-height:50vh; } h1.lstprdTtl { font-size:24px; line-height:26px; color:var(--blue); margin-bottom:10px; display:flex; justify-content:flex-start; align-items:center; } h1.lstprdTtl>span { position:relative; display:inline-block; color:#CCCCCC !important; margin:auto 10px; width:5px; height:5px; background:#CCCCCC; border-radius:50%; font-weight:normal; } /* product carousel */ ul.prdBoxsLst { list-style-type:none; } ul.prdBoxsLst.listg { margin:10px -1.3%; } ul.prdBoxsLst.listg >li { position:relative; display:inline-block; width:17%; height:100%; margin:1.5% 1.3%; vertical-align:top; transition: all 0.5s ease; } ul.prdBoxsLst.listg.wshLst >li { width:13.7%; } ul.prdBoxsLst.listg >li.show { /*border:2px #0099CC dotted !important;*/ } ul.prdBoxsLst.listg >li.showLabel { /*border:2px #FF0000 dotted !important;*/ } ul.prdBoxsLst.listg >li.showBrand { /*border:2px #FF9900 dotted !important;*/ } ul.prdBoxsLst.listg >li.showPrice { /*border:2px #000000 dotted !important;*/ } ul.prdBoxsLst.listg >li.show.showLabel { /*border:2px #5ebb03 dotted !important;*/ } ul.prdBoxsLst.carouselList li.slick-slide { position:relative; margin:0 10px; } .prdLstThb { position:relative; width:100%; padding-bottom:115%; background-color:var(--prd-thb-bg); border:1px var(--prd-thb-line) solid; border-radius:5px; overflow:hidden; margin-bottom:15px; } .prdLstCnt { position:relative; text-align:left; } .prdLstName { font-size:13px; line-height:15px; margin-bottom:8px; } .prdLstName a { color:var(--list-link); } .prdLstName a:hover { color:var(--list-link-hover); } .prdLstCtaBx { display:flex; justify-content:flex-start; align-items:center; } .prdLstCtaBx a.lnkButton { margin:0; padding:7px 15px; font-size:0.85em; } .prdLstPrice { position:relative; color:#0077b6; font-size:15px; line-height:17px; font-weight:600; } .prdLstPrice::after{ /* float without overflow hidden */ clear: both; content: ''; display: block; } .prdPriceBx { float:left; width:86%; } .lstGrossIcn { z-index:10; position:absolute; top:1px; left:1px; width:10px; height:10px; background-color:#4cbe8a; border-radius:5px 0 3px 0; } ul.prdDetLst { list-style-type:none; } ul.prdDetLst>li { display:block; width:100%; font-size:13px; line-height:15px; padding:1px 0; } .bxLst { padding:25px 0; width:92% !important; } .bxLst.sml { padding:5px 0 30px 0; } .bxLst .carouselArrw.arrwPrev { left:-40px !important; top:-20%; } .bxLst .carouselArrw.arrwNext { right:-40px !important; top:-20%; } .bxLst ul.slick-dots { bottom:-25px; } .prdCrslLst { padding:25px 0; width:94% !important; } .prdCrslLst .carouselArrw.arrwPrev { left:-40px !important; top:-20%; } .prdCrslLst .carouselArrw.arrwNext { right:-40px !important; top:-20%; } /* wishlist */ .dtlPgWshLst { display:flex; justify-content:center; align-items:center; gap:20px; } .btnWshlst { display:inline-block; margin-left:auto; width:18px; height:18px; background:url('../../i/icons/icn-wishlist.svg?x=031123') no-repeat; background-position:0 0; opacity:0.5; transition:none !important; } .btnWshlst.rg { float:right; } .btnWshlst.on { background-position:-24px 0 !important; opacity:1.0; } .btnWshlst.off { opacity:0.3; } a.btnWshlst.dtlPg { position:relative; width:25px; height:25px; background-position:0 -22px !important; } a.btnWshlst.dtlPg.on { background-position:-30px -22px !important; opacity:1.0; } a.btnWshlst:hover { opacity:1.0; } /* PRODUCT DETAIL */ /* bread crumbs */ ul.crumbLst { list-style-type:none; } ul.crumbLst::after{ clear: both; content: ''; display: block; } ul.crumbLst>li { float:left; padding-right:18px; background:url('../../i/icons/icn-crumbcv.png') no-repeat right center; margin-left:8px; } ul.crumbLst>li:first-child { margin-left:0; } ul.crumbLst>li:last-child { background-image:none; font-weight:bold; } ul.crumbLst>li>a { color:#333333; } ul.crumbLst>li>a:hover { color:#4cbe8a; } ul.crumbLst.sm>li { font-size:0.9em; opacity:0.8; } /* detail product */ .colPrdPic { position:sticky !important; top:150px !important; /*position:relative;*/ width:28% !important; } .colPrdDesc { width:42% !important; margin:0 3% 0 5%; } .colPrdSide { position:sticky !important; top:150px !important; width:22% !important; } .rowBx.prdDetail { margin-top:40px; } /* product description block */ ul.prdDescBlock { list-style-type:none; } ul.prdDescBlock>li { position:relative; border-top:1px #DDDDDD solid; padding:20px 0; } ul.prdDescBlock>li.prdCatBar { font-size:14px; padding:10px 0; } ul.prdDescBlock>li:first-child { padding-top:0; border:0; } ul.prdDescBlock>li>label { display:block; font-size:14px; line-height:18px; color:#CCCCCC; font-weight:bold; margin-bottom:10px; } ul.prdDescBlock>li.share { display:flex; justify-content:flex-start; align-items:center; column-gap:7px; } ul.prdDescBlock>li.share>label { display:inline-block; margin:0; font-size:0.8em; } h1.prdName { font-family:var(--font-family-normal); font-size:20px; line-height:26px; font-weight:500; margin-bottom:10px; } .priceBx { color:#0077b6; font-weight:bold; font-size:22px; line-height:26px; font-weight:bold; } .priceBx .sep { color:#666666; font-size:15px; font-weight:normal; padding:0 3px; } .priceDsc { display:block; font-size:12px; line-height:16px; margin-top:3px; } .priceDsc>label { display:inline-block; padding:2px 4px; font-size:11px; font-weight:bold; background:#FFFF00; margin-right:3px; border-radius:5px; } .priceDsc>strike { display:inline-block; color:#999999; font-weight:normal; } /* product detail page */ .colPrdDesc .priceDsc { font-size:13px; line-height:13px; margin-top:5px; } .colPrdDesc .priceDsc>label { padding:2px 5px; font-size:12px; } /* -------- */ ul.prdCondt { list-style-type:none; display: grid; grid-template-columns: 40% 60%; grid-auto-rows: 1fr; grid-column-gap: 5px; grid-row-gap: 4px; } ul.prdCondt>li { color:#0099CC; } ul.prdCondt>li.fullCol { grid-column: 1/ span 2; width:100%; } ul.prdCondt>li>label { display:inline-block; font-weight:bold; margin-right:8px; color:#333333; } .prdMsgBx { position:relative; overflow:hidden; } .prdMsgBx.msgBrief { margin-top:15px; margin-bottom:20px; } .prdMsgBx ul,.prdMsgBx ol { margin-left:19px; } .prdMsgBx li { padding:1px 0; } .prdMsgBx.msgUse ul { margin:0; text-align:left; display: grid; overflow: hidden; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-column-gap: 5px; grid-row-gap: 4px; } .prdMsgBx.msgUse li { margin:0 5px 0 20px; } .prdMsgBx.msgSpek ul { list-style-type:none; margin:0 0 10px 0; } .prdMsgBx.msgSpek ul>li { overflow:hidden; padding:8px 2px; } .prdMsgBx.msgSpek ul>li:nth-child(odd) { background-color:#F6F6F6; } .prdMsgBx.msgSpek ul>li>label { float:left; width:32%; margin-right:4%; font-size:0.98em; line-height:1.2em; } .prdMsgBx.msgSpek ul>li>span { position:relative; float:left; width:61%; padding-left:2%; font-size:0.98em; line-height:1.2em; font-weight:bold; } .prdMsgBx.msgSpek ul>li>span::before { content:':'; position:absolute; left:0; font-weight:normal; } /* read more hide cover */ .read-more-wrap { position:relative; padding-bottom:10px; } .read-more-cover { z-index:1; position:relative; max-height:100px; overflow:hidden; transition: all 0.5s ease; } .read-more-cover.bgCover { max-height:120px; } .read-more-cover::after { z-index:2; position:absolute; content:''; left:0; right:0; bottom:0; height:50%; background-image:linear-gradient(rgba(255,255,255, 0.3),rgba(255,255,255, 1)); } .read-more-cover.smlCover::after { height:25%; } a.cvrTrg { display:none; z-index:4; position:absolute; bottom:10px; right:0; font-size:12px; line-height:14px; color:#05cbe8; opacity:1; background:#FFFFFF; } a.cvrTrg:hover { opacity:0.7; } .read-more-state { display: none; } .read-more-trigger { cursor:pointer; z-index:4; position:absolute; bottom:0; right:0; font-size:12px; line-height:14px; color:#05cbe8; opacity:1; background:#FFFFFF; } .read-more-state ~ .read-more-trigger:before { content: 'show more +'; } .read-more-state:checked ~ .read-more-trigger:before { content: 'show less -'; } .read-more-state:checked ~ .read-more-cover { max-height:none; } .read-more-state:checked ~ .read-more-cover::after { display:none; } /* rating */ .ratingBx { position:relative; } .ratingBx>label { display:block; font-size:11px; line-height:12px; } .ratingWrapper { position:relative; margin:5px 0; font-size:13px; line-height:20px; color:#CCCCCC; } .ratingStar { float:left; margin-right:6px; width: 83px; height: 15px; display: block; background: url('../../i/icons/icn-rtstars.png') 0 0 no-repeat; } .rating-50 { background-position: 0 0; } .rating-40 { background-position: -17px 0; } .rating-30 { background-position: -34px 0; } .rating-20 { background-position: -51px 0; } .rating-10 { background-position: -68px 0; } .rating-0 { background-position: -85px 0; } .rating-5 { background-position: -68px -25px; } .rating-15 { background-position: -51px -25px; } .rating-25 { background-position: -34px -25px; } .rating-35 { background-position: -17px -25px; } .rating-45 { background-position: 0 -25px; } /* product photo preview */ .prdPicFrm { position:relative; width:100%; padding-bottom:100%; border-radius:10px; overflow:hidden; margin-bottom:20px; } ul.picBxLst { position:absolute; left:0; right:0; top:0; bottom:0; list-style-type:none; } ul.picBxLst>li { position:relative; width:100%; padding-bottom:100%; background:#FCFCFC; } ul.picBxLst.carouselList li.slick-slide { position:relative; width:100%; height:100%; background:#FCFCFC; display:flex !important; justify-content:center; align-items:center; } ul.picBxLst.carouselList.slick-slider, ul.picBxLst.carouselList .slick-list, ul.picBxLst.carouselList .slick-track { height: 100% !important; } /* pic slide */ ul.slideImgLst { position:relative; margin-bottom:30px; padding-bottom:10px; list-style-type:none; } ul.slideImgLst>li { position:relative; width:100%; } ul.slideImgLst.carouselList li.slick-slide { position:relative; display:flex !important; justify-content:center; align-items:center; overflow:hidden !important; height:100%; border-radius:7px !important; } ul.slideImgLst li .imgFrame>img { width:auto !important; max-width:100% !important; } ul.slideImgLst ul.slick-dots { position:relative; bottom:-10px !important; } /* product thumbnail */ .prdBlock { position:relative; margin-top:40px; } .prdBlock.blockBx { border:1px var(--side-box-border) solid; border-radius:8px; box-shadow: 0 0 5px 0 rgba(0,0,0, 0.1); padding:4%; width:90.5%; margin-top:20px; min-height:120px; overflow:hidden; } .prdBlock.grnBx { background-color:var(--side-box); } .prdBlock.vchrBlock { min-height:40px; } .prdBlock:first-child { margin-top:0; } .prdThbFrm { position:relative; width:100%; padding-bottom:20%; } .blockCntBx { position:relative; width:100%; margin:10px 0; } .blockCntBx.bordr { border-top:1px #333333 dashed; } .blockCntBx.smlBx { margin:5px 0; min-height:30px; width:100%; } .blockCntBtn { display:block; text-align:center; padding:10px 0; } .blockNt { font-size:12px; line-height:15px; font-style:italic; color:#999999; margin-top:10px; } ul.lstCarouselThb { position:absolute; left:0; right:0; top:0; bottom:0; list-style-type:none; } ul.lstCarouselThb li { cursor:pointer; position:relative; width:25%; vertical-align:top; height:100%; margin:0 5px !important; overflow:hidden; border-radius:5px; background:#DDDDDD; display:flex !important; justify-content:center; align-items:center; } ul.lstCarouselThb .slick-list { /*padding:0 10% 0 0 !important;*/margin:0 !important; }/* negatif margin to remove gap in left & right item, while padding to add part reveal for prev or next item */ ul.lstCarouselThb.carouselList.slick-slider, ul.lstCarouselThb.carouselList .slick-list, ul.lstCarouselThb.carouselList .slick-track { height: 100% !important; } .thArrwBx { z-index:20; position:absolute; top:0; bottom:0; width:13%; } .thArrwBx.bxPrev { left:0 !important; background-image:linear-gradient(to right, rgba(255,255,255, 1),rgba(0,0,0, 0)); } .thArrwBx.bxNext { right:0 !important; background-image:linear-gradient(to left, rgba(255,255,255, 1),rgba(0,0,0, 0)); } .thumbArrw { cursor:pointer; position:absolute; width:22px; height:22px; top:0; bottom:0; margin:auto; border-radius:50%; background-image:url('../../i/icons/icn-arrw-sm.png'); background-repeat:no-repeat; background-repeat:no-repeat; opacity:0.3; transition: all 0.5s; } .thumbArrw:hover { opacity:1.0; } .thumbArrw.arrwPrev { left:0 !important; background-position:0 0 !important; } .thumbArrw.arrwNext { right:0 !important; background-position:-62px 0 !important; } /* product files download */ .prdDwnld { position:relative; } h2.blockTtl { display:block; font-size:20px; line-height:22px; padding-bottom:10px; border-bottom:1px #333333 dashed; margin-bottom:20px; } h4.blockTtl { display:block; font-size:18px; line-height:20px; padding-bottom:10px; border-bottom:1px #333333 dashed; margin-bottom:20px; } h5.blockTtl { display:block; font-family: 'Poppins', sans-serif; font-size:16px; line-height:20px; color:var(--side-box-title); margin-bottom:15px; } h5.blockTtl.voucherTtl { color:#FF9900; margin-bottom:12px; } ul.dwnldLst { list-style-type:none; } ul.dwnldLst>li { display:block; position:relative; margin:15px 0; } /* AGENT PROFILE */ .agtBx { position:relative; width:100%; display:flex; justify-content:center; align-items:center; flex-direction:column; } .agtAvatar { position:relative; width:50%; padding-bottom:50%; border-radius:50%; overflow:hidden; background-color:#FFFFFF; } .agtProfile { width:80%; margin:10px 0; text-align:center; } .agtProfile>h6 { font-size:20px; margin-bottom:5px; color:var(--dark-blue); } ul.agtLst { list-style-type:none; } ul.agtLst>li { font-size:0.9em; } ul.agtLst>li.idBox { display:inline-block; padding:0 10px; border-radius:5px; font-size:0.8em; background-color:#EEEEEE; } ul.agtLst>li>label { color:#999999 } ul.buyBtnCol { list-style-type:none; display:flex; justify-content:center; align-items:center; gap:4%; } ul.buyBtnCol>li { } .sharethis-inline-share-buttons { z-index:10 !important; } /* BLOG */ .readBlock { position:relative; margin-top:15px; } .rowBx.blogDetail { margin-top:20px; } .colReadDesc { width:64% !important; margin:0; } .colReadSide { width:28% !important; } .readCatRw { display:block; margin-bottom:5px; } .readMsgBx { position:relative; text-align:justify; } .readMsgBx h1, .readMsgBx h2, .readMsgBx h3, .readMsgBx h4, .readMsgBx h5, .readMsgBx h6 { margin-top:40px; margin-bottom:18px; } h1.readTitle { font-size:26px; line-height:28px; font-weight:600; margin-bottom:10px; } /* other post */ ul.otrPostLst { list-style-type:none; padding:10px 0; border-top:4px #DDDDDD solid; } ul.otrPostLst>li { padding:5px 0; border-top:1px #DDDDDD dashed; } ul.otrPostLst>li.on { font-weight:bold; color:#000000; font-size:1.1em; } ul.otrPostLst>li:first-child { border-top:0; } ul.otrPostLst>li>a { color:#333333; opacity:0.8; } ul.otrPostLst>li>a:hover { opacity:1; } /* PAGE HEADER */ h1.pgTtl { font-size:28px; line-height:30px; } h1.pgTtl.xl { font-size:32px; line-height:34px; } h2.pgSubTtl { font-size:1.3em; line-height:1.2em; } h3.pgSectionTtl { font-size:28px; line-height:28px; } .ttlLn { padding-bottom:10px; border-bottom:1px #666666 dashed; } h1.ttlLn,h2.ttlLn,h3.ttlLn { text-align:left; } /* PAGE SIDE NOTE */ .pgNoteBx { position:relative; width:80%; } h2.pgNoteTtl { margin-bottom:30px; } .pgNoteMsg { } /* PAGE READ */ .pageHeader { position:relative; margin-bottom:25px; } .rowBx.pageDetail { margin-top:10px; max-width:1150px; } .pageDetail .colReadSide { width:28% !important; } .pageDetail .colReadDesc { width:66% !important; margin:0; } .pageBlock { position:relative; margin-top:10px; } .pgSubTtlBx { padding:5px 0; margin-bottom:20px; border-top:2px #CCCCCC dashed; border-bottom:2px #CCCCCC dashed; } .pgSubTtlBx>h1, .pgSubTtlBx>h2, .pgSubTtlBx>h3, .pgSubTtlBx>h4 { margin-bottom:3px; } .pageMsgBx { position:relative; /*text-align:justify;*/ } .pageMsgBx ul, .pageMsgBx ol { margin:10px 0 10px 16px; } .pageMsgBx li { text-align:left; } .pageImage { position:relative; } /* TABLE POINTS */ .PDVSC-SHOPSAFE ul { list-style-type:none; overflow:hidden; margin:0; padding:0; } .PDVSC-SHOPSAFE ul>li { float:left; width:27%; margin:2% 6% 2% 0; height:0; padding-bottom:50%; } .PDVSC-SHOPSAFE ul h3 { font-size:18px; line-height:20px; text-align:left; } .tbPtImg { margin-bottom:10px; } .tbPtImg img { max-width:100% !important; } .tgIcn { display:inline-block; width:16px; height:15px; margin:0 1px; background-repeat:no-repeat; background-position:center center; } /* CUSTOM CSS: TABLE GRID */ ul.tblGrid { list-style-type:none; margin:10px 0; padding:0; display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:5%; } ul.tblGrid>li { flex-grow:1; width:28%; } ul.tblGrid>li h3 { font-size:1.3em; line-height:1.2em; } /* ACCOUNT */ .accWrapper { width:100%; } .accFrmBx { position:relative; width:90%; display:block; border:1px #DDDDDD solid; background-color:#FFFFFF; border-radius:10px; padding:25px; box-shadow: 1px 1px 5px 0 rgba(0,0,0, 0.1); } .accFrmBx.loginBx { max-width:500px; } .accFrmMsgBx { margin:20px 0; } .accFrmHeader { position:relative; margin-bottom:30px; } .accFrmBody { position:relative; width:100%; } /* registration */ .colRegFrm { width:50% !important; } .colRegNt { width:40% !important; } /* login */ .colLognFrm { width:44% !important; } .colLognNt { position:relative; width:50% !important; padding-bottom:28%; border-radius:20px; overflow:hidden; } /* form */ label.fieldNm { display:block; margin-bottom:5px; font-size:11px !important; line-height:13px !important; letter-spacing:0.4px !important; font-weight:normal; opacity:0.6; } label.fieldChat { display:block; font-size:13px; line-height:16px; } /* otp */ .sendOTPBx { position:absolute; bottom:15%; right:0; width:56% !important; } .OTPKey { width:40% !important; } input.flOtp { display:inline-block; width:10%; border:2px #999999 solid !important; border-radius:10px; padding:10px; margin-left:5px; background:#FFFFFF; text-align:center; font-size: 1.2em; text-transform:uppercase; } input.flOtp:first-child { margin-left:0; } span.otpTimer { color:#666666; } span.otpTimer.off { color:#DDDDDD; } a.resendOTP.off { color:#DDDDDD; cursor:default; } /* login required cover */ .lgnRegBx { position:relative; } .lgnRegCvr { z-index:100; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.98); display:flex; justify-content:center; align-items:center; text-align:center; padding:10px; } .lgnRegCvr.softSee { background:rgba(255,255,255,0.85); } .lgnRegCvr>label { display:block; } /* WHOLESALE PRICE */ .prdWholesaleBx { display:none; margin-top:20px; } .prdWholesaleBx.dispOn { display:block; } .prdWholesaleBx>label { position:relative; display:inline-block; font-size:0.9em; line-height:0.9em; color:#FFFFFF; padding:6px 15px 6px 6px; border-radius:5px; font-weight:bold; margin-bottom:13px; background:#990000; } .prdWholesaleBx>label::after { content:'';top:0; bottom:0; left:99%; margin:auto; position:absolute; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 10px solid #990000; } /* CUSTOM CHECKBOX BUTTON */ .prdOptionBx { margin-top:20px; padding-top:5px; border-top:1px #DDDDDD solid; } .optBx { position:relative; margin-top:10px; } .optBx>label { position:relative; display:inline-block; padding-right:5px; font-size:15px; margin-left:2px; margin-bottom:6px; font-weight:bold; } .optBx>label>span.selOptLabel { font-weight:normal; font-size:16px; margin-left:5px; } ul.optChkBx { list-style-type:none; overflow:hidden; } ul.optChkBx>li { position:relative; float:left; margin:0 10px 8px 0; overflow:hidden; } ul.optChkBx>li label { float:left; } ul.optChkBx>li label span { cursor:pointer; text-align:center; padding:5px 13px; display:block; font-size:15px; white-space:nowrap; background:#FFFFFF; border:1px #DDDDDD solid; border-radius:10px; } ul.optChkBx>li:hover label span { background:#F0F0F0; } ul.optChkBx>li label input { position:absolute; top:-20px; } ul.optChkBx>li input:checked + span { background-color:rgba(186,218,204, 0.5); border:1px #fbe8f1 solid; color:#e88cb8; } ul.optChkBx>li input:disabled + span { opacity:0.3; background:#DDDDDD; } /* wholesale checkbox */ ul.optChkBx.whlSl>li label span { font-size:12px; line-height:12px; } ul.optChkBx.whlSl>li label span b { font-size:18px; line-height:20px; font-weight:bold; } ul.optChkBx.whlSl>li label span>p { display:block; margin-bottom:3px; font-size:11px; line-height:12px; padding-bottom:3px; opacity:0.8; font-weight:normal; border-bottom:1px #CCCCCC dashed; } ul.wholesalePrcLst { list-style-type:none; overflow:hidden; } ul.wholesalePrcLst>li { position:relative; float:left; margin:0 10px 8px 0; padding:5px 10px; border-radius:3px; background-color:#EFEFEF; overflow:hidden; text-align:center; } .wholesaleLmt { margin-bottom:3px; font-size:11px; line-height:12px; padding-bottom:3px; opacity:0.8; font-weight:normal; border-bottom:1px #CCCCCC dashed; } .wholesalePrc { font-size:12px; line-height:12px; } .wholesalePrc>b { font-size:1.3em; line-height:1.1em; font-weight:bold; } /* selected item */ ul.wholesalePrcLst>li.selectOn { background-color:rgba(186,218,204, 0.5); } ul.wholesalePrcLst>li.selectOn .wholesalePrc>b { color:#e88cb8; } /* PURCHASE QTY */ .detOrdrNum { font-size:12px; margin-bottom:6px; padding-left:22px; color:#999999; background:url('../../i/icons/icn-order-num.png?xyz=1211') no-repeat left center; } .detOrdrNum>span { color:#3097dc; } ul.detBx { list-style-type:none; } ul.detBx>li { position:relative; width:100%; padding:7px 0; border-top:1px #999999 dashed; } ul.detBx>li:first-child { border-top:0; padding-top:0; } ul.detBx>li:last-child { border-top:0; padding-bottom:0; } ul.detBx>li::after{ clear: both; content: ''; display: block; } ul.detBx>li.detSumLst { font-size:13px; padding:0; border:0; } ul.detBx.confrm>li.detSumLst { padding:2px 0; } ul.detBx>li.detGrdTtl { border-top:5px #EEEEEE solid; margin-top:8px; } ul.detBx>li.detAmount { font-size:14px !important; } ul.detBx>li.detSave { color:#0099CC; font-size:11px !important; line-height:12px; text-align:right; padding-bottom:3px; font-style:italic; } span.percentSaving { margin-right:8px; } .sumLabel { float:left; font-size:0.9em; opacity:0.8; } .sumLabel.labelDisc { font-style:italic; } .sumLabel>label { font-size:0.8em; } ul.detBx>li.detSaveFn { color:#0099CC; font-size:24px !important; } ul.detBx>li.detBuyItm { padding:0 !important; } ul.detBx>li.detBuyItm>ul { margin:10px 0 10px 25px; } ul.detBx.detAddrs>li { font-size:14px; padding:10px 0 5px 0; border-top:1px #DDDDDD dashed; } ul.detBx.detAddrs>li:first-child { border:0; padding-top:5px; } ul.detBx>li.tncConf { overflow:hidden; width:92%; padding:6px 4%; margin-top:10px; background:#F9F9F9; border-radius:5px; border:1px #CCCCCC dashed; } ul.detBx>li.tncConf input[type=checkbox] { float:left; width:5%; margin:2px 0; } ul.detBx>li.tncConf span { float:right; width:91%; } ul.detBx>li>label { display:block; font-size:0.7em; line-height:1.2em; opacity:0.8; padding-left:2px; margin-bottom:4px; } ul.detBx>li.tncConf.ordStatus { font-size:1.2em; padding:10px 4%; text-align:center; color:#0099CC; font-weight:bold; border:1px #0099CC dashed; } span.detTotal { display:inline-block; float:right; font-weight:bold; font-size:18px; } span.ttlItems { font-size:16px !important; } span.ttlSaving { font-size:11px !important; } span.ttlNorm { font-weight:normal !important; } span.ttlDisc { font-size:14px !important; } .detSaving { display:block; width:100%; text-align:right; font-size:12px; font-style:italic; color:#0099CC; opacity:0.6; } .detQty { position:relative; width:94%; margin-right:10px; margin-top:1px; text-align:center; background:#FFFFFF; border-radius:20px; border:2px #CCCCCC solid; overflow:hidden; } #prdQty.detQty { width:50%; } .noAccess { opacity:0.4 !important; } .noAccess::before { z-index:5; content:''; position:absolute; top:0; bottom:0; left:0; right:0; } .detStock { font-size:12px; line-height:15px; margin-right:auto; color:#999999; } input.detFldQty { width:48% !important; text-align:center; margin:0; border:0 !important; padding:8px; background:transparent !important; font-size:16px; color:#333333; } input.detFldQty:focus { border:0 !important; } a.qtyBtn { display:inline-block; cursor:pointer; position:absolute; top:0; bottom:0; width:30px; font-size:1.3em; background:#EEEEEE; display:flex; justify-content:center; align-items:center; opacity:0.6; } a.qtyBtn:hover { opacity:1.0; } a.qtyBtn.add { right:0; border-left:1px #DDDDDD solid; } a.qtyBtn.add::before { content:'+'; } a.qtyBtn.min { left:0; border-right:1px #DDDDDD solid; } a.qtyBtn.min::before { content:'-'; } .prdBuyNote { display:none; width:92%; padding:6px 4%; background:#FFFFFF; border-radius:5px; font-size:11px; line-height:14px; margin:5px 0; box-shadow: 1px 1px 5px 0 rgba(0,0,0, 0.1); } /* select send address */ a.lnkEdit { display:none; position:absolute; top:14px; right:0; width:22px; height:22px; border-radius:50%; background-color:#FFFFFF; border:1px #CCCCCC solid; opacity:0.7; transition: all 0.5s; } a.lnkEdit:hover { opacity:1.0; } a.popClose { display:inline-block; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; opacity:0.7; transition: all 0.5s; } a.popClose:hover { opacity:1.0; } .sendAddrs { transition: all 0.5s; } .sendAddrs:hover>a.lnkEdit { display:inline-block; } .addrsSelBx { display:none; z-index:100; position:absolute; right:0; top:27px; text-align:left; padding:10px; background-color:#FFFFFF; border-radius:5px; overflow:hidden; box-shadow: 1px 1px 5px 0 rgba(0,0,0, 0.1); } .addrsSelDisp { position:relative; } .addrsSelArea { width:350px; min-height:100px; max-height:50vh; overflow-y:auto; } ul.addrsLst { list-style-type:none; } ul.addrsLst>li { cursor:pointer; position:relative; padding:0; border-top:1px #CCCCCC dashed; } ul.addrsLst>li:hover { background-color:#FCFCFC; } ul.addrsLst>li.pick { background-color:rgba(186,218,204, 0.2); } ul.addrsLst>li.pick::after { content:''; position:absolute; top:13px; right:7px; width:16px; height:16px; background:url('../../i/icons/icn-check.png') no-repeat center; } ul.addrsLst>li>label { cursor:pointer; display:block; padding:10px 5px; } .addrsLstLbl { font-size:15px; font-weight:bold; margin-bottom:2px; } .addrsLstCnt { font-size:12px; line-height:16px; } input.pckAddress { display:none; } /* SHOPPING CART */ .cartWrap { max-width:1100px; } .colCartBx { position:relative; width:70% !important; } .colCartSide { position:sticky !important; top:150px !important; width:25% !important; } .colCartBx.confBx { width:60% !important; } .colCartSide.confBx { width:35% !important; } .cartOff { z-index:10; display:flex; justify-content:center; align-items:center; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255, 0.8); } .cartOff>span { display:inline-block; padding:5px 10px; font-size:12px; line-height:14px; font-style:italic; font-weight:bold; color:#666666; background:#FFFFFF; border-radius:10px; border:1px #DDDDDD solid; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); } ul.cartTbl { position:relative; list-style-type:none; grid-template-columns: 7% 46% 13% 19% 5%; grid-column-gap: 2%; grid-row-gap: 2px; margin:0; overflow:visible; } ul.cartTbl>li { position:relative; padding:3px 5px; overflow:visible; } ul.cartTbl.gridBx>li { overflow:visible !important; } ul.cartTbl>li img { max-width:100%; } ul.cartTbl.tblHeader { border-bottom:2px var(--tbl-header-line) solid; margin-bottom:10px; } ul.cartTbl.tblHeader>li { font-weight:bold; color:var(--tbl-header-text); } ul.cartTbl.tblHeader>li::before { content:''; position:absolute; left:0; bottom:0; width:1px; height:6px; background-color:var(--tbl-header-bg); } ul.cartTbl.tblHeader::after { content:''; position:absolute; right:0; bottom:0; width:1px; height:6px; background-color:var(--tbl-header-bg); } ul.cartTbl>li .cartItem a { color:#000000; opacity:0.8; font-size:15px; line-height:20px; } ul.cartTbl>li .cartItem a:hover { opacity:1.0; } .cartTblBx { position:relative; width:100%; /*max-height:40vh; overflow-y:auto;*/ } .cartTblBx ul.cartTbl { border-top:1px #DDDDDD dashed; padding:8px 0; } .cartTblBx ul.cartTbl:first-child { border-top:0; } .cartTblBx ul.cartTbl>li { padding:5px; } .cartTblBx ul.cartTbl>li a.qtyBtn { font-size:1em; width:23px; } .cartTblBx ul.cartTbl>li input.detFldQty { font-size:14px; padding:4px; } .cartTblFoot { display:block; margin-top:20px; padding:20px 0; border-top:1px #DDDDDD solid; } .tblCellSKU { display:block; font-size:0.8em; letter-spacing:0.4px; } .tblCellSKU>label { display:inline-block; opacity:0.4; margin-right:4px; } .tblCellName { display:flex !important; align-item:center !important; flex-direction:column; } .tblCellPrice { text-align:right !important; padding:10px 5px !important; } .tblCellPrice>label { float:left; margin-left:5px; display:inline-block; font-size:0.9em; opacity:0.4; } .tblCellDel { z-index:50; text-align:center !important; padding:10px 5px !important; } .tblCellThb { } .tblCellThb>.imgFrame { align-items:flex-start; margin-top:8px; } .tblCellOpt { width:100%; display:flex; align-item:flex-start; justify-content:flex-start; } .cartItem { margin:auto 0; display:block; font-size:1.2em; font-weight:bold; } .cartAmount { position:relative; display:block; margin-bottom:3px; color:#000000; } .cartSaving { color:#0099CC; font-size:11px !important; line-height:16px; font-style:italic; } .cartSaving>span { color:#999999; } .cartOpt { font-size:0.85em; width:90%; margin-right:5%; } .cartEmptNt { height:150px; margin-bottom:50px; opacity:0.7; } .cartEmptNt>span { width:80%; text-align:center; font-size:14px; } a.emptyCart { font-size:0.9em; } a.delCartItem { } #totalShip>span { font-size:13px; font-style:italic; color:#999999; } #shipWA { display:none; position:relative; padding-top:5px; } #shipWA>label { display:block; color:#027906; font-size:0.65em; line-height:1.2em; font-style:italic; padding:5px; } input.waFld { background:rgba(37,211,102, 0.1) url('../../i/icons/icn-fld-wa.png?xyz=2053') no-repeat 5px center; padding:3px 5px 2px 30px; font-size:15px; letter-spacing:1px; line-height:15px; width:84%; border:1px #25D366 dashed !important; } /* cart item note */ ul.cartFunc { list-style-type:none; width:5%; min-height:20px; } ul.cartFunc>li { position:relative; } .noteBx { display:none; position:absolute; top:-10px; right:110%; width:270px; padding:5px 7px; background-color:#F6F6F6; border:1px #DDDDDD solid; border-radius:3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .noteBx.shw { display:block; } textarea.cartNoteMsg { font-size:11px; line-height:14px; border-radius:3px; height:30px; padding:3px; background:#FFFFFF; border:1px #DDDDDD solid !important; } .noteFunc { display:flex; align-item:center; justify-content:flex-start; gap:5px; margin-top:3px; } a.addCartNote { position:relative; } a.addCartNote.hasNt::after { z-index:5; content:''; position:absolute; width:5px; height:5px; top:-1px; right:0; border-radius:50%; background:#FF0000; } a.btnNote { display:inline-block; padding:4px 10px; color:#FFFFFF; font-size:10px; line-height:11px; font-weight:bold; border-radius:3px; } a.saveCartNote { background-color:#0099CC; } a.cancelCartNote { background-color:#999999; } a.delCartNote { } /* PURCHASE CONFIRMATION */ ul.cartConfTb { list-style-type:none; } ul.cartConfTb>li { padding:10px 0; margin:20px 0; } ul.cartConfTb>li:first-child { margin-top:0; } ul.cartConfDtl { list-style-type:none; margin-top:5px; } ul.cartConfDtl>li { padding:1px 0; } ul.cartConfDtl>li>label { display:inline-block; opacity:0.5; font-size:0.9em; width:110px; } ul.gridBx.cartAddrCol { grid-template-columns: 38% 60%; margin-top:5px; } ul.detlAddrs { list-style-type:none; } ul.detlAddrs>li { margin:3px 0; } .detlItemsBx { display:block; border:1px #DDDDDD solid; border-radius:5px; padding:10px 25px; margin-top:15px; } a.lnkDtlPay { display:inline-block; padding:3px 7px; border-radius:5px; background:#FFFFFF; border:1px #0099CC dashed; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } a.lnkDtlPay.doneOrd { background-color:rgba(125,209,4, 0.3); border:1px #70bc03 dashed; color:#000000; } a.lnkDtlPay.doneOrd:hover { background-color:rgba(149,252,3, 0.4); } /* confirmation item list */ ul.dtlItmLst { list-style-type:none; } ul.dtlItmLst>li { position:relative; padding:10px 5px; border-top:1px #DDDDDD dashed; display:flex; justify-content:flex-start; align-items:center; gap:4%; } ul.dtlItmLst>li:first-child { border-top:0; } ul.dtlItmLst>li.offItm::before { content:''; position:absolute; background-color:rgba(255,255,255, 0.8); top:0; bottom:0; left:0; right:0; } .dtlItmThb { width:10%; } .dtlItmThb img { max-width:100%; border-radius:5px; } .dtlItmTxt { width:80%; font-size:13px; line-height:17px; } .dtlItmTxt>label { display:block; margin-bottom:3px; font-weight:bold; font-size:15px; } .dtlItmTotal { display:block; padding:10px 5px; margin-top:5px; font-size:18px; font-weight:bold; border-top:1px #DDDDDD solid; } .dtlItmTotal>label { margin-bottom:0; } .tbNote { font-size:11px; font-style:italic; color:#0099CC; margin-top:2px; } .noteLbl { opacity:0.5; font-style:normal; color:#333333; } /* CART ALERT */ .cartErr { position:relative; padding:10px 20px; background-color:#f58466; color:#FFFFFF; border-radius:7px; margin-bottom:20px; } /* VOUCHER PROMO */ a.vchrLnk { width:80%; margin:auto; display:block; font-size:13px; line-height:13px; padding:5px 10px; border:1px #999999 dashed; border-radius:5px; text-align:center; } .vchrArea { position:relative; display:none; } .vchrArea.showBx { display:block; } .vchrBx { position:relative; display:flex; justify-content:center; align-items:center; transition: all 0.5s; } .vchrBx.process::before { content:''; z-index:10; position:absolute; top:-3px; bottom:-3px; left:-3px; right:-3px; background:rgba(255,255,255, 0.8) url('../../i/ajx-loading-sm.png') no-repeat center; } input.vchrFld { width:58%; border:1px #CCCCCC solid !important; font-size:16px; line-height:16px; margin-right:2%; text-align:center; border-radius:5px; padding:1px 5px; color:#5dc277 !important; text-transform:uppercase; font-weight:bold; } input.vchrFld:focus { border:1px #CCCCCC solid !important; } a.vchrBtn { background:transparent; border:0; width:20px; height:20px; padding:2px; margin-left:0; border-radius:50%; overflow:hidden; } a.vchrBtn:hover { background-color:#EEEEEE; } .vchrAlert { display:none; font-size:0.7em; line-height:1em; color:#FF0000; text-align:center; width:80%; margin:0 auto 5px auto; opacity:0.8; } /* selected voucher */ .vchrPickBx { position:relative; display:none; padding:6px 25px 6px 7px; border:2px #fbe8f1 dashed; border-radius:5px; background:rgba(186,218,204, 0.3); } /*.vchrPickBx>.vchrAlert { position:absolute; top:0; bottom:0; left:0; right:0; width:100%; margin:0; background-color:rgba(255,255,255, 0.9); } .vchrPickBx>.vchrAlert>span { display:inline-block; margin:15px; }*/ a.vchrPickClose { position:absolute; display:inline-block; background:url('../../i/icons/icn-close-sm.png') no-repeat center; background-size:90%; width:13px; height:13px; top:4px; right:4px; opacity:0.5; } a.vchrPickClose:hover { opacity:1; } .vchrPickCd { display:block; color:#0099CC; font-size:15px; line-height:17px; font-weight:bold; margin-bottom:3px; padding:2px; background:#FFFFFF; border-bottom:1px #DDDDDD dashed; } .vchrPickBrf { color:#333333; font-size:10px; line-height:12px; padding:2px; } /* voucher list */ .vchrOpt { position:relative; margin-top:10px; width:100%; min-height:20px; } .vchrOpt.loading::after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; background:url('../../i/ajx-loading-sm.png') no-repeat center; } ul.vchrLst { list-style-type:none; } ul.vchrLst.owl-carousel .owl-item>li { cursor:pointer; margin:3px; border:1px #DDDDDD dashed; border-radius:5px; } ul.vchrLst.owl-carousel .owl-item>li:hover { background:#FCFCFC; box-shadow: 1px 1px 4px rgba(0,0,0,0.1); } ul.vchrLst.owl-carousel .owl-item.active>li { background-color:#FCFCFC; border:1px #CCCCCC solid; } .vchrCoupn { width:98%; height:55px; margin:0 5px; display:flex; justify-content:center; align-items:center; } .coupnThb { position:relative; width:28%; height:100%; margin:0 1%; text-align:center; background-repeat:no-repeat; background-position:center; background-size:contain; border-right:1px #999999 dashed; } .coupnMsg { width:70%; margin:0 3%; } .coupnMsg .vchrPickCd { background:transparent; } .coupnMsg .vchrPickBrf { font-size:9px; line-height:10px; } /* BLOG */ .blogBlock { position:relative; } ul.blogLst { list-style-type:none ; overflow:hidden; margin:0 -2%; } ul.blogLst>li { width:29%; margin:0 2%; text-align:left; padding:30px 0; border-bottom:1px #DDDDDD dashed; } ul.gridTile>li { display:none; } /* hide before masonry loaded */ ul.gridTile.preload { height:50px; background:url('../../i/lz-loading.png') no-repeat 3% center; } .blogThb { position:relative; width:100%; text-align:left; margin-bottom:22px; } .blogThb img { max-width:100%; } .blogCnt { text-align:left; } .blogTtl { font-size:22px; line-height:26px; color:#333333; font-weight:700; margin-bottom:15px; } .blogBrf { font-size:14px; line-height:19px; color:#333333; } /* OWL CAROUSEL */ .owl-carousel .owl-dots { margin-top:5px; text-align:center; } .owl-carousel .owl-dots button.owl-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; background: #DDDDDD; margin: 0 2px; } .owl-carousel .owl-dots button.owl-dot.active { background-color: #000; } .owl-carousel.owl-dots button.owl-dot:focus { outline: none; } /* IMAGE COVER */ .imgBx { position:relative; /*width:100%; padding-bottom:60%;*/ overflow:hidden; background-color:#000000; background-repeat:no-repeat; background-position:center center; background-size:cover; } .imgFrame { z-index:1; position:absolute; top:0; bottom:0; left:0; right:0; display: flex; justify-content: center; align-items: center; overflow: hidden; background-repeat:no-repeat; background-position:center center; background-size:cover; /*opacity:0.85;*/ transition: all 0.5s; } /*.imgFrame>a { opacity:0.85; } .imgFrame>a:hover { opacity:1.0; }*/ .imgFrame>a { position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; } .imgFrame img { flex-shrink: 0; min-width: 100%; min-height: 100%; object-fit: cover; } .imgFrame.fittedImg img { flex-shrink: 0; min-width: 0; min-height: 0; width:100%; height:100%; object-fit: contain; } /* image caption */ .imgCaptBx { z-index:2; position:absolute; left:0; right:0; bottom:0; padding:10px 20px; color:#FFFFFF; transition: all 0.5s; } .imgBx:hover .imgCaptBx { padding:15px 20px; background-image:linear-gradient(rgba(0,0,0, 0),rgba(0,0,0, 0.5)); } /* STICKY SCROLL */ .stickyScroll.stickyOn { z-index:600; position:fixed; left:0; right:0; margin:auto; } .stickyScroll.stickyOff { position:absolute; bottom:0 !important; left:0 !important; } /* SLIDE PAGING */ .blockPage { position:relative; display:block; margin-bottom:20px; } .pagingBar { display:block; background-color:#efefef; padding:8px 0; min-height:20px; margin-top:10px; text-align:center; } /* FORM */ ul.tabFrmLst { position:relative; list-style-type:none; display:flex; width:100%; border-bottom:2px #CCCCCC solid; margin-bottom:25px; } ul.tabFrmLst>li { position:relative; cursor:pointer; background:#F0F0F0; border:1px #EEEEEE solid; margin:0 2px; padding:15px; text-align:center; flex:1 1 0px; border-radius:10px 10px 0 0; opacity:0.6; transition: all 0.3s; } ul.tabFrmLst>li:hover { opacity:1; } ul.tabFrmLst>li:first-child { margin-left:0; } ul.tabFrmLst>li:nth-last-child(1) { margin-right:0; } ul.tabFrmLst>li.selct { background:#666666; color:#FFFFFF; font-weight:bold; opacity:1; } /* form fields */ ul.frmLst { list-style-type:none; width:100%; border-bottom:1px #999999 dashed; padding-bottom:7px; margin-bottom:20px; } ul.frmLst.noSep { border-bottom:0; } ul.frmLst:nth-last-child(1) { padding-bottom:0; margin-bottom:0; border-bottom:0; } ul.frmLst>li { position:relative; display:block; width:100%; overflow:hidden; padding:5px 0; margin:12px 0; text-align:left; } ul.frmLst>li::after{ clear: both; content: ''; display: block; } .frmColLf { float:left; width:48%; } .frmColRg { float:right; width:48%; } .colSm { width:28% !important; } .colBg { width:68% !important; } .frmHide { display:none !important; } .frmFldBx { position:relative; border:1px #EEEEEE solid; border-radius:10px; padding:5px 0 10px 0; background:#F0F0F0; display: flex; flex-flow: column-reverse;} .frmFldBx>label, .frmFldBx>input, .frmFldBx>textarea, .frmFldBx>select { transition: all 0.3s; touch-action: manipulation; } .frmFldBx.impt>label::after { content:' * '; color:#FF0000; } .frmFldBx>input, .frmFldBx>textarea, .frmFldBx>select { font-size: 1.2em; border: 0 !important; -webkit-appearance: none; border-radius: 0; padding: 0 10px; cursor: text; background:transparent !important; color:#333333; } .frmFldBx>select { height:28px; padding:0 6px; } .frmFldBx>input:focus, .frmFldBx>textarea:focus { outline: 0; border: 0; background:transparent; } .frmFldBx>label { font-size:11px; color:#999999; } .frmFldBx>input:placeholder-shown + label, .frmFldBx>textarea:placeholder-shown + label, .frmFldBx>select + label { cursor: text; max-width: 66.66%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: left bottom; transform: translate(10px, 85%) scale(1.5); } .frmFldBx>select:invalid + label { transform: translate(10px, 100%) scale(1.5); } ::-webkit-input-placeholder { opacity: 0; transition: inherit; } ::-moz-placeholder { opacity: 0; transition: inherit; } .frmFldBx>input:focus::-webkit-input-placeholder, .frmFldBx>textarea:focus::-webkit-input-placeholder, .frmFldBx>select:focus::-webkit-input-placeholder { opacity: 1; } .frmFldBx>input:focus::-moz-placeholder, .frmFldBx>textarea:focus::-moz-placeholder, .frmFldBx>select:focus::-moz-placeholder { opacity: 1; } .frmFldBx>input:not(:placeholder-shown) + label, .frmFldBx>input:focus + label, .frmFldBx>textarea:not(:placeholder-shown) + label, .frmFldBx>textarea:focus + label { transform: translate(10px, -3px) scale(1); cursor: pointer; /*opacity:0.6;*/ color:#fdc064; font-weight:bold; } .frmFldBx>select:valid + label, .frmFldBx>select:focus + label { transform: translate(10px, -3px) scale(1); cursor: pointer; color:#fdc064; font-weight:bold; } /* disabled */ .frmFldBx>input:disabled { opacity:0.5; } /* form button */ ul.frmLst>li button { background-color: #333333; border: 2px solid white; border-radius: 20px; color: white; cursor: pointer; font-size: 16px; font-weight: bold; margin-top: 5px; padding: 15px 30px; text-transform: uppercase; transition: all 200ms; } ul.frmLst>li button:hover, ul.frmLst>li button:focus { background-color: #fdc064; color: #333333; outline: 0; } form:invalid button[type=submit] { opacity:0.3; pointer-events: none; } .frmFile { display:none; } .fldIcn { z-index:3; cursor:pointer; position:absolute; top:0; bottom:0; right:10px; margin:auto; width:22px; height:22px; background:url('../../i/icons/icn-set-frm.png') no-repeat left top; } .vwPass { background-position:0 0; } .vwPass.vwOn { background-position:-42px 0; } .vwFile { background-position:0 -42px; } .vwFile.vwDel { background-position:-42px -42px; } /*.frmFldBx>label { z-index:2; position:absolute; left:10px; top:0; bottom:0; width:100%; transition: all 0.3s; } .frmFldBx>input { z-index:1; position:absolute; left:0; right:0; top:0; bottom:0; padding:10px; background:transparent; } .frmFldBx>input:focus { padding:0 10px; height:20px; top:auto; bottom:0; } .frmFldBx input:focus + span { position:relative; font-size:12px; color:#FF0000; transform(translateY(-74px)); }*/ /* NOT FOUND */ .notfoundImg { margin-bottom:20px; } h1.notfoundTtl { font-size:82px; line-height:82px; color:#017742; margin-bottom:5px; } .notfoundSubTtl { font-size:24px; line-height:28px; color:#4cbe8a; font-weight:bold; } .notfoundMsg { font-size:14px; line-height:20px; color:#666666; margin:10px 0; } /* COMING SOON */ .comingsnBx { width:90%; max-width:800px; } .comingsnImg { width:40%; margin:3%; } .comingsnCnt { width:55%; margin:3%; text-align:left; ul.frmLst>li { padding:0; margin:5px 0; } ul.frmLst>li button { padding: 10px 30px; } } h1.comingsnTtl { color:var(--dark-blue); font-size:38px; margin-bottom:15px; } .comingsnBrf {} .comingsnFrm { margin-top:20px; } /* ACCORDION MENU */ ul.detAccordion { list-style-type:none; margin:0; } ul.detAccordion>li { margin-bottom:5px; } ul.detAccordion>li>h3 { cursor:pointer; position:relative; font-size:20px; line-height:22px; color:#909090; background:#DDDDDD; padding:10px 15px 10px 40px; background-repeat:no-repeat; background-position:10px center; border-bottom:1px #DDDDDD solid; } ul.detAccordion>li>h3.profileTab { font-size:16px; line-height:18px; } ul.detAccordion>li>h3.tabOn { color:#000000; background-color:#E0E0E0; border-radius:5px; } a.btnArrTab { position:absolute; top:0; bottom:0; right:15px; margin:auto; width:26px; height:20px; background:url('../../i/icons/btn-accrd-arrow.png') no-repeat 0px 0px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } a.btnArrTab.collapseTab { background-position:0px -22px; } ul.detAccordion>li>h3:hover { background-color:#EEEEEE; } ul.detAccordion>li>h3:hover>a.btnArrTab { background-position:-33px 0px; } ul.detAccordion>li>h3:hover>a.btnArrTab.collapseTab { background-position:-33px -22px; } .detContent { display:none; width:98%; margin:15px auto 30px auto; } .detContent p { } .detContent ul, .detContent ol { margin-left:18px; } .detContent.tabShow { display:block; } /* PROCESS LOADING & NOOTIFICATION */ .doLoading { display:none; z-index:100; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255,0.8); } .doLoading.loadingPage { background-image:url('../../i/page-loading.png'); background-repeat:no-repeat; background-position:center; } .doLoadMsg { position:absolute; width:150px; height:20px; background:#FFFFFF url('../../i/frm-loading.gif') no-repeat 10px center; top:35%; left:0; right:0; margin:auto; padding:9px 10px 8px 45px; text-align:left; font-size:14px; color:#666666; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .doLoading.whtForm { background-color:rgba(255,255,255,0.9); } .doLoading.whtForm>.doLoadMsg { -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.5); box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .doLoadMsg.deliveryPost { top:0; bottom:0; } /* SIGNUP */ .signupBox { position:relative; width:96%; max-width:800px; display:block; margin:5px auto 5px auto; padding:1px; text-align:left; background:#F9F9F9; border:5px #F6F6F6 solid; border-radius:10px; } h1.signupTitle { font-size:20px; line-height:22px; background:#EEEEEE; padding:15px; margin:0; border-radius:5px 5px 0 0; } .signupForm { position:relative; padding:13px 15px 15px 15px; border-bottom:5px #DDDDDD solid !important; margin-top:10px; } .signupForm.profileForm { padding:10px; } .signupForm.profileForm.mainAddress { background:#fbfdf3; border:1px #DDDDDD dashed; } .signupForm.profileForm.addAddress { display:none; border:1px #999999 dashed; border-radius:5px; } a.addDeliveryAddr { display:inline-block; margin:10px; } .addrDelete { display:none; z-index:10; cursor:pointer; position:absolute; width:30px; height:30px; right:20px; top:33px; background-color:#e04f5f; background-position:-25px -525px; border-radius:50%; box-shadow: 0 0 3px #999999; transition: all 0.5s; } .addrDelete:hover { box-shadow: 1px 1px 8px rgba(0,0,0, 0.5); } .addressForm:hover .addrDelete { display:block; } .signupForm ul { overflow:hidden; } .signupForm.profileForm ul { margin-bottom:10px; } .signupForm ul>li { margin-bottom:10px; } .signupForm ul>li>label { display:block; margin:2px; } .signupForm ul>li>label>span { color:#FF0000; } .signupForm ul>li.colLf { float:left; width:48%; margin-right:2%; } .signupForm ul>li.colRg { float:right; width:48%; } .signupForm ul>li.colFull { float:left; width:99%; } .signupForm>h2 { font-size:17px; margin-bottom:15px; } input.signUp { } input.confirmPay { /*padding:7px 8px 9px 8px; font-size:16px; width:92%;*/ } select.confirmPay { /*padding:7px 6px 9px 6px; font-size:16px; height:40px; width:99%;*/ } .signupFooter { padding:10px 15px 15px 15px; } .signupFooter>p { margin:0; padding:5px 0px; } p.sgFtNote { font-size:12px; line-height:16px; } .signupBtn { cursor:pointer; width:100%; font-size: 16px; font-weight:500; color:#FFFFFF; background: linear-gradient(#04b9f6, #0099CC); line-height:18px; border:0; padding:12px 10px; opacity:0.8; margin:5px 0px 10px 0px; border-radius: 15px; } .signupBtn:hover { opacity:1.0; } a.registerBtn { display:block; cursor:pointer; width:95.5%; font-size: 16px; font-weight:500; color:#FFFFFF; background: linear-gradient(#666666, #000000); line-height:18px; border:0; padding:12px 10px; margin:5px 0px 10px 0px; text-align:center; opacity:0.7; border-radius: 15px; } a.registerBtn:hover { opacity:1.0; } .signupForm ul>li.colRg>input[type=submit] { margin-top:24px; margin-bottom:0; } ul.sgFtLnk { list-style-type:none; margin:10px 0; } ul.sgFtLnk>li { font-size:13px; line-height:16px; padding:2px 0; } /* MY PROFILE */ .profileEditBtn { height:50px; position:relative; } .profileSaveBtn { position:absolute; left:0; top:0; bottom:0; right:0; display:none; } .editProfileBtn { cursor:pointer; width:100%; font-size: 16px; font-weight:500; color:#FFFFFF; background: linear-gradient(#04b9f6, #0099CC); line-height:18px; border:1px #CCCCCC solid; padding:10px; opacity:0.8; margin:5px 0px 10px 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .editProfileBtn:hover { opacity:1.0; } .saveProfileBtn { width:55%; position:absolute; right:0; top:0; } .cancelProfileBtn,.cancelAddAddr { background:#EEEEEE; color:#666666; border:1px #CCCCCC solid; width:40%; position:absolute; left:0; top:0; } .profileHeader { display:block; margin-bottom:20px; } .profileHeader>b { color:#0099CC; } /* MY PROFILE FORM */ input.profileFld { border:1px #DDDDDD solid !important; } textarea.profileFld { border:1px #DDDDDD solid !important; } select.profileFld { padding:10px; border:1px #DDDDDD solid !important; } input[type=radio].profileFld { width:20px !important; } .profileFld.markFld:disabled { background-color:#CCCCCC !important; color:#000000; font-weight:bold; } .profileEditBtn { height:50px; position:relative; } .profileSaveBtn { position:absolute; left:0; top:0; bottom:0; right:0; display:none; } .editProfileBtn { cursor:pointer; width:100%; font-size: 16px; font-weight:500; color:#FFFFFF; background: linear-gradient(#04b9f6, #0099CC); line-height:18px; border:1px #CCCCCC solid; padding:10px; opacity:0.8; margin:5px 0px 10px 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .editProfileBtn:hover { opacity:1.0; } .saveProfileBtn { width:55%; position:absolute; right:0; top:0; } .cancelProfileBtn,.cancelAddAddr { background:#EEEEEE; color:#666666; border:1px #CCCCCC solid; width:40%; position:absolute; left:0; top:0; } .profileHeader { display:block; margin-bottom:20px; } .profileHeader>b { color:#0099CC; } /* selectbox */ .dvProfileAddress .ui-selectmenu-button { width:90% !important; font-size: 15px !important; color:#000000 !important; padding:8px !important; border:1px #CCCCCC solid !important; background-color:#F8F7F2 !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; } .formCourier + .ui-selectmenu-button { width:87% !important; } /* FORM */ ul.cleanUl { list-style-type:none; } ul.multiUl { list-style-type:none; border-top:1px #CCCCCC dashed; padding-top:15px; margin-top:10px; text-align:left; } ul.multiUl:first-child { border-top:0; padding-top:0; margin-top:0; } ul.multiUl>li { position:relative; } ul.multiUl>li>label { color:#999999; font-size:0.9em; } ul.multiUl>li.chkBox { padding:34px 0; height:10px } label.lblInput { font-size:1em !important; color:#000000 !important; } ul.formUl { list-style-type:none; overflow:hidden; } ul.formUl li { display:block; padding:3px 5px 3px 2px; } ul.formUl li.formChkName { padding-bottom:15px; } ul.formUl li label { font-size:13px; padding-left:4px; } ul.formUl li.frmColSm { float:left; width:30%; margin-right:10px; border:0; } li.frmColSm.frmColCity { width:35%; } li.frmColSm.frmColZip { width:20%; float:right; } .formCol { float:left; width:45%; } select.formCity { width:99%; background-color:rgba(255,255,255, 0.3); color:#333333; } .frmSm { padding:7px !important; } select.formCourier { width:88% !important; background-color:rgba(255,255,255, 0.3); color:#333333; } select.formCourier.courierLg { width:auto; } select.formCourier>option { padding:0 5px; } input.formAddress { width:95%; height:26px; } select.formCity>option { padding-left:10px; } select.formCity>option:disabled { color:#999999; padding-left:2px; } select.formCity.citySelect { width:100%; } select.formCity.cityDeliverySelect { height:30px; width:100%; } select.slctInput { font-size:1em; background-color:#FFFFFF; border:1px #DDDDDD solid !important; } input.formError { background:rgba(228,143,146,0.3); } .formErrMsg { float:right; background:rgba(255,0,0,0.5); color:#FFFFFF !important; font-size:12px; line-height:14px; padding:2px 5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } input.formDate { background-image:url('../../i/icons/icn-date.png'); background-repeat:no-repeat; background-position:right center; } input.frmImfo,select.frmImfo,textarea.frmImfo { background-color:#CCCCCC; color:#999999 !important; } input.frmOff,select.frmOff,textarea.frmOff { border:1px #EEEEEE solid !important; background-color:rgba(230,230,230,0.2) !important; } input.frmVerified { color:#333333; background-color:rgba(46,204,113,0.2) !important; background-image:url('../../i/icons/icn-verified.png'); background-repeat:no-repeat; background-position:right center; } li.hilightField { background:rgba(255,0,0,0.1); border:1px #999999 dashed; padding:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } li.hilightField>span.msg { display:inline-block; background:#FF0000; color:#FFFFFF; padding:2px 5px; margin-bottom:5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } li.hilightField>input { background:#FFFFFF !important; } li.imptField>label::after { content:'*'; color:#FF0000; padding-left:5px; } .fldLoading { z-index:10; display:none; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(251,242,246, 0.6) url('../../i/fld-loading.gif') no-repeat center 70%; } .fldLoading.lblFrm { top:30px; } .fldLoading.prfFrm { background-color:rgba(249,249,249, 0.7); } .fldLoading.cartFrm { background-color:rgba(251,242,246, 0.7); } /* TRANSACTION HISTORY */ .mBuyBox { position:relative; padding:30px 15px 15px 15px; border-bottom:1px #DDDDDD solid; } .mBuyRow { position:relative; border:1px #DDDDDD solid; margin-bottom:20px; -webkit-box-shadow: 2px 2px 0 #DDDDDD; -moz-box-shadow: 2px 2px 0 #DDDDDD; box-shadow: 2px 2px 0 #DDDDDD; } .mBuyRow>ul { display:inline-table; width:100%; list-style-type:none; overflow:auto; } ul.mBuyTbl { cursor:pointer; position:relative; background:#FFFFFF; width:100%; padding-bottom:25px; overflow:hidden; } ul.mBuyTbl>li { float:left; padding:10px 15px; margin-right:1px; font-size:13px; } .mBuyDetail { display:none; border:0; } .mBuySubTtl { display:block; font-weight:bold; font-size:13px; padding:10px 10px 5px 31px; margin-top:5px; background:url('../../i/icons/icn-buylist.png') no-repeat 8px center; } a.mBuyInvNum { display:block; font-size:15px; font-weight:bold; } a.mBuyMore { position:absolute; bottom:5px; right:14px; font-size:12px; color:#333333; padding-right:20px; background:url('../../i/icons/icn-expand.png') no-repeat right center; opacity:0.6; } a.mBuyMore:hover { opacity:1.0; } p.mBuySumm { display:block; font-size:12px; line-height:16px; margin:5px 0 0 0; } .tblMBuyMsg { width:55% !important; padding:10px !important; } .tblMBuyStatus { position:relative; float:right !important; width:38% !important; background:rgba(0,153,204,0.2); margin-bottom:5px; padding-top:5px !important; } .tblMBuyStatus.complete { background:rgba(125,209,4, 0.2); } ul.payDelivery { list-style-type:none; background:rgba(255,248,214,0.4); width:100%; border-top:2px #DDDDDD solid; border-bottom:1px #DDDDDD solid; } ul.payDelivery>li { display:inline-block; font-size:13px; line-height:16px; padding:5px 10px; border-left:1px #DDDDDD solid !important; } ul.payDelivery>li>label.payTax { margin-top:10px; } ul.payDelivery>li.tblAddress { display:block; border-bottom:1px #DDDDDD solid !important; border-left:0; padding-bottom:10px; } ul.payDelivery>li.tblHrgSub { width:13%; } span.tblGrndTtl { font-size:1.1em; font-weight:bold; } /* ros status */ .mBuyRow.stExprd { opacity:0.4; } .mBuyRow.stExprd .tblMBuyStatus { background:rgba(0,0,0,0.2); } .mBuyRow.stExprd a.mBuyInvNum { color:#333333; } /* PURCHASE LIST TABLE */ .mBuyItmBx { position:relative; padding:5px 10px; border-top:2px #DDDDDD solid; } .payProductName { font-size:13px; line-height:14px; margin-bottom:2px; } .payProductName a { color:#000000; } .payQty { font-size:12px; line-height:14px; margin-top:5px; } .payOption { font-size:11px; line-height:12px; } ul.mBuyItmLst { list-style-type:none; width:100%; display:flex; justify-content:flex-start; align-items:flex-start; gap:5px; border-top:1px #DDDDDD dashed; } ul.mBuyItmLst:first-child { border-top:0; } ul.mBuyItmLst>li { align-self: stretch; padding:8px 2px 3px 2px; } .tblImg { width:11% !important; text-align:center; } .tblIcn { width:8% !important; text-align:center; } .tblImg img { max-width:100%; max-height:70px; } .tblIcn img { max-width:100%; } .tblProduct { width:47% !important; border-right:1px #CCCCCC solid; } .tblNote { width:25% !important; font-size:12px; line-height:15px; } .tblHrg { width:20% !important; font-size:14px; border-right:1px #CCCCCC solid; } /* SYSTEM NOTIFICATION */ .sysNotif { display:none; position:relative; padding:13px; min-height:10px; background:#BFEFFF url('../../i/icons/icn-notif.png') no-repeat 15px 10px; border:5px #b7ecfe solid; text-align:left; border-radius:10px; margin-bottom:10px; } .sysNotif.modalNotif { z-index:1000; position:absolute; top:0; left:0; right:0; margin:auto; } .sysNotif.payNotif { width:89.5%; } .sysNotif.notifOn { display:block; } .sysNotifClose { cursor:pointer; position:absolute; width:15px; height:15px; top:10px; right:10px; background:url('../../i/buttons/btn-notifoff.png') no-repeat 0px 0px; } .sysNotifClose:hover { background-position:0px -25px; } .sysNotifNote { color:#B20000; font-size:16px; margin-left:50px; margin-right:25px; } .sysNotifNote>ul, .sysNotifNote>ol { list-style-type:initial; } .sysNotifNote>ul>li,.sysNotifNote>ol>li { margin:1px 1px 1px 30px; } /* change address modal */ a.lnkChAddr { background-position:2px -636px; padding:3px 3px 3px 28px; } a.lnkAddAddr { background-position:2px -673px; padding:3px 3px 3px 28px; } a.exitAddrChg { z-index:1; position:absolute; top:8px; right:8px; width:22px; height:22px; background:url('../../i/icons/icn-close.png') no-repeat center center; background-size:contain; opacity:0.6; } a.exitAddrChg:hover { opacity:1.0; } .addrChgMdl { display:none; z-index:2000; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0, 0.6); } .addrChgBx { display:none; position:absolute; top:4%; bottom:4%; left:2%; right:2%; max-width:400px; max-height:67vh; margin:auto; background:#FFFFFF; border:5px #E0E0E0 solid; border-radius:8px; } .addrChgHd { position:relative; display:block; padding:10px; background:#e7f2d6; font-size:20px; line-height:20px; font-weight:500; } .addrChgCnt { position:absolute; left:0; right:0; top:42px; bottom:0; padding:0 10px; overflow-y:auto; } ul.addrChgLst { list-style-type:none; } ul.addrChgLst>li { cursor:pointer; padding:15px 10px; border-top:1px #CCCCCC dashed; font-size:14px; line-height:17px; text-align:left; } ul.addrChgLst>li:first-child { border-top:0; } ul.addrChgLst>li:hover { background:#F9F9F9; } ul.addrChgLst>li:last-child { cursor:default; background:transparent; padding:20px 10px; } ul.addrChgLst>li>h4 { font-size:18px; } ul.addrChgLst>li>.dlvryAddrName { font-weight:500; color:#0099CC; } ul.addrChgLst>li.picked::after { content:''; position:absolute; top:20px; right:2px; width:20px; height:20px; background:url('../../i/icons/icn-correct.png') no-repeat center center; border-radius:50%; overflow:hidden; } /* delivery map */ .dlvryMapBx { display:block; width:97.5%; height:0; padding-bottom:40%; overflow:hidden; border-radius:5px; border:1px #666666 dashed; } .dlvryMapBx.profileMapBx { border:2px #CCCCCC solid; } /* GOOGLE MAPS */ .mapBox { position:relative; } .mapBox.dispMap { /*-webkit-filter: grayscale(100%);*/ } .mapBox.dispMap::after { content:''; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255, 0.3); } .mapBox.dispMap>.profileMapBx { border:1px #CCCCCC solid !important; } .mapBox.mapProfile>.dlvryMapBx { padding-bottom:70%; } .mapBox.mapProfile.dispMap>.dlvryMapBx { padding-bottom:40%; } input.mapSearch { position:absolute; top:5px; left:5px; width:30%; background-color:#FFFFFF; border:0; box-shadow: 0 0 1px #666666; padding:10px; background-position:right -703px; } input.mapSearch:focus { border:0; box-shadow: 0 0 2px #666666; width:80%; } input.mapSearch.dispOnly { display:none; } ul.frmRadioLst { list-style-type:none; overflow:hidden; } ul.frmRadioLst li { cursor:pointer; float:left; margin:2px 5px; padding-right:30px; } input.frmDate { background-image:url('../../i/icons/icn-calendar.png'); background-repeat:no-repeat; background-position:right center; } /* CONTACT US MAPS */ .contactMapBox { position:relative; margin-top:40px; } .contactMapBox>label { display:block; font-size:1.3em; font-weight:bold; margin-bottom:5px; } .contactMapBx { border:1px #DDDDDD solid; height:50vh; } /* WHATSAPP */ .waChatOPtBox { display:none; z-index:1650; position:fixed; bottom:55px; right:10px; background:#1EBEA5; padding:10px; border-radius: 3px; box-shadow: 1px 1px 5px #666666; } .waChatOPtBox ul { list-style-type:none; } .waChatOPtBox ul>li { cursor:pointer; border-top:1px rgba(255,255,255, 0.5) dashed; color:#FFFFFF; padding:8px 5px; font-size:16px; } .waChatOPtBox ul>li:first-child { border-top:0; } .waChatOPtBox ul>li a { color:#FFFFFF; } .waChatOPtBox ul>li:hover { background:rgba(0,0,0, 0.2); } .waChatIcn { z-index:1600; cursor:pointer; opacity:0.8; position:fixed; bottom:34px; right:10px; font-size:13px; color:#FFFFFF; padding:6px 10px 5px 37px; text-align:left; background:#F44336 url('../../i/icons/icn-whatsapp.png') no-repeat 12% center; background-size:auto 65%; border-radius: 25px 10px 10px 25px; box-shadow: 1px 1px 2px #666666; transition: all 0.5s; } .waChatIcn:hover { opacity:1.0; background-color:#25D366; } .waChatIcn a { color:#FFFFFF; } .waChatIcn::after { content:'BANTUAN'; } ul.frmLst>li.frmButton { padding:20px 0; } .frmArea { position:relative; } .frmTarget { display:none; opacity:0; } .frmLoading { display:none; z-index:10; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(255,255,255, 0.7) url('../../i/mdl-loading.gif') no-repeat center center; } .frmLoading.loadingBar { background-image:url('../../i/ajx-loading-bar.gif'); } .frmAlert { z-index:9; display:none; position:relative; background:rgba(255,0,0, 0.1); width:100%; min-height:30px; border-radius:5px; margin-bottom:5px; text-align:left; } input[type=submit], button[type=submit] { display:flex; justify-content:center; align-items:center; } input[type=submit]>span, button[type=submit]>span { padding-top:2px; } input[type=submit].loading::after, button[type=submit].loading::after { content:''; display:inline-block; width:20px; height:20px; margin-left:3px; background:url('../../i/btn-loading-w.png') no-repeat center center; background-size:contain; } input[type=submit]:disabled, button[type=submit]:disabled { opacity:0.4; } input[type=submit]:disabled:hover, button[type=submit]:disabled:hover { background-color:#333333; color:#FFFFFF; } /*.frmAlert { z-index:9; display:none; position:absolute; top:35%; left:0; right:0; margin:auto; background:rgba(255,204,204, 0.8); width:70%; min-height:30px; border-radius:5px; text-align:left; }*/ .frmAlert.searchAlert { margin-bottom:8px; } .frmAlert.successAlert { background:rgba(72,202,228, 0.4); } .frmAlert.redirectAlert { background:rgba(87,173,3, 0.4); } .frmAlertCnt { position:relative; padding:8px 40px 8px 10px; font-size:13px; line-height:16px; } .frmAlertCnt ul, .frmAlertCnt ol { list-style-type:none; overflow:hidden; } .frmAlertCnt li { float:left; margin-right:9px; } .frmAlertCnt li::after { content:','; } .frmAlertCnt li:last-child::after { content:''; } .frmAlertClose { z-index:1; cursor:pointer; position:absolute; top:5px; right:5px; width:20px; height:20px; background:url('../../i/icons/icn-close-sm.png') no-repeat center center; opacity:0.7; } .frmAlertClose:hover { opacity:1.0; } /* MODAL FORM */ /* .frmBx { position:absolute; top:0; bottom:10px; left:0; right:0; display:block; } .frmBxLf { position:absolute; top:0; bottom:0; left:0; width:35%; background-repeat:no-repeat; background-position:center center; background-size:cover; border-radius:5px; } .frmBxRg { position:absolute; top:0; bottom:0; right:0; width:57%; } */ .frmBx { position:relative; } .frmBxLf { position:absolute; top:0; bottom:0; left:0; width:27%; background-repeat:no-repeat; background-position:center center; background-size:cover; } .frmBxRg { position:absolute; top:10px; bottom:10px; right:20px; width:63%; } .fullBx { width:94%; left:20px; right:20px; margin:auto; } .frmBxTitle { position:absolute; left:0; right:0; top:30px; width:100%; text-align:left; padding:0; } .frmBxTitle::after { z-index:0; content:''; position:absolute; top:0; bottom:0; left:50px; right:0; margin:auto; height:2px; border-bottom:1px #CCCCCC dashed; } .frmBxTitle>h3 { z-index:1; position:relative; left:0; display:inline-block; font-size:32px; line-height:34px; background:#FFFFFF; padding-bottom:5px; padding-right:30px; } .frmBxScrl { position:absolute; top:90px; bottom:0; left:0; right:0; } .frmBrief { display:block; font-size:16px; line-height:18px; text-align:left; padding:5px; margin-bottom:10px; } .frmContent { display:block; padding:5px; } .frmCheckbx label { display:inline-block; float:left; margin:5px 15px 5px 0; font-size:16px !important; opacity:1.0 !important; } .frmCheckbx span { padding-left:5px; } .frmCol { position:relative; float:left; margin-right:10px; } .frmCol.colFull { width:92%; } .frmCol.colHlf { width:45%; } .frmCol.colQrt { width:30%; } .frmCol.colSm { width:13%; } .frmCol.colSml { width:18%; } .fldImpt>label::after { content:'*'; color:#FF0000; font-size:1.2em; padding-left:5px; padding-top:5px; } input.fldBook { text-align:left; } input.fldBook.fldBookDate { width:300px; } input.fldBook.fldBookPerson { width:135px; } input.fldBook.fldBookChild { width:135px; } input.fldBook.fldBookCode { width:150px; } input.btnBook { display:inline-block; background:rgba(0,0,0, 0.7); color:#d1ae6c; border:1px #d1ae6c solid; border-radius:3px; padding:10px 15px 8px 15px; font-size:15px; line-height:15px; text-align:center; min-width:120px; } input.btnBook:hover { background:rgba(0,0,0, 1.0); } input.frmFld { text-align:left; width:90%; } select.frmFld { margin-top:0; padding:10px; } input.fldMessage { width:88%; } .frmCol.colQrt input.frmFld { width:86% !important; } .frmCol.colSm input.frmFld { width:70% !important; } .frmCol.colSml input.frmFld { width:76% !important; } /* MOBILE SETUP */ .tagMobile { display:none; } .mobileOnly { display:none !important; }