@charset "UTF-8";
:root {
	--primary: #C3112E;
	--primary-rgb: 195, 17, 46;
	--default: #2a2f37;
	--default-rgb: 42, 47, 55;
	--medium: #989aa2;
	--medium-rgb: 152, 154, 162;
	--cyan: #b2ebf2;
	--cyan-rgb: 178,235,242;
	
	/* Scollbar fix for PC Chrome // https://www.filamentgroup.com/lab/scrollbars/ */
	--scrollbar-size: .8rem;
	--scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
	--scrollbar-ff-width: thin; /* FF-only accepts auto, thin, none */
	--scrollbar-track-color: rgba(255, 255, 255, .3);
	--scrollbar-color: rgba(255, 255, 255, .8);
	--scrollbar-color-hover: rgba(255, 255, 255, .9);
	--scrollbar-color-active: rgb(0,0,0);
}


/**
	Prevent auto zooming in iOS: inputs need min of 16px;
*/
select, 
textarea,
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"] {
	font-size: 16px;
}
/* -- Experts page  --*/
#overviewwrapper{width:100%;height:100%;height:calc(100% - 100px);position:absolute;z-index:10;overflow:visible; top:50px;margin:0; color:#FFF; font-size:12px;display:flex;align-items:center;}

#overview{}
#overview .hide{display:none;}
#overviewcontent{width:100%;position:relative;padding:16px;margin:0 auto;background:rgba(0,0,0,.85);border-radius:4px;box-shadow: 0 1px 2px rgba(0, 0, 0, .5);}
#overview .close {position:absolute;right:-28px; z-index:1;width:28px;height:28px; background:url("../images/interface/expert_overview_close.png");cursor:pointer;}
#overview .close:hover {background-position:0 -28px;}

#overviewcontent h1{color:#fff;}
#overviewcontent p.lead {
	display:none;
}
#overviewcontent p {margin-bottom:16px}

@media (min-width: 768px) {
	#overviewcontent {
		width: 70%;
		padding: 26px;
	}
	#overviewcontent p.lead {
		display: block;
	}
}

.tnbackgroundwrapper{background: #111;margin: 0;padding: 0;overflow: hidden;width: 100%;height:calc(100% - 50px);position: relative;z-index: 5;top:0;}
.tnbackground{ position: absolute; z-index: 5;top: 0px; left: 0px;  right: -150px;  bottom: 0px;}
.tnbackground ul{ list-style: none; margin: 0; padding: 0;}
.tnbackground ul li{display:inline; width: 150px; height: 150px; overflow: hidden;margin:0;padding:0;}
.grad{ position: absolute; z-index:6; top: 0px;  left: 0px;  right: 0;  bottom: 0px;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);}


/* -- MAP & Column setup  Mobile-- */
#map{
	width:100%;
	height: calc(100% - 100px);
	display:none;
	overflow:hidden;
	position:relative;
	z-index:1;
}
.map-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}
#gmap {
	position: relative;
	top: 0px;
	width: 100%;
	height: 45%;
	/*min-height: 300px;*/
}

#col-wrapper {
	position: relative;
	top: 0px;
	width: 100%;
	height: 65%;
	--sidebar-header-height: 42px;
	--sidebar-footer-height: 40px;
}
#column-right {
	overflow: hidden;
	position: absolute;
	width: 100%;
	height: 100%;

	background: #000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* MAP & Column setup desktop*/
@media (min-width: 768px) {
	.map-container {
		flex-direction: row;
	}
	#gmap {
		width: 70%;
		width: clamp(70%, 100%, calc(100% - 400px));
		height: 100%;
	}

	#col-wrapper {
		width: clamp(300px, 30%, 400px);
		height: 100%;
	}
}

/*Scroll Controller*/
#explist {
	/*height: 100%;*/
	height: calc(100% - (var(--sidebar-header-height) + var(--sidebar-footer-height)));
	overflow-y: scroll;
	overflow-x: hidden;
}
#explist::-webkit-scrollbar {
	height: var(--scrollbar-size);
	width: var(--scrollbar-size);
}

