/* KCABLEX TECHIVERSE STYLES */
body {
    display: flex;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    background-color: #B8E5EA;
    margin: 0;
    overflow: auto;
}

a {text-decoration: none !important;}

nav {
    background-color: #0A2840;
    color: #CCCCCC;
    width: 55px; /* Collapsed by default */
    transition: width 0.5s, left 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5px;
    position: fixed;
    height: 100vh;
    z-index: 1000;
    margin-top: 35.5px;
    overflow-y: auto; /* Allow vertical scrolling for long menus */
}

nav.expanded {
    width: 200px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

nav li {
    width: 100%;
    text-align: center;
    margin: 0px 0;
    position: relative;
}

nav a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 7px;
}

nav a:hover {
    /* background-color: #00CCFF; */
    color: #00CCFF;
}

.menu-text {
    display: none; /* Hidden by default */
    margin-left: 10px;
}

nav.expanded .menu-text {
    display: inline-block;
}

.dropdown-icon {
    margin-left: auto;
    padding-left: 10px;
    display: none; /* Hidden by default */
}

nav.expanded .dropdown-icon {
    display: inline-block;
}

.submenu {
    flex-direction: column;
    padding: 10px;
    margin-top: -8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.submenu.open {
    max-height: 500px;
    opacity: 1;
}

.submenu a {
    color: #b8e5ea;
    padding: 7px;
    text-align: left;
    margin-left: 1.8em;
}

.submenu a:hover {
    background-color: #00CCFF;
    color: #FFFFFF;
}

#toggle-btn,
#mobile-toggle-btn {
    background-color: #FABC00;
    border: none;
    color: #0A2840;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
}

#mobile-toggle-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1005;
    transition: transform 0.3s ease; /* Smooth transform transition */
}

header {
    background-color: #00CCFF;
    color: #FFFFFF;
    padding: 2px;
    width: 100%;
    text-align: center;
    transition: margin-left 0.3s;
    position: fixed;
    z-index: 1001;
}

.title-head {
    position: sticky;
    position: -webkit-sticky; /* for Safari */
    background: #FFF;
    width: 100%;
    padding: 10px;
    z-index: 4;
    top: 38px;
    border-bottom: 1px solid lightgray;
    display: flex;
}

main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 6.5%; /* Adjust for collapsed sidebar */
    transition: margin-left 0.3s;
    padding-bottom: 4em;
}

nav.expanded + main header,
nav.expanded + main {
    margin-left: 200px;
}

section {
    margin-top: 5%;
}

section#content {
    padding: 20px;
    width: 100%;
}

	@media (max-width: 768px) {
		nav {
			width: 100%;
			height: auto;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			margin-left: -7%;
		}

		nav.expanded {
			display: flex;
			height: 100vh;
			overflow-y: auto;
		}

		nav ul {
			display: flex;
			flex-direction: column;
			width: 85%;
			margin-left: 13%;
			margin-top: 33%;
		}

		nav li {
			margin: 0;
			text-align: left;
		}

		nav.expanded .menu-text {
			display: inline-block;
		}

		.submenu {
			position: static;
			background-color: #0A2840;
			padding: 0px;
			margin-top: 0px;
		}
		
		.submenu a {
			margin-left: 0.9em;
		}

		#mobile-toggle-btn {
			display: block;
			transition: transform 0.3s ease; /* Smooth transform transition */
		}

		#toggle-btn {
			display: none; /* Hide the default toggle button on small screens */
		}

		main {
			margin-left: 0;
		}

		header {
			margin-left: 0;
		}
	}

	#mobile-toggle-btn .bar {
		display: block;
		width: 25px;
		height: 3px;
		margin: 5px auto;
		background-color: #0A2840;
		transition: all 0.3s ease-in-out;
	}

	#mobile-toggle-btn.expanded .bar:nth-child(1) {
		transform: rotate(-45deg) translate(-5px, 6px);
	}

	#mobile-toggle-btn.expanded .bar:nth-child(2) {
		opacity: 0;
	}

	#mobile-toggle-btn.expanded .bar:nth-child(3) {
		transform: rotate(45deg) translate(-5px, -6px);
	}

	/* Define the styles for the bars */
	#mobile-toggle-btn i {
		transition: transform 0.3s ease;
	}

	/* Rotate bars for expanded state */
	#mobile-toggle-btn.expanded i {
		transform: rotate(90deg);
	}

.hdbrand {
    display: inline-flex;
    align-items: center;
}

.brand-img {
    width: auto;
    height: 26px;
    margin-right: 5px;
}

.brand-name {
    font-family: 'arial black';
    margin: 3px;
    font-size: 1.5em;
    color: #0a2840;
}

.fa-1half {
    font-size: 1.5em;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #ffffff;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #00ccff;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #00ccff #ffffff;
}

/* Custom scrollbar styles for Select2 */
.select2-container--default .select2-results__options {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #00ccff #ffffff; /* For Firefox */
}

