/**********************************************************************
 * VARIABLES
 **********************************************************************/
:root{
    --avatar-size-list: 50px;
    --avatar-size-post: 30px;


    /* forms */
    --input--width: 100%;
    --input--padding: 3px;
    --input--padding-x: 8px;
    --input--padding-y: 0;

    /*--input__padding: 10px;*/
    /*--input__border-width: 1px;*/

    --input--border-radius: 5px;
    --input--font-weight: 500;
    --input--font-size: 1.5rem;

    --transform--scale: 0.65;
    --transform--translatey: -30px;


}




/**********************************************************************
 * GLOBAL
 **********************************************************************/

pre{
    padding-top: 20px;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    /*white-space: -moz-pre-wrap;  !* Mozilla, since 1999 *!*/
    /*white-space: -pre-wrap;      !* Opera 4-6 *!*/
    /*white-space: -o-pre-wrap;    !* Opera 7 *!*/
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-size: .7em;
    color: #000000;

    /*background-color: #ffffff;*/
}

*{
    margin: 0 auto;
    padding: 0;
}

html, body{
    height: 100%;

    background-color: var(--body--background-color);
    background-image: var(--body--background-image);
    background-repeat: repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;

    /*font-family: helvetica, arial, verdana, tahoma;*/
    /*font-family: Verdana, Arial, Helvetica, Sans-Serif;*/
    /*color: var(--font-color);*/
    font-family: "Segeo UI", Arial, Helvetica, sans-serif !important;
    /*font-size: 1.2em;*/
	font-size: 14pt;
}

a, a:visited{
    color: var(--link-color);
    word-break: break-all;
	text-decoration: none;
}

a:hover {
    text-decoration: none;
}





/**************************************************
 * FOOTER
 **************************************************/
#footer{
	/*display: flex;*/
	width: 100%;
	height: 100%;
	/*border: solid 1px;*/
	/*font-size: 12px;*/
}

.footer{font-size: 10pt;}

#footer-left{
	position: relative;
	top: 5px;
	flex: 50%;
	float: left;
	padding: 2px 10px;
	text-align: left;
	vertical-align: middle;
}

#footer-right{
	position: relative;
	top: 5px;
	flex: 50%;
	float: left;
	padding: 2px 10px;
	text-align: right;
	vertical-align: middle;
}





/**********************************************************************
 * NAVIGATION
 **********************************************************************/

.return-div{
    margin-bottom: 10px;
    font-size: .9rem;
    color: var(--link-color);
    cursor: pointer;
	white-space: nowrap;
}





/**********************************************************************
 *	PANEL
 **********************************************************************/
.panel{

	/*max-width: 500px;*/
	margin: 20px auto;
	padding: 20px;

	border: solid 1px var(--panel--border-color);
	background-color: var(--panel--background-color);
	border-radius: 5px;

	font-size: 1.5em;

	overflow-x: hidden;

}

.panel:hover{
	background-color: var(--panel--background-color-hover);
	cursor: pointer;
}

.panel-disabled{

	/*max-width: 500px;*/
	margin: 20px auto;
	padding: 20px;

	border: solid 1px var(--panel--border-color);
	background-color: var(--panel--background-color-disabled);
	border-radius: 5px;

	font-size: 1.5em;
	/*color: #ffffff;*/
	color: #aaa;

	overflow-x: hidden;

}

.panel-disabled:hover{
	cursor: not-allowed;
}





/**************************************************
 * MISC
 **************************************************/

.alert-div{
	background-color: var(--background-color-alert);
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 10px;
	color: var(--font-color-alert);
}


.error-div{
	background-color: var(--background-color-error);
	border-radius: 5px;
	padding: 5px;
	margin-bottom: 10px;
	color: var(--font-color-error);
}