body, #mainWrapper {
	height: 100%;
	padding:40px;
	background-color: #EFEFEF;	
}

body { 
    padding-top: 65px; 
    margin: 0;
    margin-bottom: 0px;
}

body, .image-select {
	height: 100%;
	/*padding: 0;*/ 
	background-color: #EFEFEF;	
}

body, #mainWrapper, .form-control{
	font-size:12px!important;
	
	-webkit-border-radius: 0px;
     -moz-border-radius: 0px;
          border-radius: 0px;
}

* {
  -webkit-border-radius: 0 ;
     -moz-border-radius: 0 ;
          border-radius: 0 ;
}



#mainWrapper {
	height: 100vh; 
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
	
	
}

.panel-transparent {
	background-color: rgba(21,86,103,0.6); 
}

.panel-full-transparent {
	background-color: rgba(0,0,0,0); 
}

.form-container {
  position:fixed;
  width:70%;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #9f9f9f;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-container-floating {
  float:left;
  width:80%;
  margin-left: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #9f9f9f;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.user-setup-container {
  position:fixed;
  width:100%;
  height:70%;
  padding: 2px;
  background-color: #fdfdfd;
  border: 1px solid #b90923;
/*border-radius: 4px; */
}

.first-line-bold::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

.floatRight{
	float:right;
	margin-right: 18px;
}

.floatLeft{
	float:left;
	margin-leftt: 18px;
}

.floatBelow {
	 width:70%;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: transparent;
	float:left; 
	clear:both;
}

.Centered
{
    display:block;
    vertical-align: middle;
    margin:auto;
    top: 50%;
  	position: relative;
    transform: translateY(-50%);
}

.center-with-flex {
/*	min-height: 100%;   Fallback for browsers do NOT support vh unit */
 /* min-height: 100vh;  These two lines are counted as one :-)       */
	
	display: flex;
    align-items: center;
}

.popup {
    background:white;
    box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.3);
    border-radius:2px;
    color:#111111;
    padding:4px;
}

.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.has-error{
	color:#ffffff;
}

.success{
  position:fixed;
  width:70%;
  margin-left: 50px;
  margin-top:20px;
  padding: 20px;
  background-color: #E1E1E1;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.box {
    padding: 0 5px 0 5px;
}

.row-black {
	border-radius: 3px 3px 3px 3px;
	margin-right: -15px;
  	margin-left: -15px;
  	background-color:#2d2d2d;
  	color:#ffffff;
  	
}

.row-white {
	border-radius: 3px 3px 3px 3px;
	margin-right: -15px;
  	margin-left: -15px;
  	background-color:#ffffff;
  	color:#2d2d2d;
  	
}

.row-contrast {
	background-color:#ffffff;
  	color:#2d2d2d;
  	
}

.my-scroller-thumbnail {
    position: relative;
    overflow: hidden;
    max-height:50px;
    opacity: 0.8
}

.my-scroller-caption {
	position: absolute;
    top: 30%;
    left: 10;
	width: 100%;
	color: #bbb;
	
}

.my-scroller-indicator{
	display: inline-block;
	background-color: #d2d2d2;
    width: 60%;
    padding-top: 5%; 
    
}

.my-scroller-indicator-piece{
	float: left;
	background-color: #121212;
    width: 33%;
    padding-top: 5%; 
    
}

.navbar .img-thumbnail {
	padding: "1px 2px";
	margin: 0 auto;
}

#authmessagedisplay {
	color:#efefef;
	vertical-align: middle;
	float:none;
    display:inline-block;
}

.auth-image-main-container {
/*	width: 95vw;
  height: 90vh;
  margin-left: 10px;
  padding-top: 10px; */
  text-align: 'center';
}

#auth-image-main-container-id.landing-main {
	padding:5px;
}

#home-page-id.landing-main h3 {
	color: #747474;
}
#secure-page-id.landing-main {
	bottom:0;
}

#public-page-id.landing-main {
	bottom:0;
}



.auth-header-row {
 margin: 0px auto;
   position:relative;
}