/* Chrome, Edge, and Safari */
.select2-container--default .select2-results__options::-webkit-scrollbar {
    width: 12px;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-track {
    background: #ffffff;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background-color: #00ccff;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

.select2-container--default .select2-results__options::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Custom border for the search input field inside the dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #00CCFF !important;
    border-radius: 4px !important;
    height: 38px !important;
    /*box-sizing: border-box !important; /* Ensure the padding and border are included in the element's total width and height */
}

/* Focus state for the search input field inside the dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border: 1.5px solid #00CCFF !important;
    outline: none !important; /* Remove the default focus outline */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
   /* font-weight: bold; */
}

.select2-container--open .select2-dropdown {
    top: 0% !important;
}

.alert {padding: 0.4rem 0.7rem !important}

.pgtn-cont, .pgtn {
    display: flex;
}

.pgtn-cont {
    position: fixed;
    bottom: 0%;
    left: 0%;
    width: 100%;
    background: #F1F1F1;
    height: auto;
    padding: 3px 65px;
    border-top: 1px solid #00CCFF;
    z-index: 9999;
}

.pgtn {
    padding-left: 7px;
}

label {width: -webkit-fill-available;}

.pgtn, .pgtn-label {
    margin-right: 5px;
}

.count {
    margin-left: 7px;
    padding: 0px 10px;
    align-self: center;
}

.count, .pgtn {
    width: auto;
    text-align: center;
    background: #f2f2f2;
    align-content: center;
    align-items: center;
}

.add-btn {
    width: 150px;
}

.rht {
    right: 10px;
    position: absolute;
}

.flx {
    display: flex;
}

.mrht-1 {
    margin-right: 1em;
}

.kt-thead {
    position: sticky;
    position: -webkit-sticky;
    top: 95px;
    background: #cccccc;
    color: #0a2840;
}

.kt-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.table thead th {
    border-bottom: 2px solid #FFF !important;
}

.table td, .table th {
    padding: 5px !important;
    padding-left: 8px !important;
    align-content: center !important;
}

.table td, .table th {
    border-top: none !important;
}

.pagination {
    margin-left: 0px;
}

.pgtn-count {
    position: sticky;
    position: -webkit-sticky;
    left: 100%;
}

.sm-fnt {
    font-size: smaller;
}

.fm-custom-sm {
    font-size: small !important;
    padding: .25rem .37rem !important;
    border: none !important;
    background-color: none !important;
    width: auto !important;
    display: inline-block !important;
}

.form-group textarea {
    display: none;
}

.txt-area-shw {display: inherit !important;}

.select2-container {
    width: 100% !important;
    width: -webkit-fill-available;
}

.select2-container--default,
.select2-selection--single {
    height: 38px !important;
    align-content: center;
    border-radius: 4px;
}

.select2-selection--single {
    border: 1px solid #ccc !important;
}

.select2-selection__arrow b {
    /* border-width: 7px 4px 4px 5px !important;
    border-color: #0CF transparent transparent transparent !important; */
    margin-left: -9px !important;
    margin-top: 2px !important;
}

.coln {
    width: 350px;
    padding: 15px;
    margin: auto;
}

.add-content {
    margin: auto !important;
    max-width: 820px !important;
    background: #FFF /* #EEFCFF*/ ;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px -2px #00CCFF;
}

