.inlineBlock {
display: inline-block;
}

.relativeBlock {
position: relative;
}

.vAlignMid {
vertical-align: middle;
}

.vAlignTop {
vertical-align: top;
}

.enemyColor {
color: red;
}
.teamColor {
color: green;
}
.enemyBgColor {
background-color: red;
}
.teamBgColor {
background-color: green;
}

.marginBottom15 {
margin-bottom: 15px;
}

.marginBottom10 {
margin-bottom: 10px;
}

.marginBottom5 {
margin-bottom: 5px;
}

.marginBottom0 {
margin-bottom: 0px;
}

.marginTop25 {
margin-top: 25px;
}

.marginTop15 {
margin-top: 15px;
}

.marginTop5 {
margin-top: 5px;
}

.marginLeft10 {
margin-left: 10px
}

.marginLeftTopBar {
margin-left: 13px
}

.colorGreen {
color: green;
}

.colorRed {
color: red;
}

.colorWhite {
color: white;
}

.colorOrange {
color: #ff8800;
}

.reclama {
width: 970px;
padding-bottom: 7px;
}

.reclamajos {
width: 730px;
padding-top: 5px;
}

.reclamaMica {
margin-left: 7px;
padding-bottom:10px;
padding-top:10px;
}

.tutorialPopupIcon {
font-size: 12px;
}

.fullContainer {
width: 1010px;
height: 100%;
position: relative;
}

.fullContainerExtended {
width: 1743px;
height: 100%;
position: relative;
}

.heroSearchTextBox {
margin-bottom: 3px;
margin-left: 5px;
width: 320px;
position: relative;
}

.searchContainer {
overflow-y: auto;
width: 210px;
}

.searchImg {
position: relative;
width: 96px;
height: 53px;
background-size: 100%;
}

.searchImgText {
color: white;
}

.searchHeroContainer {
width: 175px;
}

.searchedHeroBox {
padding: 3px;
margin-right: 10px;
}

.searchedHeroBoxCM {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
margin-right: 0px;
}

.searchHeroTextContainer {
vertical-align: middle;
}

.searchImgBig {
position: relative;
border-radius: 2px;
width: 160px;
height: 65px;
background-size: 100%;
padding: 5px;
margin-bottom: 10px;
}
.searchImgBigText {
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 1px;
}

.btnBan {
padding: 0px 3px;
}

.heroSearchedToAdd {
border: 1px solid;
color: #ff8800;
}


.banSelectedWrap {
border: 1px solid #424242;
height: 93px;
width: 32px;
}

.heroBannedBothImgCnt {
height: 15px;
}

.heroBannedBothImg {
width: 30px;
margin-top: -6px;
}


.heroSelectedWrap {
border: 1px solid;
height: 42px;
width: 362px;
}
.heroSelectedWrapCMTop {
border: 1px solid #424242;
height: 42px;
width: 217px;
}
.heroSelectedWrapCMBot {
border: 1px solid #424242;
height: 42px;
width: 145px;
border-top: 0px;
}
.heroSelectedBothImg {
height: 40px;
}
.heroSelectedBothClose {
position: absolute;
left: 53px;
top: 1px;
z-index: 120;
}

.heroSelectedBothPlus {
position: absolute;
left: 44px;
top: 24px;
z-index: 120;
font-size: 80%;
}

.heroSelectedBothMinus {
position: absolute;
left: 56px;
top: 24px;
z-index: 120;
font-size: 80%;
}

.skillLevelContainer{
width: 230px;
}


.heroSuggestionContainerScroll{
overflow-y: auto;
}
.heroSuggestionContainer{
width: 600px;
}
.heroSuggestionHalfContainer{
width: 299px;
}
.heroSuggestionContainerCoreUtil{
width: 285px;
display: inline-block;
vertical-align: top;
margin: 5px;
}

.heroSuggestionContainerLanes{
width: 90px;
display: inline-block;
vertical-align: top;
margin: 5px;
}

.heroSuggestionContainerRoles{
width: 70px;
display: inline-block;
vertical-align: top;
margin: 2px;
}

