/****** COMIXCMS CUSTOM CSS ******/
html, body {position: relative; width: 100%; display: block;}
ul.nostyle {list-style: none;}
.dump pre {color: #ffffff !important;}

/****** GENERALI - ALERT ******/
.alertGenerico, .alert {position: absolute; top: 15px; left: 15px; width: 350px; min-height: 50px; margin: auto; visibility: hidden; z-index: 200;}
.alertGenerico {padding: 0; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
.alertGenerico .testo {padding: 15px;}
.alertGenerico.show, .alert.show {visibility: visible;}
.alert.registrazione:not(.formError), .alert.login:not(.formError) {left: 0; bottom: 0; top: 0; width: 100%; padding: 49vh 0;}

/****** GENERALI - BREADCRUMBS ******/
#breadcrumbs {padding: 15px 0; background: #0d0d0d;}
#breadcrumbs a, #breadcrumbs .last {font-size: 12px; color: #c4c4c4; text-decoration: none;}
#breadcrumbs .last {font-weight: bold;}
#breadcrumbs a {transition: .3s all ease;}
#breadcrumbs a:hover {color: #cb161b;}
#breadcrumbs .arrow {color: #c4c4c4;}

/****** GENERALI - BOTTONI ******/
.comroxbutton, .current {font-size: 15px; color: #ffffff; letter-spacing: .5px; font-family: "Cinzel", serif; text-transform: uppercase; font-weight: 600; text-transform: none; padding: 14px 20px; margin-top: 15px; margin-left: 30px; background: #cb161b; border: none; display: inline-block; transition: all 0.1s; -webkit-transition: all 0.1s; -o-transition: all 0.1s; transform: skewX(0); -webkit-transform: skewX(0); -ms-transform: skewX(0);}
.comroxbutton:first-child {margin-left: 0;}
.comroxbutton:hover {text-shadow: 1px 0px 0px #ffffff; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg);}
.current, .current:hover {color: #ffffff !important; margin: 0 !important; background: #cb161b !important; text-shadow: 1px 0px 0px #ffffff !important; transform: skewX(-15deg); -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg);}

/****** GENERALI - TESTO ******/
p, label, .form-control {font-size: 12px;}
h1, h2, h3, h4, label {color: #ffffff;}
label {font-weight: normal;}
a.normal, a.normal:link, a.normal:visited {color: #cb161b; text-decoration: underline; transition: color .1s ease;}
a.normal:hover {color: #ffffff;}

/****** GENERALI - FORM ******/
.form-control {font-family: "Cinzel", serif;}
.form-control, .form-control:disabled, .form-control[readonly] {color: #fff; background-color: transparent; border-left-width: 5px; border-color: #ced4da; border-top: none; border-right: none; border-radius: 0; opacity: 1;}
.form-control[readonly]:focus {color: #ffffff; background-color: transparent; border-color: #ced4da; outline: 0; box-shadow: none;}
.form-control[readonly]:focus-visible {color: #ffffff; text-shadow: none}
.form-control.hidden, .comroxbutton.hidden {display: none; visibility: hidden;}
form .form-control:not(readonly) {color: #000000; background-color: #ffffff;}
/****** GENERALI - 404 ******/
.text-404 {padding: 40px 0 80px;}
/** GENERALE - TOOLTIP **/
.ui-tooltip {font-family: 'Arial', 'sans-serif'); font-size: 12px; padding: 5px; border-radius: 25px;}

/****** GENERALI - PROGRESS BAR ******/
.bar {height: 8px; background-color: #f5f5f5; border-radius: 8px; transition: all 1s ease;}
.bar::before {content: ''; width: calc(var(--percent) * 1%); height: 100%; background: #2486ff; display: flex; justify-content: end; white-space: nowrap; transition: all 3s ease;}





/****** MODALI - ACCOUNT ******/
.account-body ul {padding: 0;}
.account-body li {font-weight: 400; text-transform: none; padding: 6px 0 6px; -webkit-transform: skewX(0); -ms-transform: skewX(0); transform: skewX(0); background: transparent; display: block;}
.account-body li a {min-width: 300px; font-size: 15px; color: #ffffff; font-family: "Cinzel", serif; text-transform: uppercase; padding: 17px 15px 13px 30px; display: inline-block; background: #000; -webkit-transform: skewX(-15deg); -ms-transform: skewX(-15deg); transform: skewX(-15deg); -webkit-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s;}
.account-body li a:hover {background: #a81d1d;}

/****** LOGOUT ******/
#login-admin {position: relative; width: 300px; padding-top: 100px; display: table;}
.logout-mobile {display: none; visibility: hidden;}
.logout {position: fixed; right: 30px; top: 15px; width: 90px; height: 25px; display: block; z-index: 3; overflow-x: hidden;}
.logout a {position: absolute; color: #001e6b; text-decoration: none; transition: transform .3s ease-out; transform: translate(70px, 0px);}
.logout a::after {content: 'Logout'; position: relative; display: inline-block;}
.logout a:hover {transform: translate(10px, 0px);}

/****** HEADER ******/
header .logo {padding: 20px 0;}
header .logo img {max-height: 160px; transition: all ease 0.2s;}
header .logo img:hover {transform: scale(1.1);}

/****** SECTION ******/
main {min-height: calc(100vh - 250px - 54px - 340px);}
section {padding: 70px 0; background: #0d0d0d;}

/*** GIOCATORI - ANIMAZIONE ***/
.giocatori .image {float: left; width: 50px; height: 50px; display: block; overflow: hidden;}
.giocatori .image.Actor1_0 {background: url('../../img/personaggi/characters/Actor1_0.gif') no-repeat;}	/*UOMO - DON'T CROSS CITY*/
.giocatori .image.Actor1_1 {background: url('../../img/personaggi/characters/Actor1_1.gif') no-repeat;}	/*DONNA - DON'T CROSS CITY*/
.giocatori .image.backup_1 {background: url('../../img/personaggi/characters/Actor1_7.gif') no-repeat;}	/*DONNA - DON'T CROSS CITY*/
.giocatori .text {float: left; max-width: calc(100% - 50px);}
/** GIOCATORI - SCHEDA ***/
.giocatori.scheda .pg_dettagli .text {width: 35px;}
.pannelli {}
.pannelli .pannello {min-height: 300px;}
.pannelli .pannello:not(.pannello3)::after {content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: #CB161B; display: block;}
.pannelli .pg_img {width: 100%;}
.pannelli .pg_dettagli {width: 100%; height: auto; font-size: 12px; color: #FFFFFF;}
.pannelli .triangolo {content: ''; position: absolute; top: 0; right: 0; width: auto; height: auto; display: block;z-index: 1; border-style: solid; border-width: 22px 20px 22px 0; border-color: transparent #CB161B transparent transparent; visibility: visible;}
.pannelli .triangolo.hidden {visibility: hidden !important;}
.pannelli .menu {}
.pannelli .menu li {position: relative;}
.pannelli .menu li:hover {cursor: pointer;}
.pannelli .menu li span {position: relative; width: 100%; line-height: 45px; text-align: center; display: block;}
/** GIOCATORI - SCHEDA - PANNELLO STATS **/
.pannelli .pannello1 .pg_dettagli {}
/** GIOCATORI - SCHEDA - PANNELLO ICONE ITEMS **/
.pannelli .pannello3 > div.hidden {display: none; visibility: hidden !important;}
.pannelli .pannello3 .sub {width: 100%; min-height: 200px; display: table;}
.pannelli .pannello3 .item {float: left; background: url('../../img/items/icons.png') no-repeat; border: 1px solid #dbdbdb; border-radius: 5px;}
.pannelli .pannello3 .item:hover {cursor: pointer;}
.pannelli .pannello3 .item:not(:first-child) {margin-left: 14px;}
.pannelli .pannello3 .item:nth-child(n+8) {margin-top: 14px;}
.pannelli .pannello3 .item:first-child, .pannelli .pannello3 .borsa .item:nth-child(8n+8) {margin-left: 0;}
.pannelli .pannello3 .item.clicked {-webkit-box-shadow: 0px 0px 10px 5px #CB161B; -moz-box-shadow: 0px 0px 10px 5px #CB161B; -o-box-shadow: 0px 0px 10px 5px #CB161B; box-shadow: 0px 0px 10px 5px #CB161B;}
.pannelli .pannello3 .descrizione {font-size: 12px;}
.pannelli .pannello3 .nome {font-weight: bold; font-size: 14px; text-decoration: underline;}
.pannelli .pannello3 .testo {font-weight: bold;}