.summary{
background-color:;
height: 100%;
width: 100%;
}


.bigdiv {
    background-color:#ddf;
    height: auto;
    width: 100%;
}

.sectorp:hover{
      cursor: pointer;
}




.row1{
padding: 1%;	
height: 10%;

}

.row2{
padding: 1%;	
height: 40%;


}


.row3{
padding: 1%;	
height: 38%;


}


.ama{
  background-color: black!important;
}

.subrow{
width:22%;	
background:#FFF;
margin: 4px;
height:95%;
display:inline-block!important;
box-shadow:  0 10px 10px #777;
border-radius: 5px;
padding: 2px;
}





.subrow2{

background:#FFF;
margin: 4px 0px;
height:95%;
width: 49%;
display:inline-block!important;
box-shadow:  0 10px 10px #777;
border-radius: 5px;
padding: 2px;
position: relative;

}

#container {
  height:95%;
}

.div2 {
  float:right;
}

.subrow3{
	
background:#FFF;
margin: 4px;
height:95%;
width: 98%;
display:inline-block!important;
box-shadow:  0 10px 10px #777;
border-radius: 5px;
padding: 2px;
}




.image{
background-color:red;
height:100%;
width:20%;
float:left;


}



.total{

width:60%;
float: right;

}



.subtotal{

height:50%;
width: 30%;
float: left;
display:inline-block!important;
box-shadow:  0 10px 10px #777;


}

.subtotal1{

height:50%;
width: 49%;
float: right;
display:inline-block!important;
box-shadow:  0 10px 10px #777;


}

.sub{
  width: 100%;
  height:29%
  bottom:0;
}



#piechart{

height:100%!important;
width:100%!important;
position:inherit!important;

}

#reg_rankn{

height:100%!important;
width:100%!important;
position:inherit!important;

}


.hidden{
display: none;

}






.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



.none{

  display: none!important;
}

@media screen and (max-height: 770px) {
  .bigdiv {
    background-color: #ddf;
    height: auto;
    overflow-y: auto;
}



.topsummary {
  height: 12vh;
}

.topsummary_details{
  width:70%;
  display: inline-block;
  float: right;
}

.topsummary_details_head{
  margin-top:4px!important;
}

.topsummary_details_highlights {
  
  margin: 3px!important;
}

.topsummary_details_text {
  text-align: center;
  color:#aaa;
  margin: 0px;
}


.widget2_1 {
  padding-top:10px!important;
  height: 10.6vh!important;
}

.widget2_2 {
  padding-top:10px!important;
  height: 24.8vh!important;
}

}


/* tablets */
@media screen and (max-width:900px) {
  .width4 {
    width:22%!important;
  }
}

/* desktop */
@media screen and (min-width: 992px) {
  
    
}

/* tablets */
@media screen and (min-width: 1280px) {
  
    
}


.width1 {width:100%;} .width2 { width:49%;} .width3{width:32%;} .width4 {width: 22.3%;} .width5 { width: 19%;} .width6 { width: 16.67%;} .width7{width: 14.29%;} .width8 {width: 12.5%;}

.width1,.width2,.width3,.width4,.width9,.width10 {
  display: inline-block;
  margin: auto;
  padding: 5px;
}

/* tablets */
@media screen and (max-width:1282px) {
  .width4 {
    width:21%!important;
  }
  .widget2 {
    width:22%!important;
    margin-right: 11px!important;
  }
}

.row ={
  width: 100%;
  display: block;
}

.topsummary {
  margin: 5px;
  margin-top: 15px;
  border: 1px solid #c4c4f7;
  height: 9vh;
  border-radius: 5px;
  background-color: #fff;
}

.topsummary_icon {
  width:30%;
  display: inline-block;
  float: left;
  background:rgba(0, 184, 255, 0.28);
  height: 100%;
  border-radius: 3px;
  
}


.topsummary_icon1 {
  width:30%;
  display: inline-block;
  float: left;
background: #ffe06e;
  height: 100%;
  border-radius: 3px;
  
}


.topsummary_icon2{
  width:30%;
  display: inline-block;
  float: left;
background: rgb(255, 233, 254);
  height: 100%;
  border-radius: 3px;
  
 
}


.topsummary_icon3 {
  width:30%;
  display: inline-block;
  float: left;
background: #98fdef;
  height: 100%;
  border-radius: 3px;

}



