/* --------------------------------------------------- */


/* --------------------------------------------------- */
/* BASIC SETUP */
/* --------------------------------------------------- */


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #fff;
	font-family: 'DM Sans', sans-serif;
	font-size: 20px;
	text-rendering: optimizelegibility;
	color: #111229;
}

body {
	margin: 0;
	/* height: 100vh; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
}

a, a:visited {
	text-decoration: none; /* Removes the underline */
    color: #6049cd;
}

a:hover, a:focus {
    color: #29e1ec;  /* or another color you'd like for hover state */
}

a:active {
    color: #29e1ec;  /* or another color for the active state */
}

.clear-both {
	clear: both;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.hidden{display: none;}

.f12 {
	font-size: 12px;
	font-weight: normal;
}

.f12b {
	font-size: 12px;
	font-weight: 700;
}

.f13 {
	font-size: 13px;
	font-weight: normal;
}

.f13b {
	font-size: 13px;
	font-weight: 700;
}

.f15 {
	font-size: 15px;
	font-weight: normal;
}

.f15b {
	font-size: 15px;
	font-weight: 700;
}

.f35 {
	font-size: 35px;
	font-weight: normal;
}

.f55b {
	font-size: 35px;
	font-weight: 700;
}


.tac {
	text-align: center;
}

#footer { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
   	width: 100%;
   	height: 20px;
   	padding: 0px;
   	margin: 10px;
   	padding-top: 40px;
   	/* border: 1px solid black; */
   	/* #background-color: #0ff; */
   	text-align: center;
   	font-size: 12px;
   	font-weight: 100;
}

.container {
    display: flex;
    flex-direction: column;
}

.error_msg { 
	color: #c00;
}

rounded_image {
	border-radius: 50%;	
}


/* --------------------------------------------------- */
/* AJAX PROCESSING */
/* --------------------------------------------------- */


#div_ajax_spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -33px; /* half width of the spinner gif */
	margin-top: -33px; /* half height of the spinner gif */
	text-align:center;
	z-index:1234;
	overflow: auto;
	width: 66px; /* width of the spinner gif */
	height: 66px; /*height of the spinner gif +2px to fix IE8 issue */
}


#mid_page_div {
  	display: flex;
	flex-direction: column;
    justify-content: center; /* Horizontally center */
    align-items: center;     /* Vertically center */
    width: 100%;             /* Set to desired width or 100% if you want it to fill its parent */
	height: auto;
	text-align: center;
	background-color: #f9f8f7;
}

#ajax_content {
  	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
	margin: 0;
    width: 100%;
    background-color: #fff;
    color: #111229;
    text-align: center;
}

.ajax-processing-div{
	width: 0px;
	height: 0px;	
}


/* --------------------------------------------------- */
/* --------------------------------------------------- */
/* PAGES */
/* --------------------------------------------------- */
/* --------------------------------------------------- */


/* --------------------------------------------------- */
/* LOGIN */
/* --------------------------------------------------- */


.box_login {
   	text-align: center;
   	width: 364px;
   	height: 540px;
   	padding: 0px;
   	margin: 20px;
   	/* border: 1px solid black; */
   	/* background-color: #0ff; */
}

.logo_login {
    display: inline-block;
    text-align: center;
    width: 100px;
    height: 100px;
    padding: 0px;
    margin: 20px;
    background-image: url('img/logo-qinect-dark-sq-0100px.png');
}

.logo_login_admin {
    width: 100px;
    height: 100px;
    padding: 0px;
    margin: 20px;
    background-image: url('img/logo-qinect-purple-sq-0100px.png');
    display: inline-block;
    text-align: center;
}

.box_login_text {  
   	width: 364px;
   	height: auto;
   	padding: 5px;
   	margin: 5px 0;
   	font-size: 55px;
   	text-align: center;
}

.box_login_small_text {  
    display: inline-flex;
    align-items: center;
    justify-content: center;
   	width: 364px;
   	height: auto;
   	padding: 5px;
   	margin: 10px 0 10px 0;
   	font-size: 16px;
   	text-align: center;
}


.input-login {
    /* Basic styling */
   	width: 364px;
   	height: 60px;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #eceae9;
    font-size: 16px;
    border-radius: 10px;
    transition: border-color 0.3s ease; /* Smooth transition for focus effect */
    outline: none;
}