#auth-progress-display {
	position:absolute;
	text-align:'center';
	width:100%;
	height:100%;
}

#auth-progress-display canvas {
	display: block;
	margin-left: auto; 
	margin-right: auto;
}

.auth-image-main-container img {
	display: block;
	margin-left: auto; 
	margin-right: auto;
}

.auth-image-main {
	position:inline-block;
	width:100%;
	height:100%;
	display:'none';
	vertical-align: middle;
	

}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {

	.auth-image-main img{	    
	 	position: fixed;
	 	display: inline-block;
	    margin: 0 auto;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: auto;
	    max-width: 99%;
	    max-height: 99%;
	    vertical-align: middle;
	}
	
	
}


/* For devices 500px and smaller: */
@media only screen and (max-device-width: 500px) {
	
.card {
	padding: 1px 1px!important;
}

.admin-card {
	padding: 1px 1px!important;
}

.bottom-align {
	position: absolute;
    bottom:30px;
    width:100%;
}

.bottom-align-flake-page {
	position: fixed;
    bottom:75px;
    width:100%;
}

.auth-image-main img{	    
	 position: fixed;
	    margin: auto;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	   width: 99%;
    	height: auto;
	    vertical-align: middle;
	}
	
	.landing-main {
	  position: absolute;
		width:100%;
		height: inherit;
		top:5px;
		right:0;
		bottom:0;
		/*background: #000;
		background:rgba(0,0,0,0.7);
		background-color: #efefef; *//* #686868*/
		overflow:auto;
		color: white;
	}
	
	
}

.landing-main.landing-main {
	
	top:35;
	/*max-height: calc(100vh - 112px)!important; */ /*50+22+35*/
}

#displayloadingcontainer {
	position:absolute; 
	display:none;
	margin:auto; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	width: 200px; 
	height: 40px ;
	z-index: 10600;
}

#auth-photos {
  /* Prevent vertical gaps */
  line-height: 0;
  max-height: calc(100vh - 87px); /*50+22*/
  width: calc(100vw - 12px); 
  z-index: 101;
  
  -webkit-column-count: 3;
  -webkit-column-gap:   0px;
  -moz-column-count:    3;
  -moz-column-gap:      0px;
  column-count:         3;
  column-gap:           0px;  
}

#auth-photos img {
  /* Just in case there are inline attributes */
  width: 100% ;
  height: auto ;
  /*border: 2px solid #ddd;*/
  padding: 1px;
}

@media (max-device-width: 1200px) {
  #auth-photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
  
  .attached-file-preview {
		min-height: 60px;
		min-width: 60px; 	
		background-color: #f4f4f4;
	}
}
@media (max-device-width: 1000px) {
  #auth-photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
  
.attached-file-preview {
		min-height: 60px;
		min-width: 60px; 	
		background-color: #f4f4f4;
	}
}
@media (max-device-width: 800px) {
  #auth-photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
  
  .attached-file-preview {
		min-height: 45px;
		min-width: 45px; 	
		background-color: #f4f4f4;
	}
}
@media (max-device-width: 400px) {
  #auth-photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
  
  .width-22 {
  	width: 100%;
  }
  
  .attached-file-preview {
		height: 22px;
		width: 22px; 	
		background-color: #f4f4f4;
	}
}


.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}


.top-buffer { 
	margin-top:3%; 
}

.blur {
	box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
	transform: scale(0.9);
	opacity: 0.7;
}

.blur p{
	text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
	color: rgba(51, 51, 51, 0);
	opacity: 0.5;
}

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

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

.fade-in {
  animation: fadeIn .5s ease-in;
}

.is-paused {
  animation-play-state: paused;
}


.vbottom{
    position: absolute;
    bottom: 62px;
    /*top: 100%;*/
    transform: translateY(-100%); 
    float: none;
}


.footer {
  background-color: #033445; /*#282828*/
  position: fixed;
  margin-bottom: 0px;
  bottom: 0;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 22px;
  color: #bbbbbb;
 
}