.topsummary_details{
  width:70%;
  display: inline-block;
  float: right;
}

.topsummary_details_head{
  
  text-transform: uppercase;
  margin: 0px;
  margin-top: 2px;
  text-align: center;
  font-family:Helvetica; 
  color:#36bce5;
}

.topsummary_details_highlights {
  text-align: center;
  color:#fd935a;
  font-weight: bold;
  margin: 0px;
}

.topsummary_details_text {
  text-align: center;
  color:#aaa;
  margin: 0px;
}

.widget1 {
  width: 36%;
  margin: 5px;
  border: 1px solid #c4c4f7;
  display: inline-block;
  border-radius: 5px;
  background-color: #fff;
}

.widget1-large {
  width: 73%;
  margin: 5px;
  border: 1px solid #c4c4f7;
  display: inline-block;
  border-radius: 5px;
  background-color: #fff;
}

.widget2 {
  width: 23%;
  margin: 5px;
  float: right;
  margin-right:7px;
  display: inline-block;
}

.widget2_1 {
  border: 1px solid #c4c4f7;
  height: 11.6vh;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom:6px; 

  padding-top:10px;
}

.widget2_2 {
  border: 1px solid #c4c4f7;
  height: 25.8vh;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom:6px; 

  padding-top:10px;
}

.chartdivs {
  height: 40vh;
}

.widget3 {
  width: 48%;
  margin: 5px;
  border: 1px solid #c4c4f7;
  display: inline-block;
  border-radius: 5px;
  background-color: #fff;
}



#container{

height: 100%;
width: 100%;

}


#dist_rankn{

height: 100%;
width: 100%;

  
}




.topsummary_details:hover{




}




.topsummary_details:active{

background-color: #A9A;


  
}


#oveli{

width: 100%;
height:100%;
background-color: rgba(185, 183, 183, 0.24);
position: absolute;
z-index: 100;




}




a{

  text-decoration: none!important;
}







 * {
    padding: 0;
    margin: 0;
  }
/*  body {
    margin: 30px;
  }*/

  .tabs {
    overflow: hidden;
    list-style: none;
  }
  .tabs li {
    float: left;
/*    margin-right: 10px;*/
    border: 1px solid #ccc;
    border-bottom: 0;
  }
  .tabs a {
    display: block;
    padding: 5px;
    width: 100px;
  }
  .tabs a.active {
    background: #efefef;
  }
  .tab-content > div {
    /*padding: 5px;*/
    border-top: 1px solid #ccc;
    width: 100%
    height:100%;
  }

  button {
    padding: 5px;
  }

  .admin-block {
    display: block;
    margin-bottom:10px;
    width: 100%;
  }

  .admin-text {
    width:45%;
    display:inline-block;
  }

  .admin-select {
    width:50%;
    display:inline-block;
  }



  .do_hide{
    display: none!important;


  }




  .top_buttton {
    display: inline-block;
    width: 20%;
    height: 50px;
    margin: 2px 5%;
    border: 3px solid #449999;
    border-radius: 6px;
}




#delz{

width: 100%;
height:100%;
/*background-color: rgba(185, 183, 183, 1);*/
position: absolute;
z-index: 100;




}


#progress{
width: 100%;
height:100vh;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 1000;
top: 0px;
padding: 4vh 15%;
}

/* ------------------------------- Start Slider ----------------------------------------- */
ul {padding: 0; list-style: none}
.slider {
  padding-top: 0px;
  margin: 2px auto;
  height: 180px;
  width: 90%;
  overflow: hidden;
  position: relative;
}


/* ------------------------------- */