/* Focus effect: Changing border color when the input is focused */
.input-login:focus {
    border-color: #6049cc; /* QINECT purple colour*/
}

.button-login {
    /* Basic styling */
   	width: 364px;
   	height: 60px;
    padding: 20px;
    margin: 10px 0;
    border: none;
    background-color: #111229; /* QINECT Dark colour */
    color: #fff; /* White text */
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

/* Hover effect */
.button-login:hover, .button-login:focus {
    background-color: #29e1ec; /* QINECT aqua colour */
}

/* Active (when being clicked) effect */
.button-login:active {
    background-color: #6049cc; /* QINECT purple colour*/
    color: #fff;
}

/* Style when part of an A tag */
a.button-login {
    display: inline-block;
    color: #fff;
}

a.button-login:hover, a.button-login:focus {
    background-color: #29e1ec; /* QINECT aqua colour */
    color: #fff;
}

a.button-login:active {
    background-color: #6049cc; /* QINECT purple colour*/
    color: #fff;
}

.button_error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
   	width: 364px;
   	height: 60px;
    padding: 20px;
    margin: 10px 0;
    border: 1px solid;
    border-color: #d81159;
	background-color: rgba(216, 17, 89,  0.1);
    color: #d81159; 
    font-size: 16px;
    border-radius: 10px;
}


/* --------------------------------------------------- */
/* LOGGED IN - ALL PAGES */
/* --------------------------------------------------- */


.container_page {
	display: flex;
	flex-wrap: wrap;
	width:100%;
	height: 100%;
	padding: 0;
   	max-width: 1440px;
   	/*border: 1px solid #eceae9;*/
	background-color: #fff;
    align-items: flex-start;
}


.header_page{
    display: flex;
    flex-direction: row;   /* Changed from column to row */
    justify-content: space-between; /* Added to space logo and icons apart */
    width: 100%;
    height: 68px;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #eceae9;
    /* background-color: #0ff; */
}

.header_logo {
    width: 111px;
    height: 28px;
    padding: 0px;
    margin: 20px;
    display: flex;
    align-items: center; /* Added for vertical centering */
}

.header_center {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #6049cd;
    font-weight: 700;
}

.header_right {
    display: flex;
    align-items: center; /* Added for vertical centering */
}


.header_icons {
    width: 70px;
    height: 28px;
    padding: 0px;
    margin: 0px;
    display: flex;
    align-items: center; /* Added for vertical centering */
}

/*
.header_icons a {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-image: url('./img/logoff-hover.png');
    background-size: cover;
    text-decoration: none;
}

.header_icons a img {
    display: block;
    transition: opacity 0.3s; 
}

.header_icons a:hover img {
    opacity: 0;
}
*/

.image_button_logoff {
	width: 28px;  /* Adjust width */
    height: 28x;  /* Adjust height */
    padding: 0px;
    margin: 0px;
    border: none;  /* Remove border */
    outline: none;  /* Remove focus outline */
    cursor: pointer;  /* Hand cursor on hover */
    background-image: url('./img/logoff.png');
    background-size: contain;  /* Adjust as needed */
    background-repeat: no-repeat;
	background-color: #fff;
}

.image_button_logoff:hover {
    background-image: url('./img/logoff-hover.png');
}


.header_user_photo {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0px;
    margin: 20px;
    display: flex;
    align-items: center; /* Added for vertical centering */
    justify-content: center; /* Horizontal centering */
    text-align: center;
    border: 1px solid #eceae9;
    border-radius: 50%; /* This makes it round */
	overflow: hidden;   /* This ensures the image doesn't spill outside the round container */
    font-size: 20px;
    font-weight: 700;
    background-color: #f3f2f2;
}


.header_user_name {
    width: auto;
    height: 28px;
    padding: 0px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;  /* Added for vertical centering */
    font-size: 14px;
    color: #6049cd;
}


/* --------------------------------------------------- */
/* HOME */
/* --------------------------------------------------- */


.left_page {
	order: 1;
   	width: 30%;
   	height: auto;
   	padding: 0px;
   	margin: 0px;
   	float: left;
    /* border-bottom: 1px solid #eceae9; */
   	/* background-color: #0ff; */
   	text-align: center;	
}

.left_page_content_summary {
   	width: 100%;
   	height: 245px;
   	padding: 30px;
   	margin: 0px;
   	float: left;
   	background-color: #fff;
   	text-align: left;	
    font-size: 24px;
	font-weight: normal;
	overflow: hidden;
}


