/*
	1. FONTS
	2. GLOBAL SETTINGS
	3. CONTAINERS (HEADER SIDEBAR FOOTER)
	4. REUSED PAGE ELEMENTS
		4a. CONTENT CARDS
		4b. WEBVIEWER SPECIFIC CONTENT CARDS
		4c. RECIPIENT PANEL
			I. general
			II. profile
			III. groups
			IV. individuals
		4d. LISTS / TABLES
			I. filters
			II. counters
			III. inputs
		4e. ACTION BAR
		4f. UPPER BUTTON BAR
		4g. SEARCH BAR
		4h. PAGING
	5. HEADER
	6. SIDEBAR
	7. FOOTER
	8. INDIVIDUAL PAGE SECTION
		8a. PRODUCT PAGE
		8b. ADD/EDIT MESSAGE PAGE
		8c. ROOM PAGE
		8d. CATEGORY PAGE
		8e. APPLICATION PAGE
		8f. COMMUNICATION PAGE
		8g. USERS OVERVIEW
		8h. HIERARCHY PAGE
	9. LOGIN SECTION
	10. WEBVIEWER
	11. MATERIALIZE ADDED FUNK
	12. SUMOSELECT ADDED FUNK
*/

body .ui-tooltip{
	background: #333333;
	color:white;
	font-size: 14px;
	border: none;
}

/* ===============
   1. FONTS ø
   =============== */

@font-face {
font-family: 'oswald-light';
src: url("/fonts/Oswald-Light.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'oswald-medium';
src: url("/fonts/Oswald-Medium.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'oswald-bold';
src: url("/fonts/Oswald-Bold.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'roboto';
src: url("/fonts/Roboto-Regular.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'Open Sans';
src: url("/fonts/OpenSans-Regular.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'Open Sans Bold';
src: url("/fonts/OpenSans-Bold.ttf")  format('truetype') /* Safari, Android, iOS */
}

@font-face {
font-family: 'Open Sans ExtraBold';
src: url("/fonts/OpenSans-ExtraBold.ttf")  format('truetype') /* Safari, Android, iOS */
}


@charset "utf-8";


/* ===============
   2. GLOBAL SETTINGS
   =============== */

@media print
{    
	.no-print, .no-print *
	{
		display: none !important;
	}
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html,body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	height: 100vh;
	min-height: 100vh;
	font-family: "oswald-light", sans-serif;
	font-size: 15px;
	overflow-y:hidden;
}

a{
	color: rgba(0,0,0,0.87);
}

.inline{
	display: inline;
}

.hidden {
	display: none;
}

.title-text {
	font-size: 21px;
	font-family: "oswald-medium";
}

.subtitle-text {
	font-size: 18px;
	font-family: "oswald-medium";
}

.company-title-text{
	font-size: 30px;
	font-family: "oswald-light";
}

.left {
	float: left;
}

.right {
	float: right;
}

.center {
	text-align: center;
}

.clear {
	clear: both;
}

.clickable {
	cursor: pointer;
}

.clickable:hover {
	text-decoration: none;
}

.clickable-row td{
	cursor: pointer !important;
}

.arrow {
	cursor: default;
}

.hand {
	cursor: move;
	cursor:hand;
	cursor:grab;
	cursor:-moz-grab;
	cursor:-webkit-grab;
}

.grabbing {
  cursor: move;
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

.icon-text--above{
	font-size: 18px;
}

.icon-text--side{
	font-size: 16px;
}

a:link {
	color: #666;
	text-decoration: none;
}

a:visited {
	color: #666;
	text-decoration: none;
}

.infoIcon {
	width: 15px;
	display: inline-block;
	cursor: help;
	content: url(/img/info-icon.svg);
}

.infoIcon>img {
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Connor maybe change this? it's just fighting with materialize. */
h3{
	font-size: 1.4rem !important;
}

/*
a:hover {
	color: #666;
	text-decoration: none;
}

a:active {
	color: #299898;
	text-decoration: none;
}*/

.ssTable th, .ssTable th a{
	font-size: 18px;
	font-family: "oswald-medium";
	font-weight: normal;
	text-transform: uppercase;
	color: #1A1A1A !important;
}

#pageHeaderBar h2{
	display: inline-block;
	font-size: 24px;
	font-family: "oswald-medium";
	font-weight: normal;
	text-transform: uppercase;
	color: #1A1A1A !important;
	margin-bottom: 8px;
}

.list-option.cms-icon {
	padding-top: 0;
    padding-bottom: 0;
}

.list-option i{
	font-size: 2.2em;
}

.list-option .ss-fa-withtext{
	font-size: 1.5em;
    padding-right: 5px;
}

/* attention : This arrow seems... lame, might want to use a mim-font arrow to make this flow better*/
.rightArrow {
	margin: 5px;
	background-image: url('/img/mim_toggleArrowRight.jpg');
}

.downArrow {
	margin: 5px;
	background-image: url('/img/mim_toggleArrowDown.jpg');
}

.opensans{
	font-family: Open Sans;
}

/* ===============
   3. CONTAINERS
   =============== */

#container {
	height: 100%;
	min-height: 100%;
	width: 1200px;
	margin: 0px auto;
	background-color: #FFF;
	box-shadow: 0px 0px 10px #999;
}

#cms-header {
	height: 65px;
    -webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    /*-webkit-transform: translate3d(0,0,0);*/
}   

#cms-header h1 a{
	height:65px;
}

#cms-sidenav {
	width: 200px;
	overflow-y: auto;
    min-height: 600px;
	padding: 0px 0px 0px 0px;
	position:absolute;
	height:100%;
	-webkit-box-shadow: 0px 10px 21px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 21px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 21px 5px rgba(0,0,0,0.5);
    -webkit-transform: translate3d(0,0,0);
    z-index: 2;
    padding-bottom: 150px;
}

#cms-sidenav::-webkit-scrollbar { 
    display: none; 
}

#cms-content {
	width: 1000px;
    height: calc(100% - 95px);
    margin-left: 200px;
    overflow-y: auto;
    font-size: 16px;
    margin-top: -6px;
}

