/* ================================================= Robert's Treasure Chest =================================================
													Copyright: 2010 to present
   ============================================================================================================================= */

* {
	font-family: Verdana, "Lucida Grande", "Bitstream Vera Sans", Helvetica, Arial, sans-serif; /* set the font of all elements to this */
	font-size: 100%; /* reset all fonts to a common size */
	word-wrap: break-word; /* Stop IE from expanding parent container when word is too long (proprietary IE, new in CSS3) */
}

h1, h1 *,
h2, h2 *,
h3, h3 *,
h4, h4 *,
h5, h5 *,
h6, h6 * {
	font-family: Helvetica, Arial, sans-serif;
}

pre, pre *, tt, code, kbd, samp {
	font-family: "Lucida Console", Consolas, Monaco, "Courier New", Courier, monospace; /* Monospace fonts only */
}

body {
	font-size: 76%; /* sets a base font size of 12px/9pt */
	color:#333;
}

html, body {
	margin: 0 !important;
	background-size: cover;
	height:100%;
	overflow-x:hidden;
}

a, a:visited {
	color:inherit;
}

a:link, a:active {
	text-decoration:none;
}

a.link {
	color:#3bb6b6;
	text-decoration: underline;
	font-weight:700;
}

.accessibility,
.hide { /* For items such as 'skip to content' links */
	position: absolute;
	top: -1000px;
	width: 10px;
	height: 10px;
	overflow: hidden;
}

.smallText {
	font-size:0.8em;
}

small, sup, sub {
	font-size: 75%;
}

.big {
	font-size:1.1em;
}

.centre { /*centre text*/
	text-align:center;
}

.ajaxLoading {
	background: url(../../images/wait.gif) no-repeat 100% 0%;
}

.clear { /* All-purpose float clearer. Use as a last resort */
	clear: both !important;
	visibility: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	font-size: 1px !important;
	height: 0px;
	width: 1px !important;
	overflow: hidden !important;
}

.bold {
	font-weight:bold;
}

.tableBorder-top {
	border-top:1px solid #8f988d;
}

.tableBorder-bottom {
	border-bottom:2px solid #8f988d;
}

a {
	outline:none;
}

a img {
	border: none;
}

legend {
	font-weight:bold;
	font-size:1.3em;
	color:#222;
}

option.thm_img {
	height:25px;
	padding-left:45px;
	border-bottom:1px dotted #CACACA;
}

fieldset {
	margin-top:15px;
	border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
}

fieldset#genUpdate textarea {
	width:445px !important;
	height:200px;
}

fieldset div.fieldsetHeader {
	float:left; 
	padding:5px 0; 
	border-bottom:1px solid #666;  
	border-top:1px solid #666; 
	background:#ccc;
}

#main_wrapper {
	width:100%; 
	margin:0; 
	padding:0;
	height:100%;
    display: flex;
    flex-direction: column;
	}
	
.main_wrapper > * {
  /* needed for the floated layout */
  	margin-bottom: 0px;
}

#main_nav_wrapper {
	width:100%; 
	height:30px;
}

.content_wrapper {
	flex:2;
	display: flex;
}

/* ====================================== GENERAL USE ======================================= */

.boxShadow {
	-webkit-box-shadow: 7px -2px 15px -5px rgba(0,0,0,0.49); 
	box-shadow: 7px -2px 15px -5px rgba(0,0,0,0.49);
	background-color:#FFF;
}

img.itemImage {
	border:1px solid #E4E4E4; 
	padding:2px; 
	border-radius:50%;
}

.addPointer {
	cursor:pointer;
}

