/*

Urheberechtshinweis:

Alle Inhalte dieser Internetpräsenz, insbesondere Programmcode, Texte, Fotos und Grafiken, sind urheberrechtlich geschützt.
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Schranken des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Urhebers.
Sollten Sie Inhalte verwenden wollen, wenden Sie sich bitte an den Seitenbetreiber.
Wer gegen das Urheberrecht verstößt, macht sich strafbar und muss mit einer kostenpflichtigen Abmahnung und Forderungen auf Schadensersatz rechnen. 

Rechteinhaber: ET-Host.de

*/

@import url('https://fonts.googleapis.com/css2?family=Grape+Nuts&family=Inspiration&family=Raleway:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
/*
Hier werden Textfarbe am Chatstart und Systemtextfarbe angegeben.
Die Parameter werden mit PHO ausgelesen, deshalb bitte die Syntaxis beachten!
---------------------
Textfarbe:000000
Systemfarbe:666666
---------------------    
*/

/* for index.php - Login */
#body{
	font-family: 'sans-serif', sans-serif;
	/* font-size: 20px; */
	color: #000;
background:#90A3C3;
background-image: url('./background-homepage.jpg');
background-size:cover !important;
background-repeat:no-repeat;

	} 


.loginbox {
margin:5% auto;
margin-bottom:10px;
border-radius:15px;
background:#90A3C3;
width:500px;
padding:10px;
border:2px solid black;
opacity:0.9;
text-align:center;
word-wrap: break-word;
}
.loginbox-title {
text-align:center;
font-weight:bold;
}
.footer {
margin:0 auto;
text-align:center;
font-size:16px;
}


#submit_button {
background: #FECC6B !important;
color:black !important;
border:0;
}


/* for chat.php*/
html {
	height: 100%;
	overflow: hidden;
}
table{
font-size: 12px;
}


#body_id{
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #90A3C3;
}
#rahmen_um_alles{
	margin: 8px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 16px);
	box-sizing: border-box;
	min-height: 0;
	overflow: hidden;
}
#kopf{
	font-size: 12px;
	font-family: 'Raleway', sans-serif;
	font-style: normal;
	padding: 8px 12px;
	color:#94BC;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
}
#kopf_left,
#kopf_right {
	min-width: 0;
}
#kopf_right {
	text-align: right;
	white-space: nowrap;
	color: #fff;
}
#kopf_right b {
	color: #fff;
}
.kopf-brand {
	font-weight: bold;
}
#chat_main_row {
	display: flex;
	flex: 1 1 0;
	align-items: stretch;
	min-height: 0;
	overflow: hidden;
}
#chat_center_col {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
#kopf a {
     color: #fff;
     text-decoration: none;
 }

.user_in_onlinelist {
margin-top:5px;
cursor: default;
}
.user_in_onlinelist:hover {
background:#EEEEEE;
cursor: pointer;
}

/* Cursor styles for online list */
#onlinelist {
	padding: 5px;
	background-color: #fff;
	font-size: 12px;
	font-family:  sans-serif; 
	font-style: normal;
	float: none;
	flex: 0 0 220px;
	width: 220px;
	max-width: 35vw;
	border: 1px solid black;
	min-height: 0;
	align-self: stretch;
	overflow-x: hidden;
	overflow-y: auto;
	border-radius:10px;
	color: #000000;
	cursor: default;
	box-sizing: border-box;
	scrollbar-gutter: auto;
}

#onlinelist div {
	cursor: default;
}

.online-user-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.online-user-left {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.online-user-right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	flex-shrink: 0;
	white-space: nowrap;
	margin-left: 4px;
	gap: 2px;
}

.online-user-right img,
.online-user-left img {
	vertical-align: middle;
	flex-shrink: 0;
}

#onlinelist span {
	cursor: default;
}

#onlinelist div:hover,
#onlinelist span:hover {
	cursor: pointer;
}

* html #splitpane {
	margin-left: -2px;
}
#splitpane{
	background-image:url('../../img/splitpane.png');
	background-repeat:no-repeat;
 	background-position:center;
	font-size: 8px;
	font-family: 'Raleway', sans-serif;  
	font-style: normal;
	float: none;
	flex: 0 0 8px;
	color:white;
	width: 8px;
	margin: 0 1px;
	height: auto;
	overflow: hidden;
	cursor:e-resize;
	align-self: stretch;
}

