@import url("ekko-lightbox.css");
.bg-lightgreen{
  background: #e4f5eb !important;
}
/* CARD GLOBAL CSS */
.card{
  border: 0px;
  border-radius: 0rem;
}
.card-header {
	border-bottom: 0px solid #dee2e6;
  background-color: #f8f9fa;
  padding: 10px 15px;
}
.card-body{
  padding: 10px 15px;
}
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.01)!important;
}

/*******.card-body.table-body******/
.table thead th{
  border-bottom: 0px solid #dee2e6;
  background: #fafafc;
  vertical-align: text-top;
}
.table tfoot th {
  border-top: 0px solid #dee2e6;
  background: #fafafc;
  vertical-align: text-top;
  border-bottom: 1px solid #dee2e6;
}
.table td, 
.table th{
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Table Card */
.table-card .card-header{
	padding:10px 15px !important;
}
.table-card .card-body{
	padding:10px 15px !important;
}

.table-card .card-body .table{
	margin-bottom: 0px
}
.table-card .table-row{
	margin-left: -15px;
	margin-right: -15px;
}
.table tr>td:first-child, 
.table tr>th:first-child{
  padding-left: 15px;
  outline: none;
}
.table tr>td:last-child, 
.table tr>th:last-child{
  padding-right: 15px;
}

.table-card>.card-body>.table-row:first-child{
  top: -11px;
  position: relative;
  margin-bottom: -11px;
}
.table-card>.card-body>.table-row:first-child table{
  margin-top: 0px !important;
}



@media(min-width:1600px){
  .card-header {
    border-bottom: 0px solid #dee2e6;
    background-color: #f8f9fa;
    padding: 20px 30px;
  }
  .card-body{
    padding: 20px 30px;
  }

  /* Table Card */
  .table-card .card-header{
    padding:20px 30px !important;
  }
  .table-card .card-body{
    padding:10px 30px !important;
  }
  .table-card .table-row{
    margin-left: -30px;
    margin-right: -30px;
  }
  .table tr>td:first-child, 
  .table tr>th:first-child{
    padding-left: 30px;
  }
  .table tr>td:last-child, 
  .table tr>th:last-child{
    padding-right: 30px;
  }


  table tr>td.details{
      padding-left:0px !important;
      padding-right:0px !important;
  }
}

/* Scroll TO TOP Css */
.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 5rem;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    color: #fff;
    background: rgba(90, 92, 105, 0.8);
    line-height: 46px;
    z-index: 1;
  }
  
  .scroll-to-top:focus, .scroll-to-top:hover {
    color: white;
  }
  
  .scroll-to-top:hover {
    background: #5a5c69;
  }
  
  .scroll-to-top i {
    font-weight: 800;
  }


  /* Start Animation CSS */
  
  @-webkit-keyframes growIn {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes growIn {
    0% {
      -webkit-transform: scale(0.9);
      transform: scale(0.9);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .animated--grow-in, 
  .sidebar .nav-item .collapse {
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  .animated--fade-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
  }

  /* End Animation CSS */

  
  .bg-gradient-primary {
    background-color: #3892eb;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #3892eb), to(#224abe));
    background-image: linear-gradient(180deg, #3892eb 10%, #224abe 100%);
    background-size: cover;
  }
  
  .bg-gradient-secondary {
    background-color: #858796;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #858796), to(#60616f));
    background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
    background-size: cover;
  }
  
  .bg-gradient-success {
    background-color: #1cc88a;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #1cc88a), to(#13855c));
    background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
    background-size: cover;
  }
  
  .bg-gradient-info {
    background-color: #36b9cc;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #36b9cc), to(#258391));
    background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
    background-size: cover;
  }
  
  .bg-gradient-warning {
    background-color: #fbc122;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #fbc122), to(#dda20a));
    background-image: linear-gradient(180deg, #fbc122 10%, #dda20a 100%);
    background-size: cover;
  }
  
  .bg-gradient-danger {
    background-color: #e74a3b;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e74a3b), to(#be2617));
    background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
    background-size: cover;
  }
  
  .bg-gradient-light {
    background-color: #f8f9fc;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #f8f9fc), to(#c2cbe5));
    background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
    background-size: cover;
  }
  
  .bg-gradient-dark {
    background-color: #5a5c69;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #5a5c69), to(#373840));
    background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
    background-size: cover;
  }
  
  .bg-gray-100 {
    background-color: #f8f9fc !important;
  }
  
  .bg-gray-200 {
    background-color: #eaecf4 !important;
  }
  
  .bg-gray-300 {
    background-color: #dddfeb !important;
  }
  
  .bg-gray-400 {
    background-color: #d1d3e2 !important;
  }
  
  .bg-gray-500 {
    background-color: #b7b9cc !important;
  }
  
  .bg-gray-600 {
    background-color: #858796 !important;
  }
  
  .bg-gray-700 {
    background-color: #6e707e !important;
  }
  
  .bg-gray-800 {
    background-color: #5a5c69 !important;
  }
  
  .bg-gray-900 {
    background-color: #3a3b45 !important;
  }
  
  .o-hidden {
    overflow: hidden !important;
  }
  
  
  .text-gray-100 {
    color: #f8f9fc !important;
  }
  
  .text-gray-200 {
    color: #222222 !important;
  }
  
  .text-gray-300 {
    color: #333333 !important;
  }
  
  .text-gray-400 {
    color: #d1d3e2 !important;
  }
  
  .text-gray-500 {
    color: #b7b9cc !important;
  }
  
  .text-gray-600 {
    color: #666666 !important;
  }
  
  .text-gray-700 {
    color: #6e707e !important;
  }
  
  .text-gray-800 {
    color: #5a5c69 !important;
  }
  
  .text-gray-900 {
    color: #999999 !important;
  }

  
  .border-left-primary {
    border-left: 0.25rem solid #3892eb !important;
  }
  
  .border-bottom-primary {
    border-bottom: 0.25rem solid #3892eb !important;
  }
  
  .border-left-secondary {
    border-left: 0.25rem solid #858796 !important;
  }
  
  .border-bottom-secondary {
    border-bottom: 0.25rem solid #858796 !important;
  }
  
  .border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
  }
  
  .border-bottom-success {
    border-bottom: 0.25rem solid #1cc88a !important;
  }
  
  .border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
  }
  
  .border-bottom-info {
    border-bottom: 0.25rem solid #36b9cc !important;
  }
  
  .border-left-warning {
    border-left: 0.25rem solid #fbc122 !important;
  }
  
  .border-bottom-warning {
    border-bottom: 0.25rem solid #fbc122 !important;
  }
  
  .border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
  }
  
  .border-bottom-danger {
    border-bottom: 0.25rem solid #e74a3b !important;
  }
  
  .border-left-light {
    border-left: 0.25rem solid #f8f9fc !important;
  }
  
  .border-bottom-light {
    border-bottom: 0.25rem solid #f8f9fc !important;
  }
  
  .border-left-dark {
    border-left: 0.25rem solid #5a5c69 !important;
  }
  
  .border-bottom-dark {
    border-bottom: 0.25rem solid #5a5c69 !important;
  }
  
  .progress-sm {
    height: .5rem;
  }
  
  .rotate-15 {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  
  .rotate-n-15 {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  
  
  .card .card-header .dropdown {
    line-height: 1;
  }
  
  .card .card-header .dropdown .dropdown-menu {
    line-height: 1.5;
  }
  
  .card .card-header[data-toggle="collapse"] {
    text-decoration: none;
    position: relative;
    /*padding: 0.75rem 3.25rem 0.75rem 1.25rem;*/
    padding: 10px 20px;
  }
  
  .card .card-header[data-toggle="collapse"]::after {
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 1.725rem;
    line-height: 51px;
    font-weight: 900;
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    color: #d1d3e2;
  }
  
  .card .card-header[data-toggle="collapse"].collapsed {
    border-radius: 0.35rem;
  }
  
  .card .card-header[data-toggle="collapse"].collapsed::after {
    content: '\f105';
  }
  
  .error {
    color: red !important;
  }
  
  @-webkit-keyframes noise-anim {
    0% {
      clip: rect(89px, 9999px, 100px, 0);
    }
    5% {
      clip: rect(4px, 9999px, 62px, 0);
    }
    10% {
      clip: rect(43px, 9999px, 16px, 0);
    }
    15% {
      clip: rect(2px, 9999px, 68px, 0);
    }
    20% {
      clip: rect(12px, 9999px, 6px, 0);
    }
    25% {
      clip: rect(89px, 9999px, 25px, 0);
    }
    30% {
      clip: rect(15px, 9999px, 38px, 0);
    }
    35% {
      clip: rect(57px, 9999px, 97px, 0);
    }
    40% {
      clip: rect(24px, 9999px, 72px, 0);
    }
    45% {
      clip: rect(81px, 9999px, 3px, 0);
    }
    50% {
      clip: rect(93px, 9999px, 26px, 0);
    }
    55% {
      clip: rect(68px, 9999px, 85px, 0);
    }
    60% {
      clip: rect(43px, 9999px, 28px, 0);
    }
    65% {
      clip: rect(44px, 9999px, 11px, 0);
    }
    70% {
      clip: rect(17px, 9999px, 33px, 0);
    }
    75% {
      clip: rect(74px, 9999px, 66px, 0);
    }
    80% {
      clip: rect(100px, 9999px, 4px, 0);
    }
    85% {
      clip: rect(92px, 9999px, 31px, 0);
    }
    90% {
      clip: rect(93px, 9999px, 98px, 0);
    }
    95% {
      clip: rect(23px, 9999px, 77px, 0);
    }
    100% {
      clip: rect(92px, 9999px, 8px, 0);
    }
  }
  
  @keyframes noise-anim {
    0% {
      clip: rect(89px, 9999px, 100px, 0);
    }
    5% {
      clip: rect(4px, 9999px, 62px, 0);
    }
    10% {
      clip: rect(43px, 9999px, 16px, 0);
    }
    15% {
      clip: rect(2px, 9999px, 68px, 0);
    }
    20% {
      clip: rect(12px, 9999px, 6px, 0);
    }
    25% {
      clip: rect(89px, 9999px, 25px, 0);
    }
    30% {
      clip: rect(15px, 9999px, 38px, 0);
    }
    35% {
      clip: rect(57px, 9999px, 97px, 0);
    }
    40% {
      clip: rect(24px, 9999px, 72px, 0);
    }
    45% {
      clip: rect(81px, 9999px, 3px, 0);
    }
    50% {
      clip: rect(93px, 9999px, 26px, 0);
    }
    55% {
      clip: rect(68px, 9999px, 85px, 0);
    }
    60% {
      clip: rect(43px, 9999px, 28px, 0);
    }
    65% {
      clip: rect(44px, 9999px, 11px, 0);
    }
    70% {
      clip: rect(17px, 9999px, 33px, 0);
    }
    75% {
      clip: rect(74px, 9999px, 66px, 0);
    }
    80% {
      clip: rect(100px, 9999px, 4px, 0);
    }
    85% {
      clip: rect(92px, 9999px, 31px, 0);
    }
    90% {
      clip: rect(93px, 9999px, 98px, 0);
    }
    95% {
      clip: rect(23px, 9999px, 77px, 0);
    }
    100% {
      clip: rect(92px, 9999px, 8px, 0);
    }
  }
  
  .error:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 #e74a3b;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
  }
  
  @-webkit-keyframes noise-anim-2 {
    0% {
      clip: rect(69px, 9999px, 53px, 0);
    }
    5% {
      clip: rect(37px, 9999px, 82px, 0);
    }
    10% {
      clip: rect(35px, 9999px, 22px, 0);
    }
    15% {
      clip: rect(97px, 9999px, 91px, 0);
    }
    20% {
      clip: rect(45px, 9999px, 56px, 0);
    }
    25% {
      clip: rect(82px, 9999px, 3px, 0);
    }
    30% {
      clip: rect(73px, 9999px, 70px, 0);
    }
    35% {
      clip: rect(70px, 9999px, 50px, 0);
    }
    40% {
      clip: rect(15px, 9999px, 87px, 0);
    }
    45% {
      clip: rect(78px, 9999px, 34px, 0);
    }
    50% {
      clip: rect(95px, 9999px, 21px, 0);
    }
    55% {
      clip: rect(82px, 9999px, 35px, 0);
    }
    60% {
      clip: rect(57px, 9999px, 30px, 0);
    }
    65% {
      clip: rect(21px, 9999px, 71px, 0);
    }
    70% {
      clip: rect(17px, 9999px, 42px, 0);
    }
    75% {
      clip: rect(69px, 9999px, 9px, 0);
    }
    80% {
      clip: rect(43px, 9999px, 54px, 0);
    }
    85% {
      clip: rect(39px, 9999px, 12px, 0);
    }
    90% {
      clip: rect(83px, 9999px, 34px, 0);
    }
    95% {
      clip: rect(57px, 9999px, 71px, 0);
    }
    100% {
      clip: rect(81px, 9999px, 41px, 0);
    }
  }
  
  @keyframes noise-anim-2 {
    0% {
      clip: rect(69px, 9999px, 53px, 0);
    }
    5% {
      clip: rect(37px, 9999px, 82px, 0);
    }
    10% {
      clip: rect(35px, 9999px, 22px, 0);
    }
    15% {
      clip: rect(97px, 9999px, 91px, 0);
    }
    20% {
      clip: rect(45px, 9999px, 56px, 0);
    }
    25% {
      clip: rect(82px, 9999px, 3px, 0);
    }
    30% {
      clip: rect(73px, 9999px, 70px, 0);
    }
    35% {
      clip: rect(70px, 9999px, 50px, 0);
    }
    40% {
      clip: rect(15px, 9999px, 87px, 0);
    }
    45% {
      clip: rect(78px, 9999px, 34px, 0);
    }
    50% {
      clip: rect(95px, 9999px, 21px, 0);
    }
    55% {
      clip: rect(82px, 9999px, 35px, 0);
    }
    60% {
      clip: rect(57px, 9999px, 30px, 0);
    }
    65% {
      clip: rect(21px, 9999px, 71px, 0);
    }
    70% {
      clip: rect(17px, 9999px, 42px, 0);
    }
    75% {
      clip: rect(69px, 9999px, 9px, 0);
    }
    80% {
      clip: rect(43px, 9999px, 54px, 0);
    }
    85% {
      clip: rect(39px, 9999px, 12px, 0);
    }
    90% {
      clip: rect(83px, 9999px, 34px, 0);
    }
    95% {
      clip: rect(57px, 9999px, 71px, 0);
    }
    100% {
      clip: rect(81px, 9999px, 41px, 0);
    }
  }
  
  .error:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 #3892eb;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
  }

  .text-xs {
    font-size: 12px;
  }
  .text-sm {
    font-size: 14px;
  }
  .text-md {
    font-size: 16px;
  }
  .text-lg {
    font-size: 18px;
  }


  @media(max-width:575.98px){
    .text-xs {
      font-size: 10px;
    }
    .text-sm {
      font-size: 12px;
    }
    .text-md {
      font-size: 14px;
    }
    .text-lg {
      font-size: 16px;
    }
  }
  
  .font-weight-medium{
    font-weight: 500 !important
  }

  .text-gray-theme-1 {
    color: #222222 !important;
  }

  .text-gray-theme-2 {
    color: #333333 !important;
  }
  .text-normal {
    color: #333333 !important;
    font-size: 16px;
    font-weight: 500;
  }
  
  .icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }


  @media(min-width:1600px){
    .text-xs {
      font-size: 14px;
    }
    .text-sm {
      font-size: 16px;
    }
    .text-md {
      font-size: 18px;
    }
    .text-lg {
      font-size: 20px;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    border: 1px solid #222222;
    -webkit-text-fill-color: #222222;
    -webkit-box-shadow: 0 0 0px 1000px #f1f1f5 inset;
    transition: background-color 5000s ease-in-out 0s;
    border: #f1f1f5 1px solid;
  }

/* Modal Css */
.modal-content{
  border-radius: 0px !important;
}
.modal-content .modal-header{
  background-color: #e2ede4;
  padding: 24px 35px;
}
.modal-header .modal-title {
  font-size: 22px;
  padding-top: 3px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.modal-header .close {
  color: #2e2f2f;
  opacity: 1;
  font-size: 30px;
  outline: none;
  padding: 11px 15px;       
}
.modal-content .modal-body {
  padding: 20px 15px;
  font-size:15px;
}
.modal-body .container-fluid{
  /* padding: 0px !important; */
}
.modal-body .form-group {
  margin-bottom: 10px;
  align-items: center;
}
.modal-body .form-row{
 -ms-flex-align: center!important;
  align-items: center!important;
}
.modal-body .form-group label, 
.modal-body .form-row label {
  font-size: 15px;
}
.modal-body strong {
  font-weight: 500;
}
/* ****** */

/* modal_with_style Popup start */
.modal_with_style .title{
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 500;
  /*letter-spacing: 1px;*/
}
.modal_with_style .modal-body {
  padding: 20px 15px;
}
/* .modal_with_style .card{
  border: 1px solid #dcdce4;
} */
/* .modal_with_style .card-header {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border: 0px;
} */
.modal_with_style .card-header h6{
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 500 !important;
  /*letter-spacing: 1px;*/
}
.modal_with_style .form-group {
  margin-bottom: 8px;
}
.modal_with_style a.card-icon.receipt-icon {
  font-size: 24px;
  vertical-align: top;
  line-height: 24px;
}
/* ****** */

/*ekko-lightbox*/
.ekko-lightbox.modal .modal-content .modal-header{
  padding: 0;
  background: transparent;
  border: 0;
}
.ekko-lightbox.modal .modal-header .close{
  background: #000;
  border-radius: 50%;
  font-weight: normal;
  text-shadow: none;
  color: #fff;
  width: 25px;
  height: 25px;
  line-height: 0;
  text-align: center;
  padding: 2px;
  outline:none;
}
.ekko-lightbox.modal .modal-header .close>span{
  line-height: 20px;
  display: inline-block;
  width: 20px;
  font-size: 25px;
}


/*Modal card*/
.modal .shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  box-shadow:  1px 1px 16px rgba(0,0,0,.15)!important
}
.modal-body .card{
  /*margin-bottom: 30px;*/
}
.modal-body .card-header {
  padding: 8px 20px;
  border-bottom: 0px;
}
.modal-body .card-body {
  padding: 20px 20px;
}


/* right modal*/
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}
.modal.bottom .modal-content {
  height: 100%;
  overflow-y: auto;
}
 @media(min-width:576px){

    /*Modal-right*/
     .modal.right .modal-dialog {
	    position: fixed;
	    margin: auto;
	    max-width: 80%;
	    height: 100%;
	    -webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	    -o-transform: translate3d(0%, 0, 0);
	    transform: translate3d(0%, 0, 0);
    }

    .modal.right.fade .modal-dialog {
	    right: -414px;
	    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	    transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.show .modal-dialog {
	    right: 0;
    }

    .modal.right .modal-dialog-centered{
      min-height: calc(100% - 0rem);
    }

    .modal.right .modal-content {
	    height: 100%;
	    overflow-y: auto;
    }

    .modal.right .modal-body {
	    padding: 15px 15px 20px;
    }


    /*Modal Bottom*/
    .modal.bottom .modal-dialog {
	    position: fixed;
	    margin: auto;
        width: 100%;
        max-width: 100%;
	    -webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	    -o-transform: translate3d(0%, 0, 0);
	    transform: translate3d(0%, 0, 0);
    }
    .modal.bottom .modal-dialog {
         height: 60%;
	    max-height: 60%;
    }

    .modal.bottom.fade .modal-dialog {
	    bottom: -414px;
	    -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	    -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	    -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	    transition: opacity 0.3s linear, bottom 0.3s ease-out;
    }

    .modal.bottom.fade.show .modal-dialog {
	    bottom: 0;
    }

    .modal.bottom .modal-body {
	    padding: 15px 15px 20px;
    }

     
   
 }
 @media(min-width:768px){
  .modal.right .modal-dialog{
    max-width: 60%;
  }
 }
 @media (min-width:992px) {
  .modal.right .modal-dialog {
        /*width: 50%;
        max-width: 800px;
        min-width: 700px;*/
        width: 800px;
        max-width: 800px;
    }

  .modal.right.modal-md .modal-dialog{
      max-width:720px;
  }
}
 @media(max-width:767.98px){
    .modal-content .modal-body{
      font-size:14px;
    }
 }
 
/* ****** */


/*********************** datepicker css *********************/
.datepicker {
    list-style: none
}

.datepicker.dropdown-menu {
    margin: 2px 0;
    padding: 4px;
    width: 19em
}

@media (min-width:768px) {
    .datepicker.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

@media (min-width:992px) {
    .datepicker.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

@media (min-width:1200px) {
    .datepicker.dropdown-menu.timepicker-sbs {
        width: 38em
    }
}

.datepicker.dropdown-menu:after,
.datepicker.dropdown-menu:before {
    content: '';
    display: inline-block;
    position: absolute
}

.datepicker.dropdown-menu.bottom:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, .2);
    top: -7px;
    left: 7px
}

.datepicker.dropdown-menu.bottom:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    top: -6px;
    left: 8px
}

.datepicker.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0, 0, 0, .2);
    bottom: -7px;
    left: 6px
}