.fa-grip {
	filter:drop-shadow(1px 1px 1px #E4E4E4);
}

/*=toggle
------------------------------*/

.toggleLink i {
	text-decoration:none;
}

.toggleLink:hover i {
	color:#819685;
	text-decoration:none;
}

/*=FADE IN
------------------------------*/

.fade-in-text {
  animation: fadeIn 4s;
  -webkit-animation: fadeIn 4s;
  -moz-animation: fadeIn 4s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ====================================== RENTAL FORM ======================================= */

#payReason {
	display:none;
}

/* ====================================== IMAGE GALLERY ======================================= */
.gallery-wrap {
	width:70%;
	margin:0 auto;
	padding:0;
}

.imgThumb {
	margin:0.5em; 
	float:left;
	text-align:center;
	padding:0px !important;
}

.imgThumb div.innerImageDiv {
	position:relative;
	width:140px;
	height:140px;
	margin:0 auto 1em auto;
	background:#EFEFEF;
	text-align:center;
	border-left:0;
	padding:0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	border:1px solid #A9B7C0;
}

.imgThumb div.innerImageDiv i {
	position:absolute; 
	top:10px; right:0; 
	z-index:10; 
	color: #FC0 !important;
}

.imgThumb .gallery-image a {
	display:inline-block; 
	height: 138px;
	position:relative;
}

.imgThumb img {
	position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

/* ====================================== LOGIN FORM ======================================= */

form.login-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	background:  #505050;  
	margin: 20px auto;
	padding: 30px;
	width: 380px;
	height: 440px;
	box-shadow: 0px 5px 15px 2px #505050;
	border-radius: 3px;
}

div.center {
	width:50%;
  	margin:auto;
}

.login-form h1 {
	color: #FFF;
	margin: 30px 0 50px 0;
}

.login-form input {
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid #FFF;
	outline: none;
	color: #FFF;
	transition: all 500ms ease-out;
	padding: 0 20px;
	width: -webkit-fill-available;
	margin: 15px;
	height: 35px;
	border-radius: 20px;
	font-weight: bold;
  
	&:focus {
	  border: 2px solid #3C3718;


  }
}

.login-form button {
	background: #3C3718;
	
	color: #FFF;
	transition: all 500ms ease-out;
	animation: lights 4000ms infinite ease-in;
	border: 0;
	padding: 0 20px;
	width: -webkit-fill-available;
	margin: 15px;
	height: 35px;
	border-radius: 20px;
	font-weight: bold;
	
	&:hover.default-view {
	  border: 1px solid #FFF;
	  box-shadow: 0px 0px 10px 2px #FFF;
	  background-color: #fad73ed5;
	  animation: none;
  }
}

@keyframes lights {
	0% {
		box-shadow: 0px 0px 5px 2px #efeeb4;
	} 
	50% {
		box-shadow: 0px 0px 5px 2px #3C3718;
	}
	70% {
		box-shadow: 0px 0px 5px 2px #898864;
	}
	100% {
		box-shadow: 0px 0px 5px 2px #f4f7d1;
	}
}

.login-form a {
	color: #EFEFEF;
	text-decoration: none;
	font-size: 10px;
	font-weight: bolder;
	opacity: 0.6;
	transition: all 300ms ease-in-out;
  
  	&:hover {
      opacity: 0.9;
  }
}

/* ====================================== PAGE HEADER ======================================= */
#NavHeading {
 	background-color:#455d7a;	
	color:#FFF;
	width:100%;
	padding:0.2em;
 	position:sticky; 
	top:0;
	z-index:10001;
}

header#NavHeading .topNav-wrap {
	width: 100%;
	display: flex;
	justify-content: flex-end; /* Aligns items to the right */
	align-items: center; /* Vertically centers items if needed */	
}

.topNav-wrap div.pageTitle {
	flex:5;
	margin:8px 0;
	padding:0 40px 0 10px;
}

a.adminHomeIcon i {
	margin-right:17px;
}

.topNav-wrap div.pageTitle a, div.topNav ul li a {
	font-size:1.3em;
	color:#FFF;
}

.topNav-wrap a:hover {
	color:#c2dde6;
}

div.topNav {
	flex:5;
	margin:8px 0;
}
div.topNav ul {
	list-style:none;
	margin:0;
	padding:0 20px;
}

div.topNav ul li {
	float:right;
}

div.topNav ul li i {
	margin-right:5px;
	margin-left:5px;
}

div.topNav ul li a {
	display:block;
	color:#FFF;
	display:block;
	padding:0 6px;
	padding-right:10px;
}


/* ========================================== STRUCTURE ================================= */

#dividing_bar {
	width:100%; 
	height:30px; 
	background:#595959;
}

#main_content_wrapper {
	width:100%; 
	margin:0px auto; 
	padding:10px;
	background-color:#FFF;
	border-radius: 5px 5px 5px 5px;
	}

