/** * Skin Advanced
	* Il presente files regola gli stili CSS della homepage
	* @author Blancks
*/

/** * STILI DEI CONTENUTI DEL SITO */
/** * Skin advanced
	* @author Blancks
*/

@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap');

@font-face {
  font-family: "elnath";
  src: url("/themes/homepage/advanced/ELNATH.otf");
}

:root {
  --background: #0E172A;
  --backgroundRGB: 14, 23, 42;
  
  --shadow: #000;
  
  --accent: #CFD5D5;
  --accentRGB: 207, 213, 213;
  
  --accenthover: #D99C2B;
  --accenthoverRGB: 217, 156, 43;
  
  --accenthoverlight: #CEB038;
  --accenthoverlightRGB: 207, 176, 56;
  --accenthovermedium: #776520;
  --accenthovermediumRGB: 119, 101, 32;
  --accenthoverdark: #201B09;
  --accenthoverdarkRGB: 32, 27, 9;
  
  --accenthoverbluelight: #6FA6D2;
  --accenthoverbluelightRGB: 111, 166, 210;
  --accenthoverbluemedium: #4F7495;
  --accenthoverbluemediumRGB: 79, 116, 149;
  --accenthoverbluedark: #31495D;
  --accenthoverbluedarkRGB: 49, 73, 93;

  --border: #04070D;
  --borderRGB: 4, 7, 13;
  --textdark: #444;
  --textdarkRGB: 68, 68, 68;
  --text: #666;
  --textRGB: 102, 102, 102;
  --textmedium: #a1a1a1;
  --textmediumRGB: 136, 136, 136;
  --textlight: #888;
  --textlightRGB: 161, 161, 161;
  --textwhite: #c4c4c4;
  --fontBody: Source Serif Pro;
  --fontitle: 'elnath';
}

/** * Parametri di default nella pagina
*/
body {
    padding: 0;
    margin: 0;
    color: var(--textmedium);
    font-family: "Inconsolata", monospace;
    font-size: 11px;
    background: url("img/losnodobg.png") center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.transparent_body {
    background-color: transparent;
    background-image: none;
}

div, ul, li {
    margin: 0;
    padding: 0;
}

.blank {
    clear: both;
}

a, a:visited {
    color: var(--accent);
    text-decoration: none;
    font-weight: bolder;
}

a:hover {
    color: var(--accenthover);
    font-weight: bolder;
}

input, textarea, select {
  width: auto;
  margin-bottom: 3px;
  background: var(--background);
  border: 0.5px solid rgba(var(--accentRGB), 0.15);
  padding: 3px 6px;
  color: var(--textmedium);
  outline: none;
}

input[type='text'], input[type='password']{
  padding: 3px;
  color: var(--textlight);
  background: linear-gradient(90deg, var(--accenthoverbluedark) 20%, var(--background) 100%);
  outline: none;
  border: 0.5px solid var(--border);
  --aug-br1: 9px; /*Imposta la dimensione del bordo tagliato in basso a sinistra*/
}

input[type='text']:focus, input[type='password']:focus {
  box-shadow: 0 0 18px 2px rgba(var(--accenthoverblueRGB), 1), 0 0 0 1px var(--accenthoverblue) inset;
  background: linear-gradient(90deg, var(--accenthoverblue) 10%, var(--background) 100%);
}

input[type='submit'] {
    width: auto;
}

textarea {
    height: 100px;
}

div.iscrizioni_chiuse {
  padding: 20px;
  background: rgba(var(--accenthoverbluedarkRGB), 0.05);
  color: var(--textlight);
  border: 0.5px solid rgba(var(--accentRGB), 0.15);
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
}

div.iscrizioni_chiuse a { 
  color: var(--accenthover) !important;
  text-decoration: none !important;
  font-weight: bolder !important;
}

div.iscrizioni_chiuse a:hover { 
  color: var(--accent) !important;
  text-decoration: none !important;
  font-weight: bolder !important;
}

.button {
  width: 165px;
  padding: 10px;
  position: relative;
  background: rgba(Var(--accentRGB), 0.025);
  border: 1px solid rgba(Var(--accentRGB), 0.1);
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 400;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.75, 0, 0.25, 1);
}

.button:hover {
  position: relative;
  border: 1px solid rgba(Var(--accentRGB), 0.1);
  background: rgba(Var(--accentRGB), 0.025); 
  box-shadow:
    inset 0 0 8px rgba(var(--accenthoverblueRGB), 0.2),
    0 0 2px rgba(var(--accenthoverblueRGB), 0.2);
  animation: flicker 0.07s;
  animation-iteration-count: 2;
  transition: all 0.35s cubic-bezier(0.75, 0, 0.25, 1);
  color: var(--accenthover);
}

/* === Decorators === */

.decorator {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid transparent;
  animation: flicker 0.1s;
  animation-iteration-count: 3;
  transition: all 0.35s cubic-bezier(0.75, 0, 0.25, 1);
}