.small2 {
  font-size: 14px;
  margin:0px  40px;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.small2 .small-ul {
  display: flex;
  position: absolute;
  top: 0
}

.small2 .small-ul li {
  transition: width 1s ease-in-out;
  margin-left: -4px;
}

.small2 .small-span {
  position: absolute;
  top: calc(50% - 20px);
  opacity: .4;
  cursor: pointer;
  color: #FFF;
  text-shadow: 1px 2px 10px rgba(0, 0, 0, 1);
}

.small2 .small-span:hover {
  opacity: .5
}

.small2 .small-span:first-of-type {
  right: 10px
}

.small2 .small-span:last-of-type {
  left: 10px
}

.sect-buttonz {
  width: 310px;
  height: 150px;
  background:#fff;
  border-radius: 8px;
  border: 3px solid #5f7ec4;
}

.actives{
  width: 310px;
  height: 150px!important;
  background:#3d9713;
  border-radius: 8px;
  border: 3px solid #fefefe;
}




#bg {
  color: #000;
  padding: 22px 0;
  position: absolute;
  left: 0;
  top: 16%;
  height: 20%;
  width: 0;
  z-index: 10;
  overflow: hidden;
}
#bg:before {
  content: '';
  position: absolute;
  left: -1px;
  top: 1px;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: url(https://raw.github.com/drygiel/csslider/master/examples/themes/fruit.jpg) 1px 23%;
  -webkit-filter: blur(7px);
}
#bg:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
#bg div {
  -moz-transform: translate(120%);
  -ms-transform: translate(120%);
  -o-transform: translate(120%);
  -webkit-transform: translate(120%);
  transform: translate(120%);
}
.scrollable p {
  padding: 30px;
  text-align: justify;
  line-height: 140%;
  font-size: 120%;
}
#center {
  text-align: center;
  margin-top: 25%;
}
#center a {
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-variant: small-caps;
}

a.nice-link {
  position: relative;
  color: #71ad37;
}
h1 a.nice-link:after {
  border-bottom: 1px solid #a5ff0e;
}
a.nice-link:after {
  text-align: justify;
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  color: #a5ff0e;
  min-height: 100%;
  width: 0;
  max-width: 100%;
  background: #3A3A3A;
  -moz-transition: .3s;
  -o-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
a.nice-link:hover {
  color: #71ad37;
}
a.nice-link:hover:after {
  width: 100%;
}
/*___________________________________ SIGN ___________________________________ */
#dex-sign {
  width: 255px;
  height: 84px;
  position: absolute;
  left: 33%;
  top: 45%;
  opacity: .7;
  background: url(http://www.drygiel.com/projects/sign/frames-255-white.png) 0 0 no-repeat;
}
#dex-sign:hover {
  opacity: 1;
  -webkit-filter: invert(30%) brightness(80%) sepia(100%) contrast(110%) saturate(953%) hue-rotate(45deg);
}
@-webkit-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@-moz-keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}
@keyframes sign-anim {
  to {
    background-position: 0 -7140px;
  }
}


.sect-div {
  width: 23%;
  margin: 2px 1%;
  height: auto;
  display: inline-block;    margin: 5px;
    margin-top: 15px;
    border: 1px solid #c4c4f7;
    background-color: #fff;
    border-radius: 2px;
}



@media print {
 /*-webkit-print-color-adjust:exact;*/

.paging-nav {
  display: none;
}
.report_table th , .report_table td {
    -webkit-print-color-adjust:exact;
        padding: 6px 12px;
    display: table-cell;

}

.report_table tbody tr {
  -webkit-print-color-adjust:exact;
    background: #f6f6f6;
    border: 1px solid #ccc;
}

.report_table tbody tr:nth-of-type(odd) {
  -webkit-print-color-adjust:exact;
    background: #e9e9e9;
}


.report_table thead tr th {
    -webkit-print-color-adjust:exact;
    background-color: #ea6153!important;
    color: #ffffff;
    font-weight: 900;
}


.report_table_head>th {
    -webkit-print-color-adjust:exact;
    background-color: #ea6153!important;
}




 .txt_center {
        text-align: center!important;
    }
    
    .wrapper {
        margin: 0 auto;
        padding: 40px;
        max-width: 800px;
    }
    
    .table {
        margin: 0 0 40px 0;
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        display: table;
    }
    
    @media screen and (max-width: 580px) {
        .table {
            display: block;
        }
    }
    
    .row1 {
        -webkit-print-color-adjust: exact;
        display: table-row;
        background: #f6f6f6;
    }
    
    .row1:nth-of-type(odd) {
        -webkit-print-color-adjust: exact;
        background: #e9e9e9;
    }
    
    .row1.header {
        -webkit-print-color-adjust: exact;
        font-weight: 900;
        color: #ffffff;
        background: #ea6153!important;
    }
    
    .row1.green {
        background: #27ae60;
    }
    
    .row1.blue {
        background: #2980b9;
    }
    
    @media screen and (max-width: 580px) {
        .row1 {
            padding: 8px 0;
            display: block;
        }
    }
    
    .cell {
        padding: 6px 12px;
        display: table-cell;
        border: 0.5px solid #ccc;
    }
    
    @media screen and (max-width: 580px) {
        .cell {
            padding: 2px 12px;
            display: block;
        }
    }
    
    .flat-table {
        display: block;
        font-family: sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 12px;
        overflow: auto;
        width: 100%;
    }
    
    .tr_table>th {
        -webkit-print-color-adjust: exact;
        background-color: rgba(13,117,53, 0.5);
        color: #fff;
        font-weight: 900;
        padding: 2px 3px;
        text-align: left;
        padding-left: 15px;
        width: 17%;
    }
    
    .tr_table>td {
        -webkit-print-color-adjust: exact;
        background-color: rgb(238, 238, 238);
        color: rgb(111, 111, 111);
        padding: 2px 3px;
        width: 25%;
    }
    
    .split {
        display: inline-block;
    }

    .print {
      display: none!important;
    }

    .no-boder>td {
        -webkit-print-color-adjust: exact;
        background-color: transparent;
    }

    .tr_table {
        -webkit-print-color-adjust: exact;
        border:1px solid #fff!important;
        font-family: Helvetica !important;
    }
}