#leftCol {
	width:10%;
	min-width:240px; 
	float:left; 
	margin-top:0px; 
	margin-left:0px;
	padding:0;
	background:#e0ebeb;
	flex: 0 0 1;
	}

#rightCol {
	margin-top:20px;
	flex: 1 1;
	margin-right:20px;
	}

#mainContent {
	width:90%; 
	padding:20px; 
	margin:20px auto 50px auto;
	border:1px solid #EFEFEF; 
	background:#F3F6F9; 
	box-shadow: 6px 6px 4px 0px rgba(0,0,0,0.13);	
	border-radius: 5px 5px 5px 5px;
	}  	
	
#mainContent ul li {
	padding-left:20px;
	line-height:24px;
}
	
/* ======================== FORMS ======================= */	

#mainContent input, #mainContent select, #mainContent textarea, #mainContent div.input {
	background:rgba(255,255,255,0.1);
	font-size:1.0em;
	margin:5px 0 1px 0;
	border:none !important;
	background-color:#EDF0F3;
	color: #3A526A;
	box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
	outline:0;
}

#mainContent div.input {
	margin-bottom:5px;
	font-size:1.1em;
	white-space: nowrap;
	overflow: hidden;
	float:left;
}

#mainContent input.readonly, #mainContent select.readonly, #mainContent div.readonly {
	background-color:#F3F3F3;
}

fieldset input, fieldset select, fieldset textarea, #container input, #container select, #container textarea, fieldset div.input {
	font-size:1.1em;
	margin:4px 0 4px 0;
	border:1px solid #E1E1E1;
	width:280px;
	padding:6px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}

fieldset input:focus, fieldset select:focus, #container input:focus, #container select:focus {
	outline:none;
}

label {
	display: block;  /* block float the labels to left column, set a width */
	float: left;
	padding-right: 8px;
	margin: 8px 10px 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right;
	width:30%;
	font-size:1.1em;
}

input.retainCheckbox { 
	margin-top:12px !important;
}

#mainContent input.submit, #mainContent a.submit  {
	background-color:#009ED8;
	display:inline-block;
	cursor:pointer;
	color:#FFF;
	-webkit-font-smoothing: antialiased;
	font-size:15px;
	font-weight:bold;
	padding: .8em 1.4em;
	text-decoration:none;
	border:0;
	position:relative;
	top:1px;
}

#mainContent input.submit:hover, #mainContent a.submit:hover, div.submit:hover {
	background: #008BBF;
}

#mainContent input.submit, #mainContent a.submit, div.submit:active {
	position:relative;
	top:1px;
}

#mainContent a.newItem {
	color:#333;
	background-color:#FC0;
}

/* ============================== CUSTOM RADIO BUTTONS ================================ */
.radio-button-container {
	all: revert;
	color: rgba(0,0,0,0.75);
	display: block;
	position: relative;
	padding-left: 35px;
	line-height: 25px;
	margin:6px 0 0 20px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width:40px; 
	float:left
}

/* Hide the browser's default radio button */
.radio-button-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 21px;
	width: 21px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	border: 2px solid rgba(0,0,0,0.25);
	transition: all 0.3s;
}

/* On mouse-over, add a grey background color */
.radio-button-container:hover input ~ .checkmark {
	border-color: rgba(0,0,0,0.5);
}

/* When the radio button is checked */
.radio-button-container input:checked ~ .checkmark {
	background-color: rgba(0,0,0,0);
	border-color: #819685;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-button-container input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radio-button-container .checkmark:after {
 	top: 2px;
	left: 2px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #819685;
}

/* ============================== CUSTOM CHECK BOXES BUTTONS ================================ */

fieldset#checkboxes {
	padding:0;
	width:25%; 
	float:left;
	margin-left:10px; 
	max-width:200px; 
	margin-top:4px;
}

