/* ==================================================
	Color Overrides for base.css
================================================== */
/* backgrounds */
.bg-primary { background-color: #146758 /*cc*/; }
.bg-lightprimary { background-color: #22b398 /*cc*/; }
.bg-darkprimary { background-color: #0a332b /*cc*/; }

/* modal title head */
.modal-header { background: #0a332b /*cc*/; }

/* BS form elements */
.form-control:focus { border-color: #146758 /*cc*/; box-shadow: 0 0 0 .2rem rgba(0,131,145,.25) /*cc*/; }

/* header search */
.searchForm button:hover, .searchWrap button:focus { background: #e2f4f1 /*cc*/; }

/* ribbon */
.ribbon { background: #146758 /*cc*/; }

/* menu and search toggles for mobile */
.js #menu-button, .js #search-tog { color: #146758 /*cc*/; }
.js #menu-button[aria-expanded="true"], .js #search-tog[aria-expanded="true"] { background: #146758 /*cc*/; border-color: #22b398 /*cc*/; }

/* left nav toggle on mobile */
.togSubNav { background: #146758 /*cc*/;  }
.togSubNav:hover, .togSubNav:focus { background: #0a332b /*cc*/; }

/* left nav */
.subNav li a:hover, .subNav li a:focus, .subNav li.is-hover > a { background: #146758; /*cc*/ color: #fff; border-left-color: #146758; /*cc*/ }
.subNav li a.active { border-left-color: #146758; /*cc*/ background: #f9f9f9; color: #363636;}

/* slider buttons */
.flickity-button { background: #146758 /*cc*/; }

/* toggles */
.tog-control .state, .tog-control button[aria-expanded="true"] {
    background-color: #4a4a4a;
}
.tog-control button:hover, .tog-control button:focus {
    background: #4a4a4a;
    color: #fff;
}

/* white w/icon, title, desc. */
.card-white:hover, .card-white:focus { box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; }
.card-head img { background: #146758 /*cc*/; }
.card-white .card-title { color: #0a332b /*cc*/; }
.card-white .card-title a { text-decoration: none; }
.card-white .card-title a:hover, .card-white .card-title a:focus { text-decoration: underline; }

[class^="card-"] a.extlink {
    position: absolute;
    padding: .5rem;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.05);
    display: inline-block;
    line-height: 0;
}

/* white with dark head */
.card-dark:hover, .card-dark:focus { box-shadow: 0 3px 6px rgba(0,85,94,.5) /*cc*/; cursor: pointer;}
.card-dark > .card-title { background: #146758 /*cc*/; border-top: 3px solid #22b398 /*cc*/; }

/* news/funding Cards */
.card-accent { border-left: 50px solid #146758 /*cc*/; }
/* clickable version */
.card-accent:hover, .card-accent:focus { box-shadow: 0 3px 6px rgba(0,85,94,.5); border-left-color: #041512; /*cc*/; }

/* event card */
.card-event { border-top: 3px solid #146758 /*cc*/; }

/* gray card */
.card-gray ul {padding-left: 1.3rem;}
/* return to top */
.returntop svg { border: 1px solid #146758; /*cc*/ }
.returntop svg path { fill: #146758; /*cc*/ }
.returntop:hover, .returntop:focus { background: #146758; /*cc*/ }
@media (max-width: 991px) {
	.returntop:hover svg, .returntop:focus svg { background: #146758; /*cc*/ border-color: #146758; /*cc*/ }
}

/* ==================================================
	Misc
================================================== */
hr {clear: both;}

/* ==================================================
	Buttons
================================================== */
.btn-primary, .ckBtn[value='Check All'], input[value='View Statistics'],#UserForm input[type='submit']  {color: #fff; background-color: #146758; border-color: transparent; transition: all .3s ease-in-out;cursor:pointer;}
.btn-primary:hover, .btn-primary:focus, .ckBtn[value='Check All']:hover, .ckBtn[value='Check All']:focus, input[value='View Statistics']:hover, input[value='View Statistics']:focus, #UserForm input[type='submit']:hover, #UserForm input[type='submit']:focus, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {background-color: #041512; border-color: transparent;}

/********primary on dark background********/
.bg-darkprimary .btn-primary, .btn-reset {color: #000; background-color: #fff; border: 1px solid #ddd; transition: all .3s ease-in-out;}
.btn-reset:hover, .btn-reset:focus, .bg-darkprimary .btn-primary:hover, .bg-darkprimary .btn-primary:focus, .bg-darkprimary .btn-primary:not(:disabled):not(.disabled).active, .bg-darkprimary .btn-primary:not(:disabled):not(.disabled):active, .bg-darkprimary .show>.btn-primary.dropdown-toggle {background-color: #eee; }

input[type="radio"], input[type="checkbox"] {margin-right: .5rem;} 
/* ==================================================
	Home
================================================== */
.hero {background-color: #0a332b;}

.hero .lead {background: #000 /*cc*/;}
.hero p {color: #fff /*cc*/;}

span.twitter { margin-top: 1em; display: inline-block;}
.card-content.twitter {overflow-y: scroll;max-height: 404px;}
/*************circle icons************/
.icon {
    border: 5px solid #fff;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    border-radius: 50%;
}
/* ==================================================
	Research Areas
================================================== */



/* ==================================================
	Methods & Tools
================================================== */
/* Joinpoint */
.tosForm label {display: block;font-weight: bold; margin-top: .5rem;margin-bottom: 0;} 
.tosForm input, .tosForm textarea {width: 100%;}
.tosForm legend {font-weight: bold;}
input[type='radio'] {width: auto;}
input[type='radio']+label {display: inline-block !important;margin-right: 1rem;}

/* ==================================================
	Cancer Stats
================================================== */



/* ==================================================
	Publications
================================================== */
select {padding: .375rem .3rem;}


/* ==================================================
	Funding
================================================== */
.faded {opacity: .5;}


/* ==================================================
	About
================================================== */
#CommentForm {background: #f2f2f2;padding: 1rem;}
#CommentForm label {font-weight: bold;display: block;margin-bottom: 0;}
#CommentForm input, #CommentForm textarea {width: 100%;}

a[role="tab"]::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #146758;
    content: '';
    transition: transform 0.3s;
    transform: translate3d(0,-150%,0);
}
/* ==================================================
	Search
================================================== */
.search h3 {margin-bottom: 0;}
.search label {font-weight: bold; margin-bottom: 0;display: block;}
.search .date input,.search select {width: 100%;}
.search .date {min-width: none; text-align: left; border-right: none; margin-right: 0;padding: 0; text-transform: capitalize;}
.search fieldset {border-bottom: 1px dashed #ccc;padding-bottom: 1rem;}
.entries label {display: inline-block; margin-right: .5rem;} 

/* ==================================================
	Canques
================================================== */
.cq form#UserForm {background: #f2f2f2;padding-bottom: 1rem;}
.cq #UserForm h3 {background: #146758;color: #fff;padding: 1rem; margin-bottom: 0;}
.cq #UserForm h3 span {display: inline-block;float: right;}
.cq #UserForm fieldset.variable_container {padding: 1rem;}
.cq #UserForm input[type='submit'] {margin: 0 1rem 1rem;}

#UserForm p {background: #fff;margin-bottom: 0; padding: 1rem 0;}

.checkList {background: #fff;padding: .5rem;width: 70%;float: left;}
.checkList label {display: block;}
.chkBtns {width: 14%;float: right;display: block;margin-bottom: .5rem;}

input#goback {margin-left: 1rem;}
/* ==================================================
	Shadows on Responsive Tables
	https://codepen.io/hawcubite/pen/GZXLBR
================================================== */
.widetable { max-width: 100%; overflow: auto; position: relative; }
.table-inner-wrapper { position: relative; overflow: auto; max-width: 100%; }
.table-shadow { position: absolute; top: 0; bottom: 0; height: 100%; width: 1rem; z-index: 1; pointer-events: none; opacity: 0; }
.shadow-left { left: 0; background-image: linear-gradient( to left, rgba(0,0,0,0), rgba(0,0,0,.15) ); }
.shadow-right { right: 0; background-image: linear-gradient( to right, rgba(0,0,0,0), rgba(0,0,0,.15) ); }
.widetable table { min-width: 520px; margin-bottom: 0; }
	
.fl-scrolls{bottom:0;height:35px;overflow:auto;position:fixed}.fl-scrolls div{height:1px;overflow:hidden;pointer-events:none}.fl-scrolls div:before{content:"\A0"}.fl-scrolls,.fl-scrolls div{font-size:1px;line-height:0;margin:0;padding:0}.fl-scrolls-hidden{bottom:9999px}.fl-scrolls-hidden div:before{content:"\A0\A0"}.fl-scrolls-viewport{position:relative}.fl-scrolls-body{overflow:auto}.fl-scrolls-viewport .fl-scrolls{left:0;position:absolute}.fl-scrolls-hoverable .fl-scrolls{opacity:0;transition:opacity .5s ease .3s}.fl-scrolls-hoverable:hover .fl-scrolls{opacity:1}


/* ==================================================
	Staff List
================================================== */
.icn-email, .icn-call { display: inline-block; padding-left: 2.2rem; position: relative; margin-bottom: .5rem; }
.icn-email:before, .icn-call:before { display: block; content:''; left: 0; top: 0; position: absolute; }
.icn-email:before { background: url("../toolbox/images/dccps/icn-email.svg") left center no-repeat; height: 1.8rem; width: 2rem; }
.icn-call:before { background: url("../toolbox/images/dccps/icn-phone.svg") .35rem center no-repeat; height: 1.35rem; width: 2rem; }
.no-icon {padding-left: 2.2em;}
	
.staff-filters { font-size: 1rem; }
.staff-filters legend { font-size: 1.125rem; font-weight: 500; margin-bottom: .2rem; }
.radio-group { margin-bottom: 1rem; }
.radio-group label { display: block; margin-bottom: .25rem; }
.radio-group input { margin-right: .15rem; }

.keyword label { margin: 0 .25rem 0 0; font-weight: 500; font-size: 1.125rem; }
.keyword input { width: 100%; }
	
.card-staff { background: #f2f2f2; padding: 1rem; font-size: 1.0625rem; line-height: 1.3; margin-bottom: .25rem; width: 100%; }

.staff-image { float: left; width: 13%; }
.staff-image img { border-radius: 4px; }
.staff-details { float: left; width: 42%; padding-right: 3.5%; padding-left: 2%; }
.staff-areas { float: left; width: 45%; padding-left: 3.5%; border-left: 1px solid #ccc; }
.staff-areas strong { padding: .05rem 0 .05rem 1.85rem; display: block;  position: relative; }
.staff-areas strong:before { display: block; content: ''; width: 1.5rem; height: 1.5rem; background: url("../toolbox/images/dccps/icn-chat.svg") left center no-repeat; position: absolute; top: 0; left: 0; }
.staff-areas ul { margin-left: .5rem; }
@media (max-width: 768px) {
	.card-staff { font-size: 1rem; }
	.staff-image {  width: 13%; }
	.staff-details { width: 42%; padding-right: 3.5%; padding-left: 2%; }
	.staff-areas { width: 45%; padding-left: 3.5%; border-left: 1px solid #ccc; }
}
@media (max-width: 576px) {
	.card-staff > * { float: none; }
	.staff-image { float: right; width: 25%; }
	.staff-details, .staff-areas { width: 100%; padding: 0; margin: 0; border: none; }
	.staff-areas { margin-top: 1rem; }
}




/* ==================================================
	Flickity v2.1.2
================================================== */
.flickity-enabled { padding: 0 4rem; }
.flickity-button { background: rgb(20,103,88) }
.flickity-prev-next-button { height: 95%; border-radius: 0; }
.flickity-prev-next-button.previous { left: 0; border-radius: 0 4px 4px 0; }
.flickity-prev-next-button.next { right: 0; }
.carousel-cell { width: 33%; display: none; padding: 0 1rem; line-height: 1.2; font-size: 1rem; } /* hide all cells on page load */
.carousel-cell:first-child { display: block; } /* unhide first cell on page load */
.main-carousel a {text-decoration: none;}
.flickity-enabled .carousel-cell { display: block; } /* show all cells when plugin is loaded */

/* change cell widths down to mobile to show less cards in slider */
@media (max-width: 1500px) { .carousel-cell { width: 33%; } }
@media (max-width: 1080px) { .carousel-cell { width: 50%; } }
@media (max-width: 768px) {	.carousel-cell { width: 100%; } }