@import "https://fonts.googleapis.com/css?family=Exo+2:400,700|Montserrat:400,700|PT+Sans:400,700";


/* START <Chunk Web/Main/App @Extend .css from ./Opt/AppStruct/Web/Main/App@Extend.css[1:112]> AT DEPTH 0 */
/*
vim:fileencoding=utf-8:ts=2:sw=2:expandtab
*/
/* ********************* UI Notifier ********************* */


div.appstruct-ui-notifier {
  position: fixed;
  left: 30%;
  top: 0;
  right: 30%;
  margin: 0 auto;
  text-align: center;
  z-index: 2000; /* In excess of Bootstrap modal backdrop */
  display: none;
}
div.appstruct-ui-notifier > div {
  padding: 5px;
  display: inline-block;
  background: #fff1a8;
  color: #000000;
  opacity: 0;
  /* IE */
  filter: alpha(opacity = 0);
}



/*********************************************************************************************************************/ 
/* Extensions and overrides to bootstrap css */

html,body{
    height: 100%
}

.highlight {background-color: #FFFBCC;}

.alert.alert-xs {padding: 2px; }
.inline-auto {display: inline-block; width: auto;}
.inline-top {display: inline-block; vertical-align: top; margin-top: 0; margin-bottom: 0; }
.inline-middle {display: inline-block; vertical-align: middle; margin-top: 0; margin-bottom: 0; }
.inline-bottom {display: inline-block; vertical-align: bottom; margin-top: 0; margin-bottom: 0; }
.margin-right-15 {margin-right: 15px;}

.btn.btn-slim {padding-top: 2px; padding-bottom: 2px;}

.form-control {
  color: #000;
}


.panel.panel-clear {
  background-color: transparent;
}

.panel.panel-groove {
  border: 2px groove white;
}

.panel.panel-xs > .panel-heading{
  padding: 3px 15px;
}
.panel.panel-xs > .panel-footer{
  padding: 3px 15px;
}


/*********************************************************************************************************************/ 
/* cool-box style */


div.cool-box{
  border: 1px solid #d2d2d2;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  background-color:#eee;
  padding:3px;
  width:auto;
  margin-bottom:20px;
}
div.cool-box > div {
  height:100%;
  padding: 10px;
}

div.cool-box-grey > div {
  background: #f4f4f4; /* Old browsers */
  background: -moz-linear-gradient(top,  #f4f4f4 0%, #f4f4f4 12%, #f5f5f5 25%, #f6f6f6 33%, #f7f7f7 41%, #f8f8f8 49%, #f9f9f9 58%, #fafafa 69%, #fcfcfc 83%, #fefefe 94%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(12%,#f4f4f4), color-stop(25%,#f5f5f5), color-stop(33%,#f6f6f6), color-stop(41%,#f7f7f7), color-stop(49%,#f8f8f8), color-stop(58%,#f9f9f9), color-stop(69%,#fafafa), color-stop(83%,#fcfcfc), color-stop(94%,#fefefe)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f4f4f4 0%,#f4f4f4 12%,#f5f5f5 25%,#f6f6f6 33%,#f7f7f7 41%,#f8f8f8 49%,#f9f9f9 58%,#fafafa 69%,#fcfcfc 83%,#fefefe 94%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f4f4f4 0%,#f4f4f4 12%,#f5f5f5 25%,#f6f6f6 33%,#f7f7f7 41%,#f8f8f8 49%,#f9f9f9 58%,#fafafa 69%,#fcfcfc 83%,#fefefe 94%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f4f4f4 0%,#f4f4f4 12%,#f5f5f5 25%,#f6f6f6 33%,#f7f7f7 41%,#f8f8f8 49%,#f9f9f9 58%,#fafafa 69%,#fcfcfc 83%,#fefefe 94%); /* IE10+ */
  background: linear-gradient(to bottom,  #f4f4f4 0%,#f4f4f4 12%,#f5f5f5 25%,#f6f6f6 33%,#f7f7f7 41%,#f8f8f8 49%,#f9f9f9 58%,#fafafa 69%,#fcfcfc 83%,#fefefe 94%); /* W3C */

}


/*********************************************************************************************************************/ 
/* UI correction related to App.RefreshModalStack implementation (see Opt/AppStruct/Web/Main/App@Extend.js) to move select2 open container on top of the modal */
.select2-container--open {
    z-index: 9999;
}


.btn-xs {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* END <Chunk Web/Main/App @Extend .css from ./Opt/AppStruct/Web/Main/App@Extend.css[1:112]> AT DEPTH 0 */
/* START <Chunk Web/Main/App @Extend .css from ./Opt/ACRM/Web/Main/App@Extend.css[1:1039]> AT DEPTH 0 */
/*
vim:fileencoding=utf-8:ts=2:sw=2:expandtab

**@ ImportGoogleFonts:
**@   "Exo 2": [400, 700]
**@   "Montserrat": [400,700]
**@   "PT Sans": [400, 700]
**@
 */


html, body{
  height: 100%;
  margin: 0;
  font-family: 'Montserrat';
}


/* Video JS Playback Speed background was transparent */
ul.vjs-menu-content {
  background-color: black !important;
  border: 2px solid #999;
}

#Content.centerbox{
  margin: 10pt auto;
  width: 1320px;
}

@media (max-width: 550px){
  #Content.centerbox{
    width: 100%;
  }
}


/* 
Flexbox is used here to create a sticky footer.
This allows us to avoid a fixed height footer.
*/

#bodydiv{
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.selected > a {
  font-weight: bold;
}

table.table.table-smaller {
  font-size: 80%;
}

table.table.table-larger {
  font-size: 125%;
}

table.no-margin{
	margin-bottom: 0;
}

a code {
  color: blue;
}

div.body-wrapper{
	flex: 1 0 auto;
}

#Footer{
	flex-shrink: 0;
  background-color: #222;
  color: #fff;
}

#Footer .copyright{
	padding: 15px 0;
}

