/*--================
  font family
  ===============================--*/
  @import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
  @import url('https://fonts.googleapis.com/css?family=K2D');

  /* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

    html {
        color: #222;
        font-size: 1em;
        line-height: 1.4;
    }
     button:focus{
    }


    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

   

    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }

  
    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    textarea {
        resize: vertical;
    }

    *, *:aftwe, *:before {
      padding: 0;
      margin: 0;
    }

    /*--======================
    default class
    ========================--*/
    ol, ul{
      list-style: none;
      margin:0;
      padding:0;
    }
    a:hover, a:focus{
      text-decoration:none;
    }
    img{
      max-width: 100%;
      height: auto;
    }

    h1, .h1{
      font-size: 57px;
    }
    .padding-left-o{
      padding-left: 0px;
    }

    h2, h2 {
      font-size: 37px;
    }

    p{
      font-size: 15px;
      line-height: 24px;
    }

    .clearfix {
      overflow: hidden;
      display: block;
      clear: both;
    }
    .padding-0{
      padding: 0px;
    }
    .margin-top-150{
      margin-top: 150px;
    }
    .mr-0{
      padding-right: 0px;
    }

    html, body { 
      margin: 0;
      font-family: 'Lato', sans-serif;
      font-size: 15px;
      line-height: 1.42857143;
      background: #f2f2f2;
      -webkit-overflow-scrolling: touch;
    }
    .daterangepicker{
      z-index: 3000000;
    }

    .btn, .form-control::placeholder, .form-control:focus::placeholder,
    .user-dropdown, .user-dropdown ul li a, .loaf-notification, .loaf-sm-notification li a,
    .menu-icon, .menu-icon-small{
      transition: all 0.5s ease;
       -webkit-transition:all 0.5s ease;
       -ms-transition:all 0.5s ease;
    }


    /*nicescroll*/
    .nicescroll-rails {
       background-color:#fff;
     }
     
     .nicescroll-cursors {
       border: none !important;
       background:#0b8ddd !important;
       border-radius: 0 !important;
    }

    /*loaf menubar*/

    .slide-drawer .menu-icon-small{
      width: 26px !important;
    }
    .menu-icon-small{
      width: 20px !important;
    }
    .slide-drawer .menu-icon{
      width: 20px;
    }

    .dashboard-sidebar {
        width: 80%;
        max-width: 250px;
        height:100%;
        color: #fff;
        overflow: auto;
        background-image: -webkit-gradient(linear, left top, right top, from(#1e5a92), color-stop(#225d94), color-stop(#266196), color-stop(#2a6497), to(#2e6799));
        background-image: -webkit-linear-gradient(left, #1e5a92, #225d94, #266196, #2a6497, #2e6799);
        background-image: -o-linear-gradient(left, #1e5a92, #225d94, #266196, #2a6497, #2e6799);
        background-image: linear-gradient(to right, #1e5a92, #225d94, #266196, #2a6497, #2e6799);
        position: fixed;
        left: 0px;
        top: 80px;
        z-index: 1500;
        -webkit-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(-100%, 0, 0);
        -moz-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        -o-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 400ms ease;
        -moz-transition: -moz-transform 400ms ease;
        -o-transition: -o-transform 400ms ease;
        transition: transform 400ms ease;
      }
      .nav-open .dashboard-sidebar {
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
      }
      .sidebar-location {
          border-bottom: 1px solid #c1bdbd;
          margin: 18px 17px 25px;
          text-align: center;
      }
      .sidebar-location p span{
          margin-left: 14px;
          font-weight: bold;
      }

      .menu-content {
          display: block;
      }


      .nav-side-menu ul,
      .nav-side-menu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
        line-height: 40px;
        cursor: pointer;
      }
      .nav-side-menu ul .arrow{
            float: right;
            margin-right: 15px;
            line-height: 39px;
            font-size: 19px;
        }
      .nav-side-menu ul .active, .nav-side-menu li .active {
          border-left: 3px solid #fff;
          background-color: #000;
      }
      .nav-side-menu ul .sub-menu li.active,
      .nav-side-menu li .sub-menu li.active {
        color: #fff;
      }
      .nav-side-menu ul .sub-menu li.active a,
      .nav-side-menu li .sub-menu li.active a {
        color: #fff;
      }
      .nav-side-menu ul .sub-menu li, 
      .nav-side-menu li .sub-menu li {
            border: none;
            line-height: 40px;
            border-bottom: 1px solid #19558f;
            margin-left: 0px;
            padding-left: 30px;
        }
      .nav-side-menu ul .sub-menu li:hover,
      .nav-side-menu li .sub-menu li:hover {
        color: #000;
      }
      .nav-side-menu li {
          padding-left: 0px;
          border-left: 3px solid #ffffff;
          border-bottom: 1px solid #19558f;
      }
      .nav-side-menu li a {
          text-decoration: none;
          color: #e1ffff;
          font-size: 16px;
          padding-left: 15px;
          font-family: 'Lato', sans-serif;
          width: 100%;
          display: block;
      }
      .nav-side-menu li:hover {
          border-left: 3px solid #000000;
          background: #000;
          -webkit-transition: all 1s ease;
          -moz-transition: all 1s ease;
          -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
          transition: all 1s ease;
      }
      #department li a{
        padding-left: 45px;
      }
      .nav-side-menu{
          height: 460px;
          overflow: auto;
      }



    /*--===================
    loaf page
    ======================================--*/
    
    .loaf{
      background: rgb(30,90,146);
      background: -webkit-gradient(linear, left top, right top, from(rgba(30,90,146,1)), color-stop(48%, rgba(77,127,166,1)), to(rgba(24,82,142,1)));
      background: -webkit-linear-gradient(left, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%);
      background: -o-linear-gradient(left, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%); 
      background: linear-gradient(90deg, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%);
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .loaf-login{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30%;
        padding: 15px;
        transform: translate(-50%, -50%);
    }
    .loaf-form-login{
        display: block;
        margin:0 auto;
        background: #fff;
        padding: 10px 70px 100px;
        box-shadow: 7px 6px 11px -1px rgba(0,0,0,.4);
        border-radius: 0px;
    }

    .loaf-form-login img{
        width: 150px;
        margin: 0 auto;
        display: block;
    }
    .loaf-title{
        font-size: 19px;
        text-align: center;
        margin-bottom: 15px;
        color: #000;
        font-weight: 600;
    }
    .form-group{
      margin-bottom: 25px;
    }
    .loaf-form-login .form-control{
      width: 100%;
    }
    .form-control {
      display: block;
      height: 46px;
      border-radius: 0px;
    }
    .form-control:focus::-webkit-input-placeholder {
      color: #000;
    }
    .form-control:focus:-moz-placeholder {
      /* Firefox 18- */
      color: #000;
    }
    .form-control:focus::-moz-placeholder {
      /* Firefox 19+ */
      color: #000;
    }
    .form-control:focus:-ms-input-placeholder {
      color: #000;
    }
    .form-control:focus,
    .form-control:hover{
      outline: none;
      box-shadow: none;
      border-color:#1a558f;
    }

    .btn.btn-info{
        width: 100%;
        text-transform: uppercase;
        font-size: 20px;
        border-radius: 0px;
        border-color:#1a558f;
        background-color:#1a558f;
    }

    .btn:hover,
    .btn:focus{
      background: transparent;
      border-color:#1a558f;
      color: #1a558f;
    }
    .loaf-form-login a{
        text-align: right;
        display: block;
        margin-top: 5px;
        color: #0b8ddd;
        font-size: 17px;
    }

    .submit-forget-password .btn.btn-info{
      display: inline-block;
      width: 48%;
      margin-right: 2%;
    }
    .submit-forget-password .btn.btn-info:last-child{
      margin-right: 0%;
    }
    .forget-passwrod-text{
      margin-bottom: 30px;
    }
    .forget-passwrod-text h4{
      font-size: 22px;
    }
    .footer-area p{
        color: #ccc;
        font-size: 15px;
        margin-top:50px;
        font-family: 'K2D', sans-serif;
    }
    .footer-area p a{
      color: #ccc;
    }
    .footer-area-k2d p{
      margin-top: 0px !important;
      color: #afafaf;
    }
    .footer-area-k2d p a{
      color: #afafaf;
    }
   .grade-select select{
        width:200px;
    }
    .grade-select select option{
        padding: 5px;
    } 

    /*modal css*/
   .modal{
    z-index: 150000;
    overflow-y:scroll !important;
   } 

    .modal-content{
      border-radius: 0px;
    }
    .btn.btn-default{
        border-radius: 0px;
        border-color:#1a558f;
        background-color:#1a558f;
        color: #fff;
        padding: 5px 20px;
    }
    .modal-lg-content{
        padding: 10px 20px 22px;
    }
    .modal-lg-content h4{
      font-size: 25px;
      color: #0b8ddd;
      font-weight: bold;
    }
    .modal-header .close {
        opacity: 1;
        font-size: 25px;
    }
     .modal-lg-content label {
        font-size: 17px;
    }
    .modal-lg-content .form-group{
        display: inline-block;
        width: 100%;
    }
    .modal-lg-content .form-control {
        display: block;
        height: 36px;
        border-radius: 0px;
        border-width: 2px;
    }
    .map-maker-id{
      float: left;
      width: 85%;
    }
    .map-maker{
      float: left;
      font-size: 20px;
      text-align: right;
      width: 15%;
      color: #0b8ddd;
      cursor: pointer;
    }
    
      #map {
        height: 400px;
        width: 100%;
        margin-bottom: 20px;
      }
      .controls {
        margin-top: 10px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff; 
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0px 11px 0 13px;
        text-overflow: ellipsis;
        width: 300px;
        margin-top: 9px;
        height: 42px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        z-index: 99999999;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-size: 13px;
        font-weight: 300;
      }
      #target {
        width: 345px;
      }

    .modal-header{
      padding: 15px 0px;
      border-color: transparent;
    }

     .vechicle-select .form-control, .vechicle-select .btn-default,
     .bootstrap-select.form-control:not([class*="col-"]){
        width: 200px;
        background: transparent;
        font-size: 14px;
        color: #0b8ddd !important;
        border-radius: 0px;
        text-transform: capitalize;
        height: 37px;
        box-shadow: none;
    }
    .vechicle-select .form-control:focus, .vechicle-select .form-control:hover, 
    .btn-default:hover , .btn-default:focus{
       background: transparent;
       color: #0b8ddd !important;
    }
    .btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default{
      background: transparent;
    }
    .btn-default.active.focus, .btn-default.active:focus,
    .btn-default.active:hover, .btn-default:active.focus,
    .btn-default:active:focus, .btn-default:active:hover,
    .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus,
    .open>.dropdown-toggle.btn-default:hover{
       background: transparent;
    }
    .btn-group.open .dropdown-toggle{
      box-shadow: none;
    }
    .dropdown-menu.open ul li a:hover{
      background: transparent;
      color:#0b8ddd;
    }
    .bootstrap-select.btn-group .dropdown-menu {
        min-width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0px;
        border: 0px solid;
    }
    .dropdown-menu>li>a{
      padding: 5px 20px;
    }

    .btn-default.btn-print{
        float: right;
        text-transform: uppercase;
        padding: 7px 23px;
        margin: 10px 13px;
    }

    .modal-lg-content h5{
        font-size: 20px;
        color: #000;
        font-weight: bold;
    }
    .table-travel{
      text-align: center;
      color: #000;
    }

    .table-travel tbody tr td:last-child{
      width: 78%;
    }
    .table-bordered>tbody>tr>td, 
    .table-bordered>tbody>tr>th, 
    .table-bordered>tfoot>tr>td, 
    .table-bordered>tfoot>tr>th, 
    .table-bordered>thead>tr>td, 
    .table-bordered>thead>tr>th {
        border: 1px solid #131313;
    }

    .attacment-approve{
      display: table;
      margin:0 auto;
    }
    .attacment-approve button{
      margin-right: 30px;
      font-size: 18px;
      padding: 8px 25px;
    }
    .modal-lg-content.staff-modal label {
        font-size: 14px;
    }
    .modal-lg-content.staff-modal h5{
      margin-bottom: 30px;
    }
    .air-sea-new{
      margin-top: 34px;
    }

    textarea{
      height: 120px !important;
    }
    .ssformto{
      margin-top: 65px;
    }




    /*dashboad css*/
    .dashboard-header{
      background: rgb(30,90,146);
      background: -webkit-gradient(linear, left top, right top, from(rgba(30,90,146,1)), color-stop(48%, rgba(77,127,166,1)), to(rgba(24,82,142,1)));
      background: -webkit-linear-gradient(left, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%);
      background: -o-linear-gradient(left, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%); 
      background: linear-gradient(90deg, rgba(30,90,146,1) 0%, rgba(77,127,166,1) 48%, rgba(24,82,142,1) 100%);
      padding: 12px 0px;
    }
    .float-right{
      text-align: right;
      display: block;
      float: right;
      width: 100%;
    }
    .user-nameno{
        float: left;
        width: 80%;
        margin: -3px 0px;
    }
    .user-nameno h3.span{
        font-size: 18px;
        color: #fff;
        display: inline-block;
        padding-left: 10px;
    }
    .notification{
      display: inline-block;
      position: relative;
      cursor: pointer;
    }
    .loaf-notification {
        position: absolute;
        width: 250px;
        top: -236px;
        z-index: 999;
        background: #fff;
        right: 0px;
        overflow: hidden;
        opacity: 0;
        padding: 10px 8px;
        text-align: center;
        border: 1px solid #ccc;
    }

    .loaf-notification.loaf-vissible{
      opacity: 1;
       top: 53px;
      visibility: visible;
    }

    .loaf-notification h3{
        font-size: 17px;
        color: #16518d;
        font-weight: 500;
        margin-top: 5px;
    }
    .loaf-sm-notification {
        padding: 0px 14px;
        overflow-y: scroll;
        height: 180px;
    }
    .loaf-sm-notification li a{
        padding: 10px 0px 25px 0px;
        display: block;
        color: #000;
        border-bottom: 1px solid #ccc;
    }
    .loaf-sm-notification li a:hover,
    .no-read{
      background: #e8e6e6;
    }
    .loaf-sm-notification li:last-child a{
      border-bottom: 0px solid #000;
      padding-bottom: 0px;
    }
    .notification .fas{
        color: #fff;
        font-size: 16px;
        margin: 0px 8px;
    }
    .notificationchacked{
        position: absolute;
        left: 15px;
        top: 11px;
        font-size: 10px;
        color: #fff;
        background: #f97600;
        border-radius: 50%;
        padding: 2px 3px;
    }
    .user-icon{
      width: 20%;
      float: left;
      display: block;
      margin:0 auto;
      padding: 4px 0px;
      position: relative;
      cursor: pointer;
    }
    .user-icon img{
        width: 46px;
        float: right;
    }

    .user-dropdown {
        position: absolute;
        top: -88px;
        right: 15px;
        background:#fff;
        width: 175px;
        z-index: 999;
        border-radius: 0px;
    }
    .new-user.user-dropdown{
      top:52px;
    }
    .user-dropdown ul li a{
        padding: 5px 1px;
        display: block;
        color: #000;
        font-weight: 400;
        text-align: center;
        font-size: 18px;
    }
    .user-dropdown ul li a:hover{
      color: #fff;
      background: #0b8ddd;
    }
    .slide-drawer-menu{
        padding: 20px 0px;
        cursor: pointer;
    }
    .menu-icon {
        width: 26px;
        height: 2px;
        background: #fff;
        display: block;
        margin-bottom: 6px;
    }
    .menu-icon:last-child{
      margin-bottom: 0;
    }
    .dashboard-main-content {
      padding-top: 80px;
      background: #f2f2f2;
    }
    .dashboad-title h2{
        font-size: 40px;
        font-weight: bold;
        display: inline-block;
        position: relative;
    }
    .dashboad-title h2:after{
      position: absolute;
      content: "";
      width: 107%;
       bottom: -2px;
      left: 0;
      height: 2px;
      background: #19558f;

    }
    .dashboad-title .alert{
      margin-top: 30px;
      width: 60%;
    }
    
    .employee-table-center{
        background: #fff;
        padding: 55px 35px 35px;
        border-radius: 5px;
        margin: 30px 0px 30px;
        position: relative;
    }
    .list-of-items {
        position: absolute;
        top: -26px;
        background: #16518d;
        color: #fff;
        padding: 13px 27px;
        font-size: 20px;
        margin-left: 9px;
    }
    .dashoard-icon {
        display: block;
        cursor: pointer;
        position: absolute;
        top: -26px;
        left: 220px;
    }
    .dashboard-staff{
      left: 280px;
    }
    .employee-status-center {
        background: #fff;
        padding: 35px;
        border-radius: 5px;
        margin: 10px auto 40px;
        display: table;
    }
    .dashoard-icon .flaticon-plus:before {
        font-size: 48px;
        color: #19558f;
    }
    table.borderless td{
        font-size: 17px;
        border: 1px solid #949393;
        text-align:center;
    }
    .table>thead>tr>th {
        vertical-align: bottom;
        border: 1px solid #949393 !important;
        background: #e6e6e6;
        color: #000;
        text-align:center;
    }
    .table>thead>tr:first-child>th:first-child{
      border-radius: 5px 0px 0px 0px;
    }
    .table>thead>tr:first-child>th:last-child{
      border-radius: 0px 5px 0px 0px;
    }
    table.borderless>tbody>tr:last-child td:first-child{
      border-radius: 0px 0px 0px 5px;
    }
    table.borderless>tbody>tr:last-child td:last-child{
      border-radius: 0px 0px 5px 0px;
    }
    table.dataTable thead .sorting:after {
        opacity: 0.6;
        content: "\e150";
    }
    div.dataTables_wrapper div.dataTables_filter input{
      height: 34px;
    }
    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: 9px;
        left: -3px;
        height: 14px;
        width: 14px;
        display: block;
        position: absolute;
        color: white;
        border: 2px solid #5fea6e;
        border-radius: 14px;
        box-shadow: 0 0 3px #444;
        box-sizing: content-box;
        text-align: center;
        text-indent: 0 !important;
        line-height: 14px;
        content: '+';
        background-color: #26c14e;
    }
    table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before,
    table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th:first-child:before {
        content: '-';
        background-color: #d45151;
        border: 2px solid #f37e5e;
    }
    .edit-icon{
        display: inline-block;
        margin-right: 15px;
        cursor: pointer;
    }
    .edit-icon.icon-ed img:last-child{
      width: 14px;
      margin-top: -8px;
    }
    .edit-icon  .red-delete-button{
        width: 15px;
        height: 15px;
        background: #ff3452;
        display: block;
        border-radius: 50%;
    }
    .edit-icon  .red-delete-button.green-button{
      background: #55e03b;
    }

    .pagination>li>a, .pagination>li>span{
      border: none !important;
    }
    .pagination>.active>a,
    .pagination>.active>a:focus,
    .pagination>.active>a:hover,
    .pagination>.active>span,
    .pagination>.active>span:focus,
    .pagination>.active>span:hover {
      z-index: 3;
      color:#16518d;
      font-weight: bold;
      cursor: default;
      background-color: transparent;
   }
   .pagination>.disabled>a, 
   .pagination>.disabled>a:focus,
   .pagination>.disabled>a:hover, .pagination>.disabled>span, 
   .pagination>.disabled>span:focus, .pagination>.disabled>span:hover{
    color: #ddd;
   }
   .pagination>li>a, .pagination>li>span{
    color: #000;
    background: transparent;
   }
   .pagination>li>a:hover{
    background: transparent;
    color: #000;
   }
   div.dataTables_wrapper div.dataTables_info{
    padding-top: 6px;
   }
   .tooltip-inner {
      background-color: #19558f !important;
      font-family: 'Lato', sans-serif;
      color: #fff;
  }

  .tooltip.top .tooltip-arrow {
    border-top-color: #19558f;
  }

  .tooltip.right .tooltip-arrow {
    border-right-color: #19558f;
  }

  .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #19558f;
  }

  .tooltip.left .tooltip-arrow {
    border-left-color: #19558f;
  }

  .change-password-id .form-control{
    height: 35px;
  }
  .total-number-ofuser p{
      font-size: 18px;
      margin-bottom: 40px;
  }
  .total-number-ofuser p span{
    font-weight: bold;
  }

  .dashboard-filter{
    padding: 30px 0px;
  }
  .dashboard-filter button{
      width: 200px;
      height: 38px;
  }
  .print-report-option{
      padding-bottom: 50px;
      display: block;
      overflow: hidden;
      clear: both;
  }
  .print-report-option button{
      font-size: 16px;
      text-transform: uppercase;
      padding: 7px 20px;
  }

  .file.btn.btn-sm.btn-primary {
      position: relative;
      overflow: hidden;
      background: transparent;
      border: transparent;
      color: #1a558f;
      padding: 0px;
  }
  .upload-icon {
    font-size: 22px;
  }

  input.input-upload {
      position: absolute;
      font-size: 20px;
      opacity: 0;
      right: 0;
      top: 0;
      cursor: pointer;
  }
  .dashboard-departmet{
    left: 264px;
  }
  .dashboard-accomodation{
    left: 300px;
  }
  .dashboard-leaft{
      margin-top: 35px;
  }
  .input-type-bs{
    position: relative;
    padding-left: 34px;
  }
  .firstoption {
      position: absolute;
      top: 10px;
      left: 22px;
      font-size: 12px;
  }
   .sndoption {
      position: absolute;
      top: 9px;
      right: 22px;
      font-size: 13px;
  }
   input[type=number].input-type-bs::-webkit-inner-spin-button, 
  input[type=number].input-type-bs::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
    }
  .air-option{
    float: left;
    width: 27%;
    margin-top: 6px;
  }
  .air{
    margin-bottom: 10px;
  }
  .air input[type="checkbox"]{
    margin-right: 3px;
  }
  .air-right{
    float: left;
    width: 72%;
    position: relative;
  }
  .air-right .firstoption {
      left: 11px;
  }

  .air-right .sndoption{
    right: 8px;
  }
  .input-ss-option{
    position: relative;
    margin-bottom: 10px;
    margin-top: 10px; 
  }
   .input-ss-option .firstoption {
    left: 10px;
   }



  /*travel request page*/
  .employee-status-travel {
      background: #fff;
      padding: 35px 10px;
      border-radius: 5px;
      margin: 30px auto 20px;
      display: table;
      width: 100%;
  }
  .employee-status-travel .vechicle-select .form-control,
  .employee-status-travel .vechicle-select .btn-default{
      width: 100%;
  }
  .employee-status-travel .form-control.date-pickerdate {
      display: block;
      height: 37px;
      padding-left: 48px;
      position: relative;
  }
  .formdate{
      position: absolute;
      top: 8px;
      left: 23px;
  }
   .employee-status-travel .btn.btn-default {
      padding: 7px 20px;
      height: 37px;
  }

  .total-amount-print{
      text-align: right;
      margin: 25px 22px;
      font-size: 18px;
  }
  .total-amount-print span{
    font-weight: bold;
  }

  label.error,
  .invalid-feedback{
      color: #d40909;
      text-transform: capitalize;
      display: block;
      font-size: 14px;
      margin-bottom: 0px;
  }
  span.select-lodge,
  .select-land{
      position: absolute;
      background: #19558f;
      left: 35px;
      top:0px;
      padding: 3px 5px;
      display: block;
      font-size: 13px;
      color: #fff;
      border-radius: 4px;
      transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
  }
  span.select-lodge:before,
  .select-land:before {
      content: "";
      position: absolute;
      left: -6px;
      top: 25%;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-right: 7px solid #19558f;
  }
  .select-land{
      height: 43px;
      left: 27%;
  }


  /*responsive css*/
  @media (min-width: 1201px) and (max-width: 1600px){
    .loaf-login{
      width: 40%;
    }
  }
  @media (min-width: 993px) and (max-width: 1200px){
    .loaf-login{
      width: 45%;
    }
  }

  @media (max-width: 992px) and (min-width: 768px){
    .vechicle-select .form-control, 
    .vechicle-select .btn-default, 
    .bootstrap-select.form-control:not([class*="col-"]) {
      width: 146px;
    }
    .employee-status-travel .vechicle-select .form-control, .employee-status-travel .vechicle-select .btn-default{
      width: 100%;
    }
    .air-option,
    .air-right{
      float: none;
      width: 100%;
    }
    .air-sea-new{
      margin-top: 0px;
    }
    .loaf-login{
      width: 70%;
    }
  }

  @media (max-width: 767px){
    .dashboad-title h2{
      font-size: 32px;
    }
    .dashboard-filter button {
        margin: 0 auto;
        display: block;
    }
    .btn-group.bootstrap-select.form-control{
        display: table;
        margin: 0px auto 20px;
    }
    .form-group{
      margin-bottom: 15px;
    }
    .mr-0{
      padding-right: 15px;
      margin-bottom: 15px;
    }
    .sm-margin-bottom{
      margin-bottom: 15px;
    }
    .form-control.date-pickerdate:first-child{
      margin-bottom: 15px;
    }
    #pac-input{
      width: 120px;
    }
   
    
    .user-nameno {
        width: 85%;
        margin: 7px 0px;
    }
    .loaf-login{
      width: 90%;
    }
    .user-icon {
        width: 15%;
        float: right;
        margin: 5px auto;
    }
    .user-nameno h3.span{
      font-size: 12px;
    }
    .loaf-form-login img{
      width: 80px;
    }
     .loaf-form-login{
      padding: 10px 20px 70px
    }
  }

  @media ( max-width: 900px) and (min-width: 421px){
     .loaf{
      position: relative;
    }
    .loaf-login{
      width: 90%;
      position: static;
      transform: none;
      margin:0 auto;
    }
  }


  @media (max-width: 420px) {
    
    .loaf-form-login{
      padding: 10px 20px 70px
    }
    .loaf-form-login .form-control{
      width: 100%;
    }
    .dashboad-title .alert {
        width: 77%;
    }
    .table-travel tbody tr td:last-child{
      width: 50%;
    }
    .list-of-items{
      font-size: 15px;
    }
    .modal-lg-content h4{
      font-size: 18px;
    }
    .modal-lg-content h5{
      font-size: 16px;
    }
    .attacment-approve button {
        margin-right: 8px;
        font-size: 12px;
        padding: 8px 14px !important;
    }
    .dashboard-staff {
        left: 224px;
    }
    .dashoard-icon .flaticon-plus:before {
        font-size: 44px;
        color: #19558f;
    }
    .user-nameno {
       width: 77%;
       margin: -3px 0px;
    }
  }