#socialnetwork {
  --salbei:  #B2C3BC;
  --salbei_2: #6D8E7F;
  --salbei_hell: #BFCEC7;
  --mittel: #6D8E7F;  
  --flasche: #0B3522;
}

/* MAIN PAGE PROFIL */
#socialnetwork {
  width:800px;
  height:auto;
  padding:5px;
  box-sizing:border-box;
  background: var(--salbei);
	color:var(--flasche);
}

#socialnetwork b {
  color: var(--flasche);
  letter-spacing: 1px;
}

#socialnetwork a:link, #socialnetwork a:visited, #socialnetwork a:hover, #socialnetwork a:active {
	color: var(--flasche);
}

.sn_username a:link, .sn_username a:visited, .sn_username a:hover, .sn_username a:active {
	color: var(--salbei_hell) !important;
}


        #socialnetwork fieldset,
        .ucp_social fieldset {
            padding: 12px;
            border: 1px solid #ddd;
            margin: 0;
        }
        
       #socialnetwork textarea {
            background-color: var(--salbei_hell);
            color: var(--flasche);
        }
        
        #socialnetwork button, #socialnetwork input.button {
			color:unset;
			-webkit-appearance: none;
        }

  #socialnetwork  input.sn_send, #socialnetwork input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]){
            margin-top: 3px;
            padding: 4px;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 5px;
            border-radius: 9px;
            border: 1px solid var(--mittel);
		background: var(--salbei_hell);
        }


#socialnetwork input:is([type="button"], [type="submit"], [type="reset"]), input[type="file"]::file-selector-button, #socialnetwork button {
	border: 1px solid var(--mittel);
	background: var(--salbei_hell);
	border-radius: 9px;
}
	
        
       #socialnetwork legend {
            width: auto;
            display: block;
            max-width: 100%;
            padding: 0;
            margin-bottom: .5rem;
            font-size: 1.5rem;
            line-height: inherit;
            color: inherit;
            white-space: normal;
        }

.sn_line {
  width: 150px; 
  height: 5px; 
  background: var(--flasche);
}

/* Scrollbalken */
#socialnetwork ::-webkit-scrollbar {
  height: 7px;
  width:7px;
}

/* Track */
#socialnetwork ::-webkit-scrollbar-track {
  background: var(--salbei_hell);
}

/* Handle */
#socialnetwork ::-webkit-scrollbar-thumb {
  background: var(--flasche);
}

/* Headerbereich */
#sn_coverbild {
  width: 750px;
}

.sn_profilbild {
  border-radius:50%;
  margin-top:-75px;
  margin-left:-550px;
  border:10px solid var(--mittel);
}

#sn_profileinfo {
  width: 550px;
  margin-top:-90px;
  margin-right:25px;
  float:right;
  text-align:justify;
  box-sizing:border-box;
  padding:10px;
}

.sn_username {
  border-radius:10px;
  background: var(--flasche);
  padding:5px;
  color: var(--salbei);
  font-weight:bold;
}

.sn_usertext {
  border-radius:10px;
  background: var(--salbei_2);
  padding:5px;
  margin-top:10px;
  color: var(--salbei_hell);
  text-align:justify;
}

/* Friends */
.sn_friends {
  display:flex;
  justify-content:flex-start;
  align-items:center;
  flex-wrap:wrap;
  padding:20px;
  box-sizing:border-box;
  gap:5px;
  width:90%;
}

.sn_friends_headline {
  color: var(--flasche);
  font-weight: bold;
  letter-spacing:1px;
  font-size:13px;
}

.sn_friendscroll {
  display:flex;
  gap:10px;
  padding-bottom:10px;
  width:100%;
  overflow-x: auto;
  text-align:center;
  font-size:10px;
  color: var(--flasche);
  font-weight:bold;
}

.sn_friendchild {
}

.sn_friendchild > img {
  border-radius:50%;
  width:65px;
  height:65px;
}

/* Postbit */
.sn_postform {
	margin:0px 40px;
}

.sn_postbit {
  display: flex;
  justify-content: flex-start;
  align-content: flex-start;
	flex-wrap:wrap;
  gap:5px 10px;
  width:730px;
}

