:root {
  --color1: #ff5100;
  --color2: #333;
  --color3: #fff;
  --color4: #f1f1f1;
  --color5: #1c1b1a;
  --color6: #31444b;

}


html { 
  margin: 0px;
  padding: 0px; 
}
input{
/*-webkit-appearance: none !important;*/
border-radius: 0;
}
select{
border-radius: 0;
}
body { 
margin: 0;
overflow-x: hidden;
font-size: 13px;
background-color: #FDFDFD;
font-family: Poppins,sans-serif;
color: #52524c;
}

.popup {
  position: relative;
  background: #FFF;
  padding: 0px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
  box-sizing: border-box;
}

.white-popup {
position: relative;
background: #FFF;
padding: 0px;
width: auto;
max-width: 500px;
margin: 20px auto;
box-sizing: border-box;
}

a {
  transition-property: color;
  transition-duration: 1s;
  text-decoration: none;
 
color: var(--color5);
}
a:hover {
  color: var(--color1);
}
a.active {
  color: var(--color1);
}

input[type="datetime-local"], input[type="date"], input[type="number"], input[type="text"], input[type="time"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], textarea, select {
  outline: none;
  border: 0px solid var(--color1);
  border-radius: 5px;
  background-color: var(--color4);
  -o-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  padding: 7px;
  box-sizing: border-box;
  font-size: 13px;
  width: 100%;
}


input[type="button"], input[type="submit"], button, a.button {
  outline: none;
  border: 1px solid var(--color1);
  border-radius: 5px;
  -o-transition: background .3s ease-in-out;
  -moz-transition: background .3s ease-in-out;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
  padding: 7px;
  box-sizing: border-box;
  font-size: 13px;
  background-color: var(--color1);
  color: #fff !important;
  text-align: center;
  display: inline-block;
  width: 100%;

}

table#table a.button{
max-width: 180px;
}

.button_black{
background-color: #333 !important;
color: #fff !important;
}
.button_white{
background-color: #fff !important;
color: var(--color1) !important;
}
.button_stato {
text-transform: uppercase;
font-size: 16px !important;
padding: 15px 10px !important;
outline: none;
border: 1px solid #e8ebf3;
border-radius: 5px;
transition: background .3s ease-in-out;
box-sizing: border-box;
text-align: right !important;
background-repeat: no-repeat;
background-position: left 10px center;
display: inline-block;
width: 100%;
color: #fff !important;
}

button.button_stato:disabled {
  background-color: #DDDDDD !important;
  color: #fff;
}
button.button_stato.active {
  background-color: #4d79f6 !important;
  color: #fff;
}


h1{
font-size: 18px;
margin: 0;
color: var(--color1);
font-weight: 500;
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
border-collapse: collapse;
color: #7286a2;
}

.table-bordered thead {
    background-color: 
    #f1f5fa;
}
.table thead tr th {
    font-weight: 500;
    color: 
    #50649c;
    font-size: 13px;
}
.table td {
    vertical-align: middle;
}
.table-bordered td, .table-bordered th {
    border: 1px solid 
    #eaf0f7;
}
.table td, .table th {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}
.table td a{
color: #7286a2;
}

.datatable{
font-size: 12px;
}

.datatable a{
color: var(--color1);

}
.datatable a:hover{
text-decoration: underline;
}
.datatable th {
font-weight: 500 !important;
font-size: 13px;
color: #50649c;
background-color:#fff;
border-color: #eaf0f7;
}
.datatable th, .datatable thead td{
border-bottom: 3px solid var(--color1) !important;
}
.dataTables_length, .dataTables_filter{
font-weight: 400;
color: #656d9a;
font-size: 13px;
margin-bottom: 15px;
}
.dataTable.no-footer {
border-bottom: 0px !important;
}

.dataTables_info{
margin-top: 15px;
font-size: 13px;
}
.dataTables_paginate {
margin-top: 15px;
font-size: 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #ccc !important;
margin-left: -1px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #f1f5fa !important;
color: #333 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
background: var(--color1) !important;
color: #fff !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
width: 100%;
}


.ui-dialog {
font-size: 12px !important;
}

#bg_login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_login.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
    top: 0px;
}

#container_login{
margin: 10% auto auto auto;
padding: 40px 40px 30px 40px;
max-width: 460px;
width: 100%;
background-color: #00030452;
box-sizing: border-box;
border-radius: 20px;
position: relative;
text-align: center;
}
.form-group {
 margin-bottom: 20px;
 }
.form-group label{
font-weight: 400;
color: var(--color3);
font-size: 13px;
display: inline-block;
margin-bottom: .5rem;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.auth-form-icon {
    width: 32px;
    height: 32px;
    background-color: var(--color1);
    text-align: center;
    line-height: 32px;
    border-radius: 50%;
    position: absolute;
    right: 3px;
    z-index: 100;
    top: 3px;
    color: #fff;
}
.form-control {
    border-radius: 50px !important;
    padding-right: 40px !important;
    padding-left: 20px !important;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
    font-size: 13px;
    border: 1px solid #e8ebf3;
    height: calc(2.3rem + 1px);
    color: #2f5275;
    
    
}
.button_login{
  box-shadow: 0 2px 6px 0 rgba(77,121,246,.0);
  border-radius: 30px;
  font-size: 14px;
  line-height: 24px;
  background-color: var(--color5) !important;
  border: 3px solid var(--color1);
  color: #fff;
}
.account{
text-align: center !important;
margin-top: 1.5rem !important;
}
.account h6{
color: #dbe0ec;
font-size: 13px;
font-weight: 500;
line-height: 1.2;

}

.account h6::before {
    display: inline-block;
    margin: 0 14px 4px 0;
    height: 2px;
    content: " ";
    text-shadow: none;
    background-color: #eff2f9;
    width: 50px;
}
.account h6::after {
    display: inline-block;
    margin: 0 0 4px 14px;
    height: 2px;
    content: " ";
    text-shadow: none;
    background-color: #eff2f9;
    width: 50px;
}


.box_input{
margin-bottom: 15px;
}

/* PLAYER STEP */
#player_step h3{
display: inline-block;
width: 100%;
background-color: #ececec;
box-sizing: border-box;
padding: 10px ;

}

#player_step h3.active{
cursor: pointer;
background-color: #cbdfcb;
}

#player_step div.item_player{
/*display: none;*/
float: left;
width: 100%;
}

.item_prodotto{
float:left; margin:15px; width:100px; text-align:center
}
.item_prodotto img{
width: 100%;
}
#player_step h3 span{
color: var(--color1);
}

#table_debug{

width: 100%;
}
#table_debug thead th {
border-bottom: 1px solid #ccc;
font-weight: bold;
text-align: left;
font-size:12px;
}
#table_debug tbody tr td{
border-bottom: 1px solid #ccc;
padding:3px;
font-size:11px;
}


/* FINE PLAYER STEP */

.mobile{
display: block;
}
.desktop{
display: none;
}
.mobile_inline{
display: inline-block !important;
}
.desktop_inline{
display: none !important;
}