/* @ import url(http://allfont.net/allfont.css?fonts=hair-2); */

.form-inline{
    display: inline;
}

.form-group-attached > div.row > [class*="col-"]:not(:only-child):not(:last-child) > .form-group-default {
    border-right-color: rgba(0, 0, 0, 0.07);
}

.nav-tabs-simple > li > a::after{
    background-color: #07c25f;
}

.form-group-default .radio label{
    display: inline;
} 

div.cs-skin-slide{
    width: 100%;
}

.cs-backdrop{
    border-color: transparent;
}

#show-modal{
    margin-left: 5px;
}

.btn.plus{
    margin-left: 5px;
}

i.red{
    color: red
}

@font-face {
    font-family: fifa;
    src: url('../fonts/fifa.ttf');
}

.fifa{
    font-family: fifa;
}

.upload-box{
    border: dashed 1px #07c25f;
    padding: 10%;
    margin: 5%;
    border-radius: 25px;
    background-color: #defded;
    text-align: center;
    color: #07c25f;
}

.upload-box p{
    font-size: 1.2em;
    opacity: 0.7;
}

/* custom input file */
.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

/* style 5 */

.inputfile-5 + label {
    color: #1abc9c;
}

.inputfile-5:focus + label,
.inputfile-5.has-focus + label,
.inputfile-5 + label:hover {
    color: #16a085;
}

.inputfile-5 + label figure {
    width: 100px;
    height: 135px;
    background-color: #1abc9c;
    display: block;
    position: relative;
    padding: 30px;
    margin: 0 auto 10px;
}

.inputfile-5:focus + label figure,
.inputfile-5.has-focus + label figure,
.inputfile-5 + label:hover figure {
    background-color: #16a085;
}

.inputfile-5 + label figure::before,
.inputfile-5 + label figure::after {
    width: 0;
    height: 0;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
}

.inputfile-5 + label figure::before {
    border-top: 20px solid #b5ece1;
    border-left: 20px solid transparent;
}

.inputfile-5 + label figure::after {
    border-bottom: 20px solid #16a085;
    border-right: 20px solid transparent;
}

.inputfile-5:focus + label figure::after,
.inputfile-5.has-focus + label figure::after,
.inputfile-5 + label:hover figure::after {
    border-bottom-color: #1abc9c;
}

.inputfile-5 + label svg {
    width: 100%;
    height: 100%;
    fill: #f1e5e6;
}

.tt-menu{
    display: static;
}

.page-container .page-content-wrapper .footer{
    position: static;
}

.select2-dropdown {
    z-index: 9001;
  }


  .img.avatar{
      width: 100%;
  }

  tr.top-line{
      border-top: solid 2px #555;
  }

  tr.top-double-line{
    border-bottom: double #555;
    border-top: solid 2px #555;
}

tr.bottom-line{
    border-bottom: solid 2px #555;
    border-top: double #555;
}

.table.table-condensed thead tr.bottom-line th{
    color: #555;
    font-weight: bold;
}

table.dataTable.table-condensed>thead>tr>th.sunday{
    color: red;
    font-weight: bolder;
}


