@import url('fonts.css');

p { text-indent: 25px; }



/* HEADER */
header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 20px;
    z-index: 1000;
    background: #fff;

}

/*CONTENT*/

#webcam {
	position: absolute;
	width: 465px;
	height: 200px;
	flex-shrink: 0;
}
.pro_image {
	position: relative;
	background-color: #000;
	border-radius: 5%;
	border: #fff;
	margin-bottom: 10px;
	
}
.pro_image img {
	border-radius: 5%;
	border: #fff;
	width: 720px;
}


.control {
	margin-left: auto;
	margin-right: auto;
	display: block;
	text-align: center;
}


.page {
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body {
    background: #fff;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
}

.content {
    max-width: 1240px;
    margin: 0px auto;
    margin-top: 0px;
    flex: 1 1 auto;
}

h1 {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-align: center;
}

.btnc.active {
    background-color: #588157;
    border-color: #588157;
}

.btnsave {
    background-color: #588157;
    border-color: #588157;
}

video {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;

}

.infa {
    text-align: center;
	margin-top: 10px;
}

/*FOOTER*/
footer {
    padding: 20px;
}

/* switch */

.tgl {
	display: none;
    

	&,
  &:after,
  &:before,
	& *,
  & *:after,
  & *:before,
	& + .tgl-btn {
		box-sizing: border-box;
		&::selection {
			background: none;
		}
	}
  
	+ .tgl-btn {
		outline: 0;
        margin-left: auto;
        margin-right: auto;
		display: block;
		width: 8em;
		height: 2em;
		position: relative;
		cursor: pointer;
    user-select: none;
		&:after,
    &:before {
			position: relative;
			display: block;
			content: "";
			width: 50%;
			height: 100%;
		}
    
		&:after {
			left: 0;
		}
    
		&:before {
			display: none;
		}
	}
  
	&:checked + .tgl-btn:after {
		left: 50%;
	}
}


.tgl-skewed {
	+ .tgl-btn {
		overflow: hidden;
		transform: skew(-10deg);
		backface-visibility: hidden;
		transition: all .2s ease;
		font-family: sans-serif;
		background: #888;
		&:after,
    &:before {
			transform: skew(10deg);
			display: inline-block;
			transition: all .2s ease;
			width: 100%;
			text-align: center;
			position: absolute;
			line-height: 2em;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.4);
		}
    
		&:after {
			left: 100%;
			content: attr(data-tg-on);
		}
    
		&:before {
			left: 0;
			content: attr(data-tg-off);
		}
    
		&:active {
			background: #888;
			&:before {
				left: -10%;
			}
		}
	}
  
	&:checked + .tgl-btn {
    background: #86d993;
    &:before {
      left: -100%;
    }

    &:after {
      left: 0;
    }

    &:active:after {
      left: 10%;
    }
	}
}

#statsChart {
    max-width: 100%;
    height: auto;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#dataTable {
    margin-top: 30px;
}

.table {
    background: white;
}

.card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: none;
}

.form-select {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

#showStatsBtn {
    padding: 10px 20px;

}

#graphDiv {
    width: 100%;
    height: 500px;
	display: flex;
	justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#GraphSel {
	display: flex;
	justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Стили для подсказок */
.hovertext {
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: white !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

#user_select {
	margin-bottom: 20px;
	width: 50%;
}

.img-thumbnail {
	max-width: 60%;
	margin-bottom: 20px;
}