/* ===============
   4. REUSED PAGE ELEMENTS
   =============== */
		/* ---------------
		   4a. CONTENT CARDS
		   --------------- */
			.ss-card-product .downloadFileButton, .ss-card-category .downloadFileButton{
				display: none;
			}

			.ss-card-file .downloadFileButton, .wvShare .downloadFileButton{
			    display:block !important;
			}

			.card-area{
			 	position:relative;
			 	width:100%;
			 	display:block;
				text-align: center;
		   	}

		   	.card-area .back-button{
		   		display: none;
			    position: absolute;
			    cursor: pointer;
			    left: 20px;
			    font-size: 34px;
			    top: 14px;
		   	}

		   	#cms-content .card-area{
		   		top: -25px;
		   	}

		   	#cms-content .card-area .back-button{
		   		color: #333333;
		   	}

		   	
		   	/*Connor fix this at some point?, its fairly meh*/
		   	@media all and (max-width: 1100px) {
		   		.card-segment{
		   			width: 40%;
		   		}
		   	}

		   	@media all and (max-width: 750px) {
		   		.card-segment{
		   			width: 75%;
		   		}
		   	}
		   	/* end meh */

		   	.card-segment{
		   	    pointer-events: all;
			 	width:26%;
			 	display:inline-block;
			 	vertical-align: top;
			 	margin-top: 10px;
			 	/*margin-bottom: 60px;*/
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
		   	}

		   	.wvShare{
		   		pointer-events:none;
		   		padding-left: 19% !important;
		   	}

		   	.ss-share-card-segment{
		   		width:45% !important;
		   	}

		   	@media (max-width: 1100px){
			   	.ss-share-card-segment{
			   		width:60% !important;
			   	}

			   	.wvShare{
			   		padding-left: 5% !important;
			   	}
		   }

		   @media (max-width: 749px){
			   	.ss-share-card-segment{
			   		width:100% !important;
			   	}

			   	.wvShare{
			   		padding-left: 0 !important;
			   	}

			   	.sentByButtonContainer {
				    float: none !important; 
				    margin-top: 0px !important;
				}
		   }

		   	.ss-share-card-segment .ss-card{
		   		/*top: 15px !important;*/
		   	}

		   	#cms-content .card-segment .header{
		   		margin-top:0 !important;
		   	}

		   	#cms-content .card-segment{
		   		margin-top:0 !important;
		   	}

		   	#cms-content .webview-only{
		   		display:none;
		   	}

		   	#cms-content .ss-card-empty{
		   		background-color: transparent;
		   		box-shadow: none;
		   	}

		   	.ss-card-empty div.webview-only{
		   		color:white;
		   		text-align: center;
		   		font-size: 14px;
			    font-family: "Open Sans";
			    line-height: 1em;
		   	}

		   	.card-segment .header{
	   		    font-size: 21px;
			    font-family: "oswald-light";
			    font-weight: 400;
			    text-transform: uppercase;
			    margin: 2px 0;
				cursor:pointer;
				
				white-space: nowrap;
				overflow: hidden;
		   	}

		   	.ss-card{
		   		
		   	}

		   	.ss-card{
			    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			    border-radius: 2px;
			    width: 94%;
			    display: inline-block;
			    text-align: left;
			    position: relative;
			    padding: 12px 0;
		   	}	

		   	.category-card{
		   		margin-bottom: 45px;
		   	}

			.category-card .add-file{
			    margin-left: calc(50% - 20px);
			}

			.add-item{	
			/* CONNOR might have to change this because category cards will use full card in
				webviewer and have just one plus... */
    			margin-left: calc(50% - 85px);
				position:absolute;
				cursor: pointer;
			    margin-top: 7px;
			}

			.card-segment .right-option{
    			margin-left: calc(50%);
			}

			.card-segment .left-option{
				margin-left: calc(50% - 185px);
			}

			#cms-content .card-item-container{
				max-height: 600px;
   		 		overflow: auto;
			}

			#cms-content .card-cat-container{
				max-height: none;
			}

			.add-item-dropdown{
				margin-left: calc(50% - 85px) !important;
   	 			margin-top: -3px !important;
   	 			background: white !important;
   	 			border-radius: 2px !important;
   	 			font-weight: 600 !important;
			}

			.add-item-dropdown {
				width: 200px !important;
			}

			.add-item-dropdown li a {
				color: black !important;
			    font-size: 21px !important;
			    font-family: "oswald-light" !important;
			    font-weight: 300;
			    text-align: center;
			}

			.card-segment .add-item .icon{
				height: 45px;
			    width: 45px;
			    border-radius: 23px;
			    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			    position: absolute;
			    margin-top: -6px;
			}

			.add-item .icon .st0, .add-file .icon .st0{
				fill: #ffffff !important;
			}

			.add-item .title{
			    background: white;
			    width: 150px;
			    border-radius: 2px;
			    text-align: center;
			    padding-bottom: 2px;
			    margin-left: 30px;
			    font-size: 21px;
			    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			    text-transform: lowercase;
    			font-weight: 600;
			}

			.add-file{
				position: absolute;
			}

			.ss-card .add-file-card {
				font-size: 21px;
				font-weight:400;
				margin: 25px 0;
			}

			.category-header{
			    background-color: white;
			    text-align: center;
			    border-radius: 3px;
			    position: absolute;
			    cursor: pointer;
			    box-shadow: 0 0px 7px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			    padding: 1% 5%;
			    margin-top: -30px;
			    margin-left: 15px;
			}

			.category-card .card-item-container {
				overflow-x:hidden;
				max-height: 170px;
			    padding: 5px 0;
			}

			.tally {
			    font-size: 16px;
			    font-weight: 600;
			    position: absolute;
			    margin-top: -36px;
			    margin-left: 90%;
			}


			/* Connor these are not card related... don't do yourself a bamboozle*/
			.profile-selector{
			    font-weight: 300;
			    padding-left: 5px;
			    position: relative;
			    left: 0%; /* this was at 70 not sure what it was doing here before. - Connor*/
			    padding: 3px;
			    font-size: 20px;
			}

			.profile-selector option{
				font-weight: 300;
				font-size: 18px;
				top: 5px;
			}

			/*------ CARD ITEM --*/
			.card-item{
				height: 48px;
				cursor: pointer;
				width:100%;
			}

			.card-item.active .item-options i:hover{
				background-color: #ABABAB;
			}

			.card-item.active:hover .title, .card-item.active:hover .sub-title{
				color: white;
			}

			.card-item .icon{

			}

			.card-item .title{
			    color: white;
			    font-size: 14px;
			    font-family: "Open Sans";
			    line-height: 1em;
			    padding-top: 10px;
			    pointer-events: none;
			}

			.card-item .sub-title{
				color: white;
			    font-style: italic;
			    font-size: 12px;
			    margin-top: -2px;
			    font-family: "Open Sans";
			    opacity: .5;
			}

			.card-item .action{

			}

			.card-item:hover {
				background-color: #ABABAB;
			}

			.card-item:hover .title, .card-item:hover .sub-title{
				color:black;
			    pointer-events: none;
			}

			.card-item .item-options i:hover{
				-webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    -webkit-transform: translate3d(0,0,0);
			}

			.card-item .item-options{
				display:none;
			}

			.card-item:hover .item-options{
				display:inline;
			}

			.card-item .item-options i, .card-item .item-options .sharePlusFileButton {
			    width: 45px;
			    height: 100%;
			    float: right;
			    padding-left: 3px;
			    padding-right: 3px;
			}

			.card-item .item-options i{
				float: right;
			    font-size: 1.6em;
			    color: white;
			    padding-top: 12px;
			    height:48px;
				width:48px;
				text-align: center;
			}

			.card-item .view-icon {
				display:none;
			}

			.card-item .item-icon{
				height: 50px;
			    width: 57px;
			    float: left;
			}

			.card-item .item-icon img {
				padding: 3px;
			    max-height: 50px;
    			max-width: 50px;
				user-drag: none; 
				user-select: none;
				-moz-user-select: none;
				-webkit-user-drag: none;
				-webkit-user-select: none;
				-ms-user-select: none;
				pointer-events: all;
				margin: 0 auto;
			    display: block;
			    z-index: 1; 
			}

			.card-file-container .sub-title{
				display: none;
			}

			#cms-content .zero-cats-toggle{
				cursor: pointer;
			    text-align: center;
			    font-size: 16px;
			    color: #fff;
			    padding-top: 5px;
			    padding-bottom: 8px;
			    letter-spacing: .1em;
			    text-transform: uppercase;
			    background-color: #1A1A1A;
			}

			#cms-content .zero-cats-content{
				display: none;
				max-height: 220px;
   				overflow-y: auto;
			}

			#cms-content .zero-cats.add-item{
				display:none;
			}

			#cms-content .zero-cats-content.default {
				display: block;
			}

			.wvContent .zero-cats{
				display: none;
			}

			.dropdown-content li:hover a {
			    color: #eee !important;
			}

			/* Connor these get used for tables too... */
			.manageHierarchyItemDragHandle {
			    background-image: url(/img/mim_itemGrips.gif);
			    background-repeat: no-repeat;
			}

			.manageHierarchyItemDragHandle, .manageHierarchyItemNoDragHandle {
			    width: 10px;
			    height: 52px;
			    padding: 0px 0px 0px 0px;
			}

		/* ---------------
		   4b. WEBVIEWER CARDS
		   --------------- */
		   	.wvContent .card-area .back-button{
		   		left: -10px;
    			top: 8px;
		   	}

		   	.wvContent .add-item{
				display:none;
			}

			.wvContent .card-segment .header{
    			margin-bottom: -25px;
				margin-top: 0px;
    			border-bottom: 6px;
			    border-style: none;
			    padding-bottom: 6px;
			    width: 100%;
		   	}

		   	.wvContent .card-item-container{
		   		/*display: none;*/
		   	}

		   	.hamburger{
		   		z-index:22;
		   	}

		/* ---------------
		   4c. RECIPIENT PANEL
		   --------------- */
    			/* ----
				   I. GENERAL
				  				---- */
				  	/* Style the tab */
					.recipientPanel div.tab {
					    overflow: hidden;
					    background-color: #1A1A1A;
					    border-radius: 10px 10px 0 0;
					    -webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    -webkit-transform: translate3d(0,0,0);
					}

					/* Style the buttons inside the tab */
					.recipientPanel div.tablinks {
						display: inline-block;
						width: 30%;
						height: 65px;
					    background-color: inherit;
					    border-style: solid;
					    border-width: 0;
					    border-bottom-width: 10px;
					    border-color: #1A1A1A;
					    outline: none;
					    cursor: pointer;
					    /*padding: 14px 16px;*/
					    transition: 0.3s;
					    color:#fff;
					}

					.recipientPanel div.tab .st0 {
					    fill: #fff !important;
					    stroke: #fff !important;
					}

					/* Change background color of buttons on hover */
					.recipientPanel div.tab .tablinks:hover {
					    background-color: #333;
					    border-color: #333;
					}

					/* Create an active/current tablink class */
					.recipientPanel div.tab .tablinks.active {
					    border-style: solid;
					    border-width: 0;
					    border-bottom-width: 6px;
					}

					.recipientPanel div.tab .tabIcon {
					    height: 0;
					    width: 60px;
					    margin-left:15px;
					    padding:3px;
					}

					.recipientPanel div.tab .tabTitle {
						padding-top: 20px;
					}

					/* Style the tab content */
					.recipientPanel .tabcontent {
					    display: none;
					    padding: 6px 12px;
					    border-top: none;
					}

					.recipientPanel .tabcontent {
					    -webkit-animation: fadeEffect 1s;
					    animation: fadeEffect 1s; /* Fading effect takes 1 second */			    
					    overflow-y: auto;
					    height: 92%;
					}

					@-webkit-keyframes fadeEffect {
					    from {opacity: 0;}
					    to {opacity: 1;}
					}

					@keyframes fadeEffect {
					    from {opacity: 0;}
					    to {opacity: 1;}
					}

					.hierarchyTree .loadingPlaceholder, .recipientPanelContainer .loadingPlaceholder {
						text-align: center;
    					min-height: 200px;
					}

					.card-area .loadingPlaceholder{
						text-align: center;
						padding-top: 10px;
						padding-bottom: 10px;
						margin-top:12px;
					}

					#cms-content .card-area .loadingPlaceholder{
						text-align: center;
						padding-top: 10px;
						padding-bottom: 10px;
						margin-top:32px;
					}

					.persistBottomBar .loadingPlaceholder {
						width: 192px;
					}

					.persistBottomBar .loadingPlaceholder img, .card-area .loadingPlaceholder img, .hierarchyTree .loadingPlaceholder img, .recipientPanelContainer .loadingPlaceholder img{
						max-width: 50px;
    					max-height: 50px;
					}					

					.recipientPanel .messageUserFooterLink{
						display: inline-block;
					    font-family: "Open Sans";
					    margin-right: 0px;
					    margin-left: 10px;
					    margin-top: 5px;
					    font-weight: 600;
					    font-size: 14px;
					}

					.recipientPanel #messageUserFooterSearchInput{
					    margin: 0px 0px 0px 0px;
					    padding: 0px 0px 0px 5px;
					    width: 60%;
					    margin-left: 20%;
					    height: 28px;
					    border-color: #999;
					    font-family: "oswald-light";
					    font-weight: 300;
					    margin-bottom: 15px;
					    text-align: center;
					}

					#user-display {
						font-weight: 900;
					    float: left;
					    font-family: "oswald-bold";
					    color: #333333;
					    margin-top: 15px;
					    margin-left: 125px;
					}

					.select-wrapper input.select-dropdown {
						z-index: 0;
					}

					.formContainerLabel{
						font-size: .8rem;
					    color: #9e9e9e;
					    margin-left: 25px;
					    font-family: "Open Sans";
					    text-transform: uppercase;
					    font-weight: 600;
					}

					.recipientPanel{
						margin:0 auto;
						width: 800px;
						margin-bottom: 150px;
						clear: both;
					}

					.recipientPanel .userTypeTabs{
						text-align: center;
					}

					.recipientPanel .contentArea  {
						min-height: 160px;
						background-color: #fff;
						border-radius: 0 0 10px 10px;
						-webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
					    -webkit-transform: translate3d(0,0,0);
					    overflow: hidden;
					}

					.recipientPanel .contentArea label span{
						color: #1A1A1A;
						margin-left: 2px;
					}

					.recipientPanel .contentArea .messageUserEmail {
				        font-size: 12px;
					    color: #666666;
					    font-family: "Open Sans";
					    margin-left: 10px;
					    position: relative;
					    top: -2px;
					    left: 25px;
					}
					
					.recipientPanel .contentArea .recipientItem {
					    width: 45%;
					    display: inline-block;
					    float: left;
					    margin-left: 4%;
					    
					}

					.recipientPanel #recipientUserDisplay{
						padding-left: 5%;
					}


					.recipientPanel #myInput1, #myInput2, #myInput3{
					    background-color: #333;
					    border-radius: 4px;
					    margin-bottom: 10px;
					    margin-top:10px;
					    padding: 2px 15px;
    					color: white;
					}

    			/* ----
				   II. PROFILES
				  				---- */
				  	#UserProfiles {
				  		margin-bottom:20px;
				  	}

				  	.wizardSearch{
				  		width: 100%;
					    background-color: #333333;
					    padding: 9px;
					    margin: 0 auto;
				  	}

				  	.wizardSearch #myInput{
				  		color: #fff;
				  	}

				  	#ProfileWizardForm .SumoSelect>.CaptionCont{
				  		width: 400px !important;
				  	}

    			/* ----
				   III. GROUPS
				  				---- */
				  	#UserGroups {
				  		margin-bottom:20px;
				  	}

				  	.groupList {
				  		width:100%;
				  	}
    			/* ----
				   IV. INDIVIDUALS
				  				---- */

					.recipientPanel #UserIndividuals form label {
					    padding: 5px 0px 0px 0px;
					}

					#UserIndividuals .contentArea .recipientItem {
						margin-bottom: -6px;
					}

					#UserIndividuals{
						margin-bottom:20px;
						overflow:visible;
					}

					.contentUploadedBy a{
						font-family: "Open Sans Bold";
					}

		/* ---------------
		   4d. LISTS / TABLES
		   --------------- */

		   		/*I. filters*/
		   			.cardView {
		   				/*margin-left: -150px;*/
		   				background-color:transparent !important;
		   			}

		   			.cardView.filterBar{
	   				    position: relative;
						top: -25px;
		   			}

		   			.cardView .filterBarTags > span {
					    margin-left: 20px;
					}

		   			.filterBar form{
		   				margin-right:0 !important;
		   			}	

		   			.filterBar input {
		   				height: 34px; 
		   			} 

		   			.filterBarTags { 
		   				text-align: center;
		   				/*margin-bottom: 10px !important;*/
		   				clear: both;
		   				width: 100%;
					    display: flex;
					    justify-content: center;
					    align-items: center;
		   			}

		   			.filterBarTags .CaptionCont > span{
		   				font-size: 12px !important;
		   			}

		   			.input-field{
		   				margin-left: 5px;
    					margin-right: 5px;
		   			}

		   			/*II. counter*/
		   			.userActivityIndexCounterLabel{
		   				margin-left: 4%;
		   			}

		   			.list-search{
		   				text-align: center;
		   				margin-bottom: 25px;
		   			}

		   			.searchBar{ /*.list-search was before this.. killed it to be more general with this styling*/
		   				width: 440px !important;
					    background-color: #333333 !important;
					    padding: 2px 0px !important;
					    color: white !important;
					    border-radius: 2px !important;
					    text-indent: 1em;
		   			}

		   			.list-search .searchBar{
					    width: 60% !important;
					    margin-left: 20% !important;
					    margin-right: 20% !important;
				        margin-bottom: 0 !important;
		   			}

		   			.list-search .searchButton{
		   				margin-bottom: -25px;
		   			}

		   			.filterBar{
		   				background-color: white;
		   			}

		   			.list-option{
		   				margin-top: 15px;
		   				padding: 15px;
		   				font-weight: 700;
		   			}

			table{
		   		border-collapse: separate !important;
		   	}
		   	
		  	thead tr:nth-child(1) th{
		    	background: white;
		    	position: sticky;
		    	top: 0;
		    	/*z-index: 10;*/
			  }
			
			.add-exsting-file-container .ssTable tr:nth-child(1) th  {
				z-index: 10 !important;
			}

		    .ssTable th,.ssTable td {
		    	border-radius: 0; /* Connor undoing materialize... */
				padding: 5px 8px;
				vertical-align:middle;
				cursor:default;
			}

			.ssTable td{
				font-family: "Open Sans";
			    font-weight: 500;
			    font-size: 13px;
			}

			.pointer td{
				cursor: pointer;
			}

			#cms-content .ssTable table{
				width: 100%;
			}

			#cms-content .ssTable th{
				text-align: left;
			}

			#cms-content .ssTable .userAppVersionCell th>div{
				text-align: center;
			}

			.ssTable tbody tr:nth-child(odd) {
			   background-color: white;
			}

			.ssTable tbody tr:nth-child(even) {
			   background-color: transparent;
			}

			table.ssTable tr{
				padding-left: 20px;
			}

			table.ssTable tr td:first-child, table.ssTable tr th:first-child{
				padding-left: 40px;
			}

			.userMonthActivityBodyMini {
				float : left;
				padding : 10px 15px;
			}

			.userRecentActionsCellHeader{
				padding: 0 8px;
				font-size: 14px;
			}

			.userRecentActionsCellHeader .infoIcon{
				margin: 0px 5px;
			}
			

			.userRecentActionsCellSubHeader>div{
				padding: 0 8px;
				font-size: 16px;
				width: 50px;
				display: inline-block;
			}

			.header-panel div:first-child{
				display:inline-block;
			}

			select{
				font-family: "oswald-light";
				font-weight: 400;
				padding-left: 5px;
			}

			#cms-content li > label{
				font-weight: 200;
				font-family: "Open Sans";
    			font-size: 14px !important;
    			color: black;
			}   

			#cms-content li {
				/*padding-left: 12px; Connor not sure why this is here */
			}

			/* Connor not sure where this is being used but should be more specific to it. */
			#cms-content .select-wrapper ul{
			   /* width: 200px !important; */ 
			}

			td i{
				font-size:21px;
				margin: 0 3px;
			}

			.user-toggle-on {
				color: green;
			}

			.user-toggle-off{
				color: #666666;
			}

			.user-toggle-on:hover, .user-toggle-off:hover{
				color: white;
			}

			table .actions{
				width: 140px;
				padding-top: 5px;
				padding-bottom: 5px;
			}

			.userMonthActivityMini{
			    width: 50px;
			    height: 40px;
			    display: inline-block;
			}

			/*III. inputs */ /* Connor check dis one out. */ 
			label{
				font-family: "Open Sans";
				position: relative;
				display: block;
				text-align: left;
			}

			.input-field label {
				font-family: "Open Sans";
				font-size: 15px !important;
			} 

			form input {
				font-family: "Open Sans";
				font-size: 15px !important;
			}

			.big input{
				font-size: 18px !important;
				height: 2.5rem !important;
			}

			/* IV. modals */
			#modal1 #list-content{
		        overflow-y: scroll;
			    height: 450px;
			    padding-top: 15px;
			}

			#modal1 #list-content #loading {
				width: 100px;
			    height: 100px;
			    margin: 0 auto;
			    display: block;
			    margin-top: 100px;
			}

			#modal1{
				overflow: hidden;
				width: 50%;
				height: 612px;
			}

			#modal1 #list-content div{
   				font-family: "Open Sans";
				padding: 6px 0;
				cursor: pointer;
				margin-left: 45px;
				position: relative;
			}

			#modal1 #list-header h4{
				font-size: 21px;
			    font-family: "oswald-light";
			    font-weight: 400;
			    padding-left: 30px;
			    text-transform: uppercase;
			}

			#list-header{
				padding-top:24px;
				-webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
			    -webkit-transform: translate3d(0,0,0);
			}

			#modal1 #list-options{
				padding-top: 10px;
				padding-bottom: 10px;
    			text-align: center;
    			-webkit-box-shadow: 5px -15px 15px -14px rgba(0,0,0,0.5);
			    -moz-box-shadow: 5px -15px 15px -14px rgba(0,0,0,0.5);
			    box-shadow: 5px -15px 15px -14px rgba(0,0,0,0.5);
			    -webkit-transform: translate3d(0,0,0);

			   	position: absolute;
			    width: 100%;
			    bottom: 0;
			    background: white;
			}

			.btn {
				font-weight: 600;
				font-size: 18px;
				letter-spacing: 3px;
				margin-right: 5px;
				margin-left: 5px;
				width: auto;
			    height: auto;
			    line-height: 2em;
			    border-radius: 2px;
			    padding-left: 16px;
			    padding-right: 16px;
			}

			#myInput{
				width: 80%;
			    font-size: 18px !important;
			    margin-left: 50px !important;
			}

			.switch{
			    text-align: center;
			    color: white;
			    display: inline-block;
			    margin-bottom: 20px;
			    margin-top: 10px;
			}

			.switchBlock{
			    text-align: center;
			}

			.modal .modal-content{
				padding:0;
			}

			.modal [type="checkbox"] + label {
		    	height: 35px;
		    }

			.item-list-title{
				color:black;
			}

			.item-list-subtitle{
			    font-size: 14px;
			    display: block;
			    margin-top: -7px;
			    text-indent: 1em;
			}

			.modal-content .item-list-subtitle{
				text-indent: 3em;
				color:black;
			    font-style: italic;
			    font-size: 13px;
			}

		/* ---------------
		   4e. ACTION BAR
		   --------------- */

		   .persistBottomBar {
		        position: fixed;
    			height: 80px;
    			bottom: 30px;
    			text-align:center;
    			/* margin-bottom: -100px; */
    			width: 1000px;
    			-webkit-box-shadow: 0px -10px 21px -5px rgba(0,0,0,0.3);
			    -moz-box-shadow: 0px -10px 21px -5px rgba(0,0,0,0.3);
			    box-shadow: 0px -10px 21px -5px rgba(0,0,0,0.3);
			    -webkit-transform: translate3d(0,0,0);
			}

			.persistBottomBar .submit{
				display: inline-block;
			    height: initial;
			    float: none;
			}

			.persistBottomBar a {
				display: inline-block;
			}

			.persistBottomBar .action{
				display: inline-block;
			}

			.action button{
				line-height: normal !important;
			}

			.actionIcon{
				height: 45px;
				width: 60px;
				margin: 0 auto;
			}

			.action .formLink{
				margin-left: 0;
			    margin-top: 3px;
				background-color:transparent !important;
			}

			.action button {
				background-color:transparent;
				cursor:pointer;
			}


		/* ---------------
		   4f. UPPER BUTTON BAR
		   --------------- */

		/* ---------------
		   4g. SEARCH BAR 
		   ---------------*/
		  

		/* ---------------
		   4h. PAGING	 
		   ---------------*/
		   .pagingTop span, .paging span{
		   		margin: 2px;
		   }

			.paging {
				padding: 14px 10px 15px 10px;
				margin-left: 2%;
			}

			.pagingTop {
				padding: 0px 10px 8px 10px;
				position: relative;
				margin-left: 2%;
				clear: both;
			}

			.paging .left, .pagingTop .left {
				color: #BBB;
			}

			.paging .right, .pagingTop .right {
				cursor: default;
			}

			.paging .right .current, .pagingTop .right .current {
				color: #fff;
				font-size: 1.5em;
				cursor: default;
			}

			.paging .right .disabled, .pagingTop .right .disabled {
				color: #BBB;
				cursor: default;
			}

		/* ---------------
		   4i. FORM	 
		   ---------------*/
		   /* moves everything a bit to the left so that full width background coloring is possible for differentiation */
		   form fieldset > div, form fieldset > label, form fieldset > p, form fieldset > input{
			  /* 	padding-left: 4%; CONNOR ATTENTION REMOVE THIS AT SOME POINT */
		   }

		   #cms-content .slide-left{
		   		padding-left: 5%;
		   }

		   #cms-content .right {
		   		padding-right: 6%; /* Connor not sure why this was commented out 
		   			but be aware that the 'remove from hierarchy uses this on the 
		   			products add page. */
		   }

		   #cms-content .narrow-padding {
			   padding-right: 2%;
		   }

		   form .button, .formLink {
			    width: 192px;
			    /*height: 25px;*/ /* Connor materialize should handle this. */
			    color: #FFF;
			    text-align: center;
			    font-size: 17px;
			    font-family: "oswald-medium";
			    text-transform: uppercase;
			    border-radius: 2px;
			    padding-left: 0 !important;
			    z-index: 0;
			}

			.formContainer {
				margin-bottom:25px;
				background-color: #fff;
				padding-top: 10px;
				padding-bottom: 10px;
			}

			#cms-content .formContainer .input-section {
				margin-bottom: 0;
			}

			#cms-content .formContainer .input-section .input.checkbox{
				margin-bottom: 0;
			}

			#GroupEditForm .formContainer{
				display:inline-block;
			}

			.formContainerLabel.left{
				/* Not exactly sure why we needed this... */
				/*margin-left: 0 !important;
				padding-left: 0 !important;*/
			}

			.formContainer .left{
				margin-left: 0 !important;
				padding-left: 0 !important;
			}

			#cms-content .input{
				/*margin-bottom:25px;
			    margin-left: 25px;*/
			}

			#cms-content .text {
			    width:100%;
			}

			#cms-content .input-section{
				margin-bottom: 15px;
				margin-left: 25px;
			}

			/* speciically for sections that use the white zebra backdrop & dont want the bottom padding. */
			#cms-content .inner-input-section{
				margin-left: 25px;
				/*margin-bottom: 30px;*/
			}

			#cms-content .item-hier .collapsible-body{
				padding: 0; 
			}

			#cms-content .item-hier .nudge-left{
				padding-left: 25px;
			}

			#cms-content .item-hier-selected {
		        -webkit-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
			    -moz-box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
			    box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.25);
			    width: max-content;
			}

			#cms-content .item-hier-selected label {
				color:black;
			}

			#cms-content .item-hier-selected [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
			    background-color: black !important;
			}

			#cms-content .item-hier-selected [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
			    border-color:black !important;
			}

			#cms-content .item-hier .collapsible-header {
				padding: .4rem;
				-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
    			box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
				border-bottom: 0;
				width: 700px;
			}

			.productsHierarchyHierarchyItem div{
				font-family: "Open Sans";
				font-size: 15px;
			}

			#cms-content .item-hier-selected .collapsible-header {
				z-index: 255;
				position:relative;
			}

			#cms-content .item-hier-selected {
			    z-index: 255;
    			position: relative;
    			display: contents;
    		}

			#cms-content .item-hier .collapsible {
			    -webkit-box-shadow: none; 
			    box-shadow: none;
			    border: none;
			}

			#cms-content .item-hier .input.checkbox {
 			    margin-bottom: 0;
			}

			#cms-content .item-hier .inlineFormLabel{
				width: 100%;
			}

			#cms-content .item-hier span, .item-hier div {
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			#cms-content .item-hier-existing:not(.item-hier-selected) span {
				text-decoration: line-through !important;
			}

			#cms-content .item-hier .collapsible-body {
				border: none;
			}

			#cms-content .short-input{
				width: 20%;
				margin-right: 5%;
				display: inline-block;
			}