/* Customize the label (the container) */
.container-chk {
    display: block;
    position: relative;
    padding-left: 0px;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 22px; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container-chk input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .container-chk:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container-chk input:checked ~ .checkmark {
    background-color: #2196F3;
  }

  .container-chk.marked input:checked ~ .checkmark {
    background-color: #2ecc71;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container-chk input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container-chk .checkmark:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .checkmark.absent{
      border: solid 1px red;
  }


  #attendance_table thead tr th, #attendance_table.table.table-condensed tbody tr td, #attendance_table.table.table-condensed tbody tr td *:not(.dropdown-default){
      overflow: visible;
  }
  

  label.check-box{
      width: 15px;
      height: 15px;
  }

  label.check-box input{ border: solid 1px #2196F3; font-weight: bold; text-shadow: 0 0 0 #2196F3; }
  label.check-box.marked input.P{ border: solid 1px #2ecc71;  text-shadow: 0 0 0 #2ecc71; }
  label.check-box.marked input.L{ border: solid 1px #e74c3c;  text-shadow: 0 0 0 #e74c3c; }
  label.check-box.marked input.W{ border: solid 1px #9b59b6;  text-shadow: 0 0 0 #9b59b6; }
  label.check-box.marked input.O{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; }
  label.check-box.marked input.D{ border: solid 1px #5758BB; text-shadow: 0 0 0 #5758BB; }
  label.check-box.marked  input.R{ border: solid 1px #f1c40f; text-shadow: 0 0 0 #f1c40f; }
  label.check-box.marked  input.X{ border: solid 1px red; text-shadow: 0 0 0 red; }
  label.check-box.marked  input.Q{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; }
  label.check-box.marked  input{ border: solid 1px #34495e; text-shadow: 0 0 0 #34495e; }

  label.check-box input.P{ border: solid 1px #2ecc71;  text-shadow: 0 0 0 #2ecc71; }
  label.check-box input.L{ border: solid 1px #e74c3c;  text-shadow: 0 0 0 #e74c3c; }
  label.check-box input.W{ border: solid 1px #9b59b6;  text-shadow: 0 0 0 #9b59b6; }
  label.check-box input.O{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; }
  label.check-box input.D{ border: solid 1px #5758BB; text-shadow: 0 0 0 #5758BB; }
  label.check-box input.R{ border: solid 1px #f1c40f; text-shadow: 0 0 0 #f1c40f; }
  label.check-box input.X{ border: solid 1px red; text-shadow: 0 0 0 red; }
  label.check-box input.Q{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; }
  label.check-box input{ border: solid 1px #95a5a6; text-shadow: 0 0 0 #95a5a6; }

  .row.border-top{
      border-top: 1px solid #ccc;
      padding: 15px;
  }
  label.attendance span.key{
      height: 20px;
      width: 20px;
      text-align: center;
      line-height: 20px;
      vertical-align: middle;
      display: inline-block;
  }
  label.attendance.P span.key, .attendance-key.P{ border: solid 1px #2ecc71;  text-shadow: 0 0 0 #2ecc71; color: #2ecc71; }
  label.attendance.L span.key, .attendance-key.L{ border: solid 1px #e74c3c;  text-shadow: 0 0 0 #e74c3c; color: #e74c3c; }
  label.attendance.W span.key, .attendance-key.W{ border: solid 1px #9b59b6;  text-shadow: 0 0 0 #9b59b6; color: #9b59b6; }
  label.attendance.O span.key, .attendance-key.O{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; color: #f39c12; }
  label.attendance.D span.key, .attendance-key.D{ border: solid 1px #5758BB; text-shadow: 0 0 0 #5758BB; color: #5758BB; }
  label.attendance.R span.key, .attendance-key.R{ border: solid 1px #f1c40f; text-shadow: 0 0 0 #f1c40f; color: #f1c40f; }
  label.attendance.X span.key, .attendance-key.X{ border: solid 1px red; text-shadow: 0 0 0 red; color: red; }
  label.attendance.Q span.key, .attendance-key.Q{ border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; color: #f39c12; }
  label.attendance span.key, .attendance-key{ border: solid 1px #95a5a6; text-shadow: 0 0 0 #95a5a6; color: #95a5a6; }

  td>span.P { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #2ecc71;  text-shadow: 0 0 0 #2ecc71; color: #2ecc71; }
  td>span.L { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #e74c3c;  text-shadow: 0 0 0 #e74c3c; color: #e74c3c; }
  td>span.W { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #9b59b6;  text-shadow: 0 0 0 #9b59b6; color: #9b59b6; }
  td>span.O { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; color: #f39c12; }
  td>span.D { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #5758BB; text-shadow: 0 0 0 #5758BB; color: #5758BB; }
  td>span.R { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #f1c40f; text-shadow: 0 0 0 #f1c40f; color: #f1c40f; }
  td>span.X { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px red; text-shadow: 0 0 0 red; color: red; }
  td>span.Q { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #f39c12; text-shadow: 0 0 0 #f39c12; color: #f39c12; }
  td>span.Q { display: inline-block; font-size: 12px; font-weight: bold; line-height: 15px; width: 15px; text-align: center; border: solid 1px #95a5a6; text-shadow: 0 0 0 #95a5a6; color: #95a5a6; }

  label.check-box input{
      width: 100%;
      font-size: 12px;
      font-weight: bold;
      line-height: 15px;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      color: transparent;
      
  }

  label.check-box input:focus{box-shadow: 0px 0px 5px #555 }
  label.check-box input::selection{ background-color: transparent; }
  label.check-box input::-o-selection{ background-color: transparent; }
  label.check-box input::-moz-selection{ background-color: transparent; }
  label.check-box input::-webkit-selection{ background-color: transparent; }


  .table.table-condensed-sm tbody tr td {
    padding-top: 3px;
    padding-bottom: 3px;
}

h3.popover-title{
    margin-top: 0px;
}

.popover-content{
    padding: 0px;
}

#tableWithExportOptions th{
    white-space: nowrap;
}

.badge-issue{ background-color: #f5cd8d; }
.badge-purchase{ background-color: #67dda6; }

.setting{
    width: 100px;
}
.setting.md{ width: 150px; }
.setting.lg{  width: 300px; }

.setting .select2-selection{
    color: #fff;
    background: transparent;
    border-radius: 50px;
    border-color: #fff!important;
}

.setting .select2-container--open .select2-selection{
    border-radius: 25px;
}

.setting .select2-selection__rendered{
    color: #fff!important;
}

.setting .select2-selection__arrow b{
    border-color: #fff transparent transparent transparent!important;
}

#attendance_table td{
    text-align: center!important;
}

#table-wrapper{
    position: relative;
    overflow-x: hidden;
}


.cs-select.cs-active{
    z-index: 9999999;
}


/* reports box */

.report-box{
    text-align: center;
}

.report-box img{
    width: 25%;
    height: auto;
}

.report-box h5{
    color: #555;
    font-size: 1em;
    font-weight: bold;
}

.report-box .btn-group, .btn-group-vertical{
    margin: 0 auto;
}

.report-box .text-dark,
.report-box .text-dark>i{
    color: #777;
    cursor: pointer;
}

.report-box .select2-container .select2-selection .select2-selection__rendered{
    font-size: 0.8em;
}

.report-box .input-group{
    text-align: center;
}

.report-box select.full-width + .select2-container{
    max-width: 70%!important;
    /* margin: 0 auto; */
}

.challans img.img-responsive{
    width: 100%;
    height: auto;
    margin: 0 auto;
}

table.data-view tr td:nth-child(2),
table.data-view tr td + td{
    font-weight: bold;
    text-transform: capitalize;
}   

.nav-tabs.nav-justified > li{
    margin: 0 auto;
}

.help.is-danger{
    color: red;
    font-size: 0.8em;
}

.select2-results__option span{
    position: relative;
    padding-left: 15px;
}

.select2-results__option i.fa-check{
    color: #07c25f;
    position: absolute;
    top: 0;
    left: -5px;
}

.select2-results .select2-results__option{
    padding-left: 15px; 
    position: relative;
}

.select2-results .select2-results__option[aria-selected="true"],
.select2-results .select2-results__option--highlighted[aria-selected="true"]{
    color: #07c25f!important;
}

.select2-results .select2-results__option[aria-selected="true"]::after{
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    display: block;
    position: absolute;
    height: 10px;
    width: 10px;
    font-size : 12px;
    top : 12px;
    left: 0px;
}

.horizontal-app-menu .header .header-inner{
    padding-left: 0;
    padding-right: 0;
}

/* .bg-primary{
    background-color: #17b978 !important;
} */

.horizontal-app-menu .menu-bar > ul > li.more .title {
    display: flex;
    justify-content: center;
    alin-items: center;
}