
/* Colors Legend *******************/

/* #e8edf1 > Lightest Grey */
/* #e6e9ea > Lighter Grey */
/* #b3bcc3 > Grey */
/* #55646e > Dark Grey */
/* #121011 > Darkest Grey */

/* #ffffff > Lightest Blue >> White */
/* #ffc208 > Light Blue >> OAHD Pink >> Yellow */
/* #595959 > Blue >> Grey */ 
/* #1d87da > Dark Blue >> OAHD Blue */
/* #1e6496 > Darkest Blue >> OAHD Yellow >> XPT Blue */

/* #ffc208 > Gold >> OAHD Green >> Yellow */

/* Typography ********************/
@font-face {
    font-family: 'Proxima Nova';
    src: url('../font/proxima-nova-webfont.eot');
    src: url('../font/proxima-nova-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/proxima-nova-webfont.woff2') format('woff2'),
         url('../font/proxima-nova-webfont.woff') format('woff'),
         url('../font/proxima-nova-webfont.ttf') format('truetype'),
         url('../font/proxima-nova-webfont.svg#proxima_nova_altregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body { font-family : Arial, Verdana, Sans-Serif; }
h1, h2 {
	font-family: Proxima Nova, Arial, Verdana, Sans-Serif;
}
h1 {
	font-size: 36px;
}
@media (max-width: 768px) {

	h1 {
		font-size: 30px;
		margin-bottom: 12px;
	}
}

@media (max-width: 480px) {

	h1 {
		font-size: 24px;
		margin-bottom: 12px;
	}
}
h2 {
	font-size: 20px;
}

/* Additional styles *********************/

.featured-info .t-desc {
    margin-top: 30px;
}

#channelList .t-title {
    text-transform: none;
}

/* header {
	height: 140px;
} */
@media (min-width: 1024px) {
	.profile-section {
		height: 140px;
	}
	#imgLogoTop {
    width: 320px;
    height: auto;
    margin-top: -5px;
}
}

.introduction-section {
	border-bottom: 1px solid white;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
#profile-actions {
	border-color: white;
}

header .logo-container {
    margin-right: 0;
}
#imgLogoTop {
	height: auto;
}

.channel-thumbnail {
    width: 28px;
    height: 28px;
    border-radius: 5px;
}
.channel-thumbnail .fa {
    width: 28px;
    line-height: 28px;
    font-size: 14px;
}
.channel-thumbnail + .t-title {
    height: 28px;
	overflow: hidden;
	white-space: nowrap;
	max-width: 700px;
}

.channel-search {
    margin-right: 25px;
    margin-left: -5px;
}

.feed .channel-thumbnail {
    float: right;
	/*margin: 23px 0;*/
}
.feed .channel-thumbnail + .t-title {
	padding-left: 0;
    text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	padding-top: 5px;
	padding-right: 5px;
}
.video-thumbnail:hover .t-img-wrapper::before {
    background-color: rgba(29, 135, 218, 0.5);
}
#profile-actions .cta-highlight.blue:hover .fa, #profile-actions .cta-highlight.blue:active .fa, #profile-actions .cta-highlight.blue.selected .fa {
    background-color: #1e6496;
}

.introduction-section i{
	padding: 6px;
	border-radius: 4px;
	font-size: 10pt;
	float: right;
}
.text-double{
	line-height: 28px;
}

/* Preset Tags *******************/
.font-pink {
	color: #e81f63;
}
.font-oahd-blue {
	color: #1d87da;
}
.font-yellow {
	color: #ffc208;
}
.font-green {
	color: #ccdb38;
}
.font-xpt-blue {
	color: #1e6496;
}
.pink {
	background-color: #e81f63;
}
.oahd-blue {
	background-color: #1d87da;
}
.yellow {
	background-color: #ffc208;
}
.green {
	background-color: #ccdb38;
}
.xpt-blue {
	background-color: #1e6496;
}

body {
	color: #121011;
}

h1 {
	color: #595959;
}

h2 {
	color: #55646e;
}

h2:after {
	background-color: #ffc208;
}

a {
	color: #595959;
}

/* Textarea *******************/