.datepicker.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    bottom: -6px;
    left: 7px
}

.datepicker.dropdown-menu.pull-right:before {
    left: auto;
    right: 6px
}

.datepicker.dropdown-menu.pull-right:after {
    left: auto;
    right: 7px
}

.datepicker .list-unstyled {
    margin: 0
}

.datepicker a[data-action] {
    padding: 6px 0
}

.datepicker a[data-action]:active {
    box-shadow: none
}

.datepicker .timepicker-hour,
.datepicker .timepicker-minute,
.datepicker .timepicker-second {
    width: 54px;
    font-weight: 700;
    font-size: 1.2em;
    margin: 0
}

.datepicker button[data-action] {
    padding: 6px
}

.datepicker .btn[data-action=incrementHours]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Hours"
}

.datepicker .btn[data-action=incrementMinutes]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Minutes"
}

.datepicker .btn[data-action=decrementHours]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Hours"
}

.datepicker .btn[data-action=decrementMinutes]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Minutes"
}

.datepicker .btn[data-action=showHours]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Hours"
}

.datepicker .btn[data-action=showMinutes]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Minutes"
}

.datepicker .btn[data-action=togglePeriod]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle AM/PM"
}

.datepicker .btn[data-action=clear]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Clear the picker"
}

.datepicker .btn[data-action=today]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Set the date to today"
}