.heroSelectText {
font-size: 12px;
}
.heroSelectSelfBox {
position: relative;
}
.heroSelectSelfLeftArrowsContainer {
display: inline-block;
width: 15px;
height: 40px;
}
.heroSelectSelfRightArrowsContainer {
display: inline-block;
width: 15px;
height: 40px;
vertical-align: middle;
}
.heroSelectSelfContainer {
display: inline-block;
position: relative;
width: 71px;
height: 40px;
background-size: 100%;
}

.heroSelectSelfText {
color: white;
cursor: default;
}

.heroSelectSelfContainerCU {
border-top: 1px solid #282828;
position: relative;
}
.heroSelectSelfContainerImgCUAll{
position: relative;
}
.heroSelectSelfContainerImgCUCoreUtil{
height: 50px;
width: 90px;
margin: 7px;
background-size: 100%;
}
.heroSelectSelfContainerImgCUCoreUtilBans{
height: 27px;
width: 48px;
margin: 3px;
background-size: 100%;
}

.heroSelectSelfContainerInImgCUCoreUtil{
height: 50px;
width: 90px;
color: white;
cursor: default;
}
.heroSelectSelfContainerImgCULanes{
height: 42px;
width: 80px;
margin: 5px;
background-size: 100%;
}
.heroSelectSelfContainerInImgCULanes{
height: 45px;
width: 75px;
color: white;
cursor: default;
}
.heroSelectSelfContainerImgCURoles{
height: 36px;
width: 64px;
margin: 3px;
background-size: 100%;
}
.heroSelectSelfContainerImgCURolesBans{
height: 18px;
width: 32px;
margin: 3px;
background-size: 100%;
}
.heroSelectSelfContainerInImgCURoles{
height: 31px;
width: 55px;
color: white;
cursor: default;
font-size: 70%;
}

.optionsButton {
padding-left: 4px;
padding-right: 4px;
margin-left: 5px;
margin-right: 5px;
background-color: #222;
border: 1px solid gray;
cursor: pointer;
}

.optionImg {
margin: 1px;
cursor: pointer;
}

.optionImgSel {
margin: 0px;
border: 1px solid gray;
}

.optionImgDisabled {
cursor: not-allowed;
}

.optionImgDisabled img{
cursor: not-allowed;
}

.expanderContainerOptions {
border: 1px solid gray;
margin-left: 0px;
width: 295px;
cursor: pointer;
}

.expandedContainerOptions {
border: 1px solid gray;
margin-left: 0px;
width: 295px;
}

.expanderContainerCharts {
background-color: #222;
border: 1px solid gray;
margin-left: 0px;
width: 615px;
cursor: pointer;
}
.expandedContainerCharts {
border: 1px solid gray;
margin-left: 0px;
width: 615px;
}

.extraOptionsCB {
margin-top: 5px;
margin-bottom: 5px;
}


.timeGraphBox {
position: relative;
width: 190px;
height: 160px;
margin-top: 5px;
}

.teamInfoBox {
position: relative;
width: 160px;
height: 160px;
margin-top: 5px;
}

.bonusPointsBox {
width: 115px;
height: 160px;
vertical-align: top;
padding-top: 25px;
margin-top: 5px;
}

.heroSelectVSBox {
margin: 10px;
}

.chooseTeamIcon{
width: 30px;
}
.chosenTeamBorder{
border: 1px solid #ff8800;;
}

.noSelectionBox {
margin-top: 20px;
}

.noSelectionBoxParagraph {
text-indent: 25px;
}

.searchBox{
margin-left: 20px;
}

.searchInfo{
position: absolute;
top: 2px;
left: 17px;
}


.heroSelectContainerLeft {
position: absolute;
width: 50%;
height: 100%;
z-index: 100;
top: 0px;
left: 0px;
}

.teamColorHover:hover {
background-color: red;
opacity: 0.5;
}

.heroSelectContainerRight {
position: absolute;
width: 50%;
height: 100%;
z-index: 100;
top: 0px;
right: 0px;
}

.enemyColorHover:hover  {
background-color: green;
opacity: 0.7;
}