/* Use for IDs, don't like red look */
code {
  color: black;
}

.inline-middle{
  display: inline-block;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 0;
}

.inline-bottom{
  display: inline-block;
  vertical-align: bottom;
  margin-top: 0;
  margin-bottom: 0;
}

.btn.btn-slim {
  padding-bottom: 2px;
  padding-top: 2px;
}

div.header-bar{
  background-color: white;
  padding: 15px 0;
  box-shadow: inset 0 -6px 9px -7px rgba(0, 0, 0, 0.5);
  display: none;
}

div.header-bar h1{
  margin: 0;
  font-size: 20pt;
}

a{
  color: #3097d1;
  text-decoration: none;
}
a:hover,
a:focus{
  color: #216a94;
  text-decoration: underline;
}
a:focus{
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

/*************************************************************************************************/
/* Nav3 Styles */

#Nav3{
  margin-top: -20px;
  margin-bottom: 20px;
}

#Nav3 .tabpage-tab-background{
  background-color: #33475b;
}

#Nav3 .tabpage-title{
  font-size: 13pt;
  margin: 10px 0;
  color: white;
  display: inline-block;
  font-weight: normal;
}

#Nav3 .tabpage-tabs{
  padding-left: 0px;
  font-size: 0px;
  margin-bottom: 0px;
  margin-top: 5px;
  display: inline-block;
}

#Nav3 .tabpage-tabs li{
  list-style-type: none;
  font-size: 11pt;
  display: inline-block;
  background-color: rgb(231, 234, 234);
  padding: 8px;
  margin: 0px 2px;
  box-shadow: inset 0 -6px 9px -7px rgba(0, 0, 0, 0.5);
}

#Nav3 .tabpage-tabs li.selected{
  background-color: white;
  box-shadow: none;
  font-weight: bold;
}

#Nav3 .tabpage-tabs li.selected a{
  color: #3097D1;
}

#Nav3 .tabpage-tabs li a{
  color: #000;
  text-decoration: none;
}

#Nav3 .tabpage-tabs li span{
  color: #999;
  text-decoration: none;
}

#Nav3_Buttons > div.btn-group{
  margin-left: 3px;
}

#Nav3_Buttons > a{
  margin-left: 3px;
}


#Nav3_Buttons .dropdown-toggle span.caret{
  display: none;
}

#Nav3_HTML{
  font-size: 0;
}

/*************************************************************************************************/
/* Navbar Styles */

#Primary{
  border-radius: 0;
  border: none;
}

#Primary .page-title{
  display: inline-block;
  margin: 0;
  vertical-align: middle;
  color: #fff;
  font-size: 14pt;
  padding: 10px 0;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 767px){
  #Primary .page-title{
    display: none;
  }
}

/* Hide navbar-brand by default */
#Primary .navbar-brand{
  display: none;
  padding: 0 15px;
}

#Primary .navbar-brand img{
  height: 100%;
  width: auto;
  padding: 5px 0;
  display: inline-block;
}

#Primary .navbar-inverse{
  border-color: transparent;
}

#Primary .navbar-inverse .navbar-nav > li > a{
  color: #fff;
}

#Primary .navbar-inverse .navbar-nav > .open > a,
#Primary .navbar-inverse .navbar-nav > .open > a:focus,
#Primary .navbar-inverse .navbar-nav > .open > a:hover{
  background-color: transparent;
}

#Primary nav .dropdown-menu{
  min-width: 260px;
}

/* Background color on menu items */
#Primary .navbar .navbar-nav li a{
  background-color: #444;
}

#Primary .navbar .navbar-nav li a:hover{
  background-color: rgba(68, 68, 68, 0.4);
}

@media (min-width: 768px){
  #Primary .navbar-nav > li > a{
    padding: 10px;
    margin-top: 5px;
    margin-right: 3px;
  }
  #Primary .navbar-nav.navbar-right > li:last-child > a{
    margin-right: 0;
  }
}

#Primary .navbar .navbar-nav li.dropdown ul li a,
#Primary .navbar .navbar-nav li.nav-adminicon .popover .popover-content a,
#Primary .navbar .navbar-nav li.dropdown.username ul li a{
  background-color: transparent;
}

#Primary .navbar .navbar-nav li.dropdown ul li a:hover,
#Primary .navbar .navbar-nav li.dropdown.username ul li a:hover{
  background-color: #f5f5f5;
}

#Primary .navbar .navbar-nav li.nav-adminicon .popover .popover-content a:hover{
  background-color: transparent;
}

/* Images in the menu bar */
#Primary .nav > li > a > img{
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 30px;
  height: 30px;
  object-fit: cover;
}

#Primary .navbar-right > .username > a > img{
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0;
}

#Primary .navbar-right > .username > a > span > br,
#Primary .navbar-right > .username > a > p > br{
  display: none;
}

