.logo {
    height:25px;
    margin-top:-3px;
    margin-right:5px;
}

.badge-notify{
    display:block;position:absolute; 
    top:12px; left:23px;  z-index:1000;
    font-size:0.8em;
    background-color:#e74c3c  !important;
    padding:1px 6px !important;
    color:#fff !important;
}
 
 
@media print {

    body {
        margin: 0;
        padding: 0 !important;
        width:1170px;
    }
    .container {
        width:100%;
    }

    table td.hidden-sm, table th.hidden-sm {
        display:table-cell !important;
        border:1px;
       
    }

    a[href]:after {
        content: none !important;
    }


    @page {
        size: 330mm 427mm;
        margin: 14mm;
    }
   

}


a {
    color:#217dbb;
}
/* --------------------------------------------------------------*/
div>ul.pagination { margin:0 }

.pagination.narrow span, .pagination.narrow a {
    padding: 10px 10px;
}

.favorite {
    color:#FFA500;
}
@media screen and (max-width: 767px) {
    /* .container.body { 
        padding-left:5px;
        padding-right:5px;        
    } */
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        position: relative;
        min-height: 1px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .pagination.narrow span, .pagination.narrow a {
        padding: 10px 7px;
    }
    .pagination.narrow .separator span{
        padding: 10px 2px;
    }
}
 
/* set the bootstrap dialog to show up in the center */
@media screen and (min-width: 767px) {
    .vertical-alignment-helper {
        display:table;
        height: 100%;
        width: 100%;
        pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
    }
    .vertical-align-center {
        /* To center vertically */
        display: table-cell;
        vertical-align: middle;
        pointer-events:none;
    }
    .modal-content {
        /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
        width:inherit;
        max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
        height:inherit;
        /* To center horizontally */
        margin: 0 auto;
        pointer-events: all;
    }   
    
    /*.modal .modal-dialog.centered {
        position: fixed;
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
    }*/
}

.form-control {
    height:35px;
    padding:5px 10px;
}

@media screen and (min-width: 767px) {
    .form-control.fixed120px {
        width:120px;
    }
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.alert {
    padding:10px;
    margin-bottom:15px;
}

.monospace {
    font-family: Lucida Console, Courier, monospace;
    
}
  
table.smaller, table.smaller input ,table.smaller select, table.smaller option{
    font-size:13px;
    /* font-family:Helvetica, Arial, sans-serif */
}
table.smaller .btn-xs {
    font-size:11px;
}
table.fixed {
    table-layout:fixed;
}
table.fixed td {
    overflow:hidden;
}

/* --------------------------------------------------------------------------- */
/* below is for the modification of the jquery.tableedit.js */
/* this is to enable overflow-y when screen is smaller */
.table-responsive {
    margin-bottom:21px;
}
.default_height {
    height:450px;
}
.report_monthly {
    height:400px;
}
.modal_float_container {
    height:500px;
    overflow:auto;
}
.modal_note_container {
    height:420px;
    overflow:auto;
}
.budgetbig {
    height:600px;
}
@media screen and (max-width: 767px) {
    .table-responsive {
      overflow-y: visible;
      -ms-overflow-style: scrollbar;
      border:0px;
      white-space: normal;
    }
    .default_height {
        height:inherit;
    }
    .modal_float_container {
        height:380px;
        overflow:auto;
    }
    .modal_note_container {
        height:300px;
        overflow:auto;
    }
    .report_monthly {
        height:inherit;
    }
    .budgetbig {
        height:inherit;
    }
    #calendar_search {
        display:none;
    } 
    #calendar_search_show {
        display:inherit;
    }   
}
@media (min-width: 767px) {
    #calendar_search_show {
        display:none;
    }   
}

.table tbody tr td.tabledit-edit-mode {
    padding:3px;
 }
 
 .table tbody td .tabledit-confirm-button  {
     position:absolute; 
     margin:0;
     top:0px;
     left:-30px;
 }
 
 .table tbody td .tabledit-toolbar {
     position:relative;
 }

.table tbody tr.text-muted {
    display:none; 
    height:0;
    overflow:hidden;
}

.tabledit_list {
    height:220px;
}

@media screen and (min-width:1200px) {
  .tabledit_list {
     height:220px;
  }
}

/* --------------------------------------------------------------------------- */
/* End of section for jquery.tabledit.js */

.mt_heading {
    margin-top: 0px;    
    margin-bottom: 15px; 
    margin-right:15px;
    float:left;
}

.mt_topspace {
    margin-top:10px;
}

.transaction_type {
    margin:5px 20px 5px 0px;    
}

.mt_chart_heading {
    margin-top: 5px;
    margin-bottom: 15px;   
}


@media screen and (max-width: 767px) {
    .mt_heading {
        font-size: 1.4em;
        margin-top: 0px;
        margin-bottom: 10px; 
        float:left;
    }    
    .mt_topspace {
        margin-top:5px;
    }

    .mt_chart_heading {
        font-size: 1.3em; 
        margin-top: 0px;
        margin-bottom: 10px;   
    }

}
.btn-group {
    display: flex;
}

