/*----- Fonts -----*/
/*@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
*/
@font-face {
  font-family: BitterPro;
  src: url("../fonts/BitterPro-Regular.ttf");
}

html{
/*	background-color: #383838;*/
/*	background-color: #4fa1d9;*/
}

body{
	margin: 0;
/*	font-family: "BitterPro", sans-serif;*/
	font-family: system-ui;;
/*	transition: width .5s linear, font-size .5s linear, height .5s linear, line-height .5s linear;*/
	transition: all .2s ease-in;
	background-color: #ededed;
}

h1,h2,h3,h4,h5,h6,h7{
/*	font-family: 'BitterPro', sans-serif;*/
	color: #1c1c1c;
    font-weight: 700;
    letter-spacing: 1px;
}

h1{
	font-size: 30px;
}


input{
	padding-left: 7px;
	padding-right: 7px;
}


input[type="text"], input[type="password"], input[type="number"]{
	border-radius: 5px;
}

input.shortField{
	width: 100%;
	max-width: 160px;
	border: 1px solid black;
	height: 32px;
}


/* ####################### */
/* ####################### */
/*       TRANSITIONS       */
/* ####################### */
/* ####################### */
body, button, .btn, .frameControl, ul, li{
	transition: width .2s ease-in, height .2s ease-in, font-size .2s ease-in, top .2s ease-in, left .2s ease-in, color .2s ease-in, background-color .2s ease-in;
}



.modal{
	z-index: 91050;
}


/* ####################### */
/* ####################### */
/*          INPUTS         */
/* ####################### */
/* ####################### */
.form-control{
    padding: 1px 5px;
    border: 1px solid #aaaaaa;
}

.form-control, .select2-container--default .select2-selection--single{
	border-radius: 4px;
}

#filterFormContainer{
	position: sticky;
	top: 40px;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1px solid #c4c4c4;
}

#filterForm{
	display: contents;
}

input[type=range][orient=vertical] {
/*    writing-mode: vertical-lr;*/
    appearance: slider-vertical;
    width: 8px;
    height: 114px;
    padding: 0 15px;
    accent-color: #4fa1d9;
}

input[type=file]{
	background-color: #f0f0f0;
}

input[type=file]::file-selector-button {
	border: none;
	padding: .375rem .75rem;
	background-color: #4fa1d9;
	color: white;
	border-radius: 0px;
}

input[type=file]::file-selector-button:hover {
  background-color: #4692c6;
/*  border: 2px solid #00cec9;*/
}

#inputBallHeight{
	position: absolute;
    right: -7px;
    bottom: -10px;
}

#lblHeight{
	position: absolute;
    /*right: -50px;
    bottom: 35px;*/
    /*right: -8px;
    bottom: -40px;*/
    right: 14px;
    bottom: 35px;
}

#lblBarHeight{
	position: absolute;
    right: -10px;
/*    bottom: 25px;*/
    bottom: 13px;
    color: red;
    font-weight: bold;
}

.btn{
	border-radius: 30px;
}

.btn-primary{
	background-color: #4fa1d9 !important;
	border-color: #4fa1d9 !important;
}
.btn-primary:hover{
	background-color: #4692c6 !important;
	border-color: #4692c6 !important;
}

.btn-info, .footer{
	background-color: #4FA1D9;
	border-color: #4FA1D9;
}

.btn-info:hover, .btn-info:not(:disabled):not(.disabled):active, .btn-info.focus.active{
	background-color: #3e86b7 !important;
	border-color: #3e86b7 !important;
}

.btn-info:focus, .btn-info.focus{
	box-shadow: 0 0 0 0.2rem rgba(23,162,184,.5);
}

.btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus{
	box-shadow: 0 0 0 0.2rem rgb(32 137 201 / 50%);
}

.btn-teal{
	background-color: #42a111;
	color: white;
}

.btn-teal:hover, .btn-teal:active{
	background-color: #48af13;
}

#noteSave, #noteRelevance{
	font-size: 13px;
}



/* ####################### */
/* ####################### */
/*         NAVBAR          */
/* ####################### */
/* ####################### */

.navbar{
	position: sticky;
    top: 0px;
    left: 0px;
/*    height: 40px;*/
    z-index: 9999;
    background-color: #4FA1D9;
}

.navbar-toggler{
	background-color: white;
}

.navbar-dark .navbar-nav .nav-link{
	color: #ffffffdb;	
}

.navbar-dark .navbar-nav .nav-link:hover{
	color: #ffffff9e;	
}

.lang-selector .selected{
	background-color: #389721;
	color: white;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

button.nav-link{
	border: none;
    background: none;
    cursor: pointer;
}



/* ############################ */
/* ############################ */
/*       PLAYERS AND FRAME      */
/* ############################ */
/* ############################ */

.teamLogoSmall{
	height: 30px;
}

.teamLogo{
	height: 40px;
}

.homeTeamName, .awayTeamName, .score{
	vertical-align: middle;
}

.homeTeamName, .awayTeamName{
	font-size: 21px;
	border-radius: 7px;
    padding: 6px;
}

.score{
	font-weight: bold;
	font-size: 40px;
}

.playerList{
	list-style: none;
	padding-left: 15px;
	font-size: 14px;
}

.playerList li.inField{
	background-color: #d2e3eb;
}

.playerList li:hover{
	cursor: pointer;
	background-color: #abd6f4;
}

.playerList li.highlighted{
	background-color: #7dbeea;
}

.playerList.selectingPlayerOn li:hover{
	background-color: #a9e2b6;
}

.playerList.selectingPlayerOff li.highlighted{
	background-color: #ef877d;
}

.playerRelevance{
	width: 35px;
	border-radius: 5px;
    padding: 0px 2px;
    margin: 0px;
}

.playerPhoto{
	height: 25px;
}

#ulEventFrames{
	background-color: #d5d5d5;
	list-style: none;
	padding-left: 0px;
	max-height: 916px;
    overflow-y: scroll;
}