#app {
	opacity: 0.2;
	transition-timing-function: ease;
   /*padding:10px;*/
   padding-bottom:22px;   /* Height of the footer */
   padding-top:50px;
   overflow: auto;
}

#app.show-na {
	transition-timing-function: ease;
	opacity: 1;
	transition: opacity 2s;
	
}

#app.hide-na {
	transition-timing-function: ease;
	opacity: 0.2;
	transition: opacity 2s;
	
}


.panel-low {
  /*background-color: #155667; /*#484848*/
  position: fixed;
  bottom: 0;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 65px;
  border-width: 0 0 0px;
  color: white;
}

.panel-center {
  /*background-color: #155667; /*#484848*/
  position: absolute;
  z-index: 20;
  top: 50%;
  transform: translateY(50%);
  left: 0px;
  right: 0px;
  width: 100%;
  height: 65px;
  border-width: 0 0 0px;
  color: white;
}

.panel-default p {
	color:#666666;
}

.panel-default h2 {
	color:#333333;
}

.sr-only-focusable-below {
    position: relative;
    left: auto;
    right: auto;
}



/*.nav li a:not(.thin-anchor, navbar-right) {
	padding: 8px 12px;
	width: 50px;
	height: 50px;
}*/

.thin-anchor {
	padding-bottom: 5px!important;
}

.navbar-nav li a.na-header-anchor {
	line-height: 10px;
}

.panel-dark {
  background-color: #155667; /*#484848*/
  color: white;
}

.panel-semi-dark {
	background-color: #737373; /*#484848*/
  color: white;
}
.panel-semi-dark p {
	color: white;	
}

.panel-semi-dark h4 a {
	color: #ebebeb;	
}

.panel-semi-dark h5 a {
	color: #ebebeb;	
	
}

.panel-semi-dark p a {
	color: #ebebeb;	
}

.panel-semi-dark .bg-danger {
	color: #090909;	
}

.panel-semi-dark .bg-info {
	color: #090909;	
}

.panel-semi-dark .bg-warn {
	color: #090909;	
}

.panel-semi-dark .bg-warn a {
	color: #696969;	
}

.panel-semi-dark .modal-dialog {
	color: #090909;	
}

.panel-semi-dark .modal-dialog p {
	color: #090909;	
}

.invisible-div {
	
  	visibility:hidden;
}

.hide-this {
	display:none;
}


.modal-right {
    position: absolute;
    right: 10%;
}

.panel-word-wrap {
  word-wrap: break-word;
  overflow-wrap:break-word;
}

.empty-header {
	background-color: #599aab; /*#888888*/
	border-width: 0 0 0px;
	color: #ebebeb;
	
}


.empty-header h4 a{
	color: #ebebeb;	
}

.panel-dark h4 a {
	color: #ebebeb;	
}



.landing-main {
  position: absolute;
width:100%;
/*max-height: calc(100vh - 112px)!important; */
top:50px;
right:0;
bottom:0;
/*background: #000;
background:rgba(0,0,0,0.7);
background-color: #efefef; *//* #686868*/
overflow:auto;
color: white;
}

.landing-main .modal {
	color: #333333
}

.landing-main .modal-header {
	color: #434343
}

.pwd-header-image {
	width: 50px;
	height: 50px;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #eeeeee;
    padding: 10px 10px;
    position: relative;
}


.card:hover {
	background-color: #7aaccd;
	color: #ffffff !important;
}

.card a:hover {
	color: #ffffff !important;
}

.card:hover a {
	color: #ffffff !important;
}

.card a:active {
	color: #ffffff;
}

.card a:visited {
	color: #77adbb;
}

.active-card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #77adbb;
    color: #ebebeb !important;
    padding: 10px 10px;
    position: relative;
}

.active-card:hover {
	background-color: #7aaccd;
	color: #ffffff !important;
}

.active-card a:hover {
	color: #ffffff !important;
}

.active-card:hover a {
	color: #ffffff !important;
}

.active-card a:active {
	color: #ffffff;
}