#chatinhalt{
	padding: 5px;
	background-color: #E7ECEF;
    background-repeat: no-repeat;
     background-position: right bottom;
	border-radius:5px 0 0 5px;
	box-shadow:0 0 2px rgba(0,0,0,0.5);
	font-size: 12px;
	font-family: sans-serif;
	font-style: normal;
	position:relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
}

#form{
	background-color: #f1f1f1;
	font-size: 12px;
	font-family: sans-serif;  
	font-style: normal;
	clear: both;
	border: 1px solid black;
	margin-top: 6px;
	padding: 8px 10px;
    min-height: 50px;
	height: auto;
	border-radius:10px;
	color: #000000;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
	box-sizing: border-box;
}
#message_form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	width: 100%;
	flex-wrap: wrap;
}
.linkregeln a   {
    text-decoration: none;
    color: #77ff77;
}







#form_left{
	position:relative;
	float: none;
	flex: 0 0 auto;
	width: auto;
	max-width: 50%;
	padding-left: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
#form_right{
	padding: 0;
	position:relative;
	float: none;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}
#privat_anzeige {
	margin-bottom: 2px;
}
   #footer-cookie * {
      box-sizing: border-box;
    }

    #footer-cookie {
      display: none;
      position: fixed;
      bottom:0;
      left: 0px;
      width: 100%;
      height: 60px;
      padding-left: 30px;
      padding-right: 30px;
      line-height: 60px;
      background: #0c549b;
      color: #fff;
text-align:center;
    }
    
    #footer-cookie a {
      color: #fff;
    }

    #footer-cookie #description {

    }

    #footer-cookie #accept {
    margin-left:20px;

    }

    #footer-cookie #accept a {
      border: 1px solid #fff;
      padding: 5px 10px;
      text-decoration: none;
    }

    @media (max-width: 1200px) {
      #footer-cookie {
        padding-top: 30px;
        padding-bottom: 30px;
        line-height: inherit;
        height: auto;
      }

      #footer-cookie #description {
        width: 100%;
      }

      #footer-cookie #accept {
        width: 100%;
        margin-top: 15px;
      }

      #footer-cookie #accept a {
        width: 100%;
        display: block;
        text-align: center;
      }
    }
#message{
	max-height: 30px;
	width: 400px;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
	top: 0;
}

#privat_messages{
 position: absolute;
 top: 100px;
 left: 100px;
 background-color: #cccccc;
 border: 1px solid black;
 padding: 5px;
}

.rooms{
 background-color: #94A4C5;   
 color: #C1C1CE;
 border: 1px solid black;
 padding: 3px;
padding-left:5px;
padding-right:5px;
 margin-bottom: 2px;
 cursor:pointer;
border-radius:10px;
color:white;
margin-top:3px;

}
.rooms_not_allowed{
 background-color: #CC3333;
 border: 1px solid #777777;
 color: white;
 padding: 3px;
padding-left:5px;
padding-right:5px;

 margin-bottom: 2px;
 cursor:pointer;
border-radius:10px;
margin-top:3px;

}
.room-list-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 6px;
}
.room-list-label {
 flex: 1;
 min-width: 0;
}
.room-list-icon-end {
 flex-shrink: 0;
 margin-left: auto;
 display: flex;
 align-items: center;
}

.privat_ausg_an{
background:#FFEEEE;
border:1px solid #FF7777;
border-radius:10px;
padding:5px 5px 5px 5px;
margin-bottom:3px;
display:inline-block;
	
}
.privat_ausg_von{
 background-color: #FBFCF4;
 border: 1px solid #77ff77;
border-radius:10px;
padding:5px 5px 5px 5px;
margin-bottom:3px;
display:inline-block;

}


#close_privat{
	cursor:pointer;
	background-color: white;
	font-size: 10px;
	font-family: 'Raleway', sans-serif;  
	font-style: normal;
	border: 1px solid black;
	padding-left:4px;
	padding-right:4px;
}
#privat_anzeige{
	padding-bottom: 3px;
	height: 18px;
display:none;
}
#privat_modus{
	font-size: 10px;
}
.privat_mesages_window{
	height: 165px; 
	padding:3px; 
	border: 1px solid #bbbbbb; 
	overflow: auto;
}
.privat_win_button{
	cursor:pointer; 
	font-weight:bold;
	border: 1px solid #bbbbbb;
	width: 190px;
	margin-top: 3px;
	background-color: #e1e1ff;
	text-align: center;
}

.colorpick{
     font-size: 10px;
     cursor:pointer;
     border: 1px solid black;
     width: 100%;
}
.dialog{
	font-size: 8px;
	font-family: 'Raleway', sans-serif;  
	font-style: normal;
	position: relative;
}

