@font-face {
      font-family: 'myicon';
      src: url('../fonts/font/myicon.eot?82990680');
      src: url('../fonts/font/myicon.eot?82990680#iefix') format('embedded-opentype'),
           url('../fonts/font/myicon.woff?82990680') format('woff'),
           url('../fonts/font/myicon.ttf?82990680') format('truetype'),
           url('../fonts/font/myicon.svg?82990680#myicon') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    .bar-chart {
  display: flex;
  width: 400px;
}

.bar {
  height: 100px;
  background-color: blue;
  margin: 5px;
}
   
    
    .tss-icon {
      font-family: "myicon";
      font-style: normal;
      font-weight: normal;
      speak: never;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    } 
    .tss-small-icon{
    font-size: 0.8em!important;    
    }
    
html, body {
  margin:0px;
  height:100%;
}
 .login-page{
background-image: url("../images/auth/background_2.jpg");
background-repeat:no-repeat;
background-size: cover;
width:100%;
height:100%;
position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}
.login-box{
    position: relative;
    width: 30%;
    margin: auto;
    background-color: white;
    margin-top: 12%;
    padding-top: 0px;
    padding-bottom: 20px;
}
.login-title{
    background-color: #05316a!important;
    width: 100%;
    margin: 0px!important;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    padding: 5px;
}
.login-title h4.title-h4{
    margin: auto!important;
    color: white!important;
    text-align: center!important;
}
.login-btn{width: 100%;text-align: center;padding: auto;margin-top: 15px;}
.login-btn .btn,login-btn .btn-block, .login-btn .btn-lg{
    margin: auto!important;
    background-color: #05316a!important;
    color: white!important;
}
 .btn-primary{
    background-color: #05316a!important;
}
.content .title{
    font-size: 1.1em!important;
}
.mx-auto, .content-wrapper{
margin:auto;	
}
  .app-container{
    width: 100%;
    height: 100%;
}
 .app-header{
     height:120px;
     background-color: #05316a!important;
            display:flex;align-items:center;
            align-content:center;
            position:relative;
/*            z-index:10;*/
            transition:all .2s
 }
 
 .tss-footer{float: left;width: 100%;margin-top: 30px;}
 .content-footer{
     text-align: center;
     margin: auto;
     background-color: #05316a!important;
     color: white!important;
 }
 .header-menu li{
     margin-left: 0px!important;
 }
 .app-header .tss-logo{
     height:50px;
     width:50px;
     margin-top: -10px;
     margin-left: 40px!important;
 }
 .app-header_content{
     width: 95%;
     margin-top: 0px;
 }
 .app-header-left{
     float: left;
     width: 47%;
     margin-bottom: 25px;
 }
 .app-title{
     font-size: 1.2em;
 }
 .user-login{
     font-size: 1.5em;
 }
 .app-header-left li{
     float: left;
     margin: auto;
     margin-right: 10px;
 }
 #tss-main-menu{
     cursor: pointer;
 }
 .app-header-right{
     float: left;
     margin-bottom: 25px;
     width: 53%;
 }
 .app-header-right ul li{
     float: right;
     margin: auto;
     margin-right:15px;
 }
 /* Style The Dropdown Button */
.dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 900;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  z-index: 1000;
}

 li{
     list-style-type: none;
 }
 .tss-new-msg{
     position: relative;
 }
 .tss-new-req{
     position: absolute;
     color: white;
     background-color: red;
     left: 0px;
     top: 5px;
     font-size: 0.7em!important;
 }
 .icon-white{color: #ffff;}
 .tss-full-screen{
     cursor: pointer;
 }
 .container-scroller,.body-container{
     height: 100%!important;
     max-height: 100%!important;
 }
 .app-main,.page-body-wrapper{
     position: absolute;
     width: 98%;
     z-index: 10;
     margin-top: -30px;
     height: 80%;
      border-top-left-radius: 25px;
     border-top-right-radius: 25px;
     background-color: white;
    left: 1%;
    max-height: 80%;
 }
 .app-sidebar{
     width: 20%;
     height: 100%;
     padding-top: 5px;
     float: left;
 }
 .menu-title{
  color:black!important;
 }
 .nav-item span{
 color:black;
 }
 .scrollbar-sidebar{
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
 }
 .vertical-nav-menu{
     width: 97%;
     margin-top: 5px;
 }
 .vertical-nav-menu li{
     list-style-type: none;
     margin-bottom: 10px;
     width: 100%;
 }
 .vertical-nav-menu li a{
     text-decoration: none;
     color: darkslategray;
     font-family: Inter,Segoe UI,Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
     font-size: 1.1em;
 }
 
 .vertical-nav-menu li ul{
     display: none;
     width: 90%;
     margin-left: 5px;
     height: auto
 }
 .content-wrapper{
     padding-left: 25px;
     position: relative;
 }
 
 .app-dynamic-content{
     margin-top: 5px;
     float: left;
     z-index: 10;
     margin-left: 1%;
     width: 78%;
     background-color: #ffff;
/*     min-height: 600px!important;*/
     overflow-y: scroll;
     overflow-x: hidden;
     height: 100%;
 }
 .main-content{
     width: 98%;
     margin-left: 1%;
 }
 .app-inner{
     width: 100%;
     padding: 20px;
 }
 .content-header{
     width: 60%;
     margin-top: 15px;
     margin-left: 10px;
     background-color: gold;
 }
  .content-header .input-filter{
    float: left;
    width: 50%;
    }
  .content-header .pagination{
    float: left;
    width: 35%;
    margin-left: 2px;
   
 }
 .input-filter input{
     width: 50%;
     border-top: none;
     border-left: none;
     border-right: none;
 }
 .input-filter input:focus{
     border-top: none;
     border-left: none;
     border-right: none;
     border-top-color: transparent;
 }
 .pagination ul{
     width: 100%;
 }
 .pagination li{
     float: left;
     margin-left: 10px;
 }
 .content-icon{
     font-size: 1.3em;
     color: gray;
 }
 
 table.table tr th, table.table tr td {
                border-color: #e9e9e9;
                padding: 12px 15px;
                vertical-align: middle;
                text-align: center;
                font-weight: normal!important;
            }
            table.table tr th:first-child {
                width: 60px;
            }
            table.table tr th:last-child {
                width: 100px;
            }
            table.table-striped tbody tr {
                background-color: #ffff;
            }
            table.table-striped.table-hover tbody tr:hover {
                background: #f5f5f5;
            }
            table.table th i {
                font-size: 13px;
                margin: 0 5px;
                cursor: pointer;
            }	
            table.table td:last-child i {
                opacity: 0.9;
                font-size: 22px;
                margin: 0 5px;
            }
            table.table td a {
                font-weight: bold;
                color: #566787;
                display: inline-block;
                text-decoration: none;
                outline: none !important;
            }
            table.table td a:hover {
                color: #2196F3;
            }
            table.table tr:nth-child td{background-color: white!important;}
            table.table tr:nth-child(even) td {background:white!important;background-color: white!important;}
            table.table tr:nth-child(odd) td{background: white!important;background-color: white!important;}
            table.table tr:nth-child(2n+1) td,table.table tr:nth-child(2n) td {
    background: white !important;
        background-color: white;
    background-color: white !important;
}
            table.table td a.edit {
                color: #005db9;
            }
            table.table td a.delete {
                color: #F44336;
            }
            table.table td i {
                font-size: 19px;
            }
            table.table .avatar {
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 10px;
            }
            #btnSaveNewUser{
                margin: auto!important;
                text-align: center!important;
                margin-top: 20px!important;
            }
 .icon-trash , .icon-edit{
     font-size: 1.3em;
     color: #05316a;
 }
 .add-block{
     position: fixed;
     right: 20px;
     bottom: 20px;
 }
 .icon-plus-circle{
     color: #05316a;
     font-size: 2.3em;
 }
 .tss-menu-icon{
     font-size: 1em;
 }
 
 .dataTables_filter .form-control{
     border:none!important;
     border-bottom: 1px grey solid!important;
 }
 .dataTables_length{
     margin-top: 15px!important;
 }
 .table, .table thead, .table tr, .table tbody, .table tbody tr{
 width:100%!important;
 }

/* user area*/
.steps li{
    float: left!important;
/*    background-image:  url("../images/step.png")!important;*/
    border: none!important;
    border-top-right-radius: 15px!important;
    border-bottom-right-radius: 15px!important;
    margin-left: 5px!important;
    padding-left: 10px!important;
    padding-right: 10px!important;
}
.steps li a{
    text-decoration: none!important;
}
.steps li.current{
    color: #ccffff!important;
/*    background-image:  url("../images/current-step.png")!important;*/
    background-color: #05316a!important;
    background-size: 
    }
    .steps li.current a{
        color: #ffff!important;
    }
    .steps li.current a .current-info{
        color: #ffff!important;
    }
    .step-icon{
        font-size: 1.2em;
    }
    
    .steps li.current .step-icon{
        color: white;
    }
    .tss-form-wrapper{
        margin: auto!important;
    }
    .actions ul{
        margin: auto!important;
    }
    .actions ul li{
        float: left!important;
        margin-right: 15px!important;
    }
    .actions ul li a{
        text-decoration: none!important;
    }
    .tss-mobile{
        display: none;
    }
    .canvasWrapper canvas:hover,.textLayer:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

   .page-item.active .page-link {
    background-color: #05316a!important;
}

    @media screen and (max-width:925px){
        .tss-desktop{display: none;}
        .tss-mobile{display: block;}
        .table thead tr th:first-child,.table thead tr th:nth-child(2),.table tbody tr td:first-child,.table tbody tr td:nth-child(2){
            display: none!important;
        }
        .app-title{display: none;}
         .app-dynamic-content{
            width: 95%;
            position: absolute;
            left: 20px;
            top: 20px;
            z-index: 1;
        }
        .app-sidebar{
            display: none;
            width: 50%;
            z-index: 999;
            position: absolute;
            left: 0px;
            top: 15px;
            overflow-y: scroll;
            opacity: 1;
            ba
        }
    }
    
    @media screen and (max-width:451px){
    .app-header .tss-logo{
     margin-left: 10px!important;
      }
        .app-header-left{
     width: 35%;
     padding-bottom: 8px;
    }
    .app-header-right{
     width: 64%;
    }
    .app-header-right ul li{
     margin-right:8px;
   }
   .app-header-right ul li:first-child{
       margin-right:2px;
   }
   
   .app-sidebar{
       width: 100%;
       display: none;
       overflow-y: scroll;
   }
   }