/* dan hack */
.item-hier ul label {
	position: relative;
}

.formContainer label{
	position: relative;
}

/* for editing content files */
.input-section label{
	position: relative;
    text-transform: uppercase;
    font-weight: 700;
}

.input-section li label{
	text-transform: none;
}

.contentFileDisplayName{
    background-color: white;
    border-radius: 5px;
    padding: 15px;
    width: 97% !important;
    margin-bottom: 35px;
    margin-top: 20px;
} 

.contentFileDisplayName label{
	color: black;
    font-family: "Open Sans";
    margin: 0 auto;
}

.buttonTitleOverlengthWarning, .displayNameOverlengthWarning{
	display: none;
	background: #1A1A1A;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    width: 40%;
    text-align: center;
}

/* end hack */



#cms-content .input.checkbox{
	margin-bottom:8px;
    font-family: "Open Sans";
}

.formContainer .input.checkbox {
	color:black;
}

.contentFiles .checkboxSubLabel, .content .checkboxSubLabel, .users .checkboxSubLabel, .rooms .checkboxSubLabel {
    padding: 0px 0px 0px 10px;
    display: inline-block;
    font-family: "Open Sans";
    font-size: 14px !important;
    color: black;
    text-transform: none;
    font-weight: 400 !important;
}

.contentTypeTitle {
    color: #000;
    font-weight: 700;
}

