/**
 * @file style.css
 * @brief RGS-GAD Game Index - Style
 * 
 * @date 2020-06-22
 * @version 1.05-200622
 */

html  { user-select:none; }
body  { background-color:#fff; color:#000; font-family:Arial; }

/* Common */
div.row             { margin:0; }
.link               { cursor:pointer; }
img                 { width:100%; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; ser-drag: none; }
ul                  { list-style-type:circle; }
.bold               { font-weight:bold; }
.italic             { font-style:italic; }
div.notes           { font-style:italic; text-align:center; }
.highlights         { font-weight:bold; color:#003399; }
.user,
.title-game         { font-weight:bold; color:#a94442; }
button.cmd          { padding:4px; font-weight:bold; box-shadow:3px 3px 5px #808080; }
div.alert           { width:calc(50 * (1vw + 1vh - 1vmin)); text-align:center; margin:10px auto; }
button.reload       { margin: 10px auto; }
.max-width          { width:100%; }
.btn-shad           { box-shadow:5px 5px 5px #808080; border-radius:5px; font-weight:bolder; cursor:pointer; }
label,
.title-game,
.not-sel { 
	-ms-user-select: none; /* IE 10+ */
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
span.glyphicon-btn-right    { margin:0 10px 0 0; }
span.glyphicon-btn-sm-right { margin:0 5px 0 0; }
span.glyphicon-btn-left     { margin:0 0 0 10px; }

/* Selezionatore Lingua */
div #menuLang                                { width:22px; height:22px; margin:0; padding:0; }
div #selLanguage                             { width:70px; height:40px; cursor:pointer; background-color:#b3b3b3; }
div #selLanguage > div > img.flag            { width:32px; height:22px; margin:9px 0 9px 9px; padding:0; }
div #selLanguage > ul.dropdown-menu          { min-width:70px; width:70px; background-color: #000; margin:0; border:0; padding-top:0; border-top-left-radius:0; border-top-right-radius:0; }
div #selLanguage > ul.dropdown-menu > li     { text-align:center; }
div #selLanguage > ul.dropdown-menu > li > a { width:60px; padding:0; }

/* Jurisdiction */
label#labjurisd { padding:0; margin:0; }
select.jurisdiction { border-radius:5px; }

/* Menu */
div.menu                                { top:-5px; }
div.menu div.cmd                        { width:40px; height:40px; background-repeat:no-repeat; background-size:25px 25px; background-position:center; cursor:pointer; border-radius:25px; }
div.menu.open div.cmd,                  
div.menu.open div.cmd:hover             { background-color:rgba(0,0,0,0.8); border-bottom-left-radius:0px; border-bottom-right-radius:27px; }
div.menu div.cmd:hover                  { background-color:rgba(0,0,0,0.2); }
div.menu ul.dropdown-menu               { min-width:152px; text-align:center; margin:0; padding:10px; background-color:rgba(0,0,0,0.8); border-top-left-radius:0; border-top-right-radius:10px; border:none; color:#fff; }
div.menu ul.dropdown-menu label         { float:left; }
div.menu ul.dropdown-menu li            { width:150px; margin:0 auto; }
div.menu ul.dropdown-menu li > a        { padding:0; width:150px; background-color:transparent; }
div.menu ul.dropdown-menu li.divider    { margin:10px auto; }
div.menu ul.dropdown-menu .link > .icon { display:inline-block; margin:0px; width:150px; height:35px; background-size:150px 35px; background-repeat:no-repeat; background-position:center; vertical-align:middle; }
.btn-group.open .dropdown-toggle { box-shadow:none; }

/* Label Header */
label.labelHeader { padding-top:10px; }

/* Button login/logout */
button#account { width:90px; }

/* Shadow */
div#shadow { display:none; position:fixed; top:0; right:0; bottom:0; left:0; background:#000; opacity:0.6; z-index:100; }

/* Generic Modal */
div.modal                    { padding:0; }
.modal-footer                { padding:10px; text-align:center; }
.modal-header                { padding:10px 15px 10px 10px; text-align:center; }
div.modal label.header       { font-size:20px; padding-top:2px; margin:0; max-width:80%; }
div.modal div.padding        { padding:5px 0; }
div.modal div.padding-top-lg { padding-top:25px; }
div.modal h3           { text-align:center; color:#a94442; font-weight:bold; margin:0 0 5px 0; }
div.modal-body button,
div.modal-body input[type=submit]  { font-weight:bold; }
div.modal-header button.close       { width:10%; font-size:42px; text-align:right; float:right; color:#e60000; outline:none; }
div.modal-header button.close:hover { opacity:1; }
div.modal-header div.cont          { width:10%; height:34px; position:relative; float:left; display:inline-block; margin:0; }
div.modal-header div.cont img.logo { width:36px; height:36px; display:block; position: absolute; top:50%; left:10%; transform:translate(-16%,-50%); }

/* Alert Cookie */
div.alert-cookie        { position:fixed; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.8); text-align:center; padding:10px 0; display:none; z-index:110; }
div.alert-cookie > span { color:#fff; }

/* Page */
div.top-header               { display:table; width:100%; background-color:#000; color:#fff; border-bottom:1px solid #fff; }
div.top-header .link         { display:inline-block; text-align:center; }
div.top-header .link.active  { background-color:#b3b3b3; }
div.top-header .link > .icon { display:inline-block; margin:0px; width:40px; height:40px; background-size:32px 20px; background-repeat:no-repeat; background-position:center; vertical-align:middle; }

div.top-header .link > .aams_01 { width:104px; background-size:90px 35px; }
div.top-header .link > .aams_02 { width:52px;  background-size:52px 30px; }
div.top-header .link > .mag     { width:45px;  background-size:30px 30px; }

div.header        { padding:10px 0 5px 0; margin:0; display:table; width:100%; border-bottom:solid 3px #fff; }
div.header i.logo { display:inline-block; text-align:center; width:100%; height:18vmin; background-size:auto 18vmin; background-position:center; background-repeat:no-repeat; margin:auto; padding:2vmin 1%; vertical-align:middle; }

div.body              { background-color:#fff; display:table; text-align:center; margin:0 auto 50px auto; max-width:1024px; width:100%; }
div.body > div.search { width:63%; text-align:center; margin:10px auto; max-width:256px; }

div.body > div#games                       { display:table; width:100%; text-align:center; margin:0; padding:0; }
div.body > div#games > div.filtr-container { display:table; width:100%; }

div.spec-game > div.banner { width:100%; height:100%; opacity:0; background-color:#000; }

div.filter-item { margin-bottom:10px; }

div.filtr-item            { padding:2px; box-shadow:5px 3px 8px #9E9E9E; }
div.filtr-item.select     { box-shadow:8px 3px 8px #3ea02b; }
div.filtr-item > div.game { position:relative; background-size:100%; background-repeat:no-repeat; max-width:100%; cursor:default; }

div.overlay           { background-color:#000; opacity:0; }
div.cmd-overlay       { opacity:0; color:#fff; }
div.overlay,
div.cmd-overlay       { position:absolute; top:0; text-align:center; width:100%; height:100%; }
div.cmd-overlay label { font-size:calc(1.8 * (1vw + 1vh - 1vmin)); font-weight:bold; font-style:italic; }

div.cmd-overlay > div.cmd                   { display:none; margin:auto auto; text-align:center; width:100%; position:relative; top:20%; }
div.game.active > div.cmd-overlay > div.cmd { display:inline-flex; }

div.exec { margin:0 auto; font-weight:bold; cursor:pointer; }
i.exec   { width:50px; height:50px; background-repeat:no-repeat; background-size:auto 50px; background-position:center center; vertical-align:middle; display:block; padding:0; margin:0 auto; cursor:pointer; }

/* Sel Type */
div#modal_sel_play_type .modal-body       { padding:10px 0; color:#fff; }
div#btn-goplayreal { background-color:#5cb85c; border:1px solid #4cae4c; }
div#btn-goplayfree { background-color:#5bc0de; border:1px solid #46b8da; }
div#btn-goplayreal > h4,
div#btn-goplayfree > h4 { line-height:1.25; font-size:28px; }

/* Play Real */
div#modal_play_real input[type=submit] { text-transform:uppercase; }

/* Contacts */
div#modal_contacts a.contact   { text-decoration:none; }
div#modal_contacts div.version { text-align:right; font-style:italic; color:#646867; padding-right:10px; }

/* Footer */
div.footer          { display:table; position:fixed; bottom:0; width:100%; height:40px; color:#fff; background-color:#000; border-top:1px solid #fff; padding:2px 0; z-index:101; }
div.footer.layout   { background-color:#000; border-top:1px solid #fff; }
div.footer > button { padding:5px; margin:0; }
div.footer .link         { display:inline-block; text-align:center; }
div.footer .link > .icon { display:inline-block; margin:0px; width:35px; height:35px; background-size:35px 35px; background-repeat:no-repeat; background-position:center; vertical-align:middle; }

/* Coming Soon */
div.comingsoon       { display:none; position:fixed; bottom:40px; width:100%; background-color:#000; color:#fff; z-index:102; overflow:hidden; }
span#ic-comingsoon   { padding:2px 0 0 0; }
div.comingsoon div   { display:inline-flex; padding:0; margin:0; }
div.comingsoon img   { vertical-align:middle; width:calc(25 * (1vw + 1vh - 1vmin)); height:calc(20 * (1vw + 1vh - 1vmin)); padding:1px 5px; }
div.comingsoon span.cs-ico-left,
div.comingsoon span.cs-ico-right { font-size:30px; margin:10px 0; cursor:pointer; position:fixed; top:auto; background-color:#3ea02b; border-radius:15px; }
div.comingsoon span.cs-ico-left  { left:10px; }
div.comingsoon span.cs-ico-right { right:10px; }

/* Scroll top */
#scrolltop        { display:none; text-transform:uppercase; }
#scrolltop > span { padding:0; font-size:139%; }

/* Modal Info */
div#modal_info.find div.modal-dialog              { border:1px solid #fff; border-radius: 7px; }
div#modal_info.find div.modal-content             { background-color:#f7f4f4; }
div#modal_info.find div.modal-header              { background-position:center; background-color:transparent; background-repeat:no-repeat; background-size:auto; height:66px; background-color:#000; border-top-left-radius:5px; border-top-right-radius:5px; }
div#modal_info.find div.modal-body                { padding-top:5px; }
div#modal_info.find span.feature > ul             { padding:0 0 0 10px; text-align:left; }
div#modal_info.find th.header                     { color:#a94442; font-size:120%; }
div#modal_info.find tr.volatility > td > span     { color:#3ea02b; cursor:help; font-size:24px; }
div#modal_info.find tr.volatility > td:last-child { line-height: 0.75; }

div#modal_info      div.header-inf { display:block; }
div#modal_info      div.select     { display:block; }
div#modal_info.find div.header-inf { display:none; }
div#modal_info.find div.select     { display:none; }

div#modal_info      div.description { display:none; }
div#modal_info      div.table-info  { display:none; }
div#modal_info.find div.description { display:block; }
div#modal_info.find div.table-info  { display:block; }


.btn-choice  { width:80px; border:1px solid darkcyan; padding:10px; }

@media only screen and (max-width:799px) and (orientation: landscape) {
	div.filtr-container > div.col-xs-6 { width:33.33333333%; }
}

@media only screen and (max-width:320px) {
	div.top-header > div { padding:0; }
	div.header > div { padding:0 3px; }
	div#btn-goplayreal > h4,
	div#btn-goplayfree > h4 { font-size:23px; }
}

@media only screen and (max-width:450px) {
	div.filter-item label { font-size:3.5vw; }
	i.exec { width:30px; height:30px; background-size:auto 30px; }
	div.header > div { padding:0 5px; }
}

@media only screen and (min-width:451px) and (max-width:640px) {
	div.filter-item label { font-size:2.5vw; }
	i.exec { width:40px; height:40px; background-size:auto 40px; }
}

@media only screen and (min-width:1280px) {
	div.filter-item label { font-size:1.3vw; }
	div.comingsoon img { width:calc(20 * (1vw + 1vh - 1vmin)); height:calc(15 * (1vw + 1vh - 1vmin)); }
}

@media only screen and (min-width:1920px) {
	div.filter-item label { font-size:calc(0.8 * (1vw + 1vh - 1vmin));; }
	div.comingsoon img { width:calc(20 * (1vw + 1vh - 1vmin)); height:calc(15 * (1vw + 1vh - 1vmin)); }
}