#Primary .navbar-nav > li > a > span,
#Primary .navbar-right > .username > a > span{
  vertical-align: middle;
  display: inline-block;
}

#Primary .navbar-right > .username > a > span,
#Primary .navbar-right > .username > a > p{
  margin: 0px 0px 0px 10px;
}

#Primary ul.dropdown-menu{
  overflow: auto;
}

#Primary .dropdown-menu > li > span{
  padding: 3px 20px;
  display: inline-block;
}

#Primary ul.dropdown-menu li.disabled a h4,
#Primary ul.dropdown-menu li.disabled a p {
  color: #A1A1A1;
}

#Primary ul.dropdown-menu li.disabled a[href] {
  cursor: pointer;
}

#Primary ul.dropdown-menu p{
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-break: break-word;
  min-width: 300px;
}

#Primary .username .dropdown-menu-limit-height li:last-child{
  border-top: 1px solid #ddd;
}

@media (max-width: 767px){
  #Primary .navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
  #Primary .navbar-inverse .navbar-nav .open .dropdown-menu > li > span{
    color: white;
  }
  #Primary .dropdown-menu > li > span{
    padding: 5px 15px 5px 25px;
  }
  #Primary .username .dropdown-menu-limit-height li:last-child{
    border-top: none;
  }
}

/* sm and xs - also where bootstrap converts the menu to a compact size */
@media (max-width: 767px){
  
  /* Display the navbar branding */
  #Primary .navbar-brand{
    display: block;
  }
  
}


/*************************************************************************************************/
/* User Tools */

#Primary .navbar-right > .user-tools > ul{
  padding-left: 0;
}

#Primary .navbar-right > .user-tools > ul > .nav-adminicon{
  list-style-type: none;
}

#Primary .navbar-right > .user-tools > ul > .nav-adminicon > a{
  color: #fff;
  text-decoration: none;
  border: 0;
  outline: none;
  padding: 15px;
  display: block;
}

@media (min-width: 768px){
  #Primary .navbar-right > .user-tools > ul > .nav-adminicon > a{
    padding: 10px;
    margin: 5px 3px;
  }
}

@media (max-width: 768px){
  #Primary .navbar-right > .user-tools > ul > .nav-adminicon > a i{
    width: 20px;
    text-align: center;
    margin-right: 5px;
  }
}

#Primary .navbar-right > .user-tools > ul > .nav-adminicon > a > span{
  display: inline-block;
  vertical-align: middle;
}

#Primary .navbar-right > .user-tools > ul > .nav-adminicon > a > span > br{
  display: none;
}

/*************************************************************************************************/
/* Admin Tools Dropdown */

#Primary li.admin-tools > ul.dropdown-menu{
  min-width: 900px !important; 
  padding: 15px; 
  border-radius: 4px;
	background-image: none;
	background-color: white;
}

#Primary li.admin-tools > ul.dropdown-menu > li.heading{
  padding: 8px 14px; 
  margin: -15px -15px 15px -15px; 
  background-color: #f7f7f7; 
  border: 1px solid #ebebeb; 
  border-radius: 5px 5px 0 0;
}

@media (max-width: 767px){
	#Primary li.admin-tools > ul.dropdown-menu,
	#Primary li.admin-tools > ul.dropdown-menu > li.heading{
	  border-radius: 0;
	}
}

#Primary li.admin-tools > ul.dropdown-menu > li{
	background-image: none;
	background-color: transparent;
	font-family: verdana, sans-serif;
}

#Primary li.admin-tools > ul.dropdown-menu > li.heading h4,
#Primary li.admin-tools > ul.dropdown-menu > li.heading h4 > a{
  margin: 0;
  font-weight: normal;
  font-size: 12pt;
	font-family: verdana, sans-serif;
}

#Primary li.admin-tools > ul.dropdown-menu > li.heading h4 > a{
  text-decoration: none;
  color: #00e; 
}

#Primary li.admin-tools > ul.dropdown-menu > li.heading h4 > a:hover{
  text-decoration: underline;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-quick-links{
  text-align: center; 
  border-bottom: 1px solid #ccc; 
  padding: 5px 0;
  margin-bottom: 10px;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-quick-links > a{
  text-decoration: none;
  color: #00c;
  font-size: 12pt;
	font-weight: normal;
  font-family: verdana, sans-serif;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-quick-links > a:hover{
  text-decoration: underline;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-menus > dl{
  display: inline-block;
  vertical-align: top;
  width: 210px;
  font-size: 12pt;
  font-family: verdana, sans-serif;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-menus > dl > dt{
  font-size: 125%;
  
  /* Re-overrider */
  font-size: 12pt;
  font-family: verdana, sans-serif;
  line-height: 1;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-menus > dl > dd > a{
  text-decoration: none;
  color: #00c;
  
  /* Re-overrider */
  font-size: 12pt;
	font-weight: normal;
  font-family: verdana, sans-serif;
  display: inline;
  padding: 0;
  line-height: 1;
}

#Primary li.admin-tools > ul.dropdown-menu > li > div.admin-tools-menus > dl > dd > a:hover{
  text-decoration: underline;
  color: #00c;
  
  /* Re-overrider */
  font-size: 12pt;
  font-family: verdana, sans-serif;
  display: inline;
  padding: 0;
	background-color: transparent;
}

@media (max-width: 992px){
  #Primary li.admin-tools > ul.dropdown-menu{
    min-width: 768px !important; 
  }
}

@media (min-width: 768px){
}

@media (max-width: 767px){
  #Primary li.admin-tools > ul.dropdown-menu{
    min-width: 100% !important; 
  }
}

#Primary div.admin-tools-content {
  display: flex;
  flex-wrap: wrap;
  margin: -10pt;
  justify-content: space-between;
}

#Primary div.admin-tools-content > dl {
  margin: 10pt;
}