#explist::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-color);
}

#explist::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-color);
	mix-blend-mode: difference;
	border-radius: 1rem;
	/* Add :hover, :active as needed */
}
#explist::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-color-hover);
}
#explist::-webkit-scrollbar-thumb:vertical {
	min-height: var(--scrollbar-minlength);
}

#explist::-webkit-scrollbar-thumb:horizontal {
	min-width: var(--scrollbar-minlength);
}




#explist ul{padding:0}
#column-right div.loading {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	margin: -35px 0px 0px -35px;
	background: transparent url('/content/images/interface/loading-dots-white.svg') no-repeat center center;
	background-size:contain;
	width: 70px;
	height: 70px;
	z-index: 5;
	border-radius: 10px;
	box-shadow: 1px 1px 3px #000;
}
#column-right .title {padding: 10px;font-size: 12px;font-weight: bold;background: #333;color: #FFF;}
#column-right .items {
	/*overflow: hidden;*/
	position: relative;
	margin: 5px;
	height: calc(100% - 10px);
}
#column-right .items li{
	margin-bottom: 0;
}
#column-right .items a {
	display: flex;
	background: #EDEDED;
	padding: 5px;
	border-radius: 2px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	margin-bottom: 2px;
	text-decoration:none;
}
#column-right .items a:hover {
	background: #FFF;
	text-decoration: none;
}
#column-right .items li.noresults,
#column-right .items li.noresults:hover {
	background: #EDEDED;
	font-weight: 600;
	padding: 20px;
}

#column-right .items li .majors .certification-item {
	/*width: clamp(36px, 18%, 45px);
    width: 36px;*/
	margin: 0;
	margin-right: 1%;
	padding: 0;
}
#column-right .items li .majors .m-title {
	display: none;
}

#column-right .items li .majors .certification-icon {
	padding: 0
}
#column-right .items li .majors .certification-icon img {
	max-width: 100%;
	/*max-height: 45px;*/
	width: 36px;
	margin-bottom: 5px;
}


#column-right .items .avatar {
	height: auto;
	background: #000 url('/content/images/interface/loading-dots-white.svg') no-repeat center center;
	background-size: 45px;
	display: inline-flex;
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	margin-right: 0.8rem;
}
#column-right .items .avatar img {
	border: 1px solid #595959;
}
#column-right .items .details {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width:100%;
}
#column-right .items .details h3 {
	font-size: 1.7rem;
	font-weight: bold;
	color: #333;
	margin-bottom: 5px;
}
/*
#column-right .items .details h3 a {
	display: block;
	padding: 3px 0;
	text-decoration: none;
	overflow: hidden;
	line-height: 1.25;
	height: 1.25em;
}
#column-right .items .details h3 a:hover {
	color: #000;
}
*/

#column-right .items .details p {
	font-size: 11px;
	line-height: 13px;
	color: #666;
}

#column-right #expfooter {
	position: absolute;
	width: 100%;
	bottom: 0px;
	margin: 0px;
	padding: 10px 5%;
	font-size: 12px;
	font-weight: bold;
	background: #212121;
	color: #FFF;
	height: var(--sidebar-footer-height);
}
/* -- [ pager ]  -- */
#column-right #expfooter .pager {
	margin: 2px auto 0;
	text-align: center;
	font-size: 10px;
	color: #CCC;
}
#column-right #expfooter .pager span.selected,
#column-right #expfooter .pager a,
a.previouspostslink,
a.nextpostslink,
a.last,
a.first {
	background: #999;
	text-align: center;
	padding: 3px 6px;
	margin-right: 2px;
	color: #333;
	border: none;
	border-radius: 2px;
	text-decoration: none;
	box-shadow: 0px 0px 3px rgba(0,0,0,.5);
}

