.store-logo { width: 100px; height: 100px; } .store-menu-tab .nav-item.active { color: var(--color-primary); } .store-menu-tab .nav-link { background-color: transparent; border: none; } .store-menu-tab .nav-link:focus { outline: 0px auto -webkit-focus-ring-color; } .store-information { height: 300px; } .store-content .banner-decoration { height: 500px; } .nav-menu > .nav-link { color: black !important; } .nav-menu > .active { background-color: var(--color-primary) !important; color: white !important; } @media only screen and (max-width: 768px) { /* nav { background-color: white !important; }*/ .slick-dots { display: block !important; position: static !important; text-align: left !important; } .slick-dots li { margin: 0px !important; } #content { padding: 0px !important; } .store-header .store-information { height: 200px; margin-top: 1rem; } .store-logo { width: 70px; height: 70px; } .store-menu-tab .nav { background-color: white; padding-top: 5px !important; padding-bottom: 5px !important; } .store-menu-tab a { font-size: 12px; width: 100%; text-align: center; font-weight: normal; } .store-content .banner-decoration { height: 200px; } .form-filter { font-size: 12px !important; } .product-filter { padding-left: 1.9rem; } } div.dataTables_length label { font-weight: normal; text-align: left; white-space: nowrap; } div.dataTables_length select { width: 75px; display: inline-block; } div.dataTables_filter { text-align: right; } div.dataTables_filter label { font-weight: normal; white-space: nowrap; text-align: left; } div.dataTables_filter input { margin-left: 0.5em; display: inline-block; width: auto; } div.dataTables_info { padding-top: 8px; white-space: nowrap; } div.dataTables_paginate { margin: 0; white-space: nowrap; text-align: right; } div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; } @media screen and (max-width: 767px) { div.dataTables_wrapper > div.row > div, div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate { text-align: center; } div.DTTT { margin-bottom: 0.5em; } } table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } table.dataTable { clear: both; margin-top: 6px !important; margin-bottom: 6px !important; max-width: none !important; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { cursor: pointer; position: relative; } table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { position: absolute; top: 8px; right: 8px; display: block; font-family: 'Glyphicons Halflings'; opacity: 0.5; } table.dataTable thead .sorting:after { opacity: 0.2; content: "\e150"; /* sort */ } table.dataTable thead .sorting_asc:after { content: "\e155"; /* sort-by-attributes */ } table.dataTable thead .sorting_desc:after { content: "\e156"; /* sort-by-attributes-alt */ } div.dataTables_scrollBody table.dataTable thead .sorting:after, div.dataTables_scrollBody table.dataTable thead .sorting_asc:after, div.dataTables_scrollBody table.dataTable thead .sorting_desc:after { display: none; } table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after { color: #eee; } table.dataTable thead > tr > th { padding-right: 10px; } table.dataTable th:active { outline: none; } /* Condensed */ table.dataTable.table-condensed thead > tr > th { padding-right: 10px; } table.dataTable.table-condensed thead .sorting:after, table.dataTable.table-condensed thead .sorting_asc:after, table.dataTable.table-condensed thead .sorting_desc:after { top: 6px; right: 6px; } /* Scrolling */ div.dataTables_scrollHead table { margin-bottom: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } div.dataTables_scrollHead table thead tr:last-child th:first-child, div.dataTables_scrollHead table thead tr:last-child td:first-child { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } div.dataTables_scrollBody table { border-top: none; margin-top: 0 !important; margin-bottom: 0 !important; } div.dataTables_scrollBody tbody tr:first-child th, div.dataTables_scrollBody tbody tr:first-child td { border-top: none; } div.dataTables_scrollFoot table { margin-top: 0 !important; border-top: none; } /* Frustratingly the border-collapse:collapse used by Bootstrap makes the column width calculations when using scrolling impossible to align columns. We have to use separate */ table.table-bordered.dataTable { border-collapse: separate !important; } table.table-bordered thead th, table.table-bordered thead td { border-left-width: 0; border-top-width: 0; } table.table-bordered tbody th, table.table-bordered tbody td { border-left-width: 0; border-bottom-width: 0; } table.table-bordered tfoot th, table.table-bordered tfoot td { border-left-width: 0; border-bottom-width: 0; } table.table-bordered th:last-child, table.table-bordered td:last-child { border-right-width: 0; } div.dataTables_scrollHead table.table-bordered { border-bottom-width: 0; } /* * TableTools styles */ .table.dataTable tbody tr.active td, .table.dataTable tbody tr.active th { background-color: #08C; color: white; } .table.dataTable tbody tr.active:hover td, .table.dataTable tbody tr.active:hover th { background-color: #0075b0 !important; } .table.dataTable tbody tr.active th > a, .table.dataTable tbody tr.active td > a { color: white; } .table-striped.dataTable tbody tr.active:nth-child(odd) td, .table-striped.dataTable tbody tr.active:nth-child(odd) th { background-color: #017ebc; } table.DTTT_selectable tbody tr { cursor: pointer; } div.DTTT .btn:hover { text-decoration: none !important; } ul.DTTT_dropdown.dropdown-menu { z-index: 2003; } ul.DTTT_dropdown.dropdown-menu a { color: #333 !important; /* needed only when demo_page.css is included */ } ul.DTTT_dropdown.dropdown-menu li { position: relative; } ul.DTTT_dropdown.dropdown-menu li:hover a { background-color: #0088cc; color: white !important; } div.DTTT_collection_background { z-index: 2002; } /* TableTools information display */ div.DTTT_print_info { position: fixed; top: 50%; left: 50%; width: 400px; height: 150px; margin-left: -200px; margin-top: -75px; text-align: center; color: #333; padding: 10px 30px; opacity: 0.95; background-color: white; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); } div.DTTT_print_info h6 { font-weight: normal; font-size: 28px; line-height: 28px; margin: 1em; } div.DTTT_print_info p { font-size: 14px; line-height: 20px; } div.dataTables_processing { position: absolute; top: 50%; left: 50%; width: 100%; height: 60px; margin-left: -50%; margin-top: -25px; padding-top: 20px; padding-bottom: 20px; text-align: center; font-size: 1.2em; background-color: white; background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%); } /* * FixedColumns styles */ div.DTFC_LeftHeadWrapper table, div.DTFC_LeftFootWrapper table, div.DTFC_RightHeadWrapper table, div.DTFC_RightFootWrapper table, table.DTFC_Cloned tr.even { background-color: white; margin-bottom: 0; } div.DTFC_RightHeadWrapper table , div.DTFC_LeftHeadWrapper table { border-bottom: none !important; margin-bottom: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child, div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child, div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child, div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } div.DTFC_RightBodyWrapper table, div.DTFC_LeftBodyWrapper table { border-top: none; margin: 0 !important; } div.DTFC_RightBodyWrapper tbody tr:first-child th, div.DTFC_RightBodyWrapper tbody tr:first-child td, div.DTFC_LeftBodyWrapper tbody tr:first-child th, div.DTFC_LeftBodyWrapper tbody tr:first-child td { border-top: none; } div.DTFC_RightFootWrapper table, div.DTFC_LeftFootWrapper table { border-top: none; margin-top: 0 !important; } div.DTFC_LeftBodyWrapper table.dataTable thead .sorting:after, div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_asc:after, div.DTFC_LeftBodyWrapper table.dataTable thead .sorting_desc:after, div.DTFC_RightBodyWrapper table.dataTable thead .sorting:after, div.DTFC_RightBodyWrapper table.dataTable thead .sorting_asc:after, div.DTFC_RightBodyWrapper table.dataTable thead .sorting_desc:after { display: none; } /* * FixedHeader styles */ div.FixedHeader_Cloned table { margin: 0 !important } table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer;*cursor:hand}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("images/sort_desc_disabled.png")}table.dataTable tbody tr{background-color:#fff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#abb9d3}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f5f5f5}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#a9b7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#f9f9f9}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad4}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:#f5f5f5}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b3cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a7b5ce}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b6d0}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#f9f9f9}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fbfbfb}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fdfdfd}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad4}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#adbbd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ebebeb}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#eee}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a1aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a2afc8}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a4b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #cacaca;background-color:#fff;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}} :root { --icon-grey: #bdbdbd; --color-highlight: #f1f1f1; --text-grey: #828282; --bg-grey: #c2c2c2; --background-content: #f6f6f6; --color-primary: #fa8420; --bg-text-menu-hover: #f2f2f2; --color-black: black; --border-color: #e7e7e7; --background-hover: #f2f2f2; --box-shadow: 0 4px 8px 0 rgb(255 255 255 / 20%), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .bg-grey { background-color: var(--bg-grey); } .border-error { border: 1px solid red !important; } html { scroll-behavior: smooth; font-family: "Poppins", sans-serif !important; } .bg-highlight { background-color: var(--color-highlight) !important; } div.line { width: 100px !important; height: 10px !important; background-color: var(--color-primary); } div.line-y-sm { width: 100px !important; height: 5px !important; background-color: var(--color-primary); } .bg-transparent { background-color: transparent !important; } .shadow { box-shadow: var(--box-shadow) !important; } .shadow:hover { box-shadow: none !important; } .bg-black { background: var(--color-black); } .color-black { color: var(--color-black); } .color-grey { color: var(--icon-grey); } .color-dark-grey { color: var(--text-grey); } .bg-content { background-color: var(--background-content) !important; } .bg-tru-primary { background-color: var(--color-primary); } /* padding */ .p-y-sm { padding-top: 1rem; padding-bottom: 1rem; } .p-y-md { padding-top: 2rem; padding-bottom: 2rem; } .p-y-lg { padding-top: 3rem; padding-bottom: 3rem; } .p-x-sm { padding-left: 1rem; padding-right: 1rem; } .p-x-md { padding-left: 2rem; padding-right: 2rem; } .p-x-lg { padding-left: 3rem; padding-right: 3rem; } .p-a-10px { padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; } /* Margin */ .m-y-sm { margin-top: 1rem; margin-bottom: 1rem; } .m-y-md { margin-top: 2rem; margin-bottom: 2rem; } .m-y-lg { margin-top: 3rem; margin-bottom: 3rem; } .m-x-sm { margin-left: 1rem; margin-right: 1rem; } .m-x-md { margin-left: 2rem; margin-right: 2rem; } .m-x-lg { margin-left: 3rem; margin-right: 3rem; } .m-b-8px { margin-bottom: 8px !important; } .btn-outline { background-color: transparent; border: 1px solid var(--border-color); } .btn-outline-primary { background-color: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); } .btn-primary { background: var(--color-primary) !important; } .btn:hover { color: var(--bs-btn-hover-color); background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-orange { background: #fabe0a; background-image: linear-gradient(to bottom, #fabe0a, #e69603); background-image: -moz-linear-gradient(top, #fabe0a, #e69603); background-image: -ms-linear-gradient(top, #fabe0a, #e69603); background-image: -o-linear-gradient(top, #fabe0a, #e69603); background-image: -webkit-linear-gradient(top, #fabe0a, #e69603); border-radius: 5px; color: #fff !important; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-orange:hover { background: #f29a03; background-image: linear-gradient(to bottom, #f29a03, #d69a03); background-image: -moz-linear-gradient(top, #f29a03, #d69a03); background-image: -ms-linear-gradient(top, #f29a03, #d69a03); background-image: -o-linear-gradient(top, #f29a03, #d69a03); background-image: -webkit-linear-gradient(top, #f29a03, #d69a03); text-decoration: none; } .btn-red { background: #f53939; background-image: linear-gradient(to bottom, #f53939, #bb1504); background-image: -moz-linear-gradient(top, #f53939, #bb1504); background-image: -ms-linear-gradient(top, #f53939, #bb1504); background-image: -o-linear-gradient(top, #f53939, #bb1504); background-image: -webkit-linear-gradient(top, #f53939, #bb1504); border-radius: 5px; color: #fff !important; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-red:hover { background: #bb1504; background-image: linear-gradient(to bottom, #bb1504, #f53939); background-image: -moz-linear-gradient(top, #bb1504, #f53939); background-image: -ms-linear-gradient(top, #bb1504, #f53939); background-image: -o-linear-gradient(top, #bb1504, #f53939); background-image: -webkit-linear-gradient(top, #bb1504, #f53939); text-decoration: none; } .btn-black { background: #5a5959; background-image: linear-gradient(to bottom, #5a5959, #232323); background-image: -moz-linear-gradient(top, #5a5959, #232323); background-image: -ms-linear-gradient(top, #5a5959, #232323); background-image: -o-linear-gradient(top, #5a5959, #232323); background-image: -webkit-linear-gradient(top, #5a5959, #232323); border-radius: 5px; color: #fff !important; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-black:hover { background: #232323; background-image: linear-gradient(to bottom, #232323, #5a5959); background-image: -moz-linear-gradient(top, #232323, #5a5959); background-image: -ms-linear-gradient(top, #232323, #5a5959); background-image: -o-linear-gradient(top, #232323, #5a5959); background-image: -webkit-linear-gradient(top, #232323, #5a5959); text-decoration: none; } .btn-brown { background: #c49727; background-image: linear-gradient(to bottom, #c49727, #612405); background-image: -moz-linear-gradient(top, #c49727, #612405); background-image: -ms-linear-gradient(top, #c49727, #612405); background-image: -o-linear-gradient(top, #c49727, #612405); background-image: -webkit-linear-gradient(top, #c49727, #612405); border-radius: 5px; color: #fff !important; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-brown:hover { background: #612405; background-image: linear-gradient(to bottom, #612405, #c49727); background-image: -moz-linear-gradient(top, #612405, #c49727); background-image: -ms-linear-gradient(top, #612405, #c49727); background-image: -o-linear-gradient(top, #612405, #c49727); background-image: -webkit-linear-gradient(top, #612405, #c49727); text-decoration: none; } .btn-white { background: #e6e6e6; background-image: -webkit-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -moz-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -ms-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -o-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: linear-gradient(to bottom, #e6e6e6, #d1d1d1); ---webkit-border-radius: 5; ---moz-border-radius: 5; border-radius: 5px; color: #333; text-decoration: none; } .btn-white:hover { background: #d6d2d6; background-image: -webkit-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -moz-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -ms-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -o-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: linear-gradient(to bottom, #d6d2d6, #d9d9d9); text-decoration: none; color: #333; } .fbold { font-weight: 700; } a.fblack { color: #292828 !important; } body { -webkit-font-smoothing: antialiased; background-color: white; } body section div.container { background-color: white; } @media (max-width: 768px) { body section div.container div.space { margin-top: 0rem; } } @media (min-width: 768px) and (max-width: 992px) { body section div.container div.space { margin-top: 0rem; } } @media (min-width: 992px) and (max-width: 1200px) { body section div.container div.space { margin-top: 8rem; } } @media (min-width: 1200px) { body section div.container div.space { margin-top: 8rem; } } @media (min-width: 992px) and (max-width: 1200px) { body div.container { width: 1188px; } } @media (min-width: 1200px) { body div.container { width: 1188px; } } body .categori-list .list-group-item:first-child, body .categori-list .list-group-item:last-child { border-radius: 0px; } body .categori-list .list-group-item { border: 0px; padding-top: 0.45rem; padding-bottom: 0.45rem; font-weight: bold; font-size: 0.9rem; vertical-align: middle; -moz-transition: padding-left 0.1s ease-in; -o-transition: padding-left 0.1s ease-in; -webkit-transition: padding-left 0.1s ease-in; transition: padding-left 0.1s ease-in; } body .categori-list .list-group-item:hover { background-color: #e4e3e3; padding-left: 1.7rem; } body .categori-list img { width: 1.7rem; margin-right: 0.4rem; } /* nav { background: linear-gradient(to bottom, #f4f4f4 39%, #c9c9c9 100%); background: -moz-linear-gradient(top, #f4f4f4 39%, #c9c9c9 100%); background: -ms-linear-gradient(top, #f4f4f4 39%, #c9c9c9 100%); background: -o-linear-gradient(top, #f4f4f4 39%, #c9c9c9 100%); background: -webkit-gradient( linear, left top, left bottom, color-stop(39%, #f4f4f4), color-stop(100%, #c9c9c9) ); background: -webkit-linear-gradient(top, #f4f4f4 39%, #c9c9c9 100%); } */ nav .m-y-1 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } nav .p-y-1 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } nav .inputsearch input[type="text"] { background-color: white; } nav .inputsearch input, nav .inputsearch span { border: 1.5px solid #656565; } nav .inputsearch span { cursor: pointer; } nav img.icon { width: 1.7rem; } nav .memberbutton a.btn { border: 1.5px solid #656565; } nav .memberakun { padding: 0.3rem; } nav .memberakun a { text-decoration: none; color: #373a3c; } nav .memberarea a.link { text-decoration: none; color: #656565; vertical-align: sub; } .breadcrumb { font-size: 0.9rem; } .breadcrumb a.forange { color: #fa8420; } .breadcrumb a { color: #818a91; text-decoration: none; } .pointer { cursor: pointer; } .dropdown-menu-partner { padding: 5px !important; background-color: white !important; width: 225px; } .dropdown-partner:hover .dropdown-menu-partner { min-width: 200px !important; display: flex !important; flex-direction: column !important; } .dropdown-menu-partner a { padding: 5px !important; color: black !important; font-size: 14px !important; } .dropdown-menu-partner a:hover { background-color: var(--bg-text-menu-hover) !important; color: var(--color-primary) !important; } .breadcrumb .dropdown-menu { margin-top: -0.11rem; min-width: 14rem; } .breadcrumb .dropdown-menu li:hover { background-color: #fa8420; } .breadcrumb .dropdown-menu li:hover a { color: white; } .breadcrumb .dropdown-menu li { cursor: pointer; } .breadcrumb .dropdown-menu li a { padding-left: 1rem; font-size: 0.9rem; color: black; } .breadcrumb .dropdown-menu li a .ceretright { padding: 5px; position: absolute; right: 0px; } .breadcrumb .sub-dropdown-menu .dropdown-menu { display: none; } .breadcrumb .sub-dropdown-menu:hover .dropdown-menulist { display: block !important; } .breadcrumb .sub-dropdown-menu:hover .dropdown-menulist a { color: black; } .breadcrumb ul.dropdown-menulist { display: none; position: absolute; margin-top: -25px; margin-left: 13.7rem; left: 0; z-index: 1000; float: left; min-width: 160px; padding: 5px 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } .breadcrumb ul.dropdown-menulist li a { padding-left: 1rem; font-size: 0.9rem; } .breadcrumb ul.dropdown-menulist li:hover a { color: white; } .breadcrumb ul.dropdown-menulist li:hover a:hover { color: white; } div.bottomheader { background: linear-gradient(to bottom, #e4e3e3 2%, #e8e8e8 49%, #d4d4d4 100%); background: -moz-linear-gradient(top, #e4e3e3 2%, #e8e8e8 49%, #d4d4d4 100%); background: -ms-linear-gradient(top, #e4e3e3 2%, #e8e8e8 49%, #d4d4d4 100%); background: -o-linear-gradient(top, #e4e3e3 2%, #e8e8e8 49%, #d4d4d4 100%); background: -webkit-gradient( linear, left top, left bottom, color-stop(2%, #ccc), color-stop(49%, #d1d1d1), color-stop(100%, #b5b5b5) ); background: -webkit-linear-gradient( top, #e4e3e3 2%, #e8e8e8 49%, #d4d4d4 100% ); box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.2); --moz-box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.2); --webkit-box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.2); width: 100%; top: 4rem; } div.bottomheader .container { min-height: 2rem; } div.bottomheader .container .dropdown { padding-top: 0.4rem; } div.bottomheader .container .dropdown-menu { min-width: 16rem; margin-left: -17px; } div.bottomheader .container .list-brand { padding-top: 0.3rem; } div.bottomheader .container .list-brand li { list-style: none; display: inline-block; } div.bottomheader .container .list-brand li img { width: 5.4rem; margin-left: 0.2rem; margin-right: 0.2rem; } div.bottomheader .container .list-brand a { font-size: 0.8rem; font-weight: bold; text-decoration: none; } div.bottomheader .container .list-brand a._after, div.bottomheader .container .list-brand a._before { color: #656565; } div.bottomheader .container .list-brand .menupromo { background: #fabe0a; background-image: linear-gradient(to bottom, #fabe0a, #e69603); background-image: -moz-linear-gradient(top, #fabe0a, #e69603); background-image: -ms-linear-gradient(top, #fabe0a, #e69603); background-image: -o-linear-gradient(top, #fabe0a, #e69603); background-image: -webkit-linear-gradient(top, #fabe0a, #e69603); border-radius: 4px; color: #fff !important; --moz-border-radius: 4; padding: 0.3rem 0.4rem; text-decoration: none; --webkit-border-radius: 4; } div.bottomheader .container .list-brand .menucucigudang { background: #f53939; background-image: linear-gradient(to bottom, #f53939, #bb1504); background-image: -moz-linear-gradient(top, #f53939, #bb1504); background-image: -ms-linear-gradient(top, #f53939, #bb1504); background-image: -o-linear-gradient(top, #f53939, #bb1504); background-image: -webkit-linear-gradient(top, #f53939, #bb1504); border-radius: 4px; color: #fff !important; --moz-border-radius: 4; padding: 0.3rem 0.4rem; text-decoration: none; --webkit-border-radius: 4; } div.bottomheader .container .list-brand .menucucigudang:hover { background: #bb1504; background-image: linear-gradient(to bottom, #bb1504, #f53939); background-image: -moz-linear-gradient(top, #bb1504, #f53939); background-image: -ms-linear-gradient(top, #bb1504, #f53939); background-image: -o-linear-gradient(top, #bb1504, #f53939); background-image: -webkit-linear-gradient(top, #bb1504, #f53939); } div.bottomheader .container .list-brand .menuusedcomponent { background: #5a5959; background-image: linear-gradient(to bottom, #5a5959, #232323); background-image: -moz-linear-gradient(top, #5a5959, #232323); background-image: -ms-linear-gradient(top, #5a5959, #232323); background-image: -o-linear-gradient(top, #5a5959, #232323); background-image: -webkit-linear-gradient(top, #5a5959, #232323); border-radius: 4px; color: #fff !important; --moz-border-radius: 4; padding: 0.3rem 0.4rem; text-decoration: none; --webkit-border-radius: 4; } div.bottomheader .container .list-brand .menuusedcomponent:hover { background: #232323; background-image: linear-gradient(to bottom, #232323, #5a5959); background-image: -moz-linear-gradient(top, #232323, #5a5959); background-image: -ms-linear-gradient(top, #232323, #5a5959); background-image: -o-linear-gradient(top, #232323, #5a5959); background-image: -webkit-linear-gradient(top, #232323, #5a5959); } div.bottomheader .container .list-brand .menubrown { background: #c49727; background-image: linear-gradient(to bottom, #c49727, #612405); background-image: -moz-linear-gradient(top, #c49727, #612405); background-image: -ms-linear-gradient(top, #c49727, #612405); background-image: -o-linear-gradient(top, #c49727, #612405); background-image: -webkit-linear-gradient(top, #c49727, #612405); border-radius: 4px; color: #fff !important; --moz-border-radius: 4; padding: 0.3rem 0.4rem; text-decoration: none; --webkit-border-radius: 4; } div.bottomheader .container .list-brand .menubrown:hover { background: #612405; background-image: linear-gradient(to bottom, #612405, #c49727); background-image: -moz-linear-gradient(top, #612405, #c49727); background-image: -ms-linear-gradient(top, #612405, #c49727); background-image: -o-linear-gradient(top, #612405, #c49727); background-image: -webkit-linear-gradient(top, #612405, #c49727); } div.bottomheader .container .list-brand .menugrey { background: #cfcfcf; background-image: linear-gradient(to bottom, #cfcfcf, #4d4d4d); background-image: -moz-linear-gradient(top, #cfcfcf, #4d4d4d); background-image: -ms-linear-gradient(top, #cfcfcf, #4d4d4d); background-image: -o-linear-gradient(top, #cfcfcf, #4d4d4d); background-image: -webkit-linear-gradient(top, #cfcfcf, #4d4d4d); border-radius: 4px; color: #fff !important; --moz-border-radius: 4; padding: 0.3rem 0.4rem; text-decoration: none; --webkit-border-radius: 4; } div.bottomheader .container .list-brand .menugrey:hover { background: #4d4d4d; background-image: linear-gradient(to bottom, #4d4d4d, #cfcfcf); background-image: -moz-linear-gradient(top, #4d4d4d, #cfcfcf); background-image: -ms-linear-gradient(top, #4d4d4d, #cfcfcf); background-image: -o-linear-gradient(top, #4d4d4d, #cfcfcf); background-image: -webkit-linear-gradient(top, #4d4d4d, #cfcfcf); } div.bottomheader .container .list-brand .menushop { font-size: 23px !important; } .btn-orange { background: #fa8420; background-image: linear-gradient(to bottom, #fabe0a, #e69603); background-image: -moz-linear-gradient(top, #fabe0a, #e69603); background-image: -ms-linear-gradient(top, #fabe0a, #e69603); background-image: -o-linear-gradient(top, #fabe0a, #e69603); background-image: -webkit-linear-gradient(top, #fabe0a, #e69603); border-radius: 5px; color: #fff !important; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } footer .footer { background-color: #ececec; } footer .footer strong.menu { font-size: 0.8rem; } footer .footer .btn-foot { margin-bottom: 0.5rem; } footer .footer .btn-foot img { float: left; left: 500px; width: 1.7rem; } footer .footer .col-foot-info { text-align: center; vertical-align: middle; } footer .footer .col-foot-info strong { font-size: 0.9rem; } footer .footer .col-foot-info p { font-size: 0.8rem; } footer .footer .col-lg-5ths { text-align: center; vertical-align: middle; } footer .footer .col-lg-5ths strong { font-size: 0.9rem; } footer .footer .col-lg-5ths p { font-size: 0.8rem; } footer .footer .col-xs-5ths, footer .footer .col-sm-5ths, footer .footer .col-md-5ths, footer .footer .col-lg-5ths { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } @media (min-width: 992px) { footer .footer .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { footer .footer .col-lg-5ths { width: 20%; float: left; } } footer .orange { background-color: #fa8420; color: #fff; } footer ul { margin: 0px; padding: 0px; } footer ul li { list-style: none; font-size: 0.77rem; } footer ul li a { text-decoration: none; color: #656565; } footer ul li a:hover { text-decoration: none; color: black; } footer .infodev small { font-size: 0.7rem; } div.buttonbuy { position: fixed; bottom: 0px; background-color: #fa8420; z-index: 600; width: 100%; color: white; border-radius: 0px !important; } .img-responsive { width: 100%; } .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .container { min-width: 1200px !important; } .col-lg-15 { width: 20%; float: left; } } .cardresult { background-color: #fff; border-radius: 6px; box-shadow: 0 3px 13px 2px rgba(0, 0, 0, 0.45); margin-bottom: 20px; --moz-box-shadow: 0 3px 13px 2px rgba(0, 0, 0, 0.45); --webkit-box-shadow: 0 3px 13px 2px rgba(0, 0, 0, 0.45); } @media (max-width: 767px) { .navbar-toggle.offcanvas-toggle { background: transparent; } .navmobile { background-color: black; z-index: 9999 !important; } .navmobile .label-silver { background-color: #ececec; color: grey; margin-left: 0.2rem; } .navmobile .label-platinum { background-color: #e5e4e2; color: grey; margin-left: 0.2rem; } .navmobile .label-gold { background-color: #fa8420; color: white; margin-left: 0.2rem; } .navmobile .list-group-item:first-child, .navmobile .list-group-item:last-child { border-radius: 0rem; } .navmobile .list-group .list-group-item { border-left: transparent; border-right: transparent; } .navmobile .list-group a { color: black; } .navmobile .list-group .collapsedecategorymobileprn.active { background-color: rgba(129, 138, 145, 0.48) !important; border-top-color: transparent; border-bottom-color: transparent; } } .slick-prev:before, .slick-next:before { color: #9a9a9a !important; } .slick-arrow { display: none; } .slick-dots li button:before { font-size: 16px !important; } .tab-mobile-home .nav-item { width: 49%; background-color: gainsboro; text-align: center; margin-left: 0rem; } .tab-mobile-home .nav-item a { color: black; } .modal-dialog { margin: 5% auto; } .label-failed { background-color: #d9534f; } .label-failed[href]:hover, .label-failed[href]:focus { background-color: #c9302c; } .label-gobox { background-color: #542c0e; } .label-orange { background-color: #fa8420; } .label-show { background-color: #13aa5c; padding: 5px 5px; } .label-draft { background-color: #fa8420; padding: 5px 5px; } .popup .alert-warning a { color: #8e7703; text-decoration: none; } .popup .alert-warning a:hover { color: #826d03; } .store-menu-tab .nav a { color: black !important; text-decoration: none; } .store-menu-tab .nav > .active { color: var(--color-primary) !important; } /* color */ .color-primary { color: var(--color-primary) !important; } .bg-white { background-color: white; } /* color-custom */ .text-white { color: white; } .text-dark { color: black; } .text-orange { color: var(--color-primary) !important; } .tru-member-silver { background: linear-gradient( 90deg, rgb(232 232 232) 35%, rgba(176, 176, 176, 1) 100% ); } .tru-member-gold { background: linear-gradient( 90deg, rgba(218, 195, 135, 1) 35%, rgba(157, 120, 25, 1) 100% ); } .d-none { display: none; } .d-flex { display: flex; } .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-inline-block { display: inline-block !important; } .d-inline { display: inline !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } .flex-row { -ms-flex-direction: row !important; flex-direction: row !important; } /* new css */ .hr-solid { border-top: 0.5px solid #ccc; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-end { vertical-align: end !important; } /* spacing */ .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .gap-5 { gap: 3rem !important; } .row-gap-0 { row-gap: 0 !important; } .row-gap-1 { row-gap: 0.25rem !important; } .row-gap-2 { row-gap: 0.5rem !important; } .row-gap-3 { row-gap: 1rem !important; } .row-gap-4 { row-gap: 1.5rem !important; } .row-gap-5 { row-gap: 3rem !important; } .column-gap-0 { -moz-column-gap: 0 !important; column-gap: 0 !important; } .column-gap-1 { -moz-column-gap: 0.25rem !important; column-gap: 0.25rem !important; } .column-gap-2 { -moz-column-gap: 0.5rem !important; column-gap: 0.5rem !important; } .column-gap-3 { -moz-column-gap: 1rem !important; column-gap: 1rem !important; } .column-gap-4 { -moz-column-gap: 1.5rem !important; column-gap: 1.5rem !important; } .column-gap-5 { -moz-column-gap: 3rem !important; column-gap: 3rem !important; } /* color-custom */ .text-white { color: white; } /* border */ .border-none { border: none !important; } .radius-none { border-radius: 0px !important; } .radius-sm { border-radius: 0.2rem !important; } .radius-lg { border-radius: 0.3rem !important; } .radius-lg-right { border-radius: 0 0.3rem 0.3rem 0 !important; -webkit-border-radius: 0 0.3rem 0.3rem 0 !important; -moz-border-radius: 0 0.3rem 0.3rem 0 !important; -ms-border-radius: 0 0.3rem 0.3rem 0 !important; -o-border-radius: 0 0.3rem 0.3rem 0 !important; } .radius-lg-left { border-radius: 0.3rem 0 0 0.3rem !important; -webkit-border-radius: 0.3rem 0 0 0.3rem !important; -moz-border-radius: 0.3rem 0 0 0.3rem !important; -ms-border-radius: 0.3rem 0 0 0.3rem !important; -o-border-radius: 0.3rem 0 0 0.3rem !important; } .radius-circle { border-radius: 1000px !important; } .card-active { border: solid 3px var(--color-primary); } .tru-member-silver { background: linear-gradient( 90deg, rgb(232 232 232) 35%, rgba(176, 176, 176, 1) 100% ); } .tru-member-gold { background: linear-gradient( 90deg, rgba(218, 195, 135, 1) 35%, rgba(157, 120, 25, 1) 100% ); } .d-none { display: none !important; } .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-inline-block { display: inline-block !important; } .d-inline { display: inline !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } /* new css */ .sticky { position: -webkit-sticky; position: sticky; top: 0px; } .sticky-member { position: -webkit-sticky; position: sticky; top: 10px; } .hr-solid { border-top: 1px solid #ccc; } .btnshare { display: inline-block; padding: 0.175rem 0.5rem; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid #999; border-radius: 0.25rem; } .modal-mobile { margin: 0; margin-bottom: -10px; position: absolute; bottom: 0; width: 100%; } .modal-dialog-new { min-height: calc(100vh - 60px); display: flex; flex-direction: column; justify-content: center; overflow: auto; } @media (max-width: 768px) { .modal-dialog { min-height: calc(100vh - 20px); } } /* faisal */ .d-inline-flex { display: -ms-inline-flexbox !important; display: inline-flex !important; } .d-inline-block { display: inline-block !important; } .d-inline { display: inline !important; } .flex-column { -ms-flex-direction: column !important; flex-direction: column !important; } /* align content */ .justify-content-start { -ms-flex-pack: start !important; justify-content: flex-start !important; } .justify-content-end { -ms-flex-pack: end !important; justify-content: flex-end !important; } .justify-content-center { -ms-flex-pack: center !important; justify-content: center !important; } .justify-content-between { -ms-flex-pack: justify !important; justify-content: space-between !important; } .justify-content-around { -ms-flex-pack: distribute !important; justify-content: space-around !important; } .align-items-start { -ms-flex-align: start !important; align-items: flex-start !important; } .align-items-end { -ms-flex-align: end !important; align-items: flex-end !important; } .align-items-center { -ms-flex-align: center !important; align-items: center !important; } .align-items-baseline { -ms-flex-align: baseline !important; align-items: baseline !important; } .align-items-stretch { -ms-flex-align: stretch !important; align-items: stretch !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } /* text align */ .text-justify { text-align: justify; } .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .va-middle { vertical-align: middle !important; } /* spacing */ .gap-0 { gap: 0 !important; } .gap-1 { gap: 0.25rem !important; } .gap-2 { gap: 0.5rem !important; } .gap-3 { gap: 1rem !important; } .gap-4 { gap: 1.5rem !important; } .gap-4-5 { gap: 2.22rem !important; } .gap-5 { gap: 3rem !important; } .row-gap-0 { row-gap: 0 !important; } .row-gap-1 { row-gap: 0.25rem !important; } .row-gap-2 { row-gap: 0.5rem !important; } .row-gap-3 { row-gap: 1rem !important; } .row-gap-4 { row-gap: 1.5rem !important; } .row-gap-5 { row-gap: 3rem !important; } .column-gap-0 { -moz-column-gap: 0 !important; column-gap: 0 !important; } .column-gap-1 { -moz-column-gap: 0.25rem !important; column-gap: 0.25rem !important; } .column-gap-2 { -moz-column-gap: 0.5rem !important; column-gap: 0.5rem !important; } .column-gap-3 { -moz-column-gap: 1rem !important; column-gap: 1rem !important; } .column-gap-4 { -moz-column-gap: 1.5rem !important; column-gap: 1.5rem !important; } .column-gap-5 { -moz-column-gap: 3rem !important; column-gap: 3rem !important; } .mb-5px { margin-bottom: 5px; } .mr-5px { margin-right: 5px; } /* border list */ .border-none { border: none !important; } .border-sm { border: 1px solid var(--border-color); } .border-md { border: 1.5px solid var(--border-color); } .border-lg { border: px solid var(--border-color); } /* border radius */ .radius-none { border-radius: 0px !important; } .radius-sm { border-radius: 0.2rem !important; } .radius-lg { border-radius: 0.3rem !important; } .hr-solid { border-top: 1px solid #ccc; } /* font size */ p { margin-bottom: 0; } .f1rem { font-size: 1rem; } .f6 { font-size: 6px !important; } .f8 { font-size: 8px !important; } .f10 { font-size: 10px !important; } .f11 { font-size: 11px !important; } .f12 { font-size: 12px !important; } .f13 { font-size: 13px !important; } .f14 { font-size: 14px !important; } .f15 { font-size: 15px !important; } .f16 { font-size: 16px !important; } .f18 { font-size: 18px !important; } .f20 { font-size: 20px !important; } .f22 { font-size: 22px !important; } .f24 { font-size: 24px !important; } .f28 { font-size: 28px !important; } .f30 { font-size: 30px !important; } .f32 { font-size: 32px !important; } .f38 { font-size: 38px !important; } .f40 { font-size: 40px !important; } .f48 { font-size: 48px !important; } .f60 { font-size: 60px !important; } .f72 { font-size: 72px !important; } /* color font */ .forange { color: #fa8420 !important; } .fblack { color: #292828 !important; } a.fblack { color: #292828 !important; } .fwhite { color: #fff !important; } .fred { color: red !important; } .fgreen { color: green !important; } .fgray { color: gray !important; } /* font weight */ .fbold { font-weight: 700; } /* width */ .fullScreen { min-height: 100vh; } .h-80-vh { min-height: 80vh; } .col-lg-1--5 { width: 12.5%; position: relative; min-height: 1px; padding-right: 0.9375rem; padding-left: 0.9375rem; float: left; } .col-lg-2--4 { width: 20%; position: relative; min-height: 1px; padding-right: 0.9375rem; padding-left: 0.9375rem; float: left; } .col-lg-2--2 { width: 17.2%; position: relative; min-height: 1px; padding-right: 0.9375rem; padding-left: 0.9375rem; float: left; } .text-link { color: var(--color-primary); text-decoration: none; } .text-link:hover { color: var(--color-primary); text-decoration: none; } .padfooter { padding: 10px 20px 10px; } .vl { border-left: 2px solid rgb(208, 208, 208); } .bb-1 { border-bottom: 1px solid rgb(208, 208, 208); } /* button */ .btn-orange { background: #fa8420; background-image: linear-gradient(to bottom, #fabe0a, #e69603); background-image: -moz-linear-gradient(top, #fabe0a, #e69603); background-image: -ms-linear-gradient(top, #fabe0a, #e69603); background-image: -o-linear-gradient(top, #fabe0a, #e69603); background-image: -webkit-linear-gradient(top, #fabe0a, #e69603); border-radius: 5px; color: #fff !important; font-family: Arial; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-orange { background: #fabe0a; background-image: linear-gradient(to bottom, #fabe0a, #e69603); background-image: -moz-linear-gradient(top, #fabe0a, #e69603); background-image: -ms-linear-gradient(top, #fabe0a, #e69603); background-image: -o-linear-gradient(top, #fabe0a, #e69603); background-image: -webkit-linear-gradient(top, #fabe0a, #e69603); border-radius: 5px; color: #fff !important; font-family: Arial; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-orange:hover { background: #f29a03; background-image: linear-gradient(to bottom, #f29a03, #d69a03); background-image: -moz-linear-gradient(top, #f29a03, #d69a03); background-image: -ms-linear-gradient(top, #f29a03, #d69a03); background-image: -o-linear-gradient(top, #f29a03, #d69a03); background-image: -webkit-linear-gradient(top, #f29a03, #d69a03); text-decoration: none; } .btn-red { background: #f53939; background-image: linear-gradient(to bottom, #f53939, #bb1504); background-image: -moz-linear-gradient(top, #f53939, #bb1504); background-image: -ms-linear-gradient(top, #f53939, #bb1504); background-image: -o-linear-gradient(top, #f53939, #bb1504); background-image: -webkit-linear-gradient(top, #f53939, #bb1504); border-radius: 5px; color: #fff !important; font-family: Arial; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-red:hover { background: #bb1504; background-image: linear-gradient(to bottom, #bb1504, #f53939); background-image: -moz-linear-gradient(top, #bb1504, #f53939); background-image: -ms-linear-gradient(top, #bb1504, #f53939); background-image: -o-linear-gradient(top, #bb1504, #f53939); background-image: -webkit-linear-gradient(top, #bb1504, #f53939); text-decoration: none; } .btn-black { background: #5a5959; background-image: linear-gradient(to bottom, #5a5959, #232323); background-image: -moz-linear-gradient(top, #5a5959, #232323); background-image: -ms-linear-gradient(top, #5a5959, #232323); background-image: -o-linear-gradient(top, #5a5959, #232323); background-image: -webkit-linear-gradient(top, #5a5959, #232323); border-radius: 5px; color: #fff !important; font-family: Arial; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-black:hover { background: #232323; background-image: linear-gradient(to bottom, #232323, #5a5959); background-image: -moz-linear-gradient(top, #232323, #5a5959); background-image: -ms-linear-gradient(top, #232323, #5a5959); background-image: -o-linear-gradient(top, #232323, #5a5959); background-image: -webkit-linear-gradient(top, #232323, #5a5959); text-decoration: none; } .btn-brown { background: #c49727; background-image: linear-gradient(to bottom, #c49727, #612405); background-image: -moz-linear-gradient(top, #c49727, #612405); background-image: -ms-linear-gradient(top, #c49727, #612405); background-image: -o-linear-gradient(top, #c49727, #612405); background-image: -webkit-linear-gradient(top, #c49727, #612405); border-radius: 5px; color: #fff !important; font-family: Arial; --moz-border-radius: 5; text-decoration: none; --webkit-border-radius: 5; } .btn-brown:hover { background: #612405; background-image: linear-gradient(to bottom, #612405, #c49727); background-image: -moz-linear-gradient(top, #612405, #c49727); background-image: -ms-linear-gradient(top, #612405, #c49727); background-image: -o-linear-gradient(top, #612405, #c49727); background-image: -webkit-linear-gradient(top, #612405, #c49727); text-decoration: none; } .btn-white { background: #e6e6e6; background-image: -webkit-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -moz-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -ms-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: -o-linear-gradient(top, #e6e6e6, #d1d1d1); background-image: linear-gradient(to bottom, #e6e6e6, #d1d1d1); ---webkit-border-radius: 5; ---moz-border-radius: 5; border-radius: 5px; color: #333; text-decoration: none; } .btn-white:hover { background: #d6d2d6; background-image: -webkit-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -moz-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -ms-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: -o-linear-gradient(top, #d6d2d6, #d9d9d9); background-image: linear-gradient(to bottom, #d6d2d6, #d9d9d9); text-decoration: none; color: #333; } .btnshare { display: inline-block; padding: 0.175rem 0.5rem; font-size: 1rem; font-weight: 400; line-height: 1.5; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: 1px solid #999; border-radius: 0.25rem; } .btnhome { background: #fa8420; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); padding: 10px 15px 10px; color: #fff !important; text-decoration: none; } .btnhome:hover { background: #dcdcdc, 100%; background-image: linear-gradient(to bottom, #dcdcdc, #dddddd); background-image: -moz-linear-gradient(top, #dcdcdc, #dddddd); background-image: -ms-linear-gradient(top, #dcdcdc, #dddddd); background-image: -o-linear-gradient(top, #dcdcdc, #dddddd); background-image: -webkit-linear-gradient(top, #dcdcdc, #dddddd); text-decoration: none; color: #fa8420 !important; padding: 10px 15px 10px; } .btnnew { background: #fa8420; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); padding: 5px 15px 5px; color: #fff !important; text-decoration: none; } .btnnew:hover { background: #dcdcdc, 100%; background-image: linear-gradient(to bottom, #dcdcdc, #dddddd); background-image: -moz-linear-gradient(top, #dcdcdc, #dddddd); background-image: -ms-linear-gradient(top, #dcdcdc, #dddddd); background-image: -o-linear-gradient(top, #dcdcdc, #dddddd); background-image: -webkit-linear-gradient(top, #dcdcdc, #dddddd); text-decoration: none; color: #fa8420 !important; padding: 5px 15px 5px; } .btnnewred { background: red; background-image: linear-gradient(to bottom, red); background-image: -moz-linear-gradient(top, red); background-image: -ms-linear-gradient(top, red); background-image: -o-linear-gradient(top, red); background-image: -webkit-linear-gradient(top, red); padding: 5px 15px 5px; color: #fff !important; text-decoration: none; } .btnnewred:hover { background: #dcdcdc, 100%; background-image: linear-gradient(to bottom, #dcdcdc, #dddddd); background-image: -moz-linear-gradient(top, #dcdcdc, #dddddd); background-image: -ms-linear-gradient(top, #dcdcdc, #dddddd); background-image: -o-linear-gradient(top, #dcdcdc, #dddddd); background-image: -webkit-linear-gradient(top, #dcdcdc, #dddddd); text-decoration: none; color: red !important; padding: 5px 15px 5px; } .btnnewgreen { background: #13aa5c; background-image: linear-gradient(to bottom, #13aa5c); background-image: -moz-linear-gradient(top, #13aa5c); background-image: -ms-linear-gradient(top, #13aa5c); background-image: -o-linear-gradient(top, #13aa5c); background-image: -webkit-linear-gradient(top, #13aa5c); padding: 5px 15px 5px; color: #fff !important; text-decoration: none; } .btnnewgreen:hover { background: #dcdcdc, 100%; background-image: linear-gradient(to bottom, #dcdcdc, #dddddd); background-image: -moz-linear-gradient(top, #dcdcdc, #dddddd); background-image: -ms-linear-gradient(top, #dcdcdc, #dddddd); background-image: -o-linear-gradient(top, #dcdcdc, #dddddd); background-image: -webkit-linear-gradient(top, #dcdcdc, #dddddd); text-decoration: none; color: #13aa5c !important; padding: 5px 15px 5px; } .btnnewwhite:hover { background: #fa8420; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); padding: 5px 15px 5px; color: #fff !important; text-decoration: none; } .btnnewwhite { background: #fff, 100%; background-image: linear-gradient(to bottom, #fff, #fff); background-image: -moz-linear-gradient(top, #fff, #fff); background-image: -ms-linear-gradient(top, #fff, #fff); background-image: -o-linear-gradient(top, #fff, #fff); background-image: -webkit-linear-gradient(top, #fff, #fff); text-decoration: none; color: #fa8420 !important; padding: 5px 15px 5px; border: 1px solid #fa8420; } .btnnewwhiteedit { background: #fff, 100%; background-image: linear-gradient(to bottom, #fff, #fff); background-image: -moz-linear-gradient(top, #fff, #fff); background-image: -ms-linear-gradient(top, #fff, #fff); background-image: -o-linear-gradient(top, #fff, #fff); background-image: -webkit-linear-gradient(top, #fff, #fff); text-decoration: none; color: #fa8420 !important; padding: 5px 10px; border: 1px solid #fa8420; } store .btn-login { background: #fa8420; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); border-radius: 40px; color: #fff !important; text-decoration: none; } .btn-login:hover { background: #fa8420, 50%; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); text-decoration: none; border-radius: 40px; } .btn-login:click { background: #fa8420, 80%; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); text-decoration: none; border-radius: 40px; } .btndown { background: #fa8420, 80%; background-image: linear-gradient(to bottom, #fa8420, #fa8420); background-image: -moz-linear-gradient(top, #fa8420, #fa8420); background-image: -ms-linear-gradient(top, #fa8420, #fa8420); background-image: -o-linear-gradient(top, #fa8420, #fa8420); background-image: -webkit-linear-gradient(top, #fa8420, #fa8420); text-decoration: none; padding: 0px 10px; font-size: 12px; color: #fff; } .colornav { color: #fa8420; } .marginnav { margin-left: -25px; margin-top: 7px; text-underline-offset: 10px; } .marginnavtop { margin-top: 7px; text-underline-offset: 10px; } /* card */ .card-shadow:hover { box-shadow: 2px 2px 2px 2px #999; } .card .circle { position: absolute; width: 100%; height: 100%; background: #fa8420; top: 0; left: 0; clip-path: circle(21% at 72% 0); z-index: 1; } .card .circle1 { position: absolute; width: 100%; height: 100%; background: #fa8420; top: 0; left: 0; clip-path: circle(15% at 18% 100%); z-index: 1; } .card .circle2 { position: absolute; width: 100%; height: 100%; background: #fa8420; top: 0; left: 0; clip-path: circle(14% at 12% 0); z-index: 1; } .labelnew-silver { background-color: #dfd6d6; border: solid; border-color: #dfd6d6; color: white; font-size: 12px; padding: 5px 10px; margin: 0; } .labelnew-gold { background-color: transparent; border: solid; border-color: gold; color: gold; font-size: 12px; padding: 5px 10px; margin: 0; } .labelnew-platinum { background-color: transparent; border: solid; border-color: #e5e4e2; color: #e5e4e2; font-size: 12px; padding: 5px 10px; margin: 0; } .newlabel-silver { background-color: #ececec; color: grey; margin-left: 0.2rem; } .newlabel-gold { background-color: #fa8420; color: white; margin-left: 0.2rem; } /* status */ .status-Menunggu { background-color: transparent; border: solid; border-color: orange; color: orange; font-size: 8px; } .status-Ditolak { background-color: transparent; border: solid; border-color: red; color: red; font-size: 8px; } .status-Selesai { background-color: transparent; border: solid; border-color: green; color: green; font-size: 8px; } .status-success { background-color: transparent; border: solid; border-color: green; color: green; font-size: 12px; } .status-waiting { background-color: transparent; border: solid; border-color: #fa8420; color: #fa8420; font-size: 12px; } .status-failed { background-color: transparent; border: solid; border-color: red; color: red; font-size: 12px; } .status-process { background-color: transparent; border: solid; border-color: blue; color: blue; font-size: 12px; } /* title */ .title-desktop .title-content { font-size: 30px; color: #000; font-weight: 700; text-decoration: none; } .title-mobile .title-content { font-size: 20px; color: #000; font-weight: 700; text-decoration: none; } /* foto */ .foto-mobile { width: 40px; height: 40px; border: #ccc solid 0.5px; border-radius: 50%; } .foto-desktop { width: 30px; height: 30px; border: #ccc solid 0.5px; border-radius: 50%; margin-right: 10px; } .avatar-setting { width: 100px; height: 100px; border: #ccc solid 0.5px; border-radius: 50%; background-color: #fff; } .avadesk { width: 50px; height: 50px; border-radius: 50%; border: 0.5px solid #ccc; background-color: #fff; } .avatar-mobile { width: 50px; height: 50px; border-radius: 50%; text-shadow: #000; border: #ccc solid 0.5px; } .avanav { width: 30px; height: 30px; border-radius: 50%; text-shadow: #000; border: #ccc solid 0.5px; } .icon-a-15 { width: 15px !important; height: 15px !important; } .icon-a-20 { width: 20px !important; height: 20px !important; } .icon-a-30 { width: 30px !important; height: 30px !important; } .icon-a-40 { width: 40px !important; height: 40px !important; } .icon-a-50 { width: 50px !important; height: 50px !important; } .icon-w-20 { width: 20px !important; } .icon-w-30 { width: 30px !important; } .icon-w-40 { width: 40px !important; } .icon-w-50 { width: 50px !important; } .icon-h-30 { height: 30px !important; } .icon-h-40 { height: 40px !important; } .icon-h-50 { height: 50px !important; } /* animasi */ .rotate { transform: rotate(180deg); transition: transform 0.3s ease; } /* css navbar */ nav .inputsearch span, nav .inputsearch input { border: 1px solid #ddd; } nav { color: #333 !important; padding: 0px; font-family: "Poppins", sans-serif; } nav .container-fluid .row { padding: 6px 15px; } .navbar-header a { font-size: 14px; margin-left: 0px; color: #000; text-decoration: none; } .bottom_nav_menu a { font-size: 12px; color: black; text-decoration: none; list-style-type: none; } .bottom_nav_menu { font-size: 12px; color: black; text-decoration: none; list-style-type: none; } .bottom_nav_menu a:hover { color: var(--color-primary) !important; } .menu-utama .dropdown .dropdown-menu a { color: black !important; } .menu-utama a { font-size: 14px; margin-left: 0px; color: black !important; text-decoration: none; } .dropdown .dropdown-menu { z-index: 9999999 !important; } .menu-utama a:hover { color: var(--color-primary) !important; } .menu-utama a.active { color: var(--color-primary) !important; } .menu-kanan { margin-top: 10px; } .menu-kanan a { margin-top: 20px; color: #000; } .menu-kanan-atas a { color: #000; text-decoration: none; font-size: 14px; } .menu-bahasa { background-color: none; padding: 0px; } .menu-bahasa nav ul { list-style: none; margin: 0px; padding: 5px; } .menu-bahasa > .dropdown-toggle::after { display: none; } .dropdown-bahasa { padding: 0; margin: 0; border: 0 solid transition !important; border: 0 solid rgba(0, 0, 0, 0.15); border-radius: 0px; -webkit-box-shadow: none !important; box-shadow: none !important; position: absolute; top: 100%; left: -15%; } .dropdown-bahasa > li { border-bottom: 1px solid #ccc; } .dropdown-bahasa > li:last-child { border-bottom: none; } .dropdown-bahasa > li:hover { background-color: #fa8420; } .dropdown-bahasa > li > a { color: #333; text-decoration: none; font-size: 12px; display: block; width: 100%; } .dropdown-bahasa > li > a:hover { background-color: #fa8420; color: #fff; } .menu-bahasa > .dropdown-bahasa { margin-left: 0px !important; border: 1px solid #ccc; } .menu-bahasa > .dropdown { border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 0px !important; } .menu-bahasa > .dropdown > a { border-top-left-radius: 10px; border-top-right-radius: 10px; padding-top: 0px !important; } .daftar-login:hover { color: #fa8420; } .menu-bahasa-main { display: inline !important; } .menu-bahasa-main > li { display: inline !important; } .menu-bahasa > .menu-bahasa-main > li > a { color: #000; white-space: nowrap; overflow: hidden; font-size: 14px; vertical-align: top; max-width: 150px; text-overflow: ellipsis; padding-left: 15px; text-decoration: none; } .menu-bahasa > .menu-bahasa-main > li > a:hover { color: #fa8420; } .select-search-category { width: 100px; height: 36px; background-color: #fa8420; color: #fff; border: none; } .dropbtn { color: #fff; font-size: 16px; border: none; } .d-down { position: relative; display: inline-block; } .d-down-content-akun { display: none; flex-direction: column; position: absolute; top: 85%; right: 0; background-color: #fff; border: 1px solid #ccc; z-index: 999999999; color: #000; padding: 10px; width: 270px; height: 160px; overflow-y: scroll; text-align: start; justify-content: space-between; } .d-down:hover .d-down-content-akun { display: flex; } .d-down-content-akun .list { color: #000; font-size: 14px; } .d-down-content-akun .list:hover { color: #fa8420; } .d-down-content-akun .card-akun { padding: 8px 10px; } .mega-menu { width: 100%; padding: 20px; background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid #e9ecef; } .mega-submenu { display: none; position: absolute; left: 100%; top: 0; width: 800px; background: white; border: 1px solid #e9ecef; padding: 20px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); height: 100%; z-index: 100000; opacity: 0; transform: translateX(10px); transition: opacity 0.3s ease, transform 0.3s ease; } .dropdown-menu { min-width: 280px; border: none; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); padding: 0; overflow: hidden; } .dropdown-menu .menu-item { position: relative; } .dropdown-menu .menu-item:hover > .mega-submenu { display: block; opacity: 1; transform: translateX(0); } .kategori { position: relative; } .dropdown-toggle { color: #2c3e50; font-weight: 600; padding: 10px 15px; border-radius: 6px; transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; gap: 8px; } .dropdown-toggle:hover { background-color: #f8f9fa; color: #3498db; } .dropdown-toggle::after { margin-left: 5px; transition: transform 0.3s ease; } .dropdown-toggle:hover::after { transform: rotate(180deg); } .mega-menu h5 { color: #2c3e50; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f1f2f6; } .mega-menu h5 img { width: 24px; height: 24px; object-fit: contain; } .menu-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } .section ul { list-style: none; padding: 0; margin: 0; } .section ul li { margin-bottom: 8px; transition: transform 0.2s ease; } .section ul li:hover { transform: translateX(5px); } .list-kategori-atas { color: #495057; text-decoration: none; padding: 8px 12px; border-radius: 6px; display: block; transition: all 0.3s ease; font-weight: 500; position: relative; } .list-kategori-atas:hover { background-color: #e3f2fd; color: #1976d2; padding-left: 20px; } .list-kategori-atas::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background-color: #3498db; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .list-kategori-atas:hover::before { opacity: 1; } .alert-warning { margin: 0; padding: 10px; font-size: 0.85rem; } /* Responsive design */ @media (max-width: 992px) { .mega-submenu { width: 600px; } .menu-content { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .mega-submenu { width: 100%; position: static; transform: none; box-shadow: none; border: none; padding: 15px; } .dropdown-menu .menu-item:hover > .mega-submenu { display: none; } .menu-content { grid-template-columns: 1fr; } .d-flex.gap-3 { flex-direction: column; gap: 10px !important; } } /* Animation for dropdown */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dropdown-menu.show { animation: fadeIn 0.3s ease forwards; } .dropdown-store { position: relative; display: inline-block; } .dropdown-toggle-store { display: flex; align-items: center; padding: 10px 15px; font-weight: 600; border-radius: 5px; transition: background-color 0.3s ease; cursor: pointer; } .dropdown-toggle-store:hover { background: rgba(255, 255, 255, 0.1); } /* Main Dropdown Container */ .dropdown-menu-store { position: absolute; top: 100%; left: 0; width: 900px; background: white; border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0; margin-top: 8px; z-index: 100000; display: none; } .dropdown-store.show .dropdown-menu-store { display: block; } /* Mega Menu Layout */ .mega-menu-store { display: flex; min-height: 400px; position: relative; } /* Left Sidebar */ .menu-sidebar { width: 240px; background: #f8f9fa; border-right: 1px solid #e5e5e5; border-radius: 8px 0 0 8px; position: relative; } .menu-item-store { position: static; /* Ubah dari relative ke static */ border-bottom: 1px solid #e9ecef; } .menu-item-store:last-child { border-bottom: none; } .menu-item-store > a { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #333; text-decoration: none; font-size: 14px; transition: all 0.2s ease; position: relative; z-index: 1; } .menu-item-store:hover > a { background: #007bff; color: white; } .menu-item-store > a .fa-angle-right { color: #999; font-size: 12px; transition: transform 0.2s ease; } .menu-item-store:hover > a .fa-angle-right { color: white; transform: translateX(2px); } /* Submenu Styles - POSISI FIXED DI AREA KANAN */ .mega-submenu-store { display: none; position: absolute; left: 240px; /* Sesuai lebar sidebar */ top: 0; width: 660px; /* 900px - 240px */ height: 100%; /* FULL HEIGHT */ background: white; flex-direction: column; border-left: 1px solid #e5e5e5; border-radius: 0 8px 8px 0; z-index: 2; } /* SUBMENU MUNCUL SAAT HOVER - INI YANG PENTING */ .menu-item-store:hover .mega-submenu-store { display: flex; } /* Header Submenu - SELALU DI ATAS */ .submenu-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px; border-bottom: 1px solid #e5e5e5; background: white; position: sticky; top: 0; z-index: 10; height: 46px; /* Fixed height */ box-sizing: border-box; } .header-left { display: flex; align-items: center; gap: 12px; } .submenu-header img { width: 24px; height: 24px; } .submenu-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #333; } .see-all { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #007bff; text-decoration: none; font-weight: 500; } .see-all:hover { text-decoration: underline; } .see-all .fa-chevron-right { font-size: 10px; } /* Submenu Content - SCROLLABLE DI BAWAH HEADER */ .submenu-content-store { flex: 1; overflow-y: auto; padding: 0; height: calc(100% - 70px); /* Tinggi total dikurangi header */ } .section-store { padding: 20px 24px; height: 100%; box-sizing: border-box; } .section-store ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; align-content: start; } .list-kategori-atas-store { display: block; padding: 8px 12px; color: #555; text-decoration: none; border-radius: 4px; transition: all 0.2s ease; font-size: 13px; text-align: center; } .list-kategori-atas-store:hover { background: #f0f7ff; color: #007bff; } .no-subcategory { grid-column: 1 / -1; text-align: center; padding: 20px; color: #999; } .no-subcategory p { margin: 0; font-style: italic; } /* Scrollbar Styling */ .submenu-content-store::-webkit-scrollbar { width: 6px; } .submenu-content-store::-webkit-scrollbar-track { background: #f1f1f1; } .submenu-content-store::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; } .submenu-content-store::-webkit-scrollbar-thumb:hover { background: #a8a8a8; } /* Responsive */ @media (max-width: 992px) { .dropdown-menu-store { width: 700px; } .menu-sidebar { width: 200px; } .mega-submenu-store { left: 200px; width: 500px; } .section-store ul { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .dropdown-menu-store { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; margin: 0; border-radius: 0; } .mega-menu-store { flex-direction: column; min-height: 100vh; } .menu-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #eee; } .mega-submenu-store { position: static; width: 100%; height: auto; border-left: none; border-top: 1px solid #eee; } .submenu-content-store { height: auto; } .section-store ul { grid-template-columns: 1fr; } } .mainmenu > ul > li:hover > a { background: #fa8420; } .mainmenu > ul > ul > li:hover > a, .navbar-default > .navbar-nav > .show > .dropdown-menu > li > a:focus, .navbar-default > .navbar-nav > .show > .dropdown-menu > li > a:hover { background: #fa8420; } .mainmenu > ul > ul > ul > li:hover > a { background: #fa8420; } .mainmenu > ul > ul, .mainmenu > ul > ul > .dropdown-menu { background: #eee; padding: 0px !important; } /******************************Drop-down menu work on hover**********************************/ .mainmenu { border: 0 solid; margin: 0; padding: 0px; /* min-height: 20px; */ width: auto; border-radius: 0px; } @media only screen and (min-width: 767px) { .mainmenu > .menu-item > ul > li:hover > ul { display: block; } .mainmenu > ul > li, .mainmenu > ul > li > a { display: inline-block !important; } .mainmenu > ul > ul > li, .mainmenu > ul > ul > li > div { display: block !important; } .mainmenu > ul > ul > ul > li:first-child { border-top: 1px solid #ccc; } .mainmenu > ul > ul { position: absolute; top: 100%; left: 0; min-width: 200px; display: none; } /*******/ .mainmenu > ul > ul > li { position: relative; padding: 0px; } .mainmenu > ul > ul > li:hover > ul { display: block; } } @media only screen and (max-width: 767px) { .navbar-nav > .show > .dropdown-menu > .dropdown-menu > li > a { padding: 16px 15px 16px 35px; } .navbar-nav > .show > .dropdown-menu > .dropdown-menu > .dropdown-menu > li > a { padding: 16px 15px 16px 45px; } } .menu-area { background: none; padding: 0px; } .menu-area .mr-auto { list-style: none; margin: 0px; padding: 0px; } .menu-area .dropdown-toggle::after { display: none; /*width: 0; position: absolute; height: 0; margin-right: 0px; margin-left: 0px; vertical-align: middle; top: 45%; content: ""; border-left: .3em solid transparent; border-right: .3em solid transparent; border-top: .3em solid;*/ } .menu-area .dropdown-menu { margin-left: 0px !important; border: 1px solid #ccc; } .menu-area .dropdown { padding-top: 0px !important; } */ .menu-kanan-atas > * > .fa { font-size: 24px !important; } .badge { position: absolute; top: 10px; font-weight: normal; height: 17px; width: 17px; border-radius: 50%; display: inline-block; text-align: center; margin-left: 15px; font-size: 10px; margin-top: 3px; } button:focus { outline: none !important; } .w-1200 { width: 1200px !important; } .w-100 { width: 100% !important; } .w-50 { width: 50% !important; } .h-100 { height: 100% !important; } .rfq-button { position: fixed; height: 42px; bottom: 40px; right: 135px; color: #fff; border-radius: 50px; text-align: center; z-index: 9999999; } .info > .value { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .btn-edit-product { background-color: transparent; font-size: 10px; padding: 3px 6px; border: #fa8420 solid 0.5px; border-radius: 50%; color: #fa8420; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .btn-delete-product { background-color: transparent; padding: 3px 6px; font-size: 10px; border: red solid 0.5px; border-radius: 50%; color: red; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } /* text decoration */ .td-none { text-decoration: none !important; } .row.navi-atas::after { display: none !important; } .bg-position-left { background-position: left center !important; } .bg-position-right { background-position: right center !important; } .bg-position-top { background-position: center top !important; } .bg-position-bottom { background-position: center bottom !important; } .z-index-1 { z-index: 1; } .row::after { display: none !important; } .underline-text { text-decoration: underline; }