html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    background-color: #fff;
    font-size: 90%;
    min-height: 100vh;
    position: relative;
}
.ubuntu-font-active body {
    font-family: Ubuntu, sans-serif;
}
section {
    margin-bottom: 1em;
}
h1 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: .5em;
}
h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: .4em;
}
h3 {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: .2em;
}
table {
    width: 100%;
}
caption {
    border: 1px solid #d3d7cf;
    border-bottom-width: 0;
    font-weight: bold;
    line-height: 2;
    max-width: 200px;
    padding: 0 1em;
    text-align: left;
}
tfoot {
    text-align: center;
}
tr {
    background-color: #fff;
    border: 1px solid #d3d7cf;
}
tbody tr:hover {
    background-color: #eeeeec;
}
th, td {
    padding: 10px;
}
th {
    background-color: #d3d7cf;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}
dt, dd {
    display: inline;
    line-height: 1.5;
}
dt {
    font-weight: bold;
}
dt::after {
    content: ": ";
}
dd + dt::before {
    content: "\A";
    white-space: pre;
}
dd + dd::before {
    content: ", ";
}
a:link, a:visited {
    color: #204a87;
}
a:hover {
    text-decoration: none;
}
strong {
    font-weight: bold;
}

.success {
    color: #4e9a06;
}
.warning {
    color: #c00;
}
tr.warning {
    background-color: rgba(204, 0, 0, 0.4);
    color: inherit;
}
.td-date {
    white-space: nowrap;
}

.icon {
    background-size: auto calc(100% - 0.5em);
    background-position: .2em 50%;
    background-repeat: no-repeat;
    border: 1px solid #D3D7CF;
    font-size: 1.2em;
    padding: .2em;
    padding-left: 1.5em;
}
.icon-list {
    background-image: url('images/list.svg');
}
.icon-map {
    background-image: url('images/map.svg');
}
.icon-export {
    background-image: url('images/download.svg');
}
.icon-call {
    background-image: url('images/phone.svg');
}
.icon-form {
    background-image: url('images/form.svg');
}
.icon-user {
    background-image: url('images/user.svg');
}
.icon-user-add {
    background-image: url('images/user-plus.svg');
}
.icon-phone-close {
    background-image: url('images/phone-off.svg');
}

.has-sub-nav {
    position: relative;
}
.nav-right ul {
    background-color: #fff;
    border: 1px solid #d3d7cf;
    display: none;
    left: 0;
    position: absolute;
    width: 200px;
    z-index: 1;
}
#notifications-toggle {
    background: #fff;
    border: 0;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #4EA398;
    height: 32px;
    width: 32px;
    padding: 0 2px;
}
#notifications-toggle:active {
    background: linear-gradient(to bottom, #EFEFEF, #fff, #EFEFEF);
    padding-left 4px;
    padding-right: 0px;
}
#notifications-toggle svg {
    color: #55BAAD;
}
#notifications-toggle.active + ul {
    display: block;
}
.nav-right ul li {
    padding: .5em;
}
.notification-unread {
    background: rgba(85, 186, 173, .1);
}

header {
    align-items: stretch;
    background-color: #55BAAD;
    color: #fff;
    display: flex;
    flex-direction: column;
}
header h1 {
    margin-bottom: 0;
    margin-left: 2em;
}
#brand {
    background: #212121 url('/favicon.png') 10px 50% no-repeat;
    background-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 2em;
    padding: 1em 0;
    padding-left: calc(2.4em + 10px);
}
#main-menu {
    background-color: #2F2F2F;
    color: #fff;
    font-weight: bold;
}
#main-menu a {
    border-left: 4px solid transparent;
    color: inherit;
    display: block;
    padding: 15px;
    text-decoration: none;
}
#main-menu a.active, #main-menu a:hover {
    background-color: rgba(0, 0, 0, .1);
    border-left-color: currentColor;
    color: #4EA398;
    position: relative;
}
#main-menu .badge {
    background: #2298F8;
    border-radius: 4px;
    color: #fff;
    float: right;
    margin-top: -.2em;
    padding: .2em .4em;
}
#main-menu a::before {
    background-color: currentColor;
    content: '';
    float: left;
    margin-right: 5px;
    width: 1em;
    height: 1em;
}
#main-menu-dashboard::before {
    mask: url('images/pie-chart.svg') 0 50% / 1em no-repeat;
}
#main-menu-verticals::before {
    mask: url('images/more-vertical.svg') 0 50% / 1em no-repeat;
}
#main-menu-phones::before {
    mask: url('images/phone.svg') 0 50% / 1em no-repeat;
}
#main-menu-calls::before {
    mask: url('images/phone-call.svg') 0 50% / 1em no-repeat;
}
#main-menu-messages::before {
    mask: url('images/message-square.svg') 0 50% / 1em no-repeat;
}
#main-menu-settings::before {
    mask: url('images/settings.svg') 0 50% / 1em no-repeat;
}

main {
    margin: 1em;
}
.form-filter {
    margin-bottom: 1.5em;
    position: relative;
}
.form-filter::before {
    background: #efefef;
    content: "";
    display: block;
    position: absolute;
    left: -1em;
    top: -1em;
    bottom: -1em;
    right: -1em;
    z-index: -1;
}
.form-filter li div div {
    display: inline-block;
}
.form-filter li div div:first-child {
    margin-right: 1em;
}
.form-filter li div div:last-child:after {
    clear: left;
    content: "";
    display: block;
}
.form-filter li > div:not(:first-child) input {
    display: inline-block;
    margin-right: 1em;
}
/*input[maxlength] {
    width: attr(maxlength);
}*/