.contentFilesHierarchySubItem {
    padding: 2px 0px 3px 35px;
}

.contentFilesUploadControls, .contentFilesSyncControls, .contentLinkControls {
    position: relative;
    display: block;
    padding-left: 40px;
}

.contentSourceContainer {
    display: block;
    position: relative;
    margin-bottom:30px;
    margin-left: 35px;
    margin-right: 35px;
}

.contentSourceContainer h3{
	display: inline;
}

.contentSourceContainer>div{
	padding-top: 10px;
	padding-bottom: 10px;
    background-color: #fff;
    margin-bottom: 10px;
}

.contentSourceContainer h3 {
    font-size: 1.3rem !important;
}

.contentSourceContainer .selected a{
	color: #fff;
}

.contentSourceContainer .selected {
	background: #333;
    color: #fff;
    -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);
}

.contentSourceContainer .selected .contentTypeTitle{
	color: #fff;
}

.contentSourceContainer input{
	color: #fff;
}

.contentSourceBlock{
	position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: pointer;
    right: 0;
    top: 0;
    padding-top: 20px;
    padding-left: 40px;
    padding-bottom: 20px;
    opacity:0;
}

img.formBackground{
 	width: 95%;
	padding: 5%;
}

.input-section img{
	background-color: #EEEEEE;
}

fieldset > input[type='checkbox']{
	margin-left: 6%;
		margin-bottom: 3%;
}

input[type="file"] {
    margin-bottom:14px;
}

#ContentFileSelectedSync2linkIntegration{
	font-family: "oswald-light";
}

.submit input{
	margin: 10px 0px 0px 10px;
	padding: 5px 0px 0px 0px;
	height:30px;
}
.app2appViewingMessage {
    background: #af2222;
    text-align: center;
    padding: 5px;
    color: #fff;
    font-size: 20px;
}

.submit{
	margin-right: 5%;
}

/* 4I FLASH MESSAGES */
#flashMessage{
    display: inline-block;
    font-size: 18px;
    border-radius: 5px;
    padding: 7px 15px;
    font-weight: 600;
    color: #777;
    background-color:white;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.22), 0 2px 20px 0 rgba(0, 0, 0, 0.22);
	border-radius: 5px;
	cursor: pointer;
}

#sessionFlashPopover{
	margin: auto;
    width: 50%;
    text-align: center;
    display: none;
    position: relative;
    /* margin-left: Calc(25% + 100px); Connor not 100% sure why this was off-centering this text*/
}

/* 4J ARROWS*/

.arrow-down {
    position: relative;
    display: inline;
    float: right;
    margin-top: -10px;
    left: -10px;
}

.arrow-down:before, .arrow-down:after {
  content: "";
  display: block;
  width: 15px;
  height: 5px;
  background: white;
  position: absolute;
  top: 20px;
  transition: transform .5s;
}

.arrow-down:before {
  right: 18px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transform: rotate(45deg);
}

.arrow-down:after {
  right: 10px;
  transform: rotate(-45deg);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.arrow-down.active:before {
  transform: rotate(-45deg);
}

.arrow-down.active:after {
  transform: rotate(45deg);
}



/* ===============
   5. HEADER
   =============== */

#cms-header h1{
	margin: 0;
}

#cms-header h1 a img{
	margin: 0 auto;
    margin-left: 50px;
}

.card-save-order{
	margin-top: 12px !important;
}

#pageHeaderBar {
	padding: 0px 10px;
	padding-left: 4%;
	height: 30px;
	cursor:default;
	margin-bottom: 50px;
}

#header-rightside i{
	font-size: 1.6em;
    display: block;
    padding: 3px;
    margin-top: 8px;
}

#header-rightside {
	padding-right: 20px;
    width: 315px;
    margin-top: -3px;
}

.header-icon-link {
	display: inline-block;
	text-align: center;
	margin: 0 10px;
    float: right;
}

.header-icon-link svg {
	display: block;
}

/* ===============
   6. SIDEBAR 
   =============== */

.load-hidden {
	opacity: 0.0;
	transition:.6s opacity;
}

.load-visible {
	opacity: 1.0;
	transition:.6s opacity;
}

.sidenav-header-title{
    padding: 0px 0px 15px 0px;
    text-align: center;
    color: #999999;
    font-family: "oswald-medium";
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
}

.sidenav-sublist-item {
	list-style: none;
    text-align: left;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 30px;
}