/* PLACEHOLDER STYLING */
/* Standard syntax */
input::placeholder {color: #CCCCCC !important;}

/* WebKit browsers (Safari, Chrome) */
input::-webkit-input-placeholder {color: #CCCCCC !important;}

/* Mozilla Firefox 19+ */
input::-moz-placeholder {color: #CCCCCC !important;}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {color: #CCCCCC !important;}

/* Microsoft Edge */
input::-ms-input-placeholder {color: #CCCCCC !important;}

/* Some Width Options */
.w20 {width: 20px !important;}
.w35 {width: 35px !important;}
.w50 {width: 50px !important;}
.w70 {width: 70px !important;}
.w100 {width: 100px !important;}
.w120 {width: 120px !important;}
.w150 {width: 150px !important;}
.w170 {width: 170px !important;}
.w200 {width: 200px !important;}
.w300 {width: 300px !important;}
.w350 {width: 350px !important;}
.w400 {width: 400px !important;}
.w600 {width: 600px !important;}
.w800 {width: 800px !important;}
.w1000 {width: 1000px !important;}

.mw300 {max-width: 300px !important;}

/* Text Alignments */
.rgt {text-align: right;}
.lft {text-align: left;}
.ctr {text-align: center;}
.jst {text-align: justify;}

/* Display Options */
.blk {display: block;}
.cnts {display: contents;}
.flx {display: flex;}
.grd {display: grid;}
.tbl {display: table;}
.inln {display: inline;}
.inln-blk {display: inline-block;}
.inln-flx {display: inline-flex;}
.inln-grd {display: inline-grid;}
.inln-tbl {display: inline-table;}
.flw {display: flow;}
.flw-rut {display: flow-root;}
.rby {display: ruby;}
.rby-txt {display: ruby-text;}
.non {display: none;}
.tbl-grd {display: table-row;}
.lst-itm {display: list-item;}
.mth {display: math;}

/* Some Border Option */
.br-1 {border-right: solid 1px #CCC;}
.br-2 {border-right: solid 2px #CCC;}
.br-3 {border-right: solid 3px #CCC;}
.br-4 {border-right: solid 4px #CCC;}

.bl-1 {border-left: solid 1px #CCC;}
.bl-2 {border-left: solid 2px #CCC;}
.bl-3 {border-left: solid 3px #CCC;}
.bl-4 {border-left: solid 4px #CCC;}

.bt-1 {border-top: solid 1px #CCC;}
.bt-2 {border-top: solid 2px #CCC;}
.bt-3 {border-top: solid 3px #CCC;}
.bt-4 {border-top: solid 4px #CCC;}

.bb-1 {border-bottom: solid 1px #CCC !important;}
.bb-2 {border-bottom: solid 2px #CCC !important;}
.bb-3 {border-bottom: solid 3px #CCC !important;}
.bb-4 {border-bottom: solid 4px #CCC !important;}

/* Padding Options */
.p-0 {padding: 0px !important;}
.p-sm {padding: 5px;}
.p-md {padding: 10px;}
.p-1 {padding: 1em;}
.p-2 {padding: 2em;}

.pt-sm {padding-top: 5px;}
.pt-md {padding-top: 10px;}
.pt-1 {padding-top: 1em;}
.pt-2 {padding-top: 2em;}

.pl-sm {padding-left: 5px;}
.pl-md {padding-left: 10px;}
.pl-1 {padding-left: 1em;}
.pl-2 {padding-left: 2em;}

.pb-sm {padding-bottom: 5px;}
.pb-md {padding-bottom: 10px;}
.pb-1 {padding-bottom: 1em;}
.pb-2 {padding-bottom: 2em;}

.pr-sm {padding-right: 5px;}
.pr-md {padding-right: 10px;}
.pr-1 {padding-right: 1em;}
.pr-2 {padding-right: 2em;}

/* Margin Options */
.m-auto {margin: auto;}
.m-sm {margin: 5px;}
.m-md {margin: 10px;}

.mt-xxsm {margin-top: 5px;}
.mt-xsm {margin-top: 10px;}
.mt-sm {margin-top: 2em !important;}
.mt-large {margin-top: 3em !important;}
.mt-larger {margin-top: 4em !important;}
.mt-xlarge {margin-top: 5em !important;}

.ml-sm {margin-left: 5px;}
.ml-md {margin-left: 10px;}
.ml-large {margin-left: 3em !important;}

.mb-sm {margin-bottom: 5px;}
.mb-md {margin-bottom: 10px;}

.mr-sm {margin-right: 5px;}
.mr-md {margin-right: 10px;}

/* Colour Options */
.tblue {color:#00CCFF !important;}
.nblue {color:#0A2840 !important;}
.gold {color:#FABC00 !important;}
.gray {color:#CCCCCC !important;}
.lgray {color:#EFEFEF !important;}
.white {color:#FFFFFF !important;}

.bg-tblue {background-color:#00CCFF;}
.bg-nblue {background-color:#0A2840;}
.bg-gold {background-color:#FABC00;}
.bg-gray {background-color:#CCCCCC;}
.bg-lgray {background-color:#EFEFEF;}
.bg-white {background-color:#FFFFFF;}

/* TEXT TRANSFORM */
.ttu {text-transform: uppercase;}
.ttl {text-transform: lowercase;}
.ttc {text-transform: capitalize;}

/* BORDER RADIUS OPTIONS */
.brr-50 {border-radius: 50% !important;}
.brr-sm {border-radius: 5px;}
.brr-md {border-radius: 10px;}

.btrr-sm {border-top-right-radius: 5px;}
.btrr-md {border-top-right-radius: 10px;}

.btrl-sm {border-top-left-radius: 5px;}
.btrl-md {border-top-left-radius: 10px;}

.bbrr-sm {border-bottom-right-radius: 5px;}
.bbrr-md {border-bottom-right-radius: 10px;}

.bbrl-sm {border-bottom-left-radius: 5px;}
.bbrl-md {border-bottom-left-radius: 10px;}

/* TEXT OPTIONS */
.b {font-weight: bold !important;}
.i {font-style: italic;}
.u {text-decoration: underline;}
.uc {text-transform: uppercase;}
.lc {text-transform: lowercase;}
.ca {text-transform: capitalize;}

/* BUTTON OPTIONS */
.tn-btn {
    padding: .0rem .3rem !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
}

/* ALIGNMENT OPTIONS */
.aln-con-lft {align-content: left;}
.aln-con-ctr {align-content: center;}
.aln-con-rgt {align-content: right;}

.txt-aln-lft {text-align: left;}
.txt-aln-ctr {text-align: center;}
.txt-aln-rgt {text-align: right;}

.aln-itm-lft {align-items: left;}
.aln-itm-ctr {align-items: center;}
.aln-itm-rgt {align-items: right;}

.aln-slf-lft {align-self: left;}
.aln-slf-ctr {align-self: center;}
.aln-slf-rgt {align-self: right;}