div.checkboxes {
	padding:5px;
	width:25%; 
	float:left;
	margin-left:10px; 
	max-width:60px;
}

        .switch {
            position: relative;
            display: inline-block;
            width: 30px; 
            height: 18px;
			margin-top:2px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .switch-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #E2EDFE; /* light blue */
            -webkit-transition: .4s;
            transition: .4s;
        }

        .switch-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
			top:2px;
            left: 2px;
            bottom:0px;
            background-color: #666; /* dark grey */
            -webkit-transition: .4s;
            transition: .4s;
        }

        .switch input:checked + .switch-slider {
            background-color: #329898; /*blue-green*/

        }

        .switch input:focus + .switch-slider {
            box-shadow: 0 0 1px #2196F3;
        }

        .switch input:checked + .switch-slider:before {
            -webkit-transform: translateX(12px);
            -ms-transform: translateX(12px);
            transform: translateX(12px);
			background-color:#FFC600; /* yellow */
        }

        /* Rounded sliders */
        .switch-slider.round {
            border-radius: 34px;
        }

        .switch-slider.round:before {
            border-radius: 50%;
        }
        .setting-heading{float:left;color:#000;margin:0;}
        .clr{clear:both;}
		
        .p-setting-block{padding:5px 5px;}
		

/* ======================= BOOTSTRAP TABLES ============================ */

.flextable {
	font-size:12px !important;
	width:80%;
	margin:0 auto 40px auto;
}

.flextable table {
	border-collapse: collapse; 
}

.flextable table thead tr th {
	background: #8a97a0; /* Old browsers */
	line-height:2.4em;
	color:#FFF;
}

.flextable table tr {
	background: #F8FAFA !important;
}

.flextable table tr:nth-child(even) {
	background: #e8eeef !important;
}

.flextable tr, .flextable td.border_bottom td {
    border-bottom:1pt solid white !important;
}

.flextable table.table-add { 
	background:#FFF;
}

li.page-item {
	padding:0 !important;
	margin-left:0.5em;
}

a.dropdown-item, span.page-size {
	font-size:0.8em !important;
}

a.page-link {
	color:#333 !important;
	border:none !important;
	border-radius:3px;
}

.page-link:focus {
  z-index: 2;
  outline: 1px solid #F3F3F3;
  box-shadow: 0 0 0 0.1rem rgba(110, 110, 110, 0.25);
}

div.fixed-table-pagination {
	background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	padding-left: 0.5em;
	padding-right:0.5em;
}

div.pagination, ul.pagination {
	background-color:transparent !important;
}

.pagination > li > a {
    background-color: #FFF;
    color: #6892AE;
}

.pagination > li > a > i {
    color: #999;
}

.pagination > li.page-pre > a, 
.pagination > li.page-next > a {
    display: flex;              /* Enable Flexbox */
    justify-content: center;    /* Center horizontally */
    align-items: center;        /* Center vertically */
    font-size: 1.5em;           /* Adjust font size */
    background-color: transparent; /* Keep the background transparent */
    padding: 0;                 /* Remove padding, if needed */
    height: 100%;               /* Ensure it takes up the full height */	
}

.pagination > li.page-pre > a > i:hover, 
.pagination > li.page-next > a > i:hover {
	color: #333;
}

div.dropdown-menu a.dropdown-item {
	font-size:0.8em;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    color: #5a5a5a;
    background-color: #eee;
}

.pagination > li.page-pre > a:hover, .pagination > li.page-pre > a:focus,
.pagination > li.page-next > a:hover, .pagination > li.page-next > a:focus {
	background:none;
	box-shadow: none;
}

.pagination > .active > a {
    color: white;
    background-color: #eee !Important;
	box-shadow: 0 0 0 0.1rem rgba(110, 110, 110, 0.25);
}

.pagination > .active > a:hover {
    background-color: #eee !Important;
    border: 0;
}

.fa-margin {
	display:inline-block;
	margin-top:3px;
}

a.Edit, a.Delete  {
	color:#999;
	display:block;
	float:left;
}

a.Delete {
	margin-left:15px;
}

a.Edit:hover {
	color: #03677C;
}

a.Delete:hover {
	color: #990000;
}

fieldset a.Edit {
	margin-left:5px;
	margin-top:2px;
}

fieldset a.Delete {
	margin-top:2px;
}

fieldset select.date {
	width: auto; 
}

div#showAsLinks {
	display:none;
}

/* CHARTS: =Fusion charts
------------------------------*/
g[class^='raphael-group-'][class$='-creditgroup'] {
	 display:none !important;
}


/* ==================================== GENERAL USE ================================ */

/* COLUMN WIDTHS: =Set column width in %
------------------------------*/

