/* Version : 1.0 1 - Default 2 - Field 3 - Navbar 4 - Button 5 - Notification 6 - ErrorMessage 7 - DivTable 8 - DataTable 9 - multiple-select 10 - Scroll 11 - Card 12 - Media-1992px 13 - Media-991px 14 - Media-767px 15 - Media-575px 16 - Media-206px */ /* 1 - Default */ html{background-color:#fff !important;} body{ } h1,h2,h3,h4,h5,h6{font-weight:800 !important;} p{margin-bottom:0 !important;} a {color: #00A0FF; text-decoration: none;} a:hover {color: #0000B2; text-decoration: none;} .link{color:#ae6327 !important;text-decoration:none;} .link:hover{color:#0a0a0a !important;text-decoration:none;} .link-dark{color:#0a0a0a !important;text-decoration:none;} .link-dark:hover{color:#555 !important;text-decoration:none;} .links{text-decoration:none;} .links:hover{text-decoration:underline;} .link-pointer {cursor: pointer;} .text-justify{text-align:justify;} .opacity-1 {opacity:1 !important;} section{min-height:600px; margin-bottom:0px;} header.masthead{position:relative;overflow:hidden;padding-top:calc(.0rem);background:linear-gradient(0deg, #92D2AC, #6c9c80);} footer{background: linear-gradient(135deg, #060932, #060932);color: #D8D6D6; padding: 10px 18px; position:fixed; width:100%; bottom:0;} .logo{background:url('images/logo.png') no-repeat; background-size:contain; float:left; min-height:61px; padding-left:130px; line-height:1.1;} star{ color: #dc3545 !important; } star::before{content:"*";} wait{background:url('images/wait.gif') no-repeat; background-size:contain; min-height:20px; display:grid;} comingsoon{background:url('images/coming-soon.png') no-repeat center; min-height:580px; display:grid; background-size:contain;} .form-control { border: 1px solid #D5EFFE;} input, select, textarea {outline:none;box-shadow:none !important;border:1px solid #D5EFFE !important;} textarea{min-height:calc(0.25em + 0.75rem + 51px) !important;} textarea.short{min-height:calc(1.5em) !important;} .showhideText {position:absolute; font-size:21px; right:21px; top:14px; cursor: pointer; } /* 2 - Field */ .form-check { margin-bottom:0.00225rem !important;} .form-check-input[type=text]{height:34px;width:68px;text-align:center;} .form-check-input[type=checkbox], .form-check-input[type=radio]{height:24px;width:24px;} .form-check-input[type=checkbox]:checked, .form-check-input[type=radio]:checked {background-color:#00A0FF; border-color:#D5EFFE} .form-check-label{padding:5px 8px 0} /* 3 - Navbar */ .navbar-brand{padding-top:0;padding-bottom:0;margin-right:0;} .navbar-custom{padding-top:.25rem;padding-bottom:.25rem; /*box-shadow: 0 0 26px 0 rgba(0, 0, 0, .26);*/} .navbar-custom .navbar-brand{font-weight:700;} .navbar-custom .navbar-nav .nav-item .nav-link{background-color:#BFF202; border-color:#99C202; color:#323244; border-radius:6px;} .navbar-custom .navbar-nav .nav-item .nav-link:hover{background-color:#99C202; border-color:#BFF202; color:#323244; text-decoration:none;} .nav-link{outline:none !important;} /* 4 - Button */ .slotactive {margin:4px; background:#6dc6f1; color:#fff; padding:6px 12px; min-width:185px !important;} .slotdeactive {margin:4px; background:#555; color:#fff; padding:6px 12px; min-width:185px !important;} button:disabled {margin:4px; background:#fff; color:#000; padding:6px 12px !important;} /* 5 - Notification */ .msgNotify{width:100%;margin:1% auto;padding:15px 0;color:#01a4ef;line-height:14px;text-align:left;border-top:1px solid #AEAEAE;border-bottom:1px solid #AEAEAE} .notification { position: relative; background:url('images/bell.png') no-repeat; background-size:contain; min-height:40px; min-width:40px; display:grid;} .notification:hover{ opacity:0.6; } .notification span { position: absolute; background: #0000B2;border-radius: 10px;padding:1px 4px;font-size: 1em; font-weight: bold; color: #FFF;right: 0;top: 10px; } @media only screen and (max-width:991px){ .notification span { font-size: .6em !important; }} /* 6 - ErrorMessage */ .msgError{width:100%;margin:1% auto;padding:15px 0;color:#01a4ef;line-height:14px;text-align:left;border-top:1px solid #AEAEAE;border-bottom:1px solid #AEAEAE} .msgError ol{margin:0;padding:4px 2px} .msgError li{margin-left:35px;padding:4px 2px} /* 7 - DivTable */ .divBorder{border:none;} .divTCell{border-bottom:1px solid #ddd;font-weight:bold;} .divTTCell{border-bottom:1px solid #ddd;font-weight:bold;} .divFCell{border-top:1px solid #ddd;font-weight:bold;} .divFHideCell{border-top:1px solid #ddd;font-weight:bold;} .divBCell{border-bottom:1px solid #ddd;} .divBHideCell{border-bottom:1px solid #ddd;} .divBNoneCell{border:0;} .divBFullCell{border:0;} .divTCell, .divTTCell, .divFCell, .divFHideCell, .divBCell, .divBNoneCell, .divBFullCell{padding:0.5rem 0.1rem;} .offset-lg-05{margin-left:4.166665%; margin-right:4.166665%;} .col-lg-05{-ms-flex:0 0 4.166666%;flex:0 0 4.166666%;max-width:4.166666%;} .col-lg-15{-ms-flex:0 0 12.499999%;flex:0 0 12.499999%;max-width:12.499999%;} .col-lg-25{-ms-flex:0 0 20.833332%;flex:0 0 20.833332%;max-width:20.833332%;} .col-lg-35{-ms-flex:0 0 29.166665%;flex:0 0 29.166665%;max-width:29.166665%;} .col-lg-45{-ms-flex:0 0 37.499998%;flex:0 0 37.499998%;max-width:37.499998%;} .carousel-item {height:70vh;min-height:700px;background:no-repeat center center scroll;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;} .dropdown-toggle::after{right:12px;position:absolute;top:18px;} .dropdown-menu{margin:0;padding:4px 0;min-width:min-content;border:0 !important;border-radius:0 !important;} .dropdown-item{padding:0.4rem 0.8em;} .dropdown-nav-item{padding:0.08rem 1em;white-space:nowrap;} .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active{color:#fff !important; text-decoration:none; background-color:#00A0FF;} .dropdown-divider{margin:0.2rem 0; padding:1px 0 0;} .tray-toggle-caret{right:56px;background-color:#D5EFFE;top:-6px;margin-left:32px !important;border-top-left-radius:4px;width:12px;height:12px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);display:block;position:absolute;z-index:1061;opacity:1;} .tray-toggle-caret-left{left:0px;background-color:#FFFFFF;top:-6px;margin-left:32px !important;border-top-left-radius:4px;width:12px;height:12px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);display:block;position:absolute;z-index:1061;opacity:1;} .tray-toggle-caret-right{right:12px;background-color:#FFFFFF;top:-6px;margin-left:32px !important;border-top-left-radius:4px;width:12px;height:12px;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg);display:block;position:absolute;z-index:1061;opacity:1;} @media only screen and (max-width:991px){ header.masthead{padding-top:calc(0.0rem) !important;padding-bottom:0rem !important;} .divBorder{border:1px solid #ccc;} .divTCell, .divTTCell, .divBHideCell, .divFHideCell{display:none;} .divBCell, .divFCell, .divBNoneCell{border:none;position:relative;border:0;padding-top:6px !important;padding-left:50% !important;white-space:normal;text-align:left !important;min-height:35px;} .divBCell:before, .divBNoneCell:before, .divFCell:before{padding-top:0.375rem;position:absolute;top:6px;left:6px;width:45%;padding-right:20px;white-space:nowrap;text-align:left !important;font-weight:bold;} .divBCell:before, .divBNoneCell:before, .divFCell:before{content:attr(data-title); padding-left:calc(var(--bs-gutter-x) * 0.5); } .divBFullCell{border:none;position:relative;border:0;padding-top:6px !important;white-space:normal;text-align:left !important;min-height:35px;} .divBFullCell:before{content:attr(data-title);} .offset-lg-05{margin-left:0 !important; margin-right:0 !important;} .col-lg-05, .col-lg-15, .col-lg-25, .col-lg-35, .col-lg-45{-ms-flex:100% !important;flex:100% !important;max-width:100% !important;} .carousel-indicators li {width:26;height:6px;background-color:rgba(255, 255, 255, 0.5);} .dropdown-nav-item{padding:0.08rem 0.6em !important;white-space:nowrap !important;} .tray-toggle-caret, .tray-toggle-caret-left{top:26px !important;left:0;} } @media (min-width:1992px) { .carousel-indicators li {width:auto;height:8px;text-indent:0; padding:2px 20px;text-align:center;} .carousel-indicators li:hover, .carousel-indicators li:focus {background-color:#FFF;} .carousel-indicators {bottom: 0; margin:0;} } .table-bordered .datatable.card {border: 0 !important;} .datatable.card thead {display:none;} .datatable.card tbody tr {float:left; width:31.33%; margin:1%; border-radius:0.5em; background-color:transparent !important; box-shadow:0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);} .datatable.card tbody tr td {display: block;border: 0;} /* 8 - DataTable */ /* 9 - Multiple-select */ /* 10 - Scroll */ /* 11 - Card */ /* 12 - Media-1992px */ /* 13 - Media-991px */ /* 14 - Media-767px */ /* 15 - Media-575px */ /* 16 - Media-206px */ /**************************************************************/ .alert{margin-bottom:0;} .w-80 { width: 80% !important;} .w-60 { width: 60% !important;} .w-40 { width: 40% !important;} /****************** Media max 1199px *******************************/ @media only screen and (max-width:1199){ .datatable.card tbody tr {width:48%; margin:1%;} } /****************** Media max 991px *******************************/ @media only screen and (max-width:991px){ /* Force table to not be like tables anymore */ .datatable table, .datatable thead, .datatable tbody, .datatable th, .datatable td, .datatable tr{display:block;} /* Hide table headers (but not display:none;, for accessibility) */ .datatable thead tr{position:absolute;top:-9999px;left:-9999px;} .datatable.responsive tr{border:1px solid #ccc;} .datatable.responsive td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50% !important;} .datatable.responsive td:before{position:absolute;top:6px;left:6px;width:45%;padding-right:10px;white-space:nowrap;text-align:left !important;font-weight:bold;} /* Label the data */ .datatable.responsive td:before{content:attr(data-title) !important;} .dt-center, .dt-right{text-align:left !important;} #sidebar{min-width:60px !important;} #sidebar span{font-size:.5em; display:grid !important;} .list-group-item{width:100%;padding:8px 6px !important;text-align:left;border:0} .heading{padding-bottom:3px !important;} #ProductData, #MasterData, #Accounts, #MyAccount, #Reports { background: #34B3FF !important;} .list-group-item, .list-group-item.list-group-item-action, .list-group-item-action{color:#323244 !important;} .datatable.card tbody tr {width:48%; margin:1%;} /* Gallery */ .card-columns {-webkit-column-count: 3 !important;-moz-column-count: 3 !important;column-count: 3 !important;} } /****************** Media max 767px *******************************/ @media only screen and (max-width:767px){ .datatable.card tbody tr {width:98%; margin:1%;} /* Gallery */ .card-columns {-webkit-column-count: 2 !important;-moz-column-count: 2 !important;column-count: 2 !important;} } /****************** Media max 575px *******************************/ @media only screen and (max-width:575px){ /* Gallery */ .card-columns {-webkit-column-count: 1 !important;-moz-column-count: 1 !important;column-count: 1 !important;} } /****************** Media max 206px *******************************/ @media (max-width:206px){ section .container-fluid{display:none;} section .container{display:none;} section #Banner{display:none;} section{width:100%;margin:49% auto;padding:10px 20px;text-align:center;align-items:center;min-height:4px;} section::before{content:"This Website is the best view large screen only.";} } #ProductData, #MasterData, #Accounts, #MyAccount, #Reports { background: #34B3FF !important;} #sidebar{min-width:206px;} #sidebar span{display:block;display:inline;} .heading{padding-bottom:1px;} .datatable td{border-bottom:1px solid #efefef;} .list-group-item, .list-group-item.list-group-item-action, .list-group-item-action{color:#323244;background:none;border:0;text-wrap:nowrap; padding:.7rem;} .list-group-item:hover, .list-group-item .list-group-item-action:hover, .list-group-item-action:hover, .list-group-item:focus, .list-group-item .list-group-item-action:focus, .list-group-item-action:focus, .list-group-item.active, .list-group-item .list-group-item-action.active, .list-group-item-action.active{background-color:#34B3FF;color:#323244 !important;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:#aaa; padding:.7rem;} .list-group-item-action.smActive{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border:0; padding:.7rem;} .list-group-item-action.smActive:hover, .list-group-item-action.smActive:focus, .list-group-item-action.smActives{background-color:#34B3FF; color:#323244 !important;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0; padding:.7rem;} .list-group-item-action.sbActive{background-color:#34B3FF; color:#323244 !important;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border:0; padding:.7rem;} .list-group-item-action.sbActive:hover, .list-group-item-action.sbActive:focus, .list-group-item-action.sbActives{background-color:#99D9FF; color:#323244 !important;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0; padding:.7rem;} .sidebaricon{ position:relative;top:-33px;height:0;left:-8px;text-align:end;z-index:1;opacity:.61;} .has-normal-label{position:relative;padding-right:16px;} .has-normal-label > span{position:absolute;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:-1.4em;left:0;z-index:3;line-height:1;padding:0 1px;font-weight:600;} .has-normal-label > span::after{content:" ";display:block;position:absolute;background:#fff;height:2px;top:50%;left:-.2em;right:-.2em;z-index:-1;} .has-normal-label .checkbox {position:relative;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:0.8em;left:0.5em;z-index:3;line-height:1;padding:0 1px;} .has-float-label{display:block;position:relative; border:1px solid #dbdbdb; padding:8px; margin:4px 0;border-radius:6px;} .has-float-label > span{position:absolute;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:-0.6em;left:8px;z-index:3;line-height:1;padding:0 1px;font-weight:600;} .has-float-label > span::after{content:" ";display:block;position:absolute;background:#fff;height:2px;top:50%;left:-.2em;right:-.2em;z-index:-1;} .has-float-label .checkbox {position:relative;opacity:1;-webkit-transition:all .2s;transition:all .2s;top:0.8em;left:0.5em;z-index:3;line-height:1;padding:0 1px;} .list-group{border-radius:0 } #sidebar{overflow:auto;transition:all 0.3s;min-height:100vh;height:100%} #ui-datepicker-div{z-index:100000 !important;} /*** multiple-select ***/ .ms-choice>span{position:inherit !important;padding:0 !important;} .ms-choice>span.placeholder{color:#111 !important; background:#fff !important; opacity: .7}; .ms-choice.disabled { background-color:#F8F9FA !important; border: 0 !important; } .ms-drop ul>li label>span { display: grid !important;} .ms-drop ul>li:hover, select option:hover{ background-color:#00A0FF; color:#fff;} /****************** Dashboard Box *******************************/ .quick-box{display:flex;flex-wrap:wrap;} .quick-box-header{width:100%;background:#f7f7f8;height:40px;border-bottom:1px solid #dbdee0;display:flex;flex-wrap:wrap;} .quick-box-header h2{float:left;padding:10px 0px;margin:0px 0px 0px 12px;font-size:1em;} .quick-box-content{width:100%;padding:6px;display:flex;flex-wrap:wrap;} .quick-box-content a {min-height: 114px !important; } .quick-box-button{padding:20px 0px 10px;display:block;text-align:center;cursor:pointer;position:relative;transition:all 0.3s ease;opacity:0.9;} .quick-button.small{padding:15px 0px 1px 0px;font-size:10px;} .nav-tabs li a{border-color:#dbdee0;border-radius:0px;background:#e9ebec;margin:6px -1px -6px 0px;line-height:1;} .nav-tabs li.active > a{line-height:1.428571429;margin:0 -1px 0 0;} .tab-content{background:white;border:1px solid #dbdee0;border-top:none;padding:10px;} .tab-pane{border:1px solid #dbdee0;border-top:0;padding:10px;margin-top:-1px;} .tab-content{background:transparent;border:none;padding:0;} .nav-tabs>li{float:left;margin-bottom:-1px;} .nav>li{position:relative;display:block;} .ui-datepicker-week-col{ text-align:center } .scrollbar{overflow: auto; /*for horizontal and vertical scroll bars */ min-height: 210px; } /* or you can set scrolling in x and y direction */ .scrollbarxy{overflow-x: auto; /*for horizontal scroll bar */overflow-y: auto; /*for vertical scroll bar */ min-height: 210px; } /* Show only horizontal scrollbar */ .hscrollbar{overflow-x: auto; /*for horizontal scroll bar */overflow-y: hidden; /*for hiding vertical scroll bar */ min-height: 210px; } /* Show only vertical scrollbar */ .vscrollbar{overflow-x: hidden; /*for hiding horizontal scroll bar*/overflow-y: auto; /*for vertical scroll bar*/ min-height: 210px; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 0.3em 1.3em !important; } .dataTables_empty{ padding:10em 0 !important;} .txtCenter {background-position:center;min-height:60px; } .z-0 {z-index:0;} .z-1 {z-index:1;} .z-2 {z-index:2;} .z-3 {z-index:3;} /* width */ ::-webkit-scrollbar { width: 6px; } /* Track */ ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { background: grey; border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #808080a3; } /* card */ .card-columns {-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 1.25rem;-moz-column-gap: 1.25rem;column-gap: 1.25rem;orphans: 1;widows: 1;} .card {position: relative;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-color: #fff;background-clip: border-box;border: 0;} .card-columns .card {display: inline-block;width: 100%;margin-bottom: 1.25rem;} .card-img-top {width: 100%;border-top-left-radius: calc(.25rem - 1px);border-top-right-radius: calc(.25rem - 1px); } .card-columns .card img { vertical-align: middle;} #movetopBtn {display: none;position: fixed;bottom: 24px;right: 24px;z-index: 99;border: none;outline: none;background-color: white;cursor: pointer;padding: 0;} #movetopBtn:hover { color: #ae6327;} .tox-statusbar, .tox-statusbar__path, .tox-statusbar__right-container {display: none !important;} div.dataTables_processing>div:last-child>div {background: #0000B2 !important; }