/* --------------------------------------------------------------------------- */
/* Select 2  : style modification */
.select2 {
    width:100%!important;
}
.select2-results__option , .select2-results__option-highlighted {
    height:20px;
    padding:1px 10px;
}
.select2-container--default .select2-selection--single {
    height:35px;
    padding: 2px 5px;
    border: 2px solid #dce4ec;
    width:100%;
}

.select2-container--open .select2-selection--single {
    border-color: #2c3e50;
}

.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 2px solid #dce4ec;
    border-radius: 4px;
    cursor: text;
}

.has-error .select2-container--default .select2-selection--multiple {
    border:2px solid  #e74c3c;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border:2px solid  #2c3e50;
}
.has-error .select2-container--default.select2-container--focus .select2-selection--multiple {
    border:2px solid  #e74c3c;
}

/* --------------------------------------------------------------------------- */
/* jQuery autocomplete : style modification */
.ui-widget
        {
            font-family: inherit;
            font-size: 0.9em;
        }
        
/* --------------------------------------------------------------------------- */
/* transaction list */
table.smaller> tbody > tr > td 
{
    padding: 4px 8px;
}

table.smaller .btn-xs {
    font-size: 10px;
}

table td.disabled {
    color:#aaa;
}



td.tablemod_td {
    vertical-align:top;
    padding:0px !important;
    margin:0px ;
}

.tablemod_edit {
    border:0; /* sold 1px black; */
    padding:0px 8px;
    color:#000;
    margin:0px;
    width:100%;
}

textarea.tablemod_edit {
    width:100%;
    height:100%;
    resize:none;
    padding:4px 8px;
    overflow:hidden;   
}


@media screen and (min-width: 767px) {
    form input.amount {
        width:100px !important;
    }
}

/* ---------------------------------------------------------------------------*/

/* For BudgetPlan */
.fixed-column {
    position: absolute;
    display: block;
    width: 202px !important;
    left:0px ;
    border-right: 1px solid #ddd;
    /*background-color: #fff;*/
    overflow: hidden ; 
   
}

.fixed-width{
    min-width: 200px;
    width: 200px !important;     
    border-right: 0px !important ;
}
 

@media screen and (max-width: 767px) {
    .rightmost {
        font-size:0.9em;
        white-space: nowrap;
    }
    .fixed-column {
        position: absolute;
        display: block;
        width: 122px !important;
        left:0px ;
        border-right: 1px solid #ddd;
        background-color: #fff;
        overflow: hidden ; 
        
    }
    .fixed-width{
        min-width: 120px;
        width: 120px  !important; 
        border-right:0px  !important;
    }
}
/* ---------------------------------------------------------------------------*/
/* note show view */
.note_date  {
    font-size :0.9em;font-weight:bold;
}

.note_title  {
    font-weight:bold; font-size:1.2em; border-bottom:1px solid #ccc;line-height:2em;margin-top:.5em;
}

.note_body {
    margin:1.2em  0 ; min-height:15em;
}

.note_body_modal {
    margin:15px 0 ;min-height:250px;
}

.note_transaction {
    margin:0 0 15px 0 ;overflow:auto;min-height:60px ; border:1px solid #eee;    
}

@media screen and (max-width: 767px) {
    .note_body_modal {
        margin:15px 0 ;min-height:200px;
    }    

}
/* ---------------------------------------------------------------------------*/

table.floatTable {
    margin:0;
}
table .header_row {
    border-bottom:2px solid #ddd;
    
}

.E .amount , .e_amount {
    color:#cc0000;
}
.I .amount , .i_amount {
    color:#009944;
}
.T .amount , .t_amount {
    color:#777777;
}

.negative {
    color:#cc0000;
}

.positive {
    color:#009944;
}
.nowrap {
    white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}

/* ---------------------------------------------------------------------------*/
#form_ym select {
    font-size:18px;   
}
#form_ym select option{
    font-size:0.8em;
}
#form_ym .arrow {
    font-size:26px;
}

/* ---------------------------------------------------------------------------*/
.dashboard .small {
    font-size:0.8em;
}


/* ---------------------------------------------------------------------------*/

#hoverButton {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index:1000;
}
 
.btn-circle {
  width: 48px;
  height: 48px;
  line-height: 44px; /* adjust line height to align vertically*/
  padding:0;
  border-radius: 50%;
  text-align:center;
  font-size:22px;
}

/*
@media screen and (min-width: 768px) {
    #hoverButton {
        display:none;
    }
}
*/

 

/*----------------------*/
#loading-indicator { 
    display:none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('/image/oval.svg') 
            50% 50% no-repeat;   
    background-size: 60px 60px;
  }



span.label a {
    color:#fff ;
}


.expense-future {
    background-color: #ffc0cb;
  
}

.income-future {
    background-color: #87ceeb;
   
}

.transfer-future {
    background-color: #c5c5c5;
    
}

/* for the popup button to show with floatThead */
.floatThead-dropdown-helper {
    overflow: visible !important;
    overflow-x: hidden;
}

