/*Common style section*/
 /* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital@0;1&display=swap'); */
 html,
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     /*background-color: #f5f6fa !important;*/
     background-color: #f5f5f7 !important;
     scroll-behavior: smooth;
        font-family: 'Source Sans Pro
        ';
     letter-spacing: 0.25px;
 }
 
 .ajax-loading {
     width: 100%;
     height: 50vh;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
 }
 
 small label {
     margin-bottom: 0;
 }
 
 .l_click {
     color: #006cdf !important;
 }
 
 .l_click:hover {
     text-decoration: underline !important;
     cursor: pointer;
 }
 
 .sub-end {
     padding-left: 250px;
     width: 100%;
     height: 100vh;
     background-color: #f5f5f7;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
 }
 /* input type number disable arrows */
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
 /* Firefox */
 
 input[type=number] {
     -moz-appearance: textfield;
 }
 /* report form */
 
 .report {
     padding: 20px;
     margin-left: 5px;
 }
 
 .report-left {
     margin-right: 5px;
 }
 /* data table */
 
 table {
     width: 100%;
     overflow: auto;
     border: none !important;
 }
 
 thead {
     border: none !important;
 }
 
 .dataTables_wrapper .dataTables_filter {
     float: none !important;
 }
 
 .dt-button {
     background: #007bff !important;
     border: none !important;
     color: white !important;
     border-radius: 6px !important;
 }
 
 .dataTables_wrapper .dataTables_paginate .paginate_button.current,
 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
     border: none !important;
     border-radius: 7px;
     background: #e4e4e4 !important;
     color: #525151 !important;
     padding: 2px;
     font-weight: 500;
     outline: none;
 }
 
 doc.table {
     width: 100%;
 }
 
 input[type=search] {
     border: none;
     -webkit-backdrop-filter: saturate(180%) blur(20px);
     backdrop-filter: saturate(180%) blur(20px);
     background-color: rgba(218, 218, 218, 0.72);
     border-radius: 6px;
     width: 343px;
     height: 35px;
     outline: none;
     padding-left: 20px;
     padding-right: 20px;
 }
 
 .range {
     width: 359px;
     float: right;
     margin-bottom: 20px;
 }
 
 .rangebox {
     border: none;
     -webkit-backdrop-filter: saturate(180%) blur(20px);
     backdrop-filter: saturate(180%) blur(20px);
     background-color: rgba(218, 218, 218, 0.72);
     border-radius: 6px;
     width: 163px;
     height: 35px;
     outline: none;
     padding-left: 20px;
     padding-right: 20px;
 }
 /* other */
 
 .btn-outline-secondary {
     background-image: url('../../assets/images/common/search.png');
     background-size: contain;
     background-position: center center;
     background-repeat: no-repeat;
 }
 
 .btn-outline-secondary:hover {
     background-color: #fff !important;
 }
 
 .frm_ {
     background-color: #fff;
     padding: 10px;
     border-radius: 3px;
     transition: 0.5s;
 }
 
 .btn {
     padding-left: 20px !important;
     padding-right: 20px !important;
     border-radius: 5px !important;
 }
 
 .banner {
     position: relative;
     width: 100%;
     height: 20px;
     /*border-radius: 5px 5px 0px 0px;*/
     background-color: #497dff;
 }
 /*
::-moz-selection {
    color: currentColor;
    background: transparent;
}

::selection {
    color: currentColor;
    background: transparent;
}*/
 
 .lookup-btn {
     border-radius: 0px 4px 4px 0px !important;
 }
 /* width */
 
 ::-webkit-scrollbar {
     width: 0px !important;
 }
 /* Track */
 
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
 /* Handle */
 
 ::-webkit-scrollbar-thumb {
     background: #888;
 }
 /* Handle on hover */
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
 
 .nav-bar {
     position: sticky;
     top: 0;
     left: 0;
     height: 50px;
     width: 100%;
     z-index: 2;
     overflow: hidden;
     /*	webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);*/
     /*background-color: rgb(73, 125, 255);*/
     -webkit-backdrop-filter: saturate(180%) blur(10px);
     backdrop-filter: saturate(180%) blur(10px);
     background-color: rgba(28, 28, 28, 0.72);
      /* background-color: rgba(99,99,99, 0.8); */
     transition-property: background-color, backdrop-filter, -webkit-backdrop-filter;
     border-bottom: 1px solid #bdbdbd;
 }
 .nav-bar .nav-search{
    position: absolute;
    right: 135px;
    top: 6px;
    width: 350px;
    padding:7px;
    outline: none;
    border: none;
    border-radius: 5px;
 }

 .nav-bar .user-name {
     color: #fff;
     position: absolute;
     right: 95px;
     top: 12px;
     cursor: pointer !important;
 }
 
 .nav-bar .noti-icon {
     position: absolute;
     right: 63px;
     width: 20px;
     top: 15px;
     cursor: pointer !important;
     transition: 0.5s;
 }
 
 .nav-bar .cog-icon {
     position: absolute;
     right: 30px;
     width: 20px;
     top: 15px;
     cursor: pointer !important;
     transition: 0.5s;
 }
 
 .nav-bar .cog-icon:hover {
     animation: cog 1s;
     animation-iteration-count: 1;
 }
 
 .nav-bar .noti-icon:hover {
     animation: noti 0.5s;
     animation-iteration-count: 2;
 }
 
 @keyframes noti {
     0% {
         transform: rotate(15deg);
     }
     50% {
         transform: rotate(-15deg);
     }
     100% {
         transform: rotate(15deg);
     }
 }
 
 @keyframes cog {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
 
 .noti-badge {
     position: absolute;
     right: 55px;
     top: 10px;
 }
 
 #noti,
 #noti_side {
     border-radius: 1rem !important;
 }
 
 .nav-bar .nav-controller {
     position: absolute;
     width: 30px;
     height: 30px;
     margin-top: 10px;
     cursor: pointer !important;
     left: 10px !important;
 }
 
 .side-menu {
     position: fixed;
     top: 0px;
     width: 250px;
     height: 100vh;
     z-index: 3;
     background-color: #fff;
     color: #000 !important;
     overflow-y: auto;
     overflow-x: hidden;
     border-right: 1px solid #00000012;
 }
 
 .side-menu .nav-close-parent {
     background: #e4e6eb;
     position: absolute;
     right: 5px;
     top: 5px;
     cursor: pointer !important;
     border-radius: 32px;
     width: 30px;
     height: 30px;
     transition: 0.5s;
 }
 
 .nav-close-parent:hover {
     background: #d7dae0;
 }
 
 .side-menu .nav-close {
     position: absolute;
     right: 5px;
     top: 5px;
     cursor: pointer !important;
     border-radius: 32px;
     width: 20px;
     height: 20px;
 }
 
 .close {
     padding-left: 10px;
     margin-left: 10px;
 }
 /* width */
 
 .side-menu::-webkit-scrollbar {
     width: 5px;
 }
 /* Track */
 
 .side-menu::-webkit-scrollbar-track {
     background: #f1f1f1;
 }
 /* Handle */
 
 .side-menu::-webkit-scrollbar-thumb {
     background: #888;
 }
 /* Handle on hover */
 
 .side-menu::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
 
 .side-menu .menu-item {
     width: 250px;
     height: auto;
     padding: 4px 10px;
     display: flex;
     flex-direction: row;
     vertical-align: baseline;
     align-items: flex-end;
     align-content: center;
     justify-content: center;
     cursor: pointer !important;
 }

 .side-menu .menu-tool{
     position: fixed;
     width: 50px;
     height: 50px;
     bottom: 50px;
     right: 50px;
     border-radius: 50px;
     /* -webkit-backdrop-filter: saturate(180%) blur(10px);
     backdrop-filter: saturate(180%) blur(10px);
     background-color: rgba(73, 125, 255, 0.72); */
     /* background-color: #4e4e4e; */
     
      /* background-color: rgba(99,99,99, 0.8); */
     display: flex;
     justify-content: center;
     align-items: center;
     align-content: center;
     cursor: pointer;
 }
 .menu-tool img{
     width: 25px;
     height: 25px;
 }
 
 .side-menu .menu-account{
     width: 250px;
     height: auto;
     box-sizing: border-box;
     padding: 10px;
     border-radius: 10px;
     border:0.5px solid #eeeeee;
     -webkit-backdrop-filter: saturate(180%) blur(10px);
     backdrop-filter: saturate(180%) blur(10px);
     /* background-color: rgba(73, 125, 255, 0.72); */
      background-color: rgba(99,99,99, 0.8);
     position: fixed;
     right: 70px;
     top: 62px;
     color: #fff;
     display: none;
 }
 .menu-account::after{
    content: '';
    position: absolute;
    right: 28px;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(99,99,99, 0.8);
    clear: both;
}
.menu-account .menu-account-item{
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: auto;
    padding: 4px 10px;
    display: flex;
    flex-direction: row;
    vertical-align: baseline;
    align-items: flex-end;
    align-content: center;
    justify-content: center;
    cursor: pointer !important;
    border-radius: 5px;
    background-color: #fff;
    margin: 5px 5%;
}
.menu-account-item img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
.menu-account-item a{
    color: #212529;
}