/* Panel */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);
/* Extenders */
.clearfix:after, .panel1 .panel1-element .element-content .content-post1:after, .panel1 .panel1-element .element-actions:after {
  content: '';
  display: table;
  clear: both;
}

.panel1 {
  max-width: 450px;
  margin: 0 auto;
  padding: 30px 20px;
}
.panel1 .panel1-element {
  position: relative;
}
.panel1 .panel1-element .element-content {
  background-color: rgba(244,244,245,0.8);
  padding: 15px;
  border-bottom: 1px solid #d6d6d6;
  position: relative;
  right: 0;
  z-index: 2;
}
.panel1 .panel1-element .element-content .content-post1 .post-avatar {
  background-color: #ededed;
  width: 60px;
  height: 60px;
  float: left;
  border-radius: 50%;
}
.panel1 .panel1-element .element-content .content-post1 .post1-content {
  padding-top: 9px;
}
.panel1 .panel1-element .element-content .content-post1 .post1-content .post-title,
.panel1 .panel1-element .element-content .content-post1 .post1-content .post-body {
  display: block;
}
.panel1 .panel1-element .element-content .content-post1 .post1-content .post-title {
  font-size: 15px;
    color: #5f5d5d;
    font-weight: 900;
}
.panel1 .panel1-element .element-content .content-post1 .post1-content .post-body {
  margin-top: 5px;
  font-size: 12px;
  color: #CCCBCB;
}
.panel1 .panel1-element .element-actions {
  width: 100px;
  height: 45px;
  font-size: 0;
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 1;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.panel1 .panel1-element:not(:first-child) {
  margin-top: 15px;
}
.panel1 .panel1-element.panel1-element-open .element-content {
  right: 140px;
}

@media screen and (max-width: 500px) {
  h1 {
    margin-bottom: 0;
    font-size: 25px;
  }

  .panel1 .panel1-element .element-content .btn-more {
    opacity: 1;
  }
  .panel1 .panel1-element .element-content .btn-more:hover {
    background-color: transparent;
  }
}



.x70m  {
  width:70%;
}

.x30m {
  width:28%;
  margin: 1px auto;
}

.info-btn {
  float: right;
}

.pie {
  width: 48%;
}

.right-report {
  width: 79%;
  height: 85%; 
  overflow: hidden;
}

.left-report {
   width: 18%;
   float: left; 
   margin-top:1%; 
   height: 85vh; 
   overflow-y: auto;
}

@media screen and (max-width: 970px) {
  .widget1-large {
  width: 95%!important;
  margin: 5px;
  border: 1px solid #c4c4f7;
  display: block;
  border-radius: 5px;
  background-color: #fff;
  }

  .widget1 {
    width: 60%;
    margin: 5px;
    border: 1px solid #c4c4f7;
    display: inline-block;
    border-radius: 5px;
    background-color: #fff;
  }

  .x100s {
    width: 95%;
  }

  .pie {
    width: 100%;
  }

  .info-btn {
    float: none;
  }

  .left-report {
     width: 100%;
     overflow-y: auto;
  }

  .right-report {
    width: 100%;
    height: 85%; 
    overflow: hidden;
  }
}