.img_button{
	cursor:pointer;  
}   


.private_message_field{
	width:300px;
	border: 1px solid #666666;
	margin-top: 2px;
	background-color: #f7f7ff;
}

a:link {color:#000; font-size: 16px; text-decoration:none;}
a:visited {	color:#000; text-decoration:none;}
a:active {color:#000; text-decoration:none;}
a:hover {color:#000; text-decoration:none;}

/*------------ for history -----------------------*/
.kopf{ background-color:#dddddd; }
.gerade{ background-color:#d5d5ff; }
.ungerade{ background-color:#eeeeff; }
.privat_von{ background-color:#ddffdd; }
.privat_nach{ background-color:#ffdddd; }

/*------------ for adminbereich -----------------------*/
#adminbereich_body{
background-color:transparent;
color:black;
font-size: 12px;
	font-family: sans-serif;  
}
#adminbereich_body a:link {	font-family: sans-serif; color:#000099; text-decoration:underline;}
#adminbereich_body a:visited {	font-family: sans-serif; color:#000099; text-decoration:underline;}
#adminbereich_body a:active {	font-family:sans-serif; color:#000099; text-decoration:underline;}
#adminbereich_body a:hover {	font-family: sans-serif;  color:#000099; text-decoration:none;}



/*---------------------------- for Window -------------------------*/
.overlay_etchat_black {
	background-color: #ffffff;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}

.etchat_black_nw {
 border-left: 1px solid #666666;
 border-top: 1px solid #666666;
 border-bottom: 1px solid #666666;
  width:10px;
  height:18px;
  background-color: #94A4C5;
}

.etchat_black_n {
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
  background-color: #94A4C5;
}

.etchat_black_ne {
 border-right: 1px solid #666666;
 border-top: 1px solid #666666;
 border-bottom: 1px solid #666666;
  width:10px;
  height:18px;
  background-color: #94A4C5;

}

.etchat_black_w {
 border-left: 1px solid #666666;
 width:10px;
  background-color: #f1f1f1;
}

.etchat_black_e {
  border-right: 1px solid #666666;
  width:10px;
  background-color: #f1f1f1;
}

.etchat_black_sw {
 border-left: 1px solid #666666;
 border-bottom: 1px solid #666666;
  width:10px;
  height:3px;
  background-color: #f1f1f1;
}

.etchat_black_s  {
height:3px;
border-bottom: 1px solid #666666;
background-color: #f1f1f1;
}

.etchat_black_se, .etchat_black_sizer {
 border-right: 1px solid #666666;
 border-bottom: 1px solid #666666;
  width:10px;
  height:3px;
  background-color: #f1f1f1;
}

.etchat_black_sizer {
	cursor:se-resize;
}

.etchat_black_close {
	width: 23px;
	height: 23px;
	background: transparent url(button-close-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:11px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_minimize {
	width: 23px;
	height: 23px;
	background: transparent url(button-min-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:55px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_maximize {
	width: 23px;
	height: 23px;
	background: transparent url(button-max-focus.gif) no-repeat 0 0;
	position:absolute;
	top:0px;
	right:33px;
	cursor:pointer;
	z-index:1000;
}

.etchat_black_title {
	float:left;
	height:14px;
	font-family: Tahoma, Arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-align:left;
	margin-top:2px;
	width:100%;
	color:#ffffff;
}

.etchat_black_content {
	padding-top:5px;
	overflow:auto;
	color: #000000;
	font-family: Arial, sans-serif;
	font-size: 12px;
	background:#f1f1f1;
}  
.no-scrolling {
overflow:hidden !important;
}

.username-color-teamleitung {
color: red !important;
}

.username-color-schulungsmod {
color: red !important;
}

.username-color-mod {
color: red !important;
}

.username-color-gastmod {
color: blue !important;
}

.username-color-jugendschutz-mod {
color: red !important;
}

.username-color-invisible {
color: red !important;
}

.public_message {
background: transparent !important;
border: 0 !important;
}

.private_message {
background: transparent !important;
border: 0 !important;
}

#onlinelist {
background: #E7ECEF !important;
}

.privat_mesages_window {
background: #E7ECEF !important;
}

#form {
background:#E7ECEF !important;
}

        

/* Smartphones und Tablets (iPad, iPhone 8, Amazon-Kindle, usw.) by catraxx */

@media (max-width:799px) {

body {
height:100vh;
}

.loginbox {
margin:0 !important;
border:1px;
width:auto;
border-radius:0px;
opacity:1;
background: rgba(147, 167, 199, .25);
height:100vh;

}

}

/* ========================================
   Enhanced Admin Interface Styles
   ======================================== */

/* Enhanced Admin Index Styles */
.admin-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 25px;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #4a5f7a;
}

.admin-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #8EA1BF;
    background: linear-gradient(90deg, rgba(142, 161, 191, 0.1), rgba(148, 164, 197, 0.1));
    border-radius: 10px;
    padding: 20px;
}

.admin-header h1 {
    color: #ecf0f1;
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

.admin-header p {
    color: #bdc3c7;
    margin: 0;
    font-size: 16px;
}

.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.admin-menu-item {
    display: block;
    padding: 20px 25px;
    background: linear-gradient(135deg, #8EA1BF 0%, #94A4C5 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid #6c8ab5;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.admin-menu-item:hover::before {
    left: 100%;
}

.admin-menu-item:hover {
    background: linear-gradient(135deg, #6B7FA2 0%, #7A89A8 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    color: white;
    text-decoration: none;
}

.admin-menu-item.abuse-reports {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-color: #a93226;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
}

.admin-menu-item.abuse-reports:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4);
}

.admin-menu-item .menu-icon {
    font-size: 18px;
    margin-right: 12px;
    opacity: 0.9;
    display: inline-block;
    width: 25px;
    text-align: center;
}

.admin-menu-item small {
    display: block;
    margin-top: 8px;
    opacity: 0.8;
    font-size: 13px;
    line-height: 1.3;
}

.admin-footer {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px solid #4a5f7a;
    text-align: center;
    color: #bdc3c7;
    font-size: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 10px;
    padding: 20px;
}

.admin-footer strong {
    color: #ecf0f1;
    font-weight: 600;
}

/* ========================================
   Enhanced Admin Interface Styles
   ======================================== */

/* Enhanced Admin Index Styles */
.admin-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 25px;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 1px solid #4a5f7a;
}

.admin-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 2px solid #8EA1BF;
    background: linear-gradient(90deg, rgba(142, 161, 191, 0.1), rgba(148, 164, 197, 0.1));
    border-radius: 10px;
    padding: 20px;
}

.admin-header h1 {
    color: #ecf0f1;
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

.admin-header p {
    color: #bdc3c7;
    margin: 0;
    font-size: 16px;
}

.admin-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.admin-menu-item {
    display: block;
    padding: 20px 25px;
    background: linear-gradient(135deg, #8EA1BF 0%, #94A4C5 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid #6c8ab5;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 15px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.admin-menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.admin-menu-item:hover::before {
    left: 100%;
}

.admin-menu-item:hover {
    background: linear-gradient(135deg, #6B7FA2 0%, #7A89A8 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    color: white;
    text-decoration: none;
}

.admin-menu-item.abuse-reports {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    border-color: #a93226;
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
}

.admin-menu-item.abuse-reports:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    box-shadow: 0 8px 30px rgba(231, 76, 60, 0.4);
}

.admin-menu-item .menu-icon {
    font-size: 18px;
    margin-right: 12px;
    opacity: 0.9;
    display: inline-block;
    width: 25px;
    text-align: center;
}

.admin-menu-item small {
    display: block;
    margin-top: 8px;
    opacity: 0.8;
    font-size: 13px;
    line-height: 1.3;
}

.admin-footer {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px solid #4a5f7a;
    text-align: center;
    color: #bdc3c7;
    font-size: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 10px;
    padding: 20px;
}

.admin-footer strong {
    color: #ecf0f1;
    font-weight: 600;
}

/* Enhanced Abuse Reports Specific Styles */
.abuse-stats {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.abuse-stats h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.abuse-filter {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.abuse-filter h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.abuse-filter a {
    color: #ecf0f1 !important;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.3s ease;
    display: inline-block;
    margin: 2px;
}

.abuse-filter a:hover {
    background: rgba(255,255,255,0.2);
    text-decoration: none !important;
}

.abuse-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.abuse-table thead {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    color: white;
}

.abuse-table thead th {
    padding: 15px 12px;
    font-weight: 600;
    text-align: left;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.abuse-table tbody tr {
    border-bottom: 1px solid #ecf0f1;
    transition: background 0.3s ease;
}

.abuse-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
}

.abuse-table tbody td {
    padding: 12px;
    font-size: 13px;
    vertical-align: top;
    border-right: 1px solid #f8f9fa;
}

.abuse-table tbody td:last-child {
    border-right: none;
}

.action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    min-width: 70px;
}

.btn-review {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.btn-close {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
}

.btn-ignore {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
}

.btn-delete {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    text-decoration: none !important;
    color: white !important;
}

/* Status indicators */
.status-pending {
    background: #f39c12;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-reviewed {
    background: #3498db;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-closed {
    background: #27ae60;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.status-ignored {
    background: #95a5a6;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.abuse-details {
    max-width: 200px;
    word-wrap: break-word;
    line-height: 1.4;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .admin-container {
        margin: 10px;
        padding: 20px;
    }
    
    .admin-menu {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .admin-menu-item {
        padding: 15px 20px;
        font-size: 14px;
    }
    
    .abuse-table {
        font-size: 11px;
    }
    
    .abuse-table thead th,
    .abuse-table tbody td {
        padding: 8px 6px;
    }
    
    .action-buttons {
        flex-direction: column;
        gap: 5px;
    }
    
    .action-btn {
        font-size: 11px;
        padding: 5px 8px;
    }
}

/* Enhanced form styles for abuse reports */
.abuse-form-container {
    background: linear-gradient(145deg, #ecf0f1, #d5dbdb);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin: 20px 0;
    border: 1px solid #bdc3c7;
}

.abuse-form-container h2 {
    color: #2c3e50;
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    border-bottom: 2px solid #8EA1BF;
    font-size: 22px;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #34495e;
    font-size: 14px;
}

.form-group select,
.form-group textarea,
.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #bdc3c7;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: white;
    font-family: inherit;
}

.form-group select:focus,
.form-group textarea:focus,
.form-group input:focus {
    outline: none;
    border-color: #8EA1BF;
    box-shadow: 0 0 10px rgba(142, 161, 191, 0.3);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.submit-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
}

/* Success/Error messages */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin: 20px 0;
    font-weight: 500;
    border: 1px solid;
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border-color: #c3e6cb;
}

.alert-error {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border-color: #f5c6cb;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-color: #bee5eb;
}

/* Enhanced context menu for abuse reporting */
.abuse-context-menu {
    position: absolute;
    background: linear-gradient(145deg, #2c3e50, #34495e);
    border: 1px solid #4a5f7a;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 9999;
    min-width: 180px;
    padding: 8px 0;
}

.abuse-context-menu a {
    display: block;
    padding: 10px 15px;
    color: #ecf0f1 !important;
    text-decoration: none;
    transition: background 0.3s ease;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.abuse-context-menu a:last-child {
    border-bottom: none;
}

.abuse-context-menu a:hover {
    background: rgba(231, 76, 60, 0.8);
    color: white !important;
}

.abuse-context-menu .menu-icon {
    margin-right: 8px;
    width: 16px;
    display: inline-block;
    text-align: center;
}

/* Enhanced Admin Header Styles with Close Button */
.admin-header .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.admin-header .header-left {
    flex: 1;
    text-align: left;
}

.admin-header .header-right {
    flex: 0;
    text-align: right;
}

.admin-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white !important;
    text-decoration: none !important;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #a93226;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.admin-close-btn:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    color: white !important;
    text-decoration: none !important;
}

.admin-close-btn .close-icon {
    font-size: 16px;
    font-weight: bold;
}

.admin-close-btn .close-text {
    font-size: 13px;
}

/* Mobile responsiveness for close button */
@media (max-width: 600px) {
    .admin-header .header-content {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .admin-header .header-left {
        text-align: center;
    }
    
    .admin-header .header-right {
        text-align: center;
    }
    
    .admin-close-btn .close-text {
        display: none;
    }
}

/* ========== FILE UPLOAD PROGRESS BAR ========== */

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
   border: none; 
  width: 250px;
  height: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #006633, #00ff66);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
}

progress[value]::-moz-progress-bar { 
  background-image:
    -moz-linear-gradient(
      135deg, 
      transparent 33%, 
      rgba(0, 0, 0, 0.1) 33%, 
      rgba(0, 0, 0, 0.1) 66%, 
      transparent 66% 
    ),
    -moz-linear-gradient(
      top, 
      rgba(255, 255, 255, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),
    -moz-linear-gradient(
      left, 
      #006633, 
      #00ff66
    );

  border-radius: 2px; 
  background-size: 35px 20px, 100% 100%, 100% 100%; 
}

#Filesendmain{
 width: 90%;
 padding: 6px;
 overflow: hidden; 
 background-image: linear-gradient(to top, rgba(241,255,238,1) 20%, rgba(241,255,238,0) 90%);
 border-radius: 8px;
 }
 
#fizfooter{
 color: #1f4f1e;
 font-size: x-small;
}