html, body {
   margin: 0;
   padding: 0;
   font-size: 14px;
   height: 100%;
   color: #051665;
}

img {
   max-width: 100%
}

#topBar {
   background: #a8aeb5;
   padding: 7px 30px;
   box-shadow: 0 0 18px #999;
   position: relative;
}

   #topBar .logo {
      max-width: 60px;
      display: inline-block;
   }

   #topBar .home {
      font-size: 28px;
      font-weight: 600;
      display: inline-block;
      text-decoration: none;
      padding: 5px 5px 0
   }

.clientName {
   margin: 0;
   padding-top: 6px;
   text-transform: uppercase;
   color: #061973;
   font-weight: 600
}



.vrTabTxtWrap {
   box-shadow: 0 0 6px #999
}

.vrTabPanel {
   min-height: 42vw
}

   .vrTabPanel h3 {
      margin: 0;
      padding: 7px 15px;
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase;
      background: #c7cbcf;
      box-shadow: 0 3px 6px #999;
   }

   .vrTabPanel .inner {
      padding: 12px 20px;
   }

.leftSidebar {
   width: 180px;
   height: 100%;
   position: absolute !important;
   left: 0;
   top: 70px;
   z-index: 1;
   overflow: auto;
   background: #e9e9ed;
   box-shadow: 0 6px 12px #333
}

   .leftSidebar .fa {
      margin-right: 10px
   }

.tablink {
   width: 100%;
   display: block;
   padding: 6px 16px;
   font-size: 14px;
   color: #051665;
   text-align: left;
   text-transform: uppercase;
   border: none;
   white-space: normal;
   float: none;
   outline: 0;
   cursor: pointer;
   border-top: 1px #fff solid;
   border-bottom: 1px #ddd solid;
}

   .tablink.home {
      background: #c7cbcf;
      margin-top: -1px
   }

.animate-left {
   position: relative;
   animation: animateleft 0.4s;
}

.animate-right {
   position: relative;
   animation: animateright 0.4s;
}

.animate-top {
   position: relative;
   animation: animatetop 0.4s;
}

.animate-bottom {
   position: relative;
   animation: animatebottom 0.4s;
}

.animate-zoom {
   position: relative;
   animation: animatezoom 0.6s;
}

.animate-fading {
   animation: fading 1s
}

@keyframes fading {
   0% {
      opacity: 0
   }

   50% {
      opacity: 1
   }

   100% {
      opacity: 0
   }
}

.animate-opacity {
   animation: opac 0.8s
}

@keyframes opac {
   from {
      opacity: 0
   }

   to {
      opacity: 1
   }
}

.animate-top {
   position: relative;
   animation: animatetop 0.4s
}

@keyframes animatetop {
   from {
      top: -300px;
      opacity: 0
   }

   to {
      top: 0;
      opacity: 1
   }
}

.animate-left {
   position: relative;
   animation: animateleft 0.4s
}

@keyframes animateleft {
   from {
      left: -300px;
      opacity: 0
   }

   to {
      left: 0;
      opacity: 1
   }
}

.animate-right {
   position: relative;
   animation: animateright 0.4s
}

@keyframes animateright {
   from {
      right: -300px;
      opacity: 0
   }

   to {
      right: 0;
      opacity: 1
   }
}

.animate-bottom {
   position: relative;
   animation: animatebottom 0.4s
}

@keyframes animatebottom {
   from {
      bottom: -300px;
      opacity: 0
   }

   to {
      bottom: 0;
      opacity: 1
   }
}

.animate-zoom {
   animation: animatezoom 0.6s
}

@keyframes animatezoom {
   from {
      transform: scale(0)
   }

   to {
      transform: scale(1)
   }
}




.row.saleSummery .inner {
   padding: 15px 0px;
   margin-bottom: 30px;
   box-shadow: 0 0 12px #ddd;
}

   .row.saleSummery .inner h3 {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
   }

.row.saleSummery .input-group-text {
   width: 130px
}

.row.saleSummery input {
   background: #FFF;
}


div.dataTables_wrapper div.dataTables_paginate {
   text-align: center;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
   padding: 3px 7px;
   border: 1px #ddd solid;
   margin: 1px;
   text-decoration: none;
   cursor: pointer;
}

   .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
   .dataTables_wrapper .dataTables_paginate .paginate_button.current {
      background: #ddd;
   }

   .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
      cursor: default;
   }

div.dataTables_wrapper div.dataTables_info {
   padding: 0 !important
}

div#datatable_length {
   float: left;
}

table.summeryTbl {
   width: 100%
}

   table.summeryTbl tr {
      margin-bottom: 3px;
      padding-bottom: 3px
   }

      table.summeryTbl tr td {
         border: 1px #ced4da solid;
         padding: 3px 7px
      }

   table.summeryTbl .frst {
      width: 130px;
      background: #e9ecef;
   }

   table.summeryTbl .rfoot {
      background: #e9ecef;
      border: 1px #dadada solid;
   }

