.editor {
	position: relative;
    height: 100%;
    background-color: white;
}

/****** Editor top ******/

.editor-top {
	overflow: hidden;
	background-color: lightblue;
    padding: 0 20px;
    border-bottom: solid 2px black;
    position: relative;
    top: 0;
    left: 0;
}

.editor-top .padding {
	margin-top: 20px;
	margin-bottom: 20px;
}

.round-btn {
	position: relative;
	float: left;

	background-color: white;

	width: 42px;
    height: 42px;

    font-size: 22px;

    -moz-border-radius: 22px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
	border: solid 1px black;

	cursor: pointer;
}

.round-btn.small {
	width: 21px;
    height: 21px;

    -moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
}

.text-btn {
	position: relative;
    float: left;
    background-color: white;
    height: 42px;
    font-size: 15px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;
    border-radius: 22px;
    border: solid 1px black;
    cursor: pointer;
    line-height: 2.8;
    padding: 0 10px;
}

.top-divider {
	height: 86px;
    width: 2px;
    background-color: black;
    float: left;
    margin: 0 20px;
}

.save {
	margin-left: 20px;
}
.icon-save {
	font-size: 17px;
}

.autosave-container {
	float: left;
    width: 50px;
    position: relative;
    height: 88px;
    margin-left: 10px;
    margin-right: 10px;
}
.autosave-container label {
	position: absolute;
    top: 25px;
}
.autosave {
	position: absolute;
    top: 44px;
    left: 19px;
}

.project-name {
	float: left;
	height: 44px;
	width: 300px;
	margin-left: 10px;
	position: relative;
    top: -5px;
}

.project-name label {
	width: 100%;
	font-size: 12px;
}

.project-name input {
	width: 100%;
	height: 30px;
}
.project-name input.error {
	border-color: red;
}

.generate-btn {
	background-color: green;
    color: white;
}

.print {
	float: right;
	margin-top: 7px;
	position: relative;
}

.print-type {
	position: absolute;
    top: 50px;
    left: 0px;
    width: 44px;
    height: 20px;
    cursor: default;
}

.print-type-inner svg {
	width: 100%;
	height: 100%;
}

.print-type-landscape {
	width: 20px;
    height: 14px;
    position: absolute;
    top: 3px;
    left: 2px;
    cursor: pointer;
}

.print-type-portrait {
	width: 14px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 4px;
    cursor: pointer;
}

.print-type-inner path {
	fill: white;
}

.print-type-inner.selected path {
	fill: green;
}

.print-tables {
	position: absolute;
	top: 0;
	left: 0;
}

/************ Editor left - table ****************/
.editor-bottom {
	position: absolute;
	width: 100%;
    min-height: 100%;
    top: 0;
    padding-top: 86px;
    background-color: white;
}

.editor-left {
	margin-right: 282px;
}

.editor-left h2 {
	padding-left: 45px;
	padding-right: 25px;
	display: inline-block;
}

.outer {
	overflow: scroll;
	padding-left: 20px;
}

.matches-container {
	float: left;
	border: none;
}

.players-container {
	float:left;
}

.row {
  	height: 100px;
}

.cell {
	position: relative;
	height: 100px;
	width: 97px;
	min-width: 97px;
}

.cell.content {
	width: 170px;
	min-width: 170px;
}

.info-rounds {
	position: absolute;
    top: 5px;
    right: 5px;
}

.info-pitches {
	position: absolute;
    bottom: 5px;
    left: 5px;
}

.info-divider {
	-ms-transform:rotate(45deg);
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 141px;
    height: 0px;
    position: absolute;
    top: 49px;
    left: -21px;
    border-top: solid 1px black;
}

.add-round {
    border: none;
    cursor: pointer;
}
.add-round .arrow {
	position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: solid 50px transparent;
    border-left: solid 50px lightgrey;
    border-bottom: solid 50px transparent;
}
.add-round .icon {
	left: 10px;
    top: 42px;
    position: absolute;
}

.add-pitch {
    border: none;
    cursor: pointer;
}
.add-pitch .arrow {
	position: absolute;
    top: 0;
    left: 2px;
    width: 0;
    height: 0;
    border-left: solid 50px transparent;
    border-top: solid 50px lightgrey;
    border-right: solid 50px transparent;
}
.add-pitch .icon {
	top: 10px;
}