.decorator.top {
  top: -1px;
  border-top: 1px solid var(--accenthover);
}

.decorator.bottom {
  bottom: -1px;
  border-bottom: 1px solid var(--accenthover);
}

.decorator.left {
  left: -1px;
  border-left: 1px solid var(--accenthover);
}

.decorator.right {
  right: -1px;
  border-right: 1px solid var(--accenthover);
}

/* === Hover Effects === */

.button:hover a {
  color: var(--accenthover);
}

.button:hover .decorator.top {
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--accenthover);
}

.button:hover .decorator.bottom {
  width: 10px;
  height: 10px;
  border-bottom: 1px solid var(--accenthover);
}

.button:hover .decorator.left {
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--accenthover);
}

.button:hover .decorator.right {
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--accenthover);
}


div.form_label {
  font-size: 13px;
  margin: 5px auto;
  color: var(--accenthoverbluemedium);
}

div.form_field {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.form_field input {
  width: 80%;
  margin: 0 auto;
}

div.form_field select {
  width: 30%;
  margin: 0 auto;
}

div.form_info {
  font-size: 13px;
  color: var(--text);
}

select.day, select.month, select.year {
    width: 60px;
    display: inline-block;
}


/** * Tabelle * **/

div.form_field table { 
  width: 80%;
  table-layout: fixed;
}

div.form_field td { 
  padding: 0 3px;
  text-align: center;
  color: var(--accenthover);
  text-transform: uppercase;
}

div.form_field td select {
  width: 90%;
  margin: 4px auto 0 auto;
}


/** * Stile dei messaggi d'avviso dell'engine */
div.warning, div.error {
    background-color: #cf8888;
    font-size: 12px;
    text-align: center;
    margin: 15px;
    font-weight: bolder;
    padding: 10px;
    border: solid 1px #800;
    color: #970b0b;
}

div.warning.mysql, 
div.error.mysql {
	text-align:left;
	font-weight:normal;
}

div.warning.mysql summary, 
div.error.mysql summary{
	margin-top:1em;
	font-weight:bold;
}

div.link_back {
  position: relative;
  margin: 0 auto;
  padding: 5px;
  text-align: center;
  
  background: linear-gradient( to right, transparent 10%, var(--background) 50%, var(--background) 50%, transparent 90% );
}

div.link_back a {
  font-size: 14px;
  font-weight: 400;
  color: var(--accenthoverbluemedium) !important;
  text-decoration: none !important;
}

div.link_back a:hover {
  font-size: 14px;
  font-weight: 400;
  color: var(--accenthoverbluelight) !important;
}

div.link_back::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.5px;
  width: 100%;
  height: 0.5px;
  background: linear-gradient( to right, transparent 10%, rgba(Var(--accentRGB), 0.2) 50%, rgba(Var(--accentRGB), 0.2) 50%, transparent 90% );
}

div.link_back::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.5px;
  background: linear-gradient( to right, transparent 10%, rgba(Var(--accentRGB), 0.2) 50%, rgba(Var(--accentRGB), 0.2) 50%, transparent 90% );
}



/** * Titolo del sito
*/
h1 {

}

/** * Stile del link sul titolo */
h1 a, h1 a:visited, h1 a:hover {
    color: var(--accent);
    text-decoration: none;
    font-family: var(--fontitle);
    font-size: 42px;
}

/** * Stili del form di login
*/
div.logincontent {
  grid-area: logincontent;
  padding: 30px 20px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  gap: 15px;
}

div.login_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

div.cat-shape {
  padding: 3.3em 2em 2em 2em;
  background: rgba(Var(--accentRGB), 0.026);
  --aug-border-bg: rgba(Var(--accentRGB), 0.1);
  --aug-border-all: 0.5px;
}

div.cat-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 8px 2px rgba(var(--accentRGB), 0.05), inset 0 0 8px 2px rgba(var(--accentRGB), 0.05);
  border-radius: inherit;
  pointer-events: none;
}

div.cat-shape strong {
 font-size: 14px;
 font-weight: 400;
 color: var(--textmedium);
}

/** * stile che ingloba i gruppi label/input
*/
div.login_form div {
    margin-bottom: 4px;
}

div.cat-shape form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/** * Stile per le label dei form
*/
span.form_label {
  width: 35px;
  display: inline-block;
  color: var(--textmedium);
  text-align: right;
}

span.form_label_popup {
  color: var(--textmedium);
}

div.login_form input[type=checkbox]{
	width: auto;
	vertical-align: middle;
}

/** * Stile per il bottone del login
*/
div.login_form input[type='submit'] {
    width: auto;
}

/** * Contenuti principali della pagina
*/

/** * Titolo della sezione */
h2 {
  position: relative;
  margin: 0 auto 15px auto;
  padding-bottom: 5px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--accent);
  font-weight: 400;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient( to right, transparent 10%, rgba(Var(--accenthoverRGB), 0.7) 50%, rgba(Var(--accenthoverRGB), 0.7) 50%, transparent 90% );
}