form:not(.form-filter) {
    /*max-width: 24em;*/
}
legend {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: .5em;
}
input:not([type="checkbox"]), select, textarea {
    border: 2px solid #B7B8B5;
    border-radius: 4px;
    box-shadow: 0 3px #EEF0F1, inset 0 3px #EEF0F1;
    display: block;
    margin-bottom: 1em;
    margin-top: 0.2em;
    padding: 4px;
    /*width: 100%;*/
}
form:not(.form-filter) input:not([type="checkbox"]), form:not(.form-filter) select, form:not(.form-filter) textarea {
    max-width: calc(100% - 2em - 12px);
}
textarea {
    min-height: 100px;
    min-width: 300px;
}
input.input-inlined, select.input-inlined {
    display: inline-block;
    width: auto;
}
input.input-date {
    width: calc(10ch + 12px);
}
input.input-zipcode {
    width: calc(5ch + 12px);
}
input.input-radius {
    width: calc(2ch + 12px);
}
input.input-price {
    width: calc(6ch + 12px);
}
input.input-budget {
    width: calc(8ch + 12px);
}
input.input-time, select.input-time {
    width: calc(6ch + 12px);
}
input:focus, select:focus, textarea:focus {
    border-color: #2298F8;
    box-shadow: 0 3px #EEF0F1, inset 0 3px #94CCF8;
}
input[type="reset"], input[type="submit"] {
    display: inline-block;
    padding: 0.6em;
}
input[type="submit"] {
    background-color: #55BAAD;
    box-shadow: 0 3px #EFEFEF, inset 0 -3px #4EA398;
    border-width: 0;
    color: #fff;
    font-weight: bold;
    margin-top: 1em;
    width: auto;
}
td input:not([type="checkbox"]):not([type="submit"]), td select, td textarea {
    margin-top: 0;
}
.servicearea_radius, .servicearea_list {
    display: none;
}
input[value="radius"]:checked ~ .servicearea_radius,
input[value="list"]:checked ~ .servicearea_list {
    display: block;
}
.servicearea {
    border: 1px solid currentColor;
    margin-bottom: 1em;
    max-width: 100%;
    padding: 1em;
    position: relative;
    width: 40em;
}
.servicearea .delete-item {
    border-bottom: 1px solid currentColor;
    border-left: 1px solid currentColor;
    padding: 1em;
    position: absolute;
    right: 0;
    top: 0;
}
#map {
    height: 70vh;
}
.map-marker {
    background-image: url('map-marker.png');
    cursor: pointer;
    height: 46px;
    width: 26px;
}

.distribution-extra-information:not(:target) {
    display: none;
}
.distribution-extra-information pre {
    font-family: monospace;
    height: 10em;
    overflow: scroll;
}

@media (max-width: 700px) {
    thead {
        display: none;
    }
    tr, td {
        display: block;
    }
    table {
        border-top: 1px solid #d3d7cf;
    }
    tr {
        border-top-width: 0;
    }

    .lead tbody td:nth-child(1):before {
        content: 'Name: ';
    }
    .lead tbody td:nth-child(2):before {
        content: 'City: ';
    }
    .lead tbody td:nth-child(3):before {
        content: 'Date: ';
    }
    .lead tbody td:nth-child(4):before {
        content: 'Source: ';
    }
    .lead tbody td:nth-child(5):before {
        content: 'Sent to: ';
    }
    .lead tbody td:nth-child(6):before {
        content: 'Cost: ';
    }
    .lead tbody td:nth-child(7):before {
        content: 'Income: ';
    }
    .lead tbody td:nth-child(8):before {
        color: #000;
        content: 'revenue: ';
    }
    .lead tbody td:nth-child(9):before {
        content: 'Vertical: ';
    }

    .lead-distribution td:nth-child(1):before {
        content: 'Business name: ';
    }
    .lead-distribution td:nth-child(2):before {
        content: 'Method: ';
    }
    .lead-distribution td:nth-child(3):before {
        content: 'Technical result: ';
    }
    .lead-distribution td:nth-child(4):before {
        content: 'Business result: ';
    }
    .lead-distribution td:nth-child(5):before {
        content: 'Price: ';
    }
    .lead-distribution td:nth-child(6):before {
        content: 'Date: ';
    }
}
@media (min-width: 700px) {
    header {
        align-items: center;
        flex-direction: row;
    }
    #brand {
        width: 200px;
    }
    #main-menu {
        bottom: 0;
        left: 0;
        position: absolute;
        top: 4em;
        width: 200px;
    }
    .nav-right {
        margin-left: auto;
    }
    .nav-right .nav-item {
        display: inline-block;
        margin-right: 2em;
    }
    main {
        clear: both;
        margin-left: calc(200px + 1em);
    }
    .form-filter li {
        float: left;
        margin-right: 1em;
    }
    .th-domain {
        width: 300px;
    }
    .td-sent-to {
        max-width: 200px;
        overflow: hidden;
        white-space: nowrap;
        width: 200px;
    }
    tfoot p {
        display: inline-block;
    }
    tfoot .first_prev {
        margin-right: 20px;
    }
    tfoot .next_last {
        margin-left: 20px;
    }
    .lead-details {
        float: left;
        margin-right: 1em;
        width: 40%;
    }
}