.remove-round-row {
	height: 25px;
}
.remove-round {
	border: none;
	position: relative;
	height: 25px;
}
.cell.remove-round {
	width: 170px;
    min-width: 170px;
}
.cell.remove-round.empty {
	width: 97px;
    min-width: 97px;
}

.remove-round .icon {
	width: 30px;
    text-align: center;
    height: 25px;
    bottom: 0;
    line-height: 1.5;
    cursor: pointer;
}

.remove-pitch {
	width: 25px;
	min-width: 25px;
	border: none;
	position: relative;
	height: 100px;
}
.remove-pitch .icon {
	width: 25px;
    height: 30px;
    line-height: 2;
    text-align: center;
    cursor: pointer;
    left: 0px;
    top: 42px;
    position: absolute;
}

.pitch-cell {
	
}
.pitch-cell-outer {
	width: 100%;
	height: 100%;
	background-color: lightgrey;
}

.pitch-name input {
	width: 50px;
}
.pitch-name label {
	padding: 0 5px;
}

.pitch-type-container {
	position: absolute;
    top: 0;
    left: 0;
}

.pitch-type {
	font-size: 10px;
	height: 13px;
	width: 100%;
}
.pitch-type input {
	width: 10px;
}

.round-cell {
	width: 170px;
	min-width: 170px;
}

.round-outer {
	width: 100%;
	height: 100%;
	background-color: lightgrey;
}

.player-match-outer {
	position: absolute !important;
    top: 19px;
}
.player-match {
	text-align: center;
    font-size: 14px;
    width: 110px;
}
.player-divider {
	width: 88%;
    box-sizing: border-box;
    height: 1px;
    padding: 0px 0px;
    margin: 5px auto;
    position: relative;
}

.player-divider-extension {
	position: absolute;
    right: -60px;
    top: -2px;
    width: 153px;
    height: 0px;
    border: solid 1px red;
}

.player-divider-cross {
	position: absolute;
    right: -4px;
    top: -33px;
    width: 0px;
    height: 62px;
    border: solid 1px red;
}

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

/*********** Editor right - players *************/
.editor-right {
	position: absolute;
	width: 282px;
	top: 0;
	right: 0;
	padding-top: 86px;
	min-height: 100%;
    box-sizing: border-box;
}

.editor-right-inner {
	width: 100%;
	border-left: solid 2px black;
	position: absolute;
    top: 86px;
    bottom: 0;
    padding: 0 5px 0 20px;
}

.player-cell {
	height: 25px;
}

.player-strength-col {
	width: 65px;
	float: left;
}

.player-strength-col-label {
	width: 65px;
	float: left;
	font-size: 13px;
	margin-bottom: 3px;
}

.strength-minus {
    margin-right: 5px;
    cursor: pointer;
    font-size: 10px;
}

.strength-plus {
    margin-left: 5px;
    cursor: pointer;
    font-size: 10px;
}

.strength-input {
	width: 20px;
}

.player-gender-col {
	width: 45px;
	float: left;
}
.player-gender-col .player-cell {
	padding-right: 10px;
    box-sizing: border-box;
}

.player-gender-col-label {
	width: 45px;
	float: left;
	font-size: 13px;
	margin-bottom: 3px;
}

.gender-male {
	width: 40%;
    display: block;
    float: left;
    text-align: left;
    cursor: pointer;
    color: lightgray;
}
.gender-male.selected {
	color: black;
}

.gender-female {
	width: 40%;
    display: block;
    float: left;
    text-align: center;
    margin-left: 20%;
    cursor: pointer;
    color: lightgray;
}
.gender-female.selected {
	color: black;
}

.player-name-col {
	width: 105px;
	float: left;
}

.name-input {
	width: 100px;
}

.player-name-col-label {
	width: 105px;
	float: left;
	font-size: 13px;
	margin-bottom: 3px;
}

.player-active-col {
	width: 40px;
	float: left;
}
.player-active-col-label {
	width: 40px;
	float: left;
	font-size: 13px;
	margin-bottom: 3px;
}