.sn_postbit > .sn_post {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  gap:5px;
	width:350px;
}

.sn_postbit > .sn_post > .sn_postimg {
  width: 350px;
	height:350px;
}

.sn_postbit > .sn_post > .sn_postimg > img {
  border-radius:10px;
  height:350px;
	width:350px;
}

/* Likes & Comments */
.sn_postbit > .sn_post > .sn_likes {
  margin-left:10px;
  letter-spacing:1px;
  align-self: flex-start;
}

.sn_postbit > .sn_post > .sn_comments {
  margin-right:10px;
  letter-spacing:1px;
  text-align:right;
  align-self: flex-start;
}

/* Tooltip container */
.sn_tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.sn_tooltip .sn_tooltiptext {
  visibility: hidden;
  width: 80px;
  background-color: var(--salbei_hell);
	font-weight:normal !important;
	font-size:8px;
  padding: 2px 5px;
  border-radius: 6px;
	border-bottom: 1px dotted var(--flasche); /*  If you want dots under the hoverable text */
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
	top: 100%;	
  left: 50%; 	
	margin-left:-60%;
}

/* Show the tooltip text when you mouse over the tooltip container */
.sn_tooltip:hover .sn_tooltiptext {
  visibility: visible;
}


/* Beschreibung & Postautor */
.sn_postbit > .sn_post > .sn_postauthor {
  width:10%;
  align-self:center;
}

.sn_postbit > .sn_post > .sn_postauthor > img {
  border-radius:50%;
  width:50px;
  height:50px;
  border:5px solid var(--salbei);
}

.sn_postbit > .sn_post > .sn_authorcomment {
  font-size:10px;
  min-height:20px;
  max-height:60px;
  width:83%;
  overflow:auto;
  padding: 0px 5px;
  align-self:center;
  box-sizing:border-box;
}

.sn_postbit > .sn_post > .sn_authorcomment i {
  color: var(--flasche);
}

 input.editDelete {
            border: none;
            background: none;
            font-size: 0.9em;
            padding: 0px;
        }
        
      .editDelete {
            font-size: 0.9em;
            background: none;
            border: 0;
            padding: 0;
        }
        
        a.editDelete {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            text-decoration: none;
            color: initial;
			padding:2px;
        }