#column-right #expfooter .pager a,
#column-right #expfooter .pager span.selected {
	font-size:11px;
	font-weight:bold;
}
#column-right #expfooter .pager a.prev,#column-right #expfooter .pager span.prev,#expfooter .pager a.next{ }
#column-right #expfooter .pager .ellipse{color:#CCC;padding:0;margin:0;font-size:10px;}
#column-right #expfooter .pager a:hover{opacity:.7;}
#column-right #expfooter .pager a.selected,#column-right #expfooter .pager a.selected:hover {background:#f0f0f0; opacity:1}
#column-right #expfooter .pager span{background:none;border:none; color:#FFF;}

#minimal-footer {
	position: fixed;
	bottom: 0;
	height: 50px;
	overflow: hidden;
	width: 100%;
	z-index: 11;
	background: #000;
	line-height: 50px;
	padding: 0 10px;
	color: #999;
	font-size: 12px;
	background: rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}

#minimal-footer a {
	color: #ccc;
}

#minimal-footer a:hover {
	color: #fff;
	text-decoration: none;
} 	



/* --- [ MODAL STYLES ] --- */
.cb-modal .infocontainer{float:left;width:100%; margin-bottom:10px}
.cb-modal .avatar {float:left; display:block;width:114px;height:114px;background: #333 url('../images/interface/progress.gif') no-repeat center center;}
.cb-modal .avatar img {border:1px solid #595959; vertical-align:bottom; padding:1px; background:#fff;display:block;max-height:100%;max-width:100%;}
.cb-modal .info { margin-left:10px;float:left}

.cb-modal .actions { margin: 5px 0 10px; padding:3px 0;width:100%;display:block;}


.addr-map{border:1px solid #CCC;}
.addr-map img{border:1px solid #FFF}


ul.stats{margin-bottom:10px;padding-left:0;}
ul.stats li {display: block;float: left;margin: 0 10px 0 0;padding: 0 10px 0 0;border-right: 1px solid #ccc;font-size:12px;font-weight: bold;}
ul.stats li:last-child {margin: 0;padding: 0;border: none;}


.check-box{margin-top:6px;}

.form-actions {padding: 19px 20px 20px;  margin-top: 20px; background-color: #f5f5f5; border-top: 1px solid #e5e5e5; *zoom: 1;}
.form-actions:before,
.form-actions:after {display: table; line-height: 0;content: "";}
.form-actions:after {clear: both;}


#editexpertprofile{ 
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;  opacity: 0.25;overflow: hidden; max-height: 360px;}
#editexpertprofile.on{ -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease; opacity:1;opacity:1;overflow:initial;max-height:10000px;/* <-Some value taller than your content should be*/}

/* BACK END STYLE */
/* ----------------------------------------------- */

i{font-size:16px;}

#credentialslist li {padding:6px 10px;font-weight: bold;line-height:18px;color: #555;background-color:#eceef1;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;width:22%;float: left;margin:0 2% 10px 0;}
#credentialslist li a{color:#333;}
#credentialslist li a:hover{color:#CC0000;}


.count,.count-exceeded{color: #888;font-size: 12px;margin:10px 0}
.avatar{max-width: 7.5em;}


hr.tech {
	height: 1px;
	background: rgba(var(--primary-rgb), 0.3);
	margin: 20px auto;
	position: relative;
	/* other hr style overwrites */
	box-shadow: none;
	border: none;
}

hr.tech:before, hr.tech:after {
	content: '';
	position: absolute;
	width: 10px;
	height: 1px;
	background: rgba(var(--primary-rgb), 0.5);
}

hr.tech:after {
	right: 0;
}

hr.tech[color="medium"] {
	background: rgba(var(--medium-rgb), 0.3);
}

hr.tech[color="medium"]:before, 
hr.tech[color="medium"]:after {
	background: rgba(var(--medium-rgb), 0.5);
}

hr.tech[color="cyan"] {
	background: rgba(var(--cyan-rgb), 0.3);
}

hr.tech[color="cyan"]:before, 
hr.tech[color="cyan"]:after {
	background: rgba(var(--cyan-rgb), 0.5);
}