#clear-left {clear: left;}

#tessera {
    margin: 10px;
    padding:0px;
}

#tessera ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.dragga {
    background: #FCFCFC;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #FAFAFA 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#FAFAFA));
    background: -webkit-linear-gradient(top, #FFFFFF 0%,#FAFAFA 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%,#FAFAFA 100%);
    background: -ms-linear-gradient(top, #FFFFFF 0%,#FAFAFA 100%);
    background: linear-gradient(top, #FFFFFF 0%,#FAFAFA 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FAFAFA',GradientType=0);
    -moz-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 3px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 3px rgba(255, 255, 255, 0.5);
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2), inset 0px 1px 3px rgba(255, 255, 255, 0.5);
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    display: inline-block; padding: 5px; margin-right: 10px; margin-bottom: 10px;
    font-weight:bolder; font-size: 36px; line-height: 40px;
    color: #666 !important; text-shadow: 0px 1px 0px #FFF;
    font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif;

}

#tessera ul li {
    padding: 10px 0px;
    margin: 0px 5px;
    text-align: center;
    border: 2px solid #000000;
    display: inline-block;
    font-size:15pt;
    width: 50px;
    cursor: pointer;
}

#tessera_componi {
    margin: 0px 0px 0px;
    padding: 0px;
}

#tessera_componi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    vertical-align: bottom;
}
#tessera_componi ul li {
    padding: 10px 0px;
    margin: 0px 2px;
    text-align: center;
    width: 50px;
    font-size:15pt;
    /* border: 2px dashed blue;
 
     font-size: 25pt;
     color: blue;*/
    display: inline-block;
}

.widget{
    /*border-radius: 20px 20px 20px 20px !important;*/
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
    overflow: hidden;
}

#tessera_componi ul li.min {
    /*font-size: 20pt;
    color: red;
    border: 2px dashed red;*/
}
#result {border: 0px !important; width:auto !important;}
.result_ok {color: green; font-size: 15pt !important; font-weight: bolder; }
.result_ko {color: red; font-size: 15pt !important; font-weight: bolder; }
/*#tessera_componi .virgola {color: red; font-size: 35pt; font-weight: bolder;}*/
.numero_com span {  padding: 5px; margin: 0px; font-size: 15pt;  text-align:center  }
.middle .tessere {padding:2px;margin:3px;}
.middle .tessere_componi {margin:3px;}
.middle .tessere_componi2 {padding:3px;margin:3px;}
/*.middle .tessere_componi2 {padding:0px;margin:0px;}*/
.middle .tessere > a, .middle .tessere_componi > a {padding:5px 4px !important;}
.middle .tessere_componi2 > a {padding:8px 5px !important;}
.middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
.middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{font-size: 36px;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}
.middle .tessere_componi2 > a > span.title, .middle .tessere_componi2 > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
.middle .tessere_componi2 > a > span.title, .middle .tessere_componi2 > a > span.title{font-size: 28pt;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}
/* .middle .tessere_componi2 > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
 .middle .tessere_componi2 > a > span.title{font-size: 15pt;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}*/
.middle .blu { background: lightblue;}
.middle .green { background: mediumaquamarine;}
.middle .carte {
    background: transparent;
    border:0px;
    -moz-box-shadow: 0px  !important;
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 0px rgba(255, 255, 255, 0.5);
    box-shadow: 0px  !important; }
.middle .carte > a {padding:10px 0px !important;background: transparent;border:0px;}
.middle .carte > a > span.title {color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
.middle .carte > a > span.title {font-size: 36px;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}
.middle .yellow { background: khaki;}
.middle .red { background: lightcoral;}
.middle .virgola {background:transparent;display: inline-block; padding: 2px; margin-right: 5px; margin-bottom: 10px; color:red; font-weight:bolder; font-size:15pt; }

.tessere_list{ margin:5px 0px; padding:0px; }
.tessere_list > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 18pt; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
.list_per { margin:0px 0px 30px 0px !important; padding:0px; }
.list_per > span.title{color: #b0b0b0; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 15pt; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}

.left-componi2 {float:left; width:200px;}
.right-componi2 {float:left; width:200px;margin-left:20px;}
/*.left-tessere-componi2 {float:left; width:130px;}*/
.left-tessere-componi2 {float:left;}
.right-tessere-componi2 {margin-left:140px;}

.tblcom {border:0px; background-color:#ffffff;}
.tblcom>thead>tr>th {border:0px; background-color:#ffffff;}
.none {display:none;}

#tab_equivale th {font-size:18pt;}
#tab_equivale td {font-size:50pt; padding:30px 0px; text-align:center;height:100px;}

.border-red{border-right: 3px dashed red;}
.title-border-red{border-right: 3px dashed red;}
.border-normal{border-right: 1px solid #DDD;}

@media(min-width:768px) and (max-width:979px){
    .middle .tessere {padding:2px;}
    .middle .tessere_componi {padding:3px;}
    .middle .tessere > a, .middle .tessere_componi > a {padding:10px !important;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{font-size: 36px;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}
    #tessera_componi ul li {
        padding: 8px 0px;
        margin: 0px 2px;
        text-align: center;
        width: 45px;
        /* border: 2px dashed blue;
     
         font-size: 25pt;
         color: blue;*/
        display: inline-block;
    }

    #tessera_componi ul li.min {
        /*font-size: 20pt;
        color: red;
        border: 2px dashed red;*/
    }
    #tessera ul li {
        padding: 8px 0px;
        margin: 5px;
        text-align: center;
        display: inline-block;
        width: 45px;
        cursor: pointer;
    }
}
@media(max-width:767px){
    .middle .tessere {padding:2px;}
    .middle .tessere_componi {padding:3px;}
    .middle .tessere > a, .middle .tessere_componi > a {padding:10px !important;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{font-size: 36px;padding: 10px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}
    #tessera_componi ul li {
        padding: 8px 0px;
        margin: 0px 2px;
        text-align: center;
        width: 45px;
        font-size: 14pt;
        /* border: 2px dashed blue;
     
         font-size: 25pt;
         color: blue;*/
        display: inline-block;
    }
    #tessera_componi {
        margin: 30px 0px 0px 0px;
        padding: 0px;
    }
    #tessera_componi ul li.min {
        /*font-size: 20pt;
        color: red;
        border: 2px dashed red;*/
    }
    #tessera ul li {
        padding: 8px 0px;
        margin: 5px;
        text-align: center;
        display: inline-block;
        width: 45px;
        font-size: 14pt;
        cursor: pointer;
    }
}