.heroSelectContainerTopLeft {
position: absolute;
width: 50%;
height: 65%;
z-index: 100;
top: 0px;
left: 0px;
}
.heroSelectContainerTopRight {
position: absolute;
width: 50%;
height: 65%;
z-index: 100;
top: 0px;
right: 0px;
}
.heroBanContainerBottomCenter {
position: absolute;
width: 40%;
height: 35%;
z-index: 100;
top: 65%;
right: 30%;
}
.heroSelectContainerBottomLeft {
position: absolute;
width: 30%;
height: 35%;
z-index: 100;
top: 65%;
left: 0px;
}
.heroSelectContainerBottomRight {
position: absolute;
width: 30%;
height: 35%;
z-index: 100;
top: 65%;
right: 0px;
}




.heroSelectContainerBottom {
position: relative;
height: 18px;
width: 32px;
display: inline-block;
background-size: 100%;
cursor: default;
}

.heroSelectContainerBottomOver {
position: absolute;
height: 36px;
width: 64px;
top: -10px;
left: -18px;
display: inline-block;
background-size: 100%;
z-index: 110;
}

.heroSelectContainerGrayed {
position: absolute;
width: 100%;
height: 100%;
z-index: 95;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.9;
}

.heroSelectBottomGroup {
width: 145px;
display: inline-block;
vertical-align: top;
padding-left: 4px;
padding-top: 2px;
}

.expandedContainerHeroSelectBottom {
border: 1px solid gray;
margin-left: 0px;
width: 295px;
}

.pickSummaryTable  td {
border: 1px solid #2d2d2d;
padding: 5px;
}

.heroMatchupImg {
  width: 40px;
  height: 24px;
}

.borderBottomCollorRed {
border-bottom-color: red !important;
}
.borderTopCollorRed {
border-top-color: red !important;
}
.borderLeftCollorRed {
border-left-color: red !important;
}
.borderRightCollorRed {
border-right-color: red !important;
}

.borderBottomCollorGreen {
border-bottom-color: green !important;
}
.borderTopCollorGreen {
border-top-color: green !important;
}
.borderLeftCollorGreen {
border-left-color: green !important;
}
.borderRightCollorGreen {
border-right-color: green !important;
}

.borderBottomNone {
border-bottom-style: none !important;
}
.borderTopNone {
border-top-style: none !important;
}
.borderLeftNone {
border-left-style: none !important;
}
.borderRightNone {
border-right-style: none !important;
}

.borderImgRed {
border: 2px solid #cc0000;
}
.borderImgGreen {
border: 2px solid #77b300;
}
.borderImgOrange {
border: 2px solid #ff8800;
}

.spellImage {
  width: 30px;
  margin: 2px;
}

.spellLabel{
  font-size: 75%;
  margin-right: 3px;
  margin-left: 3px;
}

.spellPiercesImmunity {
border: 1px solid;
color: #ff8800;
}

.spellUltimate {
border: 1px solid;
color: blue;
}

.spellSubgroupContainer {
border: 1px solid;
}

.buttonsBox {
//background-color: #222;
//border: 1px solid gray;
//padding-top: 3px;
//padding-bottom: 3px;
}



.boxBigContainer {
width: 1045px;
display: inline-block;
vertical-align: top;
}

.boxBigContainerExtended {
width: 1743px;
display: inline-block;
vertical-align: top;
}

.boxLeftContainer {
width: 310px;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
vertical-align: top;
}

.boxCenterContainer {
width: 694px;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
vertical-align: top;
}

.boxRightContainer {
width: 694px;
padding-top: 0px;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
vertical-align: top;
}

.tablist {
border-bottom: 1px solid #282828;
margin: 0;
padding: 0;
list-style: none;
}

.tablist li{
display: inline-block;
margin-bottom: -4px;
margin-top: 2px; 
}

.tabitem a{
color: #BDBDBD;
text-decoration: none;
padding-top: 1px !important; 
padding-bottom: 3px !important; 
padding-left: 8px !important; 
border: 1px solid transparent;
padding-right: 8px !important;
}

.tabitem a:hover{
border-color: transparent transparent #282828;
background-color: #222;
border-radius: 4px 4px 0 0;
}

.tabitempressed a{
color: #2a9fd6;
}

.tabsep {
font-size: 14px;
color: #363333;
margin: 0px !important;
}