/*************************************************************************************************/
/* Nav Section on Account Screens */

#nav-section{
  margin: 0 0 15px 0;
  font-family: 'Exo 2';
  text-align: center;
  padding: 5pt;
  background-color: #f5f5f5;
  border: 1px solid #aaa;
  border-radius: 10pt;
	position: relative;
}

#nav-section > div{
	position: absolute;
	right: 5pt;
}

#nav-section h1{
  font-weight: normal;
	font-size: 36pt;
	letter-spacing: 3pt;
	margin-top: 5px;
}

#nav-section h1 > span{
  display: block;
  font-size: 20pt;
}

#nav-section navbar{
	margin: 10px 0;
  background-color: transparent;
  border: none;
	min-height: auto;
}

/*
#nav-section .navbar-nav{
	float: none;
	display: inline-block;
	vertical-align: middle;
}
*/

#nav-section .navbar-brand{
	display: none;
}

#nav-section .navbar .navbar-nav li a{
  color: #3097d1;
  font-family: 'Exo 2';
  padding: 2pt 5pt;
  font-weight: normal;
  letter-spacing: 1pt;
  font-size: 13pt;
	background-color: transparent;
	margin: 0;
}

#nav-section .navbar .navbar-nav li .dropdown-menu > li > a{
	padding: 3px 20px;
}

#nav-section .navbar .navbar-nav li a:hover,
#nav-section .navbar .navbar-nav li a:focus{
	background-color: transparent;
}

#nav-section .navbar .navbar-nav li a.selected{
  background-color: #ffff78;
	border-radius: 5px;
	font-weight: bold;
}

@media (max-width: 767px){
	#nav-section h1 > span{
		display: none;
	}
	#nav-section .navbar-brand{
		display: block;
		padding: 15px 15px;
	}
	#nav-section nav.navbar{
		margin: 0;
		border-top: 1px solid #e7e7e7;
	}
	#nav-section .navbar-collapse{
		text-align: left;
	}
	#nav-section .navbar .navbar-nav li a{
		padding: 10px 15px;
	}
	#nav-section .navbar .navbar-nav li a.selected{
		background-color: transparent;
		border-radius: 0;
		font-weight: normal;
	}
	/* Reset to default padding */ 
	#nav-section .navbar .navbar-nav li .dropdown-menu > li > a{
		padding: 5px 15px 5px 25px;
	}
}

/*************************************************************************************************/
/* Theme Styles */


.alerts .alert code {
  color: black;
}


/*********************************************************************************************************************/ 
/* Sortable UI */
body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
  width: 200px;
}

/* Sort handle */
.sortable-handle {
  cursor: move;
  /* cursor: grab; */
}

/*********************************************************************************************************************/ 
/* File Viewer */
img.ShowFileViewer {
  cursor: pointer;
}

/*********************************************************************************************************************/ 
/* flex container */
.acrm-flex-container {
  display: flex;
  justify-content: space-evenly; /* flex-start | flex-end | center | space-between | space-around */
}

.acrm-flex-item {
  padding: 0.5em;
  /*flex-grow: 1;  */
  flex: 1 1 auto;
}
.acrm-flex-item-4column {
  flex-basis: 20%;
}

.acrm-flex-item-3column {
  flex-basis: 30%;
}


.acrm-flex-item-50split {
  flex-basis: 45%;
}


.acrm-flex-item:not(:last-child) {
  margin-right: 0.5em;
}


/* Medium screens */
@media all and (max-width: 800px) {
  .acrm-flex-container {
    /* When on medium sized screens, we center it by evenly distributing empty space around items */
    /* justify-content: space-around; */
    /* On medium screens, we are no longer using row direction but column */
    flex-direction: column;
  }
  .acrm-flex-item:not(:last-child) {
    margin-right: 0;
  }
}

/* Small screens */
@media all and (max-width: 500px) {
  .acrm-flex-container {
    /* On small screens, we are no longer using row direction but column */
    flex-direction: column;
  }
  .acrm-flex-item:not(:last-child) {
    margin-right: 0;
  }
}


/* IO */
div.io-form-group.io-error > label{
  color: #f00;  
}

div.io-form-group.io-error input {
  background-color: #ebccd1;  
  border-color: red;
}

.io-error {
  background-color: #ebccd1;  
}

i.fa.io-fa-required {
  color: #ccc;
}

input.io-currency {
  text-align: right;
}
input.io-decimal {
  text-align: center;
}

.io-create-password-container .io-password-status .label{
  display: inline-block;
  padding: .45em;
  font-size: 13pt;
  margin-top: 1pt;
}

.io-ckeditor-body {
  background-image: none;
  background-color: white;
}

.io-color {  
  width: 25px;
  padding: 0px 2px;
  height: 23px;
}


/* EOF IO */

/*********************************************************************************************************************/ 
/* Left Menu Template */

.x-leftmenutemplate-parent{
  display: flex;
}

@media (max-width: 991px){
  .x-leftmenutemplate-parent{
    flex-direction: column;
  }
}