.left_page_content_characters_container {
   	max-height: 389px;
   	width: 100%;
   	padding: 0px;
   	margin: 0px;   	
   	overflow-y: scroll;
}

.left_page_content_admin_menu_container {
     max-height: 695px;
     width: 100%;
     padding: 0px;
     margin: 0px;   	
     overflow-y: scroll;
}

.left_page_content_character {
   	display: flex;
   	flex-direction: row;
   	width: 100%;
   	height: 80px;
   	padding: 15px 30px;
   	margin: 0px;   	
   	background-color: #fff;
   	text-align: left;	
    font-size: 15px;
	font-weight: 700;
}

.left_page_content_character_selected {
   	display: flex;
   	flex-direction: row;
   	width: 100%;
   	height: 80px;
   	padding: 15px 30px;
   	margin: 0px;   	
   	background-color: #f3f2f2;
   	text-align: left;	
    font-size: 15px;
	font-weight: 700;
}

.left_page_content_character_image {
   	width: 50px;
   	height: 50px;
    min-width: 50px;  /* Ensures minimum width is 50px */
    min-height: 50px; /* Ensures minimum height is 50px */
   	padding-right: 20px;
   	margin: 0px;
    border-radius: 50%;  /* This makes it round */
	overflow: hidden;   /* This ensures the image doesn't spill outside the round container */
   	text-align: center;	
}

.left_page_content_character_text1 {
	display: block;
	width: 100%;
   	height: auto;
   	padding: 5px 10px 0px 10px;
   	margin: 0px;
   	text-align: left;	
	overflow: hidden;
}

.left_page_content_character_text2 {
	display: none;
	width: 100%;
   	height: auto;
   	padding: 5px 10px 0px 10px;
   	margin: 0px;
   	text-align: left;	
	overflow: hidden;
}

.left_page_content_character_text_selected {
	display: block;
	width: 100%;
   	height: auto;
   	padding: 5px 10px 0px 10px;
   	margin: 0px;
   	text-align: left;	
	overflow: hidden;
}

.left_page_content_message_count {
	width: 20px;
   	height: 20px;
   	margin-top: 15px;
   	border-radius: 10px;
   	text-align: center;
   	color: #fff;
	background-color: #6049cd;
	overflow: hidden;
}

.left_page_content_separator_line {
   	width: 100%;
   	height: 1px;
   	padding: 0;
   	margin: 0;
   	float: left;
   	background-color: #eceae9;
}

.left_page_content_separator_header {
   	width: 100%;
   	height: 1px;
   	padding: 0px;
   	margin-bottom: 30px;
   	float: left;
   	background-color: #eceae9;
}

.left_page_content_separator {
   	width: 100%;
   	height: 1px;
   	padding: 0px;
   	margin: 30px 0px;
   	float: left;
   	background-color: #eceae9;
}


.left_page_content_separator_selected {
   	width: 100%;
   	height: 1px;
   	padding: 0px;
   	margin: 0px;
   	float: left;
   	background-color: #eceae9;
}

.left_page_content_separator_selected_padding {
   	width: 100%;
   	height: 30px;
   	padding: 0px;
   	margin: 0px;
   	float: left;
   	background-color: #f3f2f2;
}

.left_page_hidden_link1 {
	display: none;
	font-size: 20px;
	font-weight: normal;
}

.left_page_hidden_link2 {
	display: inherit;
	font-size: 20px;
	font-weight: normal;
}

.right_page {
	order: 2;
   	width: 70%;
   	height: auto;
   	padding: 30px;
   	margin: 0px;
   	float: right;
   	/* border-bottom: 1px solid #eceae9; */
   	border-left: 1px solid #eceae9;
   	background-color: #f9f8f7;
   	text-align: center;	
}

.right_page_admin {
  order: 2;
     width: 70%;
     height: auto;
     padding: 10px;
     margin: 0px;
     float: right;
     /* border-bottom: 1px solid #eceae9; */
     border-left: 1px solid #eceae9;
     background-color: #f9f8f7;
     text-align: center;	
}

.info_page_small_screen {
   	width: 100%;
   	height: auto;
   	padding: 0;
   	margin: 0;
   	float: right;
   	/* border-bottom: 1px solid #eceae9; */
   	border-left: 1px solid #eceae9;
   	background-color: #fff;
   	text-align: center;	
}

