/*
_____ _                  _               _   _   _ ________  ___ _       _____ _                           _       
/  ___| |                | |             | | | | | |_   _|  \/  || |     |  ___| |                         | |      
\ `--.| |_ __ _ _ __   __| | __ _ _ __ __| | | |_| | | | | .  . || |     | |__ | | ___ _ __ ___   ___ _ __ | |_ ___ 
`--. \ __/ _` | '_ \ / _` |/ _` | '__/ _` | |  _  | | | | |\/| || |     |  __|| |/ _ \ '_ ` _ \ / _ \ '_ \| __/ __|
/\__/ / || (_| | | | | (_| | (_| | | | (_| | | | | | | | | |  | || |____ | |___| |  __/ | | | | |  __/ | | | |_\__ \
\____/ \__\__,_|_| |_|\__,_|\__,_|_|  \__,_| \_| |_/ \_/ \_|  |_/\_____/ \____/|_|\___|_| |_| |_|\___|_| |_|\__|___/
																							
																							 */

/*
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: none;
}

/* Get rid of Chrome's "usability" feature of putting a nasty outline on the form elements you are focussed in */
*,*:focus,*:hover{
    outline:none;
}


body { }



a, a:hover, a:visited {  text-decoration: none;  }
a:hover { color: var(--secondary); }


.required::after {
  content: "*";
  color: red;
  font-size: 12px;
  margin-left: 4px;
}








/* ------------------------------------------ END OF "STANDARD HTML ELEMENTS" ------------------------------------------ */










/* Bootstrap Over-rides */
.form-check-input:checked  { background-color: var(--bs-success); border-color: var(--bs-success); }




/*
   ___      _             __  __      _ _   _    ___      _        _   
  / _ \ ___| |__  __ _   |  \/  |_  _| | |_(_)  / __| ___| |___ __| |_ 
 | (_) / _ \ '_ \/ _` |  | |\/| | || | |  _| |  \__ \/ -_) / -_) _|  _|
  \___/\___/_.__/\__,_|  |_|  |_|\_,_|_|\__|_|  |___/\___|_\___\__|\__|
                                                                       */
																	   
.oobaMultiSelect select { display: none; }
	
.oobaMultiSelect .dropdown-options {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1;
	flex-direction: column;
	padding: 5px; 
}

.oobaMultiSelect .dropdown-options label { padding: 4px 5px; }

.oobaMultiSelect .dropdown-options input[type="checkbox"] { margin: 0 8px 0 0 !important; height: auto; width: auto; }	

												   


















/*
 _____       _             ______                   _                     _           
|  _  |     | |            | ___ \                 | |                   | |          
| | | | ___ | |__   __ _   | |_/ /_ _  __ _  ___   | |     ___   __ _  __| | ___ _ __ 
| | | |/ _ \| '_ \ / _` |  |  __/ _` |/ _` |/ _ \  | |    / _ \ / _` |/ _` |/ _ \ '__|
\ \_/ / (_) | |_) | (_| |  | | | (_| | (_| |  __/  | |___| (_) | (_| | (_| |  __/ |   
 \___/ \___/|_.__/ \__,_|  \_|  \__,_|\__, |\___|  \_____/\___/ \__,_|\__,_|\___|_|   
                                       __/ |                                          
                                      |___/                                           
*/
/* OOBA PAGE LOADER */
/* See https://codepen.io/DariaIvK/pen/EpjPRM (lds-dual-ring) */
/*Hidden class for adding and removing*/
#ooba-loader.hidden { display: none; }
#ooba-loader-overlay.hidden { display: none; }

/* Add an overlay to the entire page blocking any further presses to buttons or other elements.*/
#ooba-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.8); z-index: 999; opacity: 1; transition: all 0.5s; }

/*Spinner Styles*/
#ooba-loader { display: inline-block; width: 80px; height: 80px; position: absolute; top: 50%; left: 50%;  }
#ooba-loader:after { content: " "; display: block; width: var(--spacing-largest); height: var(--spacing-largest); margin: 5% auto; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: ooba-loader 1.2s linear infinite; }

@keyframes ooba-loader {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
}

@media only screen and (min-width: 20px) and (max-width: 767px) {
#ooba-loader  { top: 45%; left: 40%;  }
}

















/*
______                   _____ _                   _                  
| ___ \                 /  ___| |                 | |                 
| |_/ /_ _  __ _  ___   \ `--.| |_ _ __ _   _  ___| |_ _   _ _ __ ___ 
|  __/ _` |/ _` |/ _ \   `--. \ __| '__| | | |/ __| __| | | | '__/ _ \
| | | (_| | (_| |  __/  /\__/ / |_| |  | |_| | (__| |_| |_| | | |  __/
\_|  \__,_|\__, |\___|  \____/ \__|_|   \__,_|\___|\__|\__,_|_|  \___|
            __/ |                                                     
           |___/                                                      
*/


header { align-items: center !important;     padding: var(--spacing-medium); }
header #logo { text-align: center; margin: auto; }
header #logo img { max-height: 40px; width: auto; }
body.app header h1 { font-size: 1.5rem; }





body.front header #logo img { max-height: 50px; width: auto; max-width: 100%; }
body.front header { background-color: var(--primary); }
body.front header .flex-container { align-items: center; }

@media only screen and (min-width: 20px) and (max-width: 991px) {
body.front header { height: 80px; width: auto; } 
body.front header #logo { height: 80px; } 
body.front header #mainNavCreateNavigation { position: absolute; top: -8px; left: -12px; }
body.front header #mainNavCreateNavigation .navbar-toggler { background-color: var(--bs-dark); padding: 0.7rem; border-radius: 0; }
body.front header #mainNavCreateNavigation .navbar-toggler span { font-size: 1rem; color: #fff; }
body.front header #loginCreateNavigation { position: absolute; top: -8px; right: -12px; }
body.front header #loginCreateNavigation .navbar-toggler { background-color: var(--secondary); padding: 0.7rem; border-radius: 0; }
body.front header #loginCreateNavigation .navbar-toggler span { font-size: 1rem; }

body.front header #adminMenu { position: absolute; top: -8px; right: -12px; }
}





footer { background-color: var(--primary); color: var(--bs-white); padding: var(--spacing-larger);  0px; }
footer a { color: var(--bs-white) !important; }

