* {
	font-family: verdana, sans-serif;
}
main {
	max-width: 1200px;	/* set size */
	margin: auto;	
}


#playfield-ctn, #playfield-bck, #playfield .dd-interact {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#playfield-ctn {
	position: relative;
	display: block;
	top:0;
	left:0;
}
#playfield {
	width: 100%;
	padding-bottom: 63.0%;	/* constrain ratio 18/29 */
	position: relative;
	top:0;
	left:0;
	overflow:hidden;
}
#playfield-bck {	/* the background image */
	width:100%;
}


.dd-ball {
	width: 1.32%;	/* = 0.33/25 */
	min-width: 13px; /* locked */
	height:auto;
}
.dd-ball img {
	position: absolute;
	top:0;
	left:0;
}
.two-on-one-zone,
.kick-off-zone {
	position: absolute;
	top:0;
	left:0;
	width: 0;
	height: 0;
	border-radius: 100%;
	-webkit-transition: linear 75ms;
    transition: linear 75ms;
}
.two-on-one-zone {
	background: #EFB73E;
	opacity: .5;
}
.kick-off-zone {
	border: 2px dotted #ccc;
}

.dd-object {
	position: absolute;
	top:0;
	left:0;
}
.dd-player {
	/* 
		1.4/29 = 5.6%
		but the with is half of it because of the displaced rotation center
	*/
	width: 2.413%;
	/* min-width: 22px;	/* locked */
	/* min-width: 22px;	/* locked */
}
.dd-interact {
    -webkit-transition: linear 150ms;
    transition: linear 150ms;
}
.dd-interact.selected {
	/* border: 2px solid black; */
}
.dd-interact img {
    width: 100%;
}
.dd-interact.dd-player img {
    width: 200%;
	max-width: 200%;
}
.select-box {
	position: absolute;
	top:0;
	left:0;
    width: 100%;	
    height: 100%;	
    background: rgba(0,0,0,0);
}
.dd-player.selected > .select-box {
    background: rgba(255, 0, 0,.5);
}
.dd-player.selected.team-b > .select-box {
    background: rgba(0, 0, 255,.5);
}
.dd-player.team-r img {
    float: left;
}
.dd-player.team-b img {
    float: right;
}
.dd-interact.no-transition {
    -webkit-transition: none;
    transition: none;
}

.dd-cone {
	width: 3%;
}
.dd-cone.selected > .select-box {
    background: rgba(255, 0, 0,.5);
}
.dd-line {
	
}

.dd-btn.active,
.dd-btn.active:hover {
	background: #E95420;
	color: #fff;
}

.dd-step-btn {
	width: 36px;
	/* width: 40.24166295px; */
	margin-bottom: 4px;
	text-align: center;
	padding-left: 0;
	padding-right: 0;
}

.dd-rotate-btn {
	position: absolute;
	width:4%;
	height:auto;
	border: none;
	background: none;
	color: #E95420;
	padding: 0;
	top: 0;
	left: 0;
	cursor: pointer;
	font-size:1.4rem;
}
.dd-rotate-btn.disabled {
	display: none !important;
}
#dd-text {
	width: 100%;
	margin-bottom: .5rem;
	height: 3rem;
	overflow-x: scroll;
}
/*
#dd-toolbar {
	margin-top: 1rem;
}
#dd-steps-btn-ctn, .dd-btn-ctn {
	display:block;
	margin-top:.5rem;
	line-height: 2rem;
}
#dd-steps-btn-add-remove-ctn {
	display:inline-block; 
	vertical-align:top;
}
.dd-btn {
	background: #ccc;
	border: none;
	border-radius: 4px;
	padding: .5rem .8rem;
	cursor: pointer;
}
.dd-btn:hover {
	background: orange;	
}

.dd-btn.disabled, 
.dd-btn.disabled:hover {
	color: #bbb;
	background: #eee;
	cursor: default;
}
*/

.background {
    background-color: #BCBCBC;
    width: 100px;
    height: 50px;
    padding: 0; 
    margin: 0;
}
.line1 {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid red;
    -webkit-transform:
        translateY(-20px)
        translateX(5px)
        rotate(27deg); 
    position: absolute;
    /* top: -20px; */
}
.line2 {
    width: 112px;
    height: 47px;
    border-bottom: 1px solid green;
    -webkit-transform:
        translateY(20px)
        translateX(5px)
        rotate(-26deg);
    position: absolute;
    top: -33px;
    left: -13px;
}

.opacity-0 {
	opacity: 0 !important;
}