h1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  margin-top: 0;
}

.ModSel {
  display: block;
  background: #ffa;
  text-align: left;
  padding: 0px;
  width: 100%;
  height: 200px;
  top: 0px;
  margin: 0px;
  background: #424F5A;    
}

.ModSel-MainIconShell {
  position: relative;
  width: 108px;
  height: 108px;
  top: 8px;
  margin-bottom: 16px;
  left: calc((100% - 108px)/2);
  background: transparent;
}


.ModSel-MainIcon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 54px;
}

.ModSel-UserInfo {
  display: block;
  position: relative;
  font-size: 15px;
  font-weight: 300;
  width: calc(100% - 10px);
  height: 18px;
  line-height: 18px;
  padding-left: 10px;
  color: #F0F0F0;
  user-select: none;   
}

.ModSel-UserInfoShort {
  display: none;
  position: relative;
  font-size: 13px;
  font-weight: 300;
  width: calc(100% - 10px);
  height: 15px;
  line-height: 15px;
  padding-left: 10px;
  color: #F0F0F0;
  user-select: none;   
}

.ModSel_Item {
  display: block;
  position: relative;
  padding-left: 0px;
  padding-top: 0px;
  height: 60px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-size: 20px;
  background: #424F5A;  
  cursor: pointer;
  color: #FBFBFB;
}

.ModSel_Item_Disabled {
  display: block;
  position: relative;
  padding-left: 0px;
  padding-top: 0px;
  height: 60px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-size: 20px;
  background: #424F5A;  
  color: #626F7A;
}


.ModSel_Item input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.ModSel_Item_Disabled input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}


.ModSel_Frame {
  background: #424F5A;
  height: 60px;
}


.ModSel_Indicator {
  position: absolute;
  top: 0px;
  left: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 60px;
  width: 6px;
}

.ModSel_Icon {
  position: absolute;
  top: 16px;
  left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 30px;
  width: 30px;
}

.ModSel_Text {
  display: block;
  font-weight: 400;  
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 54px;
  padding-left: 62px;
  padding-top: 4px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-size: 18px;
  user-select: none;   
}

@media screen and (max-width: 640px)
{
  .core-LeftDockContainer {
  width: 40px;
  }

  .ModSel-MainIconShell {
    border-radius: 16px;
    width: 32px;
    height: 32px;
    left: calc((100% - 32px)/2);
  }

  .ModSel_Icon {
    height: 24px;
    width: 24px;
    top: 9px;
  }

  .core-LoadSpinner {
    width: 32px;
    height: 32px;
    border-width: 3px;
    left: calc((100% - 38px)/2);
    top: 10px;
  }

  .core-RightContainer {
  width: calc(100% - 40px);
  }

  .ModSel_Frame {
    width: 40px;
  }
 
	.ModSel_Text {
	  display: none;
	}

  .ModSel-UserInfo {
    display: none;
  }

  .ModSel-UserInfoShort {
    display: block;
  }

}


.ModSel_Item:hover input:not([checked]) ~ .ModSel_Frame 
 {
  background: #5E6972;
}


.ModSel_Item:hover input:checked ~ .ModSel_Frame {
  background: #343F48;
}


.ModSel_Item input:checked ~ .ModSel_Frame{
  background: #343F48;
}

.ModSel_Item input:checked ~ .ModSel_Frame .ModSel_Indicator {
  background: #FF8500;
}


.ModSel.Item input:disabled ~ .ModSel.Item.Indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}