.active-card a:visited {
	color: #ebebeb;
}


.admin-card {

    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: #eeeeee;
    color: #f40b86 !important;
    padding: 10px 10px;
    position: relative;
}

.admin-card:hover {
	background-color: #f96288;
	color: #ffffff !important;
}

.admin-card a:hover {
	color: #ffffff !important;
}

.admin-card:hover a {
	color: #ffffff !important;
}

.admin-card a:active {
	color: #ffffff;
}

.admin-card a:visited {
	color: #f40b86;
}

.bottom-align {
	position: fixed;
    bottom:90px;
    width:100%;
}

@media (min-device-width: 600px) {
	.bottom-align-flake-page {
		position: fixed;
	    bottom:30px;
	    width:33%;
	    
	}
}

.field-icon {
  float: right;
 /* margin-left: -25px;*/
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.user-create-form {
	background-color: #155667;
}

.message-by-self {
	background-color: #dedede;
	margin: 2px;
}

.message-by-other {
	background-color: #cdcdcd;
	margin: 2px;
}

#canvasdiv {
        /* This could be done in one single declaration. See the extended sample. */
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }
    
#app {
	height: calc(100vh - 72px); /*50+22*/
}
    
.indicator-card {    
    transition: 0.3s;
    background-color: #eeeeee;
    padding: 2px 3px;
    position: relative;
    width:100%;
   	max-height: 50px;
}

.indicator-card:hover {
	background-color: #7aaccd;
	color: #ffffff !important;
}

.indicator-card a:hover {
	color: #ffffff !important;
}

.indicator-card:hover a {
	color: #ffffff !important;
}

.indicator-card a:active {
	color: #ffffff;
}

.indicator-card a:visited {
	color: #77adbb;
}

.one-click-indicator {   
	
	border-left:solid #155667 2px;
    
}


.two-click-indicator {   
	
	border-left:solid #155667 2px;
    border-bottom:solid #155667 2px;    

}

.three-click-indicator {   
	
	border-left:solid #155667 2px;
    border-right:solid #155667 2px;
    border-bottom:solid #155667 2px;    

}

.four-click-indicator {   
	
	border-left:solid #155667 2px;
    border-right:solid #155667 2px;
    border-top:solid #155667 2px;
    border-bottom:solid #155667 2px;
    

}

.one-click-indicator-full {   
	
	border-left:solid #155667 4px;
    
}


.two-click-indicator-full {   
	
	border-left:solid #155667 4px;
    border-bottom:solid #155667 4px;    

}

.three-click-indicator-full {   
	
	border-left:solid #155667 4px;
    border-right:solid #155667 4px;
    border-bottom:solid #155667 4px;    

}

.four-click-indicator-full {   
	
	border-left:solid #155667 4px;
    border-right:solid #155667 4px;
    border-top:solid #155667 4px;
    border-bottom:solid #155667 4px;
    

}

.image-scroller-selected {
	background-color: #77adbb;
}

#imgholderdiv {
	max-width: calc(100% - 10px);
	max-height: calc(100% - 6px);
	margin: 0 auto;	
}


.panel-image-scoller {
	border:0;
	box-shadow: none;
}


ul.nav a:hover { 
	background-color: #599aab !important; 
	}
	



.clicked-once {
	
	pointer-events: none;
   cursor: default;
   -webkit-transition: all 1s ease-in;
   -moz-transition: all 1s ease-in;
   -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;

	transform: scale(0.8);
	opacity: 0.9;
	
}



.avatar-timer-display-small {
	border-radius: 50% !important;
	display: table-cell;
	vertical-align: middle;
	 text-align: center;
	 line-height: 0;
	/*padding:50%;	
    position:relative;*/
    
	behavior: url(PIE.htc); /* remove if you don't care about IE8 */
	width: 60px;
    height: 60px;
    background: #599aab;
    font-weight: bold;
   
}

.avatar-timer-display-med {
	
  background: #599aab;
}


    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }


.modal-image-display {
	max-width: 100%;
    width: auto !important;
    display: inline-block;
}

.modal-content-copy {
	position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

#no-key-alert-holder {
	display: none;
}

.filecontentlink {
	
}


#securedata-sites .row .col-xs-12 p{
	color: #353535;
}

#searchresults .panel p {
	color: #353535;
}

#securedata-sites .col-xs-2 p{
	color: #353535;
}


#securedata-fin .row .col-xs-12 p{
	color: #353535;
}

#securedata-fin .card p{
	color: #353535;
}

#securedata-oth p{
	color: #353535;
}


#re-auth-overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-color: rgba(3,3,3,0.6); /* Black background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 1px;
}

#createuser-flake-overlay, #box-instruct-overlay, #image-reset-overlay, #image-hotspot-overlay,
#app-notifications-overlay, #app-notify-dialog, #minbox-instruct-overlay, 
#recover-account-overlay, #vault-key-overlay, #vault-page-key-overlay, #flake-details-overlay, #app-timeout-notify-dialog 
, #do-comment-overlay, #createuser-mobile-overlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-color: rgba(3,3,3,0.7); /* Black background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 5px;
     text-align: center;
}

#topic-welcome-overlay {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    background-color: rgba(8,8,8,0.3); /* very light background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 5px;
     text-align: center;
}

#full-post-display, #url-in-app-display, #topic-in-app-display, #public-ref-display {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: calc(100% - 60px); /* Full width (cover the whole page) */
    height: calc(100% - 40px); /* Full height (cover the whole page) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fafafa; /* white background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 5px;
     /*text-align: center;*/
}

@media (max-device-width: 400px) {
	
	#full-post-display, #url-in-app-display, #topic-in-app-display, #public-ref-display {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: calc(100% - 14px); /* Full width (cover the whole page) */
    height: calc(100% - 10px); /* Full height (cover the whole page) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fafafa; /* white background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 2px;
     /*text-align: center;*/
}
}

.effect7
{
    position:relative;
   
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
  content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
  right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}


#url-over-app-display {
    position: absolute; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 90%; /* showing app in background */
    height: 95%; /* (showing app in background) */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(256,256,256, 1); /* white background with opacity */
    z-index: 1051; /* Specify a stack order in case you're using a different order for other elements, higher than navbar 1030 */
     cursor: default;
     padding: 5px;
     /*text-align: center;*/
}


#cu-flake-input {
	font-size: 19px!important;
}

#indiv-post-text-input , #msg-flake-input-div {
	font-size: 18px!important;
	color: #636363!important;	
	min-height:35px;
	width:100%;
    overflow: hidden
}

.attached-file-preview img {
	opacity:1;
	position: absolute;
	
}

.attached-file-preview div {
	opacity:1;
	position: absolute;
	
}



.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#re-auth-overlay .container .auth-image-main {
	position: fixed;
	display: none;
 	width:95%;
     height:95%;
     margin: auto;
     background-color: rgba(2,2,2,0.6);
      z-index: 1052 ; 
     /*border:1px solid #000;*/
     top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
     /*cursor: none;*/
}

#re-auth-overlay .container .auth-image-main img{
     z-index: 1052; 
    margin-left: auto;
    margin-right: auto;
 position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: default;
}

#reauth-message {
	position:fixed;
	width:100%;
	z-index: 1053; 
	margin:auto;
	color: white;
    
}

#searchresults .panel-thin:hover a p {
	 color:#0ae;
}


#searchresults .panel-alias-display p {
	 font-style: italic;
	 color: #898989;
}

#searchresults .panel-semi-dark p {
	 color: #dedede;
}

.panel-thin {
	
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	padding: 3px;
	margin-bottom: 8px;
}

.panel-footer p {
	color: #898989;
}

.panel-body-thin {
  padding: 3px;
}

.sigma-mouse {
	left:0;
}

.sigma-scene {
	left:0;
}

.bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  
.header-link-with-border {
	border: 1px solid #888;
}