.data-row  {
	display:flex;
	width:100%;
	margin:0.5em 0;
}

.width5, .width10, .width15, .width20, .width25, .width30, .width35, .width40, .width45, .width50, .width60, .width70, .width80 {
	vertical-align:top;
	float:left;
	padding:4px 0;
}

.width5 {width:5%} .width10 {width:10%;} .width15 {width:15%;} .width20 {width:20%;} .width25 {width:25%;} .width30 {width:30%;} .width35 {width:35%;} .width40 {width:40%;} .width45 {width:45%;} .width50 {width:50%;} .width60 {width:60%;} .width70 {width:70%;} .width80 {width:80%;} 

.tblHeader {
	padding:8px 0;
	font-size:1.2em;
	font-weight:bold;
	color: #F9F9FB;
	background-color:#393e46;
}

.firstCell {
	padding-left:6px;
}

div.recordRow {
	line-height:24px;
	font-size:1.1em;
	margin-top:4px;
	margin-bottom:4px;
}

div.recordRow:hover {
	background-color:#EFEFEF;
	box-shadow: 3px 3px 4px 0px rgba(0,0,0,0.28);
}
	
/* MESSAGE CALLBACKS: =Set format for messages%
------------------------------*/

div.icon {
	float:left;
	width:5%;
	font-size:0.9em;
}

div.text {
	float:left;
	width:95%;
	padding:10px 0 10px;
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	border-radius:4px;
}

.Success {
	background:#83B655; /* mid-green */
	border: 1px solid #83B655;
}

.Success div.text {
	background-color:#DFF2BF;  /*Light Green */
	color:#270; /*dark-green*/
}

.Success i {
	color:#DFF2BF;  /*Light Green */
}

.Warning {
	background:#EFC003; /* mid-yellow */
	border: 1px solid #EFC003; /* mid-yellow */
}

.Warning div.text {
	background-color:#FEEFB3;  /*Light Yellow */
	color:#9F6000; /*dark-brown*/
}

.Warning i {
	color:#FEEFB3;  /*Light Yellow */
}

.Comment {
	background:#1AC6FF; /* mid-blue */
	border: 1px solid #1AC6FF; /* mid-blue */
}

.Comment div.text {
	background-color:#BEF;  /*Light Blue */
	color:#059; /*dark-blue*/
}

.Comment i {
	color:#BEF;  /*Light Blue */
}


.Fail {
	background:#B70000; /* mid-Red */
	border: 1px solid #B70000; /* mid-Red */
}

.Fail div.text {
	background-color:#FFBABA;  /*Light Red */
	color:#D8000C; /*dark-Red*/
}

.Fail i {
	color:#FFBABA;  /*Light Red */
}

.edit_assTotal input, 
.edit_assDesc input, 
.edit_assComment input, 
.edit_totalAssets input, 
.edit_liquidAssets input, 
.edit_intTotal input, 
.edit_intBank input {
	width:80% !important;
}

/* LIST ORDERING: =For ordering a list
------------------------------*/
#order-callback {
	margin-bottom: 10px;
	border-radius:4px;
	width:60%;
	margin:25px auto;
}

#order-callback  i {
	margin-top:19px;
	width:100%;
	text-align:center;
}

#mainContent #order-asset ul, #mainContent #order-account ul, #mainContent #order-inv ul, #mainContent #order-menu ul, #mainContent #order-pages ul  {
	list-style: none;
}

#mainContent #order-asset li, #mainContent #order-account li, #mainContent #order-inv li, #mainContent #order-menu li, #mainContent #order-pages li {
	display: block;
	padding: 6px 10px; 
	margin-bottom: 3px;
	border-bottom:1px solid #FFF;
}

#mainContent #order-asset li:hover, #mainContent #order-account li:hover, #mainContent #order-inv li:hover, #mainContent #order-menu li:hover, #mainContent #order-pages li:hover {
	border-bottom:1px solid #D2D2D2;
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.30);
}

#mainContent #order-menu span, #mainContent #order-inv span {
	display:inline-block; 
	min-width:10%;
}

#mainContent #order-pages li.listCatFormat i {
	margin-right:15px;
	vertical-align:middle;
}

#mainContent #order-pages li.listSubCatFormat {
	color:#666;
}