.c-textarea textarea {
	background-color: #e8edf1;
}

.c-textarea textarea:focus {
	background-color: #ffffff;
	border: 1px solid #ffc208;
}

/* CTA Highlight *******************/

.cta-highlight {
	color: #ffc208;
}

.cta-highlight .fa {
	color: #ffc208;
	border-color: #ffc208;
}

.cta-highlight:hover .fa,
.cta-highlight:active .fa,
.cta-highlight.selected .fa {
	background-color: #ffc208;
	color: #ffffff;
}

@media (max-width: 768px) {

	.cta-highlight {
		color: #ffffff;
	}

	.cta-highlight span {
		color: #ffc208;
	}
}

/* Tag *******************/

.tag {
	border-color: #ffc208;
	color: #55646e;
}

.feed .tag {
	color: #b3bcc3;
}

/* Criteria *******************/

.criteria {
	color: #55646e;
}

.criteria span {
	color: #ffc208;
	border-color: #ffc208;
}

.criteria > span {
	color: #55646e;
}

.criteria input:checked + span {
	background-color: #595959;
	color: #ffffff;
	border-color: #595959;
}

.criteria input:checked + span span {
	color: #ffffff;
}

/* Scrollbar *******************/

.custom-scrollbar::-webkit-scrollbar-track,
.custom-scrollbar ::-webkit-scrollbar-track {
	background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar,
.custom-scrollbar ::-webkit-scrollbar {
	background-color: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb,
.custom-scrollbar ::-webkit-scrollbar-thumb {
	background-color: #e6e9ea;
}

/* Email Field *******************/

.email-field {
	border-color: #ffffff;
}

.email-field input {
	color: #ffffff;
}

.email-field input::-webkit-input-placeholder{
	color: #97b7ce;	
}
.email-field input::-ms-input-placeholder{
	color: #97b7ce;
}
.email-field input::placeholder {
	color: #97b7ce;
}

.email-field a,
.email-field button {
	color: #ffffff;
}

.email-field a:hover span,
.email-field button:hover span {
	color: #ffffff;
}

/* Video Thumbnail *******************/

.video-thumbnail > span {
	color: #ffffff;
}

.video-thumbnail .t-img-wrapper {
	background-color: #000000;
}

.video-thumbnail .t-img-wrapper::before {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.29), rgba(0, 0, 0, 0.8));
}

.video-thumbnail .t-img-wrapper:hover {
	background-color: #595959;
}

.video-thumbnail:hover .t-img-wrapper::before {
	background-image: none;
	background-color: rgba(45, 94, 135, 0.8);
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {

	.video-thumbnail .t-more-info {
		background-color: #ffffff;
		color: #55646e;
	}

	.video-thumbnail .t-title {
		color: #121011;
	}
}

/* Channel Thumbnail *******************/

.channel-thumbnail {
	background-color: #000000;
}

.channel-thumbnail .fa {
	color: #ffffff;
}

.channel-thumbnail + .t-title {
	color: #595959;
}

/* Main - Structure *******************/

#main-wrapper {
	background-color: #ffffff;
}

.content-section::before {
	background-color: #1d87da;
}

.main-content-section {
	background-color: #ffffff;
}

/* Main - Header *******************/

header {
	background-color: #ffffff;
}

/* Channel List *******************/

#channelList {
	background-color: transparent;
	box-shadow: none;
}

#channelList ul {
	background-color: #ffffff;
}

#channelList > ul::after {
	border-bottom: 8px solid #ffffff;
}

#channelList > ul > li a {
	color: #55646e;
}

#channelList > ul > li:hover {
	background-color: #ffc208;
}

#channelList > ul > li:hover a {
	color: #ffffff;
}

/* Search *******************/

.search-main-wrapper header {
	background-color: #ffffff;
}

.search-field {
	background-color: #e8edf1;
}

.search-field input:focus {
	background-color: #ffffff;
	border: 1px solid #ffc208;
}

/* Main - Profile *******************/

.profile-section {
	background-color: #1d87da;
	color: #ffffff;
}

.profile-section span {
	padding-left: 10px;
	color: #ffffff;
}

