:root{
      --bg:#0f0f0f; --muted:#aaa; --soft:#1a1a1a; --card:#161616; --accent:#e11d48; --chip:#1f1f1f;
    }

body{ 
	background:var(--bg); 
	color:#fff; 
	font-family:"Roboto Regular";
}

h3{
	margin-bottom:0px;
	padding:0px;
	font-weight:700;
}

h4 {
	font-size:13px;
	font-family: "Roboto Light","Roboto Thin";
	font-weight:500;
}	
	
.no-outline{
  outline:none !important;
  box-shadow:none;
  border:1px solid #000;
 }

.no-outline:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #444; /* Optional: keep a subtle border */
}

.cat-ui-mainlogo{
	height:40px;
	width:40px;
	opacity:90%;
}

.cat-ui-btn{
	background:#121212;
	color:#fff;
	opacity:90%;
	height:40px;
}
.navbar {
      background-color: #000;
      border-bottom: 1px solid #444;
	  width:100%;
	  
    }
    .navbar-brand {
      font-weight: bold;
      color: #fff !important;
    }
    .form-control {
      background-color: #222;
      color: #fff;
      border-color: #444;
    }
    .form-control::placeholder {
      color: #bbb;
    }
    .btn-primary {
      background-color: #ff3366;
      border-color: #ff3366;
    }
    .btn-primary:hover {
      background-color: #ff1a4d;
    }
    .icon-btn {
      background: none;
      border: none;
      font-size: 1.4rem;
      margin-left: 10px;
      color: #fff;
    }
    .sidebar, .tab-pane, .profile-header, .list-group-item {
      background-color: #111;
      color: #fff;
      border-color: #333;
    }
    .nav-tabs .nav-link {
      color: #bbb;
      background-color: #222;
      border-color: #333;
    }
    .nav-tabs .nav-link.active {
      background-color: #ff3366;
      color: white !important;
      border-color: #ff3366;
    }
    .img-grid img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      margin-bottom: 15px;
    }

.cat-show-elem{
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
  display: block;
  height:100%;
  z-index:990;
  position:fixed;
  top:5px;

}
.cat-hide-elem{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1000px);
  display:none;
}

.cat-ui-sidebar{
	display:flex;
	flex-direction:column;
	height:100%;
	left:-20px;
	padding-left:.2em;
	opacity:90%;
}	

.cat-ui-progbar{
	width:100% !important;
	height:15px !important;
	position:relative;
	border-radius:1px;
	border:1px solid blue;
	box-shadow: 3px 3px 10px blue;
	background-color:#D5D0D1;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:12px;
	text-align:center;
}

.cat-ui-progbar-fill{
	height: 100%;
	width:0%;
	background: #0FC507;
	display: flex;
	align-items: center;
	transition: width 0.05s;
	
}
.cat-ui-progbar-text{
	margin-left: 10px;
	font-weight: bold;
	
}


.cat-ui-popupcontainer{
	width:auto;
	height:auto;
	position:relative;
	left:1%;
	background:#000;
}

.cat-ui-popupcontainer ul{
	list-style:none;
	margin-top:1px;
	position:relative;
}

.cat-ui-popupcontainer ul li{
	width:auto;
	height:auto;
	padding:2px;
	margin-bottom:3px;
	display:block;
	position:relative;
	left:1%;
	border:2px solid #222222;
	border-radius:30px;
	opacity:80%;
	
}

.cat-ui-popupcontainer ul li:hover{
	background:#222222;
}

.cat-ui-popupcontainer ul li a{
	text-decoration:none;
	color:white;
	cursor:pointer;
	margin-left:3px;
	margin-top:2px;
	position:relative;
}

.cat-ui-topbar-container{
	display:flex;
	flex-direction:row;
	padding-right:10px;
	background:#000;
	height:80px;
	position:fixed;
	left:-1px;
	width:100%;
	z-index:999;
		
}
.cat-ui-topbar-container .cat-ui-topbar{
	width:19%;
	height:auto;
	float:left;
	margin-left:3%;
	margin-top:1%;
}
.cat-ui-topbar-container .cat-ui-topbar img{
	height:55px;
}

.cat-ui-topbar-container .cat-ui-searchbar-holder{
	width:700px;
	margin-left:3%;
	margin-right:2%;
	height:100%;
	border:1px soilid white;
	align-items: baseline;
}

.cat-ui-topbar-container .cat-ui-searchbar-holder ul{
	list-style:none;
	margin-top:1px;
}

