/*HEADER*/

html {
  scrollbar-width: none;
}

body{
	background-color: #D2EDF2;
	font-family: 'Fredoka', sans-serif;
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

header{
	background-color: #fff;
	box-shadow: 1px 2px 4px 2px #a6a6a6;
}

::-webkit-scrollbar {
    display: none;
}

::-ms-scrollbar {
    display: none;
}

.alert-success{
    width: max-content;
}


.wrapper{
	margin-top: 100px;
    margin-bottom: 2rem;
}

button.whole-back{
    background-color: #fff;
    color: #000;
    border: 1px transparent;
    padding: 5px 15px;
    border-radius: 2px;
    font-weight: 600;
    letter-spacing: 2px;
    float: left;
}

button.whole-back:hover,button.whole-back:focus{
    background-color: #7f7c7c;
    color: #fff;
}

/*NAVBAR*/


.navbar-brand img{
	height: 75px;	
}

.navbar-light .navbar-toggler{
    margin-right: 30px;
}

.navbar{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
	font-size: 29px;
}
.nav-link{
	margin-left: 3px;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
	background-color: #F2F0F0;
	border: 1px #515151;
	color: #000;
}
.nav-link img {
    width: 27px;
    height: 26px;
    margin-bottom: 6px;
}

.nav-link svg {
    width: 28px;
    height: 27px;
    margin-bottom: 5px;
}

a#BM{
	font-size: 27px;
	margin-top: 2px;
}

img.nav-avatar {
	width: 50px;
	height: 50px;
	margin-top: -2px;
}

form {
    margin-top: 2px;
}

li.search-home {
    margin-right: 130px;
    margin-top: 10px;
}

.dropbtn {
  color: #fff;
  padding: 6px 11px;
  font-size: 16px;
  border: none;
  background-color: transparent;
  margin-top: 10px;
}

.dropdown {
  position: relative;
  display: inline-block;
  text-align: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    left: -24px;
    top: 59px;
    background-color: #fcfcfc;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f6f6f6;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #F2F0F0;}

a#HM {
    font-size: 25px;
    margin-top: 3px;
}

.search-home img{
	width: 35px;
	height: 30px;
}

.search-home input {
    background-color: #e3e7e7;
    border: none;
    padding: 7px 0px 6px 4px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    width: 240px;
    padding-left: 20px;
    height: 46px;
}

ul#ui-id-1{
	z-index: 9000;
}

.ui-menu .ui-menu-item a{
	background-color: #fff;
}
.ui-menu .ui-menu-item a {
	padding: 10px !important;
}

.ui-state-hover, .ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state.focus,.ui-widget-header .ui-state.focus{
	border: 1px transparent !important;
	background: #f2f2f2 !important;
	color: #000 !important;
	font-weight: 400 !important;
	padding: 10px !important;
	margin: 0;
}

button.form-control {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -5px;
    border: 1px solid #ced4da;
}

input#users {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 7px;
}