.indiv-home-img-nav {
	height: 400px;
	width: 20px;
	background-color: #c0c0c0;
}

.indiv-home-img {
	height: 200px;
	width: 300px;
	background-color: grey;
	object-fit:cover;
	margin: 0 auto;
}

.org-home-img-container {
	overflow: hidden;
}

.home-banner-img-container{
	overflow: hidden;
}

.org-home-img {
	position: absolute;
    /*top: 5px;*/
    height: 200px;
	width: 100%;
	object-fit:cover;
	margin: 0 auto;
	background-color: grey;
}

.fixed {position: fixed !important; }

.fixed-row {
	position: fixed !important; 
	z-index: 10;
  	width: inherit;
}

.width-22 {width: 22%}

.width-44 {width: 44%}



.scrollable {}

.org-home-main {
	
	background-color: white;
	z-index: 10;
	top: 30px;
}


.iframe-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .iframe-container iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }
/*#attached-file-preview {
	min-height: 60px;
	min-width: 60px; 	
	background-color: #f4f4f4;
}*/

#loading-box {
  display:none;
  width: 120px;
  height: 20px;
  margin: auto;
  padding: 1px;
  float: left;
  background: #a9a9a9;
  overflow: hidden;
  z-index: 90;
  position: absolute;
  opacity: 0.8;
  box-shadow: 2px 2px 1px "#e1e1e1";
}


/* Topic autocomplete related */

.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  /*background-color: DodgerBlue;*/
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}

#topic-posts-display {
	color: #545454;
}

#flake-posts-display {
	color: #545454;
}

div[class*='stack'] {
 /*float: left;
*/
 position: relative;
 /*margin: 50px;*/
 
}

.welcome-highlights {
	position:relative;
	margin: auto;
 	 width: 50%;
 	  z-index: 250;
	color: #787878;
	
}

#highlights-holder {
 /* width: 100%;
 z-index: 25000;*/
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 25%;
  padding: 10px;
  
}

.limit-min-max {
  font-size: 3vw;
}
@media (max-width: 666.6666666667px) {
  .limit-min-max {
    font-size: 35px;
    line-height: 80%;
  }
}
@media (min-width: 1666.6666666667px) {
  .limit-min-max {
    font-size: 65px;
  }
}

.limit-min-md {
  font-size: 2vw;
}
@media (max-width: 666.6666666667px) {
  .limit-min-md {
    font-size: 24px;
    line-height: 70%;
  }
}
@media (min-width: 1666.6666666667px) {
  .limit-min-md {
    font-size: 50px;
  }
}

.limit-min-sm {
  font-size: 1vw;
}
@media (max-width: 666.6666666667px) {
  .limit-min-sm {
    font-size: 15px;
    line-height: 60%;
  }
}
@media (min-width: 1666.6666666667px) {
  .limit-min-sm {
    font-size: 35px;
  }
}
 
.stack1:before {
/* content: "";
 height: 100%; width: 100%;
 background: #eff4de;
 
 
 position: absolute;
 z-index: -1;
 top: 0px;
 left: -10px;
 
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
 */
}

.stack1:after {
	/*
 content: "";
 height: 100%; width: 100%;
 background: #768590;
 
 position: absolute;
 z-index: -1;
 top: 5px;
 left: 0px;
 -webkit-transform: rotate(2deg);
 -moz-transform: rotate(2deg);
 -o-transform: rotate(2deg);
 -ms-transform: rotate(2deg);
 transform: rotate(2deg);
 */

}

#populartopicsinhexagon {
	display: flex;
  justify-content: center;
  width: 50%;
  z-index: 50;
  margin: 0 auto;
  padding: 10px;
  height: 20%;
}

.hexagon {
    overflow: hidden;
     
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    
    }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-color: #dedede;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
    }
.hexagon-in2:hover {
    background-color: #ffffff;
    }

.hexagon-horizontal {
    width: 100px;
    height: 50px;
    margin: 0 0 0 -80px;
     z-index: 10;
    }
