.showContainer {
//background-color: lightgray;
}

.reclama {
width: 970px;
border: 0px solid;
}

.reclamaMijloc {
width: 470px;
border: 0px solid;
}

.reclamaMica {
width: 234px;
height: 60px;
border: 0px solid;
}

.reclamaStanga {
width: 180px;
height: 150px;
border: 0px solid;
}

.mainContainer {
width: 1024px;
position: relative;
height: 100%;
}

.rowSeparator {
height: 5px;
}

.rowMediumSeparator {
height: 15px;
}

.rowLargeSeparator {
height: 25px;
}

.rowSmallSeparator {
height: 5px;
}

.heroSearchBox {
position: relative;
}

.heroSearch {
width: 100px;
}

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


.heroSelectSearch {
height: 35px;
}

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

.showTutorialButton {
}

.resetAllButton {
}

.skillLevelText {
}

.skillLevelSelect {
width: 120px;
}

.siteTitle {
font-size: 25px;
}

.heroSelectedBothBox {
position: relative;
}

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

.heroSelectedBothImg {
height: 40px;
}

.heroSelectedBothClose {
position: absolute;
left: 53px;
top: 1px;
z-index: 120;
}

.heroSelectedEnemyWrap {
border: 1px solid;
color: red;
height: 42px;
width: 362px;
}

.heroSelectedTeamWrap {
border: 1px solid;
color: green;
height: 42px;
width: 362px;
}

.versusTextEnemy {
font-size: 13px;
color: red;
}

.versusTextBig {
font-size: 30px;
}

.versusTextTeam {
font-size: 13px;
color: green;
}

.versusContainer {
padding-top: 10px;
height: 44px;
}

.titleText {
padding-top: 10px;
height: 54px;
}

.compositionGraphs{
height:40px;
}

.compositionEnemyGraph{
height:5px;
background-color: red;
}

.compositionTeamGraph{
height:5px;
background-color: yellow;
}

.compositionWSelfGraph{
height:5px;
background-color: green;
}

.heroSelectText {
font-size: 12px;
}

.heroSelectSelfBox {
position: relative;
}

.heroSelectSelfLeftArrowsContainer {
display: inline-block;
vertical-align: middle;
}

.heroSelectSelfLeftArrow {
display: block;
}

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

.heroSelectSelfArrow {
height: 40px;
}

.heroSelectSelfText {
position: absolute;
width: 70px;
z-index: 100;
top: 0;
color: white;
cursor: default;
}

.heroSearchText {
color: white;
cursor: default;
font-size: small;
}

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

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

.heroSelectSelfImg {
height: 40px;
}

.heroSelectSelfClickBox {
position: absolute;
height: 40px;
width: 72px;
z-index: 105;
top: 0;
left: 0;
}

.heroSelectSelfSelected {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 90;
border: 1px solid;
border-width: 2px;
border-color: orange;
}

.timeGraphBox {
position: relative;
width: 190px;
height: 160px;
}

.timeGraph {

}

.heroObservationsBox {
border: 1px solid;
border-color: #BDBDBD;
width: 170px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
margin-top: 15px;
margin-bottom: 15px;
}

.copySuggestionsBox {
position: relative;

}

.copySuggestions {
width: 234px;
font-size: 12px;
line-height: 100%;
overflow-y:noscroll;
}

.extraOptionsBox {
position: relative;

}

.extraOptions {
width: 234px;
}

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

.heroPoolTypeBox {
position: relative;
}

.heroSelectBottom {
height: 21px;
}

.heroSelectBottomGroupContainer {
position: relative;
}

.heroSelectBottomGroup {
width:16.3%;
display: inline-block;
vertical-align: top;
}

.heroSelectContainerBottom {
position: relative;
height: 21px;
width: 37px;
display: inline-block;
background-size: 100%;
}

.heroSelectBottomGroupListContainer {
position: relative;
overflow-x: auto;
overflow-y: none;
}


.heroSelectContainerBottomListBox {
width: 111px;
display: inline-block;
vertical-align: top;
}

