@font-face {
    font-family: 'Roboto-Bold';
    src:
        url('/Fonts/Roboto-Bold.woff2') format('woff2'),
        url('/Fonts/Roboto-Bold.woff') format('woff'),
        url('/Fonts/Roboto-Bold.ttf') format('truetype'),
        url('/Fonts/Roboto-Bold.swg') format('svg'),
        url('/Fonts/Roboto-Bold.eot'),
        url('/Fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: 
        url('/Fonts/Roboto-Regular.woff2') format('woff2'),
        url('/Fonts/Roboto-Regular.woff') format('woff'),
        url('/Fonts/Roboto-Regular.ttf') format('truetype'),
        url('/Fonts/Roboto-Regular.swg') format('svg'),
        url('/Fonts/Roboto-Regular.eot'),
        url('/Fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype');
}

.MainMenuButton {
  font-family:Roboto-Bold;
  font-size:14px;
  color: inherit;
  text-decoration: none;
  transition: 0.2s;
  padding-left: 20px;
  padding-top: 5px;
  float:left;
  position:relative;
  outline:none;
}
.MainMenuButtonWrapper {
    color: #9999a0;
    height: 20px;
    max-height: 20px;
    outline:none;
}

.MainMenuButtonWrapper:hover { 
    color: #ebeced; 
     -webkit-filter: brightness(140%);
    filter: brightness(140%);
}
.MainMenuButtonWrapper:active {
    color: #ebeced;
     -webkit-filter: brightness(160%);
    filter: brightness(160%);
}

.MainMenuButtonImage {
    float:left;
    outline:none;
}

.MainMenuButton[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-5px;
   right:-20px;
   font-size:.8em;
   background:#e95c4a;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}

.AvatarButton {
  font-family:Roboto-Bold;
  font-size:18px;
  background-color:transparent;
  border-color:transparent;
  color: #9999a0;
  text-align:left;
  padding-left:0px;
  text-decoration: none;
  transition: 0.2s;
  text-align:left;
  height: 20px;
  z-index:10;
  outline:none;
}
.AvatarButton:hover { 
    color: #ebeced; 
}
.AvatarButton:active {
    color: #ebeced;
}

.HeaderButton{
  font-family:Roboto-Bold;
  font-size:16px;
  color: #9999a0;
  text-decoration: none;
  transition: 0.2s;
  padding-left: 20px;
  text-align:left;
  outline:none;
}
.HeaderButton:hover { 
    color: #ebeced; 
}
.HeaderButton:active {
    color: #ebeced;
}

.DefaultCheckBox
{
  font-family:Roboto-Regular;
  font-size:14px;
  color: #9999a0;
  text-decoration: none;
  outline:none;
}

.DefaultButton{
  font-family:Roboto-Bold;
  font-size:16px;
  color: #9999a0;
  background-color:#40434d;
  text-decoration: none;
  text-align:center;
  transition: 0.2s;
  border: 1px solid;
  border-radius: 2px;
  border-color: #42454f;
  padding: 3px 3px 3px 3px;
  outline:none;
}

.DefaultButton:hover { 
    border-color: #22917f;
}

.DefaultButton:active {
    border-color: #22917f;
    background-color: #22917f;
}

.dropbtn {
    font-family:Roboto-Bold;
    font-size:14px;
    color: #666970;
    background-color: transparent;
    background-image:url('../Images/DropUp.png');
    background-repeat: no-repeat;
    background-position: right;
    border: 1px solid #666970;
    cursor: pointer;
    padding: 4px 25px 4px 15px;
    border-radius: 5px;
    outline:none;
    height:30px;
}

.dropdown {
    /*display: inline-block;*/
}

.dropdown-content {
    display: none;
    background-color: #323440;
    min-width: 160px;
    width:auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    outline:none;
}

.dropdown-content a {
    font-family:Roboto-Bold;
    font-size:14px;
    color: #9999a0;
    padding: 0 16px;
    line-height: 40px;
    height: 40px;
    max-height: 40px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #40424e;
    color: white;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: white;
    border: 1px solid #22917f; 
}


.SmallButton {
    font-family:Roboto-Bold;
    font-size:14px;
    line-height:30px;
    color: #c3c4c8;
    background-color: #246e9b;
    text-decoration: none;
    text-align:center;
    transition: 0.2s;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    cursor: pointer;
    outline:none;
}

.SmallButton:hover { 
    border: 1px solid #51867e;
    color: white;
}

.SmallButton:active {
    border: 1px solid #51867e;
    background-color: #51867e;
     color: white;
}

.Label
{
    font-family:Roboto-Bold;
    font-size:14px;
    color: #9999a0;
    vertical-align:bottom;
    outline:none;
}

.ErrorLabel
{
    font-family:Roboto-Regular;
    font-size:12px;
    color: red;
    outline:none;
}

.searchBox
{
    font-family:Roboto-Regular;
    font-size:14px;
    color: #9999a0;
    background-color:#40434d;
    border: 1px solid #42454f;
    border-radius:10px;
    padding-left:5px;
    padding-right:5px;
    outline:none;
}
.searchBox:hover{
    border: 1px solid #22917f;
}
.searchBox:active{
    border: 1px solid #22917f;
}
.searchBox:focus{
    border: 1px solid #22917f;
}

.BackButton {
    float:left; 
    padding-left:19px; 
    padding-right:20px; 
    padding-top:28px; 
    padding-bottom:28px;
    outline:none;
}

.BackButton:hover {
    background-color:#236f9b;
}

.BackButton:active {
    background-color:#236f9b;
}

.ImageButton{
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 4px;
  transition: 0.2s;
  border-radius: 20%;
   border: 1px solid transparent; 
  outline:none;
  box-sizing:border-box;
}

.ImageButton:hover { 
    border: 1px solid #22917f; 
}

.ImageButton:active {
    border: 1px solid #22917f; 
    background-color: #ababaf;
}

.Branch{
  width:100%;
  background-color: transparent;
  text-decoration: none;
  text-align:left;
  transition: 0.2s;
  padding-bottom:15px;
  padding-top:15px;
  position:relative; 
  border-bottom:1px solid #4b4e57;
  cursor:pointer;
  outline:none;
}

.Branch:hover { 
    background-color: #22917f;
    border-bottom:1px solid transparent;
}

.Branch:active {
    background-color: #22917f;
    border-bottom:1px solid transparent;
}

.Branch:hover .BranchRight { display:block;}

.BranchInside {
    margin-left: 0;
    font-family:Roboto-Regular;
    font-size:16px;
    font-weight:200;
    color: #ebeced;
    height:100%; 
    width:100%;
    max-width:100%;
    transition: 0.2s;
    box-sizing:border-box;
    cursor:pointer;
    outline:none;
}

.BranchRight {   
    display:none;
}
/*
.Branch .BranchRight:hover {
    background-color: #236f9b;
}

.Branch .BranchRight:active {
    background-color: #236f9b;
}
 */

.Branch .SelectButton
{
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    width:100%;
    height:100%;
    background-color:transparent;
    border:none;
    cursor:pointer;
    outline:none;
}

.BranchSelector {
    position:absolute;
    left:0;
    top:0;
    width:3%;
    height:100%;
    background-color:#22917f;
    border:none;
    display:none;
    cursor:pointer;
    outline:none;
}

.Folder{
  width:100%;
  background-color: transparent;
  transition: 0.2s;
  height:60px; 
  max-height:60px;
  position:relative; 
  border-bottom:1px solid #4b4e57;
  transition: 0.2s;
  box-sizing:border-box;
  cursor:pointer;
  outline:none;
}
.Folder:hover { 
    background-color: #22917f;
    border: none;
}
.Folder:active {
    background-color: #22917f;
    border: none;
}

.FolderBadge {
    font-family: Roboto-Regular;
    font-size: 28px;
    margin-left: 25px;
    color: #236f9b;
    cursor:pointer;
    outline:none;
}

.FolderName {
    font-family:Roboto-Regular;
    font-size:16px;
    font-weight:200;
    color: #ebeced;
    cursor:pointer;
    outline:none;
}

.Folder .SelectButton
{
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    width:100%;
    height:100%;
    background-color:transparent;
    border:none;
    cursor:pointer;
    outline:none;
}

.FolderSelector {
    position:absolute;
    left:0;
    top:0;
    width:3%;
    height:100%;
    background-color:#22917f;
    border:none;
    display:none;
    cursor:pointer;
    outline:none;
}