hr.thin {
    height: 1px;
    border: 0;
    color: crimson;
    background-color: crimson;
    width: 50%;
}


.charAppend {
    padding: 3px;
    font-size: 20px;
}

section {
  height:70%;
  background-color:#2B2B2A;
}

section input {
  display:block;
  height:52px;
  width:800px;
  margin:10px auto;
  outline:none;
  background-color:transparent;
  border:none;
  border-bottom:1px solid #2B2B2A;
  padding:0;
  font-size:42px;
  color:#eee;
}

#messages {
  background-color:rgba(0, 0, 0, 0.5);
  /*background-color:#232323;*/
  padding:15px;
  height:100%;
  /*width:800px;*/
  margin:0 auto;
  overflow-y:auto;
}

#messages p {
  margin:5px 0;
  padding:0;
}

.info {
  margin:5px 0;
  font-style:italic;
}

.message-container {
  margin:5px 0;
  color:#fff;
}

.message-container .username {
  display:inline-block;
  margin-right:5px;
  font-weight:bold;
  color:#849091;
}

.me, .username.me {
  font-weight:bold;
  color:crimson;
}

.message-container .username.me {
  display:inline-block;
  margin-right:5px;
}


#snackbarJumpNext{
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 80px; /* Set a default minimum width */
    margin-left: -50px; /* Divide value of min-width by 2 */
    background-color: rgba(153, 0, 0, 0.5); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 85%; /* Center the snackbar */
    bottom: -10px; /* 30px from the bottom */
    height:100px;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbarJumpNext.show {
    visibility: visible; /* Show the snackbar */
}


.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav a {
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

div#wave_0 {
  position: relative;
  margin-top: 15px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}



div#wave_0 .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: dimgray;
  animation: wave 1.5s linear infinite;
}

div#wave_0 .dot:nth-child(2) {
  animation-delay: -1.1s;
}

div#wave_0 .dot:nth-child(3) {
  animation-delay: -0.9s;
}

div#wave_1 {
  position: relative;
  margin-top: 15px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
div#wave_1 .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: dimgray;
  animation: wave 1.5s linear infinite;
}
div#wave_1 .dot:nth-child(2) {
  animation-delay: -1.2s;
}
div#wave_1 .dot:nth-child(3) {
  animation-delay: -1.0s;
}


div#wave_2 {
  position: relative;
  margin-top: 15px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
div#wave_2 .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 3px;
  background: dimgray;
  animation: wave 1.5s linear infinite;
}
div#wave_2 .dot:nth-child(2) {
  animation-delay: -1.3s;
}
div#wave_2 .dot:nth-child(3) {
  animation-delay: -1.1s;
}


@keyframes wave {
  0%, 60%, 100% {
    transform: initial;
  }
  30% {
    transform: translateY(-15px);
  }
}


.flexContainer {
    display: flex; /* or inline-flex */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#divMenuBar{
    visibility: hidden;  /*Hidden by default. Visible on click*/ 
    min-width: 300px; /* Set a default minimum width */
    /*margin-left: -1000px;*/ /* Divide value of min-width by 2 */
    height:100%;
    /*left: 50%;*/ /* Center the snackbar */
    bottom: 0px; /* px from the bottom */
    left: 0px;
    background-color: rgba(0,0,0,1); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 0px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    -webkit-font-smoothing: subpixel-antialiased;
    
}

.nano { background: rgba(0,0,0,0.5); width: 400px; height: 100%; }
.nano .nano-content { }
.nano .nano-pane   { background: #888; }
.nano .nano-slider { background: #111; }

#divMenuBar.show {
    visibility: visible; /* Show the snackbar */
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
}


/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {left: 0; opacity: 0;} 
    to {left: 30px; opacity: 1;}
}

@keyframes fadein {
    from {left: 0; opacity: 0;}
    to {left: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {left: 30px; opacity: 1;} 
    to {left: 0; opacity: 0;}
}

@keyframes fadeout {
    from {left: 30px; opacity: 1;}
    to {left: 0; opacity: 0;}
}


#bg { position: fixed; top: 0; left: 0; z-index:-1}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

#bg2 { position: fixed; top: 0; left: 0; z-index:-1}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }


.ImposeMaxWidth
{
    max-width:360px;
}

.PointsButton
{
    width:100px;
    height:100px;
    background-color:white;
    border-color:grey;
    font-weight:900;
    color:dimgrey;
    border-radius:0px

}

.ContainerDarkTransparentCard
{
    min-width:300px;
    max-width:800px;
    text-align:left;
    background-color:rgba(62, 62, 62, 0.5);
    border-radius:0px;
}

.fa-6x {
    font-size: 100px;
}

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(1); /* IE */
  -moz-transform: scale(1); /* FF */
  -webkit-transform: scale(1); /* Safari and Chrome */
  -o-transform: scale(1); /* Opera */
  padding: 5px;
}


.ConfirmCreateContinueColor {
    color: yellowgreen;
}