#cms-sidenav .sidenav-sublist-item a {
    font-family: "oswald-light";
    font-size: 14px;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    font-weight: 400;
}

.sidenav-header svg{
    height: 60px;
    width: 100%;
    margin-bottom: -12px;
    padding-top: 5px;
}

.sidenav-header{
	/* transparent border so non-transparent border doesnt slide it */
	border-left: transparent 10px solid;
	padding-right: 10px;
	cursor: pointer;
}

.sidebar-selected .sidenav-header{
	-webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -webkit-transform: translate3d(0,0,0);

    border-left: #fff 10px solid;
}

.sidebar-selected .sidenav-header-title{
	color: #FFF;
}



.sidenav-sublist-item i{
	float: right;
    font-size: 1.5em;
    padding-right: 15px;
}

.sidenav-sublist{ 
	overflow: hidden;
}

.sidebar-hidden .sidenav-sublist{
	height:0px !important;
	background-color:#1A1A1A;
	height:0px;
	transition: all 1s ease;
}

.sidebar-selected .sidenav-sublist{
	transition: all 1s ease;
	padding: 5px 0px;
	box-sizing: initial;
}

.sidebar-minor-selected{
	background-color: #fff;
	-webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -webkit-transform: translate3d(0,0,0);
}

/* ===============
   7. FOOTER 
   =============== */

/* - - - - - FOOTER - - - - - */

#footer {
	padding: 0px 0px 0px 0px;
	position: absolute;
    bottom: 0;
    width: 1200px;
}

#footer span {
	font-weight: lighter;
	color: #AAA;
}

#footer #leftSideSection {
	width: 130px;
	float: left;
	height: 18px;
	padding: 10px 0px 10px 10px;

	border-right: 1px;
	border-style: solid;
	border-color: #CCC;
}

#centerFooterSection {
	height: 30px;
	padding: 2px 0px 0px 10px;
	margin-left: 200px;
	-webkit-box-shadow: 0px 10px 40px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 40px -5px rgba(0,0,0,0.5);
    box-shadow: 0px -1px 40px -5px rgba(0,0,0,0.5);
    -webkit-transform: translate3d(0,0,0);
}

#centerFooterSection span{
	padding-left:10px;
	padding-right:10px;
}

#rightFooterSection {
	width: 130px;
	float: right;
}


/* ===============
   8. INDIVIDUAL PAGE SECTION
   =============== */
   		/* ---------------
		   8a. PRODUCT PAGE
		   --------------- */
		    #fileQuestionSet {
		  
		    }

		    .diagram-areas {
		    	max-height: 400px;
			    overflow: auto;
			    width: 70%;
			    margin-left: 35px;	
			    margin-top: 10px;
			}

		/* ---------------
		   8b. ADD/EDIT MESSAGE PAGE
		   --------------- */
		   .messageActivation{
		   		display:inline-block;
		   }

		   .messageTypeContainer {
			    text-align: center;
			    margin-bottom: 20px;
			    -webkit-box-sizing: content-box;
			    box-sizing: content-box;
			}

			.recurringContainer {
				text-align: center;
			}

		   .ui-segment {
			    display: inline-block;
			    text-align:center;
			    font-family: "oswald-light", "gara", sans-serif;
			}

			.messageTypeContainer .ui-segment span.option, .recurringControls .ui-segment span.option {
				width: 170px;
			    padding-top: 10px;
			    padding-bottom: 8px;
			    font-size: 20px;
			}

			.recurringControls{
				padding-top: 10px;
				background: white;
			}

			.ui-segment span.option {
			    font-size: 13px;
			    padding-left: 23px;
			    padding-right: 23px;
			    height: 25px;
			    text-align: center;
			    display: inline-block;
			    line-height: 25px;
			    margin: 0px;
			    float: left;
			    cursor: pointer;
			}

			.ui-segment span.disabled {
			    cursor: default !important;
			    opacity: 0.3;
			}

			.messageContentControls .button:active {
				box-shadow: 0px 0px 0px #FFF;
			}

			.messageContentControls input[type=text],.messageContentControls input[type=email],.messageContentControls input[type=password],.messageContentControls input[type=number],.messageContentControls input[type=tel] {
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 5px;

				width: 387px !important;
				height: 34px;

				border-style: solid;
				border-width: 1px;
				border-color: #999;

				font-family: "Open Sans";
				font-weight: 300;
			}

			.messageContentControls label {
				padding: 5px 0px 5px 0px;
				color: #666;
				display: block;
				width: 90%;
			}

			fieldset {
			    border: none;
			    margin: 0;
			    padding: 0;
			}

			.arrowToggle {
				margin-top: .2rem;
				background-size: 100% 100%;
				height:12px;
				width:12px;
			}

			.toggleDivHitContainer h3{
				margin-top: 0px;
			}

			#cms-content textarea{
				width: 90%;
			    height: 120px;
			    font-family: "Open Sans";
			    border-style: solid;
			    border-width: 1px;
			    border-color: #999;
			    font-weight: 300;
			    font-size: 16px;
			    padding: 10px;
			}

		/* ---------------
		   8c. ROOM PAGE
		   --------------- */


	   /* ---------------
		   8d. CATEGORY PAGE
		   --------------- */
		   .categoryIconImage {
		   	    max-width: 49px;
				max-height: 49px;
			    width: auto;
			    margin: 0 auto;
			    display: block;
			}

			.categoryIconCell {
				width: 60px;
				vertical-align: middle;
			    padding-left: 6px;
			    padding-right: 6px;
			    padding-top: 1px;
			    padding-bottom: 1px;
			}

		/* ---------------
		   8e. APPLICATION PAGE
		   --------------- */
		   .collapsible-header{
		   		padding:0;
		   }

		   #cms-content .collapsible-header .input-section{
		   		margin-bottom: 0;
		   }

		   #cms-content .collapsible-header .input-section h3{
		   		margin: 1.2rem 0;
		   }

		   .applicationSectionItem {
			   	background-color: white;
			    border-radius: 5px;
			    padding: 10px;
			   	margin-bottom: 10px;
		   }

		   .applicationSectionDeleteButton{
		   		padding-right: 0 !important;
		   }

		   .applicationSectionInformationContainer{
		   		margin-left: 20px;
		   }

		   .applicationSectionIDField{
		   		width: 35px !important;
				margin-right: 15px !important;
		   }

		   /* otherwise could get that weird error where the styling breaks when checkbox is clicked */
		   .applicationSectionProfileItem{
		   		position:relative;
		   }

		   .applicationSectionProfileContainer{
		   		display: inline-flex;
		   		flex-wrap: wrap;
		   		justify-content: space-between;
			    clear: both;
			    float: left;
			    border-top: #eeeeee .1px solid;
			    padding-top: 10px;
		   }

		   .applicationSectionProfileItem [type="checkbox"]+span:not(.lever){
		   		padding-left: 25px !important;
		   		padding-right: 25px !important;
		   }

		   .applications .collapsible{
			    -webkit-box-shadow: none; 
			    box-shadow: none;
			}

			.applications .collapsible-body{
				border-bottom:none;
			}

			.applications [type="checkbox"]+span:not(.lever){
				line-height: normal;
				position: relative;
				font-size: .8rem;
			}

			.applications .grippy{
				display: inline;
			}

			.applicationSectionDeleteButton{
				font-size: 24px;
			    font-weight: 400;
			    font-family: "oswald-light";
			}

			.applications .inlineDiv{
				margin-right: 15px;
			}

			.applications .jscolor{
				padding-left: 10px !important;
			} 

			.applications .WhitelistedEmailContainer{
			    background-color: white;
			    padding: 5px 0px 5px 10px;
			    height: 160px;
			    margin-bottom: -45px;
			    overflow: overlay;
			}

			.applications textarea{
				height: 70px !important;
			}

			.applications .WhitelistedRegexInput{
				border:none !important;
			    margin: 0 !important;
    			padding: 0 !important;
    			height: auto !important;
			}

			.applications .WhitelistedPatternStuff h3{
				margin-bottom: 5px;
			}

			.applications #WhitelistedEmailInputAdd{
				margin-top: 10px;
			}


			/* ---------------
		   8f. COMMUNICATION PAGE
		   --------------- */
		   #digestDeliverySummary {
		   		font-family: "Open Sans";
		   }

		   /* ---------------
		   8g. USERS OVERVIEW
		   --------------- */
		   #usersTable .fa-edit{
		   		float: left;
		   		margin-right: 10px;
		   }

		 	.toggleUserActivation.deactivate>.user-toggle-off, .toggleUserActivation.activate>.user-toggle-on {
				display: none;
			}

			.toggleUserActivation{
				font-family: "Open Sans Bold";
				/*float:right;*/
			}

			#userActivityGraph svg{
				margin: 0 auto;
    			display: block;
			}

			#UserAddForm .formContainer, #UserEditForm .formContainer {
				background-color: transparent;
			}

			/* ---------------
		   8h. HIERARCHY PAGE
		   --------------- */

		   .add-exsting-file-container {
			   bottom: -100%;
			   padding: 0px;
			   width: 1000px;
			   position: absolute;
			   background:white;
			   height: 85%;
			   -webkit-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
			   -moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
			   box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);
			   z-index: 1;
		   }

		   .add-exsting-file-container .title-bar {
				height: 100px;
				vertical-align: middle;
				cursor: default !important;
				width: 100%;
				padding:10px;
			}

			.add-exsting-file-container .product-card {
				width: 60%;
				display: inline-block;
				pointer-events: none;
				font-size: 30px;;
			}

			.add-exsting-file-container .product-card .card-item .title {
				font-size: 30px;
				font-weight: bolder;
			}

			.add-exsting-file-container .input-bar {
				padding: 10px;
				margin-top: 15px;
				border-top: 5px solid gray;
				height: 90px;
			}

			.contentFileFilterCategoriesContainer, .contentFileFilterProfileContainer {
				float: right;
				display: inline-block;
				margin-right: 10px;
			}
			

			.add-exsting-file-container .results-area {
				height: Calc(100% - 182px);
				overflow-y: scroll;
				padding: 10px;
				padding-top: 0px;
			}

			.add-exsting-file-container .results-area .loading {
				position: absolute;
				top: 300px;
				width: 100%;
				text-align: center;
			}

			.add-exsting-file-container .results-area .loading img {
				width: 100px;
				height: 100px;
			}


			.add-exsting-file-container .card-item .item-icon img {
				pointer-events: none;
			}

			.add-exsting-file-container .card-item .item-icon {
				width: 70px;
				height: 70px;
			}

			.add-exsting-file-container .card-item .item-icon img {
				max-width: 60px;
				max-height: 60px;
			}

			.add-exsting-file-container .addToItem {
				width: 150px;
			}

			.add-exsting-file-container .searchBar  {
				background-color: white !important;
				color: black !important;
				width: 350px !important;
			}

			.add-exsting-file-container .searchBar, .add-exsting-file-container .contentFileSearchResetButton, .add-exsting-file-container .contentFileSearchGoButton  {
				position: relative;
				top: 10px;
			}

			.add-exsting-file-container .close-button {
				top: 0;
				margin: 0;
				position: absolute;
				right: 0;
				font-size: 28px;
			}

			.add-exsting-file-container .ssTable tr {
				height: 35px;
				padding: 5px;
			}

			.add-exsting-file-container .ssTable tr, .add-exsting-file-container .ssTable td {
				cursor: pointer;
			}

			.add-exsting-file-container .ssTable .actions>a {
				display: none;;
			}

			.add-exsting-file-container .ssTable tr:hover .actions>a {
				display: block !important;
			}

			.add-exsting-file-container .ssTable .addState {
				padding: 1px;
			}

			.add-exsting-file-container .ssTable td.addState {
				vertical-align: bottom;
				padding-top: 3px;
			}

			.add-exsting-file-container .ssTable tr i.checked {
				display: none;
			}

			.add-exsting-file-container .ssTable tr.addRelationship i.checked, .add-exsting-file-container .ssTable tr.isExisting i.checked {
				display: block;
			}

			.add-exsting-file-container .ssTable tr.addRelationship i.unchecked, .add-exsting-file-container .ssTable tr.isExisting i.unchecked  {
				display: none;
			}
			
			.add-exsting-file-container .ssTable tr.isExisting {
				pointer-events: none;
				color: gray;
				opacity: 0.7;
			}
			
			.add-exsting-file-container .go-button-container {
				right: 80px;
				top: 13px;
				position: absolute;
			}
			
			.add-exsting-file-container .addExistingAssociateButton  {
				height: 72px;
				width: 150px;
				display: table-cell;		
				position: relative;
			}

