@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

* {margin: 0px; padding: 0px; box-sizing: border-box;}
body {font-family: 'Roboto', sans-serif; font-size: 16px;}

.container {width: 92%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}
.clear::after {content: ''; display: block; clear: both;}

.searchMenuWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background: rgba(255,255,255,.9); z-index: 10; transform: rotateX(90deg); transition: all ease-in-out .2s;}
.searchMenuWrap.open {transform: rotateX(0deg);}
.searchMenuWrap .head {padding: 12px 0; position: relative; z-index: 1;}
.searchMenuWrap .head .logo {display: inline-block; float: left;}
.searchMenuWrap .head .menuCloseBtn {display: inline-block; float: left; width: 23px; height: 23px; background: url(../images/MenuCloseBtn.png) center no-repeat; float: right; cursor: pointer;}
.searchMenuWrap .nav {display: block; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.searchMenuWrap .nav .search {margin: 0 0 20px;}
.searchMenuWrap .nav .search h2 {font-size: 36px; font-weight: 300; text-transform: uppercase; margin: 0 0 20px;}
.searchMenuWrap .nav .search form {display: block; margin: 0 auto;width: 100%; max-width: 500px; border: 1px solid #000; border-radius: 24px;}
.searchMenuWrap .nav .search form::after {content: ''; display: block; clear: both;}
.searchMenuWrap .nav .search form input[type=text] {display: inline-block; width: calc(100% - 62px); float: left; height: 62px; padding: 0 8px; border: 0; background: none; font-size: 24px; outline: 0;}
.searchMenuWrap .nav .search form input[type=submit] {display: inline-block; width: 62px; float: left; height: 62px; border: 0; background: none; text-indent: 100px; overflow: hidden; background: url(../images/SearchBtn.png) center no-repeat;}
.searchMenuWrap .nav h3 {display: block; font-size: 18px; padding: 8px 0; position: relative; margin: 0 0 20px; text-transform: uppercase; font-weight: 500;}
.searchMenuWrap .nav h3::before {content: ''; display: block; height: 2px; width: 112px; background: #f20000; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.searchMenuWrap .nav .navLnkList {display: block; margin: 0 0 20px;}
.searchMenuWrap .nav .navLnkList ul {display: block;}
.searchMenuWrap .nav .navLnkList ul li {display: inline-block; margin: 0 10px 20px;}
.searchMenuWrap .nav .navLnkList ul li a {display: block; padding: 10px 24px; border: 1px solid #000; font-size: 18px; font-weight: 100; text-transform: uppercase; color: #000; border-radius: 23px; text-decoration: none; transition: all ease-in-out .2s;}
.searchMenuWrap .nav .navLnkList ul li a:hover {background: #000; color: #fff;}

header {padding: 12px 0; position: absolute; top: 0; left: 0; width: 100%; z-index: 1;}
header .logo {display: inline-block; float: left;}
header .menuBtn {display: inline-block; float: left; width: 39px; height: 38px; background: url(../images/MenuBtn.png) center no-repeat; float: right; cursor: pointer;}
header .searchMenu {display: inline-block; width: calc(100% - 180px); max-width: 400px; float: right;}
header .searchMenu .search {display: inline-block; vertical-align: middle; width: 352px; position: relative;}
header .searchMenu .search::after {content: ''; display: block; clear: both;}
header .searchMenu .search input[type=text] {display: block; width: calc(100% - 42px); height: 38px; background: #fff; padding: 0 8px; border: 0; float: left; border-top-left-radius: 8px; border-bottom-left-radius: 8px; outline: 0; font-family: 'Roboto', sans-serif; font-size: 16px; color: #535353; font-weight: 500;}
header .searchMenu .search input[type=submit] {display: block; width: 42px; height: 38px; background: #fff url(../images/searchArrow.png) center no-repeat; padding: 0 4px; border: 0; text-indent: 99px; border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
header .searchMenu .search .autoSuggestion {display: none; width: 100%; background: #fff; position: absolute; top: 100%; border-radius: 8px; overflow: hidden; border-top: 1px solid #000;}
header .searchMenu .search .autoSuggestion span {display: block;}
header .searchMenu .search .autoSuggestion span a {display: block; padding: 6px 12px; font-size: 16px; color: #535353; font-weight: 500; text-decoration: none;}
header .searchMenu .search .autoSuggestion span a:hover {background: #eee;}
header .searchMenu .search.open .autoSuggestion {display: block;}

.hBanner {display: block; width: 100%; position: relative;}
.hBanner > img {width: 100%;}
.hBanner .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 30px; font-weight: 300; text-transform: uppercase;}
.hBanner .container .txt {text-align: center;}
.hBanner .container .txt span {color: #f20000;}

.midSec {display: block; padding: 40px 0;}
.midSec h2 {display: block; color: #404040; text-transform: uppercase; font-size: 18px; font-weight: 700; padding: 10px 0; margin: 0 0 28px; position: relative;}
.midSec h2::before {content: ''; display: block; height: 2px; width: 112px; background: #f20000; position: absolute; bottom: 0; left: 0;}
.midSec p {margin: 0 0 20px;}
.midSec .col3List {display: block;}
.midSec .col3List .box {display: inline-block; width: calc(33% - 20px - 4px); vertical-align: top; margin-left: 30px; margin-bottom: 64px;}
.midSec .col3List .box:nth-child(3n+1) {margin-left: 0px;}
.midSec .col3List .box span {display: block;}
.midSec .col3List .box .pic{margin: 0 0 10px;}
.midSec .col3List .box .pic img {width: 100%;}
.midSec .col3List .box .genre {font-size: 12px; text-transform: uppercase; font-weight: 500; color: #eb0404; margin: 0 0 8px;}
.midSec .col3List .box .title {font-size: 20px; font-weight: 500; color: #222222; margin: 0 0 8px;}
.midSec .col3List .box .starts {font-size: 12px; font-weight: 100; color: #888888; margin: 0 0 8px;}
.midSec .col3List .box .desc {font-size: 16px; font-weight: 300; color: #404040; margin: 0 0 8px; text-align: justify;  line-height: 24px;}
.midSec .col3List .box a {display: inline-block; line-height: 32px; padding: 0 20px; background: #eb0404; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; border-radius: 4px; text-transform: uppercase;}
.midSec .leftSec {display: inline-block; width: calc(66%); float: left;}
.midSec .rightSec {display: inline-block; width: calc(33% - 20px); float: right; background: #404040; padding: 20px 30px; color: #fff; font-weight: 300;}
.midSec .rightSec h2 {color: #fff;}
.midSec .rightSec nav {display: block; border-bottom: 1px solid #fff; padding: 0 0 20px; margin: 0 0 20px;}
.midSec .rightSec nav ul {display: block;}
.midSec .rightSec nav ul li {display: block;}
.midSec .rightSec nav ul li a {display: inline-block; color: #fff; text-decoration: none; font-weight: 300; padding: 8px 10px 8px 24px; background: url(../images/bullet.png) 0 12px no-repeat;}
.midSec .rightSec .latesNews {padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #fff;}

.midSec .col2List {display: block;}
.midSec .col2List .box {display: inline-block; width: calc(50% - 10px - 4px); vertical-align: top; margin-left: 20px; margin-bottom: 64px;}
.midSec .col2List .box:nth-child(2n+1) {margin-left: 0px;}
.midSec .col2List .box span {display: block;}
.midSec .col2List .box .pic{margin: 0 0 10px;}
.midSec .col2List .box .pic img {width: 100%;}
.midSec .col2List .box .genre {font-size: 12px; text-transform: uppercase; font-weight: 500; color: #eb0404; margin: 0 0 8px;}
.midSec .col2List .box .title {font-size: 20px; font-weight: 500; color: #222222; margin: 0 0 8px;}
.midSec .col2List .box .starts {font-size: 12px; font-weight: 100; color: #888888; margin: 0 0 8px;}
.midSec .col2List .box .desc {font-size: 16px; font-weight: 300; color: #404040; margin: 0 0 8px; text-align: justify;  line-height: 24px; display: block;}
.midSec .col2List .box a {display: inline-block; line-height: 32px; padding: 0 20px; background: #eb0404; color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; border-radius: 4px; text-transform: uppercase;}

footer {display: block; padding: 32px 0; font-size: 12px; color: #fff; background: #111111;}

.hSubsTrend {background: #111111; margin: 60px 0 0; padding: 64px 0;}
.hSubsTrend h4 {font-size: 18px; color: #fff; font-weight: 700;}
.hSubsTrend .left, .hSubsTrend .right {display: inline-block; width: calc(50% - 4px); vertical-align: top}
.hSubsTrend .left {padding-right: 4%;}
.hSubsTrend .subsForm input[type=text], .hSubsTrend .subsForm input[type=email] {width: 100%; display: block; height: 62px; font-size: 36px; color: #898888; font-family: 'Roboto', sans-serif; background: none; border: 0; font-weight: 700; outline: 0;}
.hSubsTrend .subsForm .field {margin: 10px 0;}
.hSubsTrend .subsForm .field input[type=submit] {display: inline-block; line-height: 36px; background: #e12423; color: #fff; text-transform: uppercase; border-radius: 4px; border: 0; padding: 0 32px; cursor: pointer; outline: 0;}
.hSubsTrend .right {padding-left: 4%; text-align: right;}
.hSubsTrend .right h4 {margin: 0 0 20px;}
/*.hSubsTrend .right ul {display: block;}
.hSubsTrend .right ul li {display: inline-block; font-size: 18px; color: #9ba1d7;}*/
.hSubsTrend .right a {color: #e12423; text-decoration: none; margin-left: 16px;}
.hSubsTrend .right a:hover {text-decoration: underline;}

.uploadListing {background: url(../images/Banner.jpg) center no-repeat; background-size: cover; position: relative; text-align: center; padding: 64px 0;}
.uploadListing::before {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(55, 17, 17, .7);}
/*.uploadListing .browse {position: relative; z-index: 1; color: #fff; display: inline-block; margin: 0 0 24px;}
.uploadListing .browse .fileName {display: block; height: 24px;}
.uploadListing .browse .UploadCloud {display: block; height: 104px; background: url(../images/UploadCloud.png) center no-repeat; margin: 0 0 20px;}
.uploadListing .browse h4 {font-size: 30px; font-weight: 500; margin: 0 0 8px;}
.uploadListing .browse input[type=file] {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; cursor: pointer; z-index: 1; outline: 0; opacity: 0;}
.uploadListing .submit {position: relative; z-index: 1;}
.uploadListing .submit input[type=submit] {display: inline-block; line-height: 36px; padding: 0 60px; background: #fff; color: #e12423; border-radius: 2px; border: 0; font-weight: 600; text-transform: uppercase; cursor: pointer; outline: 0;}

#UserUploadContentBtn.open .contentUploadForm {}
#UserUploadContentBtn.open .contentUploadForm #ProMess {margin: 8px 2%;}
#UserUploadContentBtn.open .contentUploadForm {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(255,255,255,.7); z-index: 1;}
#UserUploadContentBtn.open .loginForm {display: inline-block; width: 100%; max-width: 400px; text-align: left;}
.contentUploadForm .loginForm h2, .contentUploadForm .uploadForm h2 {font-size: 24px; text-align: center; margin: 0 0 20px;}
.loginForm.form ul li .field, .form ul li .submit {max-width: 100%;}

.uploadForm #UploadVideoContent {text-align: left;}
.uploadForm #UploadVideoContent ul {display: block;}
.uploadForm #UploadVideoContent ul li {display: inline-block; width: calc(33% - 4px); vertical-align: top; padding: 0 2%;}
.uploadForm #UploadVideoContent ul li.col3 {width: 100%;}
.uploadForm #UploadVideoContent ul li .field, .uploadForm #UploadVideoContent ul li .submit {max-width: 100%;}
.uploadForm #UploadVideoContent ul li.col3 .field textarea {width: 100%; max-width: 100%; padding: 4px 8px; height: 58px; max-height: 58px; border: 1px solid #e0e0e0;}
.uploadForm #UploadVideoContent ul li .field input[type=file] {height: 36px; background: #fff; padding: 7px 4px 0; width: 100%; border: 1px solid #e0e0e0;}
#UserUploadContentBtn.open .contentUploadForm .closeBtn {display: inline-block; text-align: center; line-height: 42px; width: 42px; color: #fff; background: #000; position: absolute; top: 0; right: 0; cursor: pointer;}*/



.form {display: block;}
.form ul {display: block; list-style: none;}
.form ul li {display: block; margin: 0 0 10px;}
.form ul li label {font-size: 16px; font-weight: 300;}
.form ul li .field input[type=text], .form ul li .field input[type=password] {display: block; width: 100%; height: 38px; border: 1px solid #e0e0e0; padding: 0 8px;}
.form ul li .submit input[type=submit] {display: block; margin: 20px 0 20px; width: 100%; height: 38px; background: #e12423; color: #fff; text-align: center; border: 0;}

.hide {display: none; margin: 20px 0 0;}

.videoYt {display: block; width: 100%; position: relative;}
.videoYt > img {width: 100%;}
.videoYt iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.likes-rating {display: block; background: #ededed; padding: 10px 24px; line-height: 23px; margin: 0 0 20px;}
.likes-rating > span {display: inline-block; padding-left: 32px; font-size: 12px; color: #404040; text-transform: uppercase; font-weight: 700; margin-right: 20px; cursor: pointer;}
.likes-rating > span span {margin-right: 4px;}
.likes-rating span.likes {background: url(../images/likes.png) 0 center no-repeat;}
.likes-rating span.dislikes {background: url(../images/dislikes.png) 0 center no-repeat;}
.likes-rating span.views {background: url(../images/views.png) 0 center no-repeat;}

.vDetails .description {margin: 0 0 20px; font-weight: 300; text-align: justify;}
.vDetails .hashTag {margin: 0 0 20px; font-weight: 300; text-align: justify; color: red; font-size: 14px;}
.vidDetail {display: block; padding: 20px 32px; background: #ededed;}

.vidDetail .starts {font-size: 16px; color: #990f0f; margin: 0 0 8px; font-weight: 500; display: block;}
.vidDetail .otherDetails {display: table; width: 100%;}
.vidDetail .otherDetails .title {display: table-cell; width: 80px; font-weight: 500; padding: 4px 0;}
.vidDetail .otherDetails .des {display: table-cell; width: calc(100% - 80px); font-weight: 300; padding: 4px 0;}
.vidDetail .otherDetails .des a {color: inherit;}
.vidDetail .otherDetails .row .des span::after {content: ',';}
.vidDetail .otherDetails .row .des span:last-child::after {content: '';}

.Webseries {display: block; margin: 0; padding: 0;}
.Webseries .wPic {display: block; width: 100%; margin: 0 0 20px;}
.Webseries .wPic img {width: 100%;}
.Webseries .wDesc {display: block; width: 100%; margin: 0 0 20px; text-align: justify; font-weight: 300;}


.vDetails {margin: 0 0 32px;}
.iSec.comments {background: #fff;}
#CommentForm {display: block; width: 100%; max-width: 580px;}
#CommentForm::after {content: ''; display: block; clear: both;}
#CommentForm textarea {display: block; width: calc(100% - 32px); max-width: calc(100% - 32px); min-width: calc(100% - 32px); float: left; height: 60px; max-height: 60px; min-height: 60px; padding: 4px 8px; border: 0; background: #f1f1f1; outline: 0; border-top-left-radius: 2px; border-bottom-left-radius: 2px;}
#CommentForm input[type=submit] {display: block; width: 32px; float: left; height: 60px; text-indent: 999px; overflow: hidden; cursor: pointer; border: 0; background: #989898 url(../images/goArrow.png) center no-repeat; outline: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px;}

#UserCommentsList {padding: 20px 0 0;}

#UserCommentsList ul {display: block; list-style: none; border-top: 1px solid #eee;}
#UserCommentsList ul li {display: block; padding: 8px 4px; border-bottom: 1px solid #eee;}
#UserCommentsList ul li .comment {font-size: 14px; font-weight: 300; margin: 0 0 10px;}
#UserCommentsList ul li .commentedAt {font-size: 13px; font-weight: 500;}
#UserCommentsList ul li .commentedAt .comment {padding: 0 0 8px;}
#UserCommentsList ul li .commentedAt span {display: inline-block; vertical-align: top; /*padding: 0 0 0 22px;*/}
#UserCommentsList ul li .commentedAt .by {color: #0f63ac; /*background: url(../images/user-sm.png) center left no-repeat; background-size: 18px auto;*/}
#UserCommentsList ul li .commentedAt .at {color: #ff4444; /*background: url(../images/clock-sm.png) center left no-repeat; background-size: 18px auto;*/ margin-left: 16px;}

.error, .succ, .proc {display: block; font-weight: 600; font-size: 14px; margin: 8px 0;}
.error {color: red;}
.succ, .proc {color: darkblue;}

.loginRegister {display: block;}
.loginRegister::after {content: ''; display: block; clear: both;}
.loginRegister .login {display: block; width: calc(40% - 40px); float: left;}
.loginRegister .register {display: block; width: 60%; float: right; padding-left: 40px; border-left: 1px solid #e0e0e0;}

.signupForm.form ul li {display: inline-block; width: calc(48% - 4px); vertical-align: top;}
.signupForm.form ul li .submit {width: 100%;}
.signupForm.form ul li:nth-child(2n) {margin-left: 4%;}

/* For Admin */
/*------------Admin Login------------*/
.aLoginWrap {display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: url(../images/Trending-Bg.jpg) center no-repeat; background-size: cover;}
.aLoginWrap .aLogin {display: block; width: 400px; max-width: 80%; max-height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0px; background: #eee; border: 1px solid #0f63ac; border-radius: 10px; text-align: center; overflow: hidden;}
.aLoginWrap .aLogin h3 {margin: 0 0 20px; text-transform: uppercase; font-weight: 500;}
.aLoginWrap .aLogin form {display: block; background: #fff; padding: 20px 20px; /*background: url(../images/LoginBg.jpg) center no-repeat; background-size: cover;*/}
.aLoginWrap .aLogin span {display: block; padding: 10px 0;}
.aLoginWrap .aLogin span.field {}
.aLoginWrap .aLogin span.field input[type=text], .aLoginWrap .aLogin span.field input[type=password] {display: block; width: 100%; height: 42px; padding: 0 10px; border: 0; font-size: 16px; background: #eee; font-style: italic;}
.aLoginWrap .aLogin span.field input[type=submit] {display: block; width: 100%; height: 42px; padding: 0 10px; border: 0; font-size: 16px; background: #0f63ac; color: #fff; text-align: center;}
/*------------Admin Login------------Ends here*/

/*------------Dashboard-------------*/
.aLeftSec {display: block; width: 242px; background: #2e3236; color: #fff; padding: 20px 0; overflow: auto; float: left;}
.aLeftSec .logo {display: block; padding: 20px; text-align: center; background: #fff;}
.aLeftSec h4 {font-size: 16px; font-weight: 500; text-transform: uppercase; margin: 0 0 8px; padding: 8px 20px; background: #363b3f;}
.aLeftSec nav {display: block; margin: 0 0 20px; font-size: 14px;}
.aLeftSec nav ul {display: block;}
.aLeftSec nav ul li {display: block;}
.aLeftSec nav ul li a {display: block; color: #AEB2B7; text-decoration: none; font-weight: 300; padding: 4px 20px 4px 32px; background: url(../images/MenuArrow.png) 20px 11px no-repeat;}
.aRightSec {display: block; width: calc(100% - 242px); float: left; overflow: auto;}
.aRightSec .logInfoNav {display: block; text-align: right; padding: 20px;}
.aRightSec .logInfoNav ul {display: block;}
.aRightSec .logInfoNav ul li {display: inline-block; padding: 0 20px; border-left: 1px solid #000;}
.aRightSec .logInfoNav ul li:nth-child(1) {border-left: 0px;}
.aRightSec .logInfoNav ul li a {display: block; line-height: 24px; color: inherit; text-decoration: none;}
.aRightSec .logInfoNav ul li a i.logout {display: inline-block; width: 14px; height: 17px; vertical-align: middle; background: url(../images/LogoutIcon.png) center no-repeat; margin-right: 8px;}
.aRightSec .pageInfo {display: block; right; padding: 20px; background: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.aRightSec .pageInfo h3 {font-size: 24px; font-weight: 500; text-transform: uppercase; margin: 0 0 8px;}
.aRightSec .pageInfo .breadcrums {display: block; font-size: 12px; color: #21498b;}
.aRightSec .pageInfo .breadcrums ul {display: block;}
.aRightSec .pageInfo .breadcrums ul li {display: inline-block;}
.aRightSec .pageInfo .breadcrums ul li::after {content: '>>'; margin: 0 2px 0 4px;}
.aRightSec .pageInfo .breadcrums ul li:last-child::after {content: '';}
.aRightSec .pageInfo .breadcrums ul li a {color: inherit; text-decoration: none;}

.aRightSec .formSecNdDetails {padding: 20px; background: #f1f1f1;}
.aRightSec .formSec h2 {font-size: 22px; font-weight: 500; text-transform: uppercase; margin: 20px 0 20px;}
.aRightSec .formSec h4 {font-size: 18px; font-weight: 500; text-transform: uppercase; margin: 20px 0 20px;}
.aRightSec .formSecNdDetails .welcomeAdmin {display: block; text-align: center; padding: 64px 0; font-size: 32px; font-weight: 500; text-transform: uppercase;}
/*------------Dashboard-------------Ends here*/

.addUser, .searchUser, .resultListing, .formSec {display: block; padding: 10px 20px; background: #fff; margin: 0 0 10px;}
/*------------Form Style------------*/
.btn {display: inline-block; line-height: 36px; font-size: 14px; padding: 0 28px; background: #ff4444; color: #fff; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 0;}
.fCol3 {display: block;} 
.fCol3 .row {display: block; margin: 0 0 20px;} 
.fCol3 .row::after {content: ''; display: block; clear: both;}
.fCol3 .row .col {display: inline-block; width: calc(33% - 2%); margin: 0 0 0 3%;}
.fCol3 .row .col2 {display: inline-block; width: calc(66% - 3%); margin: 0 0 0 3%; vertical-align: top;}
.fCol3 .row .col3 {display: inline-block; width: 100%; margin: 0 0 0 0;}
.fCol3 .row .col:nth-child(1), .fCol3 .row .col2:nth-child(1) {margin: 0 0 0 0;}
.fCol3 .row .col .field {display: block;}
.fCol3 .field input[type=text], .fCol3 .field input[type=email], .fCol3 .field input[type=password], .fCol3 .field input[type=number], .fCol3 .field select {display: block; width: 100%; height: 32px; padding: 0 8px; font-size: 14px;}
.fCol3 .field input[type=submit] {display: block; width: 100%; height: 32px; padding: 0 8px; font-size: 14px; border: 0; background: #4c4c4c; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 2px;}
.aRightSec .formSecNdDetails label {font-size: 14px; font-weight: 500;}

.checkCox4c {display: block; margin: 0 0 20px;}
.checkCox4c ul {display: block;}
.checkCox4c ul li {display: inline-block; width: calc(25% - 2.5% - 4px); margin: 0 0 4px 3%; vertical-align: top;}
.checkCox4c ul li:nth-child(4n+1) {margin: 0 0 4px 0;}
.aRightSec .formSecNdDetails .checkCox4c ul li label {font-weight: 400;}



.addWebSeriesBtn.open::after, .addArtistBtn.open::after, .addSubadminBtn.open::after, .searchUserBtn.open::after, .addCategoryBtn.open::after, .addGenreBtn.open::after, .addArtistCategoryBtn.open::after, .searchContentBtn.open::after, .addSubcategoryBtn.open::after { content: 'X'; display: inline-block; margin: 0 0 0 18px; font-size: 18px; line-height: 33px;}

.resultListing {font-size: 14px;}
.resultListing h4 {font-size: 18px; margin: 0 0 10px;}
.resultListing .resultList {display: table; width: 100%; margin: 0 0 20px;}
.resultListing .resultList li {display: table-row;}
.resultListing .resultList li:hover {background: #eee;}
.resultListing .resultList li.head {background: #859491; font-weight: 500; color: #fff;}
.resultListing .resultList li span {display: table-cell; border-bottom: 1px solid #ccc; padding: 4px 8px; vertical-align: middle;}
.resultListing .resultList li span.sno {width: 50px;}
.resultListing .resultList li span.role {width: 240px; font-size: 12px; line-height: normal;}
.resultListing .resultList li span.cat {width: 110px; font-size: 12px; line-height: normal;}
.resultListing .resultList li span.editdel {width: 100px;}
.resultListing .resultList li span.vieweditdel {width: 140px;}

.editdel i.edit, .vieweditdel i.edit {display: inline-block; width: 32px; height: 32px; vertical-align: middle;  background: url(../images/EditIcon.png) center no-repeat;}
.editdel i.delete, .vieweditdel i.delete {display: inline-block; width: 32px; height: 32px; vertical-align: middle; background: url(../images/DeleteIcon.png) center no-repeat; margin-left: 4px;}


.vieweditdel i.view {display: inline-block; width: 32px; height: 32px; vertical-align: middle; background: url(../images/ViewIcon.png) center no-repeat; margin-left: 4px;}
/*------------Form Style------------Ends here*/

/*------------Pagination------------*/
.paginationWrap {display: block; margin: 0 0 10px;}
.paginationWrap::after {content: ''; display: block; clear: both;}
.paginationWrap .showing {display: inline-block; vertical-align: middle; font-weight: 500; line-height: 34px;}
.paginationWrap .pagination {display: inline-block; vertical-align: middle; float: right; border: 1px solid #ccc; border-radius: 4px; background: #eee;}
.paginationWrap .pagination ul {display: block;}
.paginationWrap .pagination ul li {display: inline-block; border-left: 1px solid #ccc; float: left;}
.paginationWrap .pagination ul li:nth-child(1) {display: inline-block; border-left: 0;}
.paginationWrap .pagination ul li a {display: block; min-width: 32px; height: 32px; padding: 0 8px; text-align: center; text-decoration: none; line-height: 32px; color: inherit;}
.paginationWrap .pagination ul li a:hover, .paginationWrap .pagination ul li.active a {background: #4c4c4c; color: #fff;}
/*------------Pagination------------Ends here*/

.formSec span {line-height: 32px;}
.formSec input[type=text] {height: 32px; width: 100%; padding: 0 8px; border: 1px solid #ccc; border-radius: 4px;}
.formSec select {height: 32px; width: 100%; padding: 0 8px; border: 1px solid #ccc; border-radius: 4px;}
.searchKeyword span {line-height: 32px;}
.searchKeyword input[type=text] {height: 32px; width: 300px; padding: 0 8px; border: 1px solid #ccc; border-radius: 4px;}
.searchKeyword select {height: 32px; width: 300px; padding: 0 8px; border: 1px solid #ccc; border-radius: 4px;}

.error, .succ, .proc {display: block; font-weight: 600; font-size: 14px; margin: 8px 0;}
.error {color: red;}
.succ, .proc {color: darkblue;}

.goBack {display: inline-block; line-height: 36px; font-size: 14px; padding: 0 28px; background: #4c4c4c; color: #fff; text-transform: uppercase; text-decoration: none; cursor: pointer; float: right; margin: 10px 0;}

.selectedArtist {display: block; margin: 0 0 10px;}
.selectedArtist ul {display: block;}
.selectedArtist ul li {display: block; border-top: 1px solid #ccc; background: #f4f4f4;}
.selectedArtist ul li:nth-child(1) {border-top: 0;}
.selectedArtist ul span {display: inline-block; vertical-align: top; line-height: normal; padding: 8px 8px;}
.selectedArtist ul span:nth-child(1) {width: 232px; background: #eee;}
.selectedArtist ul span:nth-child(2) {width: calc(100% - 232px - 20px - 8px); margin-left: 20px;}

.existingArtists {display: block;}
.existingArtists ul {display: block;}
.existingArtists ul li {display: block; border-top: 1px solid #ccc; background: #f4f4f4;}
.existingArtists ul li:nth-child(1) {border-top: 0;}
.existingArtists ul span {display: inline-block; vertical-align: top; line-height: normal; padding: 8px 8px;}
.existingArtists ul span:nth-child(1) {width: 232px; background: #eee;}
.existingArtists ul span:nth-child(2) {width: calc(100% - 232px - 20px - 8px); margin-left: 20px;}
.existingArtists ul span i {display: inline-block; font-style: normal; position: relative; border: 1px solid #ccc; line-height: 24px; padding: 0 18px 0 4px; border-radius: 3px; margin-left: 2px;}
.existingArtists ul span:nth-child(2) i span.removeArt {display: inline-block; width: 18px; height: 18px; font-size: 10px; font-weight: 700; line-height: 18px; padding: 0; text-align: center; position: absolute; top: 0; right: 0; cursor: pointer;}

#SelectedArtist {display: none;}

.subsForm .succ {color: #61d66c;}

#TrendingVideosList .ytVideoBox {display: block; margin: 0 0 24px;}
#TrendingVideosList .ytVideoBox::after {content: ''; display: block; clear: both;}
#TrendingVideosList .ytVideoBox .pic {display: block; width: 260px;}
#TrendingVideosList .ytVideoBox .pic img {width: 100%; float: left;}
#TrendingVideosList .ytVideoBox .details {width: calc(100% - 260px - 20px); float: right;}
#TrendingVideosList .ytVideoBox .details h3 {font-size: 18px; font-weight: 500; margin: 0 0 10px;}
#TrendingVideosList .ytVideoBox .details .desc {margin: 0 0 16px; font-size: 15px;}
#TrendingVideosList .ytVideoBox .details a {display: inline-block; padding: 8px 20px; background: #f20000; color: #fff; text-decoration: none; border-radius: 2px; text-transform: uppercase; font-size: 13px;}

.ytVideoPop {display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 2; background: rgba(0,0,0,.7);}
.ytVideoPop .ytVideoPopClose {display: block; width: 42px; height: 42px; background: #fff url(../images/close-blk.png) center no-repeat; position: absolute; top: 0; right: 0; cursor: pointer;}
.ytVideoPop iframe {display: block; width: calc(100% - 100px); height: calc(100% - 100px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.uploadListing {color: #fff;}
.uploadListing .container {position: relative; z-index: 1;}
.uploadListing h4 {font-size: 24px; font-weight: 400; margin: 0 0 20px; color: #fff;}

.videoUploadForm {display: block; text-align: left;}
.videoUploadForm::after {content: ''; display: block; clear: both;}
.videoUploadForm .col3 {display: block; margin: 0 0 20px;}
.videoUploadForm .col3 .col {display: inline-block; width: calc(33% - 4px - 20px); vertical-align: top; padding: 0 0px; margin-left: 30px;}
.videoUploadForm .col3 .col .field {margin-bottom: 20px;}
.videoUploadForm .col3 .col:nth-child(3n+1) {margin-left: 0;}
.videoUploadForm input[type=text], .videoUploadForm select, .videoUploadForm textarea {display: block; width: 100%; height: 36px; border: 0; border-bottom: 1px solid #fff; background: none; color: #fff; outline: 0; font-family: 'Roboto', sans-serif;}
.videoUploadForm textarea {padding: 10px 0; height: 91px;}
.videoUploadForm select option {background: none; color: #000;}
.videoUploadForm ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

.videoUploadForm  :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

.videoUploadForm ::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}

.videoUploadForm .col4 {display: block; text-align: left;}
.videoUploadForm .col4 .col {display: inline-block; width: calc(25% - 4px - 15px); vertical-align: top; padding: 0 0px; margin-bottom: 20px; margin-left: 20px;}
.videoUploadForm .col4 .col .field {margin-bottom: 20px;}
.videoUploadForm .col4 .col:nth-child(4n+1) {margin-left: 0;}

.videoUploadForm .col2 {display: block; text-align: left;}
.videoUploadForm .col2 .col {display: inline-block; width: calc(50% - 4px - 20px); vertical-align: top; padding: 0 0px; margin-bottom: 20px; margin-left: 40px;}
.videoUploadForm .col2 .col .field {margin-bottom: 20px;}
.videoUploadForm .col2 .col:nth-child(2n+1) {margin-left: 0;}

.checkbox input[type=checkbox] {display: none;}
.checkbox input[type=checkbox] ~ label {display: inline-block; padding: 0 0 0 28px; position: relative; cursor: pointer;}
.checkbox input[type=checkbox] ~ label::before {display: inline-block; width: 16px; height: 16px; border: 1px solid #fff; content: ''; position: absolute; top: 0; left: 0;}
.checkbox input[type=checkbox]:checked ~ label::after {display: inline-block; width: 8px; height: 8px; content: ''; position: absolute; top: 5px; left: 5px; background: #fff;}

.videoUploadForm .selectGenre {margin-bottom: 0 0 20px;}
.videoUploadForm .selectGenre .head {display: block; text-align: center; margin: 0 0 20px;}
.videoUploadForm .submit {display: block; text-align: center;}
.videoUploadForm .submit input[type=submit] {display: inline-block; height: 36px; width: 200px; background: #fff; color: #000; border: 0; font-weight: 500; font-family: 'Roboto', sans-serif; text-transform: uppercase;}

.uploadListing .formMess {height: 24px; display: block; width: 100%;}