.form-control:focus {
    color: #212529;
    background-color: #e3e7e7;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.form-control {
    display: inline-block;
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-top-left-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

button.search {
    font-size: 22px;
    background: #cecbcb;
    padding: 0px 6px 4px 6px;
    margin-top: -2px;
    margin-left: -4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color: #000;
    border: transparent;
}

.dropdown-toggle::after {
    display: none;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.dropdown-men {
    position: absolute !important;
    right: -40px;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
}


.search-home button:hover, .search-home button:focus{
	background-color: #F2F0F0;
	color: #000;
}

/*STORY*/

.story-binder{
	background-color: #fff;
	padding: 10px;
	border-radius: 15px;
	height: 125px;	
}

button.modal-close {
    color: #fff;
    background: transparent;
    border: 1px transparent;
    font-size: 60px;
    position: absolute;
    right: 5rem;
}

.story-poster{
	width: auto;
	height: 76px;
}

.story-close {
  color: #fff;
  background: transparent;
  border: 1px transparent;
  font-size: 50px;
  position: absolute;
  top: 2rem;
  right: 3rem;
}

.story-close:hover,.story-close:focus{
    color: #cac7c7;
}

.mycarousel-popup{
    background-color: #00000080;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    display: none;
}

.story-img{
	justify-content: center;
}

.y-story-span{
    display: flex;
    flex: 1;
    flex-direction: row;
    z-index: 60;
    position: absolute;
    left: 1rem;
    top: 10px;
}

a.y-story-span-a{
    color: #fff;
    text-decoration: none;
    position: absolute;
    right: 34px;
    top: 13px;
    z-index: 60;
    font-weight: bold;
    border: 1px solid #fff;
    padding: 5px 10px;
}

p.y-story-span-p1{
    position: relative;
    left: 5px;
    top: 5px;
    color: #fff;
    font-weight: bold;
}

p.y-story-span-p2{
    position: relative;
    top: 24px;
    right: 76px;
    color: #fff;
    font-weight: bold;
}

.story-item a{
    color: #000;
    text-decoration: none;
}

.story-img img{
	width: 52px !important;
    margin-left: 11px;
}

i.fa.fa-plus {
    width: 22px;
}

.story-poster-content {
	width: 75px;
	text-align: center;
  }

.story-poster-content a{
	text-decoration: none;
	color: rgb(49, 49, 49);
	font-size: 16px;
	overflow-x: hidden;
}

.story-content {
	text-align: center;
	position: relative;
	width: 64%;
  }

.story-content a{
	text-decoration: none;
	color: rgb(49, 49, 49);
	font-size: 16px;
	overflow-x: hidden;
}

.story-img button{
	background-color: transparent;
	border: 1px transparent;
}

button.close-story{
	background-color: transparent;
	color: #fff;
	border: 1px transparent;
	font-size: 64px;
	position: absolute;
	right: 10px;
	top: 10px;
}

button.close-story:hover,button.close-story:focus{
	color: red;
	opacity: 1;
}

/*STORY-VIEWER*/

.story-viewer{
	background-color: #00000080;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	display: none;
}

.story-viewer-container {
    width: 355px;
    height: 500px;
    background-color: #fff0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.story-carousel-popup{
	position: relative;
    display: none;
    float: left;
    width: 100%;
    height: 500px;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform .6s ease-in-out;
}



img.story-dp{
	width: 50px;
}

.carousel-item a{
	position: absolute;
	top: 10px;
	left: 10px;
}

/*LIKE-POPUP*/

.like-content{
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    border: 1px solid #888;
    width: 500px;
    height: 500px;
    overflow-y: auto;
}

ul.like-list{
    list-style: none;
}



li.like-item{
    background-color: #fff;
    padding: 5px 10px;
    border-bottom: 1px solid #cdcdcd;
}

.like-item img{
    width: 50px;
    border-radius: 50rem;
}

/*STORY_WATCH*/
.story-watcher-container{
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9004;
}

.story-watcher-content{
    
}

/* FEED SECTION */

.feed{
	background-color: #fff;
	padding: 10px;
}

.feed-container{
	background-color: #ffffff;
	padding: 10px;
	border-radius: 5px;
}

.feed-container a{
    color: #000;
    text-decoration: none;
}

/*OPT-LINK*/

.opt-link-container{
	max-width: 450px;
}

/* Set a style for all buttons */
button.opt-link-btn {
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  font-size: 31px;
}
.opt-link-btn svg{
	color: #000;
}

ul.opt-link-ul {
    background-color: #fff;
    text-align: center;
    align-items: center;
    list-style: none;
    padding-left: 14px;
    width: 600px;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
}


li.opt-link-li{
	padding: 15px 10px;
	border-bottom: 1px solid #d3d3d3;
}

li.opt-link-li:hover,li.opt-link-li:focus{
	background-color: #f7f7f7;
}

.opt-link-li input{
	display: none;
}

.opt-link-li button{
	background: transparent;
    border: 1px transparent;
    text-align: center;
}

a.opt-link-a{
	color: #000;
	text-decoration: none;
	padding: 15px 10px;
}

button:hover {
  opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* The Modal (background) */
.opt-link-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 7778; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}


/*FEED CAROUSEL*/



/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

.rounded-pill.pro-pic {
	width: 50px;
  }

.feed-header a{
	text-decoration: none;
	color: rgb(49, 49, 49);
	font-family: 'Fredoka', sans-serif;
}

.opt-link {
	color: #000;
	width: 31px;
	float: right;
	margin-top: 7px;
	margin-right: 10px;
}

.feed-footer a{
	margin-left: 15px;
	color: #1e1e1f;
	font-size: 37px;
}

.feed-footer a:hover,.feed-footer a:focus{
	opacity: 0.75;
}

button.like-btn {
    font-size: 37px;
    padding: 0;
    border: transparent;
    margin-bottom: 14px;
    background-color: transparent;
}

button.like-btn:hover, button.like-btn:focus{
	opacity: 0.75;
	color: red;
}
button.like-btn:active{
	color: red;
}

.heart-btn{
	font-size: 37px;
	padding: 0;
	border: transparent;
	margin-top: 14px;
	background-color: transparent;
}

.red{
	color: red;
}

input.home-cmnt{
    background-color: #fdf5f0;
    padding: 6px 5px;
    border-radius: 6px;
    width: 80%;
    border: 1px solid #b8b8b8;
}

.btn{
    padding: 8px 35px !important;
    position: relative;
    bottom: 2px;
}

/* PROFILE VIEWER */

.pro-viewer{
	background-color: #fff;
	padding: 10px;
	border-radius: 15px;
	position: fixed;
	right: 5rem;
	top: 0;
	margin-top: 100px;
}

.profile{
	text-align: center;
	border: 1px #515151;
	padding: 1px;
}

.profile a {
	color: #3D3C3C;
	text-decoration: none;
	font-family: 'Fredoka', sans-serif;
}

.home-footer{
    margin-top: 1rem;
    text-align: center;
}

.home-footer a{
    margin: 15px;
    text-align: center;
    color: #9e9191 !important;
}

.profile img{
	width: 70px;
}

.pro-suggestions{
	text-align: left;
	margin-top: 1rem;
}

.pro-suggestions p{
	color: #807e7e;
	font-size: 15px;
    margin-top: 5px;
}

img.img-responsive.co-img.rounded-pill {
    margin-bottom: 10px;
}

.follow-btn {
    color: #03036d;
    font-size: 14px;
    border: none;
    background: transparent;
    float: right;
    margin-top: 14px;
}

.follow-btn:hover, .follow-btn:focus{
	color: #000;
}

.pro-suggestions a{
	text-decoration: none;
	color: rgb(49, 49, 49);
	font-size: 16px;
}
.suggestions{
	margin-top: 10px;
}

.suggestions-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*SETTINGS PAGE*/

.settings-pane{
	background-color: #fff;
	padding: 10px;
	text-align: center;
	margin-top: 3rem;
	position: relative;
	bottom: 2rem;
}
.left-settings-pane ul{
	background-color: #fff;
	text-align: center;
	align-items: center;
	list-style: none;
	padding-left: 14px;
}

.left-settings-pane ul li{
	padding: 15px 10px;
	border-bottom: 1px solid #000;
}
.left-settings-pane ul li:hover,.left-settings-pane ul li:focus{
	background-color: #f7f7f7;
}

.left-settings-pane ul li a{
	color: #000;
	text-decoration: none;
	padding: 15px 10px;
}
.right-settings-pane{
	border-left: 1px solid #000;
}

.Edit-profile-section {
    text-align: left;
    margin-left: 4rem;
    margin-top: 2rem;
    align-items: center;
    height: 36px;
}
.Edit-profile-prodp{
    width: 75px;
    height: 75px;
    border-radius: 50rem;
}

input.Edit-profile-input {
    background-color: #fdf5f0;
    padding: 6px 5px;
    border-radius: 6px;
    width: 300px;
    margin-right: 13rem;
    float: right;
    border: 1px solid #b8b8b8;
}

div#myprofileImg img{
    width: 75px;
    height: 75px;
    border-radius: 50rem;
}

.Edit-profile-ii{
    padding: 10px;
    background-color: #fdf2fd;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    width: 300px;
    height: 50px;
}

.Edit-profile-proimg{
    display: flex;
    justify-content: space-evenly;
    margin-top: 2rem;
    align-items: center;
}

textarea.Edit-profile-input{
	background-color: #fdf5f0;
    padding: 6px 5px;
    border-radius: 6px;
    width: 300px;
    margin-right: 13rem;
    float: right;
    border: 1px solid #b8b8b8;
}

.Edit-Confirm{
	text-align: center;
    margin-top: 3rem;
    align-items: center;
}

.Edit-Confirm button {
    padding: 10px 30px;
    background-color: #0b8cfa;
    border: 1px transparent;
    border-radius: 5px;
    color: #fff;
}

.Edit-Confirm button:hover,.Edit-Confirm button:focus{
	opacity: 0.75;
}
.All-alert {
    color: red;
    float: right;
    margin-right: 15rem;
}


/*LOGIN PAGE*/



.left-login{
	position: absolute;
	top: 15%;
	left: 12%;
	text-align: center;
}

.left-login h2{
	font-family: 'Ramaraja', serif;
	font-weight: bolder;
	font-size: 45px;
	color: #3D3C3C;
	margin: 0;
}
.left-login h1{
	font-family: 'Ramaraja', serif;
	font-weight: bolder;
	font-size: 65px;
	color: #5B64AD;
	margin: 0;
}

.right-login{
	position: absolute;
	top: 9%;
	right: 5%;
	text-align: center;
	background-color: #fff;
	padding: 30px;
	width: 38%;
	border-radius: 6px;
	box-shadow: 5px 3px 5px 0px #c6c6c5;
	
}

.right-img-container{
	padding: 10px;
}

.right-img-container img{
	width: 200px;
	height: 100px;
}

.login-input span {
    font-size: 30px;
    align-content: center;
    position: relative;
    bottom: -7px;
    right: 7px;
}

.login-input input {
    background-color: #fdf5f0;
    padding: 10px 5px;
    border-radius: 6px;
    border: 1px solid #b8b8b8;
    margin-top: 27px;
    width: 300px;
}

.login-footer button {
    background-color: transparent;
    border: 5px solid #837c7c;
    color: #000;
    border-radius: 6px;
    margin-top: 15px;
    font-weight: bold;
    padding: 6px 24px;
}

.login-footer button:hover,.login-footer button:focus{
	background-color: #837c7c;
	color: #fff;
}


.login-footer p{
	text-align: center;
	margin-top: 10px;
}
div#gSignIn {
	display: flex;
    justify-content: center;
}