/* ===============
   9. LOGIN SECTION
   =============== */
.login-page .ss-horiz-logo{
	position: absolute;
    bottom: 20px;
    width: 100%;
}

.login-page .userLoginMimLogo {
    max-height: 4vw;
    min-height: 25px;
    margin: 0 auto;
    display: block;
}

.login-page .userLoginLink {
	display: inline-block;
	padding-left: 25px;
	padding-right: 15px;
    padding-top: 8px;
    text-transform: uppercase;
}

.login-page .submit {
    display: none;
    width: 90%;
    height: 48px;
    margin-right: 0;
}

.forgot-password .submit{
	display:block !important;
	margin: 0 auto;
}

.login-page .loginMethodLink{
	color: #000 !important;
    background-color: #d4d4d4;
    margin-top: 10px;
    margin-bottom: 10px;
}

.login-page .loginApplicationLogo {
	max-width:150px;
	margin:auto;
	margin-top: -20px;
	box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.33);
  	-moz-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.33);
  	-webkit-box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.33);
	-moz-border-radius: 30px;
  	-webkit-border-radius: 30px;
  	-khtml-border-radius: 30px;
  	border-radius: 30px;
}

.login-page .loginApplicationLogoContainer {
	float: left;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: -50px;
    width: 100%;
    text-align:center;
}

/*.users.form form,#UserForgotpasswordForm,#UserRequestForm {
	height: 300px;
	display: table-cell;
	text-align: center;
}*/

.login-page .users.form form input{
	margin: 0px 0px 10px 0px;
	height: 30px;
}

.login-page .users.form form input[type=number]{
	text-align: left;
}

.login-page .users.form form .button{
	margin: 10px 0px 0px 0px;
	/*padding: 7px 0px 3px 0px;*/
	width: 307px;
	height: 30px;
}

.login-page .users.form{
    margin: auto;
    width: 100%;
    display: block;
    font-family: "oswald-medium";
    margin-top: 130px;
}

.login-page .users.form form{
	display: block !important;
    width: 400px;    
    height: auto !important;
    margin: auto;    
    padding-top: 15px;
    padding-bottom: 25px;
    background-color: #fff;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.22), 0 2px 20px 0 rgba(0, 0, 0, 0.22);
    border-radius: 5px;
    text-align: center;
}

.login-page .users.form form input{
    border-width: 0px;
    border-bottom-width: 1.2px;
    font-size: 24px;
    font-weight: 300;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 0px 0px 10px 0px;
    width: 300px;
    height: 30px;
}

.login-page .users.form form .submit input{
	background-color: #4D4D4D;
    color: white;
    border-radius: 7px;
    font-size: 18px !important;
    height: 42px !important;
    width: inherit;
    float: right;
    margin-top: 15px !important;
    padding: 10px 20px !important;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 25px;
    margin: 10px 0px 0px 0px;
    width: 100%;
}

.login-page .forgotPassword{
	display:none;
}

.verify h5{
	font-size: 24px;
    padding-top: 85px;
    font-weight:300;
}

.loginChoose{
	padding-top:95px;
	padding-bottom:5px;
	font-size: 18px;
}

.login-page form .standardLogin {
	padding-bottom:15px;
}

.login-page #resend-security {
	margin-left: 25px;
}

.login-page a img{
	height: 35px;
    width: 35px;
    margin-bottom: -10px;
}

.login-page .formContainerButton{
	padding: 0;
}

.loginBackButton{
	position:absolute;
	display:none;
	cursor: pointer;
	padding-left: 20px;
}

.login-page .users form{
	padding:0;
}

.standardLogin{
	display:none;
}


@media all and (max-width: 730px) {
	.users.form form .submit input {
	    border-radius: 0px;
	    width:100%;
	    margin-right:0;
	    /*margin-top: -20px;*/
	}

	.users.form {
	    padding-left: 0; 
	    margin-top: 200px;
	}

	.loginApplicationLogo {
	    margin-top: 20px;
	    max-width: 150px;
	}

	.users.form form input {
		margin-left: 0;
	}

	.users.form form input[type=text], form input[type=email], form input[type=password], form input[type=number], form input[type=tel] {
	    /*width: 90vw !important;*/
	    margin-left: 5vw !important;
	    margin-right: 6vw !important;
	    padding: 7px 0px !important;
	}

	.request-credentials .users.form form input[type=text], .request-credentials  form input[type=email], .request-credentials form input[type=password], .request-credentials form input[type=number], .request-credentials form input[type=tel] {
	    width: 300px !important;
	}

	@media all and (max-height: 500px) {
		.loginApplicationLogoContainer {
			display:none;
		}

		.users.form {
		    margin-top: 30px;
		}
	}


}

@media all and (max-width: 400px) {
	.users.form form{
	    width: 100% !important;
	    border-radius: 0 !important;
	}
}

/* END LOGIN GOODIES */

/* ===============
   10. WEBVIEWER SECTION
   =============== */

#languageMenu{
  display:none;
}

#tagMenu{
  display:none;
}

.drawer-nav .SumoSelect > .optWrapper.open{
	width: 100%;
}

.drawer-nav .SumoSelect > .optWrapper{
	width: 100%;
}


/* END WEBVIEWER GOODIES */

/* ===============
   11. MATERIALIZE ADDED FUNK
   =============== */
/* 1 SS = 2.5% width. You can only have 40 storyStocks at any given time */
input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea{
	height: 2rem;
    margin-left: 1rem;
}

textarea{
	margin-left: 1rem !important;
}

.row .col.ss9 {
    width: 22.5%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.offset-ss2{
    margin-left: 5%;
}

.row .col.offset-ss11{
    margin-left: 27.5%;
}

.row .col.offset-ss15{
    margin-left: 37.5%;
}

.ss-center{
    margin: 0 auto;
    text-align: center;
}

.ss-centered .select-wrapper {
    width: 60%;
    margin: 0 auto;
}

.ss-centered-wide {
    width: 80%;
    margin: 0 auto;
}

/* Connor, seems messy? */
input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
	width: 90%;
}

/* Connor, hiding arrows since they are super tiny, may want to reinclude at some point */ 
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number]:not(.browser-default){
	width: 9%;
    text-align: center;
}

#ApplicationWvTabIndicatorOpacity{
	width:100%;
}

.contentFilesSyncAdditionalControls .SumoSelect{
	color:black;
	width: 100px;
}

/* Connor, overridding because of messiness above */
.select-wrapper input.select-dropdown {
	width: 100% !important;
}

.chip{
    font-size: 18px;
}

.chips .input{
    width: 220px !important;
}

#searchTermKeywords {
	width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    background-color: white;
    margin-left: 0 !important;
    margin-bottom: 30px !important;
}

#searchTermKeywords .infoIcon{
    margin-right: 5px;
}

#searchTermKeywords .input-field{
	margin-left: 15px;
}

.input-section .leftPad {
	padding-left: 16px !important;
}

.dropdown-content li>a, .dropdown-content li>span {
    padding: 14px 20px;
    font-family: "Open Sans";
    font-size: 14px;
}

.material-tooltip{
    max-width: 400px;
    font-family: "Open Sans";
    font-size: 14px;
    -webkit-box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.6);
    box-shadow: 0px 0px 18px 3px rgba(0,0,0,0.6);
}

.collapsible {
    border:none;
    margin: .5rem 0 1rem 0;
}

select {
	display: initial !important; /* materialize had a select display none in which was preventing select alls. */
}

.recurringControls select{
	display: none !important;
}
/* END MATERIALIZE GOODIES */


/* ===============
   12. SUMOSELECT ADDED FUNK
   =============== */

#cms-header .SumoSelect>.CaptionCont {
    position: relative;
    border: none;
    min-height: 14px;
    background-color: transparent; 
    border-radius: 0px; 
}

.header-panel{
	margin-top: 8px;
	width: 600px;
}

.filterBarTags .SumoSelect > .CaptionCont {
	padding-left: 0px;
}

.cardView .input-field{
	margin-top: -1em;
}

.SumoSelect > .CaptionCont > label > i {
    margin-left: 0 !important;
}

