/* Colors Legend *******************/

/* #e8edf1 > Lighter Grey */
/* #121011 > Darkest Grey */

/* #f3f7fa > Lightest Blue */
/* #b3bcc3 > Light Blue */
/* #2d5e87 > Dark Blue */
/* #1f2340 > Darkest Blue */

/* #c7b48a > Gold */

/* Preset Tags *******************/

body {
	color: #121011;
}

h1 {
	color: #2d5e87;
}

h2 {
	color: #2d5e87;
}

h2:after {
	background-color: #b3bcc3;
}

h3 {
	color: #2d5e87;
}

h4 {
	color: #b3bcc3;
}

a {
	color: #2d5e87;
}

/* Button *******************/

.cta-action i {
	border-color: #2d5e87;
}

.cta-action:hover i {
	background-color: #2d5e87;
	color: #ffffff;
}

/* User *******************/

.user-pic img {
	border-color: #ffffff;
}

/* Tags *******************/

.tag {
	border-color: #2d5e87;
}

.tag:hover {
	background-color: #2d5e87;
	color: #ffffff;
}

/* Video Preview *******************/

.video-thumbnail {
	color: #ffffff;
}

.video-thumbnail:before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
}

.video-preview .video-main-info {
	color: #b3bcc3;
}

/* Star Ranking *******************/

.star-ranking i {
	color: #e8edf1;
}

.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: #ff9800;
}

.star-ranking:not(.disabled) i:hover ~ i {
	color: #e8edf1;
}

/* Main Container *******************/

.fixed-side-menu .main-container::before {
	background-color: #f3f7fa;
}

.profile-side-menu .main-container::after {
	background-color: #f3f7fa;
}

/* Header *******************/

.side-nav-btn {
	color: #b3bcc3;
}

.header-logo > i {
	color: #b3bcc3;
}

/* Sidebar *******************/

.sidebar {
	background-color: #f3f7fa;
}

@media (max-width: 1024px) {
	
	#sidebar-profile-container .sidebar {
        background-color: transparent;
	}
    #sidebar-profile-container .sidebar .sidebar-content:not(:empty) {
        background-color: #f3f7fa;
    }
}

/* Sub Menu *******************/

.nav-submenu {
	background-color: #ffffff;
	border-color: #e8edf1;
}

/* Nav Side Menu *******************/

.sidebar-background {
	background-color: rgba(0, 0, 0, 0.5);
}

.search-field input {
	background-color: #e8edf1;
}

.profile-container {
	color: #2d5e87;
}

/* Profile Side Menu *******************/

#sidebar-profile-container .video-main-info .video-user,
#sidebar-profile-container .video-main-info .video-date {
	color: #b3bcc3;
}

/* Footer *******************/

footer {
	background-color: #1f2340;
	color: #ffffff;
}

footer .footer-details,
footer .footer-details a {
	color: #ffffff;
}

footer .footer-tagline p {
	color: #b3bcc3;
}

footer .social-media-list li a {
	color: #ffffff;
}

footer .email-field {
	border-color: #ffffff;
}

footer .email-field input,
footer .email-field a,
footer .email-field button {
	color: #ffffff;
}

/* Home *******************/

.home-container:not(:last-child) {
	border-bottom-color: #f3f7fa;
}

.featured {
	border-bottom-color: #2d5e87;
	color: #ffffff;
}

.featured::before {
	background-color: rgba(0, 0, 0, 0.4);
}

.featured-play-btn {
	border-color: #ffffff;
}

.featured .video-main-info h1 {
	color: #ffffff;
}

.slider-btn {
	background-color: #ffffff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

/* Video *******************/

.video-container {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}

.video-main-info .video-date,
.video-main-info .video-likes,
.video-main-info .video-views {
	color: #b3bcc3;
}

.add-comment-container textarea {
	background-color: #e8edf1;
}

.comment-container .user,
.comment-container .comment-time {
	color: #2d5e87;
}

/* Login Form - Override */

#loginModal.modal .modal-content {
	background-color: #2d5e87;
}

#loginModal.modal .close {
	color: #ffffff !important;
	text-shadow: 0 1px 0 #ffffff !important;
	opacity: 1;
}

#loginModal.modal .close:hover {
	color: #d3dce4 !important;
	opacity: 1;
}

#loginModal.modal .cta-action {
    color: #ffffff !important;
}

#loginModal.modal .cta-action i {
	border-color: #ffffff;
}

#loginModal.modal a {
    color: #ffffff;
}

#loginModal h4.modal-title {
	color: #ffffff;
	font-size: 16px;
}