@media (max-width: 1024px) {

	.profile-section {
		background-color: #ffffff;
	}

	.profile-section a span {
		color: #595959;
	}
}

/* Main - Featured Video *******************/

.featured-video .content-img-wrapper::before {
	background-color: none;
	box-shadow: 0 10px 20px rgba(179, 188, 195, 0.4);
}

.featured-overlay {
	color: #ffffff;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.featured-play-btn {
	border-color: #ffc208;
}

.featured-play-btn i {
	color: #ffc208;
}

.featured-video h1 {
	color: #ffffff;
}

.featured-info .t-owner img,
.comments .t-owner img {
	border-color: #ffffff;
}

.featured-info .t-date,
.featured-info .t-likes,
.featured-info .t-views {
	color: #b3bcc3;
}

/* Main - Feed *******************/

.feed-section {
	color: #ffffff;
	background-color: #1d87da;
}

.feed-section a {
	color: #ffc208;
}

.feed-section p {
	color: #b3bcc3;
}

.feed-section .feed-highlights {
	background-color: #595959;
}

.feed-section .feed .t-owner-pic img {
	border-color: #ffffff;
}

.feed-section .feed .t-title {
	color: #ffffff;
}

.feed-section .feed .t-more-info {
	color: #ffffff;
}

.feed-section .feed .t-owner {
	color: #b3bcc3
}

/* Main - Main Highlights *******************/

.main-highlights::before {
	background-color: #1d87da;
}

/* Video *******************/

.video-section::before {
	background-color: #1d87da;
}

.video-section video {
	box-shadow: 0 10px 20px rgba(179, 188, 195, 0.4);
}

/* Main - Footer *******************/

footer {
	background-color: #1e6496;
	color: #ffffff;
}

footer p {
	color: #55646e;
}

footer p b {
	color: #ffffff;
}

footer .social-media-list a {
	color: #ffffff;
}


@media (max-width: 1540px) {
	
	.content-section +	footer::before {
		background-color: #1e6496;
	}
}

/* Vignettes */

.custom-scrollbar li > div {
    color: #55646e;
}
.custom-scrollbar li > div .t-duration, 
.custom-scrollbar li > div .t-likes, 
.custom-scrollbar li > div .t-hd {
    color: #b3bcc3;
}
.custom-scrollbar li div .t-title {
    color: #121011;
}

@media (max-width: 768px) {

    .custom-scrollbar li.list > div {
        color: #fff !important;
    }
    .custom-scrollbar li.list .t-title, 
    .custom-scrollbar li.list .t-duration, 
    .custom-scrollbar li.list .t-likes{
        color: #fff;
    }
}

/* Videos & Channels */
.video-section iframe {
    box-shadow: 0 10px 20px rgba(179, 188, 195, 0.4);
}

/* Login & User actions */

.profile-section a:hover * {
    color: #ffc208;
}
#profile-actions {
    border-top-color: #b3bcc3;
    border-bottom-color: #b3bcc3;
}
.email-field a, .email-field button {
    color: #ffffff !important;
}

/* Forms */

.form-body p {
    color: #b3bcc3;
}
.user-actions input[type="text"], .user-actions input[type="password"], 
input[type="text"].form-control, input[type="password"].form-control,
select.form-control
{
    background-color: #e8edf1;
}
.user-actions input[type="text"]:focus, .user-actions input[type="password"]:focus, 
input[type="text"].form-control:focus, input[type="password"].form-control:focus,
select.form-control:focus
{
    background-color: #ffffff;
    border-color: #ffc208;
}

.thumbnail {
    border-color: #ddd;
}

/* Links & buttons */

.cta-highlight.blue:hover .fa, .cta-highlight.blue:active .fa, .cta-highlight.blue.selected .fa {
    background-color: #595959;
    color: #ffffff;
}
.cta-highlight.blue {
    color: #595959;
}
.cta-highlight.blue .fa {
    color: #595959;
    border-color: #595959;
}
.feed-section .cta-highlight {
    color: white;
}
.feed-section .cta-highlight .fa {
    color: white;
    border-color: white;
}
.cta-default, .cta-default a {
    color: #ffc208;
}
.cta-default.blue .cta-default.blue a {
    color: #595959;
}