.SumoSelect > .CaptionCont > label {
	background-color: #fff;
}

.headerSelector .SumoSelect > .CaptionCont > label {
	background-color: transparent;
}

.SumoSelect > .CaptionCont > span{
	padding-right: 0 !important;
	font-family: "Open Sans";
	font-size: 14px;
    margin-left: 4px;
    text-align: left;
    padding-left: 4px;
}

.SumoSelect .select-all{
	 	height: auto !important; /*ATTENTION sumo-select getting added twice? It's also maybe tripping over itself with this styling*/ 
}

.right-drop .SumoSelect > .optWrapper { 
	margin-left: -50%;
}

.formContainer .SumoSelect {
    margin-left: 40px;
}

#recipient-legend{
	margin-right: 110px;
    float: right;
    background-color: #1A1A1A;
    -webkit-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    box-shadow: 0px 10px 21px -5px rgba(0,0,0,0.5);
    -webkit-transform: translate3d(0,0,0);
    padding: 10px;
    padding-left: 15px;
    padding-right: 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

#recipient-legend label{
	margin-right:25px;
	pointer-events: none;
}

.recipientPanel #UserIndividuals .SumoSelect > .optWrapper.open {
    margin-left: -50%;
}

.recipientPanel #UserIndividuals .SumoSelect > .optWrapper {
	margin-left: -50%;
}

.left-fifty .header-panel div:first-child .sumoSelect, .left-fifty .header-panel div:first-child .SumoSelect{
	margin-left: -50%; 
} 

.drawer-nav .languageSubtext{
	display: none !important;
}

.drawer-nav .header-panel div:first-child {
	margin-top: 0;
}

#cms-content .header-panel div:first-child {
    margin-left: 20px;
}

#cms-content .header-panel div:first-child .SelectBox{
	background-color: transparent;
    border: none;
}

.header-panel .headerSelector .SumoSelect .CaptionCont span{
	margin-left: 30px;
}

.header-panel .headerSelector{
	float:left;
	display: inline-block;
}

.header-panel div:first-child  .SumoSelect:focus > .CaptionCont, .header-panel div:first-child  .SumoSelect:hover > .CaptionCont {
    box-shadow: none;
    border-color: transparent;
}

.header-panel div div:first-child{
	display: inline-block;
    position: relative;
    top: -27px;
    margin-left: -106px;
    padding-left: -16px;
    left: 135px;
    font-family: "oswald-medium";
    font-size: 12px;
    opacity: .8;
    width: 200px;
    margin-right: -100px;
}

.SumoSelect > .optWrapper > .options > li {
    width: 98%; /* why is this here? Connor maybe make this more specific. It's formating Add User -> Company rather strangely with mouse over on the options*/
}

.SumoSelect > .CaptionCont > label > i{
	left: auto !important;
	right: 6px !important;
}

.input-section .SlectBox, .input-section .SelectBox, #UserAddForm .SelectBox{
	width: 875px !important;
}

.usersProfileInnerContainer .SumoSelect > .optWrapper, .usersGroupInnerContainer .SumoSelect > .optWrapper{
	width: 100% !important;
}

.input-section .SumoSelect > .optWrapper{
	width: 100% !important;
}

#cms-content .search-txt{
	margin-left: 0 !important;
}

.SumoSelect {
    width: auto !important;
}

.filterBar .SumoSelect {
    width: 200px !important;
}

.SelectBox{
	width: 200px;
    padding: 5px 8px;
}

.SumoSelect > .optWrapper {
    width: 150% !important;
}

.SumoSelect.open .search-txt {
    border-radius: 0 !important;
}

/* END SUMOSELECT GOODIES */

/* ===============
   "Please Change / Move / Delete These Future Connor. PLEASE!!!" -past Connor March 2017 

   "you don't own me." - Future Connor
   =============== */

/* ===============
13. J-ALERT ADDED FUNK
=============== */


/* END J-ALERT GOODIES */


/* USERS PAGE */
.userActivityIndexEmail{
	font-style: italic;
    opacity: .8;
    text-indent: .5em;
    margin-top: -3px;
    font-size: 13px;
}

.userAuthList .btn-remove-user-auth {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.userDeviceContainerHeader{

}

.userDeviceContainerDetails left{

}

.userDeviceList{
	width: 95%;
	box-shadow:none;
	margin-left:24px;
}

.userDeviceContainer{
    padding-left: 0;
    list-style-type: none;
    background-color: white;
	border-radius: 2px;
    border: 1px solid #ccc;
	margin-bottom:10px;
}

.userDeviceContainer .collapsible-header{
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-family: "oswald-light";
	position: relative;
}

.userDeviceContainer .collapsible-body{
	font-family: "Open Sans";
	font-size: 13px;
}

.userDeviceContainer .collapsible-body .userLatestActivityItem{
	font-family: "Open Sans";
	font-weight: bold;
}

.userDeviceContainer .headerDateTime {
	position: absolute;
	right:10px;
	color:gray;
}

.userAppVersionCell {
	font-size: 13px !important;
	text-align: center;
}

.userAppPlatform{
	font-size: 14px !important;
	font-style: italic;
}

.usersGroupListEntry{
	font-family: "Open Sans";
    font-size: 14px;
    margin-bottom: 6px;
    width: 50%;
    float: left;
}

.usersGroupListEmail{
    display: block;
    font-style: italic;
    font-size: 12px;
    text-indent: 1em;
    margin-top: -3px;
}

.removeUserFromGroup{
    font-size: 1.5em;
    float: left;
    padding-right:20px;
    cursor: pointer;
}

.usersGroupListEntry{
	cursor: default;
}


#cms-content #UserPassword{
	width: 90% !important;
}

/* END USERS*/

.productID{
	width: 15px;
    height: 52px;
    float: left !important;
    padding: 0px 0px 0px 0px;
}

/* APP CSS from sortable */
.sortable-ghost {
	opacity: .2;
}

.tile {
	width: 22%;
	min-width: 245px;
	color: #FF7270;
	padding: 10px 30px;
	text-align: center;
	margin-top: 15px;
	margin-left: 5px;
	margin-right: 30px;
	background-color: #fff;
	display: inline-block;
	vertical-align: top;
}
	.tile__name {
		cursor: move;
		padding-bottom: 10px;
		border-bottom: 1px solid #FF7373;
	}

	.tile__list {
		margin-top: 10px;
	}
		.tile__list:last-child {
			margin-right: 0;
			min-height: 80px;
		}

		.tile__list img {
			cursor: move;
			margin: 10px;
			border-radius: 100%;
		}



.block {
	opacity: 1;
	position: absolute;
}
	.block__list {
		padding: 20px 0;
		max-width: 360px;
		margin-top: -8px;
		margin-left: 5px;
		background-color: #fff;
	}
		.block__list-title {
			margin: -20px 0 0;
			padding: 10px;
			text-align: center;
			background: #5F9EDF;
		}
		.block__list li { cursor: move; }

	.block__list_words li {
		background-color: #fff;
		padding: 10px 40px;
	}
		.block__list_words .sortable-ghost {
			opacity: 0.4;
			background-color: #F4E2C9;
		}

		.block__list_words li:first-letter {
			text-transform: uppercase;
		}

	.block__list_tags {
		padding-left: 30px;
	}

	.block__list_tags:after {
		clear: both;
		content: '';
		display: block;
	}
		.block__list_tags li {
			color: #fff;
			float: left;
			margin: 8px 20px 10px 0;
			padding: 5px 10px;
			min-width: 10px;
			background-color: #5F9EDF;
			text-align: center;
		}
			.block__list_tags li:first-child:first-letter {
				text-transform: uppercase;
			}



#editable {}
	#editable li {
		position: relative;
	}

	#editable i {
		-webkit-transition: opacity .2s;
		transition: opacity .2s;
		opacity: 0;
		display: block;
		cursor: pointer;
		color: #c00;
		top: 10px;
		right: 40px;
		position: absolute;
		font-style: normal;
	}

	#editable li:hover i {
		opacity: 1;
	}


#filter {}
	#filter button {
		color: #fff;
		width: 100%;
		border: none;
		outline: 0;
		opacity: .5;
		margin: 10px 0 0;
		transition: opacity .1s ease;
		cursor: pointer;
		background: #5F9EDF;
		padding: 10px 0;
		font-size: 20px;
	}
		#filter button:hover {
			opacity: 1;
		}

	#filter .block__list {
		padding-bottom: 0;
	}

.drag-handle {
	margin-right: 10px;
	font: bold 20px Sans-Serif;
	color: #5F9EDF;
	display: inline-block;
	cursor: move;
	cursor: -webkit-grabbing;  /* overrides 'move' */
}

/* GRIPPY HIMSELF */
div.grippy {
	content: '....';
	width: 15px;
    height: 100%;
	display: inline-block;
	float: left;
	line-height: 5px;
	padding: 12px 4px;
	cursor: move;
	vertical-align: middle;
	/* margin-top: -.7em; */
	/* margin-right: .3em; */
	font-size: 12px;
	font-family: sans-serif;
	/* letter-spacing: 2px; */
	color: #cccccc;
	text-shadow: 1px 0 1px black;
    pointer-events: all;
    display:none;
}

.ssTable .grippy{
	display: block;
	font-size: 18px;
	text-shadow: none;
	padding-top: 4px;
}
 
.ssTable {
	margin-bottom: 10px;
}

.categoryRow td:first-child{
	padding-left:20px !important;
}

div.grippy::after {
  content: '.. .. .. ..';
}

.ssTable tbody>tr:not(:first-child):active{
	/*background-color: green !important;*/
} 

/* SAVE REORDERING BUTTON */

.save-order{
	margin-right: 3% !important;
    padding: 5px 15px !important;
    margin-bottom: -25px !important;
    border-radius: 5px !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
    font-size: inherit !important;
    margin-top: 10px;
}

.save-order i{
	font-size: 1.5em !important;
	padding-right: 8px !important;
}

/* INTL-TEL */

/* flag was in front of bottom icon selector section. Reverted this because flag was unclickable in user->add dropdown */
.intl-tel-input .selected-flag {
    /*z-index: 0 !important;*/
}

.ssFormSection {
	width: 90%;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 40px;
	max-width: 800px;
}

.ssFormSection span{
	font-family: "Open Sans";
    font-weight: 500;
}

.ssFormSection .ssKey{
	font-family: "Open Sans Bold";
	font-size: 14px;
}

