body{
    font-family: 'Comfortaa', cursive!important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
    font-family: 'Comfortaa', cursive!important;
}
/* topbar styles */
.main-header .logo{
    background-color: #fff!important;
    color: #4285f4!important;
    font-family: 'Comfortaa', cursive!important;
text-transform: uppercase;
}
.main-header .navbar{
    background-color: #fff!important;
}
.main-header .navbar .sidebar-toggle{
    color: #778ca2!important;
}
.main-header .navbar .sidebar-toggle:hover{
    background-color: #cfc9bf!important;
    color: #fff!important;
}
.main-header .navbar .nav>li>a{
    color:#778ca2!important;
}

/* sidebar styles */
aside.main-sidebar{
    background-color: #fff!important;
}
.sidebar-menu li{
    font-family: 'Raleway', sans-serif!important;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.9em;
}
.sidebar-menu li a{
    padding: 20px;
    color: #252631!important;
}
.treeview-menu>li>a{
    font-size: 13px;
}
.sidebar-menu li.active>a{
    color: #fff!important;
    background-color: #4285f4;
}
.sidebar-menu li a .la{
    font-size:1.5em;
    vertical-align: bottom;
    color: #778ca2;
    margin-right: 2rem;
}
.sidebar-menu li.active>a .la{
    color: #fff!important;
}
.skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li.menu-open>a{
    background: none;
}
.skin-blue .sidebar-menu>li>.treeview-menu{
    background: none;
    margin: 0;
}
.sidebar-menu>li:hover>a, .treeview-menu>li>a:hover{
    background-color:#f8fafb!important;
}
.sidebar-menu>li.active>a{
    background-color:#4285f4!important;
}
.sidebar-menu>li.header{
    background-color: #fff!important;
    color: #98a9bc!important;
    text-transform: capitalize;
    padding: 20px;
}
.sidebar-menu>li.active>a{
    border-left-color : #4285f4!important;
}
/* dashboard styles */
.content-header>h1{
    font-size: 18px;
    font-weight: 600;
}
.content-header{
    padding-top:22px!important;
}
li.user-body a{
    font-size: 1.2rem;
}
.skin-blue .main-header li.user-header{
    background-color: #4285f4;
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header{
    height: 150px;
}
.change-default{
    cursor: pointer;
}
.funds-overview-box{
    width: 100%;
    height: auto;
    padding:2rem;
    max-height: 420px;
    background-color: #fff;
    margin-top: 1.6rem;
    border-radius: 5px;
}

.fs-number{
  font-size: 1.8em;
}
.sh-heading, .sh-right-heading{
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 0;
}
.sh-heading{
    color: #778ca2;
    font-size: 1em;
}
.sh-right-heading{
    color: #5e5f67;
    float: right;
    text-transform: uppercase;
    font-size: 0.8em;
    margin-top: 3px;
}
.invoices-box{
    width: 100%;
    background-color: #fff;
    height: auto;
    max-height: 780px;
    margin-top: 1.6rem;
    border-radius: 5px;
}
.table {
    margin-bottom: 0;
}
.file-text-icon{
width: 40px;
height: 40px;
background-color: #fff6e9;
border-radius: 50%;
text-align: center;
line-height: 40px;
color: #4285f4;
}
.file-text-icon{
    float: left;
}
.status{
    background-color: #f8fafb;
    float: left;
    padding: 6px 15px;
    margin-top: 5px;
    border-radius: 30px;
}
.status-text{
    margin-left: 1rem;
    font-size: 0.9em;
}
.status i.fa-circle{
    font-size: 0.8em;
}
.paid{
    color: #6dd230;
}
/* tabs */
/* Tabs panel */
.tabbable-panel {
    padding: 15px;
  }
  
  /* Default mode */
  .tabbable-line > .nav-tabs {
    border: none;
    margin: 0px;
  }
  .tabbable-line > .nav-tabs > li {
    margin-right: 2px;
    margin-left: 5px;
  }
  .tabbable-line > .nav-tabs > li > a {
    border: 0;
    margin-right: 0;
    color: #778ca2;
    padding: 10px 8px;
  }
  .tabbable-line > .nav-tabs > li > a > i {
    color: #a6a6a6;
  }
  .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
    border-bottom: 2px solid #4285f4;
  }
  .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
    border: 0;
    background: none !important;
    color: #333333;
  }
  .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
    color: #a6a6a6;
  }
  .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
    margin-top: 0px;
  }
  .tabbable-line > .nav-tabs > li.active {
    border-bottom: 2px solid #5e5f67;
    position: relative;
  }
  .tabbable-line > .nav-tabs > li.active > a {
    border: 0;
    color: #5e5f67;
  }
  .tabbable-line > .nav-tabs > li.active > a > i {
    color: #404040;
  }
  .tabbable-line > .tab-content {
    margin-top: 0;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
  }
  .portlet .tabbable-line > .tab-content {
    padding-bottom: 0;
  }
