html{height: 100%;}
body.template.login,body.template.password-reset{ padding-top: 10px;}
body{font-family: 'Lato', sans-serif; height: 100%; padding-top: 50px;}
.navbar-fixed-top{position: fixed;}
h1.title{font-size: 24px;
    color: #48565F;
    font-weight: 400;
    margin-top: 0;
    line-height: 32px;}
.text-right.logo-task{text-align: left;}
h1.title .company-name{font-weight: 900;}
.breadcrumb{ margin-top: 25px;  }
.breadcrumb a{font-weight: bold;}
.first-label{margin-right: 5px;}
.mb-20{margin-bottom: 20px;}
.mt-20{margin-top: 20px;}
.pb-20{padding-bottom: 20px;}
.pt-20{padding-top: 20px;}
.btn{border-radius: 3px; font-weight: bold;  padding: 8px 14px;}
.btn.btn-link{ text-transform: none;}
.btn.btn-danger { border: 0; }
.btn-primary{background-color: #1eb2e6; border: none;}
.btn-primary.add-new{background-color:#FF8F19; }
.btn-primary.add-new:hover{background-color: #FC8100;}
.btn-info, .btn-info:hover{border:none;}
a.optionen .fa{font-size: 15px; color: #555; margin-right: 5px;}
a.optionen {margin: 5px;}
.descr-width{width: 15%;}
.pr-0{padding-right:0;}
.pl-0{padding-left:0;}
table.dataTable>tbody>tr.child ul.dtr-details{ width: 100%;}
.template .btn.btn-primary.add-new,
.template.modules .btn.btn-primary.add-new, .template.advisors .btn.btn-primary.add-new,
.btn.btn-primary.add-new{ display: inline-block;}
.kundennummer{ border-radius:3px; background-color:rgba(220, 220, 220, 0.73); padding: 10px; margin-bottom: 10px;}
.kundennummer label{margin-bottom: 0; margin-right: 5px;}
.table-responsive div.container { max-width: 1200px }
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.alert.warning.alert-dismissible{
      background-color: #f8d7da;
      color: #721c24;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.panel-warning-custom{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
margin-top: 20px;
}
table.dataTable thead th, table.dataTable thead td{border-bottom: 2px solid #ddd;}
.table-title{font-weight: bold;color: #4a4a4a;}
.table-responsive{border: none;}
.panel-warning-custom ul{list-style: none; margin: 0; padding: 0;}
.panel-warning-custom ul li{margin-bottom: 5px; font-weight: bold;}
.panel-warning-custom ul li:last-child{margin-bottom: 0;}

#uploadFile{float: left; width: 60%; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;}
.uploadFile {
    float: left;
    width: 60%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.fileUpload.btn.btn-primary{float: right; width: 40%;padding: 9px 12px;
  margin: 0;
  border-bottom-left-radius: 0;
      border-top-left-radius: 0;}
.logo-label{ display: block;}
#wrap {
  /*min-height: calc(100% - 51px);*/
  min-height: 100%;
}
.icon-table-action{text-align: center;}
th.icon-table-action-width{width: 115px !important;}
#logo-box{ justify-content: flex-end;}
.img-box{ justify-content: flex-end;}

#logo-box-branches.comp-logo{text-align: left}
.img-logo-2 {
  display: inline-block;
  max-width:129px;
  max-height:100px;
  width: auto;
  height: auto;
}
.img-logo{
  display: block;
  max-width:129px;
  max-height:100px;
  width: auto;
  height: auto;}
.users .vertical-align,
.branches .vertical-align,
.three-col .vertical-align,
.two-col .vertical-align{
display: block;
}
  .vertical-align {
  display: flex;
  flex-direction: row;
}
.vertical-align .text-right{justify-content: flex-end;}
.users .text-right.comp-logo,
.branches .text-right.comp-logo,
.three-col .text-right.comp-logo,
.two-col .text-right.comp-logo
{text-align: left; margin-bottom: 20px;}


.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;

}
.users .vertical-align > [class^="col-"],
.users .vertical-align > [class*=" col-"],
.branches .vertical-align > [class^="col-"],
.branches .vertical-align > [class*=" col-"],
.three-col .vertical-align > [class^="col-"],
.three-col .vertical-align > [class*=" col-"],
.two-col .vertical-align > [class^="col-"],
.two-col .vertical-align > [class*=" col-"]

 {
  display: block;
  align-items: center;

}
.companysettings #logo-box{margin-bottom: 20px;}
/**
 *  Do NOT include this part into your stylesheet.
 *  "flex: 1" or "flex-grow: 1" is added to make the inner div
 *  - Which is also a flex-item - take up all the horizontal space
 *  available space inside the flex container (.col-* elements)
 */
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
  /* flex: 1; */
  flex-grow: 1;
}
.alert.warning.alert-dismissible ul{list-style: none;}
body.modules-create .box-upload{float: left; width: 100%; display: block; position: relative;margin-bottom: 5px;}
body.modules-create .box-upload .parsley-errors-list{position: absolute; bottom: -15px; left: 0;}
#main {padding-bottom:50px; /* this needs to be bigger than footer height*/}
#logo_delete{display: none;}
#warpper-logo{display: inline-block;position: relative;}
.companysettings #warpper-logo{max-width: 129px;}
.companysettings #logo-box{justify-content: flex-start;}
#btn-delete-logo{cursor: pointer; position: absolute; top: -7px; right: -7px; color: #ff0000;font-size: 20px;}

.btn-delete-img{cursor: pointer; position: absolute; top: -7px; right: -7px; color: #ff0000;font-size: 20px;}

.footer {
    position: relative;
    margin-top: -25px;
    height: 25px;
    clear: both;
    background-color: #677484;
    background-image: linear-gradient(225deg, #677484 0%, #96a7bb 86%);
}
header.main-table-page{margin-bottom: 40px;}
.navbar.navbar-default.navbar-fixed-top .navbar-toggle{margin-right: 0;}
.dropdown-menu{border: none;}
.btn-success{border:none; background-color: #3097D1;}
.btn-success.active, .btn-success:active, .btn-success:hover, .open>.btn-success.dropdown-toggle {
    background-color: #3097D1;
    border-color: #3097D1;
}
.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.btn-success.dropdown-toggle.focus, .open>.btn-success.dropdown-toggle:focus, .open>.btn-success.dropdown-toggle:hover {
    background-color: #3097D1;
    border-color: #3097D1;
}
.add-new .fa{}
.add-new.icon-btn .fa{margin-right: 0;}
.btn.icon-btn{padding: 8px 14px; margin-left: 5px;}
.task-tab .btn.icon-btn { margin-left: 0px; margin-bottom: 15px;}
#nav-container{position: relative; }
.logo-task{margin-bottom: 20px;}
#logo-bg{
  position: relative;
  z-index: 1;
  -webkit-box-shadow: 10px -3px 19px -9px #222;
          box-shadow: 10px -3px 19px -9px #222;
	height: 50px;
	-webkit-transform: skew(-30deg);
	   -moz-transform: skew(-30deg);
	     -o-transform: skew(-30deg);
       transform: skew(-30deg);
	background: #48565F;
  display: inline-flex;
}
  #logo-bg a.navbar-brand{
    letter-spacing: 1px;
    font-weight: 900;
    margin-left: 0;
    -webkit-transform: skew(30deg);
  	   -moz-transform: skew(30deg);
  	     -o-transform: skew(30deg);
         transform: skew(30deg);
    text-align: center;
    width: 100%;
  }
  .dataTables_length select{
    border-radius: 3px;
border: 2px solid rgba(204, 208, 210, 0.54);
box-shadow: none;
padding: 5px 12px;
margin-right: 5px;
  }
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before{
  top:calc(50% - 8px);
}
/*LOGIN PAGE*/
#login-panel,#reset-panel{margin-top: 50px; border-radius: 4px; border: none; padding: 50px 20px;-webkit-box-shadow: 0px 0px 49px -2px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 49px -2px rgba(0,0,0,0.25);
box-shadow: 0px 0px 49px -2px rgba(0,0,0,0.25);}
body.template.login,
body.template.password-reset {
    height: 100%;
    background-color: #96a7bb;
    background-image: linear-gradient(225deg, #677484 0%, #96a7bb 86%);
}
body.template.login #img-bg,
body.template.password-reset #img-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: url('../img/net.svg') center 36% no-repeat;
}

#login-panel .panel-heading{text-align: center; font-size: 30px; font-weight: 900; color: #48565F; text-transform: uppercase; border-bottom: none; }
 #reset-panel .panel-heading{ font-weight: 900;
    text-transform: uppercase;
    color: #48565F;
    text-align: left;
    padding-left: 0;
    font-size: 18px;}
#reset-panel .panel-body  {padding-left: 0;}

.logo{
    border-bottom: 1px solid rgba(255,255,255,.2);
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    padding-bottom: 5px;
    padding-top: 15px;
}

.logo a,
.logo a:hover {
    color: #fff;
    text-decoration: none;
}

.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav >li > a:focus,
.navbar-default .navbar-nav >li > a:hover {
    color: #fff;
}

.form-control{border-radius: 3px; border:2px solid rgba(204, 208, 210, 0.54); height: 40px; box-shadow: none;}
#login-panel label, #reset-panel label{font-weight: bold;color: #5d5d5d; font-size: 17px;}
#login-panel .checkbox label{font-weight: normal; font-size: 13px;}
#login-panel .btn-forgot-pass{text-align: right; padding-right: 0;}
/*LOGIN PAGE*/

#main.container{background-color: #fff; padding-top: 50px; padding-bottom: 50px; }
.navbar-default{    background-color: #677484;
    background-image: linear-gradient(225deg, #677484 0%, #96a7bb 86%);
    margin-bottom: 0;}
.navbar-default a.navbar-brand,.navbar-default a.navbar-brand:hover{color:#fff;}
.navbar-default .nav.navbar-nav a{color: #fff; font-weight: bold; font-size: 16px;}
.navbar-default .nav.navbar-nav  ul.dropdown-menu a{font-weight: normal;}
.dropdown-menu{border-radius: 0;}
 .navbar-default .nav.navbar-nav a:hover{color: #fff; background-color: #677484}
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{background-color: #677484; color: #fff;}
 .dropdown-menu>li>a {
     display: block;
     padding: 3px 20px;
     clear: both;
     font-weight: 400;
     line-height: 1.428571429;
     color: #333;
     white-space: nowrap;
 }
.navbar-default .nav.navbar-nav .dropdown-menu>li>a{color: #fff; border-bottom: 1px dotted rgba(255, 255, 255, 0.23);}
.navbar-default .nav.navbar-nav .dropdown-menu>li>a:focus, .navbar-default .nav.navbar-nav .dropdown-menu>li>a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #f5f5f5;
}
.mt10{margin-top: 10px;}

.font-awesome-btn {
    background: none;
    padding: 0px;
    color: #3097D1;
    border: none;
}
#activity-processing-form{padding-top: 20px; padding-bottom: 20px;}
 /*  Maßnahmen Formular */
 #activity-processing-form .form-section {

  display: none;
}
 #activity-processing-form .form-section.current {
  display: inherit;
}
 .tasks .btn-info,  .tasks .btn-default {
  margin-top: 10px;
}
#navigation-form{position: relative; margin-top: 20px; margin-bottom: 20px;}
#navigation-form:before{top: 18px;
    bottom: 0;
    position: absolute;
    content: " ";width: 100%;height: 1px;background-color: #eee; z-index: 1}
#navigation-form ul li {display: inline-block;}
#navigation-form ul{margin: 0; padding: 0; z-index: 2; position: relative; display: flex; justify-content: space-between;}
#navigation-form .navigationItem{width: 38px;
    height: 38px;
    text-align: center;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.428571429;
    border-radius: 24px;
    background-color: #dbdedf;
    cursor: pointer;
  }
#navigation-form .navigationItem.current2,#navigation-form .navigationItem.green.current2{background-color:#48565F; color: #fff;cursor: default;}
#navigation-form .navigationItem.green{background-color:#3097D1; color: #fff;}
.navbar-default .navbar-toggle .icon-bar{background-color: #fff;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border-color: rgba(255, 255, 255, 0.22);}
#nav-container .navbar-collapse{box-shadow: none; top: -1px; position: relative;}
  /*  Maßnahmen Formular */

  .navbar-default .navbar-toggle{border-color:transparent;}
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color: transparent;}
.dataTables_filter input[type=search]{border-radius: 3px;border: 2px solid rgba(204, 208, 210, 0.54);box-shadow: none;padding: 5px 12px;}
.dataTables_filter{margin-bottom: 10px;}
.firma{background-color: #185BAC; padding: 10px 12px; color: #fff; font-weight: bold; margin-top: 20px; display: inline-block;}
.firma:hover{color: #fff;}
.bootstrap-datetimepicker-widget table td.today{background-color:#1EB2E6; color: #fff;}
.bootstrap-datetimepicker-widget table td.today:hover{background-color:#FF8F19; color: #Fff;}
.table--borderless td,
.table--borderless th {
    border-top: none !important;
}
#message-attachment-title.form-control,#law-attachment-title.form-control,#picture-attachment-title.form-control{border: none;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background: #1eb2e6; border: none; color: #fff!important; padding: 5px 13px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{font-size: 12px;font-weight: bold;}
.dataTables_wrapper .dataTables_info{ color: #666; font-size: 12px; font-weight: bold;}
table.dataTable.no-footer{border-bottom: 1px solid #ddd; margin-bottom: 20px;}
.dataTables_wrapper .dataTables_paginate{padding-top: 0.8em;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border:none;
  padding: 5px 13px;
  background: #c7c7c7;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:not-allowed;}
.dataTables_wrapper .dataTables_paginate .paginate_button{padding: 5px 13px; border: none;}
.dataTables_length{margin-bottom: 20px;}

a.optionen {margin-right: 10px;}
.three-col.task-tab .btn-task{display: flex; justify-content: space-between;}
.btn-task a{width: 31%;}
input#sub1{width: 100%; white-space: normal;}
.small-description{font-size: 12px; margin-top: 5px;}

/*css dataTable btn*/
table.dataTable.btn-table tbody tr{
  display: inline-block; width:calc(100% - 20px); padding: 10px; text-align: center; background-color: #f5f5f5; cursor: pointer; position: relative;
  border-radius: 4px; padding: 30px 0;
     border:2px solid transparent;
     box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.28);
     transition: box-shadow 0.2s linear;
   margin: 10px;}
table.dataTable.btn-table tbody tr td{display: block;
   font-size: 16px;
   font-weight: bold;
   color: #636b6f;
   }
table.dataTable.btn-table tbody tr  i{
  padding: 5px 5px 5px 7px;
  background-color: #3097D1;
  color: #fff;
  bottom: 4px;
  right: 4px;
  position: absolute;
  border-radius: 4px;
  font-size: 10px;
  transition: background-color 0.2s linear;}
table.dataTable.btn-table tbody tr:hover i{
  background-color: rgba(204, 208, 210, 0.54);
  color: #3097D1;
}
table.dataTable.display.btn-table tbody tr.odd, table.dataTable.order-column.stripe.btn-table tbody tr.odd{background-color: #f5f5f5;}
table.dataTable.display.btn-table tbody tr.even, table.dataTable.order-column.stripe.btn-table tbody tr.even{background-color: #f5f5f5;}

table.dataTable.display.btn-table tbody tr.odd td, table.dataTable.order-column.stripe.btn-table tbody tr.odd td{border: none;}
table.dataTable.display.btn-table tbody tr.even td, table.dataTable.order-column.stripe.btn-table tbody tr.even td{border: none;}
table.dataTable.display.btn-table tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe.btn-table tbody tr.odd>.sorting_1{background-color: transparent;}
table.dataTable.display.btn-table tbody tr.even>.sorting_1, table.dataTable.order-column.stripe.btn-table tbody tr.even>.sorting_1{background-color: transparent;}

table.dataTable.btn-table tbody{display: block; padding: 20px 0;}
table.dataTable.btn-table tbody tr:hover{
  box-shadow: none;
  text-decoration: none;
  border: 2px solid rgba(204, 208, 210, 0.54);
  background-color: #fff;
}
table.dataTable.btn-table tbody td{padding:0;}
table.dataTable.display.btn-table tbody tr.odd:hover, table.dataTable.order-column.stripe.btn-table tbody tr.odd:hover{background-color: #fff;}
table.dataTable.display.btn-table tbody tr.even:hover, table.dataTable.order-column.stripe.btn-table tbody tr.even:hover{background-color: #fff;}

#grid-company{padding: 0px 30px;}
.grid-logo{max-width: 100%; max-height: 60px;}
.btn-panel{display: block; text-align: center; background-color: #f5f5f5; border:2px solid transparent;box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.28);transition: box-shadow 0.2s linear;}
.btn-panel:hover{box-shadow: none; text-decoration: none;border: 2px solid rgba(204, 208, 210, 0.54); background-color: #fff;}
.btn-panel h4{font-size: 16px; font-weight: bold; margin: 20px 0 15px; color: #636b6f; }
.btn-panel:hover h4{text-decoration: none;}
.wrap-img{height: 60px;}
.btn-panel .panel-body{position: relative;}
.btn-panel .panel-body i{padding: 5px 5px 5px 7px; background-color: #3097D1; color: #fff; bottom: 4px; right: 4px; position: absolute; border-radius: 4px; font-size: 10px; transition: background-color 0.2s linear;}
.btn-panel:hover .panel-body i{background-color:rgba(204, 208, 210, 0.54); color: #3097D1; }



  /*css dataTable btn*/



@media only screen and (max-width : 479px) {
  .users .col-xs-6,.branches .col-xs-6,.three-col .col-xs-6, .two-col .col-xs-6,.two-col .col-xs-9,.two-col .col-xs-3{width: 100%; float: none;}
  .btn-task #add-btn-group a{width: 100%;}

}
 /* Custom, iPhone Retina */
  @media only screen and (min-width : 320px) {


  }

  /* Extra Small Devices, Phones */
  @media only screen and (min-width : 480px) {
    #add-btn-group{display: flex; justify-content: space-between;}
    table.dataTable.btn-table tbody tr{
       width:calc(50% - 20px);}
  .template.companies .btn.btn-primary.add-new,
  .template.advisors .btn.btn-primary.add-new,
  .template.modules .btn.btn-primary.add-new,
  .template.documenttemplates .btn.btn-primary.add-new,a.btn-primary.add-new.advs-btn,
  .topics .btn.btn-primary.add-new{ display: inline-block;}
  .template[class^="modules-"] a.add-new,
  .template[class*="modules-"] a.add-new{display: inline-block;}

  .users .text-right.comp-logo,
  .branches .text-right.comp-logo,
  .three-col .text-right.comp-logo,
  .two-col .text-right.comp-logo,
  #logo-box-branches.comp-logo,
  .text-right.logo-task
 {text-align: right;}
  }
  @media (max-width: 991px) {
    body { padding-top: 30px; }
    .navbar-default .nav.navbar-nav .dropdown-menu>li>a{color: #333; border-bottom: none;}
    .navbar-fixed-top .navbar-collapse{max-height: 460px;}

    .navbar-header {
          float: none;
      }
      .navbar-left,.navbar-right {
          float: none !important;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .collapse.in{
          display:block !important;
      }
     .navbar-nav .open .dropdown-menu {
         position: static;
         float: none;
         width: auto;
         margin-top: 0;
         background-color: #f5f8fa;
         border: 0;
         -webkit-box-shadow: none;
         box-shadow: none;
      }


}
  @media (max-width: 767px) {

    #bread-sticky,#btn-sticky{display: none;}
  }

  /* Small Devices, Tablets */
  @media only screen and (min-width : 768px) {
      #add-btn-group{display: flex; align-items: flex-end; flex-direction: row; justify-content: flex-end;}
    #grid-company{padding: 0px 40px;}
    .users .text-right.comp-logo,
    .branches .text-right.comp-logo,
    .three-col .text-right.comp-logo,
    .two-col .text-right.comp-logo
    {margin-bottom: 0px;}


    th.icon-table-action-width{width: auto;}
    .task-tab .btn.icon-btn {  margin-bottom: 0;}
    .three-col.task-tab .btn-task{display: inherit; justify-content: flex-end;}
    .btn-task a{width: auto; display: block;}
    .logo-task{margin-bottom: 0;}
    .task-tab .btn.icon-btn { margin-left: 5px;}
    .navbar-default .nav.navbar-nav .dropdown-menu>li>a{color: #333; border-bottom: none;}
    .dataTables_length{margin-bottom: inherit;}
    .users .vertical-align,
    .branches .vertical-align,.three-col .vertical-align, .two-col .vertical-align{
    display: flex;
    flex-direction: row;
  }
  .users .vertical-align > [class^="col-"],
  .users .vertical-align > [class*=" col-"],
  .branches .vertical-align > [class^="col-"],
  .branches .vertical-align > [class*=" col-"],
  .three-col .vertical-align > [class^="col-"],
  .three-col .vertical-align > [class*=" col-"],
  .two-col .vertical-align > [class^="col-"],
  .two-col .vertical-align > [class*=" col-"]

  {
    display: flex;
    align-items: center;
  }
  th.icon-table-action-width{width: 100px!important;}
  body.plus-breadcrump table.fixedHeader-floating{top:100px!important;}
  body.no-breadcrump table.fixedHeader-floating{top: inherit;}
  #sticky-row{position:fixed;height: 50px;top:51px;background-color: #fff;z-index:1;
    display: none;}
  #sticky-row .container{padding: 0;}
  .row-flex{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap;}
  #bread-sticky{width: 100%;}
  #btn-sticky{display: flex;flex-direction: row; justify-content: space-between;}
  #btn-sticky a{margin-left: 10px; margin-top: 14px;}
  #sticky-row .col-lg-10{ padding-left: 0;}
  #sticky-row .col-lg-2{padding-right: 0;}
  #bread-sticky .breadcrumb{ margin: 14px 0 0;}

  /*css dataTable btn*/
  table.dataTable.btn-table tbody tr{
    display: inline-block; width:calc(25% - 20px); padding: 10px; text-align: center; background-color: #f5f5f5; cursor: pointer; position: relative;
    border-radius: 4px; padding: 30px 0;
       border:2px solid transparent;
       box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.28);
       transition: box-shadow 0.2s linear;
     margin: 10px;}
  table.dataTable.btn-table tbody tr td{display: block;
     font-size: 16px;
     font-weight: bold;
     color: #636b6f;
     }
  table.dataTable.btn-table tbody tr  i{
    padding: 5px 5px 5px 7px;
    background-color: #3097D1;
    color: #fff;
    bottom: 4px;
    right: 4px;
    position: absolute;
    border-radius: 4px;
    font-size: 10px;
    transition: background-color 0.2s linear;}
  table.dataTable.btn-table tbody tr:hover i{
    background-color: rgba(204, 208, 210, 0.54);
    color: #3097D1;
  }
  table.dataTable.display.btn-table tbody tr.odd, table.dataTable.order-column.stripe.btn-table tbody tr.odd{background-color: #f5f5f5;}
  table.dataTable.display.btn-table tbody tr.even, table.dataTable.order-column.stripe.btn-table tbody tr.even{background-color: #f5f5f5;}

  table.dataTable.display.btn-table tbody tr.odd td, table.dataTable.order-column.stripe.btn-table tbody tr.odd td{border: none;}
  table.dataTable.display.btn-table tbody tr.even td, table.dataTable.order-column.stripe.btn-table tbody tr.even td{border: none;}
  table.dataTable.display.btn-table tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe.btn-table tbody tr.odd>.sorting_1{background-color: transparent;}
  table.dataTable.display.btn-table tbody tr.even>.sorting_1, table.dataTable.order-column.stripe.btn-table tbody tr.even>.sorting_1{background-color: transparent;}

  table.dataTable.btn-table tbody{display: block; padding: 20px 0;}
  table.dataTable.btn-table tbody tr:hover{
    box-shadow: none;
    text-decoration: none;
    border: 2px solid rgba(204, 208, 210, 0.54);
    background-color: #fff;
  }
  table.dataTable.btn-table tbody td{padding:0;}
  table.dataTable.display.btn-table tbody tr.odd:hover, table.dataTable.order-column.stripe.btn-table tbody tr.odd:hover{background-color: #fff;}
  table.dataTable.display.btn-table tbody tr.even:hover, table.dataTable.order-column.stripe.btn-table tbody tr.even:hover{background-color: #fff;}
    /*css dataTable btn*/
  }

  /* Medium Devices, Desktops */
  @media only screen and (min-width : 992px) {
    table.dataTable.btn-table tbody tr{
     width:calc(20% - 20px);
    }
    table.dataTable tbody th, table.dataTable tbody td{padding: 12px 10px;}
    .logo-task {right: -45px;}

  }

  /* Large Devices, Wide Screens */
  @media only screen and (min-width : 1200px) {
    #login-panel, #reset-panel{margin-top: 150px;}
    .logo-task {right: -20px;}


  }
  @media only screen and (min-width : 1500px) {
    .container{width: 1430px;}
    .logo-task {right: -45px;}
  }

  tr .clickable{
    cursor: pointer;
  }

/*** custom checkboxes ***/
input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f1db";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #8eb4cb;
    width: 1.4em;
}

input[type=radio].with-font:disabled ~ label:before,
input[type=checkbox].with-font:disabled ~ label:before  {
        cursor: not-allowed;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f00c";
    font-size: 1.2em;
    color: #8eb4cb;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {
    content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046";
    color: #8eb4cb;
}
input[type=radio].with-font:focus ~ label:before,
input[type=checkbox].with-font:focus ~ label:before,
input[type=radio].with-font:focus ~ label,
input[type=checkbox].with-font:focus ~ label
{

}

.back-to-top {
 position: fixed;
 bottom:20px;
 right:20px;
 padding:1em;
 display: none;
 color: #48565F;
}

.back-to-top i {
  font-size: 60px;
}

/**
* Export to PDF
*/
.pdf-template{
  padding-top:0px;
  background-color: #fff;
  font-weight: bold;
}
.pdf-template .table>tbody+tbody {
    border-top: none;
}
.pdf-template .table>tbody>tr>td, .pdf-template .table>tbody>tr>th, .pdf-template .table>tfoot>tr>td,
.pdf-template .table>tfoot>tr>th, .pdf-template .table>thead>tr>td, .pdf-template .table>thead>tr>th {
    border-top: none;
}
.pdf-template .table .table {
    background-color: #fff;
}
.pdf-template .pdf div section { page-break-after:always}
.pdf-template .pdf div section#appendix-1 {
    page-break-after: avoid;
}
.pdf-template .table-bordered{
    border: 1px solid #ddd;
}

/**
* Print
**/
@media print
{
  section { page-break-after:always}
  .non-print {display:none!important;}
  .print {display:block;}
}

.loader{
    position: absolute;
    z-index: 1000;
    left: 50%;
    width: 100%;
    margin-left: -50%;
    margin-top: -25px;
    padding: 15px;
    text-align: center;
    font-size: 1.2em;
    background-color: white;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);

}


.search-container{
  padding-bottom: 15px;
}

@media (min-width: 992px){
  #result_container .row{
        display: flex;
  }
  #result_container .row div {
      flex: 1;
      padding: 1em;
  }
  #result_container .row div .btn-panel {
      height: 100%;
  }
  #result_container .row div .btn-panel .panel-body {
      height: 100%;
  }
}

.filter{
  width: auto;
  display: inline;
}

.orange{
  color: #FF8F19;
}
.green{
  color: #07ab3a;
}
.red{
  color: #bf5329;
}

.m-signature-pad--body {
  position: relative;
  width:100%;
  max-width: 100%;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.m-signature-pad--body canvas {
  position: relative;
  width:800px;
  max-width: 100%;
  background-color: white;
  border: 1px solid #ddd;
}

.pointer_events_not_allowed{
    pointer-events: none;
}

label.red:before{
  color: #bf5329!important;
}

label.has_customized_personal_data_of_person_groups_label{
  float: right;
}

.bg-header{
   background-color: #ddd;
}
.bg-white{
  background-color: #fff;
}