:root{
	--main-elem-color: #17509c;
}

/*TEXT POLICE COLOR*/
.mainTitle{
	color: #17509c;
	color: var(--main-elem-color);
	font-weight: bold;
}
.labelPolice{
	color: #17509c;
	color: var(--main-elem-color);
}
.customInputTxt{
	border-radius: 0px;
	border-color: #17509c;
	border-color: var(--main-elem-color);
	/*border-color: rgba(2, 38, 97, 0.68);*/
	border-width: thin;
}
.mg-bottom{
	margin-bottom: 200px;
}
.mg-bottom2{
	margin-bottom: 50px;
}
/*lang*/
.policeLang{
	display: inline-block;
	vertical-align: super;
	color: #17509c;
	color: var(--main-elem-color);
	cursor: pointer;
}
.policeLangActive {
	color: #3abff0;
	color: var(--main-cyan-color);
	display: inline-block;
	vertical-align: super;
	cursor: pointer;
}


/*ROW FULL WIDTH*/
.fullWidth{
	margin-right: -30px;
    margin-left: -30px;
}
.bd-btConnect{
	border-bottom: 2px solid #17509c;
	border-bottom: 2px solid var(--main-elem-color);
}





.myBtnMenu{
	padding: 10px 25px 10px 25px;
	border: none;
}
.myBtn{
	padding: 5px 20px 5px 20px;
	border: none;
}
.myBtn:hover, .myBtn.hovered{
	background-color: #17509cba;
}
.myBtnDisabled {
	background-color: #17509cba !important;
}
.focusedBtn{
	background-color: #17509c;
	background-color: var(--main-elem-color);
	color: white;
	border: none;
	font-size: 5vw;
	font-weight: bold;
}
.unfocusedBtn{
	border: none;
	background-color: white;
	color: #17509c;
	color: var(--main-elem-color);
	font-size: 5vw;
	font-weight: bold;
}
/*.activeBlueBtn:focus{
	background-color: var(--main-elem-color);
	color: white;
}*/
.blueBtn{
	background-color: #17509c;
	background-color: var(--main-elem-color);
	color: white;
}
.cyanBtn{
	background-color: #3abff0;
	background-color: var(--main-cyan-color);
	color: white;
}
.yellowReadBtn{
	background-color: #fbc02d;
	color: white;
}
.yellowReadBtn:hover{
	background-color: #ffeb3b;
	color: white;
}
.greenReadBtn{
	background-color: #689f38;
	color: white;
}
.greenReadBtn:hover{
	background-color: #99d066;
	color: white;
}
.redReadBtn{
	background-color: #d32f2f;
	color: white;
}
.redReadBtn:hover{
	background-color: #ff6659;
	color: white;
}
.blackBtn{
	background-color: black;
	color: white;
}
.blackBtn:hover{
	background-color: grey;
	color: black;
}
.txtConnect{
	font-size: 3.5vw;
}


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.txtConnect {
	    font-size: 2.5vw;
	}
	.mainTitle{
		font-size: 4vw;
	}
	.form-control, .form-group, .myBtn{
		font-size: 2vw;
	}
	.mdpForget{
		font-size: 2vw;
	}
	.langs{
		margin-top: 7%;
   		text-align: left !important;
    	margin-left: 50%;
	}
	.focusedBtn{
		font-size: 3.5vw;
	}
	.unfocusedBtn{
		font-size: 3.5vw;
	}
	.myBtn{
		padding: 5px 30px 5px 30px;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.langs {
	    font-size: 2vw;
	}
	.username {
	    font-size: 2vw !important;
	}
	.form-control, .form-group, .myBtn{
		font-size: 2vw;
	}
	.mdpForget{
		font-size: 1.8vw;
		margin-top: 5px;
	}
	.focusedBtn, .unfocusedBtn{
		font-size: 3vw;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.mdpForget{
		margin-top: 20px;
	}
	.txtConnect{
		margin-bottom: 30px;
	}
	.mg-bottom2{
		margin-bottom: 70px;
	}
}