@media(min-width:1200px){
    #tessera_componi ul li {
        padding: 10px 0px;
        margin: 0px 2px;
        text-align: center;
        width: 50px;
        /* border: 2px dashed blue;
     
         font-size: 25pt;
         color: blue;*/
        display: inline-block;
    }

    #tessera_componi ul li.min {
        /*font-size: 20pt;
        color: red;
        border: 2px dashed red;*/
    }
    #tessera ul li {
        padding: 10px 0px;
        margin: 5px;
        text-align: center;
        display: inline-block;
        width: 50px;
        cursor: pointer;
    }
}
@media(max-width:480px){
    .middle .tessere {padding:2px;margin-right: 5px; margin-bottom: 5px;}
    .middle .tessere_componi {padding:3px; margin-right:5px; margin-bottom:5px}
    .middle .tessere > a, .middle .tessere_componi > a {padding:5px !important;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{color: #333; font-family: 'Helvetica Neue','Helvetica',Arial,sans-serif; font-size: 12px; font-weight: bold; text-shadow: 0 1px white; line-height: 16px;}
    .middle .tessere > a > span.title, .middle .tessere_componi > a > span.title{font-size: 20px;padding: 5px 0px; color: #666; text-shadow: 0px 1px 0px #FFF;}

    #tessera_componi ul li {
        padding: 3px 0px;
        margin: 0px 1px;
        text-align: center;
        width: 32px;
        /* border: 2px dashed blue;
     
         font-size: 25pt;
         color: blue;*/
        font-size:14pt;
        display: inline-block;
    }
    #tessera ul li {
        padding: 3px 0px;
        margin: 5px;
        text-align: center;
        display: inline-block;

        font-size:14pt;
        width: 35px;
        cursor: pointer;
    }
    #tessera_componi {
        margin: 20px 0px 0px 0px;
        padding: 0px;
    }
    #tessera_componi ul li.min {
        /*font-size: 20pt;
        color: red;
        border: 2px dashed red;*/
    }
    #tessera_scomponi .background {
        position: relative;
        color:#7b7b7b;

    }
    #tessera_scomponi a .dropping {
        top:10px;
        left:-5px;
        position: absolute;
        color: #424242;
        padding: 0px;
        margin:0px;
        cursor: pointer;
    }
    .result_ok {color: green; font-size: 10pt !important; font-weight: bolder; }
    .result_ko {color: red; font-size: 10pt !important; font-weight: bolder; }
    .numero_com h3 { padding: 5px; margin: 0px; font-size: 12pt !important; line-height: 12pt;  }
}

#tessera_componi ul .virgolali {border: 0px !important; width:10px !important; padding-bottom:0px !important; margin-bottom:0px !important;}

#scomposti{
    font-size: 11pt;
    color: green;
    height: 200px;
    /*background:black;*/
}

#tessera_scomponi {
    margin: 60px 0px 0px 0px;
    padding: 0px;
}

#tessera_scomponi ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#tessera_scomponi ul li {
    padding: 10px 0px;
    margin: 0px 10px;
    text-align: center;
    border: 2px dashed #000000;
    color: grey;
    float: left;
    width: 50px;
    font-size: 25pt;
    position:relative;
}

#tessera_scomponi a {
    cursor:default;
}

#tessera_scomponi .background, #tessera_componi .background {
    position: relative;
    color:#AAA; /*#7b7b7b;*/
}

#tessera_scomponi a .dropping{
    top:10px;
    left:-5px;
    position: absolute;
    color: #424242;
    padding: 0px;
    margin:0px;
    cursor: pointer;
}

#tessera_componi a .dragging{
    /*    top:22px;*/
    left:0px;
    position: absolute;
    color: #424242;
    padding: 0px;
    margin:0px;
    cursor: pointer;
}

#tessera_scomponi ul li p {
    top:0px;
    left:0px;
    padding: 10px 0px;
    margin: 0px;
    text-align: center;
    width:100%;
    float: left;
    color: #000000;
    font-size: 25pt;
    cursor: pointer;
    position: absolute;
    background: #ffffff;
}

#tessera_scomponi ul li .abs {

}

.droppa {
    padding: 10px 0px;
    margin: 0px 10px;
    text-align: center;
    border: 2px dashed #000000;
    color: #424242;
    display: block;
    float: left;
    width: 50px;
    font-size: 25pt;
}

#tessera_scomponi .virgola {color: red; font-size: 35pt; font-weight: bolder;}
#tessera_scomponi ul .virgolali {border: 0px !important; width:10px !important;}

#verifica {font-size:15pt; padding:10px;cursor: pointer;}

#win,#btn-verifica{position:absolute;right:50px;top:300px;width:50px}
#btn-verifica{cursor: pointer;}

#score {
    /*    position: absolute;
        right: 40px;
        top: 355px;*/
    padding: 29px;
    font-size: 36px;
    /*display: none;*/
    border: 4px solid #D5990D;
    border-radius: 5px;
    color: #000;
    font-weight: bold;
}