/* Criteria */
.criteria td {
    color: #ffc208;
    border-color: #ffc208;
}
.criteria td label {
    color: #55646e;
}
.criteria td.checked {
    background-color: #595959;
    color: #ffffff;
    border-color: #595959;
}
.criteria td.checked label {
    color: #ffffff;
}

/* Modals */

.modal a {
    color: #595959; /* override bootstrap settings */
}

/* Select *******************/

.custom-select i {
    /*color: #ffc208;*/
}

.custom-select:not(.open) > ul,
.select-list .placeholder {
    color: #b3bcc3;
}

.select-list .placeholder,
.select-list ul {
    border-color: #ffc208;
}

.select-list .selected {
    color: white;
}

.select-list ul li {
    background-color: #ffffff;
    /* color: #1f233f; */
	color: #1d87da;
}

.custom-select.open .select-list ul li:hover {
    background-color: #ffffff;
}

/* Other */

.tag a {
    color: #55646e;
}

.feed .tag a, footer a {
    color: white;
}

.versionDiv {
    color: #55646e;
}

.loader {
    border-color: #e8edf1;
    border-top-color: #1d87da;
}

@media (max-width: 768px) {
    
    .videos-section .video-thumbnail > span {
        color: #55646e;
    }

    .cta-highlight {
        color: #ffc208;
    }
}