.Create-acc a{
	color: #112bee;
	text-decoration: none;
}

.Create-acc a:hover,.Create-acc a:focus{
	text-decoration: underline;
}

a.ft-pwd{
	color: darkred;
	text-decoration: none;
}

a.ft-pwd:hover,a.ft-pwd:focus{
	text-decoration: underline;
}

 .login-alert{
 	color: red;
 	text-align: center;
 	text-decoration: none;
 }

 /*SIGN-UP-PAGE*/

 .sign-up-container {
    width: 600px;
    height: 500px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 30px;
}
 .sign-up-input {
    background-color: #fdf5f0;
    padding: 10px 5px;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    float: right;
    border: 1px solid #b8b8b8;
    margin-top: 10px;
}

 button.sign-up-btn{
 	background-color: transparent;
    border: 5px solid #837c7c;
    color: #000;
    border-radius: 6px;
    margin-top: 15px;
    font-weight: bold;
    padding: 6px 24px;
    margin-bottom: 2rem;
 }

 .sign-up-footer{
 	width: 100%;
 }

button.sign-up-btn:hover,button.sign-up-btn:focus{
	background-color: #837c7c;
	color: #fff;
}

.sign-up-conteiner img{
	width: 200px;
	height: 100px;
}

.sign-up-conteiner h3{
	font-size: 20px;
	margin-top: 4rem;
}