.hexagon-vertical {
    width: 50px;
    height: 100px;
    margin: -80px 0 0 20px;
     z-index: 10;
    }
 
 .welcome-topic {
	position: absolute;
	z-index: 200;
}   

.circle {
	width: 20px;
    height: 20px;
    background: red;
    z-index: 75;
   border-radius: 50% !important;
   /*border: 3px solid #dbdbdb;*/
}
.outer-circle {
	width: 14px;
    height: 14px;
    background: yellow;
    z-index: 55;
   border-radius: 50% !important;
}


.circle-remote {
	width: 6px;
    height: 6px;
    background: red;
   border-radius: 50% !important;
   animation: shrinking-circle 2s ;
}

.circle-remote:hover .display-on-parent-hover{
	display: block;
}

.circle-border-expanding-circle {
	 -webkit-animation: expanding-circle 2s infinite;
	-moz-animation:   expanding-circle 2s infinite;
	-o-animation: expanding-circle 2s infinite;	
	 animation: expanding-circle 2s infinite;
}

.circle-border-color-animated {
		 -webkit-animation: circle-border-color 2s infinite;
  -moz-animation:   circle-border-color 2s infinite;
  -o-animation: circle-border-color 2s infinite;	
   animation: circle-border-color 2s infinite;
}
.circle-remote-animated {
	 -webkit-animation: shrinking-circle 2s ;
  -moz-animation:   shrinking-circle 2s ;
  -o-animation: shrinking-circle 2s ;	
   animation: shrinking-circle 2s ;
}

@keyframes shrinking-circle {
	0% {transform: scale(5)}
	100% {transform: scale(0.9)}
}

@-webkit-keyframes shrinking-circle {
  0% {transform: scale(5)}
  100% {transform: scale(0.9)}
}

@-moz-keyframes shrinking-circle {
  0% {transform: scale(5)}
  100% {transform: scale(0.9)}
}

@-o-keyframes shrinking-circle {
  0% {transform: scale(5)}
  100% {transform: scale(0.9)}
}

@keyframes expanding-circle {
	0% {transform: scale(1)}
	100% {transform: scale(1.2)}
}

@-webkit-keyframes expanding-circle {
	0% {transform: scale(1)}
	100% {transform: scale(1.2)}
}

@-moz-keyframes expanding-circle {
	0% {transform: scale(1)}
	100% {transform: scale(1.2)}
}

@-o-keyframes expanding-circle {
	0% {transform: scale(1)}
	100% {transform: scale(1.2)}
}