.info_page_small_screen_header {
   	width: 100%;
   	height: auto;
   	padding: 10px;
   	margin: 0;
   	border-bottom: 1px solid #eceae9;
   	background-color: #fff;
   	text-align: center;	
}

.right_page_content_header {
   	width: 100%;
   	height: 60px;
   	padding: 10px;
   	margin: 0px;
   	float: left;
   	background-color: #fff;
   	text-align: center;	
    border-radius: 5px;
    font-size: 35px;
	font-weight: 500;
	overflow: hidden;
}

.right_page_content_main {
   	width: 100%;
   	height: auto;
   	height: 560px;
   	padding: 40px;
   	margin-top: 15px;
   	float: left;
   	background-color: #fff;
   	text-align: left;	
    border-radius: 5px;
	font-size: 15px;
	overflow-y: scroll;
}

.right_page_content_header_admin {
     width: 100%;
     height: 60px;
     padding: 10px;
     margin: 0px;
     margin-bottom: 10px;
     float: left;
     background-color: #fff;
     text-align: center;	
    border-radius: 5px;
    font-size: 20px;
  font-weight: 500;
  overflow: hidden;
}




/* --------------------------------------------------- */
/* CHARACTERS */
/* --------------------------------------------------- */


.character_page_content_header {
   	width: 100%;
   	height: 100px;
   	padding: 15px;
   	margin: 0px;
   	margin-bottom: 20px;
   	float: left;
   	background-color: #6049cd;
   	text-align: center;	
    border-radius: 5px;
    color: #fff;
    font-size: 24px;
	font-weight: 500;
	overflow: hidden;
}

.character_page_content_character {
   	display: flex;
   	flex-direction: row;
   	width: auto;
   	height: 80px;
   	/*padding: 10px 30px 30px 30px;*/
   	padding-top: 5px;
   	margin: 0px;   	
   	text-align: left;	
    font-size: 24px;
	font-weight: 500;
}

.character_page_content_character_image {
   	width: 50px;
   	height: 50px;
    min-width: 50px;  /* Ensures minimum width is 50px */
    min-height: 50px; /* Ensures minimum height is 50px */
   	margin-top: 5px;
   	margin-left: 20px;
   	border-radius: 50%;
	/*border: 1px solid #eceae9;*/
   	background-color: #f3f2f2;
   	text-align: center;	
	overflow: hidden;
}

.character_page_content_character_text {
	width: 100%;
   	height: auto;
   	margin: 0px;
   	color: #fff;
   	text-align: left;	
   	overflow: hidden;
   	padding-left: 20px;

}


.character_page_content_plus {
   	display: flex;
   	flex-direction: row;
   	width: 32px;
   	height: 32px;
   	padding-top: 14px;
   	margin: 0px;   	
   	text-align: right;	
}

.character_page_profile_header {
   	display: flex;
   	flex-direction: row;
   	width: 100%;
   	height: 60px;
   	padding: 20px;
   	margin: 0px;
   	background-color: #fff;
   	text-align: left;	
    border-radius: 5px;
    color: #999;
    font-size: 15px;
	font-weight: 500;
	overflow: hidden;
}


.character_page_profile_header_back {
	width: 40%;
   	height: 20px;
   	margin: 0px;
   	text-align: left;	
   	padding-left: 0px;
   	/* background-color: #0ff; */
}

.character_page_profile_header_text {
	width: 60%;
   	height: 20px;
   	margin: 0px;
   	text-align: left;	
   	padding-left: 20px;
   	/* background-color: #0ff; */
}

.character_page_content_profile {
   	display: flex;
   	width: 100%;
   	height: auto;
   	height: 500px;
   	padding: 40px;
   	margin-top: 15px;
   	float: left;
   	background-color: #fff;
   	text-align: left;	
    border-radius: 5px;
	font-size: 15px;
	overflow-y: scroll;	
}

.character_page_content_profile_image {
	width: 260px;
   	height: 260px;
   	padding: 30px;
   	margin: 0px;
   	text-align: left;
   	/* background-color: #f0f; */
}

.character_page_content_profile_text {
	width: auto;
   	height: auto;
   	padding: 30px;
   	margin: 0px;
   	text-align: left;
   	/* background-color: #0ff; */
   	font-size: 15px;
}

