/** general rules **/

div, table  {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, .pure-g {
    background-color: #ecf0f5;
}

hr {
    border-color: #1f72aa;
    background-color: #1f72aa;
    color: #1f72aa;
}


/** containers **/

.container {
    padding: 0.5em;
}

.page_container {
    max-width: 25em;
    display: block;
    margin: 0 auto !important;
}

.page_container_plus {
    max-width: 40em;
    display: block;
    margin: 0 auto !important;
}

.page_form {
    text-align: center;
}

.page_form input, .page_form textarea, .page_form select {
    width: 100%;
    margin-bottom: 1em !important;
}

.page_form input[type=submit] {
    max-width: 6em;
    font-weight: bold;
    padding: 0.75em 0.25em;
    margin-top: 1em !important;
    margin-bottom: 2.5em !important;
}


/** messages **/

.global-message {
    text-align: center;
    font-weight: bold;
    padding: 0.5em 0;
}

.global-message.info {
    background-color: #d9edf7;
    color: #31708f;
    border-bottom: 1px solid #bce8f1;
}

.global-message.error {
    background-color: #f2dede;
    color: #a94442;
    border-bottom: 1px solid #ebccd1;
}


/** top menu **/

.top {
    padding: 1em 1em 0.5em;
    height: 3.5em;
    white-space: nowrap;
}

.top a {
    font-family: 'Source Sans Pro', sans-serif;
}

.top img {
    height: 2em;
}

.top-nav {
    background-color: #1f72aa;
    color: white;
    white-space: nowrap;
    line-height: 2.5em;
    height: 2.5em;
    font-family: Helvetica, sans-serif;
}

.top-nav-partnership{
    background-color: #1f72aa;
    color: white;
}

.top-nav-partnership .pure-menu-link{
    color: white;
}

#menu_toggle {
    color: white;
    text-decoration: none;
    display: block;
    width: 2.5em;
    height: 2.5em;
    text-align: center;
}

#menu_toggle:hover {
    background-color: #367fa9;
}

.top-nav div {
    white-space: nowrap;
}

.right-nav {
    text-align: right;
    white-space: nowrap;
}

.right-nav > div {
    display: inline-block;
    padding: 0 0.75em;
    border-left: 1px solid white;
    text-align: center;
}

.right-nav > div > a {
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
}

.right-nav > div span {
    padding-left: 0.25em;
}

.right-nav div span input {
    background-color: transparent;
    height: 100%;
    border: 1px solid silver;
}

.footer {
    font-size: 0.8em;
    padding: 0.5em;
    margin-top: 1.5em;
}


/** calendar date range **/

.date_range_picker_wrapper {
    display: none;
    position: absolute;
    top: calc(3.5em + 40px);
    right: 3em;
    height: auto;
    line-height: normal;
    border: 1px solid #1f72aa;
    text-align: center;
}

.date_range_picker_wrapper button {
    border: 1px solid #c5c5c5;
    background-color: #1f72aa;
    color: white;
    font-size: 1.2em;
    width: 6em;
    height: 2em;
    font-weight: bold;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    margin: 0.5em auto;
}

.date_range_picker_wrapper > div {
    background-color: white;
}

#picker_group_by_box {
    text-align: left;
    padding: 8px;
}

.hasDatepicker {
    display: inline-block;
}

.ui-icon {
    padding: initial !important;
}


/** menu **/

#menu_panel {
    position: absolute;
    top: 6em;
    left: 0;

    width: 16em;
    z-index: 100;

    background-color: white;
    border-right: 1px solid #268cd0;
    font-family: 'Source Sans Pro', sans-serif;

    display: none;
}

.menu_box {
    width: 100%;
    height: 3em;
    line-height: 2em;
    padding: 0.5em;
    color: #949798;
    border-bottom: 1px solid #268cd0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
}

.menu_box.menu_active {
    border-left: 3px solid #268cd0 !important;
    color: #268cd0 !important;
}

.menu_box i {
    padding: 0 0.2em;
}

.menu_content {
    width: 100%;
    display: none;
    padding: 0.5em;
    border-bottom: 1px solid #268cd0;
    border-left: 3px solid #268cd0;
}

.menu_box:hover {
    color: #268cd0;
    border-left: 3px solid #268cd0;
}

.submenu {
    padding: 0.5em;
    width: 100%;
}


