/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Oct 22, 2019, 10:51:56 AM
    Author     : win
*/

body{font-family: 'Raleway', sans-serif; background: #f5f5f5; font-size:15px;}
a{color: #2196f3}
header{background: #fdd835; min-height: 65px; -webkit-box-shadow: 0 3px 7px 3px rgba(0,0,0,0.1); box-shadow: 0 3px 7px 3px rgba(0,0,0,0.1); padding: 10px; box-sizing: border-box; position: fixed; left: 0; top: 0; z-index: 9; width: 100%;}
header i{font-size: 24px !important; color: #616161; vertical-align: middle;}
header img{margin: 0 15px 0 0;}
.navbar{float: right; background: transparent; border: 0; font-size: 15px; color: #666666; margin-top: 5px; margin-bottom: 0; min-height: 40px;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{color:#fff; font-weight: 400; background: #e5bb00}
.nav>li>a{padding: 8px;}
.navbar-collapse{padding: 0;}
.nav>li.active a i{color: #fff;}

.headertitle{font-size: 24px; color: #424242; font-weight: 700; margin: 0 0px 5px;}

.searchsec{background: #fff; padding: 10px; margin: 5px 10px; width: 98%; height: auto; overflow: hidden;}
.searchbox{padding: 6px; width: 100%; font-size: 15px; color: #424242; border: 0; border-radius: 2px}

.nopad{padding: 0;}

.filter a{color: #2196f3; padding: 6px 12px; border: 1px solid #e5e5e5; border-radius: 2px; margin-top: 1px; display: inline-block;}
.filter a i{color: #616161; vertical-align: middle; font-size: 15px;}

.addbutton a{font-size: 16px; color:#fff; font-weight:600; background: #e5bb00; padding: 6px 10px; border-radius: 2px; margin-top: 1px; display: inline-block; min-width:130px;}
.addbutton a i{font-size: 18px; vertical-align: middle;}
.addbutton a:hover{opacity: 0.8; text-decoration: none;}

.panel{border: 0;}
.panel-body{padding: 0;}

.table a i{color: #616161; margin: 0 5px; font-size: 18px;}

.leftnav{background: #424242; width: 40px; height: 100vh; float: left; margin-left: -15px; position: fixed; top: 68px;}
.rightsec{width: 100%; float: left;}
.rightseccollapse{width: calc(100% - 85px); float: left;}
.rightcontainer{width: calc(100% - 20px); float: left; margin: 80px 0 0 30px;}

.leftnavclose{display: none;}

.leftnav ul{list-style: none; margin: 0; padding: 0;}
.leftnav ul li{text-align: center; font-size: 15px; color: #fff; padding: 10px 0; border-bottom: 1px solid #4b4b4b; position: relative;}
.leftnav ul li a{color: #fff; display: block; }
.leftnav ul li a i{display: block; font-size: 20px;}
.leftnav ul li a:hover{opacity: 0.8; text-decoration: none;}

.sublinks{display:none; width: 100%; height: auto; padding: 0; border-radius: 0px; z-index: 10; margin: 15px 0 0; }
.sublinks ul{list-style: none; margin: 0; padding: 0;}
.sublinks ul li{text-align: center; font-size: 15px; color: #fff; padding: 5px 10px !important; border: 1px solid #4b4b4b; text-align: left;}
.sublinks ul li a{color: #fff; }
.sublinks ul li a:hover{opacity: 0.8; text-decoration: none;}

.showlink{display: block;}

td.truncate {
    white-space: nowrap;        /* Prevent line breaks */
    overflow: hidden;           /* Hide overflowed text */
  }

.ui-autocomplete {
  position: absolute !important; /* Ensure it is positioned outside the flow */
  z-index: 1050; /* Higher z-index to appear above other elements */
  max-height: 200px; /* Set a maximum height for the dropdown */
  overflow-y: auto; /* Enable scrolling if content exceeds max height */
  border:1px solid #7d7b7b; 
}

table tr:first-child th {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd !important;
}

.pplan th, td {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd;
  padding-top:0px !important;
  padding-bottom:0px !important;
  white-space: nowrap;
  overflow: hidden;
}

.pplan table {
  table-layout: fixed;
  width: 100%;  
}

.td30{
  max-width: 30px;
}

.td100{
  max-width: 100px;
}

.input-container {
  position: relative;
  display: inline-block;
}

.input-container input {
  padding-right: 30px; /* Add space for the arrow */
}

.input-container::after {
  content: '\25BC'; /* Unicode for down arrow */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent interaction with the arrow */
  font-size: 16px;
  color: #888;
}

.sticky-top {
  position: sticky;
  top: -1px; /* Adjust based on your header height */
  z-index: 1020; /* Ensures it stays above other content */
}

.bg-light {
  background-color: #f8f9fa !important;
}

.yellowbg{background-color: #fff2b9;} 
      

.disabled-link {
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
  opacity: 0.6;
}

.readonly-input[readonly] {
  background-color: #f0f0f0; /* light gray */
  color: #333;
  border: 1px solid #ccc;
}


.form-group { margin-bottom: 7px; }
.formarea label{font-size: 15px; color: #676767; margin-bottom: 0px; font-weight: 600; display: block; white-space: nowrap;}
.formarea label span{font-size: 15px; color: #999999; font-weight: 600;}

.formarea select{width: 100%; border:1px solid #7d7b7b; border-radius: 2px; padding: 0 10px; height: 25px;  line-height: 25px; appearance: none; -moz-appearance: none; -webkit-appearance: none; font-size: 15px; color: #424242; background-color:#fff !important; background: url("../images/droparrow.png") no-repeat center right; }
.formarea input[type="text"], .formarea input[type="number"]{width: 100%; border:1px solid #7d7b7b; border-radius: 2px; height: 25px; line-height: 25px; font-size: 15px; color: #424242; box-shadow: 0 0; padding: 6px 2px; }
.formarea input[type="time"], .formarea input[type="number"]{width: 100%; border:1px solid #7d7b7b; border-radius: 2px; height: 25px; line-height: 25px; font-size: 15px; color: #424242; box-shadow: 0 0; padding: 6px 2px; }
.notesec{ border:1px solid #7d7b7b; font-size: 15px; font-style: italic; font-weight: 600; color: #333333; margin-top: 40px}
.formarea textarea{width: 100%; border:1px solid #7d7b7b; border-radius: 2px; padding: 0 10px; height: 50px; font-size: 15px; color: #424242; box-shadow: 0 0; resize: none; }

.formarea input[type="radio"] {
    position:absolute;
    /*clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);*/
    -moz-appearance: radio-container;
    -webkit-animation: radio-container;
    animation: radio-container;
    appearance: radio-container;
    width:30px;
    height:25px; margin: 0;
    opacity: 0;
}
.formarea input[type="radio"] + label::before {
    content: url('../images/checkbox.png');
    display: inline-block;
    margin-top: 0;
    vertical-align: middle;
}
.formarea input[type="radio"]:checked + label::before {
    content: url('../images/checkbox-checked.png');
}
.input-group-addon.customslinks {border: none; background-color: transparent; min-width: 110px; width: 20%; padding-left: 0; float: left; text-align: left; font-size: 13px;}
.gCont {width: 48%; display: inline-block;}


.btnsec {text-align: center;margin: 20px 0;width: 100%; float: left;}
button.savebtn,a.savebtn {background: #e5bb00;height: 33px;line-height: 32px;border: 0;font-size: 18px;color: #fff;outline: none;border-radius: 4px;padding-left: 10px;padding-right: 10px;text-decoration: none;display: inline-block;  text-align: center;}
.cancelbtn {background: #e5e5e5; height: 33px; line-height: 32px; border: 0; font-size: 18px; color: #424242; outline: none; border-radius: 4px; padding-left:10px; padding-right:10px;}

.loginlogo{margin: 6% auto 25px;}

.loginsec{background: #fff; padding: 25px 0px; width: 450px; margin: 0 auto; height: auto; overflow: hidden;}

.leftnavopenexpan{width: 200px; z-index: 10; -webkit-box-shadow: 3px 0 7px 3px rgba(0,0,0,0.1); box-shadow: 3px 0 7px 3px rgba(0,0,0,0.1); text-align: left; display: none;}
.leftnavopenexpan ul li {text-align: left; padding: 6px 15px;}
.leftnavopenexpan ul li a i{display: inline-block; margin-right: 10px;}
.leftnavopenexpan ul li a:hover{color: #fdd835;}

.iconright{float: right; margin-right: 0px !important;}

.leftnaxexpshow{display: block;}

.btnright{text-align: right !important; margin-bottom: 0;}
.savebtnlft{float: left; margin: 0 1px;}
.nobodtop{border-top:0px}

.ovrerlapform{position: absolute; left: 0; right: 0; margin: 0 auto; width: 85%; height: auto; top:10%; z-index: 999; -webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.20); box-shadow: 0 0 15px 0 rgba(0,0,0,0.20);}

.bluelegend{width: 15px; height: 15px; border-radius: 2px; background-color: blue; margin-right: 2px; vertical-align: middle; display: inline-block; margin-top: -3px;}
.redlegend{width: 15px; height: 15px; border-radius: 2px; background-color: red; margin-right: 2px; vertical-align: middle; display: inline-block; margin-top: -3px;}
.pinklegend{width: 15px; height: 15px; border-radius: 2px; background-color: pink; margin-right: 2px; vertical-align: middle; display: inline-block; margin-top: -3px;}


.searchsecauto{background: #fff; padding: 10px; margin: 5px 8px; height: auto; overflow: hidden;}
.btnauto {background: #e5bb00; white-space: nowrap; height: 32px; line-height: 28px; border: 0; font-size: 18px; color: #fff; width: 100%; outline: none; width: auto; border-radius: 4px; padding-left: 10px; padding-right: 10px;}

.dropdownmenu{position: absolute; background-color: #fff; -webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,0.15); box-shadow: 0 0 10px 2px rgba(0,0,0,0.15); width: 480px; padding: 15px; right: 10px; top: 0; z-index: 999999; display: none;} 
.dropdownmenu a{padding: 5px 0; display: inline-block;}
.boxtyperad{width: auto; float: left; margin-right: 10px;}
.lwhcell td{padding: 0 2px 5px;}

.activerow{background-color: #ffefabab !important;}
.nobgtd{background-color: transparent !important;}

.grdcell{padding: 0px!important;
    margin: 0px!important;
    line-height: 22px!important;
	height: 22px!important;}

.listsec{padding: 10px; background-color: #fff2b9; height: 75vh;}
.listsec ul{padding: 0; margin: 0; list-style-type: none;}
.listsec ul li{padding: 10px 0 5px; font-weight: 700; font-size: 18px;cursor: pointer;}
.listsec ul li.active{background-color: blue; color: #fff;cursor: pointer;} 
.bluetxt{color: blue; font-size: 20px; font-weight: 700; width: 100%; display: block; margin-bottom: 3px;}
.redtxt{color: red; font-size: 15px; font-weight: 700; width: 100%; display: block;}
.yellowbg{background-color: #fff2b9;}
.shifts input{opacity: 1 !important; width: 25px !important; }
.day-shift{color: green !important}
.night-shift{color: blue !important}
.formarea-inn-row{display: flex; justify-content: space-between; padding-bottom: 15px;}
.cus-name{display: flex; gap: 20px; align-items: center;}
.formarea .cus-name input[type="text"]{padding: 0px 20px; height: 25px;}
#repeated-job-list.table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th {background-color: transparent;}
.g-row{display:flex; gap:20px; margin-bottom:0px; align-items: center;}
.g-row .form-control{width:100%;}
.col-repeat{width:100%;}
.count-text {display: block;font-size: 1.2em;}
.list-group-item.active {
    background-color: #007bff;
    color: white;
}
.batch-row {
    color: #e413a5 !important;
}

.offset-inputs-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 0px;
  }
  
.offset-field {
    flex: 0 0 7%;
    min-width: 60px; /* Prevent fields from getting too narrow */
}

@media(max-width:1367px){
    .navbar{font-size: 13px;}
    .nav>li>a {padding: 8px 6px;}
}
@media(max-width:1025px){
    header i {font-size: 19px !important}
    header{min-height: 30px;}
    header img{width: 110px; height: auto;}
    .navbar{font-size: 11px;}
    .nav>li>a {padding: 2px 4px;}
    .navbar {min-height: 30px;}
    .leftnav {top: 55px;}
    .leftnav ul li{font-size: 12px;}
    .leftnav ul li a i{font-size: 18px;}
    .sublinks ul li{padding: 5px !important;}
}
@media(max-width:980px){
    header i {font-size: 14px !important}
    .nav>li>a {padding: 2px 1px;}
    header img{width: 70px; height: auto;}
    .leftnav {top: 76px;}
    .leftnav ul li a i{font-size: 16px;}
    .filter{padding: 0;}
    .filter a {margin-top: 5px;}
    .addbutton a {margin-top: 5px;}
    .rightcontainer{margin-left: 30px;}
}
@media(max-width:767px){
    .navbar-toggle{margin: 0;}
    header img {width: 150px; height: auto;}
    .leftnav {top: 55px;}
    header{padding: 7px 10px;}
    .navbar-default .navbar-toggle{border-color: #fff;}
    .navbar-default .navbar-toggle .icon-bar{background-color: #fff;}
    .rightcontainer{margin-top: 60px;}
    .addbutton a{padding: 6px 4px; font-size: 13px;}

    .navbar-collapse.in{overflow-y: initial; width: 320px;}
    .navbar-nav {margin: 7.5px 0px;}
    .navbar {font-size: 16px;}

    .nav>li{margin-bottom: 4px;}
    .nav>li>a {padding: 6px 10px;}
    
    .navbar-default .navbar-collapse, .navbar-default .navbar-form{border-color:transparent}

    .offset-inputs-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    
    .offset-field {
        flex: none;
        width: 100%;
    }
}