.cat-ui-topbar-container .cat-ui-searchbar-holder ul li{
	display:inline-block;
}

.cat-ui-searchbar{
	height:50px;
	margin:1% auto;
	border-radius:30px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
	border-right:0px;
	background:#121212;
	border:2px solid #222222;
	position:relative;
	top:10px;
}

.cat-ui-searchbtn{
	background:#222222;
	border:none;
	height:50px;
	width:80px;
	padding-top:10px;
	border-bottom-right-radius:30px;
	border-top-right-radius:30px;
	top:12.5px;
	left:-4px;
	z-index:990;
	cursor:pointer;
	position:relative;
	
}

.cat-ui-topbar-container .cat-ui-searchbar-holder ul li button.cat-ui-searchbtn:hover{
	background: #1A1A1A;
}


.cat-ui-topbar-container .cat-ui-searchbar-holder ul li button img{
	width:30px;
	height:30px;
}

.cat-ui-topbar-container .cat-ui-topright-container ul{
	list-style:none;
	margin-top:1px;
	position:relative;
	left:-10%;
	width:350px;
	top:20px;
}

.cat-ui-topbar-container .cat-ui-topright-container ul li{
	width:150px;
	height:40px;
	margin-right:3px;
	display:inline-block;
	border:2px solid #222222;
	border-radius:30px;
	padding:3px;
	opacity:80%;
	
}

.cat-ui-topbar-container .cat-ui-topright-container ul li:hover{
	background:#222222;
}

.cat-ui-topbar-container .cat-ui-topright-container ul li a{
	text-decoration:none;
	color:white;
	cursor:pointer;
	margin-left:3px;
	margin-top:8px;
	position:relative;
	bottom:0px;
}

.cat-ui-topbar-container .cat-ui-topright-container ul li img{
	margin-right:5px;
	margin-left:5px;
	margin-top:5px;
}

.cat-ui-menuicon{
	background:#000;
	border:none;
	position: relative;
	left:50px;
	height:50px;
	width:50px;
	padding:2px;
	top:12px;
	outline:none;
	cursor:pointer;
}
.cat-ui-menuicon:hover{
	background:#1A1A1A;
}
.cat-ui-menuicon:active{
	outline:none;
}

.cat-ui-topbar-container .cat-ui-menuicon .menuicon{
	height:35px;
	width:35px;
	opacity:80%;
}

.cat-ui-error-indicator{
	display:flex;
	top:10px;
	z-index:1900;
	flex-direction:row;
	width:90%;
	height:40px;
	position:fixed;
	padding-bottom:10px;
	padding-top:10px;
	background:#92070A;
	color:white;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:30px;
	border-top-left-radius:30px;
	border-top-right-radius:30px;
	border:1px solid #fff;
}

.cat-ui-pr-pic-container{
	width: 140px;
	height:140px;
	position: relative;
	border-radius: 70px;
}
.cat-ui-messbar{
	width:350px;
	height:50px;
	padding:5px;
	position:relative;
	left:-1%;
	padding-bottom:1%;
	background:#201F1F;
	margin-bottom:4px;
	margin-top:4px;
	border:1px solid #201F1F;
	text-align:left;
	border-top-right-radius:35px;
	border-bottom-right-radius:35px;
	border-bottom-left-radius:0px;
	color:#E8E8E8;
	opacity:80%;
}
.cat-ui-msg-container{
	width:59%;
	min-height:1200px;
	max-height:100%;
	margin-top:2px;
	position:relative;
	left:25%;
}
.cat-ui-messlabel{

	position:relative;
	display:inline-grid;
	left:1%;
	bottom:10px;
}
.cat-ui-msg-date{
	width:100%;
	height:40px;
	background:#201F1F;
}
.cat-message-count{
	color:#03AF0A;
}