.x-leftmenutemplate-parent > .x-left-child{
  flex-basis: 25%;
}

.x-leftmenutemplate-parent > .x-left-child > .panel{
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
  box-shadow: none;
}

@media (max-width: 991px){
  .x-leftmenutemplate-parent > .x-left-child > .panel{
    border-radius: 4px;
    margin-bottom: 1em;
    border-right: 1pt solid #ddd;
  }
}

.x-leftmenutemplate-parent > .x-right-child{
  flex-basis: 75%;
  background-color: #fff;
  padding: 15px;
  border-top: 1pt solid #ddd;
  border-right: 1pt solid #ddd;
  border-bottom: 1pt solid #ddd;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

@media (max-width: 991px){
  .x-leftmenutemplate-parent > .x-right-child{
    border: 1pt solid #ddd;
    border-radius: 4px;
  }
}

table.content-leftmenutemplate-menu {
  width: 100%;
}

table.content-leftmenutemplate-menu tr.selected td {
  background-color: #ffffff;
}

table.content-leftmenutemplate-menu tr:hover td {
  background-color: #ffffff;
}

table.content-leftmenutemplate-menu tr td {
  border-bottom: 1pt solid #dddddd;
  background-color: #eeeeee;
}

table.content-leftmenutemplate-menu > tbody > tr:last-child td{
  border-bottom: none;
}

table.content-leftmenutemplate-menu.left-menu-widget-imageonly tr td.content-leftmenutemplate-icon p.admin-btns{
  margin-bottom: 0;
  margin-top: 10px;
  text-align: center;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr td.content-leftmenutemplate-icon {
  width: 60px;
  padding: 15px 10px;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact > tbody > tr:first-child > td:first-child{
  border-top-left-radius: 4px;
}

@media (max-width: 991px){
  table.content-leftmenutemplate-menu.left-menu-widget-compact > tbody > tr:first-child > td:last-child{
    border-top-right-radius: 4px;
  }
}

table.content-leftmenutemplate-menu.left-menu-widget-compact > tbody > tr:last-child > td:first-child{
  border-bottom-left-radius: 4px;
}

@media (max-width: 991px){
  table.content-leftmenutemplate-menu.left-menu-widget-compact > tbody > tr:last-child > td:last-child{
    border-bottom-right-radius: 4px;
  }
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr td.content-leftmenutemplate-link h5{
  font-size: 12pt;
  text-decoration: underline;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr.selected td.content-leftmenutemplate-link h5{
  font-size: 14pt;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr.selected td.content-leftmenutemplate-link p{
  font-size: 12pt;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr td.content-leftmenutemplate-icon img{
  display: block;
  max-width: 100%;
  height: auto;
}

table.content-leftmenutemplate-menu tr td.content-leftmenutemplate-link {
  padding: 15px 10px;
  border-right: 1pt solid #ddd;
}

@media (max-width: 991px){
  table.content-leftmenutemplate-menu tr td.content-leftmenutemplate-link{
    border-right: none;
  }
}

@media (min-width: 992px){  
  table.content-leftmenutemplate-menu tr.selected td.content-leftmenutemplate-link{
    border-right: 0;
  }
}

table.content-leftmenutemplate-menu tr td.content-leftmenutemplate-link h5 {
  margin: 0;
  line-height: 1.3;
  font-family: 'PT Sans';
}

table.content-leftmenutemplate-menu tr td.content-leftmenutemplate-link p {
  margin: 0;
  color: black;
  line-height: 1.3;
}

table.content-leftmenutemplate-menu.left-menu-widget-large tr .content-leftmenutemplate-icon {
  width: auto;
  padding: 10px;
}

table.content-leftmenutemplate-menu.left-menu-widget-large tr .content-leftmenutemplate-icon img{
  width: 60px;
  height: auto;
}

table.content-leftmenutemplate-menu.left-menu-widget-compact tr .content-leftmenutemplate-link a,
table.content-leftmenutemplate-menu.left-menu-widget-large tr .content-leftmenutemplate-link a{
  word-break: break-word;
}

table.content-leftmenutemplate-menu.left-menu-widget-large tr .content-leftmenutemplate-link a h5{
  font-size: 14pt;
}

table.content-leftmenutemplate-menu.left-menu-widget-large tr .content-leftmenutemplate-link a p{
  display: none;
}

table.content-leftmenutemplate-menu.left-menu-widget-imageonly tr .content-leftmenutemplate-icon{
  width: 100%;
  text-align: center;
  padding: 10px;
}

table.content-leftmenutemplate-menu.left-menu-widget-imageonly tr .content-leftmenutemplate-icon img{
  width: 60px;
  height: auto;
}

table.content-leftmenutemplate-menu.left-menu-widget-imageonly tr .content-leftmenutemplate-link{
  display: none;
}

/* Disabled styles */

table.content-leftmenutemplate-menu tr.disabled td.content-leftmenutemplate-link h5 {
  color: #999;
}

table.content-leftmenutemplate-menu tr.disabled td.content-leftmenutemplate-link p {
  color: #999;
}

/*********************************************************************************************************************/









/*************************************************************************************************/
/* Styles for the heading of an area */


/* this was added and should only exist when replacing .well.well-heading because .card is not normally combined with .card-header */
div.card.card-header{
  padding: 1em;
  text-align: center;
  margin-bottom: 1em;
}

/*
Selects the left bar
Used to be: div.well.well-heading > h1
*/
div.card.card-header > h1
{
  margin: 0 0 .5em 0;
  font-size: 20pt;
}

/* END <Chunk Web/Main/App @Extend .css from ./Opt/ACRM/Web/Main/App@Extend.css[1:1039]> AT DEPTH 0 */
/* START <Chunk Web/Main/App @Extend .css from ./Project/BigRedMedia/BRV/Web/Main/App@Extend.css[1:626]> AT DEPTH 0 */
.vm4-location-asset-icon {
  vertical-align: middle!important;
}

.vm4-location-asset-icon > i {
  font-size: large;
}

.vm4-location-asset-icon > i.fa-mobile {
  font-size: x-large;
  margin-top: -0.3rem;
}

.vm4-location-asset-icon > i:not(:first-child) {
  margin-left: 7pt;
}

.vm4-location-asset-icon > i.x-inactive{
  color: #aaaaaa;
}



/*
 * Helper class to style tooltip panels
 */

.vm4-helper-block {
  border-radius: 10px;
  padding: 1.5rem;
  background-color: #fcffdf;
  color: rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 5px rgb(0 0 0 / 25%), 0px 2px 2px rgb(0 0 0 / 12%), 0px -1px 2px rgb(0 0 0 / 20%);
  word-break: break-word;
}

form .row .vm4-helper-block {
  margin-top: 34px;
  margin-bottom: 20px;
}

.vm4-helper-block:before {
  font-family: FontAwesome;
  content: "\f0eb";
  padding-right: 1rem;
}



/*
 * Add separators to panel sub-menu items
 */

#nav-section > .navbar > .navbar-collapse > .navbar-nav > li {
  display: flex;
}

#nav-section > .navbar > .navbar-collapse > .navbar-nav > li:before {
  font-family: FontAwesome;
  content: "\f111";
  padding: .75rem .5rem 0;
  font-size: 10px;
}

#nav-section > .navbar > .navbar-collapse > .navbar-nav > li:first-child:before {
  content: "";
}


/*
 * Generic style conversion for sorting pages.
 */
.brv-sort-list {
  font-size: 200%;
  list-style: none;
  padding: 0;
}

.brv-sort-list > li.btn {
  margin-bottom: 1rem;
  white-space: normal;
  display: flex;
  text-align: left;
  cursor: move;
}

.brv-sort-list > li.btn * {
  pointer-events: none;
}

.brv-sort-list > li.btn > i.fa-sort {
  order: 0;
  align-self: center;
  margin-right: 2rem;
  flex: 0 0 auto;
}


/*
 * Responsive style conversion of:
 *   panel-headings and their action buttons
 *   simple tables (if additional helper class is present on table container)
 *   panel control buttons (if additional helper class is present on control container)
 * `brv-responsive-container` should be applied to the `div.panel.panel-default` container if IsMobile==true.
 */

.brv-responsive-container .panel-heading {
  text-align: center;
}

.brv-responsive-container .panel-heading.clearfix {
  padding-bottom: 2rem;
}

.brv-responsive-container .panel-heading > .pull-left,
.brv-responsive-container .panel-heading > .pull-right {
  float: none !important;
}

.brv-responsive-container .panel-heading > h4 {
  text-align: center;
}

.brv-responsive-container .panel-heading > h4:not(.pull-left) {
  margin-bottom: 0;
}

.brv-responsive-container .panel-heading div.pull-right a,
.brv-responsive-container .panel-heading a.pull-right {
  width: 100%;
}

.brv-responsive-container .panel-heading div.pull-right a.btn-xs,
.brv-responsive-container .panel-heading a.pull-right.btn-xs {
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
}

.brv-responsive-container .panel-heading div.pull-right a:not(:last-child) {
  margin-bottom: 1rem;
}



/*
 * Responsive styles to create striped mobile content list
 * `brv-content-wrapper` should be on the `panel-body` which will contain the list.
 * `x-content-list` should be on the `ul` that is being served on mobile devices.
 * `x-location-list` should be on the `ul` that is being served on mobile devices.
 * `x-location-list` is a variant specifically for location lists.
 */
.brv-content-wrapper {
  padding: 0;
}

.brv-content-wrapper > ul.x-content-list > *,
.brv-content-wrapper > ul.x-widget-list > *,
.brv-content-wrapper > ul.x-location-list > * {
  padding: 0 15px;
}

.brv-content-wrapper ul.x-content-list,
.brv-content-wrapper ul.x-widget-list,
.brv-content-wrapper ul.x-location-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brv-content-wrapper ul.x-content-list h3 {
  margin: 1rem 0 0;
}

.brv-content-wrapper ul.x-content-list li p,
.brv-content-wrapper ul.x-content-list li p a {
  word-break: break-word;
}


.brv-content-wrapper ul.x-content-list li,
.brv-content-wrapper ul.x-location-list li,
.brv-content-wrapper ul.x-widget-list li {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.brv-content-wrapper ul.x-content-list li:nth-child(even),
.brv-content-wrapper ul.x-widget-list li:nth-child(even),
.brv-content-wrapper ul.x-location-list li:nth-child(even) {
  background-color: #eeeeee;
}

.brv-content-wrapper ul.x-content-list li hr {
  margin: 10px 0;
}

.brv-content-wrapper ul.x-content-list li:nth-child(even) hr {
  border-color: #dddddd;
}

.brv-content-wrapper ul.x-content-list li p {
  margin-bottom: 5px;
}

.brv-content-wrapper ul.x-content-list li p:first-child {
  margin-top: 5px;
}

.brv-content-wrapper ul.x-content-list li p:last-child {
  margin-bottom: 0;
}

.brv-content-wrapper ul.x-content-list li .img {
  width: min(20vw, 60px);
  height: min(20vw, 60px);
  background-color: #ccc;
  border: 1px solid #ffffff;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
}

.brv-content-wrapper ul.x-content-list li .img img {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  object-position: center;
}

.brv-content-wrapper ul.x-content-list li:nth-child(even) .img {
  border-color: #dddddd;
}

.brv-content-wrapper ul.x-content-list li a.btn,
.brv-content-wrapper ul.x-location-list li a.btn,
.brv-content-wrapper ul.x-widget-list li a.btn {
  width: 100%;
}

.brv-content-wrapper ul.x-location-list li p {
  margin-bottom: 10px;
}

.brv-content-wrapper ul.x-location-list li img + p:nth-child(2) {
  margin-top: 10px;
}

.brv-content-wrapper ul.x-location-list li a.btn {
  margin-top: 10px;
}

.brv-content-wrapper ul.x-widget-list li {
  display: grid;
  grid-template-areas:
    "icons    content"
	"sponsor  sponsor"
	"controls controls";
  grid-template-columns: 25% auto;
}

.brv-content-wrapper ul.x-widget-list li p {
  margin-bottom: 5px;
}

.brv-content-wrapper ul.x-widget-list li .x-icons {
  grid-area: icons;
  display: flex;
  flex-flow: row wrap;
  align-content: baseline;
}

.brv-content-wrapper ul.x-widget-list li .x-icons p {
  width: 100%;
  margin-bottom: 10px;
}

.brv-content-wrapper ul.x-widget-list li .x-icons div {
  display: inline-block;
  width: 25px;
}

.brv-content-wrapper ul.x-widget-list li .x-content {
  grid-area: content;
}

.brv-content-wrapper ul.x-widget-list li:nth-child(even) .x-content code {
  background-color: #dddddd;
}

.brv-content-wrapper ul.x-widget-list li .x-sponsor-content {
  grid-area: sponsor;
}

.brv-content-wrapper ul.x-widget-list li .x-sponsor-content hr {
  margin: 10px 0;
}

.brv-content-wrapper ul.x-widget-list li:nth-child(even) .x-sponsor-content hr {
  border-color: #dddddd;
}

.brv-content-wrapper ul.x-widget-list li .x-controls {
  grid-area: controls;
  margin-top: 5px;
}

.brv-content-wrapper ul.x-widget-list li .x-controls a.btn:not(:last-child) {
  margin-bottom: 5px;
}


/*
 * Responsive style conversion of location details panel into a columnar flow.
 * .x-location-details' class should be applied to the flex-wrapper surrounding the location details and background image previews.
 */
.brv-responsive-container .x-location-details {
  flex-flow: column nowrap;
}
.brv-responsive-container .x-location-details > div {
  flex: 0 1 auto;
}


/*
 * Responsive style conversion of simple tables into a columnar list of entries.
 * `x-table-conversion` class should be applied directly to the table to be restyled.
 */
.brv-responsive-container table.x-table-conversion {
  margin-bottom: 0;
}
.brv-responsive-container table.x-table-conversion tbody tr {
  word-break: break-word;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.brv-responsive-container table.x-table-conversion tbody tr:not(:last-child) {
  padding-bottom: 1rem;
}
.brv-responsive-container table.x-table-conversion tbody tr th,
.brv-responsive-container table.x-table-conversion tbody tr td {
  padding: 0;
  border: none;
}


/*
 * Use-case provision for chat log display.
 */
.brv-responsive-container table.x-table-conversion.x-chat-log tr:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.brv-responsive-container table.x-table-conversion.x-chat-log tr:not(:first-child) {
  padding-top: 1rem;
}


/*
 * Styles for User Permission Pages
 */
.brv-contact-list {
  overflow-x: auto;
}

.brv-contact-list .x-check {
  color: #999;
}

.brv-contact-list .x-check.x-checked {
  color: #090;
}

.brv-contact-list .x-available-contacts {
  padding: 1rem 0;
}

.brv-contact-list .contact-tile {
  border: 1px solid #CCC;
  margin: 0.2em 0.2em;
  padding: 0.4em 0.4em;
  width: 20%;
  min-width: 300px;
}

.brv-responsive-container .brv-contact-list {
  padding: 2rem 0.5rem;
}

.brv-responsive-container .brv-contact-list .x-event-contacts {
  padding: 0;
}

.brv-responsive-container .brv-contact-list .x-available-contacts .contact-tile,
.brv-responsive-container .brv-contact-list .x-event-contacts .contact-tile {
  min-width: unset;
  width: 100%;
  display: grid;
  margin: 0;
  grid-template-columns: 60px auto;
  grid-template-rows: min-content;
  grid-gap: 0.5rem;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 2px rgba(0, 0, 0, 0.12), 0px 1px 3px rgba(0, 0, 0, 0.2);
}

.brv-responsive-container .brv-contact-list .x-available-contacts .contact-tile:not(:last-child),
.brv-responsive-container .brv-contact-list .x-event-contacts .contact-tile:not(:last-child) {
  margin-bottom: 2rem;
}

.brv-responsive-container .brv-contact-list .x-available-contacts .contact-tile {
  grid-template-areas:
	"thumbnail details"
	"action    action ";
}

.brv-responsive-container .brv-contact-list .x-event-contacts .contact-tile {
  grid-template-areas:
	"thumbnail   details"
	"permissions permissions"
	"action      action";
}

.brv-responsive-container .brv-contact-list .x-event-contacts .contact-tile.sponsor-tile {
  grid-template-areas:
	"thumbnail   details"
	"invitation  invitation"
	"permissions permissions"
	"action      action";
}

.brv-responsive-container .brv-contact-list .x-event-contacts .contact-tile.sponsor-tile.no-contact {
  grid-template-areas:
	"details     details"
	"invitation  invitation"
	"permissions permissions"
	"action      action";
}

.brv-responsive-container .brv-contact-list .x-contact-image {
  grid-area: thumbnail;
}

.brv-responsive-container .brv-contact-list .x-contact-image img {
  height: 60px;
  width: 60px;
}

.brv-responsive-container .brv-contact-list .x-contact-details {
  grid-area: details;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brv-responsive-container .brv-contact-list .x-contact-action {
  grid-area: action;  
}

.brv-responsive-container .brv-contact-list .x-contact-action .btn,
.brv-responsive-container .brv-contact-list .x-contact-action .btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.brv-responsive-container .brv-contact-list .x-available-contacts .x-contact-action .btn {
  color: #3097D1;
  border-color: #3097D1;
}

.brv-responsive-container .brv-contact-list .x-contact-action .btn i,
.brv-responsive-container .brv-contact-list .x-contact-action .btn i {
  margin-right: 1rem;
}

.brv-responsive-container .brv-contact-list .x-contact-permissions {
  grid-area: permissions;  
  list-style: none;
  padding-left: 0;
  margin-bottom: 1rem;
}

.brv-responsive-container .brv-contact-list .x-contact-permissions li.x-check,
.brv-responsive-container .brv-contact-list .x-contact-permissions li a.x-check {
  padding-left: 1rem;
  display: flex;
  align-items: center;
}

.brv-responsive-container .brv-contact-list .x-contact-permissions li.x-check i,
.brv-responsive-container .brv-contact-list .x-contact-permissions li a.x-check i {
  margin-right: 1rem;
}

.brv-responsive-container .brv-contact-list .x-invite-details {
  grid-area: invitation;
  margin-bottom: 1rem;
}

.brv-responsive-container .brv-contact-list .x-invite-details .btn-primary {
  width: 100%;
}


/*
 * Responsive style conversion of panel action buttons into a columnar list off full-width buttons.
 * `x-form-controls class should be applied to a wrapper around the control buttons.
 */
.brv-responsive-container .x-form-controls .btn {
  width: 100%;
  white-space: break-spaces;
}

.brv-responsive-container .x-form-controls .btn:not(:last-child) {
  margin-bottom: 1rem;
}


/*
 * Ensure that input content details can wrap as needed when being displayed responsively.
 */
.brv-responsive-container .form-group {
  word-break: break-word;
}

.brv-responsive-container .form-group .io-fileupload > ul > li {
  width: 100%;
}

.brv-responsive-container .form-group .io-fileupload-name,
.brv-responsive-container .form-group .io-fileupload-size,
.brv-responsive-container .form-group .io-fileupload-links {
  padding-left: 10px !important;
}


/*
 * Responsive Styles for Contact Selection on Permission Screens.
 */
.brv-contact-select .modal-header {
  text-align: center;
}

.brv-contact-select .modal-body table {
  border: 1px solid #eeeeee;
}

.brv-contact-select .modal-body table thead {
  display: none;
}

.brv-contact-select .modal-body table tbody tr {
  display: grid;
  grid-template-areas:
	"thumbnail ."
	"thumbnail ."
	"thumbnail ."
	"action    action ";
  grid-template-columns: 60px auto;
  grid-template-rows: 1.25rem 1.25rem auto auto;
  grid-gap: 0.5rem;
  padding: 1rem 0.5rem;
}

.brv-contact-select .modal-body table tbody tr:nth-child(even) {
  background-color: #eeeeee;
}

.brv-contact-select .modal-body table tbody tr td {
  padding: 0;
  border: none;
}

.brv-contact-select .modal-body table tbody tr td:first-child {
  grid-area: thumbnail;
}

.brv-contact-select .modal-body table tbody tr td:first-child img {
  width: 60px !important;
  height: 60px !important;
}

.brv-contact-select .modal-body table tbody tr td:last-child {
  grid-area: action;
}

.brv-contact-select .modal-body table tbody tr td:last-child a.btn {
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 4px;
}

.brv-contact-select .modal-footer button.btn {
  width: 100%;
  margin: 0 0 1rem;
}

.brv-contact-select .modal-footer button.btn:last-child {
  margin: 0;
}


/* 
 * This correct the alignment issues that come about when trying to align 
 * helper text blocks in a form field row - Bootstrap row and col's
*/
.io-fileupload > ul{
  display: contents!important;
}

.io-fileupload > ul > li{
  display: flex!important;
  align-items: center;
  margin-bottom: 1rem!important;
}



/* END <Chunk Web/Main/App @Extend .css from ./Project/BigRedMedia/BRV/Web/Main/App@Extend.css[1:626]> AT DEPTH 0 */