@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* { padding: 0; margin: 0; box-sizing: border-box; list-style-type: none; text-decoration: none; font-family: 'Poppins', sans-serif; box-sizing: border-box; }
:root { --main-color: #1e3099c9; --color-dark: #1D2231; --text-grey: #8390A2; --main-bg-color: #f0f0f0; }
.bg-dark { background-color: var(--main-color) !important; }
b, strong { font-weight: bold; }

.login-main { width: 100%; background: linear-gradient(to right, #1E90FF, #3CB371); }
.login-container { width: 30%; min-width: 300px; margin-left: auto; margin-right: auto; background-color: var(--main-bg-color); margin-top: 40px; padding: 10px; box-shadow: gray 5px 5px 5px 5px; }
.login-container { background-color: #fff; border-radius: 10px; width: 70%; overflow: hidden; display: block; }
.login-container .column { padding: 20px; text-align: center; border-right: 2px solid beige; }
.login-container .column:last-child { border-right: none; }
.login-container .signin-logo img { max-width: 100%; height: auto; border-radius: 25px; border: solid 0.5px #b4b3c6; }
.login-container .signin-heading { text-transform: uppercase; margin: 10px 0; font-size: 1.5em; color: #fff; position: relative; }
.login-container .signin-heading .copyright-symbol { font-size: 18px; position: absolute; top: -0.62em; /*right: 0.9;*/ left: 14.5em; }
.login-container .signin-text { margin-top: 10px; text-align: center; color: #fff; }
.login-container .right-column { align-items: center; justify-content: center; }
.login-container .custom-icon { }
.login-container .input-group { margin: 10px; display: flex; width: 100%; }
.login-container .input-group i { margin: 10px; }
.login-container .input-group label { margin-top: 10px; }
.login-container .forgot-password { margin-top: 5px; margin-left: auto; }
.login-container .btn { padding: 10px; border: none; border-radius: 5px; cursor: pointer; width: 100%; /* Adjust as needed */ margin-top: 10px; }
.login-container input { font-size: 18px; }
.login-container .btn { text-transform: uppercase; font-weight: bold; font-size: 25px; }
#logoutLink { color: #fff; }

@media screen and (max-width: 480px) { .login-container { width: 95%; }
    .login-container .signin-logo img { max-width: 50%; }
    .login-container .column { padding: 10px; }
    .login-container { margin: 20px 0; }
    .login-container .input-group { width: 95%; }
    .login-container .input-group-text { padding: 2px 2px; }
}

.card-container { background-color: inherit; margin: 15px 0; padding: 10px; box-shadow: gray 1px 1px 1px 1px; }
.font-roboto { font-family: 'roboto condensed'; }
html, body { height: 100%; }
body { display: flex; flex-direction: column; background-color: var(--main-bg-color); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-transform: uppercase; }
.small-text { font-size: 0.8rem; }
.content { flex: 1 0 auto; }
.footer { flex-shrink: 0; width: 100%; background-color: var(--main-color) !important; color: white; padding: 10px; }
.footer a { color: white; }
.full-screen.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.full-screen .modal-dialog { position: fixed; margin: 0; width: 100%; height: 100%; padding: 0; max-width: none; }
.full-screen .modal-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid #3c7dcf; border-radius: 0; box-shadow: none; }
.full-screen .modal-header { position: absolute; top: 0; right: 0; left: 0; height: 40px; padding: 5px; background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 11%, rgba(0,212,255,1) 100%); border: 0; }
.full-screen .modal-title { font-weight: 400; font-size: 1.4em; color: #fff; line-height: 30px; }
.full-screen .modal-body { position: absolute; top: 40px; bottom: 45px; width: 100%; font-weight: 300; overflow: auto; }
.full-screen .modal-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 45px; padding: 10px; background: #f1f3f5; }
.selected-item { background-color: rgba(0, 0, 0, 0.2) !important; color: white; }
.strike-through { text-decoration: line-through; }

/*Custom combobox -- searchable drop down*/
.custom-combobox { position: relative; display: inline-block; }
.custom-combobox-toggle { position: absolute; top: 0; bottom: 0; margin-left: -1px; padding: 0; }
.custom-combobox-input { margin: 0; padding: 5px 5px; width: 90%; }
.label-ss { display: none; }

/* Chosen Plugin */
.chosen-container { font-size: 16px; }
.w-100-pc, .w-100-pc .chosen-container { width: 100% !important; }
.chosen-container-single .chosen-single { height: 35px; padding: 5px 0 0 8px; }
.chosen-container .chosen-results li em { font-weight: bold; text-transform: capitalize !important; }

/* Selectize Plugin*/
.form-control.selectize-control, .form-control.selectize-dropdown { padding: 0; font-size: 16px; }
.form-control.selectize-dropdown .highlight { font-weight: bold; text-transform: uppercase; }
.selectize-input, .selectize-input input { font-size: 16px !important; }
.selectize-dropdown .active:not(.selected) { background-color: #547b93 !important; color: #fff !important; }
.selectize-input { padding: 6px !important; }
.selectize-lg .form-control.selectize-control, .selectize-lg .form-control.selectize-dropdown { font-size: 19px; line-height: 20px !important; }
.selectize-lg .selectize-input, .selectize-lg .selectize-input input { font-size: 19px !important; }

input.plain-number::-webkit-inner-spin-button,
input.plain-number::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input.plain-number { -moz-appearance: textfield; }
/* Bootstrap overrides*/
.nav-pills .nav-link, .nav-pills .nav-link.active { border: none; }
.close { line-height: normal;}
@media (min-width: 768px) {
    .modal-xl { width: 90%; max-width: 1200px; }
}

.search-container .col-md-2 { padding: 0 0.5rem !important; }
.search-container .form-control:not(.selectize-control) { padding: 3px 5px; }
.search-container .selectize-input { padding: 4px !important; }
.search-container select.form-control:not([size]):not([multiple]) { height: calc(2.25rem + -4px); }
.search-container .form-label, #saleContainer .form-label, #purchaseContainer .form-label { font-size: .8rem; margin-bottom: 0; text-transform: uppercase; }
/* The Overlay (background) */
.overlay { height: 100%; width: 100%; position: fixed; z-index: 1100; left: 0; top: 0; background-color: rgba(185, 178, 178, 0.9); overflow-x: hidden; transition: 0s; }
/* Position the content inside the overlay */
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; background-color: #FFF; }
/* TABLES SECTION */
/*[ Scroll bar ]*/
.js-pscroll { position: relative; overflow: hidden; scrollbar-width: thin; }
.table100-body .ps__rail-y { width: 9px; background-color: transparent; opacity: 1 !important; right: 5px; }
.table100-body .ps__rail-y::before { content: ""; display: block; position: absolute; background-color: #ebebeb; border-radius: 5px; width: 100%; height: calc(100% - 30px); left: 0; top: 15px; }
.table100-body .ps__rail-y .ps__thumb-y { width: 100%; right: 0; background-color: transparent; opacity: 1 !important; }
.table100-body .ps__rail-y .ps__thumb-y::before { content: ""; display: block; position: absolute; background-color: #cccccc; border-radius: 5px; width: 100%; height: calc(100% - 30px); left: 0; top: 15px; }
.table100 tr.selected td { background-color: #abcaf2; }
/*//////////////////////////////////////////////////////////////////
[ Table ]*/
.limiter { width: 1366px; margin: 0 auto; }
.container-table100 { width: 100%; min-height: 100vh; background: #fff; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 33px 30px; }
.wrap-table100 { width: 1170px; }
/*//////////////////////////////////////////////////////////////////
[ Table ]*/
.table100 { background-color: inherit; }
table { width: 100%; overflow: scroll; }
th, td { font-weight: unset; padding: 2px 3px; vertical-align: top; }
.table100 th { font-weight: bold; }
.table100 th a, .table100 th a:link, .table100 th a:active, .table100 th a:visited { color: #fff; }
.column0-3 { width: 3%; }
.column0-5 { width: 5%; }
.column1 { width: 10%; }
.column1-5 { width: 15%; }
.column2 { width: 20%; }
.column2-5 { width: 25%; }
.column3 { width: 30%; }
.column3-5 { width: 35%; }
.column4 { width: 40%; }
.column4-5 { width: 45%; }
.column5 { width: 50%; }
.column-5 { width: 55%; }
.table100-head th { padding-top: 5px; padding-bottom: 5px; }
.table100.slim .table100-head th { padding: 2px 5px; }
.table100-body td { }
.table100-body input[type=number]::-webkit-inner-spin-button,
.table100-body input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.table100 input.form-control,
.table100 .btn-sm { padding: 0.1rem 0.4rem; }
.table100-body input[type=number] { -moz-appearance: textfield; /* Firefox */ }
/*==================================================================
[ Fix header ]*/
.table100 { position: relative; margin-top: 10px; }
.table100-head { width: 100%; top: 0; left: 0; overflow-x: auto; scrollbar-width: thin; }

.table100-body { max-height: 325px; overflow: auto; width: 100%; font-size: large; }

.table100.slim .table100-body { font-size: medium; }
.table100.ver2 th, .table100.ver3 th, .table100.ver4 th, .table100.ver5 th { font-size: 13px; font-weight: bold; color: #fff; line-height: 1.4; text-transform: uppercase; }
.table100.ver1 td, .table100.ver2 td, .table100.ver3 td, .table100.ver4 td, .table100.ver5 td { color: #808080; line-height: 1.4; }
.table100.ver1 .table100-body tr:nth-child(even), .table100.ver2 .table100-body tr:nth-child(even),
.table100.ver3 .table100-body tr:nth-child(even), .table100.ver4 .table100-body tr:nth-child(even),
.table100.ver5 .table100-body tr:nth-child(even) { background-color: #f8f6ff; }
.table100.ver1, .table100.ver2, .table100.ver3, .table100.ver4, .table100.ver5 { overflow: hidden; }
.table100 { overflow-x: auto !important; }
.table100.ver1 table, .table100.ver2 table, .table100.ver3 table, .table100.ver4 table, .table100.ver5 table { border: solid 1px #808080; }
.table100.ver1 .ps__rail-y, .table100.ver2 .ps__rail-y, .table100.ver3 .ps__rail-y,
.table100.ver4 .ps__rail-y, .table100.ver5 .ps__rail-y { right: 5px; }
.table100.ver1 .ps__rail-y::before, .table100.ver2 .ps__rail-y::before, .table100.ver3 .ps__rail-y::before,
.table100.ver4 .ps__rail-y::before, .table100.ver5 .ps__rail-y::before { background-color: #ebebeb; }

.table100.ver1 .ps__rail-y .ps__thumb-y::before, .table100.ver2 .ps__rail-y .ps__thumb-y::before,
.table100.ver3 .ps__rail-y .ps__thumb-y::before, .table100.ver4 .ps__rail-y .ps__thumb-y::before,
.table100.ver5 .ps__rail-y .ps__thumb-y::before { background-color: #cccccc; }
/*==================================================================
[ Ver1 ]*/
.table100.ver1 table { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.table100.ver1 table th, .table100.ver1 table td { border: 1px solid #ddd; padding: 3px; text-align: left; }
.table100.ver1 table th { background-color: #f2f2f2; }
.table100.ver1 table tr:nth-child(even) { background-color: #f2f2f2; }
.table100.ver1 table tr:hover { background-color: #ddd; }

.table100.slim th { font-size: 14px; }
.table100.slim td { line-height: 1.1; }

.table100.ver2 th { background-color: #226b9b; }
.table100.ver2 td { color: #090a0d; }
.table100.ver2 tr:nth-child(even) { background-color: #f9f7f7; }
.table100.ver2 tr:hover td { background-color: #c5d5dd; cursor: pointer; }
/*==================================================================
[ Ver3 ]*/
.table100.ver3 th { color: #FFF; background-color: #067cb3; border: 1px solid #ddd; }
.table100.ver3 td { color: #808080; line-height: 1.4; border: 1px solid #ddd; }
.table100.ver3 table tr:nth-child(even) { background-color: #ebf3f7; }
.table100.ver3 tr:hover td { background-color: #c5d5dd; }
/*[ Ver4 ]*/
.table100.ver4 { }
.table100.ver4 th { color: #FFF; background-color: #7fb3d5; border: 1px solid #ddd; }
.table100.ver4 td { color: #808080; border: 1px solid #ddd; }
.table100.ver4 table tr:nth-child(even) { background-color: #e9eff3; }
/*==================================================================
[ Ver5 ]*/
.table100.ver5 { margin-right: -30px; }
.table100.ver5 .table100-head { padding-right: 30px; }
.table100.ver5 th { color: #555555; background-color: transparent; }
.table100.ver5 td { color: #808080; background-color: #f7f7f7; }
.table100.ver5 .table100-body tr { overflow: hidden; border-bottom: 10px solid #fff; border-radius: 10px; }
.table100.ver5 .table100-body table { border-collapse: separate; border-spacing: 0 10px; }
.table100.ver5 .table100-body td { border: solid 1px transparent; border-style: solid none; padding-top: 10px; padding-bottom: 10px; }
.table100.ver5 .table100-body td:first-child { border-left-style: solid; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table100.ver5 .table100-body td:last-child { border-right-style: solid; border-bottom-right-radius: 10px; border-top-right-radius: 10px; }
.table100.ver5 tr:hover td { background-color: #ebebeb; cursor: pointer; }
.table100.ver5 .table100-head th { padding-top: 25px; padding-bottom: 25px; }
/* CSS Components*/
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
label.switch { margin-bottom: 0; }
/* Hide default HTML checkbox */
.switch input { opacity: 0; width: 0; height: 0; }
/* The slider */
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switch .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.switch input:checked + .slider { background-color: #2196F3; }
.switch input:disabled + .slider { background-color: #f0f0f0; }
.switch input:disabled:checked + .slider { background-color: #d5cfcf; }
.switch input:focus + .slider { box-shadow: 0 0 6px #2196F3; }
.switch input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
/* Rounded sliders */
.switch .slider.round { border-radius: 34px; }
.switch .slider.round:before { border-radius: 50%; }
/* Notifictions */
.notification-container .success { background-color: #03a679; color: #f0f0f0; }
.notification-container .error { background-color: red; color: #f0f0f0; }
.notification-container .warning { background-color: orange; color: #f0f0f0; }
.notification-container .info { background-color: deepskyblue; color: #f0f0f0; }
.notification-container .notify { position: absolute; top: 49px; width: 100%; height: 0; box-sizing: border-box; color: white; text-align: center; overflow: hidden; box-sizing: border-box; transition: height .2s; opacity: 0.5; z-index: 50; }
.notification-container #notifyType { display: block; margin: 10px; }
.notification-container .active { height: 50px; }
.dashboard-metrics { display: flex; justify-content: space-between; flex-wrap: wrap; }

.metric, .metric-25 { flex-basis: calc(20% - 20px); background-color: #f1f1f1; border-radius: 5%; padding: 24px; margin: 10px; box-shadow: 9px 8px 6px rgba(89, 83, 80, 0.7); text-align: center; }
.metric-25 { flex-basis: calc(25% - 20px); }
.metric label { font-weight: bold; }
.metric span { font-size: 24px; font-weight: bold; color: #007bff; }
.box6 { background-color: #FF1493; }
.box7 { background-color: #5F9EA0; }
.box8 { background-color: #00BFFF; }
.box9 { background-color: #6495ED; }
.box6, .box7, .box8, .box9, .box6 a, .box7 a, .box8 a, .box9 a, .box6 h3, .box7 h3, .box8 h3, .box9 h3 { color: #FFF; }
/* Media Query for Responsive Layout (Adjust as needed) */
@media (max-width: 768px) {
    .metric { flex-basis: calc(50% - 20px); }
}
.navbar { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.footer, .navbar { background-image: linear-gradient(to right, blue, green); }
.navbar { padding: 4px 8px; }
.navbar-nav li a { color: #fff; font-size: 16px; font-weight: bold; }
.navbar-nav li a:hover { color: #FFF; }
.navbar-brand { color: #fff; font-size: 18px; font-weight: bold; }
.dropdown-menu { background-color: #3498db; }
.dropdown-item { color: #fff !important; }
.dropdown-item:hover { background-color: #ff9900; }
.nav-link:hover { color: #ff4081 !important; }

@media (max-width: 768px) {
    .navbar-nav li { padding: 10px 0; }
}

.navbar-nav .nav-item i { font-size: 20px; margin-right: 5px; }
.navbar-nav li a { transition: color 0.3s ease-in-out; }

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.navbar-nav li { animation: slide-in 0.5s ease-out; }
.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.9) !important; }

.ui-dialog { width: 80vw !important; max-width: 800px; font-size: 1em; }
.ui-dialog-titlebar { display: none; }
.ui-dialog .ui-dialog-content, .ui-dialog .modal-dialog { padding: 0 !important; margin: 0 !important; }

@media screen and (max-width: 768px) {
    .ui-dialog { width: 90vw !important; }
}

@media screen and (max-width: 480px) {
    .ui-dialog { width: 95vw; }
}

.summary-container { }
.summary-container .s-row { display: flex; flex-wrap: wrap; justify-content: space-between; }
.summary-container .s-row .item { width: 40%; margin-bottom: 6px; }
.summary-container .s-row label { font-weight: bold; }
.amount-words { font-style: italic; font-size: small; color: green; }
.label-value { font-size: 12px; }
label { margin-bottom: 0.3rem; }

/* Datatables */
.dt-info { float: left; width: 50%; margin-top: 8px;}
.dt-paging { float: right; width: 50%; text-align: right; margin-top: 5px; }
.dt-buttons { float: left; width: 50%; margin-bottom: 5px; }
.dt-search { float: right; width: 50%; text-align: right; margin-bottom: 5px; }
/*Validation*/
input.invalid { border-color: red; }