.cat-ui-arrow-right{
  position:relative;
  float:right;
  top:13px;
  padding-right:5px;
  border: solid #03AF0A;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.arrow-right{
  position:relative;
  left:70%;
  top:-10px;
  border:solid #171616;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}


.cat-ui-messbar:hover{
	background:#1A1A1A;
}

 .cat-row a{
	text-decoration:none;
	color:white;
}
.cat-u-image-icon-pr{
	width:40px;
	height:40px;
	position: absolute;
	left:50%;
	top: 100px;
	cursor: pointer;
	background-color: inherit;
	margin-right:3px;
	margin-left:3px;
	border-radius:30px;
	padding:2px;
	box-shadow:1px 1px 2px #000000;
}

/* width */
::-webkit-scrollbar {
  	width:6px;
	cursor: pointer;
}

/* Track */
::-webkit-scrollbar-track {
  background:#201F1F; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background:#171616; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
::-webkit-scrollbar:horizontal{
	height:7px;
}

.cat-ui-row{
	flex-direction:row;
	height:auto;
	position:relative;
	left:-1.5em;
}

.cat-ui-hr{
	width:242px;
	height:0.5px;
	background:#171616;
	opacity:80%;
}
.cat-menu-vertical{
	display:flex;
	flex-direction:column;
	width:200px;
	height:auto;
}

.cat-menu-vertical ul{
	display: block;
	list-style:none;
}
.cat-menu-vertical ul li{
	width:auto;
	height:35px;
	margin-bottom:5px;
	border-radius:30px;
	padding:5px;
	padding-left:15px;
	align-content:center;
	vertical-align: middle;
	cursor: pointer;
	
}

.cat-menu-links{
	text-decoration:none;
	color:white;
	position:relative;
	margin-bottom:3px;
}

.cat-menu-vertical .cat-menu-links span{
	position:relative;
	top:-8px;
	left:3px;
	font-size:14px;
}

.cat-ui-logout{
	background:#171616;
	border-radius:25px;
	height:40px;
	width:100%;
	border:1px solid #171616;
	color:white;
	cursor:pointer;
}
.cat-ui-logout:hover{
	color:red;
}

.cat-menu-vertical ul li:hover{
	border:1px solid #201F1F;
	background: #171616;
}


.cat-ui-sidebar .cat-ui-row ul{
	display:block;
	list-style:none;
}

.cat-ui-sidebar .cat-ui-row ul li{
	width:auto;
	height:35px;
	margin-bottom:5px;
	border-radius:30px;
	padding:5px;
	padding-left:15px;
	align-content:center;
	vertical-align:middle;
}

ul.cat-upload-button{
	width:150px;
}

.cat-ui-sidebar .cat-ui-row ul li:hover{
	border:1px solid #201F1F;
	background: #171616;
}

.cat-ui-sidebar .cat-ui-row ul li a{
	text-decoration:none;
	color:#E8E8E8;
	padding:10px;
	position:relative;
	bottom:5px;
	text-align:center;
}

.cat-ui-sidebar .cat-ui-row ul li input{
	width:99%;
	height:35px;
	color:white;
	cursor:pointer;
	background:#171616;
	border:1px solid #171616;
	margin:1px auto;
	outline:none;
	border-radius:30px;
	padding:5px;
	padding-left:15px;
	align-content:center;
	vertical-align: middle;
}

.cat-ui-sidebar .cat-ui-row ul li img{
	width:30px;
	height:30px;
	margin-right:7px;
	position:relative;
}

.cat-ui-container{
	width:87%;
	min-height:1200px;
	max-height:100%;
	margin-top:2px;
	position:relative;
	left:15%;
	top:55px;
}
.cat-ui-container-profile{
	width:67%;
	min-height:1200px;
	max-height:100%;
	margin-top:2px;
	position:relative;
	left:16%;
}
.cat-ui-profile-right{
	display:flex;
	flex-direction:column;
	position:fixed;
	top:100px;
	width:17%;
	min-height:800px;
	max-height:100%;
	left:83%;
	overflow:scroll;
	padding-right:1%;
}

.cat-ui-linkup-container{
	width:100%;;
	height:350px;
	padding-top:7%;
	overflow-y:scroll;
	position:relative;
	z-index:1200;
}

.cat-ui-onlineusers-container{
	width:100%;
	height:500px;
	overflow-y:scroll;
}

.cat-ui-rightbar{
	display:flex;
	flex-direction:column;
	position:fixed;
	width:30%;
	height:100%;
	z-index:900;
	left:70%;
	overflow:scroll;
}

.cat-movie-row{
	display:flex;
	flex-direction:row;
	position:relative;
	height:auto;
}
.cat-movie-mini-row{
	display:flex;
	position:relative;
	flex-direction:row;
	height:auto;
	top:35px;
}
.cat-movie-title-row{
	position:relative;
	width:100%;
	height:40px;
}

.cat-movie-like-row{
	width:300px;
	height:135px;
	position:relative;
	display:flex;
	flex-direction:row;
}
.cat-column{
	display:flex;
	flex-direction:column;
	width:98.999%;
	height:auto;
	padding:4px;
}
.cat-row{
	display:flex;
	flex-direction:row;
	width:98.999%;
	height:auto;
	padding:4px;
	position:relative;
}


.cat-row .cat-msg-btn{
	width:35px;
	height:35px;
	border:1px solid #201F1F;
	padding:5px;
	border-radius:25px;
	position:relative;
	top:10px; 
	cursor:pointer;
	margin-right:8px;
}
.cat-row .cat-msg-btn:hover{
	background:#171616;
}

.cat-row .cat-account-btn{
	width:35px;
	height:35px;
	border:1px solid #201F1F;
	padding:5px;
	border-radius:25px;
	position:relative;
	top:10px; 
	cursor:pointer;
	
}

.cat-row .cat-account-btn:hover{
	background:#171616;
}

.cat-row .cat-upload-btn{
	display:block;
	position:relative;
	top:15px;
	margin-right:10px;
	width:100px;
	height:35px;
	border:1px solid #201F1F;
	text-decoration:none;
	padding:4px;
	border-radius:20px;
	color:white;
	opacity:80%;
}

.cat-row .cat-upload-btn:hover{
	background:#201F1F;
}

.cat-row .cat-upload-btn img{
	width:30px;
	height:30px;
}
.cat-row .cat-upload-btn span{
	position:relative;
	margin-bottom:10px;
	top:-10px;
}

.form-row{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	width:100%;
	height:auto;
	position:relative;
	left:1%;
	margin-bottom:5px;
	font-size:17px;
}

.form-row .form-col{
	width:110px;
	height:40px;
	margin:10px;
}
.form-row .form-col h5{
	position:relative;
	top:-10px;
}

.form-row input{
  	width: 100%;
  	padding: 12px 20px;
	margin-top:8px;
	margin-bottom:10px;
	background:#1A1A1A;
	box-sizing:border-box;
	height:48px;
	border-radius:7px;
	color:white;
	outline:none;
	border:1px solid #000;
}
.form-row input:active{
	background:#1A1A1A;
}

.cat-btn-save{
	width:60px;
	height:40px;
	border-bottom-right-radius:20px;
	border-top-right-radius: 20px;
	background:#171616;
	border:1px solid #171616;
	color:white;
	position:relative;
	cursor:pointer;
}
.cat-btn-save:hover{
	background:#028608;
}

.cat-btn-cancel{
	width:60px;
	height:40px;
	border-bottom-left-radius:20px;
	border-top-left-radius: 20px;
	background:#171616;
	border:1px solid #171616;
	color:white;
	position:relative;
	cursor:pointer;
}
.cat-btn-cancel:hover{
	background:#93041D;
}

.form-row .cat-send-btn{
	width:110px;
	height:40px;
	background:#171616;
	border:1px solid #201F1F;
	color:white;
	opacity:80%;
	border-radius:20px;
	padding:2px;
	cursor:pointer;
}

.form-row input:focus{
	background:#1A1A1A;
	border:1px solid #959595;
	box-shadow:3px 3px 10px #000;
}

.form-row .form-col input[type=radio]{
	width:20%;
	margin-bottom:25%;
	margin-left:5px;
	padding:5%;
	position: relative;
	top:-8px;
}
.form-row .form-col select{
	width:100%;
	height:40px;
	margin-bottom:25%;
	margin-left:5px;
	padding:5%;
	position: relative;
	top:-8px;
	background:#1A1A1A;
	color:white;
}

.form-row select{
	width:100%;
	height:40px;
	margin-bottom:1%;
	margin-left:5px;
	position: relative;
	top:1px;
	background:#1A1A1A;
	color:white;
}

.form-row label{
	position:relative;
	margin-bottom:3px; 
}

.cat-movie-column{
	display:flex;
	position: relative;
	flex-direction:column;
	width:90%;
	height:auto;
	cursor: pointer;
}

.cat-movie-cover{
	width:280px;
	height:180px;
	margin:0;
	position:relative;
	margin-left:-33px;
}

.cat-btn-comment{
	width:60px;
	background:#171616;
	height:40px;
	cursor:pointer;
	outline:none;
	position:relative;
	left:-3px;
	border:1px solid #171616;
	border-bottom-right-radius:30px;
	border-top-right-radius: 30px;
	
}
.cat-btn-comment:hover{
	background:#201F1F; 
}


.likeit{
	background:#171616;
	position:relative;
	left:5px;
	border:1px solid #171616;
	width:80px;
	height:40px;
	padding:2px;
	border-bottom-left-radius:30px;
	border-top-left-radius:30px;
}


.likeit-icon{
	height:24px;
	width:24px;
	opacity:50%;
	position:relative;
	left:-15px;
}

.likeit-span{
  position: absolute;
  top:5;
  right:5;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 10px;
}

.likeit:hover{
	background:#201F1F; 
}
.dislike{
	background:#171616;;
	border:1px solid #171616;
	position:relative;
	width:80px;
	height:40px;
	left:-1%;
	padding:2px;
	color:#fff;
	
}
.dislike:hover{
	background:#201F1F; 
}

.dislike-icon{
	position:relative;
	left:8%;
	top:2px;
	height:24px;
	width:24px;
	opacity:50%;
}
.dislike-span{
  position: absolute;
  top:5;
  right:5;
  color: white;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 10px;
}

.view-btn{
	width:80px;
	height:40px;
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	border:1px solid #171616;
	position:relative;
	left:1%;
	background:#171616;
	padding-top:4px;
	color:#fff;
}

.view-span{
	position:relative;
	top:2px;
	text-align:center;
	padding-top:15px;
}
.view-icon{
	height:24px;
	width:24px;
	opacity:50%;
	position:absolute;
	right:4px;
}



.cat-movie-table{
	width:100%;
	height:150px;
}

.cat-movie-title{

}

.cat-movie-label-row{
	width:280px;
	position:relative;
	display:flex;
	flex-direction:row;
	
}

.cat-movie-label-row .cat-movie-dateofpost h4, h5{
	margin-left:10px;
}

.cat-movie-label-row .cat-movie-title{
	margin-left:10px;
	position:relative;
	top:-20px;
}

.cat-movie-label-row .cat-movie-prof-pic{
	width:40px;
	height:40px;
	border-radius:25px;
}

.cat-movie-label-row .cat-movie-userprofile{
	width:40px;
	height:40px;
	border-radius:25px;
}

.cat-movie-detail-row{
	width:300px;
	height:25px;
	position:relative;
	top:-10px;
	bottom:0px;
	margin:0px;
	left:16%;
	display:flex;
	flex-direction:row;
}
.cat-movie-detail-date{
	width:300px;
	height:25px;
	position:relative;
	top:-10px;
	bottom:5px;
	margin-bottom:15px;
	left:5%;
	display:flex;
	flex-direction:row;
	color:#888888;
}

.cat-ui-standout{
		background:#323232;
		width:90%;
		height:auto;
		margin:5px;
		padding:10px;
		position:relative;
		left:2%;
		border-radius:5px;
	}

.cat-row h3{
  font-size:18px;
  margin-bottom:3px;
}

.cat-cell-alignright{
	position:relative;
	left:1%;
	height:80px;
	padding-top:8px;
}

.cat-movie-userprofile img{
	width:40px;
	height:40px;
	border-radius:20px;
}

.cat-cell-video{
	position:relative;
	top:10px;
	left:2%;
	padding:10px;
	border-radius:1px;
}
.cat-cell-row{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	width:auto;
	padding:2px;
	position:relative;
	align-content: center;
}

.cat-cell-row h3{
	position: relative;
	left:60px;
}

.cat-cell-row h4{
	position: relative;
	left:60px;
}

.cat-cell-row .cat-ui-edittextfield{
	position: relative;
	left:40px;
}
.cat-cell-row .cat-ui-btn-edit{
	position: relative;
	left:50px;
}
.cat-cell-column{
	display:grid;
	grid-column-gap:1%;
	width:29%;
	color:white;
}
.cat-ui-upload-button{
	width:400px;
	margin:5px auto;
	height:45px;
	background:#298D0B;
	border:1px;
	border-radius:25px;
	padding:2px;
	font-size:12px;
	opacity:100%;
	font-family:"Roboto Light";
	
}

.cat-ui-button-previous{
		width:150px;
		height:50px;
		padding:3px;
		display:inline-block;
		border-radius:30px;
		border:1px solid #1A1A1A;
		position:relative;
		left:10%;
		background:#323232;
	}
.cat-ui-button-previous:hover{
	background:#1A1A1A;
}

.cat_css_listImages {
    width: 80px;
    height: 80px;
    margin: 2px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 8px black;
    border-radius: 0px;
    text-align: center;
    cursor: pointer;
}
.cat-ui-button-previous a{
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.cat-ui-button-next{
	width:150px;
	height:50px;
	padding:3px;
	display:inline-block;
	border:1px solid #1A1A1A;
	border-radius:30px;
	position:relative;
	left:60%;
	right:10%;
	background:#323232;
	}
.cat-ui-button-next:hover{
	background: #1A1A1A;
}

.cat-ui-large-img{
	position: absolute;
	width:auto;
	max-width:97%;
	height:auto;
	max-height:97%;
	margin: 1% auto;
	margin-left: 1%;
	margin-bottom: 1% important;
}

.cat-hotels-grid{
		width:220px;
		height:260px;
		border:1px solid #EFECEC;
		box-shadow:0px 0px 3px 3px #000;
	}

	.cat-hookers-location{
		height:150px;
		width: 100%;
	}

	.cat-hookers-gallary{
		height:auto;
		width:auto;
		border-radius:10px;
		margin:5px auto;
		background: #1A1A1A;
	}
	
	.cat-hookers-profile{
		height:auto;
		width:96%;
		margin-top:15px;
		margin-left:20px;
		padding-top:20px;
		padding-bottom:40px;
		background:#393939;
		opacity:80%;
		border:1px;
		border-radius:4px;
	}
	
	.cat-hookers-background{
		height:2000px;
		width:100%;
		background:#201F1F;
	}
	.cat-hookers-img{
		width:200px;
		height:200px;
		border-radius:15px;
		box-shadow:1px 1px 2px 1px #fff;
	}
	
	.cat-hookers-gal-img{
		transition: box-shadow .6s;
		width:200px;
		height:245px;
		border-radius:15px;
		box-shadow:1px 1px 2px 1px #fff;
		cursor: pointer;
	}
	.cat-hookers-cb{
		width:400px;
		margin:5px auto;
		height:50px;
		background:#0742CE;
		border-radius:25px;
	}
	.cat-ui-edittextfield{
		width:80px;
		height:40px;
		margin-bottom:8px;
		padding-left:50px;
		border:1px solid #1A1A1A;
		border-radius:30px;
		position:relative;
		background:#323232;
		align-content:center;
		outline:#1A1A1A;
		
	}
.cat-ui-btn-edit{
	width:100px;
	height:40px;
	padding-left:10px;
	border-radius:15px;
	position:relative;
	background:#298D0B;
	align-content:center;
}

.cat-cell-column .cat-btn-subscribe{
	width:150px;
	height:50px;
	border-radius:30px;
	padding:4px;
	background:#171616;
	border:1px solid #000000;
	color:#fff;
	font-size:18px;
	font-weight: 800;
	cursor:pointer;
}

.cat-cell-column .cat-btn-subscribe:hover{
	background:#201F1F;
	cursor:pointer;
}

.cat-cell-alignleft{
	
}
.cat-cell-clearboth{
	
}
.cat-play-container{
	width:99%;
	min-height:1200px;
	max-height:100%;
	margin-top:2px;
	position:relative;
	left:2%;
	top:55px;	
}
.cat-row-play{
	display:flex;
	flex-direction:row;
	height:auto;
	background:#000000;
	border-radius:7px;
	padding:10px;
	position:relative;
	left:2%;
	min-width:200px;
	border:1px solid #000000;
}
.cat-play-comment{
	height:auto;
	position:relative;
	left:2%;
	min-height:150px;
	background: #000000;
	margin-top:1%;
	padding:10px;
	border-radius:5px;
	display:flex;
	flex-direction:row;
}

.cat-play-comment .cat-comment-row-cell{
	display:flex;
	flex-direction:row;
	width:100%;
	height:auto;
}
.cat-comment-message{
	height:40px;
	background:#171616;
	box-shadow: 2px 2px 3px #201F1F;
	color:white;
	border-top:none;
	border-right:none;
	border-left:none;
	padding:1%;
}

.cat-comment-message:focus{
	border:1px solid #201F1F;
	box-shadow: 2px 2px 3px #201F1F;
}

.cat-play-comment input[type=text]:focus{
	outline:solid;
	outline-color:#171616; 
}

.cat-comment-message:active{
	outline:none;
	box-shadow: 2px 2px 3px #201F1F;
}
.cat-packed-buttons{
	position:relative;
	left:48%;
	margin-top:3%;
}
.cat-packed-buttons .cat-comment-cancel{
	width:80px;
	height:40px;
	background:#171616;
	cursor:pointer;
	color:white;
	border:none;
	border-radius:20px;
	padding:2px;
}

.cat-packed-buttons .cat-comment-cancel:hover{
	background:#C20003;
	border:1px solid #201F1F;
}
.cat-packed-buttons .cat-comment-post{
	width:110px;
	height:40px;
	background:#171616;
	border:1px solid #201F1F;
	color:white;
	opacity:80%;
	border-radius:20px;
	padding:2px;
	cursor:pointer;
}

.cat-packed-buttons .cat-comment-post:hover{
	background:#201F1F;
}

.cat-comment-wall{
	
}
.cat-play-rightbar{
	position:fixed;
	display:flex;
	flex-direction:column;
	width:30%;
	min-height:1100px;
	max-height:100%;
	left:67%;
	top:90px;
	overflow:scroll;
}
.cat-ui-msg-left{
	position:fixed;
	display:flex;
	flex-direction:column;
	width:25%;
	min-height:1100px;
	max-height:100%;
	left:0;
	top:70px;
	padding-top:20px;
	padding-left:10px;
	background:#000;
	overflow:scroll;
	
}

.cat-ui-msg-right{
	display:flex;
	flex-direction:column;
	position:fixed;
	top:70px;
	width:17%;
	min-height:800px;
	max-height:100%;
	left:83%;
	background:#000;
	overflow:scroll;
	padding-right:1%;	
}

.cat-ui-tabs{
	
}
.cat-ui-tabs-header{
	display:flex;
	flex-direction:row;
	min-width:1000px;
	width:100%;
	height:70px;
	padding-top:0.5%;
	padding-bottom:1%;
	background:#171616;
	
	
}
.cat-ui-tabs-header label{
	position:relative;
	top:20px;
	width:auto;
	padding-right:10px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:5px;
	background:#1A1A1A;
	height:45px;
	cursor: pointer;
}
.cat-ui-tabs-header input[type=radio]{
	position:relative;
	left:20px;
	top:8px;
	cursor:pointer;
}

.cat-ui-tabs-header input[type=radio]:checked +label{
	background:#000;
	cursor:pointer;
}



.cat-ui-tabs-header label img{
	width:34px;
	height:34px;
}

.cat-ui-tabs-header label span{
	position:relative;
	top:1px;
	left:3px;
}

.cat-ui-tabs-content{
	
}
.cat-tabs{
	display:none;
}
.cat-showtabs{
	display:block;
	width:98%;
	min-height:800px;
	height:100%;
	padding:1%;
	background:#000;
}

.cat-ui-tabs-links{
	position:relative;
}

cat-ui-label{
	position:relative;
	top:5px;
	bottom:5px;
}

/*SMALLER COLUMNS */

.cat-col-1{
	width:10%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.cat-col-1 img{
	width:34px;
	height:34px;
}
.cat-col-2{
	width:15%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.cat-col-3{
	width:20%;
	position:relative;
	display:flex;
	flex-direction:column;
	height:auto;
	min-height:200px;
	padding:2px;
}
.cat-col-4{
	width:30%;
	position:relative;
	height:auto;
	display:flex;
	flex-direction:column;
}
.cat-col-5{
	width:40%;
	position:relative;
	display:flex;
	flex-direction:column;
}
.cat-col-6{
	width:50%;
	position:relative;
	display:flex;
	flex-direction:column;
}

.cat-row-1{
	display:flex;
	flex-direction:row;
	width:10%;
	height:auto;
	min-height:200px;
	font-family:"Roboto Light" "Roboto Regular";
}
.cat-row-2{
	display:flex;
	flex-direction:row;
	width:15%;
	height:auto;
	min-height:200px;
	font-family:"Roboto Light" "Roboto Regular";
}
.cat-row-3{
	display:flex;
	flex-direction:row;
	width:20%;
	min-height:50px;
	height:auto;
	font-family:"Roboto Light" "Roboto Regular";
}
.cat-ui-img-portrait{
	width:140px;
	height:170px;
	border:1px solid #FFFFFF;
	box-shadow:1px 1px  3px #000;
	margin:3px;
	cursor:pointer;
}
.cat-ui-linked-img{
	width: 40px;
    height: 40px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 8px black;
    border-radius: 25px;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
}
.circus-link-image-vsmall {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 8px black;
    cursor: pointer;
    background:#FFF;
}
.circus-link-image {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #FFFFFF;
    box-shadow: 0px 0px 8px black;
    cursor: pointer;
}
    .navbar{ background: var(--bg); border-bottom: 1px solid #222; }
	.navbar { background:#0f0f0f !important; }
  	.form-control::placeholder { color:#9aa0a6; }
  	.btn.btn-sm { padding:.375rem .6rem; border-radius:.65rem; }
    .player-wrap{ background:#000; position: sticky; top:0; z-index: 100; }
    .video-el, .video-iframe{ width:100%; height: calc(100vw * 9 / 16); max-height: 62vh; background:#000; }

    .video-title{ font-size:1.05rem; font-weight:700; line-height:1.35; }
    .video-meta{ color:var(--muted); font-size:.9rem; }

    .actions{ display:flex; gap:.6rem; overflow:auto; padding-bottom:.4rem; }
    .btn-chip{
      background: var(--chip); color:#fff; border:1px solid #262626;
      padding:.4rem .7rem; border-radius:999px; display:flex; align-items:center; gap:.4rem; white-space: nowrap;
    }
    .btn-chip .count{ color:#d7d7d7; font-weight:600; font-size:.92rem; }
    .btn-chip.active{ background:#2a2a2a; border-color:#333; box-shadow: inset 0 0 0 1px #333; }

    .avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
    .subscribe-btn{ background: var(--accent); color:#fff; border:0; border-radius:999px; padding:.5rem 1rem; font-weight:700; }
    .subscribed{ background:#2d2d2d !important; color:#e5e5e5 !important; }
    .divider{ border-top:1px solid #222; }

    .desc{ background: var(--card); border-radius:12px; padding:.75rem .9rem; font-size:.95rem; }
    .desc .meta{ color:#cfcfcf; font-weight:600; }
    .desc .text{ color:#ddd; }

    .comment-input{ background:#121212; border:1px solid #222; color:#fff; border-radius:999px; padding:.5rem .85rem; }
    .comment{ display:flex; gap:.6rem; }
    .comment .uava{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
    .comment .uname{ font-weight:600; font-size:.95rem; }
    .comment .utime{ color:var(--muted); font-size:.85rem; }
    .comment .utext{ color:#e9e9e9; font-size:.96rem; }
    .sort-chip{ background:transparent; color:#cfcfcf; border:1px solid #2a2a2a; border-radius:999px; padding:.25rem .65rem; font-size:.85rem; }
    .sort-chip.active{ background:#2a2a2a; }
    .pointer{ cursor:pointer; }
.search-input{
      background:#121212; border:1px solid #222; color:#fff;
    }
    .video-card{
      background: transparent; border:0;
    }
    .thumb-wrap{
      position: relative; overflow: hidden; border-radius: 12px;
      background:#222;
    }
    .thumb{
      width:100%; height:190px; object-fit: cover;
    }
    .duration-badge{
      position:absolute; right:.5rem; bottom:.5rem;
      background: rgba(0,0,0,.8); color:#fff; font-weight:600;
      padding:.15rem .4rem; border-radius:.35rem; font-size:.78rem;
    }
    .avatar{
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    }
    .title{
      font-size: 0.98rem; line-height:1.35; font-weight:600; color:#fff; margin:0;
    }
    .meta{
      color: var(--muted); font-size:.85rem;
    }
    .chip{
      display:inline-block; padding:.15rem .5rem; border-radius: 999px;
      background:#1f1f1f; color:#cfcfcf; font-size:.72rem;
    }
    .bottom-nav{
      position: sticky; bottom:0; z-index:1030;
      background: var(--bg); border-top:1px solid #222;
    }
    .bottom-nav .nav-link{ color:#bbb; font-size:.82rem; }
    .bottom-nav .nav-link.active{ color:#fff; }
/* ---- Buttons in the navbar: no solid border, soft shadow ---- */
.navbar .btn {
  border: 0 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),   /* subtle hairline edge replaces border */
    0 4px 10px rgba(0,0,0,.45);        /* depth */
  transition: box-shadow .15s ease, transform .05s ease;
}
.navbar .btn:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.16),
    0 6px 14px rgba(0,0,0,.55);
}
.navbar .btn:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 3px 8px rgba(0,0,0,.45);
}
/* Keep keyboard accessibility—show a colored focus ring */
.navbar .btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #0ea5e9,                 /* cyan ring */
    0 0 0 1px rgba(255,255,255,.18),
    0 6px 16px rgba(0,0,0,.6);
}

/* ---- (Optional) Search field: remove solid borders, use shadow edge ---- */
.navbar .input-group-text,
.navbar .form-control {
  border: 0 !important;
  background: #0f0f0f;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10), /* inner hairline */
    0 3px 10px rgba(0,0,0,.45);            /* outer depth */
}
.navbar .form-control::placeholder { color:#9aa0a6; }
.navbar .form-control:focus {
  outline: none;
  box-shadow:
    0 0 0 2px #0ea5e9,                     /* focus ring */
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 6px 16px rgba(0,0,0,.6);
}