.datepicker .picker-switch {
    text-align: center
}

.datepicker .picker-switch::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle Date and Time Screens"
}

.datepicker .picker-switch td {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    line-height: inherit
}

.datepicker .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%
}

.datepicker table {
    width: 100%;
    margin: 0
}

.datepicker table td,
.datepicker table th {
    text-align: center;
    border-radius: 4px
}

.datepicker table th {
    height: 20px;
    line-height: 20px;
    width: 20px
}

.datepicker table th.picker-switch {
    width: 145px
}

.datepicker table th.disabled,
.datepicker table th.disabled:hover {
    background: 0 0;
    color: #777;
    cursor: not-allowed
}

.datepicker table th.prev::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Previous Month"
}

.datepicker table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Next Month"
}

.datepicker table thead tr:first-child th {
    cursor: pointer
}

.datepicker table thead tr:first-child th:hover {
    background: #eee
}

.datepicker table td {
    height: 54px;
    line-height: 54px;
    width: 54px
}

.datepicker table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #777
}

.datepicker table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px
}

.datepicker table td.day:hover,
.datepicker table td.hour:hover,
.datepicker table td.minute:hover,
.datepicker table td.second:hover {
    background: #eee;
    cursor: pointer
}

.datepicker table td.new,
.datepicker table td.old {
    color: #777
}

