
#check_my_score_button {
	
	font-size			: 40px;
	padding				: 20px;
	width				: 500px;
	font-weight			: bold;
	border-radius		: 10px;
	
}
 
#desktop_dropdown_menu_button {
	
	cursor				: pointer;
	
}

#desktop_dropdown_menu {
		
	width				: 1170px;	
	position			: fixed;	
	z-index 			: 100;
	background-color	: #dddddd;
	border-bottom		: 1px solid #aaaaaa;
	top					: 127px;
	font-size			: 16px;
	text-align			: center;
	padding				: 15px;
	display				: none;	
	
}

.dropdownmenu_item {
	
	padding 			: 10px;
	font-size			: 22px;
	background-color	: #18a3e9;
	color				: #ffffff;
	border-bottom		: 2px solid #1990cd;	
	width				: 167px;
	margin				: 3px;
	float				: left;
	cursor				: pointer;
	border-radius		: 3px;
	
	
}

#desktop_sub_menu {
	
	height 				: 20px;
	width				: 1180px;
	position			: fixed;	
	left				: 50%;
	transform			: translate(-50%, 0);
	background-color	: #eeeeee;
	border-bottom		: 1px solid #aaaaaa;
	z-index				: 100;
	top					: 86px;
	padding				: 10px;
	text-align			: right;
	
	
}

#latest_comments_item {
	
	cursor				: pointer;
	position			: relative;
	background-color	: #eeeeee;
	padding				: 10px;
	min-height			: 40px;
	padding-left		: 62px;
	padding-right		: 20px;
	font-size			: 16px;
	border-radius		: 20px;
	margin-bottom		: 10px;
	text-align			: left;
	
	
}

#latest_comments_item:hover {
    background-color: #dddddd;
}


#new_member_list_item {
		
	position			: relative;
	background-color	: #eeeeee;
	padding				: 10px;
	min-height			: 40px;
	padding-left		: 62px;
	padding-right		: 20px;
	font-size			: 16px;
	border-radius		: 20px;
	margin-bottom		: 10px;
	text-align			: left;
	
	
}

#daily_challenge_item {
		
	position			: relative;
	background-color	: #eeeeee;
	padding				: 5px 10px 0px 5px;
	min-height			: 40px;
	font-size			: 18px;
	border-radius		: 20px;
	margin-bottom		: 10px;
	text-align			: center;
	border-bottom		: 2px solid #dddddd;	

}

#new_member_list_timestamp {
	
	color			: #4f8fe5;
	font-weight		: bold;
	font-size		: 14px;
	margin-top		: 3px;
	
}

#new_member_list_avatar {
	
	position		: absolute;
	top				: 7px;
	left			: 7px;
	height			: 46px;
	border-radius	: 14px;
	
}

#live_chat_avatar {
	
	position		: absolute;
	top				: 7px;
	left			: 7px;
	height			: 46px;
	border-radius	: 5px;
	
}

.likebox {
	
	position			: absolute;
	bottom				: -13px;
	height				: 18px;
	right				: 15px;
	min-width			: 20px;
	background-color	: #139ff9;
	color				: #ffffff;
	padding				: 4px 8px 4px 8px;
	border-radius		: 10px;
	font-size			: 12px;
	
}

#notification_list_timestamp {
	
	color			: #4f8fe5;
	font-weight		: bold;
	font-size		: 14px;
	margin-top		: 3px;
	
}

#notification_list_avatar {
	
	position		: absolute;
	top				: 10px;
	left			: 10px;
	height			: 60px;
	border-radius	: 10px;
	
}

#notification_list_thumb {
	
	position		: absolute;
	top				: 10px;
	right			: 10px;
	height			: 60px;
	width			: 100px;
	border-radius	: 10px;
	
}

#notification_list_item {
	
	cursor				: pointer;
	position			: relative;
	background-color	: #eeeeee;
	padding				: 10px;
	height				: 60px;
	padding-left		: 80px;
	padding-right		: 130px;
	font-size			: 19px;
	border-radius		: 20px;
	margin-bottom		: 10px;
	
}

#comment_submit_button {
	
	position	:absolute;
	bottom		:10px;
	right		:8px;
	cursor		:pointer;
	
}

#mycomment {
	
	width				: 100%;
	font-size			: 16px;
	border				: 0px;
	background-color	: #cccccc;
	outline				: none;
	resize				: none;
	margin-bottom		: 30px;
		
}


#correctanswers {
	
	font-size			: 50px;
	margin-top			: -25px;
	
}