.DeleteCancelColor {
    color: Salmon;
}

.EditColor {
    color: cornflowerblue;
}

.ScoreFont {
    font-family: 'Alfa Slab One';
}

html {     
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
}

table td 
{
  overflow:hidden;
  word-wrap:break-word;
  white-space:normal
}

.CenteredDialog{
    width:500px;
    height:500px;
    margin:0 auto;
    background:#f7f7f7;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-250px;
}

#containerFooter {
   min-height:100%;
   position:relative;
}

.tooltip.bottom .tooltip-inner{
    font-family: 'Roboto', sans-serif;
    background-color: rgb(18, 25, 56);
}

.tooltip.top .tooltip-inner{
   font-family: 'Roboto', sans-serif;
    background-color: rgb(18, 25, 56);
}

.dropdown-menu{
    font-family: 'Roboto', sans-serif;
}

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#divIndexView {
  background:  url('../content/backgroundcandidate02p.png') top left;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 1000px;
  min-height:100%;

}

.AccentColor{
    color: rgb(153,0,0);
}

.AccentBackgroundColor{
    background-color: rgb(153,0,0);
}


.AccentColorSecondary{
    color: rgb(153,0,0);
}

.AccentColorFont{
    color: rgb(195, 25, 25);
}

.AccentBackgroundColor{
    background-color: rgb(153,0,0);
}

.AccentBackgroundColorTransparent{
    background-color: rgba(153,0,0,0.25);
}


.AccentBorderColor{
    border-color: rgb(153,0,0);
}

.ThemeFont
{    
    font-family: 'Titillium Web', sans-serif;
    font-style:italic;
    -webkit-font-smoothing: subpixel-antialiased;
}

body 
{
    font-family: 'ThemeFont';
    -webkit-font-smoothing: subpixel-antialiased;
}