.already-registered-footer{
	color: #fff;
	padding: 15px;
}

.already-registered-footer a{
	text-decoration: none;
	color: #24830a;
}

.already-registered-footer a:hover,.already-registered-footer a:focus{
	text-decoration: underline;
}

.sign-up-input-container{
	width: 100%;
	margin-bottom: 30px;
}

.sign-up-alert{
	color: red;
}

/*FORGOT PASSWORD PAGE*/

.FP-card {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    min-width: 0;
    width: 450px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
    align-items: center;
    margin-top: 9rem;
}

.FP-card-header{
    padding: 15px;
}

.FP-card-body{
    padding: 15px;
}

.FP-card-body input{
    background-color: #fdf5f0;
    padding: 10px 5px;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    border: 1px solid #b8b8b8;
}

.FP-card-body button{
    background-color: transparent;
    border: 5px solid #837c7c;
    color: #000;
    border-radius: 6px;
    margin-top: 15px;
    font-weight: bold;
    padding: 6px 24px;
    margin-bottom: 2rem;
}

.FP-card-body button:hover,.FP-card-body button:focus{
    background-color: #837c7c;
    color: #fff;
}

.FP-card-footer{
    padding: 15px;
}

.FP-card-footer a{
	text-decoration: none;
	color: #24830a;
}

.FP-card-footer a:hover,.FP-card-footer a:focus{
	text-decoration: underline;
}

/*INBOX-PAGE*/

.inbox{
	background-color: #fff;
	overflow-y: hidden;
	height: 510px;
	overflow-x: hidden;
}

.inbox-left{
	text-align: center;
	color: #000;
	-webkit-scrollbar: visible;
	
}

.inbox-left-heading{
	padding: 15px 25px 15px 25px;
	border-left: 1px solid #b9b7b7;
	border-right: 1px solid #b9b7b7;
	border-top: 1px solid #b9b7b7;
}

.inbox-left-heading button{
	display: inline-block;
    float: right;
    margin-right: 5px;
    color: #000;
    background: transparent;
    border: 1px transparent;
    font-size: 23px;
}

a.back-res{
    display: none;
}

.inbox-left-heading a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

.inbox-left-heading a:hover,.inbox-left-heading a:focus{
	color: #000;
}

.inbox-left ul {
    text-align: left;
    list-style: none;
    height: 444px;
    border: 1px solid #a19d9d;
    padding-left: 0;
}

.inbox-left ul li{
	padding: 15px 10px;
}

span.time{
	float: right;
    position: relative;
    bottom: 23px;
}

.inbox-left ul li:hover,.inbox-left ul li:focus{
	background-color: #eeecec;
}

.inbox ul li a{
	color: #000;
	text-decoration: none;
}

.inbox ul li img{
	width: 40px;
    height: 40px;
    float: left;
    position: relative;
    bottom: 6px;
    right: 6px;
}

.inbox-right{
	text-align: center;
}

.inbox-right-img{
	margin-top: 8rem;
}

.inbox-right-img img{
	width: 20%;
}

.inbox-right-btn{
	margin-top: 1rem;
}

.inbox-right-btn button{
	color: #fff;
    background-color: #009df7;
    border: 1px transparent;
    padding: 12px 25px;
    border-radius: 10px;
}