.submenu a {
    display: block;
    color: #949798;
    font-size: 0.9em;
}

.submenu a:hover {
    text-decoration: none;
}

.submenu a:first-child {
    font-weight: bold;
    text-decoration: none;
    font-size: 1em;
}

.submenu.menu_active a:first-child  {
    color: #268cd0 !important;
}


.menu_active {
    color: #268cd0 !important;
}

#menu_integrations_content .submenu a {
    padding: 0.7em;
    text-align: center;
}


#menu_integrations_content .submenu a:first-child {
    padding: 0;
    text-align: left;
}

.submenu-buttons{
    padding-left: 0px !important;
    text-align: left !important;
}

/** links **/

a {
    color: #1f72aa;
    font-size: 0.95em;
}

/** headers **/

h3 {
    font-family: 'Source Sans Pro', sans-serif;
}


/**  Settings menu **/
#settings_panel {
    position: absolute;
    top: 6em;
    right: 0;

    width: 11em;
    z-index: 100;

    background-color: white;
    border-right: 1px solid #268cd0;
    font-family: 'Source Sans Pro', sans-serif;

    display: none;
}

.setting_option{
    width: 100%;
    height: 3em;
    line-height: 2em;
    padding: 0.5em;
    color: #949798;
    border-bottom: 1px solid #268cd0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
}

.setting_option:hover {
    color: #268cd0;
    border-left: 3px solid #268cd0;
}

#general_setting_options{
    width: 100%;
    line-height: 2em;
    padding: 0.5em;
    color: #949798;
    border-bottom: 1px solid #268cd0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
}

#general_setting_options:hover {
    color: #268cd0;
    border-left: 3px solid #268cd0;
}

#general_setting_options form{
    font-size: 0.65em;
}

#general_setting_options button{
    width: 100% !important;
}
/** qbo **/

#qbo_sync_button {
    margin-bottom: 2em;
}

#transaction_details_popup {
    position: fixed;
    width: 620px;
    right: 150px;
    bottom: 200px;
    background-color: white;
    box-shadow: 2px 2px 7px 0px;
}

#transaction_details_popup td {
    text-align: left;
}

#transaction_details_popup .popup_content > .container {
    max-height: 55vh;
    overflow-y: auto;
}


/** utility classes **/

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

.bold { font-weight: bold; }

.nowrap { white-space: nowrap; }


/** printing **/

@media print {
    .top, .top-nav, #menu_panel, .footer {
        display: none;
    }
}

/** pure css buttons **/

.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

/** Coming soon **/
#coming_soon_dialog{
    display: none;
}

/** User photo **/
#user_small_photo{
    width: 15px;
    height: 15px;
}

/** info list. **/
.text-list{
    max-width: 25em;
    display: block;
    margin: 0 auto !important;
    text-align: left;
}

/** group by picker **/
#picker_group_by_box{
    background: rgb(31, 114, 170);
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 3px;
}

#picker_group_by_box select {
  width: 80%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: #fff;
  cursor: pointer;
  background: rgba(0, 172, 214, 0.71);
}


/** base datepickers **/
.base_date_picker{
    border-radius: 10px;
    padding-top: 4px;
}
.base_date_picker_title{
    font-style: italic;
    font-size: 20px;
    font-weight: bold;
    color: white;
}
#picker_today_date{
    background: #68ee64;
}
#picker_today_date .ui-state-active{
    background: #68ee64;
    border: #68ee64;
}
#picker_start_date{
    background: #F39C12;
}
#picker_start_date .ui-state-active{
    background: #F39C12;
    border: #F39C12;
}
#picker_end_date{
    background: #00acd6;
}
#picker_end_date .ui-state-active{
    background: #00acd6;
    border: #00acd6;
}

/** numeric inputs wraper **/

.numeric_input_wraper.active{
    position: relative;
}

.numeric_input_wraper.active input{
    color: transparent;
}

.profit_loss_wraper{
    color: white;
}

.numeric_input_wraper.active::before{
    position: absolute; /* maximize the pseudo-element */
    top: 0px;
    right: 0px;
    left: 0;
    bottom: 0;
    /*color: black;*/
    padding: 3.5px;
    padding-right: 12px;
    background-color: transparent; /* use background-image here */
    content: attr(data-before); /* it needs actual content, an empty space is enough */
}