#loginModal.modal input.form-input {
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
}

#loginModal.modal .js-float-label-wrapper.focused input.form-input{
	background-color:#ffffff !important;
	color: #333333;
	
}

#loginModal.modal .authentication-form label {
    color: #ffffff;
    font-weight: normal;
}

#loginModal.modal a:hover, 
#loginModal.modal a:focus {
    color: #d3dce4;
}

#loginModal.modal .js-float-label-wrapper.focused label {
	color: #2d5e87;
	font-weight: bold;
}

#loginModal.modal .js-float-label-wrapper.populated label {
    color: #2d5e87;
	font-weight: bold;
}

#loginModal.modal .cta-action:hover i {
    background-color: #ffffff;
    color: #2d5e87;
}

#loginModal.modal .authentication-form hr {
    opacity: 0.5;
    background-color: #ffffff;
}

/* Video Share form, Report modal - override other css*/
.modal,
#shareModal.modal, 
#reportModal.modal,
#reportCommentModal.modal  {
    background-color: rgba(0,0,0,0.3);
}

.modal-content,
#shareModal .modal-content, 
#reportModal .modal-content,
#reportCommentModal .modal-content 
{
	background-color: #e8edf1;
}

.modal .close,
#shareModal.modal .close,
#reportModal.modal .close,
#reportCommentModal.modal .close {
	color: #2d5e87 !important;
	text-shadow: 0 1px 0 #2d5e87 !important;
	opacity: 1;
}

.modal .close:hover,
#shareModal.modal .close:hover,
#reportModal.modal .close:hover,
#reportCommentModal.modal .close:hover {
	color: #5294c6  !important;
	opacity: 1;
}

.modal .cta-action,
#shareModal.modal .cta-action,
#reportModal.modal .cta-action,
#reportCommentModal.modal .cta-action {
    color: #2d5e87 !important;
}

.modal .cta-action i,
#shareModal.modal .cta-action i,
#reportModal.modal .cta-action i,
#reportCommentModal.modal .cta-action i {
	border-color: #2d5e87;
}

.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: #2d5e87;
    color: #ffffff;
}

.modal a,
#shareModal.modal a,
#reportModal.modal a,
#reportCommentModal.modal a {
    color: #2d5e87;
}

.modal .form-icon,
#shareModal.modal .form-icon,
#reportModal.modal .form-icon,
#reportCommentModal.modal .form-icon {
    color: #2d5e87;
}

.modal h3,
#shareModal h3,
#reportModal h3,
#reportCommentModal h3 {
	color: #2d5e87;
}

.modal h4.modal-title,
#shareModal h4.modal-title,
#reportModal h4.modal-title,
#reportCommentModal h4.modal-title {
	color: #2d5e87;
}

.modal .form-control,
#shareModal.modal .form-control,
#reportModal.modal .form-control,
#reportCommentModal.modal .form-control {
	color: #666 !important;
	background-color: #ffffff;
}

.modal input.form-input,
#shareModal.modal input.form-input {
	border: 1px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.35);
	color: #666666;
}

.modal .js-float-label-wrapper.focused input.form-input,
#shareModal.modal .js-float-label-wrapper.focused input.form-input {
	background-color:#ffffff !important;
	color: #666666;
}

.modal .authentication-form label,
#shareModal.modal .authentication-form label,
#reportModal.modal .authentication-form label,
#reportCommentModal.modal .authentication-form label  {
    font-weight: normal;
}

.modal a:hover, 
#shareModal.modal a:hover, 
#shareModal.modal a:focus,
#reportModal.modal a:hover,
#reportModal.modal a:focus,
#reportCommentModal.modal a:hover,
#reportCommentModal.modal a:focus {
    color: #5294c6 ;
}

.modal .js-float-label-wrapper.focused label,
#shareModal.modal .js-float-label-wrapper.focused label {
	color: #2d5e87;
}

.modal .js-float-label-wrapper.populated label,
#shareModal.modal .js-float-label-wrapper.populated label {
    color: #2d5e87;
}

.modal hr, 
#shareModal.modal hr {
    border-top: none !important;
}

.modal .note-frame *, 
#shareModal.modal .note-frame * {
    color: #666;
	background-color: #ffffff;
}

#shareModal.modal .js-float-label-wrapper {
    border: 1px solid rgba(0,0,0,0.3);
}

#shareModal .form-group {
    background-color: #ffffff !important;
}

.modal,
#reportModal.modal,
#reportCommentModal.modal {
    color: #2d5e87;
}