.footer {
    position: fixed;
    left: 0px;
    right: 0;
    bottom: 0;
    height: 75px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ContainerDarkTransparentFull
{
    max-width:2000px;
    text-align:left;
    background-color:rgba(146, 145, 145, 0.85);
    border-radius:10px;
}

.ContainerDarkTransparentAccount
{
    min-width:300px;
    max-width:800px;
    text-align:left;
    background-color:rgba(0, 0, 0, 0.0);
    border-radius:10px;
}

.ContainerDarkTransparent
{
    min-width:300px;
    max-width:800px;
    text-align:left;
    background-color:rgba(0, 0, 0, 0.85);
    border-radius:10px;
}

.BodyText
{
    font-family: 'Roboto', sans-serif;
    color: white;
    font-weight:900;
    -webkit-font-smoothing: subpixel-antialiased;
}

.SubBodyText
{
    font-family: 'Roboto', sans-serif;
    color: darkgray;
    font-size:12px;
    font-weight:600;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;

    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    text-overflow: ellipsis;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernSelect{
    width:300px;
    font-size:16px;
    height: 45px;
    background-color: transparent;
    color: rgb(51, 102, 102);
    border-radius: 5px;
    border-style:solid;
    border: 1px 1px 1px 1px;
    border-color: gray;
    /*padding: 5px 5px 5px 35px;*/
    text-indent: 35px;
    color: white;
    -webkit-font-smoothing: subpixel-antialiased;
}

select {
  font-family: 'FontAwesome', 'Roboto';
-webkit-font-smoothing: subpixel-antialiased;
}

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: white;
}

/* selected link */
a:active {
    color: white;
}

.ModernOptionText {
    height:75px;
    font-size:16px;
    color:black;
    font-weight:900;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernOptionTextSmall {
    height:20px;
    font-size:12px;
    font-weight:900;
    color:black;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputForm{
    width:300px;
    font-size:18px;
    font-weight:900;
    height:45px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    text-indent: 35px; 
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormTall{
    resize:none;
    margin-left:-10px;
    margin-bottom:15px;
    width:300px;
    font-size:16px;
    font-weight:500;
    height:150px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    padding:10px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormSmall{
    width:200px;
    font-size:12px;
    height:30px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    padding: 5px 5px 5px 5px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    font-weight: 900;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormMini{
    width:200px;
    font-size:14px;
    height:30px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    padding: 5px 5px 5px 5px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormMicro{
    width:100px;
    font-size:12px;
    height:30px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    padding: 5px 5px 5px 5px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormShort{
    width:100px;
    font-size:12px;
    height:30px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-width: 1px;
    border-style:solid;
    border: 1px;
    border-color: rgb(52, 63, 113);
    padding: 5px 5px 5px 5px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    font-weight: 900;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormNoIcon{
    width:280px;
    font-size:14px;
    font-family: 'Roboto', sans-serif;
    font-weight:900;
    border-radius: 5px;
    border-style:solid;
    border: 1px 1px 1px 1px;
    border-color: gray;
    padding: 5px 5px 5px 5px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputChat{
    width:95%;
    font-size:14px;
    font-family: 'Roboto', sans-serif;
    font-weight:900;
    border-radius: 5px;
    padding: 5px;
    height:30px;
    color: white;
    background-color: rgba(255,255,255,0.10);
    -webkit-font-smoothing: subpixel-antialiased;
}


.ModernButton{
    width:300px;
    height:75px;
    font-size:18px;
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border-style:solid;
    border: 1px 1px 1px 1px;
    border-color: transparent;
    padding: 5px 5px 5px 5px;
    color: white;
    -webkit-font-smoothing: subpixel-antialiased;
}


.ModernButtonSmall{
    width:250px;
    height:50px;
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    line-height:40px;
    background-color: rgb(77, 148, 148);
    border-radius: 5px;
    border-style:solid;
    border: 1px 1px 1px 1px;
    border-color: transparent;
    padding: 5px 5px 5px 5px;
    color: white;
    -webkit-font-smoothing: subpixel-antialiased;

}

.ModernButtonMini{
    width:200px;
    height:35px;
    font-size:12px;
    line-height:25px;
    font-family: 'Roboto', sans-serif;
    background-color: rgb(77, 148, 148);
    border-radius: 5px;
    border-style:solid;
    border: 1px 1px 1px 1px;
    border-color: transparent;
    padding: 5px 5px 5px 5px;
    color: white;
    -webkit-font-smoothing: subpixel-antialiased;
}


input {
      font-family: 'Roboto', sans-serif;               
  -webkit-font-smoothing: subpixel-antialiased;
      }

#snackbar{
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 2000px; /* Set a default minimum width */
    margin-left: -1000px; /* Divide value of min-width by 2 */
    height:100%;
    left: 50%; /* Center the snackbar */
    bottom: 0px; /* px from the bottom */
    background-color: rgba(0,0,0,0.9); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    -webkit-font-smoothing: subpixel-antialiased;
}

#snackbarJumpDown{
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 80px; /* Set a default minimum width */
    margin-left: -50px; /* Divide value of min-width by 2 */
    background-color: rgba(0,0,0,0.9); /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 5px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 10%; /* Center the snackbar */
    bottom: -10px; /* 30px from the bottom */
    height:100px;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbarJumpDown.show {
    visibility: visible; /* Show the snackbar */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


.ModernInputForm::-webkit-input-placeholder {
    /*color: rgb(77, 148, 148);*/
    color: lightgray;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputForm:-moz-placeholder {
    /*color: rgb(77, 148, 148);*/
    color: lightgray;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormNoIcon::-webkit-input-placeholder {
    color: lightgray;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ModernInputFormNoIcon:-moz-placeholder {
    color: lightgray;
    -webkit-font-smoothing: subpixel-antialiased;
}

.InputIcon {
    margin-right:-30px;
    /*color: white;*/
    -webkit-font-smoothing: subpixel-antialiased;
}


div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.content {
    height: 10000px
}

.footer {
    position: fixed;
    left: 0px;
    right: 0;
    bottom: 0;
    height: 15px;
}    

.footerMobile {
    position: fixed;
    left: 0px;
    right: 0;
    bottom: 0;
    height: 40px;
}

.divLeft, .divRight {
    float:none;
}

@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@-moz-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

.WarningText
{
    color:red;
    max-width:300px;
    min-width:200px;
    -webkit-font-smoothing: subpixel-antialiased;
}

.ListControlsDiv
{
    margin-top:-20px;
    margin-bottom:10px;
}

.BackArrowNavigation{
    font-size:24px;
}

.SubText
{
    color:white;
    margin-top:-10px;
    text-align:left;
    font-size:12px;
    text-transform: uppercase;
    font-family: 'Open Sans Condensed', sans-serif;
    
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

    text-overflow: ellipsis;    
    -webkit-font-smoothing: subpixel-antialiased;
}



.LogoTopRight {
    text-align:right;
    color:dodgerblue;
}

.ListBoxSelection
{
    border-width: 5px;
    border-color: red;
    max-width: 350px;
}
.NavigationElements
{
    color: dodgerblue;
}
.SmallCategoryHeader
{
    color: dodgerblue;
}

.AddNewLabel
{
    color: green;
}

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

.nav-submenu
{
  background: transparent;
  border: 0px;
}

.divHome
{
  max-width: 600px;  
}

@media screen and (max-width: 760px)
{
    .nav-submenu
    {
      background: rgb(231, 236, 213);
    }  

}

@font-face {
    font-family: DinCondensedBold; /*a name to be used later*/
    src: url('../din.ttf'); /*URL to font*/
}


ul#menu-main-top {
  float:right;
 
}

span#glyph_lock
{
  color: indianred;
}

span#glyph_circle
{
  color: darkdodgerblue;
}

.table
{
  max-width: 400px;
}

button#imageButton
{
  border-color: transparent;
}

.wrapword{
  white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
  white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  white-space: pre-wrap;       /* css-3 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  word-break: break-all;
  white-space: normal;
}