.heroSelectContainerBottomList {
position: relative;
height: 63px;
width: 111px;
display: inline-block;
background-size: 100%;
}

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

.heroSelectContainerTutorial {
position: relative;
height: 63px;
width: 111px;
display: inline-block;
background-size: 100%;
color: white;
}

.heroSelectContainer {
position: relative;
height: 35px;
width: 62px;
display: inline-block;
background-size: 100%;
}

.heroSelectContainerImg {
display: inline;
}

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

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

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

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

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

.tutorialContainer {
}

.descriptionContainer {
}

p.indent {
text-indent: 30px;
}

.teamInfoBox {
position: relative;
width: 200px;
height: 200px;
}

.teamInfoPosition {
font-size: 11px;
}

.teamInfoStar {
height: 10px;
}

.teamInfoStarsContainer{
}

.buble {
	position: relative;
	border: 2px solid #2d2d2d;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
}
.arrow_right {
	position: relative;
	border: 2px solid #2d2d2d;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
}
.arrow_right:after, .arrow_right:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0px;
	width: 0px;
	position: absolute;
	pointer-events: none;
}

.arrow_right:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #2d2d2d;
	border-width: 7px;
	margin-top: -7px;
}
.arrow_right:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #2d2d2d;
	border-width: 10px;
	margin-top: -10px;
}

.buble_plus {
	position: relative;
	border: 2px solid #2a9fd6;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
}

.arrow_right_plus {
	position: relative;
	border: 2px solid #2a9fd6;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
}
.arrow_right_plus:after, .arrow_right_plus:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0px;
	width: 0px;
	position: absolute;
	pointer-events: none;
}

.arrow_right_plus:after {
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #2a9fd6;
	border-width: 7px;
	margin-top: -7px;
}
.arrow_right_plus:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #2a9fd6;
	border-width: 10px;
	margin-top: -10px;
}

.arrow_left {
	position: relative;
	border: 2px solid #2d2d2d;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
}
.arrow_left:after, .arrow_left:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0px;
	width: 0px;
	position: absolute;
	pointer-events: none;
}

.arrow_left:after {
	border-color: rgba(136, 183, 213, 0);
	border-right-color: #2d2d2d;
	border-width: 7px;
	margin-top: -7px;
}
.arrow_left:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #2d2d2d;
	border-width: 10px;
	margin-top: -10px;
	
}

.arrow_top:after, .arrow_top:before {
	top: 20%;
}

.tutorialSearchHero {
position: absolute;
width: 172px;
height: 28px;
top: 1px;
left: -157px;
}

.tutorialCloseTutorial {
position: absolute;
width: 104px;
height: 28px;
top: 1px;
left: -65px;
}

.tutorial {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #151515;
display:block;
}

.tutorialSkillLevel {
position: absolute;
width: 200px;
height: 48px;
top: -18px;
right: -220px;

}

.tutorialSelectBottom {
position: absolute;
width: 200px;
height: 288px;
top: -77px;
left: -227px;

}

.tutorialHeroSelectedEnemy {
position: absolute;
width: 200px;
height: 27px;
top: 5px;
left: -212px;

}

.tutorialHeroSelectedTeam {
position: absolute;
width: 200px;
height: 27px;
top: 5px;
right: -212px;

}

.tutorialHeroSelectSelf {
position: absolute;
width: 413px;
height: 89px;
top: -56px;
left: -382px;
}

.tutorialTimeGraph {
position: absolute;
width: 200px;
height: 128px;
top: 0px;
right: 202px;
}

.tutorialCopySuggestions {
position: absolute;
width: 200px;
height: 48px;
top: 15px;
right: -212px;
}

.tutorialTeamInfo {
position: absolute;
width: 200px;
height: 130px;
top: 31px;
left: 239px;
}

.tutorialHeroPoolType {
position: absolute;
width: 200px;
height: 67px;
top: -20px;
right: -227px;
}

.tutorialPopupIcon {
font-size: 12px;
}

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

.colorGreen {
color: green;
}

.colorRed {
color: red;
}

.displayNone {
display: none;
}