.below-heading{
      color: #98a9bc;
      font-size: 0.9em;
      margin-bottom: 0;
  }
  .invoice-number{
    margin-left: 1rem;
    float: left;
}
.inv-number{
    font-size: 1em;
}
.inv-amnt, .status-text{
    font-size: 0.9em;
}
.more{
    line-height: 3;
}

.table>tbody>tr>td{
    border-top: 0;
    border-bottom: 1px solid #f4f4f4;
}
.table>thead>tr>th{
    border-bottom: 0;
}
#invoicesTable.dataTable thead .sorting:after, #invoicesTable.dataTable thead .sorting_asc:after{
    display: none!important;
}
#invoicesTable_filter input{
    border: none;
    border-bottom: 1.5px solid #ccc!important;
}
#invoicesTable_filter input:focus{
    border: none;
    border-bottom: 1.5px solid #4285f4!important;
}
#invoicesTable_length select:focus{
    border: 1.5px solid #4285f4!important;
}
table#example1{
    background: #fff;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background-color: #4285f4;
    border-color: #4285f4;
}
.datepicker-form{
            text-align: right;
            padding: 0 0 3rem;
        }
        .from-date, .to-date{
            padding: 7px 12px;
            border: none;
            border-radius: 3px;
        }
        .fromToBtn{
            background: #4285f4;
            color: #fff;
            vertical-align: top;
        }
        .daterangepicker{
            color: #323232!important;
        }
.daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: #4285f4;
}
.daterangepicker td.in-range{
    background-color: #fff8ed;
}
.daterangepicker .drp-buttons .applyBtn{
    background-color: #4285f4;
    border-color:#4285f4;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: #4285f4!important;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover{
    background-image: linear-gradient(to bottom,#ffdaa2,#4285f4);
}
.select2-container--default .select2-selection--single, .select2-selection .select2-selection--single{
    border:none;
    border-radius: 3px;
}
.dataTables_wrapper{
    padding: 3rem 0;
}
.card{
    background: #fff;
    padding: 15px 20px;
    border:1px solid rgba(0,0,0,.0835)!important;
    border-radius: 5px;
}
.card:hover{
    box-shadow: 0 2px 15px 2px #c0cdde;
}
.card-nri{
    background: #4285f4!important;
}
.card-nri h5.stats-perc{
    color: #4285f4!important;
    background-color: #eff5ff;
}
.card-nrp{
    background: #db4437!important;
}
.card-npi{
    background: #f4b400!important;
}
.card-npi h5.stats-perc{
    color: #f4b400!important;
    background-color: #fff8e5;
}
.card-npp{
    background: #0f9d58!important;
}
.card-npp h5.stats-perc{
    color: #0f9d58!important;
    background-color: #e8f5e9;
}
.card-header>h6{
    
    line-height: 1.5;
    letter-spacing: 0.5px;
    color:#fff;   /* previous -- > #838896  */
    font-size: 1.4rem;
    margin-bottom: 0;
    font-weight: 700;

}
.card-body{
    display: flex;
    flex-wrap: nowrap;
    padding-top: 5px;
}
.stats-box{
    flex: 1 1 auto;
}
.perc-box{
    display: block;
    height: auto;
    flex: 0 0 auto;
}
h5.stats{
    margin-top: 12px;
    font-size: 2.4rem;
    font-weight: bold;
    font-family: 'Roboto', sans-serif!important;
    color: #fff;   /* previous -- > #4e5364  */
}
h5.stats-perc{
    border-radius: 2em!important;
    padding: 7px 15px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif!important;
}
h5.red{
    background-color: #ffebee!important;
    color: #f44336!important;
}
.fa-edit{
    cursor: pointer;
}
table.table-bordered.dataTable th, table.table-bordered.dataTable td{
    padding: 1.2rem 1.5rem;
}
.outer-div{
        background-color: #fff;
        padding: 2.5rem;
        border-radius: 10px;
    }
    .table{
        border-collapse: separate;
    border-spacing:0 20px;
    }
    table.table.dataTable th{
        background-color: #4285f4;
        color: #fff;
    }
    table.table.dataTable th:first-child, table.table.dataTable td:first-child{
        border-bottom-left-radius:3px;
        border-top-left-radius:3px;
    }
    table.table.dataTable th:last-child, table.table.dataTable td:last-child{
        border-bottom-right-radius:3px;
        border-top-right-radius:3px;
    }
    .dataTables_length{
        float: left;
    }
    table.dataTable thead .sorting:after{
        display: none;
    }
    .table>tbody>tr>td{
        border-bottom: none;
    }
    .table-striped>tbody>tr:nth-of-type(odd){
        background-color: #fff;
    }
    .table-striped>tbody>tr{
        background-color: #fff;
        box-shadow: 0 1px 8px 1px #f3f3f3;
    }
    .table-hover>tbody>tr:hover{
        background-color: #f6f4fe;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        padding: 12px;
    }
    .table>tbody>tr>td{
        padding: 15px;
    }
    .dataTables_filter label{
        position: relative;
    }
    .dataTables_filter label input{
        margin: 0;
        border: none;
        border-bottom: 1.5px solid #4285f4;
    }

/* Modal */
.modal-header, .modal-body, .modal-footer{
    padding: 15px 20px;
}
.modal-title{
    font-weight: 400;
    font-size: 1.4rem;
    color: #252631;
}
.modal-header .close{
    margin-top: 2px;
    font-size: 1.6rem;
    color: #778ca2;
}
.modal-body .form-group label, form.validate-form label{
    font-size: 1.3rem;
    font-weight: 300;
    color: #252631;
}
.modal-body .form-group input, .modal-body .form-group select, form.validate-form input, form.validate-form select {
    border-radius: 3px;
    height: 42px;
}
.modal-body .form-group input::placeholder, form.validate-form input::placeholder{
    color: #1b1e24;
    font-size: 1.3rem;
}
.modal-content{
    border-radius: 3px;
}
.modal-submit, .upload-button, .validate-button, .validate-reset{
    background-color: #4285f4;
    color: #fff;
    border: none;
    display: block;
    margin: 3rem 0 1rem;
    width: 125px;
}
.validate-button{
    float: left;
}
.validate-reset{
    background-color: #ccc;
    float: left;
    margin-left: 1rem;
}
/* custom checkbox */
/* The container */
.chkBox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1.4rem;
    font-weight: 400;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.chkBox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.chkBox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
    border-radius: 2px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.chkBox-container:hover input ~ .chkBox-checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkBox-container input:checked ~ .chkBox-checkmark {
  background-color: #4285f4;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chkBox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chkBox-container input:checked ~ .chkBox-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.chkBox-container .chkBox-checkmark:after {
  left: 7px;
  top: 3px;
  width: 7px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* custom file upload */
.file-upload{display:block;text-align:center;font-family: Helvetica, Arial, sans-serif;font-size: 12px;}
.file-upload .file-select{display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select .file-select-button{background:#dce4ec;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
.file-upload .file-select:hover{border-color:#4285f4;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select:hover .file-select-button{background:#4285f4;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select{border-color:#3fa46a;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload.active .file-select .file-select-button{background:#3fa46a;color:#FFFFFF;transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.file-upload .file-select input[type=file]{z-index:100;cursor:pointer;position:absolute;height:100%;width:100%;top:0;left:0;opacity:0;filter:alpha(opacity=0);}
.file-upload .file-select.file-select-disabled{opacity:0.65;}
.file-upload .file-select.file-select-disabled:hover{cursor:default;display:block;border: 2px solid #dce4ec;color: #34495e;cursor:pointer;height:40px;line-height:40px;margin-top:5px;text-align:left;background:#FFFFFF;overflow:hidden;position:relative;}
.file-upload .file-select.file-select-disabled:hover .file-select-button{background:#dce4ec;color:#666666;padding:0 10px;display:inline-block;height:40px;line-height:40px;}
.file-upload .file-select.file-select-disabled:hover .file-select-name{line-height:40px;display:inline-block;padding:0 10px;}
/* loader */
.loader{
            position: absolute;
            top: 0;
            z-index: 9999;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(255,255,255,0.7);
        }
        .loader-img{
            width: 50px;
            position: fixed;
            left: 46%;
            top: 50%;
            animation: rotation 1.2s infinite linear;
        }
        .loader-text{
            position: absolute;
            left: 45%;
            top: 60%;
        }
        @keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
/* media queries */
@media (min-width:768px){
    .sidebar-mini.sidebar-collapse .main-sidebar{
        width:60px!important;
    }
    .modal-dialog{
        width:480px;
    }
}