.number-container {
    font-size: 70px;
    color: white;
    text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
    position: fixed;
    width: 50%;  /* Specify the width */
    left: 25%;   /* Centering for fixed position */
    text-align: center;
    animation: moveUpFadeOut 2s linear forwards;
    font-weight:bold;
    margin-left: auto;
    margin-right: auto;
	white-space: nowrap;
}


        .points-text {
            font-size: 70px;
            position: relative;            
			font-weight:bold;
        }

        @keyframes moveUpFadeOut {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            50% {
                transform: translateY(-50%);
                opacity: 1;
            }
            100% {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

.emoji-picker {
            display: flex;
            flex-wrap: wrap;
            cursor: pointer;
			background-color:#c0c0c0;
			border-top:1px solid #a0a0a0;
			border-bottom:1px solid #e0e0e0;
			padding:3px;
			border-radius:10px;			
			position:absolute;
			bottom : 15px;
        }
        .emoji {
            padding: 3.3px;
            font-size: 1.205em;
        }



body {
	padding 				: 0px;
	margin 					: 0px;
    
	/*background-image		: url('./bg.png');
    background-repeat		: repeat-x;
    background-color		: #a8f2ff;
	padding 				: 0px;
	margin 					: 0px;
	font-family				: 'Roboto', sans-serif;
	font-size				: 16px;
	background-attachment 	: fixed;*/
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#scorebox {
	
	background-color	: #00a1aa;
	color				: #ffffff;
	text-align			: center;
	padding				: 20px;
	border-radius		: 10px;
	border				: 1px solid #007c83;
	margin-top			: 15px;
	display				: none;
		
}

#check_my_score {
	
	font-size			: 35px;
	padding				: 10px;
	border-radius		: 10px;
	width				: 400px;
	
}

.quiz_thumb_container {
	
	float				: left;
	width				: 247px;	
	padding				: 5px;
	background-color	: #ebebeb;
	border				: 1px solid #aaaaaa;
	margin				: 5px;
	text-align			: center;
	border-radius		: 10px 10px 10px 10px;
	cursor				: pointer;
	color				: #888888;
	display				: flex;
    flex-direction		: column;
    align-items			: center;
	
}

.quiz_thumb_title {
	
	padding:10px;
	background-color:#aaaaaa;
	color:#222222;
	width:228px;
	overflow:hidden;
	font-weight:bold;
	
}

.published_info {
	
	margin				: 2px 0px 7px 0px;
	font-size			: 14px;
	
}

.played_info {
	
	margin				: 6px 0px 1px 0px;
	font-size			: 15px;	
	color				: #444444;
	
	
}

.quizthumb {
	
	width				: 248px;
	height				: 130px;		
}

.quizthumb:hover {
    filter: opacity(50%);
}

.fontpage_header_bar {
	
	font-size			: 25px;		
	padding				: 10px;	
	padding-left		: 20px;
	background-color	: #ffb64f;
	color				: #ffffff;
	border-bottom		: 3px solid #ffa628;	
	border-radius		: 5px;

}

.header {
	
	font-size			: 30px;
	
}

.unselectable {
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
     -khtml-user-select: none;  /* Konqueror */
       -moz-user-select: none;  /* Firefox */
        -ms-user-select: none;  /* Internet Explorer/Edge */
            user-select: none;  /* Non-prefixed version, currently supported by Chrome, Opera and Firefox, */
}


#quiz_answer {
	
	background-color	: #ffffff;
	border				: 1px solid #dddddd;
	border-radius		: 10px;
	padding				: 15px;	
	text-align			: center;
	font-size			: 22px;		
	color				: #000000;
	margin				: 5px;
	width				: 357px;
	float				: left;
	cursor				: pointer;
	height				: 28px;
	overflow			: hidden;
	
}

#quiz_answer:hover {
  background-color: #f0f0f0;
}

.guessed {
	color: #00aa00; /* Green color for correct letters */
}

.wrong {
	color: #aa0000; /* Red color for incorrect letters */
}

.wrong-location {
    color: orange;
}


.letterbox {
	
	width 	: 80px;
	height	: 100px;
	margin-right : 7px;
	margin-bottom : 7px;	
	font-size : 80px;
	font-weight:bold;
	box-shadow: inset 0 -7px 0 0 #777777; /* Add this */
	
}

#word {
		
	background-color	: #cccccc;
	border-bottom		: 2px solid ##165c1d;
	padding				: 15px 25px 15px 25px;
	text-align			: center;
	font-size			: 28px;		
	color				: #000000;
	margin-bottom		: 10px;
	border-radius		: 0px 0px 20px 20px;
	display				: flex;
    justify-content		: center;
	flex-wrap: wrap;  /* add this line */
	
}