.inbox-right-list{
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 1; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /* Fallback color */
		background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	.inbox-right-list-container{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		background-color: #fefefe;
  		border: 1px solid #888;
  		width: 500px; /* Could be more or less, depending on screen size */
  		height: 94px;
  		text-align: center;
	}

	.inbox-right-list-container button{
		padding: 9px 20px;
	}	

	.right-list-header{
	position: fixed;
	width: 100%;
	border-bottom: 1px solid #000;
}

.right-list-header input{
	padding: 10px 20px;
    border: 1px transparent;
    background: #ddeaeb;
    margin-bottom: 7px;
}
.right-list-body{
	margin-top: 6rem;
	overflow-y: scroll;
	width: 500px;
	height: 400px;
}

.me-story-close {
    position: absolute;
    color: #000;
    font-size: 75px;
    font-weight: bold;
    top: 1rem;
    right: 4rem;
    background-color: transparent;
    border-color: transparent;
}

.close {
    position: absolute;
    color: #000;
    font-size: 35px;
    font-weight: bold;
    top: 0;
    right: 20px;
    background-color: transparent;
    border-color: transparent;
}

.me-close:hover,
.me-close:focus {
  color: #fff;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #9e9e9e;
  cursor: pointer;
}

.inbox-right-list ul{
	list-style: none;
	padding: 0;
}

.inbox-right-list ul li{
	padding: 5px 25px;
	align-items: center;
}

.inbox-right-list ul li:hover,.inbox-right-list ul li:focus{
	background-color: #f9f8f8;
}

.inbox-right-list ul a{
	text-decoration: none;
	color: #000;
}

.no_msg{
    text-align: center;
    margin-top: 10rem;
}

.no_msg i{
    font-size: 60px;
    color: #8eafd7;
}

.no_msg h2{
    font-size: 30px;
    color: #000;
}

/*CHAT-BOX*/

.chat-box{
	text-align: center;
	border: 1px solid #b9b7b7;
}

.chat-box-header {
    padding: 10px;
    text-align: left;
    background-color: #f6f6f6;
    border-bottom: 1px solid #b9b7b7;
}

.chat-box-header img{
	width: 50px;
}

.chat-box-header a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

.chat-box-header a:hover,.chat-box-header a:focus{
	color: #000;
}

.chat-box-body{
	height: 378px;
	overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
}

.left-chat{
	text-align: left;
	margin-top: 2rem;
}

.left-chat-p{
    max-width: 100%;
    float: left;
    position: relative;
    bottom: -3px;
    left: 5px;
}

.right-chat-p{
        max-width: 100%;
        float: right;
        position: relative;
        bottom: 8px;
        right: 5px;
}

.left-chat img{
	width: 40px;
}

p.left-chat-time{
    position: relative;
    left: 10px;
    bottom: 11px;
}

.left-chat-span{
    background-color: #fff;
    border: 2px solid #7975758c;
    border-radius: 5px;
    padding: 10px 10px;
    margin-left: 50px;
    max-width: 90%;
    width: max-content;
}

.left-chat-span a{
    color: #2751f8;
    text-decoration: none;
}

.left-chat-span a:hover,.left-chat-span a:focus{
    text-decoration: underline;
}

.left-chat-span img{
    width: 100%;
    height: auto;
}

.right-chat{
	text-align: left;
	margin-top: 2rem;
}

.right-chat img{
	width: 40px;
    position: relative;
    top: 18px;
}

.right-chat-time{
    position: relative;
    bottom: 35px;
    right: 18px;
    text-align: right;
}

.right-chat-span{
    background-color: #c3ffb9;
    border: 2px solid #7975758c;
    border-radius: 5px;
    padding: 10px 10px;
    margin-right: 50px;
    max-width: 90%;
    width: max-content;
    margin-left: auto;
}

.right-chat-span a{
    color: #000;
    text-decoration: none;
}

.right-chat-span a:hover,.right-chat-span a:focus{
    text-decoration: underline;
}

.right-chat-span img{
    width: 225px;
    height: 225px;
    top: unset;
}

.chat-box-footer{
	position: relative;
	bottom: 2px;
	padding: 5px;
	background-color: #fff;
	text-align: left;
}

.chat-box-footer input {
    padding: 5px 10px;
    margin-left: 13px;
    width: 83%;
    border-radius: 6px;
    border: 1px solid #000;
    background-color: #e2eff9;
}

.chat-box-footer button {
    background-color: #0714ec;
    color: #fff;
    padding: 6px 20px;
    border: 1px transparent;
    border-radius: 5px;
    margin-left: 12px;
}

/*PROFILE PAGE*/

.profile-left{
	text-align: center;
	margin-top: 2rem;
}

.profile-left img{
	width: 150px;
	height: 150px;
}

.pr-line-1 a{
	background-color: transparent;
	padding: 10px 10px;
	border: 1px solid #000;
	margin-left: 15px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
}

.pr-line-1 a:hover,.pr-line-1 a:focus{
	opacity: 0.75;
	color: #000;
}

.pr-line-1 button{
	background-color: transparent;
	padding: 10px 10px;
	border: 1px solid #000;
	margin-left: 15px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
}

.pr-line-1 button:hover,.pr-line-1 button:focus{
	opacity: 0.75;
	color: #000;
}



.pr-line-2{
	margin-top: 5px;
	font-size: 18px;
}

.pr-line-2 a{
	color: #000;
	text-decoration: none;
	margin-left: 20px;
	font-weight: bold;
	padding: 17px;
}

.pr-line-2 a:hover,.pr-line-2 a:focus{
	color: #000;
}

.pr-line-3{
	max-width: 200px;
	max-height: 100%;
	overflow-y: auto;
}

.profile-navigation{
	background-color: #fff;
	padding: 10px;
	margin-top: 2rem;
}

.profile-nav{
	border-top: 1px solid #dacdcd;
	list-style: none;
	margin-top: 2rem;
}

.profile-nav a{
	color: #000;
	text-decoration: none;
	padding: 10px 15px;
	font-weight: bold;
	margin-left: 7rem;
    margin-right: 5rem;
}

a.pn-active{
	border-top: 1px solid #000;
}

.profile-nav a:hover,.profile-nav a:focus{
	color: #000;
	border-top: 1px solid #000;
}

/*.post-container{
	width: 300px;
}*/

.posts{
	background-color: #fff;
    padding: 10px;
}

.portfolio .portfolio-item {
  margin-bottom: 30px;
  background-color: #fff;
  padding: 10px;
  width: 352px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000;
    background-color: #0d6efd00;
    border-top: 1px solid #000;
    border-radius: 0;
}

.profile-nav a:hover, .profile-nav a:focus {
    color: #000;
    border-radius: 0;
    border-top: 1px solid #000;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}
.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #444444;
  margin-bottom: 5px;
  /*transition: all 0.3s ease-in-out;*/
  border-radius: 3px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
  color: #fff;
  background: #3b4ef8;
}
.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}
.portfolio .portfolio-wrap {
  /*transition: 0.3s;*/
  position: relative;
  overflow: hidden;
  height: 350px;
  max-height: 350px;
  z-index: 1;
  border: 1px solid #d5d5d5;
}
.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(45, 64, 95, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /*transition: all ease-in-out 0.3s;*/
  z-index: 2;
  opacity: 0;
}
.portfolio .portfolio-wrap img {
  transition: all ease-in-out 0.3s;
  width: 100%;
}
.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
}