.menu-account-item a:hover{
    text-decoration: none;
}
.menu-account .account-close-parent{
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #fff;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    cursor: pointer;

}

.account-close-parent .account-close{
    width: 12px;
    height: 12px;
}
 .menu-item p {
     color: #000;
     text-align: left;
 }
 
 .menu-item a {
     width: 100%;
     text-align: center;
     color: #000;
     padding: 10px;
     border-radius: 5px;
     /*	border-radius: 10px;
	border: 0.5px solid #efebebc7;*/
     text-align: left;
     padding-left: 70px;
 }
 
 .menu-item a img {
     display: inline-block;
     width: 20px;
     height: 20px;
     position: absolute;
     left: 50px;
 }
 
 #dash {
     fill: red !important;
 }
 
 .menu-item a:hover,
 .menu-item a:visited {
     background-color: #f5f5f5;
     text-decoration: none;
     /*border: 0.5px solid #bdbdbd;*/
     transition: 0.5s;
 }
 
 .menu-item .icon {
     position: relative;
     width: 50px;
 }
 
 .main-content {
     position: relative;
     width: 100%;
     padding-left: 250px;
     z-index: 1;
     padding-top: 10px;
     min-height: 100vh;
 }
 
 .mobile-splash {
     transform: scale(0);
     transition: 0.3s;
     -ms-transition: 0.3s;
     -webkit-transition: 0.3s;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 
 .f_scroll {
     height: 100vh;
     overflow: hidden;
     overflow-y: auto;
 }
 
 .summary_ {
     width: 100%;
     height: auto;
     padding: 10px;
     border-radius: 10px;
     background-color: #fff;
     /* min-height: 200px; */
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     flex-direction: column;
     cursor: pointer !important;
 }
 
 .summary_ .title {
     margin-top: 7px;
     margin-bottom: 15px;
 }
 
 .summary_ .transaction_outer {
     position: relative;
     width: 100px;
     height: 100px;
     background-image: linear-gradient(to bottom, #007bff, #0074ef, #006cdf, #0265cf, #045ec0);
     border-radius: 120px;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     transition: 0.3s;
 }
 
 .transaction_outer:hover {
     transition: 0.3s;
     transform: rotate(360deg);
 }
 
 .transaction_outer .transaction {
     width: 90px;
     height: 90px;
     border-radius: 90px;
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
 }
 .br-15 {
     border-radius: 15px !important;
 }
 
 .office-list {
     width: 100%;
     padding: 10px;
     background-color: #fff;
     height: auto;
 }
 
 .office-link {
     color: #000;
     text-decoration: none;
 }
 
 .office-link:hover {
     color: currentColor;
     text-decoration: none;
 }
 
 .office-block {
     width: 100%;
     height: auto;
     padding: 5px;
     min-height: 200px;
     border: 1px solid #eee;
     display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
     flex-direction: column;
     cursor: pointer !important;
 }
 
 .office-block .circle {
     width: 60px;
     height: 60px;
     border-radius: 60px;
     display: flex;
     align-content: center;
     align-items: center;
     justify-content: center;
 }
 
 .circle img {
     width: 35px;
     height: 35px;
 }
 
 .totals_,
 .balances_,
 .contact_ {
     padding: 20px;
 }
 
 .pnl {
     padding: 20px;
 }
 
 .custom-checkbox {
     display: inline-block;
     padding-right: 10px;
 }
 
 .contact_ .img-placer {
     width: 100%;
     height: 150px;
     margin: auto;
     display: flex;
     align-content: center;
     align-items: center;
     justify-content: center;
 }
 
 .contact_ img {
     position: relative;
     width: 100px;
     height: 100px;
     margin: auto;
     animation-name: floating;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }
 
 @keyframes floating {
     from {
         transform: translate(0, 0px);
     }
     65% {
         transform: translate(0, 15px);
     }
     to {
         transform: translate(0, -0px);
     }
 }
 
 .active-route {
     border: 1px solid #dadada;
     background-color: #bdbdbd;
 }
 
 @media only screen and (max-width: 768px) {
     .side-menu , .main-content , .nav-bar {
    /* display: none; */
  }
  .mobile-splash{
  		transition: 0.3s;
	-ms-transition:0.3s;
	-webkit-transition:0.3s;
  	transform: scale(1);
  	width: 100%;
  	height: 100vh;
  	background-color: #497dff;
  	display: flex;
  	justify-content: center;
  	text-align: center;
  	align-content: center;
  	align-items: center;
  	flex-direction: column;
  	z-index: 100;
      display: none;
  }
   .mobile-splash h2{
  	color: #fff;
  }
  .mobile-splash h3{
  	color: #fff;
  	font-weight: lighter;
  }
  .mobile-splash img{
  	width: 100px;
  }
  #alert{
  	transform: scale(0) !important; 
  }
 }
 /* end of common style section*/
 /* Login form section start*/
 
 .login-left-panel {
     position: relative;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     height: 100vh;
     /* background-color: #497dff; */
     color: #fff;
     background-image: url('https://images.pexels.com/photos/2437286/pexels-photo-2437286.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
     background-size: cover;
     padding: 0px !important;
 }
 
 .login-left-panel .blur-card {
     position: relative;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: 100vh;
     /* -webkit-backdrop-filter: saturate(100%) blur(5px);
     backdrop-filter: saturate(100%) blur(5px);
     background-color: rgba(255, 255, 255, -0.28); */
     /* border-radius: 20px; */
 }
 
 .blur-card .icon {
     position: relative;
     width: 150px;
     /* animation-name: floating;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out; */
 }
 
 .login-right-panel {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: center;
     vertical-align: middle;
     align-items: center;
     height: 100vh;
     background-color: #fff !important;
 }
 
 .login-right-panel form {
     width: 60%;
 }
 
 /* .login-right-panel .btn {
     background-color: #497dff !important;
     color: #fff;
 } */
 /* End of Login form section*/
 /* Master Style Section*/
 /* Staff Master Style Section*/
 
 .staff-card,
 .customer-card,
 .supplier-card,
 .office-card {
     margin-bottom: 25px;
     width: 100%;
     height: 230px;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: center;
     cursor: pointer !important;
     transition: 0.5s;
     -ms-transition: 0.5s;
     -webkit-transition: 0.5s;
 }
 .staff-card{
     height: 150px !important;
 }
 .office-card {
     height: auto !important;
 }
 
 .staff-card img,
 .customer-card img,
 .supplier-card img {
     position: relative;
     margin: auto;
     width: 80px;
 }
 
 .staff-card img{
     width: 50px;
 }
 .staff-card:hover,
 .customer-card:hover,
 .supplier-card:hover,
 .office-card:hover {
     box-shadow: 1px 2px 10px lightgrey;
 }
 
 .staff-card .plus-icon,
 .customer-card .plus-icon,
 .supplier-card .plus-icon,
 .office-card .plus-icon {
     width: 100px;
     margin: auto;
 }
 
 .staff-card .more,
 .customer-card .more,
 .supplier-card .more,
 .office-card .more {
     position: absolute;
     right: 55px;
     top: 0px;
     width: 21px;
 }
 
 .dark-card {
     background-color: #adadad;
 }
 
 .light-card {
     background-color: #fff;
 }
 
 .staff-card .dropdown-toggle::after,
 .customer-card .dropdown-toggle::after,
 .supplier-card .dropdown-toggle::after,
 .office-card .dropdown-toggle::after {
     display: none;
 }
 
 .staff-card .dropdown img,
 .customer-card .dropdown img,
 .supplier-card .dropdown img,
 .office-card .dropdown img {
     width: 21px;
 }
 /*End of Staff Master Section*/
 /*End of master style section

 /* Custom Switch Style Starts */
 
 .custom-switch.custom-switch-lg {
     cursor: pointer;
     padding-bottom: 1rem;
     padding-left: 2.25rem;
 }
 
 .custom-switch.custom-switch-lg .custom-control-label {
     cursor: pointer;
     padding-left: 0.75rem;
     padding-top: 0.15rem;
 }
 
 .custom-switch.custom-switch-lg .custom-control-label::before {
     cursor: pointer;
     border-radius: 1rem;
     height: 1.5rem;
     width: 2.5rem;
 }
 
 .custom-switch.custom-switch-lg .custom-control-label::after {
     cursor: pointer;
     border-radius: 0.65rem;
     height: calc(1.5rem - 4px);
     width: calc(1.5rem - 4px);
 }
 
 .custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
     cursor: pointer;
     transform: translateX(1rem);
 }
 /* Custom Switch Style End */




 /********* Style for Office Pro Version 2.0 ******/
 .main-content h5 {
    font-weight: normal !important;
}

.t-block {
    text-align: center;
    /* border-radius: 10px; */
    margin: 10px auto;
    padding: 10px 0px;
    border: 0.5px solid #fff;
    transition: 0.5s;
}

.t-block:hover {
    border: 0.5px solid #bdbdbd;
    /* background-image: linear-gradient(to bottom, #f5f5f7, #e7e7e8, #d9d9da, #cbcbcb, #bdbdbd); */
    transition: 0.5s;
}

.t-block p {
    margin-bottom: 0px !important;
}

.a {
    color: #000;
    text-decoration: none;
}

.a:hover {
    color: #000;
    text-decoration: none;
}

.t-block img {
    margin: 10px auto;
    width: 42px;
    position: relative;
}

.t-block .text-holder {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.t-block .info {
    position: absolute;
    right: 24px;
    top: 20px;
    width: 18px;
    height: 18px;
    background-image: url(../images/common/info.svg);
    background-size: contain;
    display: none !important;
}


.search{
    background-image: url('../images/common/search-icon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    background-position: 10px;
}

/* 	.frm_:hover{
 transition: 0.5s;
 box-shadow: 1px 4px 10px lightgrey;
}*/


.input-group{
    min-width: 150px !important;
}
.form-control{
    min-width: 100px !important;
}
.res-table{
    overflow-x: auto;
}
.res-table::-webkit-scrollbar {
    height: 7px;
  }