.datepicker table td.today {
    position: relative
}

.datepicker table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #337ab7;
    border-top-color: rgba(0, 0, 0, .2);
    position: absolute;
    bottom: 4px;
    right: 4px
}

.datepicker table td.active,
.datepicker table td.active:hover {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datepicker table td.active.today:before {
    border-bottom-color: #fff
}

.datepicker table td.disabled,
.datepicker table td.disabled:hover {
    background: 0 0;
    color: #777;
    cursor: not-allowed
}

.datepicker table td span {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 4px
}

.datepicker table td span:hover {
    background: #eee
}

.datepicker table td span.active {
    background-color: #337ab7;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .25)
}

.datepicker table td span.old {
    color: #777
}

.datepicker table td span.disabled,
.datepicker table td span.disabled:hover {
    background: 0 0;
    color: #777;
    cursor: not-allowed
}

.datepicker.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px
}

.datepicker.wider {
    width: 21em
}

.datepicker .datepicker-decades .decade {
    line-height: 1.8em!important
}

.input-group.date .input-group-addon {
    cursor: pointer
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.datepicker {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    line-height: 1.42857143;
    color: #000000;
    position: relative;
    transition: none
}
.datepicker th.switch {
  font-size: 18px;
}

.datepicker table td.day:hover,
.datepicker table td.hour:hover,
.datepicker table td.minute:hover,
.datepicker table td.second:hover {
    background: 0 0
}

.datepicker table td.active {
    background: 0 0
}

.datepicker table td.active:hover {
    background: 0 0
}

.datepicker table td span {
    display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 70px
}

.datepicker table th {
    height: 32px;
    line-height: 32px;
    width: 32px;
    font-weight: 500;
    opacity: 1
}

.datepicker table th.picker-switch {
    width: 145px;
    font-weight: 700;
    color: #000
}

.datepicker table td.today:before {
    display: none
}

.datepicker .accordion-toggle {
    text-align: center;
    background-color: #0d5bdd
}

.datepicker .accordion-toggle a {
    color: #fff;
    display: inline-block;
    padding: 3px 0;
    cursor: pointer
}

.datepicker .accordion-toggle a:hover {
    background: 0 0;
    color: #fff
}

.datepicker .timepicker-hour,
.datepicker .timepicker-minute,
.datepicker .timepicker-second {
    font-weight: 400;
    font-size: 3.5rem
}

.datepicker.dropdown-menu {
    position: absolute;
    /* display: block; */
    visibility: visible;
    opacity: 1;
    clip: auto;
    width: 300px;
    padding: 0;
    margin: 0;
    z-index: 1050;
}

.datepicker.dropdown-menu:after,
.datepicker.dropdown-menu:before {
    display: none
}

.datepicker .datepicker>div {
    display: table;
    width: 100%
}


.datepicker {
  background-color: #fff;
  z-index: 0;
  width: 300px;
  -moz-box-shadow: box-shadow(1);
  -webkit-box-shadow: box-shadow(1);
  box-shadow: box-shadow(1)
}

.datepicker table th.next,
.datepicker table th.prev {
  padding-bottom: 0
}

.datepicker table th.next span,
.datepicker table th.prev span {
  padding-top: 8px;
  display: inline-block
}

.datepicker table thead tr:first-child th:hover {
  background-color: inherit
}

.modal .datepicker {
  box-shadow: none
}

.datepicker table th {
  text-transform: capitalize
}

.datepicker table th.dow {
  color: #333;
  line-height: 33px;
  height: 33px
}

.datepicker table td {
  position: relative;
  cursor: pointer
}

.datepicker table td.day {
  height: 40px;
  line-height: 40px;
  width: 40px
}

.datepicker table td.day span {
  height: 40px;
  line-height: 40px;
  width: 40px;
  position: absolute;
  z-index: -1;
  margin: 1px 0 0 -15px;
  border-radius: 500px;
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  margin: auto
}

.datepicker table {
  margin: 5px 0
}
.datepicker table td span {
  border-radius: 500px
}

.datepicker table td.day:hover,
.datepicker table td.hour:hover,
.datepicker table td.minute:hover,
.datepicker table td.second:hover {
  color: #444
}

.datepicker table td.day:hover span,
.datepicker table td.hour:hover span,
.datepicker table td.minute:hover span,
.datepicker table td.second:hover span {
  background-color: #eee
}

.datepicker table td.day.active:hover span,
.datepicker table td.hour.active:hover span,
.datepicker table td.minute.active:hover span,
.datepicker table td.second.active:hover span {
  background-color: #00a94c;
  background-image:none;
}

.datepicker table td.day.disabled:hover,
.datepicker table td.hour.disabled:hover,
.datepicker table td.minute.disabled:hover,
.datepicker table td.second.disabled:hover {
  color: #777
}

.datepicker table td.day.disabled:hover span,
.datepicker table td.hour.disabled:hover span,
.datepicker table td.minute.disabled:hover span,
.datepicker table td.second.disabled:hover span {
  background: 0 0
}

.datepicker table td.active span {
  background-color: #00a94c;
  background-image:none;
}

.datepicker table td.active span:hover {
  background-color: #00a94c;
  background-image:none;
}

.datepicker table td span.active.active {
  background-color: #00a94c;
  background-image:none;
}

.datepicker table td.day.active:hover {
  color: #fff;
  background-color: #00a94c;
}

.datepicker table td.active.active {
  color: #fff;
  background-color: #00a94c;
}

.datepicker table td.active span:hover {
  color: #fff;
  background-color: #00a94c;
}

.datepicker-modal .datepicker {
  padding-bottom: 30px
}

.datepicker-modal .timepicker {
  display: none
}

.datepicker-modal .datepicker-tab {
  padding: 0;
  margin: 0;
  display: table;
  width: 100%;
  background: #444
}

.datepicker-modal .datepicker-tab li {
  float: left;
  width: 50%;
  display: table-cell;
  vertical-align: middle
}

.datepicker-modal .datepicker-tab li a {
  display: block;
  font-size: 18px;
  border-bottom: 5px solid #444;
  color: #b2b2b2;
  height: 60px;
  line-height: 60px;
  position: relative
}

.datepicker-modal .datepicker-tab li a.active {
  color: #fff;
  border-color: #fff
}

.datepicker-modal .datepicker-tab li a.active:before {
  content: "";
  width: 100%;
  z-index: 10;
  height: 5px;
  position: absolute;
  left: 0;
  bottom: -5px
}