html,body{display: block; margin: auto; height: 100%; width: 100%; background-color: #dfe0e2; font-family: 'Futura', sans-serif; color:#999999;}
ul{list-style: none; margin: 0px;padding: 0px;}
li{}
a,a:hover,a:focus{text-decoration: none;color:#999999;}
.display-inline{ display: inline-block;}
.loading{width: 100%; height: 100%; background-color: #ffffff; position: absolute; left: 0; top: 0; display: none; z-index: 999;}
.loading img{ }
.h100p{height: 100%;}
.pad25px{padding: 25px;}
.pad0{padding: 0px;}
.img-responsive-h{max-height: 100%; width: auto;display: block;}
hr{border-top:1px solid #5d6268;}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th,.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {border: 1px solid #aaa;vertical-align: middle; color:#5d6268;background-color: #fff;}
.table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>th , .table>caption+thead>tr:first-child>th,  .table>colgroup+thead>tr:first-child>th,  .table>thead:first-child>tr:first-child>th{background-color:#eee;}
.actionCol{width: 130px;}
.floar-right{float: right;}
.form-control, input,select{font-size: 22px; height: auto;}
select{font-size: 16px;}
select,select.form-control{padding: 10px 0px; height: 40px;}
.txt_green{color:#009900;}

.mr10{margin-right: 10px;}

.table>tbody>tr.bg-warning>td{background-color: #ffe09a;}

input[type=file] {font-size:12px;}
.smallselect{width: 80px;
    display: inline-block;
    margin-right: 10px;
}
.changerev{color: #ff0000;}
.form-group {
    margin-bottom: 15px;
    position: relative;
}

.box-alert{font-size: 16px; margin-bottom: 20px;}
.box-alert div{padding: 15px 8px;}

body.login{
    background-color: #5d6268;
}


/*  BT */
.nav-tabs>li>a,.nav-tabs>li>a:hover,.nav-tabs>li>a:focus,.btn,.btn:hover,.btn:focus,.btn:visited{background-color: #5d6268; color: #fff; padding: 10px 20px; border-radius: 3px; text-decoration: none; text-shadow: none; box-shadow: none;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,.btn-iob,.btn-iob:hover,.btn-iob:focus,.btn-iob:visited{background-color: #e03a3e; color: #fff; padding: 10px 20px; border-radius: 3px;text-decoration: none; text-shadow: none; box-shadow: none;}
.btn-success:focus, .btn-success:hover,.btn-warning:focus, .btn-warning:hover{padding: 10px 20px; border-radius: 3px; text-decoration: none; text-shadow: none; box-shadow: none;background-position: 0 0px;}

/* font */
.f12{font-size: 12px;}
.f14{font-size: 14px;}
.f16{font-size: 16px;}
.f18{font-size: 18px;}
.f20{font-size: 20px;}
.f24{font-size: 24px;}
.f28{font-size: 28px;}
.f32{font-size: 32px;}
.f40{font-size: 40px;}

/* LOGIN */
.box-login{max-width: 450px; padding: 20px; margin: auto; margin-top: 30px; text-align: center; }
.box-login .thumbnail {padding: 25px;}
.box-login img{max-width: 250px; margin: auto; display: block;}

/* HEADER */
.header{display: block; padding: 20px; background-color: #5d6268; color: #fff; height: 80px; -webkit-box-shadow: 0px 5px 22px 0px rgba(50, 50, 50, 0.75);  -moz-box-shadow:    0px 5px 22px 0px rgba(50, 50, 50, 0.75);  box-shadow: 0px 5px 22px 0px rgba(50, 50, 50, 0.75); z-index: 10; position: absolute; top: 0px; left: 0px; width: 100%;}
.logo-header{height: 50px;}

/* MENU */
.menu{width: 300px; display: inline-block; height: auto; min-height: 100%; background-color: #fcfcfc; border-right: 1px solid #333; padding: 5px; font-size: 22px; color: #5d6268; padding-top: 80px;}
.menu ul{border-top: 1px solid #eeeeee;}
.menu ul li{padding: 25px 15px;border-bottom: 1px solid #eeeeee;display: block;}
.menu ul li a{display: block; width: 100%; height: 100%; color: #5d6268;}
.menu ul li a i{margin-right: 15px;}
.menu .roundGreyIcon{    width: 43px;  height: 43px;  padding: 15px 10px;  color: #fff;  background-color: #5d6268;  border-radius: 100px;  vertical-align: middle; }
.menu .fa.roundGreyIcon{
width: 43px;
height: 43px;
padding: 11px 10px;
color: #fff;
background-color: #5d6268;
border-radius: 100px;
vertical-align: middle;
text-align: center;}

/* CORPO */
.corpo { width: calc(100% - 340px);padding: 0px 20px; display: inline-block; height: 100%; vertical-align: top; background-color: #dfe0e2;padding-top: 80px;}
.title-top{padding: 20px 0px; font-size: 32px; color: #5d6268; }

#testo_documentale{
    width: 100%;
    height: 1200px;
}
.nav-tabs{border-bottom: 1px solid #333; }

/* CHAT */

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
    position:relative;
    padding:15px;
    /*margin:1em 0 3em;*/
    border:1px solid #666666;
    color:#333;
    background:#fff;
    /* css3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
    margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
    margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
    content:"";
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:40px; /* controls horizontal position */
    border-width:9px 9px 0;
    border-style:solid;
    border-color:#666666 transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
    content:"";
    position:absolute;
    bottom:-13px; /* value = - border-top-width - border-bottom-width */
    left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
    border-width:8px 8px 0;
    border-style:solid;
    border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
    top:-20px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:40px; /* controls horizontal position */
    border-width:0 8px 8px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
    top:-13px; /* value = - border-top-width - border-bottom-width */
    bottom:auto;
    left:auto;
    right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 9px 9px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:-20px; /* value = - border-left-width - border-right-width */
    border-width:9px 20px 9px 0;
    border-color:transparent #666666;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
    top:11px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:-18px; /* value = - border-left-width - border-right-width */
    border-width:8px 19px 8px 0;
    border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
    top:10px; /* controls vertical position */
    bottom:auto;
    left:auto;
    right:-20px; /* value = - border-left-width - border-right-width */
    border-width:9px 0 9px 20px;
    border-color:transparent #666666;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
    top:11px; /* value = (:before top) + (:before border-top) - (:after border-top) */
    bottom:auto;
    left:auto;
    right:-18px; /* value = - border-left-width - border-right-width */
    border-width:8px 0 8px 19px;
    border-color:transparent #f0f0f0;
}

.boxmessaggichat{display: block; background-color: #dddddd; border:1px solid #999999;width: 100%; max-height:600px;margin-bottom: 30px;; overflow: auto;padding: 20px}
.rigaballon{display: block;margin: 5px; }
.ballonsx{max-width: 90%; padding: 20px; border-radius: 3px; border: 1px solid #666666; margin-left:5%; background-color: #ffffff; text-align: left; margin-bottom: 10px; float: left;}
.ballondx{max-width: 90%; padding: 20px; border-radius: 3px; border: 1px solid #666666; margin-right:5%;background-color: #f0f0f0;text-align: right;margin-bottom: 10px;float: right;}
.ballonsx .messaggiochat, .ballondx .messaggiochat{margin: 0px;}
.ballonsx .datachat, .ballondx .datachat{font-size: 10px; color:#999999;}
#add_elemento textarea{width: 50%;
    display: block;
    margin: auto;
    border-radius: 5px;
    background-color: #f9f9f9;
    height: 98px;
}
#add_elemento #bt_add_oggetto{
    display: block;
    margin: auto;
    margin-top: 10px;
}
.hiddenChat,.hiddenChatMultipla {
    position: fixed;
    top: 130px;
    left: 50%;
    width: 400px;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    z-index: 100;
    box-shadow: 0px 0px 15px;
    display: none;
}

.topSearch input{
    width: 100px;
    padding: 4px;
    font-size: 14px;
}

.table-report td{ font-size: 12px; min-width: 100px;}
.f_24px{font-size: 24px;}

textarea.codearea{height: 300px; font-size: 10px;}