.portfolio-info a{
	font-size: 20px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    margin: auto;
    padding: 10px 15px;
    border: 1px solid #fff;
}

a.vid-link{
	font-size: 20px;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    margin: 0px 0 67px 100px;
    padding: 10px 15px;
    border: 1px solid #fff;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-style: italic;
}
.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  margin: 0 5px 0 0;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #9da7fc;
}
.portfolio .portfolio-wrap:hover::before {
  opacity: 1;
}
.portfolio .portfolio-wrap:hover img {
  transform: scale(1.2);
}
.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.profile-settings-icon-popup{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 3;
}

.prip-content{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	padding: 10px;
	width: 500px;
	border-radius: 10px;
}

.prip-content ul{
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.prip-content ul li{
	padding: 25px;
	text-align: center;
}

.prip-content ul li a{
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

.prip-content ul li:hover,.prip-content ul li:focus{
	background-color: #f5f5f5;
}

a.prip-close{
	color: #000;
	text-decoration: none;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
}

a.prip-close:hover,a.prip-close:focus{
	color: #000;
}

.profile-post-popup{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 3;
}

.ppp-content{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #fff;
	padding: 10px;
	width: 850px;
	border-radius: 10px;
}

.ppp-header{
	border: 1px solid #b4b2b2;
	padding: 10px;
}

.ppp-header a{
	text-decoration: none;
	color: #000;
	font-weight: bold;
}

.ppp-header a:hover,.ppp-header a:focus{
	color: #000;
}

.ppp-header a img{
	width: 50px;
}

a.right-ppp-header{
	float: right;
	color: #000;
	text-decoration: none;
	font-size: 33px;
}
.ppp-cmnt-body{
	height: 345px;
	border-left: 1px solid #b4b2b2;
	border-right: 1px solid #b4b2b2;
	padding: 10px;
	padding-bottom: 0;
}

.ppp-cmnt-div{
	margin-top: 1rem;
}

.ppp-cmnt-div a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

.ppp-cmnt-div a:hover,.a.ppp-cmnt-div a:focus{
	color: #000;
}

.ppp-cmnt-div a img{
	width: 50px;
}

.ppp-cmnt-div p{
	float: right;
    position: relative;
    top: -4px;
    right: 156px;
    margin-left: 0px;
}

.ppp-cmnt-footer{
	border: 1px solid #b4b2b2;
	position: fixed;
	bottom: 10px;
	width: 47%;
	padding: 10px;
}

.ppp-cmnt-footer-1 a{
	text-decoration: none;
	color: #000;
	font-size: 27px;
	margin-right: 10px;
}

.ppp-cmnt-footer-1 a:hover,.ppp-cmnt-footer-1 a:focus{
	color: #9a9898;
}

.ppp-cmnt-footer-2 a{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

.ppp-cmnt-footer-2 a:hover,.ppp-cmnt-footer-2 a:focus{
	color: #000;
}

.ppp-cmnt-footer-2 p{
	color: #a9a9a9;
    font-weight: bold;
    font-size: 13px;
}

.ppp-cmnt-footer-3 input{
	padding: 4px 10px;
    border: 1px transparent;
    background: #eeeaea;
    width: 80%;
    border-radius: 3px;
}

.ppp-cmnt-footer-3 button{
	color: #000;
    border: 3px solid #000000;
    background: #2369f600;
    padding: 2px 15px;
    border-radius: 8px;
    float: right;
    font-weight: 600;
}

/*NOTIFICATIONS-PAGE*/

.notify-usr{
	background-color: #fff;
	padding: 10px;
	border-radius: 5px;
	margin-top: 3px;
}

.notify-usr h4{
	color: #838080;
    font-size: 18px;
}

.new-notify{
	background-color: #f2f2f2;
    padding: 10px 10px;
    margin-top: 10px;
    border-radius: 7px;
    min-height: 60px;
}

.notify-usr a{
	text-decoration: none;
	color: #000;
}

span.msg{
	font-color: #000;
}

a.view-d{
    color: #0739fa;
}

.my-noti-pull{
    display: flex;
    justify-content: space-evenly;
    width: 30%;
    align-items: center;
    margin-top: 4px;
}


/*ADD STORY POST*/

.add-story{
    background-color: #fff;
    box-shadow: 1px 2px 4px 2px #abaaaa;
    text-align: center;
}


.add-story h1{
    margin-left: 10px;
}

.add-story-form input{
    background: #fddada;
    padding: 10px 25px;
    margin-left: 10px;
    border-radius: 5px;
}

.add-story-canvas{
    margin-left: 35px;
    border: 1px solid #9e9e9e;
    width: 500px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-story-filters{
    width: 85%;
}

.add-story-filters input{
    width: 100%;
}

.add-story-btn{
    background-color: transparent;
    color: #000;
    border: 2px solid #000;
    padding: 5px 15px;
}

.add-story-footer {
    text-align: center;
    margin-right: 3rem;
    margin-bottom: 1rem;
}

.add-story-btn:hover,.add-story-btn:focus{
    color: #fff;
    background-color: #000;
}

img.y-story-pro{
    width: 50px;
    height: 50px;
    border-radius: 50rem;
}

/*SEE-ALL PAGE*/

.see-all-container{
    background-color: #fff;
    box-shadow: 1px 2px 4px 2px #abaaaa;
    width: 700px;
    height: 500px;
    padding: 10px;
    padding: 15px;
    overflow-y: auto;
}

.see-all-items{
    background-color: #fff;
    padding: 5px 15px;
    margin-bottom: 1rem;
}

.see-all-container h2 {
    margin-bottom: 25px;
    text-align: center;
    border-bottom: 1px solid #bebbbb;
}

/*ADD POST*/

.addpost{
    background-color: #fff;
    box-shadow: 1px 2px 4px 2px #abaaaa;
    padding: 25px;
    height: 487px;
    overflow-y: auto;
}

.addpost h1{
    text-align: center;
}

input.addpost-input{
    padding: 5px 15px;
    background-color: #f4f0f0;
    border: 1px solid #c7c4c4;
    border-radius: 5px;
}

.addpost-img-upl{
    background-color: #fee3e3;
    padding: 10px;
}

.addpost-form{
    margin-bottom: 1rem;
}

.alert-danger{
    color: #ff0017;
    background-color: transparent;
    border: 1px transparent;
}

.addpost-total-form{
    text-align: center;
}

.addpost-btn{
    color: #000;
    background-color: transparent;
    border: 2px solid #000;
    padding: 5px 15px;
}

.addpost-btn:hover,.addpost-btn:focus{
    color: #fff;
    background-color: #000;
}

.Range-sliders{
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.Range-sliders input{
    width: 190px;
    margin: 0 5px;
}

.addpost-filters button{
    color: #234420;
    background-color: transparent;
    border: 2px solid #79af07;
    border-radius: 2px;
    padding: 5px 20px;
    margin-bottom: 10px;
    width: 150px;
    height: 50px;
}

.addpost-filters button:hover,.addpost-filters button:focus,.addpost-filters button:active{
    background-color: #1b9b07;
    color: #fff;
    border: 2px solid #06711c;
    outline: transparent;
}

button.addpost-submit{
    color: #000;
    background-color: transparent;
    border: 2px solid #000;
    padding: 5px 15px;
    margin-right: 1rem;
}

button.addpost-submit:hover,button.addpost-submit:focus,button.addpost-submit:active{
    color: #fff;
    background-color: #000;
}



/*VIEW_POST*/

.vp-container{
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    height: 540px;
    overflow-y: auto;
    scrollbar-width: none;
}

.vp-img-container{
    padding: 10px;
}

.vp-footer-1{
    padding: 10px;
    border: 1px solid #e0dddd;
}

.right-vp-content{
    border: 1px solid #e9d9d9;
    padding: 10px;
    height: 510px;
}

.vp-body a{
    color: #000;
    font-size: 32px;
    text-decoration: none;
    margin-right: 15px;
}

.vp-cmnts-block h1{
    font-size: 22px;
    color: #838080;
    margin-top: 10px;
}

.vp-cmnts {
    height: 260px;
    overflow-y: auto;
    border: 1px solid #e5e1e1;
    padding: 10px;
}

.form-group.vp-input{
    margin-top: 1rem;
}

.vp-input input{
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #000;
    width: 80%;
}

.vp-reply input{
    padding: 5px 10px;
    width: 100%;
}

.display-comment .reply{
    background-color: #f6f6f6;
    padding: 10px;
    border-bottom: 1px transparent;
}

.vp-input button{
    padding: 5px 30px !important;
}

.display-comment{
    border-bottom: 1px solid #e5e1e1;
}

.display-comment strong{
    color: #838080;
    font-size: 15px;
}

.display-comment p{
    max-width: 70%;
}

.display-comment a{
    font-size: 14px;
    color: #000;
    float: right;
    position: relative;
    bottom: 40px;
}

/*FOLLOW-VIEW*/

img.pl-img{
    width: 150px;
    height: 150px;
    position: relative;
    bottom: 15px;
}

.follow-container{
    width: 500px;
    max-height: 540px;
    background-color: #fff;
}

.follow-header{
    text-align: center;
    padding: 10px 10px 0 10px;
}

.follow-header img{
    width: 75px;
    border-radius: 50rem;
}

.follow-body{
    width: 100%;
    height: 254px;
    overflow-y: auto;
}

.follow-body ul{
    list-style: none;
    padding-left: unset;
}

.follow-body ul li{
    border-bottom: 1px solid #e1dada;
    padding: 10px;
}

.follow-body ul li:hover,.follow-body ul li:focus{
    border-color: transparent;
    background-color: #f5f5f5;
}

.follow-body ul li a img{
    width: 50px;
    border-radius: 50rem;
}

.follow-body ul li a{
    padding: 10px 15px;
    text-decoration: none;
    color: #000;
}

.follow-body ul li button{
    background-color: #fff;
    border: 3px solid #000;
    padding: 5px 15px;
    float: right;
    position: relative;
    top: 7px;
    right: 10px;
    border-radius: 5px;
}

.follow-body ul li button:hover,.follow-body ul li button:focus{
    background-color: #7f7c7c;
    color: #fff;
}


.follow-container:hover,.follow-container:focus{
    box-shadow: 1px 4px 10px 4px #d6d6d6;
}

a.follow-user-link{
    text-decoration: none;
    color: #000;
}

img.follow-user{
    width: 100px;
    height: 100px;
}

/*REGISTRATION*/

.register-container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: auto;
    background-color: #fff;
    padding: 10px;
    text-align: center;
}

.register-content{
    text-align: center;
}

.left-reg{
    border: 1px solid #cac1c1;
    padding: 15px;
}

.right-reg{
    border-right: 1px solid #cac1c1;
    border-top: 1px solid #cac1c1;
    border-bottom: 1px solid #cac1c1;
    padding: 15px;
}

.reg-input-content{
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

input.reg-input{
    padding: 10px;
    background-color: #fdf2fd;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    width: 80%;
}

textarea.reg-input{
    padding: 2px;
    background-color: #fdf2fd;
    border: 1px solid #c2c2c2;
    border-radius: 3px;
    width: 80%;
}

select.reg-input {
    background-color: #fdf5f0;
    padding: 6px 5px;
    border-radius: 6px;
    width: 300px;
    margin-right: 13rem;
    float: right;
    border: 1px solid #b8b8b8;
}

.reg-label{
    font-size: 30px;
    position: relative;
    top: 5px;
    right: 10px;
}

.reg-bio-label{
    font-size: 30px;
    position: relative;
    bottom: 12px;
    right: 10px;
}

button.reg-btn {
    color: #000;
    background: transparent;
    padding: 5px 15px;
    margin-top: 10px;
    border: 2px solid #000;
    border-radius: 4px;
    font-weight: 600;
}

button.reg-btn:hover,button.reg-btn:focus{
    color: #fff;
    background-color: #000;
}

/*SAVED PAGE*/

.saved{
    background-color: #fff;
    padding: 10px;
    min-height: 487px;
    overflow-y: auto;
}

.saved-header{
    text-align: center;
}

.saved-header h1{
    color: #667e88;
}

/*FOOTER*/

.footer{
    text-align: center;
    background-color: #fff;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
}

.footer a{
    text-decoration: none;
    color: #055678;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.footer a:hover,.footer a:focus{
    text-decoration: underline;
}

.footer p{
    margin-top: 1rem;
}