@keyframes circle-border-color {
	0% {border: 3px solid #eaeaea;}
	100% {border: 3px solid #989898;}
}

@-webkit-keyframes circle-border-color {
	0% {border: 3px solid #eaeaea;}
	100% {border: 3px solid #989898;}
}

@-moz-keyframes circle-border-color {
	0% {border: 3px solid #eaeaea;}
	100% {border: 3px solid #989898;}
}

@-o-keyframes circle-border-color {
	0% {border: 3px solid #eaeaea;}
	100% {border: 3px solid #989898;}
}
    
.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #888;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #ddd;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  
  color: #eee;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  
  color: #eee;
  background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #337ab7;
}


video {
     /* min-width: calc(70% - 20px);
      min-height: calc(70% - 20px);
      margin: 0 50px;
      box-sizing: border-box;
      border-radius: 2px;
      padding: 0;
      background: white;*/
    }
    
    
 @keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0.4; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.4; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.4; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0.4; }
  100% { opacity:1; }
}
.fadeInOut {
   -webkit-animation: flickerAnimation 2s infinite;
   -moz-animation: flickerAnimation 2s infinite;
   -o-animation: flickerAnimation 2s infinite;
    animation: flickerAnimation 2s infinite;
}


@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}
@keyframes fadeinout {
  50% { opacity: 1; }
}
@-o-keyframes fadeinout{
   50% { opacity: 1; }
}
@-moz-keyframes fadeinout{
   50% { opacity: 1; }
}

.welcomehighlightsfadeInOut {
	opacity: 0;
   -webkit-animation: fadeinout 2s linear forwards;
   -moz-animation: fadeinout 2s linear forwards;
   -o-animation: fadeinout 2s linear forwards;
    animation: fadeinout 2s linear forwards;
}

.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}

#contactmodal {
	position: absolute;
  right:5%;
  bottom:5%;
 
}

.red-border {
	border: 2px solid red;
}

.yellow-border {
	border: 2px solid yellow;
}

.center {
    display:table-cell;
    vertical-align:middle;
    float:none;
}

.bg-steel-grey {
	background-color: #696a6f;
}

.gray-scale {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

/*.expand-closed {
	max-height: 0;
	transition : max-height .6s ease-out;
}*/



.expand {
	max-height: 0;
  	overflow: hidden;
  	transition: max-height .6s ease-in;
}

.expand-open {
	max-height: 200;
  	overflow: hidden;
  	/*transition: max-height 2s ease-out;*/
}


.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon img {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon img  { left:  0px;}
.right-addon img { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }


@keyframes slide {
  from { left:100%; transform: translate(0, 0); }
  to { left: -100%; transform: translate(-100%, 0); }
}
@-webkit-keyframes slide {
  from { left:100%; transform: translate(0, 0); }
  to { left: -100%; transform: translate(-100%, 0); }
}

@keyframes drop {
 	from { top: -100%; transform: translate(0,-100%); }
  	to { top:0; transform: translate(0, 0); }  
}
@-webkit-keyframes drop {
  from { top: -100%; transform: translate(0,-100%); }
  	to { top:0; transform: translate(0, 0); }  
}

.marquee { 
  color: #121212; 
  background:#f0f0f0;
  height: 20px;
  overflow:hidden;
  position:relative;
}

.marquee-text {
  position:absolute;
  top:0;
  white-space: nowrap;
 
  animation-name: slide;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  -webkit-animation-name: slide;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: 1;
}

.marquee-text-drop {
  position:absolute;
  left:0;
  white-space: nowrap;
 
  animation-name: drop;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: 1;
}

.attention-word-vertical {
	writing-mode: vertical-rl;
  text-orientation: upright;
 position: absolute;
  
  max-height: 50%;
   
   color: #a8a8a8;
}

.attention-image-vertical {
	position: absolute;
  
   
   background-color: #a8a8a8;
}



	.circle-to-rect {
	  position: fixed;
		top: 70%;
		left: 20%;
	/*  width: 60px;
	  height: 60px;*/
	  border-radius: 50%;
	  overflow: hidden;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background-color: #a15d98;
	/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); // Add box shadow for depth */
	}


	.circle-to-rect img {
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
	  position: absolute;
	  top: 0;
	  left: 0;
	  opacity: 1;
	  transition: opacity 0.5s cubic-bezier(.42,.97,.52,1.29);
	}

	.circle-to-rect:before {
	  content: "";
	  display: block;
	  padding-top: 100%;
	}


	.circle-to-rect .text-container {
	  position: absolute;
		color: #f2f2f2;
	  /*top: 50%;
	  left: 50%;
	  transform: translate(-50%, 50%);
	  */
	  text-align: center;
	  opacity: 0;
		display: none;
	  visibility: hidden;
	  z-index: 2;

	}


@keyframes cf4aFadeInOut {
 0% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  75% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes cf4aFadeInOut {
  0% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  50% {
    opacity:0;
  }
  75% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

.cf4a img {
  animation-name: cf4aFadeInOut;
  animation-duration: 1.8s;
  animation-iteration-count: 1;
 /* animation-direction: alternate;*/
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.cf4a img:nth-of-type(1) {
  animation-delay: 1.8s;
  
}
.cf4a img:nth-of-type(2) {
 animation-delay: 1.5s;
  
}
.cf4a img:nth-of-type(3) {
  animation-delay: 1.2s;
  
}
.cf4a img:nth-of-type(4) {
 animation-delay: 0.9s;
}
.cf4a img:nth-of-type(5) {
 animation-delay: 0.3s;
}