/** * Struttura corpo contenuti pagina 
*/
div.content_body {
  grid-area: content_body;
  height: 95%;
  max-height: 800px;
}

div.panels_box, div.form_gioco form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

div.pagina_iscrizione {
  height: 95%;
  background: rgba(var(--backgroundRGB), 0.95);
  padding: 20px;
}

div.container_article_home {
  height: 95%;
  display: flex;
  background: rgba(var(--backgroundRGB), 0.95);
  padding: 20px;
}

/** * Contenuti testuali */
div.content_body a {
    color: #999;
    text-decoration: underline;
}

div.disclaimer_iscrizione {
  text-align: justify;
  color: var(--text);
  font-size: 14px;
}

/** * Men� di navigazione
*/
div#content > div.sidecontent_menu {
  display: flex;
  margin: 100px auto 0 40px;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 40px;
}

/** Stile generico contenitore per altri contenuti nella sidebar
*/
div.side_modules {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #b9b9b9;
    padding: 10px;
    -moz-border-radius: 5px; /* Bordi arrotondati */
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

div.side_modules .form_label {
    font-size: 10px;
    margin-right: 2px;
}

/** * Recupero password */
div.pass_rec {
    margin-top: 5px;
}

input#passrecovery {
    width: auto;
    background: linear-gradient(90deg, var(--accenthoverbluedark) 20%, var(--background) 100%);
}

input#username {
    width: auto;
    background: linear-gradient(90deg, var(--accenthoverbluedark) 20%, var(--background) 100%);
}

input#password {
    width: auto;
    background: linear-gradient(90deg, var(--accenthoverbluedark) 20%, var(--background) 100%);
}

/** * Footer info */
div#footer div {
    background-color: transparent;
    padding: 5px 0 3px 0;
}

div#footer p {
    color: var(--textlight);
    font-size: 12px;
    margin: 0;
    padding: 0 15px 2px 15px;
    text-align: right;
}

/** * LAYOUT SITO */

/** * Struttura contenitore di tutto il sito 
*/
div#main {

}

/** * Larghezza della struttura del sito
*/
div#site_width {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header' 
    'content'
    'footer';
  overflow: hidden;
}

/** * Header
*/
div#header {
    margin: 0 40px;
	grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 50px;
    grid-template-areas:
    '. titlecontent';
}

div#header div.sidecontent_menu {
    grid-area: sidecontent_menu;
}

div#header div.titlecontent {
    grid-area: titlecontent;
    display: flex;
    flex-direction: column;
    align-items: end;
}

/** * Corpo contenuti della pagina
*/
div#content {
    width: 100%;
    margin: 0 auto;
	grid-area: content;
    display: grid;
    grid-template-columns: 245px 1fr 325px;
    grid-template-areas:
    'sidecontent_menu content_body logincontent';
    align-items: start;
    justify-content: center;
}

div#content div.sidecontent_menu {
    grid-area: sidecontent_menu;
}

div#content div.online_now {
  width: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
}

div#content div.online_now strong {
  color: var(--accenthover);
  font-weight: 400;
  font-size: 14px;
}

/** * pie di pagina
*/
div#footer {
	grid-area: footer;
}

div#footer2 {
  margin: 0 15px 2px 15px;
  display:flex;
  flex-direction: row;
  align-items:center;
  justify-content: end;
  gap: 10px;
}

/** *** Fine stili regolatori del layout *** */

/**
 * TABELLA
 */

div.elenco_record_gioco {
    padding: 20px;
}

div.elementi_elenco {
    text-align: center;
}

div.titoli_elenco,
span.titoli_elenco {
  margin: 0 auto 15px auto;
  text-transform: uppercase;
  text-align: center;
  color: var(--accenthover);
  font-size: 24px;
}

img.colonna_elenco_messaggi_icon {
    width: 30px;
    height: 30px;
}

div.controlli_elenco {
    width: 60px;
}

div.controllo_elenco {
    width: 20px;
    float: left;
}

div.controllo_elenco input[type='image'] {
    width: 15px;
}

div.elenco_gioco table {
  border-collapse: separate;
  border-spacing: 5px;
}

td.casella_elemento {
    font-size: 14px;
    padding: 10px;
    background-color: rgba(Var(--accentRGB), 0.026);
    border: 0.5px solid rgba(Var(--accentRGB), 0.1);
    color: var(--textmedium);
}

div.controllo_elenco input[type='image'] {
    height: 15px;
    width: 15px;
    display: block;
    margin: 2px 5px;
}

div.elementi_elenco a {
    font-weight: bolder;
}

div.elementi_elenco a:hover {
    text-decoration: none;
}

div.welcome_message {
  font-size: 14px;
}

div.username {
  font-size: 14px;
  margin-bottom: 50px;
}

div.welcome_message b {
  color: var(--accenthoverbluelight);
}

div.username b {
  color: var(--accenthoverbluelight);
}