#mainContent #order-pages li.listSubCatFormat i {
	margin-right:25px;
	vertical-align:middle;
}

#order-account i.handle, #order-inv i.handle, #order-menu i.handle, #order-asset i.handle, #order-pages i.handle, #order-image .handle {
	padding-right:10px; 
	color: #CDCDCD; 
	cursor:move;
}

/* BACK TO TOP: =scroll to top
------------------------------*/

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    background: rgba(255,153,0, 0.7);
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index:20;
}
.back-to-top i {
    color: #6B7A8F;
    margin: 0;
    position: relative;
    left: 9px;
    top: 9px;
    font-size: 22px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	z-index:21;
}
.back-to-top:hover {
    background: rgba(255,153,0, 0.9);
}
.back-to-top:hover i {
    color: #000;
    top: 5px;
}

/* TOOLTIPS: =tooltips
------------------------------*/
.tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat;  background-image: url(/images/tipsy.gif); }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }

.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }

/* UL LISTS: =For lists in various categories
------------------------------*/

#ListBox ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
}

#ListBox ul li {
	position: relative;
	padding:0;
}
	
#ListBox ul li ul {
	position: absolute;
	left: 149px; /* Set 1px less than menu width */
	top: 0;
	display: none;
	background-color:transparent;
}

/* Styles for Menu Items */
#ListBox ul li a {
	display: block;
	text-decoration: none;
	background: #fff;
	text-align:center;
	border: 1px solid #ccc; /* IE6 Bug */
	border-bottom: 0;
}

#ListBox ul li ul li a {
	text-align:left;
	margin-left:4px;
	padding:5px;
}

#ListBox ul li ul li a:hover {
	color: #900;
}	

/* Fix IE. Hide from IE Mac \*/
* html #ListBox ul li { float: left; height: 1%; }
* html #ListBox ul li a { height: 1%; }
/* End */
		
#ListBox li:hover ul { display: block; } /*  The magic */

/* Style for down arrow in drop lists for moving categories */
a.move-category {
	border-radius:3px;
}

a.move-category i {
	line-height:17px; 
	vertical-align:top; 
	margin-left:8px;
}
/* END */

@media (max-width: 768px), 
       (min-resolution: 192dpi) and (max-width: 768px), 
       (min-resolution: 2dppx) and (max-width: 768px) {
		   
/* ===================================== PAGE CONTENT ======================================= */

#rightCol {
	margin-right:0;
	}

#mainContent {
	width:100%; 
	padding:20px 0; 
	margin:20px auto 50px auto;
	border: none; 
	background:#F3F6F9; 
	box-shadow: none;	
	border-radius:0;
	}  	

label {
	float:none;
	text-align: left;
	width:80%;
	margin-left:0;
	font-size:inherit;
}

fieldset {
	width:100%;
	margin:5px auto;
}

fieldset input, fieldset select, fieldset textarea, #container input, #container select, #container textarea, fieldset div.input {
	width:100%;
}

.m-displayNone {
	display:none;
}

#container {
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

/* ==================================== BOOTSTRAP TABLE ====================================== */
.flextable {
	width:100%;
	max-width:100%;
	overflow-x: auto;  /*Enable horizontal scrolling */
}

.flextable table {
	width: 100%; /* Ensure table takes up full width */
	table-layout: fixed; /* Optionally use fixed table layout for better control */
}

.flextable nav {
	text-align: left; /* Align pagination to the left */
/*	width: 100%;  Ensure it takes up the full width */
}

/* ==================================== ACCORDION MENU ====================================== */

#NavHeading {
 	position:sticky; 
	top:0;
	z-index:100;
}

.accordion li.logout {
	display:block;
}

.topNav {
	display:none;
}

div.pageTitle, div.topNav {
	display:none;
}

/* ====================================== LOGIN FORM ======================================= */

form.login-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	background: #505050;
	margin: 20px auto;
	padding: 30px;
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	height: 440px;
	box-shadow: 0px 5px 15px 2px #505050;
	border-radius: 3px;
}

div.center {
	width:80%;
	margin:auto;
}

 }

@media (max-width: 1330px) {
	
	fieldset#checkboxes {
	width:100%; 
}
}
@media (max-width: 860px) {
	
label {
	text-align: left;
}
}



/* END */