.saas-maincontent { min-height: 85vh; background-color: var(--gray-2); padding: var(--spacing-larger);  position: relative; }
.saas-maincontent-flex { display: flex; }
.toolbar { padding: var(--spacing-medium); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.toolbar .live-archive-addnew { display: flex; justify-content: space-evenly; align-items: center; }
.toolbar .live-archive-addnew #liveArchiveToggle { margin: 0 10px 0 0; }
.toolbar .live-archive-addnew .form-check.form-switch { margin: 0; min-height: 1rem; }
.toolbar .live-archive-addnew div a span.svgicon { margin: 0 8px 0 0; }


.back-button { position: absolute; top: 0; left: 0; }
.back-button a { font-size: 2.4em; color: var(--secondary); }
.ooba-object-to-edit { color: var(--secondary); }
.tooltip {}
.tooltip.tooltip-questionmark { color: var(--bs-gray-200); }

/* ---------------------------------------------- END OF "PAGE STRUCTURE" ---------------------------------------------- */


















#helpNavbarButton {
    position: absolute;
    top: 0;
    right: 5px;
    width: 24px;
    border-radius: 50%;
    padding: 0.1rem;
    color: var(--bs-white);
}
#helpNavbarButton  span.material-symbols-outlined { color: var(--bs-white); }














/*
             _           _____    _ _ _        _     _      
            | |         |  ___|  | (_) |      | |   | |     
  ___   ___ | |__   __ _| |__  __| |_| |_ __ _| |__ | | ___ 
 / _ \ / _ \| '_ \ / _` |  __|/ _` | | __/ _` | '_ \| |/ _ \
| (_) | (_) | |_) | (_| | |__| (_| | | || (_| | |_) | |  __/
 \___/ \___/|_.__/ \__,_\____/\__,_|_|\__\__,_|_.__/|_|\___|
                                                            
                                                            
*/

#oobaEditableForm { margin: 0 0 var(--spacing-medium) 0; display: block; min-height: 36px; }
#oobaEditableForm input { width: 70%; float: left; color: var(--primary); -webkit-box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 20%); box-shadow: 1px 1px var(--spacing-smaller) 1px rgb(0 0 0 / 20%); }
#oobaEditableForm button { width: auto; height: 36px; padding: 6px var(--spacing-medium) var(--spacing-smaller) var(--spacing-medium); float: left; }
.oobaEditable { min-height: 2.8em; } 
.oobaEditableDropdown { border: 1px dashed var(--bs-gray-500); padding: var(--spacing-small) var(--spacing-medium) 6px var(--spacing-medium); border-radius: var(--border-radius-medium); background-color: var(--primary-lighter); width: 70%; display: block; color: var(--bs-gray-600); height: var(--spacing-larger)); }


/* ---------------------------------------------- END OF "oobaEditable" ---------------------------------------------- */























/*
   ___      _             _ _  _      _   _     _ _           _              _ _ 
  / _ \ ___| |__  __ _   ( | )/_\  __| |_(_)_ _(_) |_ _  _   | |   ___  __ _( | )
 | (_) / _ \ '_ \/ _` |   V V/ _ \/ _|  _| \ V / |  _| || |  | |__/ _ \/ _` |V V 
  \___/\___/_.__/\__,_|     /_/ \_\__|\__|_|\_/|_|\__|\_, |  |____\___/\__, |    
                                                      |__/             |___/     
*/


.activity-logs-holding-box { margin: 0 0 var(--spacing-small) 0; padding: var(--spacing-small); background-color: var(--bs-gray-100); }
.activity-log { padding: 0 var(--spacing-medium) var(--spacing-large) var(--spacing-medium); background-color: var(--bs-gray-100); }
.activity-log p { margin: 0; padding: 1em 0; }
.activity-log-item { padding: var(--spacing-medium) 0; border-bottom: 1px dashed var(--bs-gray-200); }
.activity-log-date { font-weight: 700; line-height: 2em; }
.activity-log-name { color: var(--secondary); }
.activity-log-actionText { }
.activity-log-object { }
.activity-log-field { }
.activity-log-table { }
.activity-log-fieldLabel { font-style: italic; }
.activity-log-oldValue { font-weight: 700; color: var(--bs-gray-600); }
.activity-log-newValue { font-weight: 700; color: var(--bs-gray-600); }







/*
 _____       _              _ _ _____        __ _                             _   _      ______      _          _                _ _ 
|  _  |     | |            ( | )  ___|      / _| |                           | | | |     |  _  \    | |        | |              ( | )
| | | | ___ | |__   __ _    V V\ `--.  ___ | |_| |___      ____ _ _ __ ___   | | | |_ __ | | | |__ _| |_ ___   | |     ___   __ _V V 
| | | |/ _ \| '_ \ / _` |       `--. \/ _ \|  _| __\ \ /\ / / _` | '__/ _ \  | | | | '_ \| | | / _` | __/ _ \  | |    / _ \ / _` |   
\ \_/ / (_) | |_) | (_| |      /\__/ / (_) | | | |_ \ V  V / (_| | | |  __/  | |_| | |_) | |/ / (_| | ||  __/  | |___| (_) | (_| |   
 \___/ \___/|_.__/ \__,_|      \____/ \___/|_|  \__| \_/\_/ \__,_|_|  \___|   \___/| .__/|___/ \__,_|\__\___|  \_____/\___/ \__, |   
                                                                                   | |                                       __/ |   
                                                                                   |_|                                      |___/    
*/
.software-logs-holding-box { margin: 0 0 var(--spacing-small) 0; padding: var(--spacing-small); background-color: var(--bs-gray-100); }
.software-log { padding: 0 var(--spacing-medium) var(--spacing-large) var(--spacing-medium); background-color: var(--bs-gray-100); }
.software-log p { margin: 0; padding: 1em 0; }
.software-log-item { clear: both; padding: var(--spacing-medium) 0; border-bottom: 1px dashed var(--bs-gray-200); }
.software-log-date { font-weight: 700; line-height: 2em; }
.software-log-name { color: var(--secondary); }
.software-log-actionText { }
.software-log-object { }
.software-log-field { }
.software-log-table { }
.software-log-fieldLabel { font-style: italic; }
.software-log-oldValue { font-weight: 700; color: var(--bs-gray-600); }
.software-log-newValue { font-weight: 700; color: var(--bs-gray-600); }