.profile-image-container {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* This makes it round */
	overflow: hidden;   /* This ensures the image doesn't spill outside the round container */
}

.profile-image-container img {
    max-width: 100%;  /* Ensure the image doesn't overflow its container */
    max-height: 100%;
    object-fit: cover;
}

.image_button_plus {
	width: 32px;  /* Adjust width */
    height: 32x;  /* Adjust height */
    padding: 0px;
    margin: 0px;
    border: none;  /* Remove border */
    outline: none;  /* Remove focus outline */
    cursor: pointer;  /* Hand cursor on hover */
    background-image: url('./img/plus-normal.png');
    background-size: contain;  /* Adjust as needed */
	background-color: #6049cd;
    background-repeat: no-repeat;
}

.image_button_plus:hover {
    background-image: url('./img/plus-selected.png');
}

.image_button_backadmin {
    width: 32px;  /* Adjust width */
    height: 32x;  /* Adjust height */
    padding: 0px;
    margin: 0px;
    border: none;  /* Remove border */
    outline: none;  /* Remove focus outline */
    cursor: pointer;  /* Hand cursor on hover */
    background-image: url('./img/icon-back-admin.png');
    background-size: contain;  /* Adjust as needed */
    background-color: #6049cd;
    background-repeat: no-repeat;
}

.image_button_backadmin:hover {
    background-image: url('./img/icon-back-admin-selected.png');
}

.image_button_back {
	width: 20px;  /* Adjust width */
    height: 20x;  /* Adjust height */
    border: none;  /* Remove border */
    outline: none;  /* Remove focus outline */
    cursor: pointer;  /* Hand cursor on hover */
    background-image: url('./img/back-normal.png');
    background-size: contain;  /* Adjust as needed */
    background-repeat: no-repeat;
	background-color: #fff;
	align-items: center;
}

.image_button_back:hover {
    background-image: url('./img/back-selected.png');
}

.button-back {
    /* Basic styling */
   	width: 364px;
   	height: 60px;
    padding: 20px;
    margin: 10px 0;
    border: none;
    background-color: #111229; /* QINECT Dark colour */
    color: #fff; /* White text */
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}


/* --------------------------------------------------- */
/* CHAT */
/* --------------------------------------------------- */

.parent_chat_container {
    width: 100%;
    height: 630px;
   	margin: 0;
    /*background-color: #ff0;*/
}

.responsive_chat_iframe {
    width: 100%;
    height: 560px;
    padding: 0;
    margin: 0;
    border: none; /* optional: to remove the default border around iframes */
    /*background-color: #f0f;*/
}

.character_page_content_chat {
	display: inline-block;
	box-sizing: border-box;
   	width: 100%;
    #max-width: 800px;
   	height: 445px;
   	padding: 5px;
   	margin: 0;
   	float: left;
   	background-color: #f9f8f7;
   	text-align: left;	
    border-radius: 5px;
	font-size: 16px;
}

.chat_container {
    display: block;
    vertical-align: middle;
    width: 100%;
    height: 90%;
    background-color: #f9f8f7;
	overflow-y: scroll;
}

.message_incoming {
	width: 80%;
	padding: 10px;
	margin-bottom: 20px;
    border-radius: 10px;
	background-color: #f3f2f2;
    color: #111229;
    float: left;
    clear: both;
    text-align: left;
}

.message_outgoing {
	width: 80%;
	padding: 10px;
	padding-right: 20px;
	margin-bottom: 20px;
    border-radius: 10px;
    background-color:  #000;
    color: #fff;
    float: right;
    clear: both;
    text-align: right;
}

.chat_input_container {
    display: flex;
    padding: 10px;
    background-color: #f9f8f7;
}

.chat_input_container input {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    outline: none;
    font-size: 20px;
}

.chat_input_container button {
    margin-left: 10px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background-color: #6049cd;
    color: white;
    cursor: pointer;
}

.chat_input_container button:hover {
    background-color: #29e1ec;
}

.chat_wait_ani_container {
	display: flex;
    flex-direction: row;   /* Changed from column to row */
	justify-content: center;
    align-items: center;
	background-color: #f9f8f7;
	text-align: center;
	color: #6049cd;
	font-size: 24px;
	font-weight: 700;
	display: none;
}