.bd-placeholder-img {
   font-size: 1.125rem;
   text-anchor: middle;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

.table-warning,
.table.table-striped tr.odd,
.table.table-striped,
table {
   color: #051665
}


.loginBody {
   display: flex;
   align-items: center;
   text-align: center;
   padding-top: 40px;
   padding-bottom: 40px;
   background: #f5f5f5;
}

.form-signin {
   width: 100%;
   max-width: 450px;
   padding: 15px;
   margin: auto;
   box-shadow: 0 0 18px #999;
   border-radius: 10px;
   border: 1px rgba(6, 25, 115, 0.3) solid;
   background: rgba(6, 25, 115, 0.1);
}

   .form-signin .checkbox {
      font-weight: 400;
   }

   .form-signin .form-floating:focus-within {
      z-index: 2;
   }

   .form-signin input[type="email"] {
      margin-bottom: -1px;
      border: 1px rgba(6, 25, 115, 0.3) solid;
      background: rgba(6, 25, 115, 0.1);
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
   }

   .form-signin input[type="password"] {
      border: 1px rgba(6, 25, 115, 0.3) solid;
      background: rgba(6, 25, 115, 0.1);
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
   }

   .form-signin .btn.btn-primary {
      background: rgba(6, 25, 115, 0.9);
      max-width: 50%;
      text-transform: uppercase;
      transition: all 0.5s;
      border: 3px transparent solid;
   }

      .form-signin .btn.btn-primary:hover {
         background: #066f03;
      }

.logFooter {
   width: 100%;
   background: #e9e9ed;
   display: block;
   clear: both;
   padding: 6px;
   position: fixed;
   left: 0;
   bottom: 0
}



.inner.tblRes {
   overflow: scroll;
}

footer {
   background: #e9e9ed;
   padding-top: 7px;
   padding-bottom: 7px;
}

.dateBx {
   display: inline-block;
}




#mainMenu {
   position: absolute;
   top: 100%;
   right: 10px;
   z-index: 9;
   border-radius: 7px;
   background: rgba(90%, 90%, 90%, 0.7) !important;
   padding: 0;
   outline-color: transparent;
   transition: all 0.5s
}

   #mainMenu .navbar-toggler {
      padding: 0 !important;
      border: 1px #333 solid !important;
      text-align: center;
      float: right;
      margin: 0;
      width: 40px;
      right: 10px;
      position: absolute;
      top: 0;
      z-index: 9;
      border: 1px #333 solid;
      background: #FFF
   }

      #mainMenu .navbar-toggler:focus {
         color: transparent;
         border: 1px #333 solid !important;
      }

   #mainMenu .container-fluid {
      background: rgba(90%, 90%, 90%, 0.9) !important;
      text-align: right;
      padding: 0;
      box-shadow: 0 0 12px #333;
      border-radius: 7px;
      overflow: hidden;
   }

   #mainMenu .collapse.show {
      width: 250px;
      padding: 35px 15px 15px;
   }

   #mainMenu ul {
      padding: 0;
      margin: 0;
      width: 100%
   }

      #mainMenu ul li {
         float: none;
         list-style: none;
      }

         #mainMenu ul li a {
            display: block;
            text-decoration: none;
            color: #051665;
            text-transform: uppercase;
            padding: 3px 10px;
            border-top: 1px #fff solid;
            border-bottom: 1px #bbb solid;
         }

            #mainMenu ul li a.active,
            #mainMenu ul li a:hover {
               background: rgba(30%, 30%, 30%, 0.1);
            }


   #mainMenu #topNav,
   #mainMenu .navbar-nav,
   #mainMenu .navbar-nav ul,
   #mainMenu .container-fluid,
   #mainMenu .navbar-collapse.collapse,
   #mainMenu {
      transition: all 0.5s
   }


/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 600px) {
   div#datatable_length {
      float: none !important;
      margin-bottom: 7px;
   }

   .leftSidebar {
      top: 100px;
   }

   .logFooter {
      width: 100%;
      background: #e9e9ed;
      display: block;
      clear: both;
      padding: 6px;
      position: absolute;
      left: 0;
      bottom: 0
   }
}
/*__end_of_Media__*/

@media (min-width: 768px) {
   .bd-placeholder-img-lg {
      font-size: 3.5rem;
   }
}



/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
   .vrTabTxtWrap {
      margin-left: 0px;
   }

   .leftSidebar {
      width: 70px;
   }

   .dateBx {
      display: block;
      margin-bottom: 7px
   }

      .dateBx span {
         display: inline-block;
         width: 100%;
         max-width: 70px
      }

         .dateBx span.btns {
            max-width: 200px;
            text-align: right;
         }
}
/*__end_of_Media__*/

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
   .logoWrap {
      text-align: center;
   }

   .vrTabTxtWrap {
      margin-left: 0px;
   }

   .leftSidebar {
      width: 70px;
   }

      .leftSidebar .tablink {
         text-align: center;
         padding: 6px 15px
      }

         .leftSidebar .tablink:focus,
         .leftSidebar .tablink:hover {
            background: #c1c6ca !important
         }

      .leftSidebar span {
         display: none !important;
      }

      .leftSidebar .fa {
         font-size: 22px
      }

   .logOut {
      position: absolute;
      top: 15px;
      right: 15px
   }
}
/*__end_of_Media__*/