/* UTILITY CLASSES */
.orange { color: #f78d03; }
.red { color: #a31818; }
.green { color: #00d440; }
.white { color: #fff; } 
.gray { color: #444; }
.light-gray { color: #888; }
.yellow { color: #F5DE50; }

.bg-white { background-color: #fff; }
.bg-gray { background-color: #ededed; }
.bg-green { background-color: #00d440; }

.clickable { cursor: pointer; }
.spacer { padding: 5px; }
.rounded_corners { border-radius: 7px; }
.rounded_corners_4 { border-radius: 4px; }

.float-left { float: left; }
.float-right { float: right; }

.padding-top-20 { padding-top: 20px; }
.padding-bottom-15 { padding-bottom: 15px; }
.padding-left-10 { padding-left: 10px; }
.padding-left-20 { padding-left: 20px; }
.padding-right-5 { padding-right: 5px; }
.padding-left-2 { padding-left: 2px; }
.padding-right-1 { padding-right: 1px; }
.margin-left-20 { margin-left: 20px; }
.margin-bottom-10 { margin-bottom: 10px; }
.fa-centers { line-height: inherit!important; vertical-align: middle; }
.fa-center { line-height: 8px; vertical-align: middle; }

/* NAVBAR OVERRIDE */
.navbar {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.432);
    -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.432);
}

/* HOME */
.home-card {
    background: #444;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.card { border-radius: 12px; }

.home-text {
    font-size: 18px;
}

.card-text-large { font-size: 22px; }
.btn-home-login { height: 60px; margin-top: 1px; border-radius: 12px 12px 12px 12px; background-color: #fff; color: green; margin-bottom: 9px; }
.btn-home-signup { height: 60px; border-radius: 12px 12px 12px 12px; background-color: #fff; color: green; margin-bottom: 17px; }
.home-overview-img { background-image: linear-gradient(135deg, rgb(10, 55, 50), rgb(85, 195, 136) 75%); border-radius: 12px 12px 12px 12px; }
.home-search-img { background-image: url("../img/home-search-bg.jpg"); border-radius: 12px 12px 12px 12px; }

/* FORMS */
.modal-input { height: 38px; width: 100%; padding-left: 15px; font-size: 16px; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 7px; border-radius: 7px; }
.modal-input-84 { height: 38px; width: 84%; padding-left: 15px; font-size: 16px; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 7px; border-radius: 7px; }
.modal-input-small { height: 38px; width: 75%; padding-left: 15px; font-size: 16px; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 7px; border-radius: 7px; }
.input-streaming-service { height: 38px; width: 75%; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 7px; border-radius: 7px; }
.select-modal { margin-top: 0.5px; height: 39px; width: 60%; padding-left: 11px; font-size: 16px; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 7px; border-radius: 7px; }


.filters-row { padding-left: 18px; }
.queue-switch { padding-right: 15px; }

.custom-control-input:focus~.custom-control-label::before {
    border-color: red !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 47, 69, 0.25) !important;
  }
  
.custom-control-input:checked~.custom-control-label::before {
border-color: #00d440;
background-color: #00d440;
}


/* LOGIN */
.input-group-prepend span{
    width: 50px;
    height: 40px;
    color: #fff;
    padding-left: 18px;
    border: 1px #666 solid !important;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
}

.login_input {
    font-size: 18px;
    color: #444;
    border: 1px #666 solid;
    width: 300px;
    height: 40px;
    margin-top: 0px;
    padding-left: 15px;
    -webkit-border-radius: 0px 10px 10px 0px; 
    border-radius: 0px 10px 10px 0px;
}

.login_input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}



/* SIGNUP */
.signup-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0 solid transparent;
    border-radius: 0.25rem;

    /* height: 530px; */
    margin-top: auto;
    margin-bottom: auto;
    width: 390px;
    background-color: rgba(238, 232, 213, 0.125);
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }

.signup-card-header h3{
    color: rgb(0, 212, 64);
    padding: 0.75rem 1.25rem;
    /* margin-bottom: 0; */
    background-color: rgba(7, 54, 66, 0.25);
    border-bottom: solid 1px rgba(0, 43, 54, 0.95);
    /* border-bottom: 0 solid transparent; */
}

/* .select-signup { margin-top: 0.5px; height: 39px; width: 73%; padding-left: 11px; font-size: 16px; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; }
.signup_sub_alert { color: #fff; text-align: right; font-size: 12px; display:none; margin-top: -15px; margin-bottom: -15px; }
.signup_sub_alert_text { color: #00d440; font-style: italic; font-size: 12px; } */


.select-signup, .select-signup:focus { margin-top: 0.5px; height: 39px; width: 80%; padding-left: 11px; font-size: 14px; font-style: italic; background-color: #EDEDED; color: #444; border: 1px #888 solid; -webkit-border-radius: 0px 7px 7px 0px; border-radius: 0px 7px 7px 0px; }
.signup_sub_alert { color: #fff; text-align: right; font-size: 12px; display:none; margin-top: -15px; margin-bottom: -15px; }
.signup_sub_alert_text { color: #FFC312; font-style: italic; font-size: 12px; }






/* PROFILE */
.profile_img_rounded { border-radius: 50%; }


/* SHOWS */
.shows-title-text { font-size: 16px; color: #fff; width: 130px; }
.search-show-link-title { color: #fff; border-bottom: 1px dotted #fff; margin-left: 0px; }
.search-show-link-icon { color: #00d440; margin-top: 5px; margin-left: 10px; }
.show-overview-banner-section { text-align: center; padding: 15px 0px 15px 0px; }
.show-overview-wrapperQ { margin-left: 52px;  }
.show-overview-section { padding-bottom: 15px;  }
.show-overview-left { width: 150px; }
.show-overview-sidebar-text { color: #fff; font-weight: lighter; }
.season-number-link { font-size: 18px; padding: 0px 3px 0px 3px; text-decoration: underline; }
.season-number-link-selected { font-size: 18px; padding: 0px 3px 0px 3px; font-weight: bold; color: #fff; }
.shows-overview-season-title { font-size: 20px; text-shadow: 2px 2px #252323; padding-left: 7px; color: #fff; }
.my-shows-card { width: 130px; }
.my-shows-card-text { font-size: 14px; font-weight: lighter; color: #EDEDED; margin-left: 5px; }
.unwatched-episodes-wrapper { padding-top: 30px; }
.show-thumbnail { border: 3px #888 solid; border-radius: 10px; }
.show-thumbnail-selected { border: 4px #00d440 solid; border-radius: 10px; }


@media screen and (min-width: 800px) {
    div.show-overview-wrapper {
        margin-left: 52px;
    }
}
@media screen and (max-width: 600px) {
    div.show-overview-wrapper {
        margin-left: 0px;
    }
}



@media screen and (min-width: 300px) {
    img.show-overview-banner {
        width: 342px;
        border-radius: 15px;
        margin-left: -13px;
        margin-top: -30px;
    }
}
@media screen and (min-width: 600px) {
    img.show-overview-banner {
        width: 600px;
        border-radius: 15px;
        margin-left: -13px;
    }
}
@media screen and (min-width: 700px) {
    img.show-overview-banner {
        width: 700px;
        border-radius: 15px;
        margin-left: -13px;
        object-fit: cover;
    }
}
@media screen and (min-width: 800px) {
    img.show-overview-banner {
        max-width:1000px;
        max-height:120px;
        width: auto;
        height: auto;
        border-radius: 15px;
        margin-left: -13px;
        object-fit: cover;
    }
}
@media screen and (min-width: 900px) {
    img.show-overview-banner {
        width: 1000px;
        border-radius: 15px;
        margin-left: -2px;
        object-fit: cover;
    }
}



/* EPISODES */
.episode-wrapper { background: #275661; border-radius: 7px; color: #fff; padding: 10px; margin-top: 10px; }
.episode-wrapper:hover { background: #326f7c; }
.episode-number { background: #00d440; color: #252323; width: 60px; margin-right: 10px; padding: 4px 10px 4px 10px; border: 1px #fff solid; border-radius: 50%; }
.episode-watched-icon-circle { color: #fff; margin-left: -5px; border: 1px #fff }
.episode-watched-icon { color: #00d440; margin-left: -5px; }
.episode-unwatched-icon { color: #d8b8b8; margin-left: -5px; }

/* VIDEOS */
.video-wrapper { background: #275661; border-radius: 7px; color: #fff; padding: 10px; margin-top: 10px; }
.video-wrapper:hover { background: #326f7c; }
.video-number { background: #00d440; color: #252323; width: 60px; margin-right: 10px; padding: 4px 10px 4px 10px; border: 1px #fff solid; border-radius: 50%; }
.video-watched-icon-circle { color: #fff; margin-left: -5px; border: 1px #fff }
.video-watched-icon { color: #00d440; margin-left: -5px; }
.video-unwatched-icon { color: #d8b8b8; margin-left: -5px; }
.queue-video-desc { font-size: 16px; font-style: italic; }
.video-hr { border: 1px #888 solid; padding: 0px; margin: 2px; }

/* QUEUE */
.queue-season-header { font-size: 18px; color: #fff; font-weight: lighter; padding: 5px 0px 0px 0px; }
.queue-show-link { text-decoration: none; color: #00d440; border-bottom: 1px #00d440 dotted; }
.queue-show-link:hover { text-decoration: none; color: #fff; border-bottom: 1px #00d440 dotted; }
.queue-select-show-text { font-style: italic; color: #fff; }
.queue-select-show-text-link { font-style: italic; color: #00d440; text-decoration: underline; }
.queue-select-show-text-link:hover { color: #ededed; }
.queue-mark-all-text { font-weight: lighter; font-style: italic; }
.queue-season-finale { margin-left: 15px; }
.queue-caught-up-wrapper { margin-top: 25px; width: 300px; padding: 20px; }
.queue-caught-up-text { font-size: 22px; color: #00d440; font-weight: lighter; }
.queue-caught-up-add-show-link { font-size: 22px; color: #00d440; text-decoration: underline; }
.queue-caught-up-add-show-link:hover { color: #ededed; }

.queue-season-episode-text { font-family: Arial, Tahoma; font-size: 16px; color: #fff; }
.queue-aired-date { font-family: Arial, Tahoma; font-size: 16px; font-style: italic; color: #ededed; font-weight: lighter; }
.queue-episode-name { font-family: Arial, Tahoma; font-size: 16px; font-weight: normal;  }
.queue-episode-desc { font-family: Arial, Tahoma; font-size: 14px; font-style: italic; }

.queue-show-card {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.queue-show-badge {
    position: absolute;
    right:15px;
    top:15px;
    background: #073642;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    border: 3px solid #00d440;
    color:#fff;
    padding:5px 10px;
    font-size:12px;
    font-weight: bold;
}

.queue-show-badge-hidden {
    position: absolute;
    right:15px;
    top:145px;
    width: 35px;
    background: #444242;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    border: 3px solid #839496;
    color:#fff;
    padding:5px 10px 5px 8px;
    font-size:12px;
    font-weight: bold;
}

.badge-season-finale { background: #af6c15; }
.badge-show-finale { background: #e91b1b; }

.containerz { position: relative; }
.containerz img { display: block; }
.containerz .fa-circle { position: absolute; bottom: 0px; right: -15px; color: #00d440; }



/* MOVIES */
.movies-title-text { font-size: 16px; color: #fff; width: 130px; }
.search-movie-link-title { color: #fff; border-bottom: 1px dotted #fff; margin-left: 10px; }
.search-movie-link-icon { color: #00d440; margin-top: 5px; }
.movie-overview-banner-section { text-align: center; padding: 15px 0px 15px 0px; }
.movie-overview-section { padding-bottom: 15px;  }
.movie-overview-left { width: 150px; }
.movie-overview-sidebar-text { color: #fff; font-weight: lighter; }
.season-number-link { font-size: 18px; padding: 0px 3px 0px 3px; text-decoration: underline; }
.season-number-link-selected { font-size: 18px; padding: 0px 3px 0px 3px; font-weight: bold; color: #fff; }
.movies-overview-season-title { font-size: 20px; text-shadow: 2px 2px #252323; padding-left: 7px; color: #fff; }
.my-movies-card { width: 130px; }
.my-movies-card-text { font-size: 14px; font-weight: lighter; color: #EDEDED; margin-left: 5px; }
.unwatched-episodes-wrapper { padding-top: 30px; }
.movie-thumbnail { border: 3px #888 solid; border-radius: 10px; }
.movie-thumbnail-selected { border: 4px #00d440 solid; border-radius: 10px; }
.movie-description-wrapper { background: #326f7c; border-radius: 7px; color: #fff; padding: 10px; margin-top: 10px; }

@media screen and (min-width: 800px) {
    div.movie-overview-wrapper {
        margin-left: 52px;
    }
}
@media screen and (max-width: 600px) {
    div.movie-overview-wrapper {
        margin-left: 0px;
    }
}



@media screen and (min-width: 300px) {
    img.movie-overview-banner {
        width: 342px;
        border-radius: 15px;
        margin-left: -13px;
        margin-top: -30px;
    }
}
@media screen and (min-width: 600px) {
    img.movie-overview-banner {
        width: 600px;
        border-radius: 15px;
        margin-left: -13px;
    }
}
@media screen and (min-width: 700px) {
    img.movie-overview-banner {
        width: 700px;
        border-radius: 15px;
        margin-left: -13px;
        object-fit: cover;
    }
}
@media screen and (min-width: 800px) {
    img.movie-overview-banner {
        max-width:1000px;
        max-height:120px;
        width: auto;
        height: auto;
        border-radius: 15px;
        margin-left: -13px;
        object-fit: cover;
    }
}
@media screen and (min-width: 900px) {
    img.movie-overview-banner {
        width: 1000px;
        border-radius: 15px;
        margin-left: -2px;
        object-fit: cover;
    }
}







/* PROFILE */
.follower-add-btn {
    cursor: pointer; margin-top: 10px; text-align: center; color: #EDEDED; -webkit-border-radius: 7px; border-radius: 7px;
    width: 40px;
}

/******************** PROFILE *******************/
.profile-card { padding-top: 0px; padding-bottom: 100px; }
.profile-perm-error { font-size: 18px; color: #444; }

.profile-details-label { font-weight: bold; color: #fff; }
.profile-details-text { font-weight: normal; color: #fff; }

.profile-details-left {
    float: left;
    padding: 0px 5px 5px 0px;
    width: 100px;
    text-align: right;
}
.profile-details-right {
    float: left;
    color: #ededed;
    padding: 0px 0px 8px 0px;
    width: 200px;
}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
    .profile-card { padding-top: 0px; padding-bottom: 180px; }
    div.profile-details-left {
        float: left;
        width: 90px;
        padding: 0px 5px 0px 2px;
        text-align: right;
        color: #fff;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    div.profile-details-right {
        float: left;
        color: #fff;
        padding: 0px 0px 5px 0px;
        width: 70%;
    }
}

@media screen and (max-width: 767px) {
    #banner {
        margin-bottom: 2em;
        text-align: left;
    }
}

.profile-row-left {
    float: left;
    padding-left: 10px;
    padding-top: 10px;
    width: 30px;
}

.profile-row-middle {
    float: left;
    padding: 10px 0px 10px 10px;
    
}
.profile-row-right {
    float: right;
    padding: 10px 10px 10px 10px;   
}

.profile-row-caret {
    float: right;

}

.profile-label-text {
    font-size: 18px;
    color: #fff;
}

.profile-img-wrapper { 
    width: 125px; 
    left: 45%;
    margin: auto;
}

.profile-card-header {
    padding: 0px 5px 0px 5px;
}

.profile-social-text {
    color: #fff;
}

/* ACCORDION */
#accordion:hover .edit-pic {
    opacity: unset;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.accordion {
	width: 100%;
	max-width: 360px;
	margin: 30px auto 20px;
	background: #275661;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 12px;
}

.accordion .link {
	cursor: pointer;
	display: block;
	padding: 15px 15px 15px 42px;
	color: #4D4D4D;
	font-size: 14px;
	font-weight: 700;
	border-bottom: 1px solid #CCC;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li:last-child .link {
	border-bottom: 0;
}

.accordion li i {
	position: absolute;
	top: 16px;
	left: 12px;
	font-size: 18px;
	color: #595959;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
	right: 12px;
	left: auto;
	font-size: 16px;
}

.accordion li.open .link {
	color: #b63b4d;
}

.accordion li.open i {
	color: #b63b4d;
}
.accordion li.open i.fa-chevron-down {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.accordion li.default .submenu {display: block;}
/* END ACCORDION */



/* SEARCH */
.search-result-wrapper {
    padding: 10px;
    margin-bottom: 5px;
    background: #275661;
    border-radius: 7px;
    color: #fff;
}

.search-result-wrapper a:hover, a:link, a:active {
    text-decoration: none;
}

.search-result-wrapper:hover {
    background: #326f7c;
}

.badge-outline {
    color: #fff;
    border: 1px solid #999;
    background-color: transparent;
}

.badge-outline.badge-secondary {
    border-color: #82b283;
}

.error-text-wrapper {
    color: red;
    margin: 10px 0px 10px 20px;
    font-style: italic;
}

.login-wrapper {
    background-color: rgba(238, 232, 213, 0.125);
    border-radius: 10px;
    padding: 20px;
    margin-top: 100px;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.home-reset-password-link {
    color: #dac9c9;
    text-decoration: underline;
    border-bottom: 1px dotted #ededed;
}
.home-reset-password-link:hover {
    color: #fff;
    border-bottom: 1px dotted #fff;
}