.software-log-item-tag { text-transform: uppercase; color: #ffffff; border-radius: 5px; margin: 10px 10px 10px 0; padding: 5px 10px; font-size: 8pt; cursor: grab; }


.software-log-item .badge.core { background-color: #FFAE03; }
.software-log-item .badge.thisapp { background-color: var(--primary); }

.software-log-item .badge.standardupdate { background-color: #198754; }
.software-log-item .badge.newfeature { background-color: #0dcaf0; }
.software-log-item .badge.bugfix { background-color: #dc3545; }

.software-log-item .badge.priority1 { background-color: #990000; }
.software-log-item .badge.priority2 { background-color: #6e0099; }
.software-log-item .badge.priority3 { background-color: #179f00; }
.software-log-item .badge.priority4 { background-color: #22adbc; }
.software-log-item .badge.priority5 { background-color: #999999; }

.software-log-item .badge.nonsecurityupdate { background-color: #777777; }
.software-log-item .badge.securityupdate { background-color: #dc3545; }











/* app-user-info */
#user-info { }
#user-info .user-info-name { position: absolute; bottom: 20px; font-size: 90%; left: 10px; }
#user-info .user-info-name-label { font-weight: 700; }









/* OOBA SCROLL DIV */
.scrolldiv { padding: 0.25rem;     overflow-y: scroll;  }
.scrolldiv::-webkit-scrollbar { width: 10px; } /* width */
.scrolldiv::-webkit-scrollbar-track { background: var(--bs-gray-100); } /* Track */
.scrolldiv::-webkit-scrollbar-thumb { background: var(--bs-gray-100); border-radius: var(--border-radius-smallest);  } /* Handle */
.scrolldiv::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Handle on hover */



/* EXTAB WIDGETS */
.xTabWidgetCard { min-height: 350px; max-height: 350px; padding: var(--spacing-medium); border: 1px solid var(--primary); border-radius: var(--border-radius-medium); background-color: var(--primary-lighter); }
.xTabWidgetCard .card-body { padding: 0.25rem;     overflow-y: scroll;  }
.xTabWidgetCard h5 { text-transform: uppercase; color: var(--primary); margin: 0; }
.xTabWidgetCard ul.xTabWidget { padding: 0px; margin: 0; }
.xTabWidgetCard ul.xTabWidget li { position: relative; list-style-type: none; display: block; padding: var(--spacing-small) var(--spacing-medium); border-bottom: 1px dotted var(--bs-gray-200); color: var(--primary); font-size: 90%; }
.xTabWidgetCard ul.xTabWidget li:hover {  background-color: var(--primary-light); color: var(--primary); cursor: pointer; }
.xTabWidgetCard ul.xTabWidget li.on {  background-color: var(--primary); color: #ffffff; cursor: pointer; }
.xTabWidgetCard ul.xTabWidget li.on:before { content: "\f14a"; font-family: "Font Awesome 5 Free"; right: 10px; position:absolute; top:6px; font-size: 1.4em; }
.xTabWidgetCard .card-body::-webkit-scrollbar { width: 10px; } /* width */
.xTabWidgetCard .card-body::-webkit-scrollbar-track { background: var(--bs-gray-100); } /* Track */
.xTabWidgetCard .card-body::-webkit-scrollbar-thumb { background: var(--bs-gray-100); border-radius: var(--border-radius-smallest);  } /* Handle */
.xTabWidgetCard .card-body::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Handle on hover */




/* EXTAB WIDGETS */
.dashWidgetCard { min-height: 300px; max-height: 300px; }
.dashWidgetCard .card-body { padding: 0.25rem;     overflow-y: scroll; }
.dashWidgetCard h5 { margin: 0; font-weight: normal; color: var(--bs-gray-200); padding: 10px 9px; font-size: 90%; text-transform: uppercase; }
.dashWidgetCard ul.dashWidget { padding: 0px; margin: 0; }
.dashWidgetCard ul.dashWidget li { position: relative; list-style-type: none; display: block; padding: 5px 10px; border-bottom: 1px dotted var(--bs-gray-200); color: var(--dark); font-size: 100%; }
.dashWidgetCard ul.dashWidget li:hover {  color: var(--orange);; cursor: pointer; }
.dashWidgetCard ul.dashWidget li.on {  color: var(--orange);; cursor: pointer; }
.dashWidgetCard ul.dashWidget li.on:before { content: "\f14a"; font-family: "Font Awesome 5 Free"; right: 10px; position:absolute; top:6px; }
.dashWidgetCard .card-body::-webkit-scrollbar { width: 10px; } /* width */
.dashWidgetCard .card-body::-webkit-scrollbar-track { background: var(--bs-gray-100); } /* Track */
.dashWidgetCard .card-body::-webkit-scrollbar-thumb { background: var(--bs-gray-100); border-radius: var(--border-radius-smallest);  } /* Handle */
.dashWidgetCard .card-body::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Handle on hover */
.dashWidgetCard table { width: 100%; }









/*
   ___      _             __  __                             
  / _ \ ___| |__  __ _   |  \/  |___ ______ __ _ __ _ ___ ___
 | (_) / _ \ '_ \/ _` |  | |\/| / -_|_-<_-</ _` / _` / -_|_-<
  \___/\___/_.__/\__,_|  |_|  |_\___/__/__/\__,_\__, \___/__/
                                                |___/        
*/

#oobaMessage {}

.oobaMessage { margin: var(--spacing-large); padding: var(--spacing-medium) var(--spacing-large); border-radius: var(--border-radius-small); position: relative; }
.oobaMessageClose { position: absolute; top: 12px; right: 12px; font-size: 1.4em; }
.oobaMessageClose:hover { cursor: pointer; }
.oobaMessage h2 { margin: 0; font-weight: 400; font-size: 2.6em; }
.oobaMessage h3 { margin: 0; }
.oobaMessage p { margin: 0; font-size: 1.4em; }

.oobaMessage.success { background-color: var(--bs-success); color: #ffffff; }
.oobaMessage.error { background-color: var(--bs-danger); color: #ffffff; }
.oobaMessage.warning { background-color: var(--bs-warning); color: #333333; }
.oobaMessage.info { background-color: var(--bs-info); color: #ffffff; }
.oobaMessage.question { background-color: var(--bs-gray-500); color: #ffffff; }


	
	
	











































/*
 _   _             _             _   _             
| \ | |           (_)           | | (_)            
|  \| | __ ___   ___  __ _  __ _| |_ _  ___  _ __  
| . ` |/ _` \ \ / / |/ _` |/ _` | __| |/ _ \| '_ \ 
| |\  | (_| |\ V /| | (_| | (_| | |_| | (_) | | | |
\_| \_/\__,_| \_/ |_|\__, |\__,_|\__|_|\___/|_| |_|
                      __/ |                        
                     |___/                         */

.revealDropdownNav { position: absolute !important; top: var(--spacing-largest); right: 40px; opacity: 1; width: auto; height: auto; }
.hideDropdownNav { height: 0px; opacity: 0; overflow: hidden;  }




/* Main Navigation */
#mainNavNavigation ul li a { color: var(--bs-white); padding: var(--spacing-small) var(--spacing-large); }
#mainNavNavigation ul li a .nav-icon { display: none; }
#mainNavNavigation ul li.active a { background-color: var(--primary-light);  color: var(--primary);     border-radius: var(--border-radius-medium);}




/* login Navigation */
#loginNavigation ul li a { color: var(--bs-white); padding: var(--spacing-small) var(--spacing-large); }
#loginCreateNavigation .offcanvas.show ul li a { color: var(--bs-nav-link-color); }
#loginNavigation ul li a .nav-icon { display: none; }
#loginNavigation ul li.active a { background-color: var(--primary-light);  color: var(--primary);     border-radius: var(--border-radius-medium);}
#loginNavigation ul li a.front-login, #loginNavigation ul li a.front-login:visited { background-color: var(--secondary); border-radius: var(--border-radius-medium); color: var(--bs-white); }
#loginNavigation ul li a.front-signup,#loginNavigation ul li a.front-signup:visited { background-color: var(--tertiary); border-radius: var(--border-radius-medium);  color: var(--bs-white); margin: 0 0 0 10px; }






/* APP NAVIGATION */
#appNavigation ul li { position: relative; }
#appNavigation ul li a { color: var(--bs-gray-600); padding: var(--spacing-medium) var(--spacing-medium); }
#appNavigation ul li a span.menuItemIcon img { filter: invert(49%) sepia(5%) saturate(763%) hue-rotate(167deg) brightness(89%) contrast(88%); width: 16px; }
#appNavigation ul li.active { background-color: var(--primary-light); border-bottom-right-radius: var(--spacing-larger);  }
#appNavigation ul li.active a { color: var(--primary); }



#appNavigation ul li.active:before { 
  content: " ";
  background-color: var(--primary);
  color: var(--primary);
  font-weight: bold;
  width: var(--spacing-medium);
  height: 100%;
  position: absolute;
  display: block;
  top: 0px;
  left: -10px;
border-top-right-radius: var(--spacing-small);
    border-bottom-right-radius: var(--spacing-small);
}


div#appMenuColumn { padding: 0; }
#appMenuColumn .navbar .container-fluid { padding: 0; }
#appMenuColumn .navbar .container-fluid .offcanvas-body { display: block; }
#appMenuColumn .navbar .container-fluid ul { padding: 0; }

@media only screen and (min-width: 0) and (max-width: 991px) {
#appMenuColumn { padding: 0; width: auto; position: absolute; top: 0; left: 5px; }
#user-info { display: none; }
#appNavMobile ul li { padding: 16px 0; }
#hamburgerAppMenu ul li { padding: 16px 0; }
 
}




/* SUB-VIEW NAV */
nav.subViewNav { border: 1px solid var(--secondary); border-radius: var(--border-radius-smaller); background-color: var(--secondary-lighter); }
.subViewNav ul li { position: relative; }
.subViewNav ul li.active { background-color: var(--secondary-light); }
.subViewNav ul li.active a { color: var(--secondary); }
.subViewNav ul li a { color: var(--bs-gray-600); padding: var(--spacing-medium) var(--spacing-medium); }



/* ACCOUNT NAVIGATION  */
#adminAccountSubmenu ul li { position: relative; }
#adminAccountSubmenu ul li a { color: var(--bs-gray-600); padding: var(--spacing-medium) var(--spacing-medium); }
#adminAccountSubmenu ul li a span.menuItemIcon img { filter: invert(49%) sepia(5%) saturate(763%) hue-rotate(167deg) brightness(89%) contrast(88%); width: 16px; }
#adminAccountSubmenu ul li.active { background-color: var(--primary-light); border-bottom-right-radius: var(--border-radius-larger);  }
#adminAccountSubmenu ul li.active a { color: var(--primary); }
#adminAccountSubmenu ul li.active a span.menuItemIcon img { filter: invert(9%) sepia(96%) saturate(6425%) hue-rotate(6deg) brightness(98%) contrast(114%);  }

#adminAccountSubmenu ul li.active:before { 
  content: " ";
  background-color: var(--primary);
  color: var(--primary);
  font-weight: bold;
  width: var(--spacing-medium);
  height: 100%;
  position: absolute;
  display: block;
  top: 0px;
  left: -10px;
border-top-right-radius: var(--spacing-small);
    border-bottom-right-radius: var(--spacing-small);
}


@media only screen and (min-width: 0) and (max-width: 991px) {
#hamburgerAppMenu ul li { padding: 16px 0; }
#hamburgerAdminAccountSubmenu ul li { padding: 16px 0; }

}





/* ADD NEW MENU DROP DOWN */
#addnewMenu {  }
#addnewMenuButton { height: var(--spacing-largest); width: 240px; background-color: var(--tertiary); color: var(--bs-white); font-weight: 700; line-height: var(--spacing-largest); padding: 0 0 0 0px; border-radius: var(--border-radius-larger);  margin: 0 1px 0 0; text-align: center; }
#addnewMenuButton:hover { cursor: pointer; }
#addnewMenuButton i { margin: -3px 0 0 10pt; }

#addnewDropdown { transition: opacity 0.5s, height 0.5s; transition-timing-function: ease-in-out; z-index: 20; }
#addnewDropdown.revealDropdownNav { position: absolute !important; top: var(--spacing-largest); right: var(--spacing-large); opacity: 1; width: auto; height: auto; }
#addnewMenu ul {
    flex-direction: column;
    background-color: var(--tertiary-lighter);
    border-bottom-left-radius: var(--spacing-medium);
    border-bottom-right-radius: var(--spacing-medium);
    width: 190px;
    border: 1px solid var(--tertiary);
    border-top: none;
    -webkit-box-shadow: 3px 3px 7px var(--spacing-smallest) rgb(0 0 0 / 20%);
    box-shadow: 3px 3px 7px var(--spacing-smallest) rgb(0 0 0 / 20%);
}
#addnewMenu ul li { }
#addnewMenu ul li:last-of-type a { border-bottom-left-radius: var(--spacing-medium); border-bottom-right-radius: var(--spacing-medium); }
#addnewMenu ul li a { color: var(--bs-gray-600); border-bottom: var(--spacing-smallest) solid var(--tertiary-light); padding: var(--spacing-medium) var(--spacing-medium); }
#addnewMenu ul li a:hover { color: var(--secondary-lighter); background-color: var(--secondary); }
#addnewAccountSubmenu nav ul {  }

/* ---------------------------------------------- END OF "NAVIGATION" ---------------------------------------------- */









/* OOBA SWITCH CHECKBOX 
.switch-holding-box {  }
.switch-holding-box .switch { position: relative; display: inline-block; width: 40px; height: var(--spacing-large); }
.switch-holding-box .switch input { opacity: 0; width: 0; height: 0; }
.switch-holding-box .slider { position: absolute; cursor: pointer;top: 0;left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switch-holding-box .slider:before { position: absolute; content: ""; height: var(--spacing-large)); width: var(--spacing-large)); left: var(--spacing-smallest); bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.switch-holding-box input:checked + .slider { background-color: #2196F3; }
.switch-holding-box input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
.switch-holding-box input:checked + .slider:before { -webkit-transform: translateX(var(--spacing-large))); -ms-transform: translateX(var(--spacing-large))); transform: translateX(var(--spacing-large))); }
.switch-holding-box .slider.round { border-radius: var(--border-radius-larger); }
.switch-holding-box .slider.round:before { border-radius: 50%; }


.switch-holding-box.smallSwitch {}
.switch-holding-box.smallSwitch .switch { position: relative; display: inline-block; width: 29px; height: var(--spacing-large)); }
.switch-holding-box.smallSwitch input:checked + .slider:before { -webkit-transform: translateX(var(--spacing-medium)); -ms-transform: translateX(var(--spacing-medium)); transform: translateX(var(--spacing-medium)); }
.switch-holding-box.smallSwitch .slider:before { position: absolute; content: ""; height: var(--spacing-medium); width: var(--spacing-medium); left: var(--spacing-smallest); bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }



*/
























/*
 _____     _           _       _             
|_   _|   | |         | |     | |            
  | | __ _| |__  _   _| | __ _| |_ ___  _ __ 
  | |/ _` | '_ \| | | | |/ _` | __/ _ \| '__|
  | | (_| | |_) | |_| | | (_| | || (_) | |   
  \_/\__,_|_.__/ \__,_|_|\__,_|\__\___/|_|   
                                             
                                             
*/

.ooba-tabulator-table-holdingbox { display: block; overflow-x: scroll; overflow-y: hidden; /* border: 1px  solid #0f0; */ }


.ooba-tabulator-table { margin: auto; min-width: 800px; }
.ooba-tabulator-table input, .ooba-tabulator-table button, .ooba-tabulator-table select, .ooba-tabulator-table optgroup, .ooba-tabulator-table textarea { width: auto; }
.ooba-tabulator-table.tabulator { background: none; border-bottom-left-radius: var(--spacing-medium); border-bottom-right-radius: var(--spacing-medium); }
.ooba-tabulator-table .tabulator-header .tabulator-col { text-align:center; }
.ooba-tabulator-table .tabulator-header, .ooba-tabulator-table .tabulator-col { background: var(--primary) !important; color: var(--primary-lighter); height: auto !important; border-right: 1px solid var(--primary) !important; }
.ooba-tabulator-table .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { padding: var(--spacing-small) 25px var(--spacing-small) var(--spacing-small); font-size: 1.2em; }



.ooba-tabulator-table.tabulator .tabulator-row .tabulator-cell { padding: var(--spacing-medium) var(--spacing-small) var(--spacing-medium) var(--spacing-small); font-size: 1em; border-right: 1px solid var(--gray-2); line-height: var(--spacing-larger);  }

/* row */
.tabulator-row.tabulator-row-even { background-color: var(--bs-gray-100); }
.ooba-tabulator-table.tabulator .tabulator-row.tabulator-selectable:hover { background-color: var(--primary-lighter); }

.ooba-tabulator-table.tabulator .tabulator-footer { background-color: var(--primary-light); border-bottom-left-radius: var(--spacing-medium); border-bottom-right-radius: var(--spacing-medium); padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large)er) var(--spacing-medium); border-bottom: 1px solid var(--bs-gray-400); }
.ooba-tabulator-table.tabulator .tabulator-footer button.tabulator-page { border-radius: var(--border-radius-medium); padding: var(--spacing-small) var(--spacing-medium); font-size: 0.9em; background-color: var(--primary); color: var(--primary-lighter); border: 1px solid var(--primary); height: auto; }

.ooba-tabulator-table.tabulator .tabulator-footer button.tabulator-page.active { border-radius: var(--border-radius-medium); padding: var(--spacing-small) var(--spacing-medium); font-size: 0.9em; background-color: var(--tertiary); color: var(--tertiary-lighter); border: 1px solid var(--tertiary); height: auto; }

/* Click Main Item URL */
.tabulator-cell a { color: var(--bs-gray-600); }

/* Edit Button */
.ooba-tabulator-table.tabulator i { color: var(--bs-gray-300); font-size: 1.6em; } 
.ooba-tabulator-table.tabulator i:hover { color: var(--secondary); }


/* avatar image */
.ooba-tabulator-table.tabulator .avatar img { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--bs-gray-400); }


/* sort arrow */
.ooba-tabulator-table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { border-bottom: 6px solid var(--primary-lighter); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { color: var(--secondary-light); border-bottom: 6px solid var(--secondary-light); }
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow { color: var(--warning); border-top: 6px solid var(--warning); }






/*
  _____     _    _                  ___ _                _             _   ___           _      _                 
 |_   _|_ _| |__| |___ ___   ___   / __| |_ __ _ _ _  __| |__ _ _ _ __| | | _ ) ___  ___| |_ __| |_ _ _ __ _ _ __ 
   | |/ _` | '_ \ / -_|_-<  |___|  \__ \  _/ _` | ' \/ _` / _` | '_/ _` | | _ \/ _ \/ _ \  _(_-<  _| '_/ _` | '_ \
   |_|\__,_|_.__/_\___/__/         |___/\__\__,_|_||_\__,_\__,_|_| \__,_| |___/\___/\___/\__/__/\__|_| \__,_| .__/
                                                                                                            |_|   */
																											
																											
th.col-edit { width: 60px;text-align: center; }
td.col-edit { width: 60px;text-align: center; }
th.col-delete { width: 60px;text-align: center; }
td.col-delete { width: 60px;text-align: center; }
th.col-unarchive { width: 120px;text-align: center; }
td.col-unarchive { width: 120px;text-align: center; }
















/*
 _____                   _       ___  _           _      _____ 
/  ___|                 | |     / _ \| |         | |    / __  \
\ `--.__      _____  ___| |_   / /_\ \ | ___ _ __| |_   `' / /'
 `--. \ \ /\ / / _ \/ _ \ __|  |  _  | |/ _ \ '__| __|    / /  
/\__/ /\ V  V /  __/  __/ |_   | | | | |  __/ |  | |_   ./ /___
\____/  \_/\_/ \___|\___|\__|  \_| |_/_|\___|_|   \__|  \_____/
                                                               
                                                               
*/


.swal2-actions button { width: auto; height: 4var(--spacing-small); }















/*
   _ _____                          _   _ _____ 
  (_)  _  |                        | | | |_   _|
   _| | | |_   _  ___ _ __ _   _   | | | | | |  
  | | | | | | | |/ _ \ '__| | | |  | | | | | |  
  | \ \/' / |_| |  __/ |  | |_| |  | |_| |_| |_ 
  | |\_/\_\\__,_|\___|_|   \__, |   \___/ \___/ 
 _/ |                       __/ |               
|__/                       |___/                
*/


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
border: 1px solid var(--secondary);
background-color: var(--secondary);
font-weight: normal;
color: var(--bs-white) !important;
}

.ui-state-hover a, .ui-widget-content .ui-state-hover a, .ui-widget-header .ui-state-hover a, .ui-state-focus, .ui-widget-content .ui-state-focus a, .ui-widget-header .ui-state-focus a, .ui-button:hover a, .ui-button:focus a { color: var(--bs-white); }






.oobasortable.sortable { padding: 0; }
.oobasortable.sortable.horizontal { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: nowrap; }
.oobasortable.sortable.horizontal li { width: 25%; border-right: var(--spacing-smallest) dotted var(--bs-gray-200); border-bottom: var(--spacing-smallest) dotted var(--bs-gray-200); }
.oobasortable.sortable li { list-style-type: none; padding: 10px; border-bottom: 1px dotted #cccccc; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: center; }

.oobasortable.sortable li:hover { background-color: var(--primary-light); cursor: grab; } 
.oobasortable.sortable li a { }

.oobasortable.sortable .oobasortable-itemname { flex-grow: 1; }
.oobasortable.sortable .oobasortable-menu { flex-grow: 0; margin: 0 0 0 10px; }












/*
   _ _____                         ___  ___      _ _   _    _____      _           _   
  (_)  _  |                        |  \/  |     | | | (_)  /  ___|    | |         | |  
   _| | | |_   _  ___ _ __ _   _   | .  . |_   _| | |_ _   \ `--.  ___| | ___  ___| |_ 
  | | | | | | | |/ _ \ '__| | | |  | |\/| | | | | | __| |   `--. \/ _ \ |/ _ \/ __| __|
  | \ \/' / |_| |  __/ |  | |_| |  | |  | | |_| | | |_| |  /\__/ /  __/ |  __/ (__| |_ 
  | |\_/\_\\__,_|\___|_|   \__, |  \_|  |_/\__,_|_|\__|_|  \____/ \___|_|\___|\___|\__|
 _/ |                       __/ |                                                      
|__/                       |___/                                                       
*/

.ui-multiselect-menu .ui-multiselect-checkboxes li {}
.ui-multiselect-menu .ui-multiselect-checkboxes li label { display: flex !important; flex-direction: row; justify-content: flex-start; padding: 3px; border-radius: 0; }
.ui-multiselect-menu .ui-multiselect-checkboxes li input[type="checkbox"] { width: 20px; height: 20px; margin: 0; display: inline; }
.ui-multiselect-menu .ui-multiselect-checkboxes li span { font-size: 1.6em; margin: 6px 0 var(--spacing-smallest) var(--spacing-larger)); font-weight: normal; }
.ui-multiselect-header {  border-radius: 0; padding: var(--spacing-small); margin: -3px -3px 0 -3px; }
.ui-multiselect-header .ui-icon { float: left; margin: -1px 0 0 0; }


































/* STUFF TO DELETE */




/*
_____       _             ______ _               _               
|  _  |     | |            |  ___| |             | |              
| | | | ___ | |__   __ _   | |_  | |     _____  _| |__   _____  __
| | | |/ _ \| '_ \ / _` |  |  _| | |    / _ \ \/ / '_ \ / _ \ \/ /
\ \_/ / (_) | |_) | (_| |  | |   | |___|  __/>  <| |_) | (_) >  < 
\___/ \___/|_.__/ \__,_|  \_|   \_____/\___/_/\_\_.__/ \___/_/\_\
										  
										  
*/
.flex-container { display: flex; flex-direction: row; align-items: stretch; align-content: stretch; flex-wrap: wrap;  }
.flex-no-wrap { flex-wrap: nowrap; }
.flex-item { display: flex; margin: 0 0.5% 0 0.5%; flex: 0 0 auto; flex-direction: column; }
.flex-item img{ width: 100%; height: auto; }
.flex-content { display: block;  }
.flex-10 { flex-basis: 9%; }
.flex-15 { flex-basis: 14%; }
.flex-20 { flex-basis: 19%; }
.flex-25 { flex-basis: 24%; }
.flex-33 { flex-basis: 32.333% }
.flex-40 { flex-basis: 39% }
.flex-50 { flex-basis: 49% }
.flex-60 { flex-basis: 59% }
.flex-66 { flex-basis: 65.666% }
.flex-70 { flex-basis: 69% }
.flex-75 { flex-basis: 74% }
.flex-80 { flex-basis: 79% }
.flex-85 { flex-basis: 84% }
.flex-100 { flex-basis: 99% }


@media only screen and (min-width: 20px) and (max-width: 767px) {
.flex-no-wrap { flex-wrap: wrap; }
.flex-10 { flex-basis: 49% !important; margin: 10px 0; }
.flex-15 { flex-basis: 49% !important; margin: 10px 0; }
.flex-20 { flex-basis: 49% !important; margin: 10px 0; }
.flex-25 { flex-basis: 99% !important; margin: 10px 0; }
.flex-33 { flex-basis: 99% !important; margin: 10px 0; }
.flex-40 { flex-basis: 99% !important; margin: 10px 0; }
.flex-50 { flex-basis: 99% !important; margin: 10px 0; }
.flex-60 { flex-basis: 99% !important; margin: 10px 0; }
.flex-66 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-70 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-75 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-80 { flex-basis: 99% !important; margin: 10px 0 ; }
.flex-85 { flex-basis: 99% !important; margin: 10px 0 ; }
}

@media only screen and (min-width: 76var(--spacing-small)) and (max-width: 991px) {
.flex-no-wrap { flex-wrap: wrap; }
.flex-10 { flex-basis: 32.333% !important; }
.flex-15 { flex-basis: 32.333% !important; }
.flex-20 { flex-basis: 32.333% !important; }
.flex-25 { flex-basis: 32.333% !important; }
.flex-33 { flex-basis: 32.333% !important; }
.flex-40 { flex-basis: 49% !important; }
.flex-50 { flex-basis: 49% !important; }
.flex-60 { flex-basis: 49% !important; }
.flex-66 { flex-basis: 49% !important; }
.flex-70 { flex-basis: 99% !important; }
.flex-75 { flex-basis: 99% !important; }
.flex-80 { flex-basis: 99% !important; }
.flex-85 { flex-basis: 99% !important; }
}

@media only screen and (min-width: 99var(--spacing-smallest)) and (max-width: 1023px) {
.flex-no-wrap { flex-wrap: nowrap; }
.flex-10 { flex-basis: 9% !important; }
.flex-15 { flex-basis: 14% !important; }
.flex-20 { flex-basis: 19% !important; }
.flex-25 { flex-basis: 24% !important; }
.flex-33 { flex-basis: 32.333% !important; }
.flex-40 { flex-basis: 49% !important; }
.flex-50 { flex-basis: 49% !important; }
.flex-60 { flex-basis: 49% !important; }
.flex-66 { flex-basis: 49% !important; }
.flex-70 { flex-basis: 99% !important; }
.flex-75 { flex-basis: 99% !important; }
.flex-80 { flex-basis: 99% !important; }
.flex-85 { flex-basis: 99% !important; }
}

@media only screen and (min-width: 10var(--spacing-large)) and (max-width: 1920px) {
.flex-no-wrap { flex-wrap: nowrap; }
}

/* ---------------------------------------------- END OF "OOBA FLEXBOX" ---------------------------------------------- */



/* STUFF TO DELETE - END */




















/* ---------------------------------------- 
FILE UPLOAD - https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/
---------------------------------------- */
.upload-area { height: 200px; border: 1px solid lightgray; border-radius: var(--border-radius-smaller); margin: 0 auto; text-align: center; overflow: auto; }
.upload-area:hover { cursor: pointer; }
.upload-area h1 {  text-align: center; font-weight: normal; font-family: sans-serif; line-height: 50px; color: darkslategray; }
#file { display: none; }
.thumbnail { width: 80px; height: 80px; padding: var(--spacing-smallest);  border: 1px  solid lightgray; border-radius: var(--border-radius-smaller); float: left; }
.size { font-size:var(--spacing-medium); }
/* ---------------------------------------- 
FILE UPLOAD - END - https://makitweb.com/drag-and-drop-file-upload-with-jquery-and-ajax/
---------------------------------------- */




















/*
  ___           _      _                    ___   ____    ___                      _    _        
 | _ ) ___  ___| |_ __| |_ _ _ __ _ _ __   | __| |__ /   / _ \__ _____ _ _ ___ _ _(_)__| |___ ___
 | _ \/ _ \/ _ \  _(_-<  _| '_/ _` | '_ \  |__ \_ |_ \  | (_) \ V / -_) '_|___| '_| / _` / -_|_-<
 |___/\___/\___/\__/__/\__|_| \__,_| .__/  |___(_)___/   \___/ \_/\___|_|     |_| |_\__,_\___/__/
                                   |_|                                                           
*/

/* Nav */
nav li { list-style-type: none;  }


/* tabs */
.nav.nav-tabs .nav-link.active { background-color: var(--bs-primary) !important; color: var(--bs-light) !important; }

/* app admin menu  */
.header-nav .nav-profile { min-width: 200px; } 
.header-nav .nav-profile img { max-height: 36px; max-width: 36px; }
.header-nav .profile .dropdown-item { font-size: 14px; padding: 10px 15px; transition: 0.3s; }

.header-nav .profile .dropdown-item:hover .nav-text, .header-nav .profile .dropdown-item:hover .nav-icon { color: var(--white); }
.header-nav .profile .dropdown-item i { margin-right: 10px; font-size: 18px; line-height: 0; }
.dropdown-menu .dropdown-item i { margin-right: 10px; font-size: 18px; line-height: 0; }
.dropdown-menu { border-radius: 4px; padding: 10px 0; animation-name: dropdown-animate; animation-duration: 0.2s; animation-fill-mode: both; border: 0; box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2); }

nav .nav-icon span img { width: 20px; margin-top: -5px; }
#appNavMobile .nav-icon span img { filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(105%) contrast(99%); }


nav .nav-text { color: var(--bs-dropdown-color); }
#appNavMobile .nav-text { color: var(--bs-gray-200); }
#hamburgerAppMenu .nav-text { color: var(--bs-gray-700); }































/*
   ____  __  __        _ _          ___               _            __  ___                          _         
  / __ \|  \/  |___ __| (_)__ _    / _ \ _  _ ___ _ _(_)___ ___   / / | _ \___ ____ __  ___ _ _  __(_)_ _____ 
 / / _` | |\/| / -_) _` | / _` |  | (_) | || / -_) '_| / -_|_-<  / /  |   / -_|_-< '_ \/ _ \ ' \(_-< \ V / -_)
 \ \__,_|_|  |_\___\__,_|_\__,_|   \__\_\\_,_\___|_| |_\___/__/ /_/   |_|_\___/__/ .__/\___/_||_/__/_|\_/\___|
  \____/                                                                         |_|                          */
  
  

/* GENERIC PHONE */	
@media only screen and (min-width: 20px) and (max-width: 767px) {


header { padding: var(--spacing-medium) var(--spacing-medium) 0px var(--spacing-medium); }
header h1 { margin: 40px 0 20px 0px; }
h2 { font-size: 1.6em; }

header .flex-container { flex-direction: column;     align-items: center; }
header .flex-item.flex-15 { width: 100%; }
header .flex-item { text-align: center; }
header .flex-item #logo { text-align: center; }
header .flex-item #logo img { text-align: center; max-height: 100%; max-width: 70%; }

.saas-maincontent { padding: var(--spacing-small); display: block; max-width: 100%; width: 100%; }
.saas-maincontent-flex { flex-direction: column; }

.toolbar { flex-direction: column; align-items: flex-start; width: 100%; }
.toolbar.live-archive-addnew { flex-direction: row; justify-content: space-evenly; }

.oobaEditable { width: 100%; }


/* admin Menu */
#adminMenu { display: flex; flex-direction: column; position: absolute; top: 10px; right: 0; width: auto; width: 100px; }
#adminMenu ul li a span.menuItemIcon img { filter: invert(49%) sepia(5%) saturate(763%) hue-rotate(167deg) brightness(89%) contrast(88%); width: 16px; }
#adminMenu ul li.active a span.menuItemIcon img { filter: invert(9%) sepia(96%) saturate(6425%) hue-rotate(6deg) brightness(98%) contrast(114%);  }
#adminMenuButton { margin: 0; }

/* appNavigation */
body>.flex-container .flex-15 { flex-basis: 96% !important; margin: auto; }
#appNavigation .navigation-main-content { padding: var(--spacing-small) var(--spacing-medium); }
#appNavigation .navigation-main-content li {}
#appNavigation .navigation-main-content li a { padding: var(--spacing-medium) 0; display: block; border-bottom: 1px solid var(--primary-light); color: var(--bs-gray-500); }
#appNavigation .navigation-main-content li a span.nav-icon { margin: 0 var(--spacing-small);  }


/* accountNavigation */
body>.flex-container .flex-15 { flex-basis: 96% !important; margin: auto; }
#adminAccountSubmenu .navigation-main-content { padding: var(--spacing-small) var(--spacing-medium); }
#adminAccountSubmenu .navigation-main-content li {}
#adminAccountSubmenu .navigation-main-content li a { padding: var(--spacing-medium) 0; display: block; border-bottom: 1px solid var(--primary-light); color: var(--bs-gray-500); }
#adminAccountSubmenu .navigation-main-content li a span.nav-icon { margin: 0 var(--spacing-small);  }



/* jQuery UI*/
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: var(--spacing-small) var(--spacing-medium); }
.ui-tabs .ui-tabs-panel { padding: var(--spacing-small) var(--spacing-small);  }
.tabs.ui-tabs.ui-corner-all.ui-widget.ui-widget-content { } 

/* Tabulator */
.ooba-tabulator-table { margin: 0; }
.ooba-tabulator-table-holdingbox { width: 97vw; }
.ooba-tabulator-table .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { font-size: 0.8em; }
.ooba-tabulator-table.tabulator .tabulator-row .tabulator-cell { font-size: 0.85em; padding: var(--spacing-smallest) var(--spacing-smaller) var(--spacing-smallest) var(--spacing-smaller); line-height: var(--spacing-large); height: 27px !important; }

 
}






@media only screen and (min-width: 76var(--spacing-small)) and (max-width: 1023px) {
header .flex-container { justify-content: space-between; }
header { padding: var(--spacing-small); }
header h1 { font-size: 1.8em; margin: 10px 0 0 var(--spacing-medium); }
header #logo img {  max-height: var(--spacing-larger);  margin: var(--spacing-medium) 0 0 0; max-width: 120px; } 
header .flex-15 { flex-basis: 14% !important; }
header .flex-20 { flex-basis: 19% !important; }
header .flex-60 { flex-basis: 54% !important; }
header .flex-25 { flex-basis: 24% !important; }

.saas-appcontent .flex-item.flex-85 { flex-basis: 82% !important; }
.saas-appcontent .flex-item.flex-15 { flex-basis: 14% !important; }



#appNavigation ul li { position: relative;  margin: 0 0 0 0; } 
#appNavigation ul li a { padding: var(--spacing-medium) var(--spacing-medium); font-size: 8pt; }
.saas-maincontent { padding: var(--spacing-small); }
.toolbar { padding: var(--spacing-small); }

/* Generic Navigation */
nav .nav-icon { margin-right: var(--spacing-small); }


/* jQuery UX */
.ui-tabs .ui-tabs-panel { padding: var(--spacing-medium) var(--spacing-smaller); }
.tabs.ui-tabs.ui-corner-all.ui-widget.ui-widget-content { margin-top: var(--spacing-larger);  }


/* Tabulator */
.ooba-tabulator-table .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { font-size: 0.8em; }
.ooba-tabulator-table.tabulator .tabulator-row .tabulator-cell { font-size: 0.85em;}
.ooba-tabulator-table.tabulator i { font-size: 20px; }

}












 
@media only screen and (min-width: 20px) and (max-width: 320px) {
}


@media only screen and (min-width: 321px) and (max-width: 480px) {

}

@media only screen and (min-width: 481px) and (max-width: 576px) {

}


@media only screen and (min-width: 577px) and (max-width: 767px) {
}


@media only screen and (min-width: 76var(--spacing-small)) and (max-width: 991px) {
	/* Tabulator */
.ooba-tabulator-table { margin: 0; }
.ooba-tabulator-table-holdingbox { width: 97vw; }
}


@media only screen and (min-width: 99var(--spacing-smallest)) and (max-width: 1023px) {



}



@media only screen and (min-width: 10var(--spacing-large)) and (max-width: 1199px) {
header .flex-container { justify-content: space-between; }
header { padding: var(--spacing-small); }
header h1 { font-size: 1.8em; margin: 10px 0 0 var(--spacing-medium); }
header #logo img {  max-height: var(--spacing-larger);  margin: var(--spacing-medium) 0 0 0; max-width: 120px; } 
header .flex-15 { flex-basis: 14% !important; }
header .flex-20 { flex-basis: 19% !important; }
header .flex-60 { flex-basis: 54% !important; }
header .flex-25 { flex-basis: 24% !important; }

.saas-appcontent .flex-item.flex-85 { flex-basis: 84% !important; }
.saas-appcontent .flex-item.flex-15 { flex-basis: 14% !important; }



#appNavigation ul li { position: relative;  margin: 0 0 0 0; } 
#appNavigation ul li a { padding: var(--spacing-medium) var(--spacing-medium); font-size: 8pt; }
.saas-maincontent { padding: var(--spacing-small); }
.toolbar { padding: var(--spacing-small); }

/* Generic Navigation */
nav .nav-icon { margin-right: var(--spacing-small); }


/* jQuery UX */
.ui-tabs .ui-tabs-panel { padding: var(--spacing-medium) var(--spacing-medium); }
.tabs.ui-tabs.ui-corner-all.ui-widget.ui-widget-content { margin-top: var(--spacing-larger);  }


/* Tabulator */
.ooba-tabulator-table .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { font-size: 0.8em; }
.ooba-tabulator-table.tabulator .tabulator-row .tabulator-cell { font-size: 0.85em;}
.ooba-tabulator-table.tabulator i { font-size: 20px; }
}


@media only screen and (min-width: 1200px) and (max-width: 1439px) {

}


@media only screen and (min-width: 1440px) and (max-width: 1799px) {
}