.button_cancel {
   	width: 150px;
   	height: 30px;
    padding: 5px;
    margin: 0;
    border: none;
    background-color: #111229; /* QINECT Dark colour */
    color: #fff; /* White text */
    font-size: 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

/* Hover effect */
.button_cancel:hover, .button_cancel:focus {
    background-color: #29e1ec; /* QINECT aqua colour */
}

  
/* --------------------------------------------------- */
/* ADMIN */
/* --------------------------------------------------- */

.admin_grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr 1fr; /* Fixed width for the image column, flexible for text columns */
  gap: 0px; /* Space between columns */
  border-top: 1px solid #6049cd; /* line below each item */
  padding-top: 0px;
}

.row_admin_content {
  display: contents; /* This makes .row act as if it's not there, allowing its children to be direct children of the grid */
}


.admin_content_image-column, .admin_content_text-column, .admin_content_text-column_name, .admin_content_text-column_description {
  display: flex; /* Use Flexbox for centering or other alignment purposes within the column */
  align-items: center; /* Example alignment */
  border-bottom: 1px solid #6049cd; /* line below each item */
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px; /* Space below the border */
  padding-bottom: 10px; /* Space above the border */
  font-size: 12px;
  /* Add other styling as needed */
}

.admin_content_text-column {
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the start of the container */
}

.creator_info {
  padding-top: 10px; /* Space above the creator info */
}

.admin_content_text-column_name {
  font-size: 14px;
  font-weight: 700;
  color: #6049cd;
}

.admin_content_text-column_description {
  #max-width: 40%;
  #max-height: 101px;
  overflow: hidden;
  text-align: justify;
  align-items: flex-start;
  font-size: 14px;
}

.admin-icon-link {
  display: flex; /* Use Flexbox to layout children horizontally */
  align-items: center; /* Align the image and the link vertically */
}

.admin-icon {
  width: 20px;
  height: 20px;
  margin-left: 0px; 
  margin-right: 5px; 
}

.admin_content_img {
  width: 100%; /* Make the image fully occupy its container */
  height: auto; /* Maintain aspect ratio */
}


.input-admin-legend {
    /* Basic styling */
    width: auto;
    height: 30px;
    padding: 4px;
    margin: 10px 0;
    font-size: 16px;
    outline: none;
}

.input-admin {
    /* Basic styling */
    width: auto;
    height: 30px;
    padding: 2px;
    margin: 10px 0;
    border: 2px solid #eceae9;
    font-size: 16px;
    border-radius: 10px;
    transition: border-color 0.3s ease; /* Smooth transition for focus effect */
    outline: none;
}

/* Focus effect: Changing border color when the input is focused */
.input-admin:focus {
    border-color: #6049cd; /* QINECT purple colour*/
}

.button-admin {
    /* Basic styling */
    width: auto;
    height: 40px;
    padding: 10px;
    margin: 10px 0;
    border: none;
    background-color: #6049cd; /* QINECT signature colour */
    color: #fff; /* White text */
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

.right_page_content_main_admin {
    width: 100%;
    height: auto;     
    padding: 10px;
    float: left;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically aligns the content in the center */
    text-align: left;	
    border-radius: 5px;
    font-size: 15px;
    overflow-y: scroll;
    display: flex; /* Changed to flex to better manage columns */
    flex-wrap: wrap; /* Allow the content to wrap */
}

.right_page_content_edit_admin {
    width: 100%;
    height: auto; 
    padding: 10px;
    margin: 0;
    padding-bottom: 0;
    background-color: #fff;
    text-align: left;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
}

.admin_edit_left_column_2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically aligns the content in the center */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    padding: 5px; /* Adjust padding as needed */
}

.admin_edit_left_column_3 {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically aligns the content in the center */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    padding: 5px; /* Adjust padding as needed */
}

.admin_edit_left_column_4 {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically aligns the content in the center */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    padding: 5px; /* Adjust padding as needed */
}

.admin_edit_left_column {
    width: 200px;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
}