/************************/
/********** V2 **********/
/************************/
.main-logo {
    max-height: none;
    max-height: auto;
    max-width: 220px;
}
.header-logo-container {
    width: auto;
    min-width: unset;
    min-width: auto; /* Edge */
	display: inline /* IE */
}
.header-logo {
	margin: auto;
}
#sidebar-nav-container .header-logo-container {
    padding: 10px 10px;
}
@media (max-width: 1024px) {
	header {
		height: auto;
		min-height: auto;
		flex-wrap: wrap;
	}
	.profile-container {
		width: auto;
		min-width: auto;
		max-width: inherit;
		justify-content: flex-end;
	}
	.search-field-container {
		order: 2;
		width: 100%;
		margin: -10px 10px 10px;
	}
    .fixed-side-menu .search-field {
        max-width: unset;
        max-width: auto;
        margin-top: 10px;
    }
}
@media (max-width: 420px){
    .main-logo {
        max-height: none;
        max-height: auto;
        max-width: 150px;
    }
}
#loginModal.modal .modal-content {
    background-color: #f3f7fa;
}
#loginModal.modal .cta-action:hover i {
    background-color: #595959;
    color: #f3f7fa;
}
#loginModal.modal .js-float-label-wrapper.populated label,
#shareModal.modal .js-float-label-wrapper.populated label {
    color: #f3f7fa;
}
.profile-container #lnkProfileActions {
	color: #595959;
}
.home-container:not(:last-child) {
    border-bottom-color: #fff;
}
.fixed-side-menu .main-container::before {
    background-color: #f3f7fa;
}
.profile-side-menu .main-container::after {
    background-color: #f3f7fa;
}
.sidebar {
    background-color: #f3f7fa;
	color: #595959;
}
.sidebar .sidebar-items a {
	color: #595959;
}
@media (max-width: 1024px) {
	
	#sidebar-profile-container .sidebar {
        background-color: transparent;
	}
    #sidebar-profile-container .sidebar .sidebar-content:not(:empty) {
        background-color: #f3f7fa;
    }
}
.slider-btn i {
    color: #ffc208;
}
.video-preview h5 {
    color: #595959;
}
.channel-thumbnail {
    background-color: transparent;
	border-radius: 0;
}
.nav-item-icon img, .channel-icon img,
.search-results-container .channel-results li a img  {
	width: 30px;
	height: 30px;
}
.channel-icon img {
	margin-top: 6px;
}
.video-item {
	max-height: 540px;
	height: 460px;
}
.cta-action {
    color: #ffc208 !important;
}
.cta-action i {
    border-color: #ffc208;
}
.cta-action:hover i {
    background-color: #ffc208;
}
.modal h4.modal-title, #shareModal h4.modal-title, #reportModal h4.modal-title, #reportCommentModal h4.modal-title {
    color: #f3f7fa;
}
.modal h3, #shareModal h3, #reportModal h3, #reportCommentModal h3 {
    color: #f3f7fa;
}
.modal i.form-icon.fa, .modal i.form-icon.fas,
.modal .form-icon i.fa, .modal .form-icon i.fas {
	color: #f3f7fa !important;
}
.modal .cta-action, #shareModal.modal .cta-action, #reportModal.modal .cta-action, #reportCommentModal.modal .cta-action {
    color: #f3f7fa !important;
}
.modal .cta-action:hover i, #shareModal.modal .cta-action:hover i, #reportModal.modal .cta-action:hover i, #reportCommentModal.modal .cta-action:hover i {
    background-color: #f3f7fa;
    color: #ffffff;
}
.modal .cta-action i, #shareModal.modal .cta-action i, #reportModal.modal .cta-action i, #reportCommentModal.modal .cta-action i {
    border-color: #f3f7fa;
}
.modal .close, #shareModal.modal .close, #reportModal.modal .close, #reportCommentModal.modal .close {
    color: #f3f7fa !important;
}
#loginModal.modal .authentication-form hr {
    color: #595959;
}
.criteria label {
    color: #595959;
	border-color: #ffc208;
}
.criteria label span {
    color: #ffc208;
    border-color: #ffc208;
}
.criteria input:checked + label {
    background-color: #595959;
    color: #ffffff;
    border-color: #595959;
}
.criteria input:checked + label span {
    color: #ffc208;
}
.tag {
	font-weight: normal;
	border-radius: 0;
}
.tag:hover {
    background-color: #ffc208;
}
@media (min-width: 769px) {
	.footer-col + .footer-col {
		padding-left: 80px;
	}
}
.oahd-col img {
	display: inline;
}
footer .select-list .placeholder, .select-list ul {
    border-color: #b3bcc3;
}
footer .select-list ul li {
    color: #fff;
}
.custom-select.open .select-list ul li {
    background-color: #1f2340 !important;
}
.custom-select.open .select-list ul li:hover {
    background-color: #1f2340;
}
.introduction-section i {
    border-radius: 0;
}
.introduction-section {
	border-bottom-color: #595959;
}
.modal, #reportModal.modal, #reportCommentModal.modal {
    color: #595959;
}
.modal h3, #shareModal h3, #reportModal h3, #reportCommentModal h3 {
    color: #595959;
}
.modal h4.modal-title, .modal input.form-input, .modal a, .modal .cta-action, .modal .authentication-form label, .modal .close,
#loginModal.modal .close, #loginModal.modal .cta-action,
#shareModal.modal .close, #shareModal.modal .cta-action, #shareModal.modal .form-group label,
#reportModal.modal .close, #reportModal.modal .cta-action,
#reportCommentModal.modal .close, #reportCommentModal.modal .cta-action {
    color: #595959 !important;
}
#shareModal.modal .cta-action:hover i,
#reportModal.modal .cta-action:hover i,
#reportCommentModal.modal .cta-action:hover i {
    background-color: #595959 !important;
}
.modal .cta-action i {
	border-color: #595959 !important;
}
.modal i.form-icon.fa, .modal i.form-icon.fas, .modal .form-icon i.fa, .modal .form-icon i.fas {
    color: #595959 !important;
}
.search-field input,
.modal input.form-input {
    background-color: #e8edf1 !important;
}
.search-field input:focus,
.modal input.form-input:focus {
    background-color: #e8edf1;
    border: 1px solid #ffc208;
}
star-1 i:first-child, .star-2 i:first-child, .star-2 i:nth-child(2), .star-3 i:first-child, .star-3 i:nth-child(2), .star-3 i:nth-child(3), .star-4 i:first-child, .star-4 i:nth-child(2), .star-4 i:nth-child(3), .star-4 i:nth-child(4), .star-5 i, .star-ranking:not(.disabled):hover i {
    color: #ffc208;
}

@media (max-width: 1024px) {
    .search-field-container .search-field {
        max-width: none;
        max-width: auto;
    }
}