#ulEventFrames li{
	padding: 4px 10px;
}

#ulEventFrames li:hover{
	cursor: pointer;
	background-color: #cfebff;
}

#ulEventFrames li.frameSelected{
	background-color: #6caedc;
}

#ulEventFrames li.frameSelected:hover{
	background-color: #3f8cc0;
}

.playerList li.playerOff{
	background-color: #ff9a90;
}





/* ####################### */
/* ####################### */
/*          FIELD          */
/* ####################### */
/* ####################### */
#field{
	position: relative;
	padding: 0px;
	margin: 0px;
	background-image: url(../img/football_field_trans.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: fit-content;
    aspect-ratio: 1368 / 905;
	border: 1px solid #496fdd;
	margin: auto;
}

#field, #containerControls{
	max-width: 1400px;
}

#btnSaveFrames{
	width: 100%;
/*	max-width: 707px;*/
	max-width: 536px;
}

#selectBallTrail{
	padding: 2px 5px;
	border-radius: 20px;
	color: #5b5b5b;
}

.fieldBall{
	position: absolute;
	background-image: url('../img/football_ball.png');
	border-radius: 18px;
	background-size: cover;
    background-position: center;
    transform: translate(-50%, -50%); 
	height: 20px;
	width: 20px;
	z-index: 99;
}

.fieldPlayer{
	position: absolute;
/*	background-color: #45454582;*/
	cursor: pointer;
	border-radius: 50px;
	background-size: cover;
    background-position: center;
    transform: translate(-50%, -50%); 
	height: 30px;
	width: 30px;
	color: white;
	filter: grayscale(1);
	z-index: 9;
}

.newFieldPlayer{
	background-color: transparent;
	filter: none;
	transition: height .15s ease-in, width .15s ease-in, background .15s ease-in, background-color .15s ease-in;
	height: 40px;
	width: 40px;
	z-index: 10;
}

.newFieldPlayer.highlighted{
/*	background-color: #4fa1d9ed !important;*/
	height: 90px;
	width: 90px;
}

.shotEventIcon, .endBallPositionIcon{
	width: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: rotate(45deg) translate(-80%, -20%);
}



/* ####################### */
/* ####################### */
/*          Video          */
/* ####################### */
/* ####################### */

#containerEventHighlight{
	position: fixed;
    bottom: 0px;
    left: 0px;
    border: 4px solid white;
    height: 250px;
    width: auto;
    aspect-ratio: 16 / 9.15;
    z-index: 9999;
}

#eventHighlight{
	width: 100%;
	height: auto;
}



/* ####################### */
/* ####################### */
/*         VSports         */
/* ####################### */
/* ####################### */

audio{
	height: 32px;
	margin-top: 10px;
}

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel {
	background-color: #fff;
	color: #fff;
}

audio.success::-webkit-media-controls-play-button, audio.success::-webkit-media-controls-panel {
	background-color: #0f0;
	color: #0f0;
}


/* ####################### */
/* ####################### */
/*       flashMessage      */
/* ####################### */
/* ####################### */

#flashMessage{
    width: 100%;
    padding: 11px 27px;
	color: white;
	background-color: gray;
    position: fixed;
    top: 50px;
    left: 0px;
    z-index: 9999;
}
#flashMessage.success{
	background-color: #219c21;
}
#flashMessage.error{
	background-color: #cd230c;
}
#flashMessage.warning{
	background-color: #c8a61f;
}





/* ############## */
/*    Footer      */
/* ############## */
a.round{
	border-radius: 50px;
	background-color: white;
	color: #4fa1d9;
	padding: 10px 14px;
}

a.round i{
	color: #4fa1d9;
}





/* ####################### */
/* ####################### */
/*         Toggles         */
/* ####################### */
/* ####################### */
.toggle{
	height: 37px !important;
	margin-top: 3px;
	margin-bottom: 3px;
	border: 1px solid #b9bec3;
}

.toggle-on, .toggle-off, .toggle, .toggle-handle{
	border-radius: 20px;
}

.toggle-handle{
	background-color: white;
	width: 38px;
    border-radius: 40px;
}
/* END TOGGLES */


.modal-content, .modal-content button {
    border-radius: 0px;
    outline: none;
    border: none;
}

.footer a{
	color: white !important;
	text-decoration: underline;
}

.footer a:hover{
	color: #d3d3d3 !important;
	text-decoration: underline;
}





/* ####################### */
/* ####################### */
/*         @MEDIA          */
/* ####################### */
/* ####################### */
@media (hover: none) {
    .btn-group .btn-info {
        background-color: #42a111;
    	border-color: #17a2b8;
    }
}


@media(max-width: 1980px) or (max-height: 1080px){
	#field, #containerControls{
		max-width: 900px;
	}
}


@media(max-width: 991px){
	
}

@media(max-width: 576px){
	h3{
		font-size: 17px;
	}

	input{
		width: 170px;
	}

	th, td{
		font-size: 12px;
	}

	input.shortField{
		height: 40px;
	}
}

/*iphone 13 mini*/
@media(max-width: 462px){
	
}


/*iphone 13 mini*/
@media(max-width: 360px){
	#contactForm {
		font-size: 14px;
	}

	.form-control{
		height: 30px;
		font-size: 14px;
	}

	.form-group{
		margin-bottom: 0px;
	}
}