*
{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

:root
{
    --dark-body: #4d4c5a;
    --dark-main: #141529;
    --dark-second: #79788c;
    --dark-hover: #323048;
    --dark-text: #f8fbff;
    --light-body: #f3f8fe;
    --light-main: #fdfdfd;
    --light-second: #c3c2c8;
    --light-hover: #edf0f5;
    --light-text: #151426;
    --blue: #007497;
    --white: #fff;
    --red: #e06666;
    --green: #93c47d;
    --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.light {
    --bg-body: var(--light-body);
    --bg-main: var(--light-main);
    --bg-second: var(--light-second);
    --color-hover: var(--light-hover);
    --color-txt: var(--light-text);
}

html
{
    width: 100%;
    height:100%;
}

body
{
    width: 100%;
    height : 100%;
    margin:0;
    padding:0;
    background-color: #f5fafd;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1D2225;
}

button.rounded
{
    cursor: pointer;
    text-align: center;
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 1.6rem;
    transition: all 0.5s ease-in-out 0s;
    padding: 4px 16px;
    font-size: 1.2rem;
    border-radius: 20px;
    font-family: "Public Sans", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    border: 1px solid rgb(241, 192, 134);
    background-color: rgb(241, 192, 134);
    color: rgb(20, 21, 22);
    fill: rgb(17, 17, 17);
    text-transform: inherit;
}

#wrapper
{
    min-height:100%;
    position:relative;
}

.btn-primary
{
    background-image: -moz-linear-gradient(center top , #6EB6DE, #4A77D4);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.btn:focus
{
    outline: none !important;
}

.glyphicon { margin-right : 5px; }
.ml-100 { margin-left: 100px; }

div.modal div.input-group.date
{
    padding-left: 15px !important;
    padding-right: 15px !important;
}

input[type='number']:invalid { border: 3px solid red; }
input.error { border-color: #670d10; }
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

.table { font-size: 12px; }
.table th { color: #f1c086; }
.table td, .table td > a { color: black; }

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/** ONLY DESKTOP **/
@media only screen and (min-device-width: 800px) and (min-width: 800px)
{
    .table { font-size: 14px; }
}

/** ONLY MOBILE **/
@media (max-width: 767px) {
    body { font-family: Verdana, Arial, Helvetica, sans-serif; }
    h2 {
        font-size: 16px;
    }
    h3, h4, h5, h6 {
        font-size: 14px;
    }

    button.btn.save, 
    button.btn.delete 
    {
        font-size: 1.1rem;
    }
}
#breadcrumb
{
    color: #f1c086;
    margin-bottom: 15px;
}

div.top-right
{
    margin-top: -40px;
    margin-bottom: 30px;
    float: right !important;
}

.headerButtons ul.dropdown-menu li a { cursor: pointer; }

.btn-group.extra-options { margin-left : 10px; }

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    #breadcrumb { margin: 0 auto 10px auto; }
    #breadcrumb .headerButtons .btn
    {
        padding: 0.25rem 0.5rem;
        font-size: 1.5rem;
        border-radius: 4px;
    }
}
.calendar
{
    height: max-content;
    background-color: var(--bg-main);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.light .calendar {
    box-shadow: var(--shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-txt);
    padding: 10px;
}

.calendar-body { padding-left: 10px; }

.calendar-week-day {
    height: 50px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-weight: 600;
}

.calendar-week-day div {
    display: grid;
    place-items: center;
    color: var(--bg-second);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    color: var(--color-txt);
}

.calendar div.calendar-days button.btn.info
{
    border: none;
    border-radius: 50%;
    background-color: transparent;
}

.calendar div.calendar-days .event button.btn.info { color: #fff; }
.calendar div.calendar-days button.btn.info:focus { outline: none; }

.calendar-days div.calendar-day-hover {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    position: relative;
    cursor: pointer;
    animation: to-top 1s forwards;
}

.calendar-days div span {
    position: absolute;
}

.popover-content .calendar-event-legend {
    width: 10px;
    height: 10px;
    display: inline-block;
}
.popover-content .calendar-event-legend.expense { background-color: var(--red); }
.popover-content .calendar-event-legend.income { background-color: var(--green); }

.calendar-days div.event.expense {
    background-color: var(--red);
    color: var(--white);
    border-radius: 50%;
}

.calendar-days div.event.income {
    background-color: var(--green);
    color: var(--white);
    border-radius: 50%;
}

.calendar-days div.event.income.expense {
    background: linear-gradient( -90deg, var(--green), var(--green) 50%, white 50%, white 50%, var(--red) 50% );
    border-radius: 50%;
}

.calendar-days div.curr-date {
    border: 2px solid #000000;
    border-radius: 50%;
}

.calendar-days div.curr-date span {
    display: none;
}

.calendar-footer {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#budgetCalendarDeadlinesWidget .legend { margin-top: 25px; color: #000000; font-size: 12px;; }
#budgetCalendarDeadlinesWidget .legend > div { display: inline-flex; }
#budgetCalendarDeadlinesWidget .legend .color
{
    min-width:18px;
    min-height:18px;
    margin-right: 10px;
}
#budgetCalendarDeadlinesWidget .legend > div.incomes .color { background-color: var(--green); }
#budgetCalendarDeadlinesWidget .legend > div.expenses .color { background-color: var(--red); }

/** ONLY DESKTOP **/
@media only screen and (min-device-width: 800px) and (min-width: 800px)
{
    #budgetCalendarDeadlinesWidget.panel { min-width: 390px; }
}

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .calendar { width: 320px; }
    .calendar-days div.calendar-day-hover { width: 40px; height: 40px; }
}
div.no-padding-left { padding-left: 0 !important; }
div.panel-container h2 { margin-bottom: 20px; }

.body.connected > div#content { padding-top: 80px; padding-bottom: 40px; }
.auth-content { padding: 0; }

div.not-allowed
{
    text-align: center;
    font-size: 25px;
    line-height: 5;
    vertical-align: middle;
}

i.button { cursor : pointer; }
div.shared, div.linked-loan { color : #f1c086; }

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover
{
    color: #fff;
    font-weight: bold;
    background-color: #f1c086;
}
.nav-pills>li:not(.active)>a
{
    background-color: transparent;
}

.clipboard-icon
{
    color: #ffffff;
    float: right;
    margin-bottom: 5px;
    margin-right: 5px;
}
.clipboard-icon a
{
    text-decoration: none;
    cursor: pointer;
}

div.media-heading > span.title { font-weight: bold; }
div.actionButtons { position: fixed; right : 4%; margin-bottom: 20px; }
div.headerButtons { text-align: right; }
div.headerButtons button { margin-left: 10px; }
div.headerButtons button.btn-main { background-color: #f1c086; color: black; }
div.actionButtons img { width : 64px; height: 64px; margin-left: 15px; }
div.panel-footer img.clickable { cursor: pointer; }
div#buttonsBar img { width : 16px; cursor : pointer; }

#itemsNumberWidget { font-size: 14px; }

hr.panel-divider
{
    border-color: #f1c086;
}
hr.panel-divider.m15
{
    margin-left: 15px;
    margin-right: 15px;
}

.panel-header-title > .icon { padding-bottom: 3px; }
.panel-body div.title
{
    color: #ff5e00;
    font-size: 14px;
    margin-bottom: 15px;
    float: left;
}

div.empty-panel 
{
    border: solid 1px #C6CCD2;
    border-radius: 8px;
    padding: 24px 8px 24px 8px;
    margin-bottom: 10px;
    align-items: center;
    display: flex;
    flex-direction: column; 
    text-align: center;
}

div.panel.clickable-panel .panel-body,
div.panel div.actions { cursor: pointer; }
div.panel.clickable-panel.selected-panel .panel-body 
{ 
    border: 3px solid #f1c086; 
}

div.no-data
{
    color: #ddd;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
}

.panel .panel-header .infos { margin-bottom: 15px; }

.panel .infos-detail
{
    font-size: 16px;
    font-weight: bold;
    margin-top: 5px;
}

#assetsPanel .panel .panel-body img { max-height: 72px; }

/* ASSETS, BUDGETS PANEL */
div.panel-detail div.panel-body, #profile div.panel-body { padding: 0; }
div.panel-detail div.panel-default, #profile div.panel-default.main
{
    background-color: #ffffff;
    border-color: #ddd;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 50px;
}

#assetsPanel div.panel-default,
#assetsPanel div.panel-footer,
#loansPanel div.panel-default,
#loansPanel div.panel-header,
#loansPanel div.panel-footer,
#budgetsPanel div.panel-default,
#budgetsPanel div.panel-header,
#budgetsPanel div.panel-footer,
#assetsMenu div.panel-default,
#assetsMenu div.panel-header,
#loanHousesForm div.panel-default,
#loanHousesForm div.panel-header,
#loanVehiclesForm div.panel-default,
#loanVehiclesForm div.panel-header,
#databaseTablesPanel div.panel-footer,
#widgetsMenu div.panel-default,
#widgetsMenu div.panel-header
{
    background-color: white;
    border-color: #FF9800;
}
#loansPanel div.panel-footer { color: #f1c086; }

#databaseTablesPanel div.panel-header
{
    background-color: #f5f5f5;
    font-weight: bold;
    padding: 10px 15px;
    height: 38px !important;
    border-bottom: 1px solid #ddd;
}

#usersPanel .connection-status.green { color: green; }
#usersPanel .connection-status.red { color: brown; }
#usersPanel div.lastConnection
{
    font-size: 13px;
    text-align: right;
    line-height: 20px;
}
#assetsPanel div.lastModified, #budgetsPanel div.lastModified
{
    font-size: 11px;
    text-align: right;
    color: #ff5e00;
    line-height: 20px;
}

div.panel.type-section { margin-bottom: 10px; }
#assetsPanel .type-section .panel-heading,
#loansPanel .type-section .panel-heading,
#budgetsPanel .type-section .panel-heading
{
    background-color: #6e63c4;
    border-color: transparent;
}
div.panel-container div.search-filters .panel-heading
{
    background-color: #f0ad4e;
    border-color: transparent;
}

#assetsPanel .type-section .panel-header-title,
#loansPanel .type-section .panel-header-title,
#budgetsPanel .type-section .panel-header-title
{
    margin-top: 0;
    margin-bottom: 0;
    color: white;
}
div.panel-container .search-filters .panel-header-title
{
    margin-top: 0;
    margin-bottom: 0;
}

#assetsPanel ul.nav-pills { margin-bottom: 15px; }

.panel .panel-header .row
{
    margin-top: 15px;
    margin-left: 1px;
}

.panel div.bank-name,
.panel .infos-title,
.panel .budget-amount-participation,
.panel div.loan-amount
{
    color: black;
    font-weight: bold;
    font-size: 16px;
}
.panel .budget-amount-total
{
    font-weight: bold;
    font-size: 16px;
    color: black;
}
.panel div.loan-amount { text-align: center; }

.panel div.wallet-title,
.panel div.infos-subtitle,
.panel div.budget-received,
.panel div.budget-spent,
.panel div.budget-notes,
.panel div.budget-remaining,
.panel div.loan-paid,
.panel div.loan-remaining
{
    color: gray;
    font-size: 12px;
}

.panel div.budget-notes
{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 180px;
    height: 15px;
}

div.infos-subtitle span.title { color : #f0ad4e; }
div.infos-subtitle img
{
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

.panel div.budget-received,
.panel div.budget-spent,
.panel div.loan-paid { float: left; }

.panel div.budget-frequency
{
    font-size: 12px;
    color: black;
    margin-bottom: 10px;
    margin-top: 10px;
}

.panel div.budget-remaining,
.panel div.loan-remaining { float: right; text-align: right; }

.panel div.wallet-balance,
.panel div.asset-amount,
.panel div.loan-balance,
.panel div.budget-balance
{
    margin-top: 5px;
    font-size: 14px;
    font-weight: bold;
}
.panel div.wallet-balance.green,
.panel div.asset-amount.green,
.panel div.budget-remaining.green,
.panel div.loan-balance.green,
.panel div.budget-balance.green,
.panel div.loan-remaining.green { color: green; }
.panel div.wallet-balance.red,
.panel div.budget-remaining.red,
.panel div.budget-balance.red,
.panel div.loan-remaining.red { color: brown; }

/* TRANSACTION CATEGORIES, ASSET TYPES, BANKS, BUDGET TYPES */
#transactionsCategoriesPanel .panel,
#banksPanel .panel,
#currenciesPanel .panel,
#budgetTypesPanel .panel,
#loanTypesPanel .panel,
#walletTypesPanel .panel { height: 155px; }

#transactionsCategoriesPanel .panel-body,
#banksPanel .panel-body,
#currenciesPanel .panel-body,
#budgetTypesPanel .panel-body,
#loanTypesPanel .panel-body,
#walletTypesPanel .panel-body,
#backupsPanel .panel-body
{
    text-align: center;
    padding: 10px;
    cursor: pointer;
}
#usersPanel .panel-body,
#emailTemplatesPanel .panel-body{ cursor: pointer; }

#walletDetail div.panel-header,
#budgetDetail div.panel-header
{
    padding-left: 15px;
    padding-right: 15px;
}

#transactionsCategoriesPanel div.panel-header,
#banksPanel div.panel-header,
#assetsPanel div.panel-header,
#loansPanel div.panel-header,
#currenciesPanel div.panel-header,
#walletTypesPanel div.panel-header,
#budgetTypesPanel div.panel-header,
#loanTypesPanel div.panel-header,
#usersPanel div.panel-header,
#remoteAccountsPanel div.panel-header,
#budgetsPanel div.panel-header,
#emailTemplatesPanel div.panel-header,
#databaseTablesPanel div.panel-header
{
    height: 0;
    text-align: right;
    padding-right: 5px;
}

#budgetsPanel div.panel-header,
#assetsMenu div.panel-header,
#widgetsMenu div.panel-header,
#loansPanel div.panel-header,
#databaseTablesPanel div.panel-header
{
    height: 25px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 1px solid #ff9800;
}

#budgetsPanel div.budget-categories,
#loansPanel .panel-header > div,
#assetsMenu .panel-header > div,
#widgetsMenu .panel-header
{
    font-size: 14px;
    text-align: left;
    color: #ff9800;
    padding-left: 10px;
    padding-top: 2px;
}
#budgetsPanel div.progress,
#loansPanel div.progress
{
    margin-top: 10px;
    margin-bottom: 10px;
}
#budgetsPanel nav { text-align: center; }
#budgetsPanel nav li.previous, #budgetsPanel nav li.next { cursor: pointer; }

/* ADMIN */
#adminPanel .panel { height : 135px; }
#adminPanel .panel.disabled
{
    background-color: black;
    color: black;
}
#adminPanel .panel.done
{
    background-color: rgb(27, 100, 39);
    color: black;
}
#rightsPanel table input[type="checkbox"] { cursor: pointer; }

/** ONLY DESKTOP **/
@media only screen and (min-device-width: 800px) and (min-width: 800px)
{
    .body.desktop.connected #content { padding-left: 15px; padding-right: 15px; }
    .panel div.infos div.infos-title { font-size: 24px; }
    .panel div.infos div.infos-subtitle { font-size: 18px; }

    #transactions .panel div.wallet-balance, #houseDetail .panel div.asset-amount, #loanDetail .panel div.loan-balance, #budgetDetail .panel div.budget-balance { font-size: 16px; }

    .panel .panel-header .infos { margin-top : 10px; margin-left: 15px; }
    .panel .panel-header .actions { margin-top : 40px; }
    .panel .panel-header .actions button.btn-warning,
    .panel .panel-footer .actions button.btn-warning { color: #000000; font-weight: bold; }
    div.actionButtons { position: fixed; right : 2%; bottom : 3%; }
    div.actionButtons img { width : 72px; height: 72px; }

    .panel .panel-header img.logo { width: 110px; }
    .panel-body div.title { font-size: 18px; }
}

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .body.mobile #content { padding-left: 0; padding-right: 0; }
    div#content.overlay { opacity: 0.1; pointer-events: none; }
    div.panel-detail > div.col { padding-right: 0; margin-top : 15px; }
    #assetsPanel div.panel, #budgetsPanel div.panel { margin-bottom: 8px; }
    #rightsPanel { margin-left: 15px; margin-right: 15px; }
    table tbody td.nowrap, table thead th.nowrap { width: 150px; }
    div.actionButtons { bottom : 6%; }
    div.panel-container h2 { margin-left: 15px; }
    div.panel-container div.row,
    div.panel-detail div.panel-default { margin-left: auto; margin-right: auto; }
    div.panel-detail div.panel-header img.logo { width: 4.8em; }
    div.panel-detail div.panel-header hr.panel-divider { margin-top: 0; }

}

.widget .panel-header
{
    cursor: move;
    font-weight: bold;
    text-align: right;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom : 10px;
    border-bottom: 1px solid #ddd;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #333;
    background-color: #f5f5f5;
    height: 40px;
}

#widgetsMenu .modal-body i.fas
{
    font-size: 25px;
    line-height: 30px;
}

div#dashboardPanel div.no-widgets
{
    font-weight:bold;
    font-size:24px;
    padding-top: 10%;
    text-align: center;
}

.widget .panel-header .header-title
{
    margin-left: 10px;
}

.widget.widget-empty
{
    background-color: transparent;
    border-color: transparent;
}

.widget.widget-add
{
    border: 4px dashed white;
    background-color: transparent;
    color: white;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
    font-size: 45px;
}
.widget.widget-add i { cursor: pointer; }

.widget .portlet-content { padding: 0.4em; }

.portlet-placeholder
{
    border: 1px dotted white;
    margin: 0 1em 1em 0;
    height: 50px;
}

#budgetBalancesWidget #my_budget_savings, #budgetBalancesWidget #common_budget_participation
{
    text-align: center;
    color: #800000;
}
#budgetBalancesWidget #my_budget_savings span, #budgetBalancesWidget #common_budget_participation span
{
    font-weight: bold;
}
#budgetBalancesWidget thead > tr > th { text-align: center; }
#budgetBalancesWidget tbody > tr > td,
#budgetBalancesWidget tfoot > tr > td { color: #000000; }
#budgetBalancesWidget td.green { color: green; font-weight: bold; }
#budgetBalancesWidget td.red { color: brown; font-weight: bold; }

.widget .portlet-content table { width: 100%; }
.widget .portlet-content table tr td:first-child { border-left: 1px solid; }
.widget .portlet-content table tr td { border-right: 1px solid; border-bottom: 1px solid; }
.widget .portlet-content table.no-border tr td { border : none; }
.widget .portlet-content table tr.header
{
    font-weight: bold;
    font-size: 45px;
}
.widget .portlet-content table tr.amount
{
    font-size: 20px;
}
.widget .portlet-content table tr { text-align: center; }


.widget-card {
  position: relative;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 150px;
  margin: 10px 0;
}

.widget-card.selected {
  border: 1px solid #f2a65a;
  background: #fff7ed;
}

.widget-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.widget-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  color: white;
  border-radius: 999px;
  margin-bottom: 10px;
}
.widget-badge.orange { background: #f2a65a; }
.widget-badge.blue { background: #4f8df7; }

.widget-card.selected .widget-check:before { content: "\2713"; }
.widget-card:not(.selected) .widget-check:before { content: ""; }

.widget-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.widget-card.selected .widget-check {
  border: 1px solid #f2a65a;
  background: #f2a65a;
  color: white;
}

.widget-content {
  display: flex;
  gap: 14px;
}

.widget-icon {
  font-size: 28px;
}

.widget-card h3 {
  margin: 0 0 6px 0;
  font-size: 14px;
  font-weight: bold;
}

.widget-card p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

.widget-action {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: #f2a65a;
}

.widget-card.selected .widget-action {
  color: #c77c3d;
}

.selected-action {
  font-weight: 600;
}


/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .widget .header-title { font-size: 12px; }
    .widget .portlet-content { padding: 0.4em 0; }
    .widget .portlet-content table tr.header { font-size: 40px; }
    .widget .portlet-content table tr.amount { font-size: 20px; }
}
#errorPanel
{
    text-align: center;
    margin-top: 50px;
}

#errorPanel .section-title
{
    color: #f1c086;
}

#errorPanel .section-message
{
    font-size: 18px;
    margin-bottom: 50px;
}

div.webview-warning
{
    margin-top: 80px;
    margin-left: 15px;
    margin-right: 15px; 
    text-align: center;
}

.footer
{
    background:#f1c086;
    padding-bottom: 5px;
    padding-top: 5px;
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index : 999;
}
.footer .container { width: 100%; }
.footer .tools { text-align: right; }

.footer button
{
    background-color: transparent;
    margin-top: -5px;
}

.footer button:hover
{
    background-color: #777;
}

/** ONLY DESKTOP **/
@media only screen and (min-device-width: 800px) and (min-width: 800px)
{
    .footer .version { text-align: right; float: right; }
    .footer .copyright { text-align: left; float: left; }
}

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .footer .version { text-align: center; }
    .footer .copyright
    {
        text-align: center;
        font-size: 12px;
        margin-top: 4px;
    }
}
form label { margin: 0 !important; }

.form-control.has-error,
.form-control > .has-error
{
    border-color: #b94a48;
    border-width: 1px;
}

.form-group .toggle-group .toggle-on.btn-default,
.form-group .toggle-group .toggle-off.btn-default { color: black; }

.form-group .toggle.btn
{
    display : block;
}


/*.form-control[disabled] { opacity: 0; }*/
.tooltip-validation + .tooltip > .tooltip-inner {background-color: #f00;}

div.search-filters form
{
    color : #ffffff;
    margin-bottom: 0;
}

div.required-info
{
    color: #FF0000;
    font-weight: bold;
    text-align: left;
}

div.form-group > label
{
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
}

div.datetimepicker > span.input-group-addon
{
    background-color: #f1c086;
    color: black;
    padding-right: 5px;
    cursor: pointer;
}

span.required-info-desc
{
    font-weight: normal;
    font-size: 12px;
}

form div.row
{
    margin-left: 0;
    margin-right: 0;
}
form .row.icons-pool
{
    height : 250px;
    overflow-y: auto;
}
form .row.icons-pool img
{
    cursor: pointer;
    opacity: 0.1;
    border: 1px solid #ddd;
}
form .row.icons-pool img.selected
{
    opacity: 1;
    border: 1px solid black;
}
form .row.icons-pool > div 
{ 
    margin : 10px 20px 0 0; 
    padding-left : 0; 
}

form div.input-group.custom
{
    padding-right: 15px !important;
    padding-left: 15px !important;
}
form div.input-group.amount > input { width: 75%; }
form div.input-group.amount .input-group-addon { width: 25%; margin-left: -1px; }
form select option.header
{
    font-size: 12px;
    color: #777;
    font-weight: bold;
}

form div.input-group-addon.form-control button.dropdown-toggle
{
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
}

form button.btn.input-group-addon.browse
{
    height: 34px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    form div.input-group.amount > input { width: 60%; }
    form div.input-group.amount .input-group-addon { width: 40%; }
    form .row.icons-pool { height: 200px; }
}
div.login { padding-top: 10rem; }

.login a
{
    color: #FF9800;
    text-align: center;
    font-size: 14px;
}

div.login-picture
{
    background-size: cover;
    background-position: center;
    min-height: 100dvh;
}

.login-notifications
{
    border-radius: 5px;
    margin-top: 80px;
    padding: 10px;
    text-align: center;
}

img.z-depth-1-half
{
    -webkit-box-shadow: 0 5px 11px 0 rgb(255 255 255 / 48%), 0 4px 15px 0 rgb(255 255 255 / 35%) !important;
    box-shadow: 0 5px 11px 0 rgb(255 255 255 / 48%), 0 4px 15px 0 rgb(255 255 255 / 35%) !important;
}
img.rounded-circle { border-radius: 50% !important }

.login form > div { margin-bottom: 15px; height: 45px; }
.login input { margin-bottom: 15px; height: 45px; }
div.toggle-password { cursor: pointer; }

.login div.btn-social-networks { text-align: center; }

.login a.btn-google,
.login a.btn-facebook
{
    color: black !important;
    height: 50px;
    text-align: left;
    margin-bottom: 15px;
    margin-top : 100px;
}
.login a.btn-google span,
.login a.btn-facebook span
{
    position : relative;
    top : 5px;
    margin-left: 5px;
}

.login_footer 
{ 
    margin-right: 15px;
    margin-left: 15px;
}
.login_footer div { font-size: 12px; margin-top: 15px; }
.login_footer div.checkbox { color: white; }
.login_footer input[type='checkbox'] { margin-top : 2px; }

#logoutMenu > a { cursor: pointer; }

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    div.login-picture { display: none; }
}

/** ONLY PAD MEDIA **/
@media (min-width: 768px) and (max-width: 1024px) {
    div.login-picture
    {
        height: 750px;
        margin-left: 0;
    }
}

/** ONLY DESKTOP **/
@media only screen and (min-width: 1025px)
{
    div.login 
    { 
        margin-left: 2rem; 
        margin-right: 2rem; 
    }
    .login h1
    {
        display: block;
        color: black;
        text-shadow: 0 0 10px rgba(0,0,0,0.3);
        letter-spacing:1px;
        text-align:center;
        margin-bottom: 35px;
    }

    .login_footer div.checkbox { float: left; margin: 0 !important; }
    .login_footer div.link { float: right; }

    img.avatar
    {
        width: 96px;
        height: 96px;
    }
}
div.pac-container
{
    z-index: 9999;
}

div.map { height: 480px; }
.modal
{
    text-align: center;
    padding: 0!important;
}

.modal-lg { width: 1000px; }

div.modal div.media { color : #f1c086; }

.modal-title
{
    color: black;
    font-weight: bold;
}
.modal .modal-body { margin-top: 10px; }
.modal .modal-body.fit-screen-700
{
    height: 700px;
    overflow: auto;
}

iframe.preview
{
    width: 100%;
    height: 600px;
}

#migrationQueriesForm .modal-body .migration-queries
{
    font-weight: bold;
    color: #f1c086;
    font-size: 12px;
    margin-top : 15px;
}

#actionsMenuWallet .modal-body button,
#actionsMenuLoan .modal-body button,
#actionsMenuDatabase .modal-body button
{
    text-align: left;
    padding-left: 15px;
}

#widgetsMenu .modal-body
{
    overflow-y: auto;
}

.modal:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-dialog
{
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.modal .close
{
    color: black;
    font-weight: normal;
    opacity: 1;
}

.modal-content { background-color: white; }
.modal-backdrop { opacity:0.9 !important; }
.modal-footer
{
    border-top: 2px solid #f1c086 !important;
    text-align: center !important;
}

.modal-footer.infos { color : #777; }

.modal-footer .btn
{
    height: 45px;
    font-weight: 600;
    text-transform: uppercase;
}
.modal-footer .btn.btn-only { background-color: #f1c086; }
.modal-footer .btn.btn-danger
{
    background-color: #d9534f;
    width: 70%;
    color : #ffffff;
    border-color: #333;
}
.modal-footer .btn.btn-two { width: 35%; }
.modal-footer .btn.btn-two.first { background-color: #f1c086; }
.modal-footer .btn.btn-two.second.delete { background-color: #dc3545; color: white; }

.modal-header { border-bottom: 2px solid #f1c086 !important; }

.jconfirm-box { background-color: white !important; border-top-color: #FF9800 !important; text-align: center; }
.jconfirm-box .jconfirm-title,
.jconfirm-box .jconfirm-content { color: #FF9800 !important; }
.jconfirm-box .jconfirm-buttons { float : none !important; }

/** ONLY MOBILE **/
@media only screen and (max-device-width: 800px) and (max-width: 800px)
{
    .modal-dialog { width: -webkit-fill-available; }
    .modal-footer .btn.btn-only { font-size: 12px; }
}
#navigationBar
{
    background-color: white;
    border-style: none;
    border-bottom: 2px solid #FF9800;
}

#navigationBar.navbar-inverse .navbar-toggle .icon-bar { background-color: black; }
#navigationBar.navbar-inverse .navbar-toggle:focus { background-color: white; }

#navigationBar img.profile { width: 24px; height: 24px; }
#navigationBar .logo
{
    padding-top : 8px;
    padding-left: 25px;
}
#navigationBar .logo > a
{
    font-family: cursive, Verdana, Arial, Helvetica, sans-serif;
    color : black;
    font-weight: bold;
    font-size: x-large;
}
#navigationBar .logo > a:hover { text-decoration: none; }
#navigationBar li.dropdown a:focus { background-color: #f1c086; }
#navigationBar.navbar-inverse .navbar-nav>.open>a { background-color: #f1c086; }

#navigationBar #menu-desktop,
#navigationBar #menu-mobile
{
    position: absolute;
    background-color: white;
    right: 0;
}

#navigationBar #menu-desktop ul.nav li,
#navigationBar #menu-mobile ul.nav li { margin: 3px 0; }

#navigationBar .badge-env { margin-top: -20px; background-color: #0000CC; }
#navigationBar.navbar-inverse .navbar-nav>li>a { color : black; }

#navigationBar .divider
{
    margin: auto;
}
#navbar { margin-top : 12px; }

.navbar-nav>li>a 
{  
    padding-top : 10px;
    padding-bottom: 10px;
}

li#logoutMenu > a { color : var(--red) !important; }

/** ONLY DESKTOP **/
@media only screen and (min-device-width: 800px) and (min-width: 800px)
{
    #navigationBar .container { padding-right : 70px; }
    #navigationBar .logo { padding-top : 5px; }
    #navigationBar .logo > a { font-size: x-large; }
    #pagesMenuList.nav.nav-pills { padding-left : 115px; }
    #navigationBar #menu-desktop { position: static; margin-right: 30px; }
    #navigationBar #menu-desktop li#userMenu { margin-left : 100px; }
    #navigationBar.navbar-inverse .navbar-nav>li:hover { background-color: #f1c086; }

    div#menu-mobile { display: none; }
    div#menu-desktop { display: block; }
}

/** ONLY MOBILE **/
@media (max-width: 767px) {
    #navigationBar .logo > a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #navigationBar.navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color : black; }

    div#menu-mobile
    {
        box-shadow : 0 6px 12px rgba(0, 0, 0, 0.175);
        border: 1px solid rgba(0, 0, 0, 0.15);
        width: 100%;
        background-color: #f5fafd !important;
    }

    div#menu-mobile.collapse.in { display: block; }
    div#menu-desktop, div#menu-mobile.collapse { display: none; }
    div#menu-mobile div#mnuAccount { margin-top : 25px; }

    div#menu-mobile ul.navbar-nav
    {
        background-color: white;
        margin: 10px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 8px;
    }

    div#menu-mobile ul.navbar-nav > li
    {
        font-size : 16px;
    }
}


table.signature
{
    vertical-align: -webkit-baseline-middle;
    font-size: large;
    font-family: 'Times New Roman', serif;
}

table.w100 { width: 100%; }

table.signature h2.name
{
    color : #000000;
    margin: 0;
    font-size: 20px;
    font-weight: 600;"
}

table.signature p.title
{
    color : #000000;
    margin: 0;
    font-size: large;
    line-height: 24px;
    font-weight: 500;
}

table.signature td.h30 { height: 30px; }
div.dataTables_info { color: #9d9d9d !important; }
table.dataTable>tbody>tr { border-top: 1px solid white; }
table.dataTable>tbody tr>.sorting_1 { background-color: rgba(241,192,134,0.5); }
table.dataTable td.dataTables_empty { padding-top: 25px; }
table.dataTable { width: 100% !important; }
table.dataTable.no-footer { border-bottom: none; }
table.dataTable tfoot td
{
    padding: 10px 10px 6px 10px;
    border-top: 2px solid #daa520;
    font-size: 20px;
    font-weight: bold;
}
table tfoot td { border-top: 2px solid #dddddd !important; }
table.dataTable tfoot td.total_label
{
    color: black;
    text-align: center;
    background-color: #daa520;
}

.dataTables_wrapper { clear: none; }
.dataTables_filter { margin-bottom: 15px; }
.dataTables_filter input { color: white; }
.dataTables_filter label { color: gray; }
.dataTables_wrapper .dataTables_paginate { color: #fff !important; float : left !important; margin-top: 20px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background-color: #f1c086; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: #fff !important; }

table.table-striped>tbody>tr:not(.group-header)>td { color: gray; }
table>thead>tr>th.center { text-align: center; }
table tbody tr.editable td > a { cursor: pointer; }
table.table-striped>tbody>tr.group-header>td,

table.dataTable tr.total-footer td
{
    background-color: #f0ad4e;
    font-size: 16px;
    font-weight: bold;
    color: black;
}

table.table tbody tr.section td { color: black; }
div.group-header, table.table tbody tr.section
{
    background-color: #f1c086;
    color: black;
    font-size: 16px;
    font-weight: bold;
}

div.group-header
{
    padding: 8px 10px;
    border: 1px solid #ddd;
    margin-bottom: 25px;
}
div.group-header.editable { cursor: pointer; }

.table-responsive.no-overflow { overflow: hidden; }
table .sortable-icon
{
    cursor: pointer;
    text-align: center;
}

div.duplicate, div.missing_category, div.next_payment { float: left; cursor: pointer; }
div.duplicate .box, div.missing_category .box, div.next_payment .box
{
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px 10px 5px 25px;
    border: 2px solid grey;
}
div.duplicate .legend, div.missing_category .legend, div.next_payment .legend
{
    float: left;
    line-height: 40px;
    color: white;
    margin-right: 20px;
}
table tbody tr.missing_category, div.missing_category .box, table tbody tr.next_payment, div.next_payment .box { background-color: rgb(160 82 45 / 33%); }
table tbody tr.duplicate, div.duplicate .box { background-color: rgb(165 42 42 / 60%); }
table tbody tr.balance_month_header { background-color: #f1c086; }
table tbody tr.ambiguous, div.ambiguous .box { background-color: mediumvioletred; }

table.fixed { white-space: nowrap; table-layout: fixed; }
table td { vertical-align: middle !important; }
table td.amount,
table th.amount
{
    text-align: right !important;
    padding-right: 30px !important;
}
table td.checkbox-cell, table th.checkbox-all, table td.attachment { text-align: center !important; }
table td.attachment i { cursor: pointer; }
table th.date, table td.date { width: 0 !important; }
table tbody td.nowrap, table thead th.nowrap
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100px;
}

.table-striped>tbody>tr:nth-of-type(odd) { background-color : #eee; }
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection, 
.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
.cm-fat-cursor { caret-color: transparent; }
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

/**
    Name: IntelliJ IDEA darcula theme
    From IntelliJ IDEA by JetBrains
 */

.cm-s-darcula  { font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, serif;}
.cm-s-darcula.CodeMirror { background: #2B2B2B; color: #A9B7C6; }

.cm-s-darcula span.cm-meta { color: #BBB529; }
.cm-s-darcula span.cm-number { color: #6897BB; }
.cm-s-darcula span.cm-keyword { color: #CC7832; line-height: 1em; font-weight: bold; }
.cm-s-darcula span.cm-def { color: #A9B7C6; font-style: italic; }
.cm-s-darcula span.cm-variable { color: #A9B7C6; }
.cm-s-darcula span.cm-variable-2 { color: #A9B7C6; }
.cm-s-darcula span.cm-variable-3 { color: #9876AA; }
.cm-s-darcula span.cm-type { color: #AABBCC; font-weight: bold; }
.cm-s-darcula span.cm-property { color: #FFC66D; }
.cm-s-darcula span.cm-operator { color: #A9B7C6; }
.cm-s-darcula span.cm-string { color: #6A8759; }
.cm-s-darcula span.cm-string-2 { color: #6A8759; }
.cm-s-darcula span.cm-comment { color: #61A151; font-style: italic; }
.cm-s-darcula span.cm-link { color: #CC7832; }
.cm-s-darcula span.cm-atom { color: #CC7832; }
.cm-s-darcula span.cm-error { color: #BC3F3C; }
.cm-s-darcula span.cm-tag { color: #629755; font-weight: bold; font-style: italic; text-decoration: underline; }
.cm-s-darcula span.cm-attribute { color: #6897bb; }
.cm-s-darcula span.cm-qualifier { color: #6A8759; }
.cm-s-darcula span.cm-bracket { color: #A9B7C6; }
.cm-s-darcula span.cm-builtin { color: #FF9E59; }
.cm-s-darcula span.cm-special { color: #FF9E59; }
.cm-s-darcula span.cm-matchhighlight { color: #FFFFFF; background-color: rgba(50, 89, 48, .7); font-weight: normal;}
.cm-s-darcula span.cm-searching { color: #FFFFFF; background-color: rgba(61, 115, 59, .7); font-weight: normal;}

.cm-s-darcula .CodeMirror-cursor { border-left: 1px solid #A9B7C6; }
.cm-s-darcula .CodeMirror-activeline-background { background: #323232; }
.cm-s-darcula .CodeMirror-gutters { background: #313335; border-right: 1px solid #313335; }
.cm-s-darcula .CodeMirror-guttermarker { color: #FFEE80; }
.cm-s-darcula .CodeMirror-guttermarker-subtle { color: #D0D0D0; }
.cm-s-darcula .CodeMirrir-linenumber { color: #606366; }
.cm-s-darcula .CodeMirror-matchingbracket { background-color: #3B514D; color: #FFEF28 !important; font-weight: bold; }

.cm-s-darcula div.CodeMirror-selected { background: #214283; }

.CodeMirror-hints.darcula {
  font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  color: #9C9E9E;
  background-color: #3B3E3F !important;
}

.CodeMirror-hints.darcula .CodeMirror-hint-active {
  background-color: #494D4E !important;
  color: #9C9E9E !important;
}