* { /* font-family: Montserrat; */ font-family: 'Public Sans'; } body { background: #000!important; } body #content-body form .container-fluid { color: #fff; } textarea { height: 100%!important; } .langEN { display: none; } .richText-help { display: none!important; } /* PNotify */ h4.ui-pnotify-title { font-size: 16px; } div.ui-pnotify-text { font-size: 14px; } a.normal-link:hover { color: #337ab7!important; } a:active { background-color: #6eb9f7!important; background-size: 100%!important; transition: background 0s!important; } a:hover{ text-decoration: none!important; color: white!important; } a.normal { color: #007bff!important; } a.normal:hover { color: #0056b3!important; } .carousel-inner img { margin: auto; } div.center { margin-left: auto!important; margin-right: auto!important; } img.center { display: block; margin-left: auto; margin-right: auto; width: 50%; } .thumbnail-100 { position: relative; height: 100px; overflow: hidden; border-radius: 10px; } .thumbnail-100 img { position: absolute; left: 50%; top: 50%; min-width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); max-width: 100%; height: auto; } .thumbnail { position: relative; height: 200px; overflow: hidden; border-radius: 10px; } .thumbnail img { position: absolute; left: 50%; top: 50%; min-width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .hidden { display: none!important; } /* Splashscreen */ #splashscreen { border: 0px none; border-radius: 0px; float: none; letter-spacing: normal; outline: currentcolor none medium; text-decoration: none; text-indent: 0px; text-shadow: none; text-transform: none; visibility: visible; line-height: 1; font-family: Arial, sans-serif; box-shadow: none; appearance: none; position: fixed; z-index: 3; inset: 0px; width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: auto; background: rgba(0, 0, 0, 0.7) none repeat scroll 0% 0%; display: none; } #splashscreen #splashscreen-wrapper { width: 100%; max-width: 60%; position: absolute; top: 19%; bottom: 19%; display: block; left: 20%; right: 20%; height: 100%; max-height: 62%; margin-bottom: 0px; transition: top 0.2s ease 0s, left 0.2s ease 0s, margin-bottom 0.2s ease 0s; } #splashscreen #splashscreen-wrapper #splashscreen-image { max-width: 35%; height: 100%; max-height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } #splashscreen #splashscreen-wrapper #splashscreen-image:hover { cursor: pointer } /* #splashscreen #splashscreen-wrapper #splashscreen-image-desktop { display: none; max-width: 100%; border-radius: 20px; } #splashscreen #splashscreen-wrapper #splashscreen-image-mobile { display: block; max-width: 100%; max-height: 601px; height: 100%; width: auto; } */ #splashscreen #splashscreen-wrapper #splashscreen-description { max-width: 65%; max-height: 601px; height: 100%; position: absolute; background: #fff; right: 0px; top: 0px; left: 35%; line-height: 1.5; } #splashscreen #splashscreen-wrapper #splashscreen-description * { margin-bottom: 15px; } #splashscreen #splashscreen-wrapper #close-splashscreen { position: absolute; cursor: pointer; z-index: 1001; border: none ; background-color: #df4e4b; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; fill: #fff; border-radius: 100%; box-shadow: 0px 0px 0px 0px #33333; min-width: auto; top: -15px; right: -15px; bottom: auto; left: auto; } #splashscreen #splashscreen-wrapper #close-splashscreen:hover { border: none!important; background-color: #ffffff!important; fill: #df4e4b!important; } @media only screen and (max-width: 991px) { #splashscreen #splashscreen-wrapper { max-width: 100%; left: 0%; right: 0%; top: 5%; padding-right: 15px; padding-left: 15px; margin-left: auto; margin-right: auto; max-height: 100%; } #splashscreen #splashscreen-wrapper #close-splashscreen { top: -15px; right: 5px; } #splashscreen #splashscreen-wrapper #splashscreen-image { max-width: 100%; } #splashscreen #splashscreen-wrapper #splashscreen-description { max-width: 100%; left: 0%; position: relative; max-height: 100%; height: auto; } } /* Image Preview */ .image-preview { background-size: cover; background-position: center center; } /* Ripple effect */ .btn { background-position: center!important; transition: background 0.8s!important; } .btn:hover { /* background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%!important; */ color: #81c34c!important; background-color: #fff!important; border: 1px solid #cccccc!important; } .btn:hover .fas { color: #81c34c!important; } .btn:active { background-color: #6eb9f7!important; background-size: 100%!important; transition: background 0s!important; } .btn:clicked { color: #fff!important; } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-secondary { color: #ffff!important; background-color: #6c757d!important; } .btn-default { color: #333!important; background-color: #fff!important; border-color: #ccc!important; } .btn-plasaku { background-color: #81c34c!important; color: #fff!important; font-weight: 500!important; } .btn-plasaku .fas { color: #fff!important; } button[class*="actionList"]:hover .buttons-html5 .fas, button[class*="actionList"]:hover .btn-default .fas { color: #000!important; } button[class*="actionList"]:hover .buttons-html5:hover .fas, button[class*="actionList"]:hover .btn-default:hover .fas { color: #81c34c!important; } label.btn { font-size: 0.775em; } .carousel { z-index: 1; } .form-group-sm .form-control, .input-sm { font-size: 12px!important; padding: 5px 10px!important; border-radius: 3px!important; } .form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-append>.btn, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-prepend>.input-group-text { padding: .25rem .5rem; font-size: 1em!important; border-radius: .2rem; } .btn-xs { padding: .25rem .4rem!important; font-size: 0.9em!important; line-height: .5!important; border-radius: .2rem!important; } .btn-sm { padding: 5px 10px!important; font-size: 0.95em; line-height: 1.5; border-radius: 3px!important; } .dt-title-table .btn-group { display: inline-flex!important; } .dt-title-table .btn-group-xl .btn-sm { font-size: 0.95em; } div.jconfirm-content .dt-title-table .btn-group-xl .btn-sm { font-size: 0.85em; } div.jconfirm-content label { color: #555; font-weight: 700; } div.jconfirm-content table { color: #000; } .dataTables_wrapper .dropdown-toggle .datatablesDropdownButton .btn-sm { font-size: 0.85em; } .btn-group-sm>.btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .text-bold { font-weight: bold!important; } .text-underline { text-decoration: underline; } .top-auto { top: auto!important; } hr.hr-white { border-top: 1px solid white; } .tab-content label.btn { font-size: 0.9em; } /* Full width button */ .block { display: block; width: 100%; cursor: pointer; text-align: center; } /* MM Menu */ .mm-menu_position-bottom.mm-menu_opened, .mm-menu_position-front.mm-menu_opened, .mm-menu_position-top.mm-menu_opened { z-index: 3; } .mm-page { z-index: auto!important; } .mm-menu_position-bottom.mm-menu_opened~.mm-wrapper__blocker, .mm-menu_position-front.mm-menu_opened~.mm-wrapper__blocker, .mm-menu_position-top.mm-menu_opened~.mm-wrapper__blocker { z-index: 2!important; } .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited, .mm-counter { font-size: 1em; color: #fff; } .mm-menu .mm-navbar { color: #fff; } .mm-menu .fas, .mm-menu .far, .mm-menu .fab, .mm-menu .fad, .mm-menu .fa { color: #3ea7e1; } .mm-menu a:hover { text-decoration: none!important; color: black!important; } .mm-menu div a:hover { background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%!important; color: white!important; } .mm-menu div a:hover .fas, .mm-menu div a:hover .far, .mm-menu div a:hover .fad, .mm-menu div a:hover .fab, .mm-menu div a:hover .fa, .mm-iconbar__bottom a:hover, .mm-menu div a:hover .mm-counter { color: white!important; } .mm-menu div a.mm-btn_next:hover:after { border: 2px solid white; border-bottom: none; border-right: none; } .mm-menu div a.mm-btn_close:hover:before { border: 2px solid white; border-bottom: none; border-right: none; } .mm-btn:after, .mm-btn:before { border: 2px solid #fff; border-bottom: none!important; border-right: none!important; } .mm-searchfield input, .mm-searchfield input:focus, .mm-searchfield input:hover { font-size: 0.90em; } .mm-navbars_bottom a { border: 1px solid var(--mm-color-border); } .mm-navbars_bottom a i { font-size: 1.5em; } .mm-navbar__tab_selected { background: #81c34c; } .mm-listitem__text i, .mm-listitem__text img { font-size: 1.15em; text-align: center; line-height: 25px; width: 25px; margin-right: 15px; float: left; -webkit-transition: color 1s ease; -o-transition: color 1s ease; transition: color 1s ease; } @media only screen and (max-width: 991px) { .mm-menu_fullscreen.mm-menu_position-bottom { top: 0; max-height: 100%; } .mm-menu div a:hover { background: #81c34c!important; color: white!important; } } /*------- Inputosaurus -------*/ .inputosaurus-container, .inputosaurus-input input { border-radius: .2rem; font-size: 13px!important; } /* Video Extend */ .row-video .video-extend-logo-container img { z-index: 1!important; } .row-video .col-sm-6 iframe, .row-video .col-sm-6 .video-extend-wrapper video { width: 100%!important; max-width: 100%!important; height: auto!important; min-height: 350px; max-height: 350px; } /*------- Replace SSI Title Modal -------*/ .ssi-modalTitle { font-family: "Helvetica Neue","Helvetica,Arial","sans-serif" !important; font-style: normal !important; font-size: 20px!important; } .ssi-modalContent { font-family: "Helvetica Neue","Helvetica,Arial","sans-serif" !important; } .ssi-buttons .ssi-modalBtn { font-family: "Helvetica Neue","Helvetica,Arial","sans-serif" !important; } /*------- Replace jQuery Confirm Bootstrap 4 -------*/ a.jquery-notice:hover { color: #007bff!important; cursor: pointer; } .jconfirm { z-index: 5!important; } .jconfirm .card { background: #fff!important; color: #000; } .jconfirm .card-header span { font-family: DINPro!important; } span.jconfirm-title { font-family: DINPro!important; font-size: 0.85em!important; font-weight: bold!important; } div.jconfirm-content { font-family: sans-serif !important; font-size: 0.925em!important; /* border-bottom: 1px solid #d0d0d0; */ padding-right: 2px; /* for footer button padding-bottom: 5px; */ } .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content { overflow-x: hidden!important; } .jconfirm-box { padding: 15px 0 0; } .jconfirm-buttons button { font-family: sans-serif !important; font-size: 14px!important; font-weight: normal!important; text-transform: none!important; margin-top: -5px; } .jconfirm-content-pane { margin-bottom: 5px!important; } .jconfirm-box a.mini-link:hover { color: #007bff!important; text-decoration: none; } .color-default-h1 { color: rgba(0, 0, 0, 0.8) !important; } /* PGW Slider */ .pgwSlider .ps-caption { z-index: 1; } .no-float .pgwSlider .ps-current { float: none; } .no-float .pgwSlider .ps-current img { max-height: 300px; /* max-width: 1500px; */ width: auto; min-width: auto; margin-left: auto; margin-right: auto; } .pull-right { float: right!important; } .pull-left { float: left!important; } .pull-right .btn { font-size: 1em!important; padding: 6px 12px!important; } .form-group { margin-bottom: 8px!important; } .form-control { width: 100%; height: 34px; padding: 6px 12px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } label { color: #FFF; font-weight: 700; } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { height: 30px; padding: 5px 10px; font-size: 0.925em!important; line-height: 1.5; border-radius: 3px; } form .form-control { border: 1px solid #aaa; } .fas-tooltip-help { color: #007bff; } /* Tooltip */ .tooltip > .tooltip-inner { background-color: #73AD21; font-size: 13px; color: #fff; border: 1px solid #8f8f8f; text-align: left; } /* Tooltip on top */ .tooltip.top > .tooltip-arrow { border-top: 5px solid #8f8f8f; } /* Tooltip on bottom */ .tooltip.bottom > .tooltip-arrow { border-bottom: 5px solid #8f8f8f; } /* Tooltip on left */ .tooltip.left > .tooltip-arrow { border-left: 5px solid #8f8f8f; } /* Tooltip on right */ .tooltip.right > .tooltip-arrow { border-right: 5px solid #8f8f8f; } /* ---- Select 2 ---- */ .select2-dropdown { z-index: 5; } .select2-selection__rendered { font-size: 0.925em; height: calc(1.5em + .5rem + 2px)!important; padding: .25rem .5rem!important; line-height: 1.725!important; border-radius: .2rem!important; } div.jconfirm-content .select2-selection__rendered { font-size: 0.925em; } .select2-container .select2-selection--single { height: auto!important; } ul.select2-results__options li.select2-results__option, input.select2-search__field { font-size: 1em; padding: 4px 8px!important; width: 100%!important; color: #000; } div.jconfirm-content ul.select2-results__options li.select2-results__option, input.select2-search__field { font-size: 0.95em; } .select2-results,.select2-results__options { z-index: 5; } .select2-search__field:focus { outline: none; } /* ---- Datetime picker ---- */ .datepicker-dropdown { border: 1px solid red!important; } .datepicker-dropdown:after { border-bottom: 6px solid red; } /* ---- Nav Tab Pane in jQuery Confirm ---- */ .nav-tabs { border-bottom: 0!important; } .nav-tabs > li.nav-item > a.active { /* background-color: #00338d !important; */ background-color: #81c34c!important; color: white !important; } .nav-tabs > li.nav-item > a { color: #fff!important; background-color: #000!important; border: 0.5px solid white; border-radius: 10px 10px 0px 0px; font-size: 1!important; font-family: 'DINPro'!important; } .nav-tabs > li.nav-item > a span { font-family: 'DINPro'!important; } #tab_selector { font-family: sans-serif !important; font-weight: bold!important; } /* ---- Dropdown Menu Bar ---- */ ul.dropdown-menu, ul.dropdown-menu div.dropdown-item, ul.dropdown-menu div.dropdown-header, .dt-button-collection, button.dropdown-toggle { background-color: #81c34c!important; color: #fff!important; } div.dropdown-item a { font-family: sans-serif!important; font-size: 12px!important; } ul.dropdown-menu { border: 1px solid #53F1FC!important; font-weight: bold!important; } .dropdown-menu-bar a.dropdown-item:active { color: white!important; } .dropdown-menu-bar { display: none; background-color: transparent; border: 1px solid #000!important; position: absolute; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1!important; min-width: 11.5rem!important; } .dropdown-menu-btn { background-color: #81c34c!important; z-index: 1; } .dropdown-menu-bar a.dropdown-item { border: none!important; font-size: 1em; font-weight: bold; text-decoration: none; color: #000!important; padding: 5px 25px; text-align: left; border-left: 1px solid #fff; } .dropdown-menu-bar a:hover { /* background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%!important; */ background-color: #000!important; color: #fff!important; } .dropdown-menu-bar a:active { background-color: #6eb9f7!important; background-size: 100%!important; transition: background 0s!important; } @media only screen and (max-width: 991px) { .dropdown-menu-bar a { height: 30px!important; text-align: center!important; } .top-nav-bar .dropdown-menu-right:after { content:""; position: absolute; right: 4px; top: -22px; width: 0; height: 0; border-style: solid; border-width: 0 17px 22px 17px; border-color: transparent transparent #53F1FC transparent; z-index:2; } .top-nav-bar .dropdown-menu-left:after { content:""; position: absolute; left: 4px; top: -22px; width: 0; height: 0; border-style: solid; border-width: 0 17px 22px 17px; border-color: transparent transparent #53F1FC transparent; z-index:2; } } /* ---- Form Resi ---- */ #form-resultresi .top_title { text-align: center; } /* ---- Tab Content ---- */ span.contentTitle { font-family: sans-serif !important; font-weight: bold!important; } /* ----- Modal Action ----- */ .stickyFooter { position: fixed; bottom: 5px; float: right; background-color: #ED1C24; /* border: 1px solid #007bff; */ border: 1px solid #ced4da; border-radius: .25rem; margin-top: -21px; border-radius: 3px; } /* ---- For Disabled Button ---- */ button[disabled], html input[disabled] { background-color: #dddddd!important; } .white-space-pre { white-space: pre-wrap!important; } .dt-title-table { padding-left: 0px!important; } .actionList { margin-right: 5px!important; } .buttons-colvis { margin-left: 5px!important; } /* Product Box */ .product-box .card { margin-bottom: 15px; border-radius: 0px; border: 0px !important; } .product-box .wrapper { position: relative; overflow: hidden; background: transparent; } .product-box .wrapper:after { content: ''; display: block; padding-top: 100%; } .product-box .wrapper img { width: auto; height: 100%; max-width: none; position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .product-box a.template-list:active { background: #fff!important; } .product-box a.template-list, a.template-list:hover { text-decoration: none; color: #81c34c!important; } .product-box a.template-list .product-bottom .item-price { color: #81c34c; } .product-box a.template-list .product-bottom .item-price sub { bottom: 0; font-size: 0.8em; } .product-box .template-list h6.strike { text-decoration: line-through; color: #5555!important; } .product-box .product-bottom { font-family: Public Sans; text-align: center; margin-top: 15px; margin-bottom: 15px; } .product-box .product-bottom .btn-view { border: 1px solid #81c34c; color: #81c34c; background: transparent!important; } .product-box .product-bottom .fas { color: #ED1C24; font-size: 10px; } .product-box .product-bottom h3 { font-size: 20px; font-weight: bold; } .product-box .overlay-right { display: block; opacity: 0; position: absolute; top: 2.5%; margin-left: 0; width: 70px; z-index: 1; white-space: normal; } .product-box .overlay-right img { cursor: pointer; background-color: #ffff; color: #000; height: 35px; width: 35px; font-size: 20px; padding: 2px; margin-top: 5%; margin-bottom: 5%; border: 1px solid #5555; } .product-box .overlay-right .btn-secondary { background: none!important; border: none!important; box-shadow: none!important; } .product-box:hover .overlay-right { opacity: 1; margin-left: 2.5%; transition: 0.5s; } .product-box .overlay-right .tooltip { background: #ffffe0; border: 1px solid #d1d1d1; border-radius: 3px; font-size: 0.8em; font-weight: 400; color: black; display: block; pointer-events: none; position: absolute; width: 120px; left: 50px; padding: 2px 2px; z-index: 1; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .7s ease-out; -moz-transition: all .7s ease-out; -ms-transition: all .7s ease-out; -o-transition: all .7s ease-out; transition: all .7s ease-out; } /* Yellow triangle .product-box .overlay-right .tooltip:after { border-left: solid transparent 10px; border-right: solid transparent 10px; border-top: solid #ffffe0 10px; bottom: -10px; content: " "; height: 0; left: 95%; margin-left: -13px; position: absolute; width: 0; } */ .product-box .overlay-right :hover .tooltip { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } /* IE can just show/hide with no tra7nsition */ .lte8 .product-box .overlay-right .tooltip { display: none; } .lte8 .product-box .overlay-right:hover .tooltip { display: block; } @media only screen and (min-width: 1px) { .product-box .product-bottom .price-note { font-size: 0.75em; color: #212529; } .product-box .product-bottom h5 { font-size: 1em; min-height: 55px; white-space: normal; padding-top: 5px; } .product-box .product-bottom h5, .product-bottom h6.item-price { margin-left: 5px; margin-right: 5px; font-weight: bold; margin-left: 0px; margin-right: 0px; line-height: 1.5; font-family: 'DINPro'; margin-bottom: 0px; } .product-box .product-bottom h6.short-name { margin-bottom: 0px; } .product-box .product-bottom .discount-percentage { padding: 3px 4px; padding-left: 6px; border-radius: 3px; background-color: #FFEAEF!important; color: #FF5C84!important; font-weight: bold; -moz-box-pack: center; justify-content: center; -moz-box-align: center; align-items: center; font-family: 'Public Sans'; } .product-box .product-bottom strike { color: #fff; font-weight: bold; font-family: 'Public Sans'; } .product-box .product-bottom h6.item-price { font-size: 1em; padding-bottom: 5px; } } @media only screen and (max-width: 3000px) { .product-box { width: 14.28%!important; } } @media only screen and (max-width: 2200px) { .product-box { width: 14.28%!important; max-width: 14.28%!important; flex: 14.28%!important; } } @media only screen and (max-width: 1900px) { .product-box { width: 16.66%!important; max-width: 16.66%!important; flex: 16.66%!important; } } @media only screen and (max-width: 1500px) { .product-box { width: 20%!important; max-width: 20%!important; flex: 20%!important; } } @media only screen and (max-width: 1280px) { .product-box { width: 20%!important; max-width: 20%!important; flex: 20%!important; } } @media only screen and (max-width: 1084px) { .product-box { width: 25%!important; max-width: 25%!important; flex: 25%!important; } .product-box .overlay-right { opacity: 1; } } @media only screen and (max-width: 768px) { .product-box { width: 33.3%!important; max-width: 33.3%!important; flex: 33.3%!important; } } @media only screen and (max-width: 600px) { .product-box { width: 50%!important; max-width: 50%!important; flex: 50%!important; } } /* Font Helvetica */ table { font-family: Helvetica Neue,Helvetica,Arial,sans-serif!important; } table.dataTable .odd, table.dataTable .odd + tr.child { background-color: #F2F2F2!important; } table.dataTable .even, table.dataTable .even + tr.child { background-color: #fff!important; } table.dataTable .selected { background-color: #0275d8!important; } table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child { position: relative; padding-left: 30px!important; cursor: pointer; } table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before { top: 5px!important; } .card { background-color: #000!important; color: #fff; } .card, .card-header { font-family: sans-serif; } .card .container .dataTables_scrollBody { overflow-x: hidden!important; } .dt-custom-filter input { height: 30px; line-height: 1.5; } th.dt-center, td.dt-center { text-align: center; } .dataTables_scrollBody { overflow: hidden!important; } /* Change font size and color of text in the table */ table.dataTable tr td { background-color: initial; } table.dataTable tbody { font-size : 0.975em; color: #555; } table.dataTable thead th { /* Old Style font-size : 13px; */ font-size : 1em; background-color: #007bff; color: white; vertical-align: middle; } /* This code will change background color of a selected row */ table.dataTable tbody tr.selected { /* color: #222 !important; background-color: #E8E8E8 !important; */ color: #fff!important; } table.dataTable.display tbody > tr.selected > .sorting_1 { background-color: inherit !important; } /* This code will make the datatables loading always on top */ .dataTables_processing { z-index: 105; } /* Plus Button Datatable */ table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before { line-height: 15px!important; } /* Bottom Position Button */ .dataTables_wrapper .bottom-position { position: absolute; bottom: 0; width: 100%; padding-right: 30px; } .dataTables_wrapper .dataTables_info { text-align: left!important; } @media only screen and (max-width: 991px) { .dataTables_wrapper .bottom-position { position: relative; margin-left: auto; margin-right: auto; padding-right: 0px!important; padding-bottom: 40px!important; } .dataTables_wrapper .dataTables_info { text-align: center!important; } } /* Custom style for datatables */ .dt-custom-action { position: relative; top: 5px; } div.dt-custom-filter-container { position:relative; height: 57px; } div.dt-custom2-filter-container { position:relative; height: 30px; } div.dt-inline-style { display: inline-block; } .dt-custom-filter .dataTables_filter { margin-right: 5px; } .dt-custom-filter .dataTables_filter, .dt-custom-filter .dataTables_length { display: inline-block; } div.dt-custom-filter { padding-top: 4px; } .dt-title-table h3 { margin-top:8px !important; } /* Style for button in dropdown export, copy, etc.. */ div.datatablesDropdownButton, a.datatablesDropdownButton { text-align: center!important; margin: auto!important; background-color: white!important; } /* Changes strip background datatables scroller */ div.dts div.dataTables_scrollBody { background: white!important; } div.dt-button-background { position: fixed!important; } div.dt-button-collection div.dropdown-menu { background-color: #81c34c!important; border: 1px solid #53F1FC!important; } .table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th { padding: 5px!important; } .dataTables_scrollBody thead tr[role="row"]{ visibility: collapse !important; } .buttons-columnVisibility { font-size: 0.925em!important; } .buttons-columnVisibility { color: #000!important; } .buttons-columnVisibility:hover { color: #000!important; } .buttons-columnVisibility.active { color: #fff!important; } .previous, .next { display: block; cursor: pointer; text-align: center; } .previous a, .next a { background-color: #81c34c!important; color: #fff!important; font-size: 0.975em; } .previous a:hover, .next a:hover { color: #81c34c!important; background-color: #fff!important; } @media only screen and (max-width: 991px) { .pagination { text-align: center!important; width: 100%; } .previous, .next { width: 100%; } .dt-title-table .btn-group, .dt-title-table .btn-group button, .dt-title-table .btn-group .btn-group button { line-height: 1.75; font-size: 1em!important; } .dt-title-table >div.btn-group >div.btn-group, .dt-title-table .btn-group button.dropdown-toggle, .dt-title-table >div.btn-group, .dt-title-table .btn-group button.btn-colvis, .dataTables_filter label input { width: 100%!important; } .dataTables_filter, .dataTables_filter label { width: 100%; } div.dataTables_wrapper div.dataTables_filter input { margin-left: 0px!important; } .buttons-colvis { margin-right: -10px; } #table-main_info { width: 100%!important; text-align: center!important; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { white-space: nowrap; justify-content: flex-end; float: right; padding-top: 5px; } .dt-title-table { padding-left: 0px!important; position: relative; width: 100%!important; text-align: center; margin-bottom: 15px; } div.dt-custom-filter { padding-top: 4px; width: 100%; position: relative; text-align: center; } form div.card div.row div.col-sm-1, form div.card div.row div.col-sm-2, form div.card div.row div.col-sm-3, form div.card div.row div.col-sm-4, form div.card div.row div.col-sm-5, form div.card div.row div.col-sm-6, form div.card div.row div.col-sm-7, form div.card div.row div.col-sm-8, form div.card div.row div.col-sm-9, form div.card div.row div.col-sm-10, form div.card div.row div.col-sm-11, form div.card div.row div.col-sm-12 { max-width: 100%; flex: 100%; } } .item-box .col-xs-5ths, .item-box .col-sm-5ths, .item-box .col-md-5ths, .item-box .col-lg-5ths, .item-box .col-sm-2 { position: relative; min-height: 1px; padding-right: 5px; padding-left: 10px; } .col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; } } /* Bootstrap Datetime Picker */ table.dataTable tr.selected .bootstrap-datetimepicker-widget td { background: #ffff!important; } .bootstrap-datetimepicker-widget { inset: auto!important; } .bootstrap-datetimepicker-widget table thead tr { background: #007bff!important; } .bootstrap-datetimepicker-widget table td.day { color: #000; } .bootstrap-datetimepicker-widget .datepicker-decades table td span.decade { width: 31%!important; } .bootstrap-datetimepicker-widget .datepicker-decades table td span:nth-last-child(-n+3) { display: none; } .bootstrap-datetimepicker-widget table td.day.disabled { color: #636c72; } .bootstrap-datetimepicker-widget .datepicker .prev, .bootstrap-datetimepicker-widget .datepicker .next { width: auto!important; min-height: 20px!important; } .bootstrap-datetimepicker-widget span.fas.fa-clock, .bootstrap-datetimepicker-widget span.fas.fa-calendar, .bootstrap-datetimepicker-widget .timepicker .timepicker-picker table i, .bootstrap-datetimepicker-widget .timepicker .timepicker-picker table .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker .timepicker-picker table .timepicker-minute { background: #007bff!important; color: #ffff!important; } .bootstrap-datetimepicker-widget a[data-action] { padding: 0px;!important } .bootstrap-datetimepicker-widget a[data-action] i { padding: 15.5px!important; font-size: 1.5em!important; } .bootstrap-datetimepicker-widget .picker-switch td span { line-height: 1.5; height: 1.5em; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #000!important; color: #fff; } /*-------------------------------------- -------- Pre Loader Style START -------- ---------------------------------------*/ .glowquote { font-size: 6vw; font-family: times; background: -webkit-linear-gradient(left, blue 15%, green 40%, #ed1c24 60%, black 100%); background: -moz-linear-gradient(left, blue 15%, green 40%, #ed1c24 60%, black 100%); background-size: 150px 50px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -moz-background-clip: text; -moz-text-fill-color: transparent; -webkit-animation: gradient-animation infinite 5s linear; -moz-animation: gradient-animation infinite 5s linear; } @-webkit-keyframes gradient-animation { 0% {background-position: left top;} 100% {background-position: right top;} } @-moz-keyframes gradient-animation { 0% {background-position: left top;} 100% {background-position: right top;} } .ball { background: transparent url("../img/default/logo.png") no-repeat center center; /* background: radial-gradient(farthest-corner at 60px 45px, #aaa 0%, black 50%); */ border-radius: 50%; height: 101px; width: 101px; } .ball-shadow { background: radial-gradient(50% 50%, #000 0%, #fff 100%); height: 50px; width: 101px; } .bouncy-castle { height: 50%; position: absolute; z-index: 99; top: 50%; left: 50%; transform: translate(-50%, -50%)!important; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .bouncy-castle .ball-shadow { -webkit-animation-direction: alternate; -webkit-animation-duration: 1s; -webkit-animation-name: grow; -webkit-animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1s; animation-name: grow; animation-iteration-count: infinite; bottom: 0; position: absolute; margin-left: -100px; } .bouncy-castle .ball { -webkit-animation-direction: alternate; -webkit-animation-duration: 1s; -webkit-animation-name: bounce; -webkit-animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 1s; animation-name: bounce; animation-iteration-count: infinite; margin-left: -50px; position: absolute; } @-webkit-keyframes grow { from { bottom: 0; margin-left: -100px; height: 50px; opacity: 1; width: 200px; } to { bottom: -15px; margin-left: -150px; height: 80px; opacity: 0.4; width: 300px; } } @keyframes grow { from { bottom: 0; margin-left: -100px; height: 50px; width: 200px; } to { bottom: 20px; margin-left: 0; height: 10px; width: 15px; } } @-webkit-keyframes bounce { from { bottom: 20px; } to { bottom: 100%; } } @keyframes bounce { from { bottom: 20px; } to { bottom: 100%; } } img.loading { box-shadow: 0px 0px 5px #fff; } body > .inner { display: none; } body.pg-loaded > .inner { display: block; } .pg-loading-screen .pg-loading-html { margin-top: 30px; } #preloader-loading { display: none; position: fixed; z-index: 999999999; top: 0; left: 0; overflow: visible; opacity: 0.8; width: 100%; height: 100%; background: #fff url("../img/loading/loader.gif") no-repeat center center; } #preloader-plasaku { position: fixed; z-index: 999999999; top: 0; left: 0; overflow: visible; width: 100%; opacity: 0.95; height: 100%; background: #fff url("../img/default/logo-blacksmall.png") no-repeat center center; } #preloader-plasaku span { position: absolute; z-index: 99; margin-left: auto; margin-right: auto; top: 60%; } #preloader-uploading { display: none; } #preloader-uploading .progress-bar { max-width: 50%; margin-left: 25%; margin-right: 25%; } #preloader-plasaku span.text-only { position: absolute; z-index: 99; left: 50%; top: 60%; transform: translate(-50%, -50%); color: orange; font-weight: bold; text-transform: uppercase; font-size: 6vw; } #preloader-plasaku span.arrow { position: absolute; z-index: 99; left: 50%; top: 70%; transform: translate(-50%, -50%); } /*************************************** Spinners ****************************************/ /* * Usage: * * * */ .sk-spinner-rotating-plane.sk-spinner { width: 30px; height: 30px; background-color: #81c34c; margin: 0 auto; -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out; animation: sk-rotatePlane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes sk-rotatePlane { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /* * Usage: * * * */ .sk-spinner-double-bounce.sk-spinner { width: 40px; height: 40px; position: relative; margin: 0 auto; } .sk-spinner-double-bounce .sk-double-bounce1, .sk-spinner-double-bounce .sk-double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #81c34c; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; animation: sk-doubleBounce 2s infinite ease-in-out; } .sk-spinner-double-bounce .sk-double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: * * * */ .sk-spinner-wave.sk-spinner { margin: 0 auto; width: 50px; height: 60px; text-align: center; font-size: 10px; } .sk-spinner-wave div { background-color: #81c34c; height: 100%; width: 6px; margin: 0 1px; display: inline-block; -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out; animation: sk-waveStretchDelay 1.2s infinite ease-in-out; } .sk-spinner-wave .sk-rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-spinner-wave .sk-rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-spinner-wave .sk-rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-spinner-wave .sk-rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes sk-waveStretchDelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); transform: scaleY(1); } } /* * Usage: * * * */ .sk-spinner-wandering-cubes.sk-spinner { margin: 0 auto; width: 32px; height: 32px; position: relative; } .sk-spinner-wandering-cubes .sk-cube1, .sk-spinner-wandering-cubes .sk-cube2 { background-color: #ED1C24; width: 10px; height: 10px; position: absolute; top: 0; left: -11px; -webkit-animation: sk-wanderingCubeMove 1.8s infinite ease-in-out; animation: sk-wanderingCubeMove 1.8s infinite ease-in-out; } .sk-spinner-wandering-cubes .sk-cube2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-wanderingCubeMove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes sk-wanderingCubeMove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); transform: translateX(42px) rotate(-90deg) scale(0.5); } 50% { /* Hack to make FF rotate in the right direction */ -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); transform: translateX(42px) translateY(42px) rotate(-179deg); } 50.1% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); transform: translateX(42px) translateY(42px) rotate(-180deg); } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* * Usage: * * * */ .sk-spinner-pulse.sk-spinner { width: 40px; height: 40px; margin: 0 auto; background-color: #ED1C24; border-radius: 100%; -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out; animation: sk-pulseScaleOut 1s infinite ease-in-out; } @-webkit-keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes sk-pulseScaleOut { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* * Usage: * * * */ .sk-spinner-chasing-dots.sk-spinner { margin: 0 auto; width: 40px; height: 40px; position: relative; text-align: center; -webkit-animation: sk-chasingDotsRotate 2s infinite linear; animation: sk-chasingDotsRotate 2s infinite linear; } .sk-spinner-chasing-dots .sk-dot1, .sk-spinner-chasing-dots .sk-dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #81c34c; border-radius: 100%; -webkit-animation: sk-chasingDotsBounce 2s infinite ease-in-out; animation: sk-chasingDotsBounce 2s infinite ease-in-out; } .sk-spinner-chasing-dots .sk-dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes sk-chasingDotsRotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes sk-chasingDotsBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-chasingDotsBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: * * * */ .pg-loading-screen .pg-loading-center-middle { background: #000; } .sk-spinner-three-bounce.sk-spinner { margin: 0 auto; width: 70px; text-align: center; } .sk-spinner-three-bounce div { width: 18px; height: 18px; background-color: #ED1C24; border-radius: 100%; display: inline-block; -webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out; animation: sk-threeBounceDelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .sk-spinner-three-bounce .sk-bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; background-color: #fff; } .sk-spinner-three-bounce .sk-bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; background-color: #fff; } .sk-spinner-three-bounce .sk-bounce3 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; background-color: #fff; } @-webkit-keyframes sk-threeBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-threeBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* * Usage: * * *
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*