.ssHaverForm .ssKey{
	color:#011b44;
}

.ssHaverForm .ssFormBlock{
	/*box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.22), 0 2px 20px 0 rgba(0, 0, 0, 0.22);*/
	border: 1px solid rgba(0,0,0.22);
	min-height: 200px;
    margin: 30px auto;
}

.ssHaverForm .ssFormBlock .col2{
	width: -webkit-calc(100% - 220px);
    width:    -moz-calc(100% - 220px);
    width:         calc(100% - 220px);
}

.ssHaverForm img{
	width: 100%;
    height: auto;
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.ssHaverForm .responsive_div_image{
	width:100%;
	height:100%;
	background-image: url();
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.haver_print{
	background-color: #011b44;
	border-radius: 5px;
	padding: 8px 10px;
	margin-bottom: 5px;
	color: white;
	cursor: pointer ;
	float: right;
	display: block;
}
.haver_print_container:after {
	 content: "";
  display: table;
  clear: both;
}

.ssHaverCoverImage {
	height:400px;
	display:block; 
	position:relative;
	margin: 25px auto;
}

body.drawer{
	/*overflow: initial !important;*/
	overflow: auto; 
}

.ssFormBlock .col{
	width: 50%;
    display: inline-block;
    vertical-align: middle;
}

.ssFormBlock .col1{
	line-height: 0;
	height: 200px;
	width: 200px;
	background-color: #2b2b2b;
    position: relative;
}

.ssFormBlock .col2{
	margin: 10px;
	vertical-align: top;
}

.proCheck-summary{
	font-family: Open Sans;
	font-size: 13px;
	margin-top: 20px;
}

.proCheck{
	width:90%;
	max-width: 900px;
	display:block;
	margin: 0 auto;
}

.haver-footer{
	width: 90%;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 800px;
}

.haver-footer span{
	display:block;
}

.haver-footer .info-section{
	margin-bottom:10px;
}

.haver-footer .info{
	font-family: "Open Sans";
}

.haver-footer .header{
	font-family: "Open Sans Bold";
}

.haver-footer.row{
	padding-left:0 !important;
	padding-right:0 !important;
}

.haver-footer.row .col{
	padding: 0 .75rem !important;
}

.logoBlock{
	text-align: center;
}
.haverLogo{
	width: 80%;
	max-width: 380px;
	margin: 0 auto;
	display:block;
	margin-top:10px;
}

.proCheckLogo{
	width: 80%;
	max-width: 131px;
	margin: 0 auto;
	display:block;
}

@media screen and (max-width: 635px) {
  body {
  }
}

/*-- SESSIONS --*/
#sessions-panel{
	background-color: #435363;
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 2px;
    width: 84%;
    padding: 5px 0;
    width: 950px;
    margin: 0 auto;
    margin-bottom: 100px;
}

#sessions-panel #session-tables table{
	width: 950px;
}

#sessions-panel input[type=text]:not(.browser-default){
	color: white;
}

.session-tabs{
	font-family: Open Sans ExtraBold;
	font-size: 18px;
	color:white !important;
	margin-top: 6% !important;
	left: 25px;
    width: 950px !important;
}

.wvShareHeader {
	z-index: 1337 !important;
}

.wvShareHeader #logoImage {
	right: 1% !important;
	left: auto !important;
}	

.wvShareContent{
	padding-left: 0 !important;
}

.loadMoreSessionsBtn {
	background-color: white;
    border-radius: 3px !important;
    padding: 5px 12px;
    font-family: Open Sans bold;
    color: black !important;
    margin: 15px auto !important;
    display: block;
    width: 150px;
    text-align: center;
}
#loadMoreTagged, #session-export {
	display: none;
}

@media only screen and (max-width: 992px) {
	.session-tabs{
	    width: 100% !important;
		left: 0;
		margin-top: 0 !important;
	}

	#sessions-panel{
		width: 100vw;
	}

	.wvShareHeader #logoImage {
		display:none;
	}	

	#sessions-panel #session-tables table {
		width: 100%;
	    min-width: 750px; 
	}
}

@media only screen and (max-width: 850px) {
	#sessions-panel .date-time .time {
		margin-left: 0.6em !important;
	}

	#sessions-panel .date-time label {
	    display: block !important;
	    margin-bottom: 10px;
	}
}

@media screen and (max-width: 749px) { 
	#sessions-panel {
	    margin:0
	}

	.session-tabs{
		margin-left: 0 !important;
		margin-top: 0 !important;
	}

	.session-tabs .tab{
		position: absolute;
		width:50%;
		margin-left:50% !important;
	}

	.session-tabs .tab{
		font-size: 16px;
	}

	.session-tabs .tab:first-child{
		margin-left:0 !important;
	}

}



.session-tabs a{
	color: rgb(255,255,255,0.2) !important;
	background-color: #435363;
	padding:0px 15px !important;
}

.session-tabs .active{
	color: rgb(255,255,255) !important;
}

/*this is refering to the buttons for selecting boxes*/
/*#sessions-panel>div>a{
	margin: 10px 20px;
	display:block;
}*/

#sessions-panel .session-notes{
	resize: none;
	color:white;
	width: 90%;
	border-width: 2px;
	padding:4px;
}

#sessions-panel span, #sessions-panel a{
	color: white;
}

#sessions-panel .events div{
	font-family: Open Sans;
	font-size: 12px;
	display:none;
}

#sessions-panel .events div:nth-child(-n+7){
	display: block;
}

#sessions-panel .tags .explain{
	margin-top: -4px;
    position: relative;
    font-size: 10px;
    display: block;
    font-style: italic;
    line-height: 1em;
}

#sessions-panel .events .product-text{
	color: white;
	text-indent:0em;
}

#sessions-panel .events .category-text{
	padding-left:1em;
	color:white;
	font-style: italic;
}

#sessions-panel .events .file-text{
	padding-left:2em;
	font-family: Open Sans Bold;
	color:white;
}

#sessions-panel .client-email label{
	margin-top:12px;
    height: 15px;
}

#sessions-panel .client-email input[type=email] {
    color: white;
    height: 30px;
    width: 180px;
    font-size: 12px;
}

#sessions-panel .selected-sessions {
	font-family: Open Sans Bold;
    font-weight: 800;
    width: 210px;
    display: block;
    margin-left: 15px !important;
    margin: 10px 0;
    opacity: 0.3;
    pointer-events: none;
}

#sessions-panel .selected-sessions.active{
	opacity: 1;
	pointer-events: auto;
}

#sessions-panel .selected-sessions i {
	font-size: 1.5em;
	margin-right: 5px;
}

#sessions-panel .save-record{
	font-family: Open Sans ExtraBold;
    font-size: 14px;
    color: #435363;
    background-color: white;
    border-radius: 3px;
    padding: 5px;
    display: block;
    width: 110px;
    pointer-events: none;
    opacity: 0.3;
}

#sessions-panel .save-record.active{
	pointer-events: auto;
	opacity: 1;
}

#sessions-panel .save-record i{
	display: block;
    float: left;
    margin-top: 8px;
    margin-left: 0;
    margin-right: 10px;
   	font-size: 2em;
}

#sessions-panel .date-time label{
	display:inline;
}

#sessions-panel .date-time .date{
	font-family: Open Sans Bold;
    top: -8px;
    margin-left:0.5em;
    position: relative;
}

#sessions-panel .date-time .time{
	font-family: Open Sans;
    font-size: 11px;
    margin-left: 3.6em;
    top: -12px;
    position: relative;
}

#sessions-panel #tagged-sessions .date-time .time{
	margin-left: 1em;
}

#sessions-panel .date-time .checkbox{
	margin-right: -14px;
}

#sessions-panel p, #sessions-panel #session-tables td{
	color:white;
	font-family:Open Sans;
	font-size: 12px;
}

#sessions-panel #session-tables thead{
	background-color: rgb(0,0,0,0.2);
}

#sessions-panel #session-tables thead th{
	font-family: Open Sans ExtraBold;
	font-size: 1.2em;
	color: white;
	background: transparent;
	width: 190px;
}

#sessions-panel thead th:first-child{
	padding-left:15px;
}

#sessions-panel [type="radio"]:not(:checked)+span:before, #sessions-panel [type="radio"]:not(:checked)+span:after {
    border: 2px solid white !important;
}

#sessions-panel [type="checkbox"]:not(:checked)+span:before, #sessions-panel [type="checkbox"]:not(:checked)+span:after {
    border: 2px solid white !important;
    margin-top: 10px;
}

#sessions-panel [type="checkbox"]:checked+span:not(.lever):before {
    margin-top: 10px;
}

#sessions-panel .checkboxSubLabel{
	font-family: Open Sans;
	font-size: 12px;
	margin-left: 10px;
}

#sessions-panel .email-header{
	display:none;
}

.session-block:nth-child(even) {
  	background-color: rgb(0,0,0,0.1);
}

#session-tables .session-block td{
    vertical-align: top;
}

.session-block button {
	padding: 2px 10px;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
    margin-top: 5px !important;
    width: 100%;
    cursor: pointer;
}

#session-export {
	    margin: 0 3vw;
}

#session-export input[type=submit], #sessionTaggerViewSwap{
    font-family: Open Sans ExtraBold;
    font-size: 14px;
    color: #435363;
    background-color: white;
    border-radius: 3px;
    padding: 5px;
    display: block;
    width: 110px;
    cursor: pointer;
    margin: 10px 0;
}

#sessionTaggerViewSwap{
	width: 200px;
	margin-left: 15px;
	text-align:center;
}

#sessions-panel #session-export [type="checkbox"]:not(:checked)+span:before, #sessions-panel #session-export [type="checkbox"]:not(:checked)+span:after{
	margin-top: 5px !important;

}

td.invoiceItemTitle {
	font-family: 'Open Sans Bold';
	width:300px;
}

td.invoiceItemUnitCost, td.invoiceSummaryValue {
	width:200px;
}

td.invoiceItemDescription {
	text-align: left;
}

#invoiceTable, #invoiceSummaryTable {
	font-size: 1.2em;
	font-family: 'Open Sans';
}

#invoiceSummaryTable {
	border-top: 2px solid #4d4d4d;
}

td.invoiceSummaryTitle {
	text-align:right;
	font-family: 'Open Sans Bold';
	padding-right:15px;

}

#applicationInvoiceSelector {
	width: 200px;
}