:root {
    --vocareum-brand-blue: #008FBE;
    
    --voc-blue: #007FA9; /* 4.55 contrast / AA */
    /* 4.5 blue could be #0781a2 */
    --voc-blue-disabled: #007fa9c2;
    --voc-red: #D44040;
    --voc-info-blue: #20809D; /* color of old pages links */
    --voc-a11y-border-gray: #8B93A7;
    --voc-a11y-focus: #E96115;
    
    --b5-text-dark: rgb(33, 37, 41)
}

*:focus-visible:not(.no-outline *):not(input):not([role="dialog"]):not(textarea) {
    /* position: relative !important; */
    z-index: 9999 !important;
    outline-offset: 2px !important;
    outline: 3px solid var(--voc-a11y-focus) !important;
    box-shadow: none !important;
}

body {
    font-family: 'Open Sans';
}

.voccolor {
	color: #0785B2 !important;
}

.vocinput_text {
	width: 150px !important;
	margin-left:5px !important;
}

.vocnav {
	padding-top: 8px;
}

.vochelvetica {
	// font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
	font-family: 'Open Sans',sans-serif !important;
}

.voc_noborder {
	border: none !important;
}

.vocbox {
	min-height: 240px !important;
	padding-bottom:5px !important;
}

@media (max-width: 979px) {
	.vocbox {
		min-height: 280px !important;
	}
}
@media (max-width: 519px) {
	.vocinput_text {
		width: 100px !important;
	}
	.vocbox {
		min-height: 300px !important;
	}
}
@media (max-width: 409px) {
	.vocinput_text {
		width: 61px !important;
		margin-left:1px !important;
	}
	.vocbox {
		min-height: 270px !important;
	}
}


.brand {
	background: url("../shared/ico/vocareum_blue_trans_260x60.png") no-repeat scroll left transparent;
	width: 260px;
	height: 60px;
	margin-top: 0px;
    float: left !important;
}

@media (max-width: 979px) {
	.vochow-span {
		height:410px !important; 
	}
	.brand {
		background: url("../shared/ico/vocareum_blue_trans_180x42.png") no-repeat scroll left transparent;
		width: 180px;
		height: 42px;
		float: left !important;
		padding-top:20px;
		padding-left:10px;
	}
}

.voccircle {
  max-width: 70%;
  margin-left:18%;
}
.voccircle-box {
	margin-top: 10px;
	list-style-type: none;
}

.vochow-span {
	border:1px solid #0785B2 !important;  
	height:360px; 
	box-shadow: 5px 5px 15px dimgray; 
}
.vochow-circle {
	margin-top: -45px; 
	margin-left:auto;
	margin-right:auto;
	border-radius:50px !important;
	background-color:#0785B2;
	color:white;font-style:bold;
	font-size:30px;
	width:50px; 
	height:50px;
}


@media (max-width: 767px) {
	.vochow-span {
		height:350px !important; 
		margin-bottom:50px !important;
	}
	.voccircle {
	  max-width: 60%;
	  margin-left:20%;
	}
	.voccircle-box {
		margin-top: 0px;
	}
	.brand {
		background: url("../shared/ico/vocareum_blue_trans_180x42.png") no-repeat scroll left transparent;
		width: 180px;
		height: 42px;
		float: left !important;
		padding-top:20px;
		padding-left:10px;
	}
	.vocnav {
		padding-top: 5px;
	}
	.vocbox {
		min-height: 180px !important;
	}
}
@media (max-width: 649px) {
	.brand {
		background: url("../shared/ico/v_42x42.png") no-repeat scroll left transparent;
		width: 42px;
		height: 42px;
		float: left !important;
		padding-top:10px;
		padding-left:2px;
	}
	.vocnav {
		padding-top: 4px;
	}
}