.admin_edit_left_column img {
    width: 100px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.admin_edit_nav .admin_edit_ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.admin_edit_ul .admin_edit_li {
    margin: 5px 0;
    text-align: center;
}

.admin_edit_content_columns {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.admin_edit_row {
    display: flex;
    margin-bottom: 5px;
}

.admin_edit_right_column {
    flex-grow: 1;
    margin-right: 5px;
}

.admin_edit_third_column {
    width: 100px;
    font-size: 12px;
    font-weight: 700;
    color: #6049cd;
}

.admin_edit_input_box {
    border: 1px solid #6049cd;
    width: 100%;
    padding: 5px;
}

.admin_edit_input_box textarea, .admin_edit_input_box input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    margin: 0px;
    padding: 5px;
    resize: none; /* Prevents resizing of textarea */
    outline: none; /* Removes the default focus outline */
}

.admin_edit_input_box textarea:focus, .admin_edit_input_box input:focus {
   background-color: #ccffcc; /* Light green background on focus */
}

.inner-columns-container {
    display: flex; /* Enables Flexbox */
    flex-wrap: wrap; /* Allows columns to wrap onto new rows as needed */
    margin-left: -5px; /* Adjust based on margin-right of .column to maintain container width */
    margin-right: -5px; /* Adjust based on margin-left of .column to maintain container width */
}

.inner-column {
    width: 25%; /* Sets the base width for each column */
    padding: 5px; /* Adds padding inside each column */
    box-sizing: border-box; /* Ensures padding is included in the width calculation */
    /* margin-bottom: 10px; /* Space between rows */
    /* margin-right: 5px;  Space between columns, adjust as needed */
    /* margin-left: 5px; /* Space between columns, adjust as needed */
    border-right: 1px solid #6049cd;
    border-bottom: 1px solid #6049cd;
}

.admin_edit_third_column p {
    margin: 0;
    padding: 2px;
    text-align: left;
}

.admin_edit_divider {
    border-top: 1px solid #6049cd; /* Creates a top border line */
    width: 100%; /* Ensures the line spans the full width of its container */
    margin: 0; /* Removes any default margin */
    padding: 0; /* Removes any default padding */
}

/* --------------------------------------------------- */

.button-save {
    /* Basic styling */
    width: 150px;
    height: 50px;
    padding: 5px 20px; /* 5px top and bottom, 20px left and right */
    margin: 0;
    border: 2px solid;
    border-color: #6049cd;
    background-color: #fff;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 36px; /* Align text vertically */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

/* Hover effect */
.button-save:hover, .button-save:focus {
    border-color: #29e1ec; /* QINECT aqua colour */
}

/* Active (when being clicked) effect */
.button-login:save {
    background-color: #6049cd; /* QINECT purple colour*/
    color: #fff;
}

/* Style when part of an A tag */
a.button-save {
    display: inline-block;
    color: #fff;
}

a.button-save:hover, a.button-save:focus {
    border-color: #29e1ec; /* QINECT aqua colour */
    color: #fff;
}

a.button-save:active {
    background-color: #6049cd; /* QINECT purple colour*/
    color: #fff;
}

/* --------------------------------------------------- */

.button-active {
    /* Basic styling */
    width: 150px;
    height: 50px;
    padding: 5px 20px; /* 5px top and bottom, 20px left and right */
    margin: 0;
    border: 2px solid;
    border-color: #090;
    background-color: #0f0;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 36px; /* Align text vertically */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

/* --------------------------------------------------- */

.button-inactive {
    /* Basic styling */
    width: 150px;
    height: 50px;
    padding: 5px 20px; /* 5px top and bottom, 20px left and right */
    margin: 0;
    border: 2px solid;
    border-color: #333;
    background-color: #999;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    line-height: 36px; /* Align text vertically */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    /* Remove focus outline for a cleaner look (but be wary about accessibility) */
    outline: none;
}

/* --------------------------------------------------- */



.waiting-gif {
    animation: fadeOut 3s forwards; /* Animation lasts 3 seconds */
    width: 100px;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* CSS for links within a .warning div */
.warning a, .warning a:visited {
    color: #900; /* Default color for links inside .warning */
}

.warning a:hover, .warning a:focus, .warning a:active {
    color: #f00; /* Color for hover, focus, and active states of links inside .warning */
}


/* --------------------------------------------------- */
/* FILE UPLOAD */
/* --------------------------------------------------- */



.input-upload {
    /* Basic styling */
     width: 300px;
     height: 40px;
    padding: 5px;
    margin: 10px 0;
    border: 2px solid #eceae9;
    font-size: 16px;
    border-radius: 10px;
    outline: none;
}

.button-upload {
    /* Basic styling */
     width: 300px;
     height: 40px;
    padding: 5px;
    margin: 5px 0;
    border: none;
    background-color: #111229; /* QINECT Dark colour */
    color: #fff; /* White text */
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    outline: none;
}

/* Hover effect */
.button-upload:hover, .button-login:focus {
    background-color: #29e1ec; /* QINECT aqua colour */
}

/* Active (when being clicked) effect */
.button-upload:active {
    background-color: #6049cc; /* QINECT purple colour*/
    color: #fff;
}

/* Style when part of an A tag */
a.button-upload {
    display: inline-block;
    color: #fff;
}

a.button-upload:hover, a.button-login:focus {
    background-color: #29e1ec; /* QINECT aqua colour */
    color: #fff;
}

a.button-upload:active {
    background-color: #6049cc; /* QINECT purple colour*/
    color: #fff;
}




/* --------------------------------------------------- */
/* RESPONSIVE */
/* --------------------------------------------------- */



/* Break point to stack the play interface */
@media only screen and (min-width: 800px) {


}


/* Break point to stack the play interface */
@media only screen and (max-width: 800px) {

	#ajax_content {
	    width: 400px;
	}

	.container_page {
	    flex-direction: column;
		flex-wrap: wrap;
	   	width: 400px;
	}

    .header_user_name {
          font-size: 10px;
    }

	.left_page {
		order: 1;
	   	width: 100%;
	}

	.left_page_hidden_link1 {
		display: inherit;
	}

	.left_page_hidden_link2 {
		display: none;
	}
	
	.right_page_admin {
		display: none;
		order: 2;
	   	width: 100%;
	}

	.right_page_content_header {
	   	width: 100%;
	   	height: 40px;
	   	padding: 5px;
	   	margin: 0px;
	   	float: left;
	   	background-color: #fff;
	   	text-align: center;	
	    border-radius: 5px;
	    font-size: 24px;
		font-weight: 500;
		overflow: hidden;
	}

	.left_page_content_character_text1 {
		display: none;
	}
	
	.left_page_content_character_text2 {
		display: block;
	}

	.character_page_content_header {
	   	height: 60px;
	   	padding: 5px;
	   	margin: 0px;
	   	margin-bottom: 0px;
	   	float: left;
	   	background-color: #fff;
	   	text-align: center;	
	    border-radius: 0px;
	    color: #111229;
	    font-size: 24px;
		font-weight: 500;
	}

	.character_page_content_character {
	   	height: 50px;
	   	padding-left: 5px;
	   	padding-top: 0px;
	   	margin: 0px;   	
	}

	.character_page_content_character_image {
	   	width: 50px;
	   	height: 50px;
	   	margin-top: 0px;
	   	margin-left: 0px;
	   	border-radius: 50%;
	}

	.character_page_content_character_text {
		width: auto;
	   	height: 50px;
	   	margin: 0px;
	    color: #111229;
	   	text-align: left;	
	   	overflow: hidden;
	   	padding: 0 10px;
	    font-size: 16px;
		font-weight: 500;	
	}

	.character_page_profile_header_back {
		width: 40px;
	   	height: 20px;
	   	margin: 0px;
	   	text-align: left;	
	   	padding-left: 0px;
	}

	.character_page_content_plus {
	   	display: flex;
	   	flex-direction: row;
	   	width: 32px;
	   	height: 32px;
	   	padding-top: 8px;
	   	margin: 0px;   	
	   	text-align: right;	
	}

	.image_button_plus {
	    background-image: url('./img/back-small_screen.png');
		background-color: #fff;
	}
	
	.image_button_plus:hover {
	    background-image: url('./img/plus-selected.png');
	}


	.character_page_profile_header {
	   	display: flex;
	   	flex-direction: row;
	   	width: 100%;
	   	height: 60px;
	   	padding: 20px;
	   	margin: 0px;
	   	background-color: #fff;
	   	text-align: left;	
	    border-radius: 5px;
	    color: #999;
	    font-size: 15px;
		font-weight: 500;
		overflow: hidden;
	}

	.character_page_content_profile_text {
	   	padding: 10px;
	   	font-size: 12px;
	}

	.chat_wait_ani_container {
		font-size: 16px;
		font-weight: 300;
	}



}




/* --------------------------------------------------- */
/* DEBUGGING */
/* --------------------------------------------------- */


.console_message {
   	width: 364px;
   	height: auto;
   	padding: 5px;
   	margin: 20px;
   	font-size: 16px;
   	text-align: center;
    background-color: #112;
    color: #fff;
    font-size: 50%;
    float:left;
}