.settingsHeroTable {
background-color: transparent;
}
.settingsHeroTable td{
border: 1px solid #424242;
padding: 5px;
}


.settScoreAll {
border: 1px solid #424242;
background-color: inherit;
}

.settScoreStep {
}

.settScoreStepDetails {

width: 600px;
border: 1px solid #424242;
padding: 10px;

}

.settScoreStepExample {
width: 360px;

border: 1px solid #424242;

padding: 4px;
}

.settScoreStepExampleSmallText {
font-size: 85%;
}

.settScoreStepExample table {
background-color: inherit;
}
.settScoreStepExample td {
padding-left: 2px;
padding-right: 2px;
}

.settUsableVariable {
color: #ff8800;
}

.settFormulaInput {
width: 560px;
font-weight: normal;
}

.settScoreHeroSelect {
width: 65px;
font-weight: normal;
font-size: 10px;
padding: 0px;
height: 15px !important;
}

.settScoreHeroImg {
width: 65px;
}

.settHeroSelectedBothPlus {
position: absolute;
left: 35px;
top: 18px;
z-index: 120;

}

.settHeroSelectedBothMinus {
position: absolute;
left: 50px;
top: 18px;
z-index: 120;
}


.btn-picker {
color: #BDBDBD;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborder.png);
border-image-slice: 45% fill;
border-image-width: 9px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}
.btn-picker:hover {
color: #404040;
border-image-source: url(/assets/img/siteimg/buttonborderhover.png);
}

.btn-picker-noborder {
color: #BDBDBD;
background-color: transparent;
}
.btn-picker-noborder:hover {
color: #404040;
}

.btn-picker-prs {
color: #BDBDBD;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborderprs.png);
border-image-slice: 45% fill;
border-image-width: 9px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}
.btn-picker-prs:hover {
color: #404040;
border-image-source: url(/assets/img/siteimg/buttonborderprs.png);
}
.btn-picker-pushed {
color: #2a9fd6;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborderpushed.png);
border-image-slice: 45% fill;
border-image-width: 9px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}
.btn-picker-pushed:hover {
color: #404040;
border-image-source: url(/assets/img/siteimg/buttonborderpushed.png);
}

.input-group-picker {
color: #BDBDBD;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborder.png);
border-image-slice: 45% fill;
border-image-width: 9px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}

.input-group-addon-picker {
border: 0px;
background-color: transparent;
color: #BDBDBD;
}
.input-group-addon-picker-brright {
border-right: #2d2d2d 2px solid !important;
}

.form-control-picker {
background-color: transparent;
color: #BDBDBD;
border: 0px;
}

.form-control-picker option {
background-color: #2d2d2d;
}


.btn-pickerteam {
color: #BDBDBD;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborderteam.png);
border-image-slice: 45% fill;
border-image-width: 4px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}

.btn-pickerenemy {
color: #BDBDBD;
border-width: 1px;
background-color: transparent;
border-image-source: url(/assets/img/siteimg/buttonborderenemy.png);
border-image-slice: 45% fill;
border-image-width: 4px;
border-image-repeat: repeat stretch;
border-image-outset: 0;
}

.hoverShow{ 
display: none;
}
.hoverBox:hover .hoverShow{
display : block;
}
.hoverBox:hover .hoverHide{
display : none;
}

.enemyPickBgLight  {
background-color: green;
opacity: 0.4;
cursor: pointer;
}
.somethingPickBgLight  {
background-color: black;
opacity: 0.9;
border-radius: 2px;
}

.teamPickBgLight  {
background-color: red;
opacity: 0.4;
cursor: pointer;
}

.banBgLight {
background-color: gray;
opacity: 0.5;
cursor: pointer;
}

.autopickerdata {
	display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
	padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #BDBDBD;
    border-width: 1px;
    background-color: transparent;
    border-image-source: url(/assets/img/siteimg/buttonborder.png);
    border-image-slice: 45% fill;
    border-image-width: 9px;
    border-image-repeat: repeat stretch;
    border-image-outset: 0;
}

.ButtonCntHeroSuggBanAll {
position: absolute;
right: 5px;
top: 20px;
}