/*Calendar view */
#CalendarTable {
    table-layout:fixed;
}

#CalendarTable td .day {
    font-weight:bold;
}
 
#CalendarTable td {
    table-layout:fixed;
    min-height:80px;
    height:80px;
    width:14.2%;
    overflow:hidden;
    cursor: cell;
}     
#CalendarTable td .transaction {
    padding:0;
    margin-bottom:2px;
    height:50px;
}
#CalendarTable td .other {
    padding:0;
   /* background-color:#fff; */
    margin-bottom:1px;
    height:15px;
    border-radius:3px;
}
#CalendarTable td .other .info {
    font-size:0.8em;
    color:#999;

}

#CalendarTable td .data {
    cursor:pointer;
    padding:0px 3px;
    margin-bottom:1px;
    font-size:0.8em;    
    color:#fff;
    height:16px;
    border-radius:3px;
    overflow:hidden;

}
#CalendarTable td.today {
    background-color:#bbe6ae;
}

#CalendarTable td.mask {
    background-color:#e0dfdf;
    cursor:default;
}


@media screen and (max-width: 767px) {
   
    #CalendarTable td {
        padding:2px;
        min-height:80px;
        height:70px;
        width:14.2%;
        overflow:hidden;
    }
    #CalendarTable td .transaction {
        padding:0;
        margin-bottom:2px;
        height:40px;
    }

    #CalendarTable td .other {
        padding:0;
        margin-bottom:2px;
        height:13px;
        border-radius:3px;
    }
    #CalendarTable td .data {
        padding:0px 3px;
        margin-bottom:1px;
        font-size:10px;    
        color:#fff;
        border-radius:3px;
        height:13px;
        overflow:hidden;
    }
}


/* modal transaction view */
 
.view-group { 
    margin-bottom:5px;
}

.view-label {
    text-align: right;
    padding-top: 5px;
    margin-bottom: 0;
}

.view-data {    
    padding: 5px;
}

@media screen and (max-width: 767px) {
    .view-label {
        font-size:0.8em;
        
    }
    .view-data {    
        padding: 0 0 0 0px;
        
    }
    .view-body{
        height:350px;
        overflow:auto;
    }
}

.dragover {
    /*background-color:#000 !important;*/
    background-color:#ffd447 !important;
}

.dragObject{
    background-color:#3498db !important;
}

div.draggingDiv {
  position: fixed;
  bottom: 0;
  right: -10000px;
  width: 300px;
  border: 2px solid #eee;
  background-color:#3498db;
  border-radius: 5px;
  padding:6px;
  color:#fff;
  /*background-image: url("/image/paint.png");*/
}

.grip {
    padding-left:5px !important;
    padding-right:0 !important;
    width:1px;
}
 

#cloud_files {   
    margin-top:5px;
    font-size:0.9em;
}
#cloud_files div {
    margin:3px;
}

.note_attachedfiles {
    margin: 0 0 15px 0;
    
}
.note_attachedfiles span{
    font-size: 0.8em;
}

.attach_wrapper {
    float:left;
    
    margin: 5px 5px 0 0;
}
.attach_div_view{
    width: 100%;
    height: 100px;
    border: solid 1px #ddd;
    margin: 5px 5px 0 0;
    background-position: center;
    background-color:#eee;
    border-radius:5px;
   
    /* needed if we go the image thumbnail route */
    position: relative;
    overflow: hidden;    
    
}

/* needed if we go the image thumbnail route */
.attach_div_view  img {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.attach_name_div {    
    font-size:0.8em;    
    height:20px;
    padding-left: 3px;
    overflow:hidden;
    white-space: nowrap;
}


.attach_div_view {
    width:160px;
    height:80px;
}
.attach_name_div {
    width:160px;   
    
}


@media screen and (max-width: 767px) {
    .attach_div_view {
        width:145px;
    }
    .attach_name_div {
        width:145px;   
    }
}

/* preview slider */
.slide div {
    overflow:hidden;
}
.slide div.item {
    display:none;
}
.slide div.active {
    display:block;    
}
.slide div img {
    display:inline; 
}


/* page slider */

.slider .slider-handle {
    background-color: #18bc9c !important;
    background-image: none;
}

.slider .tooltip {   
    margin-top: -30px;
}
.slider .tooltip.show { 
    opacity: 1;
}
    
.modal-subtitle {
    margin-top: -2px;
    margin-left: 0px;
    margin-bottom: -15px;
    font-size: 0.9em;
    float: right;
}

.note_option_icon {
    margin-left:6px;
}

.note_option {
    width:28px !important;
}
.note_option.search {
    width:34px !important;
    border-radius:0 !important;
}
.note_option.btn.focus {
    outline: none !important;
}

.note_option.edit {    
    margin:0 2px 2px 0;
}

.note_option.btn-option {
    border-color:#bbb;   
    background-color:#bbb;
   
    color:#fff;
}
.note_option.btn.active {
    border-color:#3498db;   
    background-color:#3498db;
    color:#fff;
}