/* Kommentare Toggle Box */
.sn_css-toggle-switch { display: none; }
.sn_css-toggle-switch         + label:after { font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f086"; }
.sn_css-toggle-switch:checked + label:after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f086";}
.sn_css-toggle-switch:checked ~ .sn_css-toggle-content  { opacity: 0; transition:0.5s;}

.sn_css-toggle-switch + label {
  cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.sn_css-toggle-content {
  height:200px;
  overflow:auto;
  width:350px;
  box-sizing:border-box;
  padding:5px;
  background:var(--salbei);
  position:relative;
  margin-top:-227px;
  margin-right:-10px;
  color:var(--flasche);
  text-align:justify;
  border-bottom-right-radius:10px;
  border-bottom-left-radius:10px;
  border-top:2px solid var(--flasche);
  transition:0.5s;
  opacity:1;
}

.sn_css-toggle-content::-webkit-scrollbar {
  display: none;
}

.sn_comment {
  display:flex;
  width:100%;
  align-items:center;
  line-height:100%;
}

.sn_comment  > .sn_commentauthor > img, .sn_answerFormProfilbild {
  border-radius:50%;
  width:30px;
  height:30px;
  border:2px solid var(--mittel);
}

.sn_comment > .sn_commentcomment {
  font-size:10px;
  min-height:20px;
  max-height:40px;
  width:90%;
  overflow:auto;
  padding: 0px 5px;
  align-self:center;
  box-sizing:border-box;
  line-height:1.4;
  margin:3px 0px;
}

.sn_comment > .sn_commentcomment b {
  letter-spacing:0px !important;
}


/*

sn main page

be sure, that accountswitcher attached accounts are working

        ul.trow1 {
            z-index: 10;
        }
        .socialmain.container{
            color:#000;
        }
        
        .socialmain .tborder {
            border: 0px;
            border-radius: 8px;
        }
        
        .socialmain .trow1 {
            background: #f5f5f5;
        }
        
    
        
        
      title section

        .sn_titel {
            width: 100%;
            border: 0px #b1b1b1 solid;
            background-repeat: no-repeat !important;
            background-position: center 0px !important;
        }
        
        .sn_profil {
            background-color: #b1b1b1;
            margin-left: 70px;
            margin-top: -100px;
            margin-right: 10px;
            border-radius: 8px;
            float: left;
        }
        
        .sn_profil img {
            padding: 5px;
        }
        
        .sn_username {
            padding-left: 10px;
        }
        
        .sn_down_section {
            display: flex;
            flex-wrap: wrap;
        }
        
        .sn_logo{
            margin:auto;
            text-align:center;
        }
        
        info and friendsection

        .sn_leftBox {
            width: 30%;
        }
        
        .sn_memInfo {
            background-color: #b1b1b1;
            margin: 10px;
            padding: 10px;
            font-size: 12px;
            height: min-content;
            border-radius: 8px;
        }
        
        .sn_memInfo img {
            display: block;
            margin: auto;
            padding-top: 10px;
        }
        
        sn_tit {
            font-weight: bold;
        }
        
        .sn_links {
            background-color: #b1b1b1;
            margin: 10px;
            padding: 10px;
            font-size: 12px;
            height: min-content;
            border-radius: 8px;
        }
        
       
        friendbox

        h1.friends {
            margin: auto;
            text-align: center;
            font-size: 2.0em;
        }
        
        .sn_friend {
            padding: 5px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .sn_friend a {
            padding-left: 5px;
        }
        
        span.allreadyAsked {
            display: block;
            text-align: center;
            padding: 10px;
        }
        
        span#friendAddRemove {
            display: block;
            text-align: center;
            font-size: 2em;
            padding: 10px;
        }
        
        
        post view

        .sn_postBox {
            display: flex;
        }
        
        .sn_rightBox {
            margin: auto;
            width: 70%;
        }
        
        .sn_post {
            padding-left: 10px;
        }
        
        .sn_rechts {
            background-color: #b1b1b1;
            margin: 10px;
            padding: 10px;
            border-radius: 8px;
        }
        
        .sn_postProfilbild {
            border-radius: 8px;
            width: 50px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
        }
        
        .sn_likes {
            text-align: right;
            border-bottom: 1px solid #ddd;
            font-size: 0.8em;
            margin-top: -20px;
            padding-bottom: 6px;
        }
        
        .sn_likes i.fas.fa-heart,
        .sn_likes i.far.fa-heart {
            font-size: 1.5em;
        }
        
  
        
        image pop up

       
        
        anworten 

        .sn_answer {
            margin: 11px 0px 10px 0px;
            padding-bottom: 5px;
            padding-left: 20px;
        }
        
        .sn_answerFormProfilbild,
        .sn_ansProfilbild {
            float: left;
            margin-right: 10px;
            width: 35px;
            -webkit-border-radius: 150%;
            -moz-border-radius: 100%;
        }
        
        .sn_answer_form {
            padding-top: 5px;
        }
        
        .sn_ansDate {
            font-size: 0.8em;
        }
*/
        
        /*UCP*/
        
        .ucp_social legend {
            font-weight: bold;
        }
        
        .ucp_social label,
        .modcp_social label {
            display: block;
            width: 120px;
            float: left;
            clear: left;
        }
        
        .ucp_social input {
            margin: 5px;
        }
        
        .ucp_smallinfo {
            font-size: 0.7em;
        }
        
        .ucp_social legend {
            width: auto;
        }
        
        /*newsfeed
        .pagination .pages {
            padding: 3px;
        }
        
        .gotolink {
            display: block;
            text-align: right;
            margin-top: -10px;
        }
        
        .newsfeed_links h1 {
            text-align: right;
            font-size: 1.5em;
        }
        
        .sn_postName {
            display: block;
            font-weight: bold;
        }
        
        .sn_postDate {
            font-size: 0.8em;
        }
        
        .sn_answer_form {
            margin-top: 10px;
        }
        
        .sn_rechts hr {
            background-color: #ddd;
            color: #ddd;
            height: 1px;
            border: 0px;
        }*/