#word_score_box {
	
	background-color : #00aa00;
	color : #ffffff;
	padding : 20px;
	border-radius : 10px;
	font-size : 35px;
	margin-bottom : 20px;
	text-align:center;
	display : none;
}

#quiz_question {
	
	background-color	: #dddddd;
	border-bottom		: 2px solid #c5c5c5;
	padding				: 15px 25px 15px 25px;
	text-align			: center;
	font-size			: 28px;		
	color				: #000000;
	margin-bottom		: 10px;
	border-radius		: 0px 0px 20px 20px;
	
}

.quiz_question_header {
	
	background-color	: #ffb64f;	
	padding				: 10px;
	border-bottom		: 3px solid #ffa628;
	text-align			: center;
	font-size			: 26px;	
	color				: #ffffff;
	margin-top			: 10px;
	
}

#quiz_title {
	
	background-color	: #b467d0;
	padding				: 10px;
	border-top			: 3px solid #d9a4ed;
	border-bottom		: 3px solid #902db5;
	text-align			: center;
	font-size			: 36px;
	font-weight			: bold;
	color				: #ffffff;
	
}

#maindiv {
	
	display: flex;
    justify-content: center;
    width: 100%;
	
}

#design_top_menu_div {
		
	height 				: 86px;
	width				: 1200px;
	position			: fixed;	
	background-color	: #ffffff;
	border-bottom		: 1px solid #64d8ec;
	z-index				: 100;
	
}

#logo {
	
	margin-top			: 0px;
	position			: absolute;
	top					: 0px;
	left				: 0px;
	cursor				: pointer;
}

#signin {
	
	/*margin-top			: 5px;
	position			: absolute;
	top					: 11px;
	right				: 0px;*/
}

#content_container_div {
		
	width				: 1200px;					
	display: flex;
    justify-content: center;
    width: 100%;
	
}

#column_left {
	
	background-color	: #ffffff;
	width				: 798px;			
	padding				: 20px;
	border-radius		: 10px;
	border				: 1px solid #92d3de;
	margin-top			: 90px;
	
}

#column_right {
	
	margin-left			: 9px;
	width				: 348px;	
	margin-top			: 90px;
	
}

.column_box {
	
	background-color	: #ffffff;
	width				: 308px;
	padding				: 20px;
	border-radius		: 10px;
	border				: 1px solid #92d3de;
	text-align			: center;
	margin-bottom		: 10px;
	
}

a,
a:visited {
	
	color				: #0000ff;
	
}

.login_form_field {
	
	width				: 300px;
	height				: 45px;
	font-size			: 20px;
	background-color	: #dddddd;
	border				: 0px;
	border-radius		: 5px;
	outline				: none;
		
}

.login_button {
	
	width				: 300px;
	height				: 45px;
	font-size			: 25px;
	background-color	: #ff8800;
	border				: 0px;
	border-radius		: 5px;
	outline				: none;
	color				: #ffffff;
	cursor				: pointer;
		
}

/*#loginbox {
	
	display				: none;
	position			: absolute;
	top					: 10px;
	right				: 0px;
	width				: 300px;
	height				: 65px;
	background-color	: #eeeeee;
	border-radius		: 7px;
	border				: 1px solid #cccccc;
	
}
*/
#loginbox_avatar {
	
	border-radius		: 15px;
/*	
	display				: none;
	position			: absolute;
	top					: 7px;
	left				: 7px;
	border-radius		: 5px;
	cursor				: pointer;
	width				: 50px;
	height				: 50px;
*/	
}
/*
#loginbox_name {
	
	position			: absolute;
	top					: 20px;
	left				: 70px;
	font-size			: 20px;"
	
}*/

#loginbox_camera_image {

	width				: 20px;
	position			: absolute;
	top					: 40px;
	left				: 40px;
	cursor				: pointer;
	
}

#notificationsbox {
	
	cursor				: pointer;
	display				: none;
	position			: absolute;
	top					: 15px;
	right				: 313px;
	width				: 81px;
	height				: 61px;
	
}

#notifications {
	
	display				: none;
	position			: absolute;
	padding				: 3px;
	bottom				: 5px;
	right				: 5px;
	background-color	: #ff0000;
	width				: 22px;
	height				: 18px;
	border-radius		: 3px;
	color				: #ffffff;
	font-weight			: bold;
	font-size			: 16px;
	text-align			: center;
	
}

/*------------------------------------*/

