html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: Arial;
    font-size:14px;
    background:#eeeeee;
    margin:0 auto;
}

.btn {
    background: #3498db;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border:none;
    cursor:pointer;
}

textarea {
    font-family: Arial;
    resize: none;
    width:200px;
    border: none;
    outline: none;
}

.image_button {
    height:26px;
    padding:2px 5px;
    border-radius: 5px;
    border:1px solid black;
    display:inline-flex;
    align-content: center;
    cursor: pointer;
}

.image_button.disabled {
    opacity:0.5;
}

.image_button text {
    margin-left:25px;
}

.image_button img,
.image_button svg {
    width:20px;
    height:20px;
    margin-right:5px;
}

div.panel_back {
    cursor: pointer;
    padding:5px 20px;
    background:#aaaaaa;
}

.btn:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.img-responsive {
    max-width:100%;
}

.img-half {
    max-width: 50%;
}

.img-third {
    max-width: 33%;
}

.fullwidth {
    width: 100%;
}

.img-half-height {
    max-height: 50%;
}

div.container {
    position: absolute;
    width: 100%;
    /*background: #ffffff;*/
    top: 0;
    bottom: 0;
}

div.app-container {
    height:100vh;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 30px auto;
    grid-template-areas:
        "header header"
        "menu content"
}

div.container_header {
    grid-area: header;
}

div.container_header_bar {
    background: #000000;
    height:30px;
    color: #ffffff;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:2em;
}

img.header_menu_icon {
    margin-left:2em;
    max-height:66%;
}

div.header_spacer {
    flex-grow:1;
}

div.header_userinfo {
    margin-right:3em;
    font-style:oblique;
}

div.header_logout {
    cursor:pointer;
}

div.container_content {
    position:relative;
    grid-area:content;
}

div.item_list {
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 10px;
    min-height: 100px;
}

div.item_list_medwidth {
    max-width: 800px;
}

div.item_list_header {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 2px;
    color: #888888;
    font-weight: bold;
}

div.item_noresults {
    font-style: italic;
    margin-top:1em;
}

div.input_heading {
    margin-top:5px;
}

div.input_info {
    font-style:italic;
    font-size:80%;
}

input.time_entry {
    width:100px;
}

input.search_input {
    border:0;
    outline:0;
    box-shadow: none;
    width:200px;
}

input.standard {
    background-color: #fefefe;
    border: 0;
    outline: 0;
    box-shadow: none;
    min-height: 1.25rem;
}

input.standard:focus {
    background-color: #ffffff;
}

.richedit {
    background-color: #fefefe;
    min-height:1.25rem;
    cursor:text;
}

div.standard_heading {
    font-style: italic;
    font-size:80%;
    margin-top:1em;
}

div.field_title_line {
    display: flex;
    margin-left:35px; /* room for item icon */
}

div.field_title {
    font-size: small;
    font-style: oblique;
}

div.content_inset {
    padding: 20px;
    position:absolute;
    right:0px;
    top:0px;
}

/* placeholder */

div.placeholder {
    width: 120px;
    height: 120px;
    padding:10px;
    position: relative;
}

div.placeholder_percent {
    position:absolute;
    left:0px;
    top:0px;
    font-size:25px;
    font-weight:bold;
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

img.placeholder_sweep {
    position: absolute;
    width:100px;
    height:100px;
    animation:placeholder_spin 2s linear infinite;
}

img.sweep_animate {
    animation:placeholder_spin 2s linear infinite;
}

@keyframes placeholder_spin {
    100% {
        transform: rotate(360deg);
    }
}

/* menu */

div.menu {
    background: #0c70b7; /* menu-background */
    color: #ffffff; /* menu-foreground */
    text-align: left;
    padding: 0 0 0 20px;
    grid-area: menu;
}

div.menu_logo {
    padding-right:20px;
    text-align: center;
    margin-top:10px;
    margin-bottom:10px;
}

div.menu_section {
    font-size: 10px;
    color: #bbbbbb;
    margin-top:10px;
}

div.menu_item {
    cursor: pointer;
    height: 30px;
    display: flex;
    align-items: center;
}

div.menu_item img, div.menu_item svg {
    width: 20px;
    height: 20px;
    margin-right: 15px;
}

div.menu_item path, div.menu_item circle, div.menu_item rect {
    fill: white;
    stroke: white;
}

div.menu_item .imgb {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 20px;
    background-repeat: no-repeat;
    background-color: red;
    background-image: url("../images/ic_tracking.png");
    background-blend-mode: multiply;
}

/* page */

div.page {
    background: #ffffff;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: auto;
}

div.text_page {
    min-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

div.page_title {    
    font-size: 30px;
    font-weight: bold;
    margin-bottom:20px;
    margin-top:20px;
}

div.page_title_combo {
    display:flex;
    flex-direction: row;
    align-items: center;
}

div.page_title_fill {
    flex-grow:1;
}

div.page_title_item {
    margin-left:20px;
    margin-right:20px;
}

div.selection_bar {
    margin-bottom:20px;
    margin-top:20px;
}

/* misc */

div.misc_divider {
    border-bottom: 1px solid #eeeeee;
}

/* drag */
div.general_drag_container {
    position: absolute;
    left:0;
    top:0;
    z-index:100;
    background-color: #ffffff;
}

div.general_drag_placeholder {
    border:dashed 1px black;
}

/* general items */

div.general_item {
    padding:5px 0px;
    cursor: pointer;
    position: relative;
    min-height: 41px;
    display:flex;
    flex-direction: row;
    align-items: center;
}

img.general_icon {
    width:25px;
    height:25px;
    margin-right:10px;
}

img.general_item_logo {
    width:25px;
    height:25px;
    margin-right:7px;
    flex-shrink:0;
}

div.general_item_logo {
    position: relative;
    width:25px;
    height:25px;
    margin-right:7px;
    flex-shrink:0;
}

img.general_item_logo_main {
    position: absolute;
    left:0px;
    top:0px;
    width:25px;
    height:25px;
}

img.general_item_logo_sub {
    position: absolute;
    left:10px;
    top:10px;
    width:15px;
    height:15px;
}

div.general_item_content {
    flex-grow: 1;
}

div.general_item_line {
    display:flex;
    flex-wrap: wrap;
}

div.general_item_segment {
    display:flex;
}

div.general_item_action {
    width:35px;
}

img.general_item_action {
    margin-left:7px;
    width:25px;
    height:25px;
}

div.general_detail_expand {
    position: absolute;
    top:0px;
    width:100%;
}

div.general_expand_button {
    background-color: #000000;
    color:#ffffff;
    padding:3px 5px;
    border-radius: 8px;
    margin: 5px auto;
    width: fit-content;
    text-align: center;
    cursor:pointer;
}

img.general_expand_icon {
    width:12px;
}



/* card */

div.card_container {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

div.card {
    position: relative;
    background: #f0f0f0;
    min-width: 320px;
    border-radius: 5px;
    margin:10px;
}

div.card_body {
    padding:0 10px;
}

div.card_section {
    padding:3px 0;
}

div.card_title {
    color: #000000;
    margin: 0 10px;
    padding: 8px 0;
    text-align: left;
    border-bottom: #eeeeee solid 1px;
    font-weight: bold;
    position:relative;
}

div.card_summary {
    height:300px;
    overflow: hidden;
}

div.card_title_right {
    position: absolute;
    right: 0;
    top: 10px;
}

img.card_title_icon {
    max-height: 14px;
    cursor:pointer;
    margin-left:10px;
}

/* overlay */

div.overlay_container {
    grid-area: content;
    background:#eeeeee;
    display: flex;
    flex-direction: column;
}

div.overlay_content {
    flex-grow: 1;
    position: relative;
}

div.overlay_title {
    background:#cccccc;
    display:flex;
    align-items: center;
}

div.overlay_name {
    font-weight: bold;
    padding-left: 10px;
    padding-bottom:10px;
    padding-top:10px;
}

/* filter */

div.panel_selector {
    margin-top:20px;
}

div.filter_bar {
    display: flex;
    flex-wrap: wrap;
    min-width: 300px;
    align-items:flex-start;
    margin-bottom: 20px;
    gap:5px;
}

div.filter_item_button {
    border: solid 1px black;
    border-radius: 12px;
    margin: 0 10px 5px 0;
    padding:3px 10px;
    cursor: pointer;
}

img.filter_arrow {
    margin-left:5px;
    width:15px;
    height:8px;
}

div.filter_item_more {
    color:#bbbbbb;
    border-color:#bbbbbb;
}

/* login */

div.login_bar {
    background: #0c70b7;
    font-size: 2rem;
    height: 3em;
    display: flex;
    align-items: center;
    padding-left:2em;
    position:relative;
    color:#ffffff;
}

div.login_bar img {
    margin-right:1em;
}

/*div.login_screen {
    background:#eeeeee;
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
}*/

img.login_background {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

div.login_area {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

div.login_entryarea {
    background:#fefefe;
    padding:80px 100px;
}

div.login_entryline {
    margin-bottom:20px;
}

div.login_entryline input {
    font-size: 2rem;
    border: 1px solid #cccccc;
    border-style: none none solid none;
    background-color: #fefefe;
    filter: none;
}

div.login_passwordbox {
    margin-top:30px;
}

/* home page */

div.section_shortcut {
    cursor: pointer;
    background:#cccccc;
    padding:10px;
    height: 60px;
    display: flex;
    align-items: center;
    margin-bottom:10px;
    border-radius:5px;
}

div.section_shortcut img, div.section_shortcut svg {
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

div.home_overlay_map {
    width:100%;
    height:100%;
    position:relative;
    z-index:0;  
}

div.home_activity {
    position:relative;
}

div.home_more {
    width:100px;
    height:20px;
    position:absolute;
    right:8px;
    bottom:8px;
    border-radius: 4px;
    background: #cccccc;
    text-align: center;
    font-weight: bold;
    cursor:pointer;
}

div.home_add {
    width:20px;
    height:20px;
    position: absolute;
    left:8px;
    bottom:8px;
    cursor: pointer;
    border-radius: 4px;
    background: #cccccc;
}

div.home_add img {
    margin-left:2px;
    margin-top:2px;
    width:15px;
    height:15px;
}

/* map view */

div.tracking_map {
    width:100%;
    height:100%;
    position:relative;
    z-index:0;
}

div.tracking_item_panel {
    width:150px;
    top:20px;
    bottom:20px;
    position:absolute;
    right:20px;
}

div.tracking_items_background {
    background: #ffffff;
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

div.tracking_item_container {
    padding-top:20px;
}

div.tracking_item {
    position:relative;
    height:40px;
    margin-top:10px;
    margin-left:15px;
    margin-right:15px;
    cursor:pointer;
}

div.tracking_item_icon {
    position:absolute;
    left:0px;
    top:7px;
    width:30px;
    height:30px;
    background-color:red;
    border-radius:2px;
}

div.tracking_item_title {
    font-weight: 600;
    font-size: 1rem;
    position: absolute;
    left: 40px;
    top: 3px;
    right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.tracking_item_name {
    font-size: 0.75rem;
    position: absolute;
    left: 40px;
    top: 25px;
    right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.tracking_info_panel {
    height: 100px;
    left: 20px;
    bottom: 20px;
    position: absolute;
    right: 190px;
}

div.tracking_settings_container {
    position: absolute;
    right: 40px;
    top: 10px;
    text-align:right;
    opacity:0.6;
}

div.tracking_info_container {
    position:relative;
    margin-top:10px;
    margin-left:40px;
    margin-right:40px;
    display:none;
}

div.tracking_info_icon {
    position: absolute;
    left: 0px;
    top: 7px;
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 2px;
}

div.tracking_info_title {
    font-weight: 600;
    font-size: 1rem;
    position: absolute;
    left: 40px;
    top: 3px;
}

div.tracking_info_name {
    font-size: 0.75rem;
    position: absolute;
    left: 40px;
    top: 25px;
    right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span#tracking_info_time {
    color:#888888;
    cursor:pointer;
}

div.tracking_info_info {
    font-size: 0.75rem;
    position: absolute;
    left: 40px;
    top: 47px;
    right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

span#tracking_settings_time {
    padding-right:20px;
}

div#tracking_criteria_dialog {
    background: #ffffff;
    position: absolute;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-75px;
    width: 200px;
    height: 150px;
    border-radius: 5px;
    display:none;
}

button#tracking_criteria_ok {
    position:absolute;
    right:20px;
    bottom:20px;
}

/* site lists */

div.site_item {
    padding: 5px 0px;
    cursor: pointer;
}

div.site_item_name {
    font-weight: bold;
    font-size: 14px;
}

div.site_item_address {
    font-size: 12px;
}

div.site_searching {
    display:flex;
    margin-top:10px;
}

img.site_search {
    position: relative;
    width:20px;
    height:20px;
    margin-right:10px;
}

div#site_search_prompt {
    font-style: italic;
    margin-top:1em;
}

/* runs screen */

div.runs_datepanel {
    margin-bottom:20px;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}

div.runs_calendar {
    margin-right:20px;
}

div.runs_month img {
    width:40px;
    height:40px;
    cursor: pointer;
}

/* site overlay */

div#cSiteMenu {
    margin-top:20px;
}

div.site_overlay {
    grid-area: content;
    background:#eeeeee;
    display: flex;
    flex-direction: column;
    position: relative;
}

div.site_overlay_content {
    flex-grow: 1;
    position: relative;
    overflow: auto;
}

div.site_overlay_wrapper {
    position: absolute;
    top: 35px;
    bottom: 0px;
    overflow: auto;
    display: flex;
}

div.site_overlay_title {
    background:#cccccc;
    display:flex;
    align-items: center;
}

div.site_overlay_name {
    font-weight: bold;
    padding-left: 10px;
    padding-bottom:10px;
    padding-top:10px;
}

div.site_overlay div.item_list {
    margin-top:20px;
}

div.site_overlay_job {
    margin-right:300px;
}

div.site_overlay_map {
    width:100%;
    height:100%;
    position:relative;
    z-index:0;
}

div.site_summary_activity {
    cursor: pointer;
}

div.site_summary_schedule {
    cursor: pointer;
}

div.site_overlay_hit_add {
    margin-top:15px;
}

div.site_overlay_location_map {
    width: 100%;
    height: 400px;
    max-width: 400px;
}

div.site_overlay_map_container {
    width:100%;
    height:100%;
    position:relative;
    z-index:0;
}

div.site_documents_content {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(auto, 420px));
    column-gap:20px;
    row-gap:20px;
    margin-bottom:20px;
}

div.site_documents_upload {
    padding:15px;
    border:2px dashed #888888;
    display:flex;
    justify-content: center;
}

div.site_documents_button {
    cursor:pointer;
    padding:10px;
    border-radius: 5px;
    background-color: #888888;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
    /* set div to just contain text width plus padding */
    display: flex;
    width: auto;
}

div.minicontainer {
    width:300px;
    overflow: auto;
    position:absolute;
    right:0px;
    top:35px;
    bottom:0px;
}

div.miniview {
    border: solid 1px #000000;
    width:300px;
    margin-bottom:10px;
}

div.miniview_header {
    background-color: #cccccc;
    text-align: center;
}

div.site_overlay_minisettings {
    height:40%;
    overflow: auto;
}

div.site_overlay_minihistory {
    height:30%;
    overflow: auto;
}

div.site_documents_button img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

div.document_item {
    background-color: #ffffff;
    padding:10px;
    border-radius: 5px;
}

img.document_item_download {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}

div.document_item_filename {
    width:180px;
    text-overflow: ellipsis;
}

div.document_item_size {
    width:80px;
}

div.document_item_type {
    width:80px;
}

div.document_item_comment {
    font-style: italic;
    max-lines: 2;
    overflow: ellipsis;
}

div.dragover {
    background-color: #ffff00;
}

/* contact page */
span.contact_summary_info_name {
    font-weight:bold;
}

/* job lists */

div#activity_history_box {
    margin-top:10px;
    margin-bottom:20px;
}

div.activity_filter_main {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:10px;
}

div.activity_filter_calendar {
    margin-right:20px;
}

div.job_item {
    padding:5px 0px;
    cursor: pointer;
}

div.job_title {
    font-weight:bold;
    font-size:14px;
}

div.job_info {
    font-size:12px;
    max-height: 12pt;
    overflow: hidden;
}

div.job_full div.job_info {
    max-height: unset;
}

div.job_comments {
    font-size: 12px;
}

div.job_callsign {
    font-size:12px;
}

div.job_detail {
    padding-top: 10px;
    display:grid;
    column-gap: 2em;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

div.job_detail_lines {
    margin-bottom: 10px;
}

div.job_images {
    display: grid;
    column-gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    margin-bottom: 10px;
}

div.job_line {
    position: relative;
    min-height:25px;
}

svg.job_line_icon {
    position: absolute;
    width: 20px;
    height:20px;
}

div.job_line_time {
    position:absolute;
    left:30px;
    width:100px;
}

div.job_line_detail {
    margin-left: 125px;
}

div.job_line_pending {
    font-style: italic;
}

/* job page */
div.jobp_content {
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "left right";
    column-gap: 20px;
}

@media only screen and (max-width:500px) {
    div.jobp_content {
        display: block;
    }
}

div.jobp_content_left {
    grid-area: left;
}

div.jobp_content_right {
    grid-area: right;
}

div.jobp_site_header {
    background-color: #eeeeee;
    border-radius: 5px;
    padding: 10px;
}

div.jobp_site {
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 2px;
    color: #888888;
    font-weight: bold;
}

div.jobp_detail_lines_container {
    margin-top:8px;
    background-color: #f0f0f0;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

div.jobp_notes {
    background-color: #eeeeee;
    border-radius: 5px;
    padding: 10px;
    min-height: 40px;
    max-height: 500px;
    overflow-y: scroll;
}

div.jobp_label {
    font-style: italic;
    font-size:80%;
    margin-top:1em;
}

div.jobp_next_status {
    margin-top: 10px;
}

div.jobp_heading {
    font-style: italic;
    font-size:80%;
    margin-top:1em;
}

div.jobp_workflow_box {
    background-color: #eeeeee;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
}

div.jobp_workflow_header {
    position: relative;
    min-height:20px;
}

svg.jobp_workflow_icon {
    position: absolute;
    width: 20px;
    height:20px;
}

div.jobp_workflow_caption {
    margin-left: 30px;
}

div.jobp_workflow_option {
    position: relative;
    min-height:50px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000000;
    display: flex;
}

svg.jobp_workflowo_icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    left: 10px;
}

div.jobp_workflowo_caption {
    margin-left: 50px;
    flex-grow: 1;
}

div.jobp_workflow_option_phone {
    background-color: #444444;
    padding: 2px 5px;
    color:#ffffff;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom:2px;
    position: relative;
}

img.jobp_workflowp_icon {
    width: 15px;
    height: 15px;
    position:absolute;
    left:10px;
    top:3px;
}

div.jobp_workflowp_caption {
    margin-left:30px;
}

div.jobp_workflow_buttons {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div.jobp_workflow_button {
    position: relative;
    padding:3px 5px;
    border-radius: 5px;
    border: 1px solid #000000;
    margin: 5px auto;
    width: 150px;
    min-height:30px;
    cursor:pointer;
    display:inline-flex;
    align-content: center;
}

svg.jobp_workflowb_icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 5px;
    left: 5px;
}

div.jobp_workflowb_caption {
    margin-left: 30px;
    margin-top:3px;
}

div.jobp_status_options {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div.jobp_status_option {
    width:150px;
    height:100px;
    border-radius: 5px;
    border: 1px solid #000000;
    padding: 10px;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

div.jobp_callsign_container {
    cursor: pointer;
}

div.jobp_callsign_container img {
    width:20px;
}

.jobp_status_icon {
    width:90px;
    height:90px;
    position: absolute;
    top:5px;
    left:5px;
    opacity: 20%;
    left:50px;
}

div.jobp_status_code {
    position: absolute;
    top:10px;
    left:5%;
    font-size:14px;
    font-weight:bold;
    width:90%;
    overflow-wrap: break-word;
}

div.jobp_status_info {
    position: absolute;
    left:5%;
    width:90%;
    bottom:5px;
}

div.jobp_detail_buttons {
    margin-top: 5px;
}

div.jobp_status_detail {
    width:100%;
    border-radius: 5px;
    border: 1px solid #000000;
    padding: 10px;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

svg.jobp_detail_icon {
    position:absolute;
    right:10px;
    top:5px;
    opacity: 20%;
    height:90px;
    width:90px;
}

span.jobp_detail_code {
    font-weight: bold;
}

input.jobp_detail_comment {
    width:80%;
}

/* contact lists */

div.contact_item {
    padding:5px 0px;
    cursor: pointer;
}

div.contact_item_content {
    display: flex;
}

div.contact_item_detail {
    flex-grow: 1;
}

div.contact_item_role_block {
    display:flex;
    flex-wrap:wrap;
}

div.contact_item_alarm_user_container {
    min-width:30px;
    margin-right:8px;
    font-weight: bold;
}

div.contact_item_title {
    font-size:14px;
}

span.contact_item_name {
    font-weight:bold;
}

div.contact_item_numbers {
    display:flex;
    flex-wrap: wrap;
    column-gap:10px;
}

div.contact_item_order {
    width:30px;
    height:30px;
    border:solid 1px black;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:25px;
    cursor:ns-resize;
}

div.contact_call {
    padding:5px 0px;
}

div.contact_call_phone {
    display:flex;
    flex-wrap:wrap;
    column-gap:5px;
    cursor: pointer;
}

img.contact_call_icon {
    width:20px;
    height:20px;
}

/* scan items */

img.scan_attach_present {
    width:30px;
}

div.scan_detail {
    padding-top:5px;
}

div.scan_time {
    margin-right:8px;
}

/* device item */

div.device_item {
    display: flex;
    align-items: center;
}

/* service item */

span.service_item_code {
    font-weight: bold;
}

/* zone/area items */

div.zsubscriber_item {
    margin-top:5px;
}

div.zsubscriber_item_content {
    display:flex;
    flex-wrap:wrap;
    align-content:center;
}

div.zsubscriber_item_content {
    display:flex;
    flex-wrap:wrap;
    align-content:bottom;
}

div.zsubscriber_item_receiver_group {
    font-weight: bold;
    width:100px;
}

div.zsubscriber_item_subscriber {
    font-weight: bold;
    width:80px;
}

div.zsubscriber_item_description {
    font-weight: bold;
    display: flex;
    align-items:flex-end;
}

div.area_item {
    border: solid 1px black;
    border-radius: 4px;
    padding:5px;
    margin-bottom:5px;
    position: relative;
    display:flex;
    align-items: center;
}

div.area_item_container {
    flex-grow: 1;
}

div.area_item_content {
    display:flex;
    min-height:30px;
    align-content: center;
    cursor: pointer;
    padding-left:36px;
}

img.area_item_logo {
    position: absolute;
    top:8px;
    left:8px;
    width:25px;
    height:25px;
}

div.area_item_module {
    width:80px;
    font-weight: bold;
}

div.area_item_area {
    width:80px;
    font-weight: bold;
}

div.area_item_description {
    flex-grow:1;
    font-weight: bold;
    display: flex;
    align-items:flex-end;
}

div.area_item_titles {
    margin-top:10px;
    display:flex;
    background-color: #cccccc;
    padding-right:10px;
}

div.area_item_title_zone {
    margin-left:35px;
    width:80px;
}

div.area_item_title_desc {
    flex-grow:1;
}

div.zone_item {
    padding-top: 2px;
    cursor: pointer;
    position: relative;
    display:flex;
    align-items: center;
}

div.zone_item_select:hover {
    background-color: #ffff44;
}

img.zone_item_logo {
    width:15px;
    height:15px;
    margin-left:6px;
}

div.zone_item_content {
    display:flex;
    margin-left: 14px;
    flex-grow:1;
}

div.zone_inline_edit {
    margin-left:14px;
    border:dashed 1px black;
    margin-bottom: 10px;
    padding: 8px;
}

div.zone_inline_container {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:8px;
}

div.zone_inline_left {
    margin-right:10px;
}

div.zone_item_zone {
    width:80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

div.zone_item_description {
    flex-grow:1;
}

div.zone_item_type {
    width:80px;
    flex-shrink: 0;
}

/* service settings */
div.service_setting_dialog_content {
    margin-top:10px;
}

div.service_setting_container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    column-gap:10px;
    row-gap:10px;
    max-height:500px;
}

div.service_setting_mini {
    overflow-y: auto;
    padding-left: 40px;
}

div.service_setting_item {
    border: solid 1px #888888;
    position:relative;
    margin-bottom:10px;
    margin-right:10px;
    width: 200px;
    min-height:75px;
}

div.service_setting_header {
    background-color: #aaaaaa;
    padding: 5px;
}

div.service_setting_subtitle {
    text-align: center;
    font-size:12px;
}

div.service_setting_title {
    font-weight: bold;
    text-align: center;
}

div.service_setting_edit_title {
    font-weight: bold;
}

div.service_setting_state {
    font-weight: bold;
    text-align: center;
}

div.service_setting_content {
    padding: 5px;
}

img.service_setting_expand {
    width: 20px;
    height: 20px;
    cursor: pointer;
    display:block;
    position:absolute;
    right:5px;
    bottom:5px;
}

img.service_setting_expanded {
    transform: rotate(180deg);
}

div.service_setting_setting {
    margin-bottom:5px;
    cursor: pointer;
}

div.service_setting_label {
    background-color: #cccccc;
    text-align: center;
}

div.service_setting_condition {
    text-align: center;
}

div.service_setting_entries {
    border:solid 1px #aaaaaa;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
}

div.service_setting_future_options {
    display:flex;
    flex-wrap:wrap;
    max-width: 400px;
}

div.service_setting_future_button {
    margin-right:5px;
    margin-bottom: 5px;
}

div.service_setting_valid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom:8px;
}

div.service_setting_options {
    padding: 6px 0;
}

div.service_setting_option {
    display: flex;
}

div.service_setting_code {
    width:50px;
}

/* reset codes */

div.resetcode_item_description {
    width:100px;
    flex-grow:1;
    flex-shrink:1;
}

div.resetcode_item_zone {
    width:80px;
}

div.resetcode_item_reset {
    width:100px;
}

div.resetcode_item_notes {
    font-style: italic;
}

/* notes */

div.notes_item {
    background: #cccccc;
    border-radius: 4px;
    position:relative;
    margin-bottom:10px;
}

div.notes_item_content {
    padding:5px;
    min-height:40px;
}

div.notes_item_buttons {
    position:absolute;
    right:5px;
    top:5px;
}

/* external ids */

div.extid_item {
    display: flex;
    align-items: center;
}

div.extid_item_system {
    width:60px;
}

div.extid_item_system_id {
    width:100px;
    flex-grow: 1;
}

div.extid_item_contact {
    width:100px;
}

/* signal */
div.signal_item_content {
    display:flex;
    flex-wrap:wrap;
    font-size:12px;
}

div.signal_item_time {
    width:120px;
}

div.signal_item_sigevent_container {
    width:200px;
}

span.signal_item_sigevent {
    font-weight: bold;
}

div.signal_item_source {
    width:80px;
}

div.signal_item_client {
    width:200px;
}

div.signal_item_text {
    font-style: italic;
}

/* contact edit */

div.contact_content {
    display: flex;
    flex-wrap: wrap;
}

div.contact_found, div.contact_notfound {
    margin:20px 0;
}

div.contact_roles {

}

div.contact_role_item {
    padding:5px 0px;
    cursor:pointer;
    height:48px;
    width:300px;
    display:flex;
    align-items: center;
}

svg.contact_role_icon {
    margin-right: 10px;
    width:20px;
    height:20px;
}

div.contact_role_info {
    left:30px;
    width: 200px;
}

span.contact_role_code {
    font-weight: bold;
}

/* location lists */

div.location_item {
    padding:5px 0px;
    cursor: pointer;
}

div.location_item_title {
    font-size:14px;
}

span.location_item_name {
    font-weight:bold;
}

/* tag select */

div.tagselect_bAll {
    margin-right:20px;
}

/* location select lists */

div.locselect_selectbox {
    width:20px;
    height:20px;
    margin-right:10px;
}

img.locselect_selected {
    width:20px;
}

div.locselect_item {
    cursor:pointer;
    display: flex;
    margin:5px 0;
}

/* location dialog */

div.location_map {
    width:320px;
    height:320px;
    position: relative;
    z-index: 0;
}

div.location_content_main {
    max-width:300px;
}

/* hit lists */

div.hit_item_title {
    font-size:14px;
}

span.hit_item_type {
    font-weight:bold;
}

/* hit edit */

div.runhit_tasks {
    min-width:300px;
    margin-left:20px;
}

div.runhit_task_buttons {
    max-width: 60%;
    margin-left:20%;
}

div.runhit_edit_bDelete {
    margin-right:15px;
}

div.runhit_content_main {
    max-width:400px;
}

/* hit task items */

span.hittask_item_index {
    font-style: italic;
    font-weight: bold;
}

/* run lists */

div.run_item_title {
    font-size:14px;
}

span.run_item_description {
    font-weight:bold;
}

div.run_item_data {
    display:flex;
    flex-wrap:wrap;
}

div.run_item_alert img {
    width:20px;
    height:20px;
    margin-left:10px;
}

div.run_overlay_dayview_title {
    position:relative;
}

div.run_overlay_dayview_title_minutes {
    position:absolute;
    right:0;
    top:0;
    width:100px;
}

div.run_detail_onsite_header {
    font-style: italic;
}

div.run_detail_req_header {
    font-style: italic;
}

div.run_detail_item_title {
    font-size:14px;
}

span.run_detail_item_description {
    font-weight:bold;
}

span.run_detail_item_late {
    font-weight:bold;
    color:red;
}

div.run_detail_items {
    margin-left:20px;
}

div.run_detail_item_content {
    display:flex;
}

div.run_detail_item {
    flex-grow: 1;
}

div.run_detail_minutes {
    min-width:100px;
    display:flex;
    flex-wrap: wrap;
    flex-shrink: 0;
}

div.run_detail_minutes_text {
    margin-left:10px;
}

div.run_edit_area {
    display:inline-flex;
    border-radius: 5px;
    background-color: #cccccc;
    padding: 5px 10px;
    margin-right:5px;
}

div.run_edit_area_keys {
    font-weight: bold;
}

/* run timeline */

div.runs_timeline_layout {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "content map"
        "content detail";
    height:100%;
    padding-left:30px;
    padding-right:30px;
}

div.runs_timeline_container {
    position:relative;
    width:100%;
    grid-area:content;
    overflow-y: scroll;
}

div.runs_timeline_detail {
    position:relative;
    grid-area:detail;
}

div.runs_timeline_map {
    position:relative;
    grid-area:map;
    width:100%;
    height:100%;
}

div.run_timeline_panel {
    border-top: 1px solid #cccccc;
    position:absolute;
    width:100%;
}

div.run_timeline_panel_alt {
    background-color: #eeeeee;
}

div.run_timeline_panel_time {
    text-align: right;
    font-size:40px;
    color:#dddddd;
}

div.runs_timeline_base_line {
    position:absolute;
    left:0;
    top:0;
    width:30px;
    height:100px;
    border-radius: 5px;
    border:solid 1px #aaaaaa;
}

div.run_timeline_item {
    position: absolute;
    min-height: 25px;
    margin-left:30px;
    cursor:pointer;
}

div.run_timeline_item_content {
    display:flex;
    flex-wrap:wrap;
}

div.run_timeline_item_icons {
    display:flex;
    flex-wrap:wrap;
    margin-left:5px;
}

div.run_timeline_subitem {
    flex:2;
    max-height: 35px;
    text-overflow: ellipsis;
}

img.run_timeline_item_icon {
    width: 20px;
    height:20px;
}

div.run_timeline_item_icon {
    margin-right:5px;
    cursor:pointer;
}

div.run_timeline_item_time {
    /*width:200px; */
    margin-right:10px;
}

div.run_timeline_item_details {
    display: flex;
    flex-wrap: wrap;
}

div.run_timeline_item_more {
    padding-left:5px;
    font-style: italic;
}

div.run_timeline_item_bar {
    position: absolute;
    height: 20px;
    width: 30px;
    border-radius: 5px;
    cursor:pointer;
}

div.run_timeline_item_bar_hit {
    background-color: #6666ff;
    border:solid 1px #5555dd;
}

div.run_timeline_item_bar_job {
    background-color: #ff6666;
    border:solid 1px #dd5555;
}

div.run_timeline_selected {
    background-color: #ffff00;
}

/* run optimise */

div.run_optimise_page {
    display:flex;
    flex-direction: column;
    height:100%;
}

div.run_optimise_selectors {
    display:flex;
    flex-wrap:wrap;
    margin-bottom:20px;
    align-content: center;
    align-items: center;
}

div.run_optimise_timeline {
    flex-grow: 1;
    position: relative;
}

div.run_optimise_timeline_content {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

div.run_optimise_selector_box {
    position:relative;
    border:solid 1px #888888;
    min-height: 90px;
}

/* this title runs up the side of the selector box */
div.run_optimise_selector_title {
    font-weight: bold;
    padding:5px;
    background-color: #cccccc;
    border-bottom: solid 1px #888888;
    position: absolute;
    top:0;
    height:100%;
    width:30px;
}

div.run_optimise_selector_title div.rotate_text {
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

div.run_optimise_selector_box div.run_optimise_selectors {
    margin-left:35px;
}

div.run_selector_item {
    position: relative;
    padding:5px;
    cursor:pointer;
    border-radius: 5px;
    background-color: #cccccc;
    width:180px;
    margin-right:10px;
    margin-top:10px;
}

img.run_selector_item_logo {
    display: block;
    width:20px;
    height:20px;
}

img.run_selector_item_remove {
    display: block;
    width:20px;
    height:20px;
    cursor:pointer;
    position:absolute;
    top:5px;
    right:5px;
}

div.run_selector_item_failed {
    background-color: #aa6666;
}

div.run_selector_item_selected {
    background-color: #ffff00;
}

div.run_selector_item:hover {
    background-color: #ffff44;
}

div.run_selector_item_code {
    font-weight: bold;
}



/* callsign lists */

span.callsign_item_code {
    font-weight: bold;
}

/* officer select */

div.officerselect_content {
    display:grid;
    grid-template-columns:200px auto;
    grid-template-rows:auto minmax(320px,1600px);
    grid-template-areas:
        "current current"
        "list map"
}

@media only screen and (max-width:500px) {
    div.officerselect_content {
        display:block;        
    }
}

div.officerselect_current {
    min-width:300px;
    padding:10px;
    background:#fefefe;
    margin-bottom:10px;
    grid-area:current;
}

div.officerselect_list {
    background:#fefefe;
    margin-bottom:10px;
    padding:10px;
    grid-area:list;
}

div.officerselect_map {
    min-width:320px;
    min-height:320px;
    margin-bottom: 10px;
    grid-area:map;
}

div.officerselect_item_selected {
    background:#ffff00;
}

div.officerselect_item_info {
    font-size: 14px;
}

div.officerselect_item_code {
    font-weight: bold;
}

/* welfare */

div.welfare_list {
    display:flex;
    flex-wrap:wrap;
}

div.welfare_item {
    width:100px;
    height:24px;
    border-radius: 5px;
    position: relative;
    cursor:pointer;
    margin:5px 10px 5px 0;
}

div.welfare_selected {
    border:2px dashed #000000;
}

div.welfare_item_code {
    position:absolute;
    top:3px;
    left:15px;
    width:70px;
    text-align: center;
}

div.welfare_item_description {
    display: none;
}

div.welfare_item svg {
    width:13px;
    height:13px;
}

div.welfare_item_pda {
    position:absolute;
    top:5px;
    left:82px;
}

div.welfare_item_gps {
    position:absolute;
    top:5px;
    left:5px;
}

div.welfare_icon_1 {
    background-image: url(/images/wf_slash.svg)
}

div.welfare_icon_2 {
    background-image: url(/images/wf_cross.svg)
}

input.welfare_comment {
    width:100%;
}

/* reports */

div#page_reports div.item_list {
    margin-top:20px;
}

div.reports_myreport_expand {
    position:relative;
}

div.reportheld_item_heading {
    font-weight:bold;
}

div.reporttemplate_item {
    border-radius: 5px;
    border:1px solid black;
    position: relative;
    width: 300px;
    height: 31px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
}

div.reporttemplate_item img,
div.reporttemplate_item svg {
    margin-left:15px;
    width:25px;
    height:25px;
}

div.reporttemplate_item_title {
    font-weight: bold;
    margin-left:15px;
}

div.reportselect_item {
    border-radius: 5px;
    border:1px solid black;
    position: relative;
    width: 250px;
    height: 31px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
}

div.reportselect_item:hover {
    background-color: #cccccc;
}

div.reportselect_item img,
div.reportselect_item svg {
    margin-left:15px;
    width:25px;
    height:25px;
}

div.reportselect_item_title {
    font-weight: bold;
    margin-left:15px;
}

div.reportselect_header {
    display:flex;
    align-items: center;
}

div.reportselect_header img {
    margin-right:15px;
    width:25px;
    height:25px;
    cursor:pointer;
}

span.reportselect_criteria_title {
    font-weight: bold;
    margin-left:15px;
}

div.reportdest_type {
    border-radius: 5px;
    border:1px solid #cccccc;
    position: relative;
    width: 250px;
    cursor: pointer;
    margin-bottom: 5px;
    color:#aaa;
    /* want content of text input to be grey too */
}

div.reportdest_type input {
    color:#aaa;
    width:220px;
}

div.reportdest_type_heading {
    font-weight: bold;
    margin-left:15px;
}

div.reportdest_type:hover {
    background-color: #cccccc;
}

div.reportdest_type.selected {
    color: #000;
    border:1px solid black;
}

div.reportdest_type.selected input {
    color:#000;
}

div.reportdest_email_section {
    margin-left:15px;
}

div.reportlog_content {
    position: relative;
}

div.reportlog_item_type {
    margin-right:5px;
}

div.reportrun_progress {
    margin-top: 1em;
    margin-bottom: 1em;
}

img.reportrun_icon {
    width:20px;
    height:20px;
    margin-right:10px;
}

div.reportrun_status {
    display:flex;
    align-items: center;
}

div.reportschedule_criteria_section {
    margin-top: 1em;
}

div.reportschedule_bChangeTime {
    margin-bottom: 10px;
}

/* activity */

img.activity_image {
    max-width:90%;
    max-height:300px;
}

/* traffic */

div.ops_content {
    display:grid;
    grid-template-columns: auto 300px;
    grid-template-areas: "traffic welfare";
    column-gap:20px;
}

div.ops_traffic_list_box {
    grid-area:traffic;
}

div.ops_welfare_list_box {
    grid-area:welfare;
}

div#ops_welfare_list {
    display: flex;
    flex-wrap: wrap;
}

@media only screen and (max-width:1000px) {
    div.ops_content {
        display:block;        
    }
}

input.ops_jobsearch {
    width:100px;
}

img.ic_tick {
    width:20px;
    height:20px;
}

div.traffic_item {
    position:relative;
    height:40px;
    margin-bottom: 5px;
    cursor:pointer;
    display:flex;
    align-items:center;
    overflow:hidden;
}

div.traffic_item_bar {
    width:5px;
    height:100%;
    position: absolute;
    background-color:#ff4500;
}

img.traffic_item_logo {
    width:30px;
    height:30px;
    position: absolute;
    left:10px;
}

div.traffic_item_content {
    position: absolute;
    left:50px;
}

div.traffic_field {
    position:absolute;
}

div.traffic_clip {
    overflow:hidden;
}

div.traffic_item {
    position:relative;
}

/* docket */

div.job_docket {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 300px;
    padding-right: 1em;
    padding-left: 1em;
}

div.docket_header {
    width:80%;
    height:40px;
    display:flex;
    align-items:center;
    font-weight:bold;
}

img.docket_logo {
    max-height:80%;
    margin-right:1em;
}

div.docket_line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

div.docket_line_comment {
    flex-grow:1;
}

div.docket_line_value {
    width:80px;
    text-align:right;
}

div.docket_total {
    border-top:2px solid #000000;
    font-weight:bold;
}

div.docket_footer {
    height:30px;
    display:flex;
    justify-content:flex-end;
}

/* job add */
div.job_add_templates {
    display:flex;
    flex-wrap:wrap;
    margin-bottom: 10px;
}

div.job_add_template {
    border-radius: 5px;
    border:1px solid black;
    padding:5px;
    margin-right:10px;
    margin-bottom:10px;
    width:150px;
    height:40px;
    cursor:pointer;
    position:relative;
}

div.job_add_template:hover {
    background-color: #cccccc;
}

svg.job_add_template_icon {
    position:absolute;
    width:20px;
    height:20px;
    left: 5px;
    top: 10px;
}

div.job_add_template_code {
    font-weight: bold;
    position: absolute;
    left: 30px;
    top: 5px;
    width:120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.job_add_template_desc {
    font-style: italic;
    position: absolute;
    left: 30px;
    top: 20px;
    width:120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* mapselect */

div.mapselect_map {
    min-width:320px;
    min-height:320px;
    margin-bottom: 10px;
    grid-area:map;
}

/* stats */

div.stats_graph_container {
    display:flex;
    flex-wrap: wrap;
}

div.stats_donut_count svg {
    height:260px;
}

div.stats_item_count {
    display:flex;
    justify-content: center;
    height:320px;
}

div.stats_item_count svg {
    height:300px;
}

div.graph_key {
    width:150px;
    padding-left:20px;
}

div.graph_key_item {
    display:flex;
    margin-bottom:5px;
}

div.graph_key_title {
    font-size: 12px;
    margin-top:3px;
}

div.stats_heatmap {
    padding-bottom: 20px;
}

div.stats_barlist_count {
    padding-bottom: 20px;
}

div.graph_key_colour {
    width:20px;
    height:20px;
    margin-right:20px;
    flex-shrink:0;
}

div.barlist_item {
    display:flex;
}

div.barlist_item_label {
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
    margin-top:3px;
}

div.barlist_item_bar_container {
    position: relative;
}

div.barlist_item_barleft {
    position:absolute;
    right:0px;
    top:1px;
    background-color: #ff4500;
    height:18px;
}

div.barlist_item_centre {
    background-color: #000000;
    height:20px;
    width:1px;
}

div.barlist_item_barright {
    position:absolute;
    top:1px;
    background-color: #77cc77;
    height:18px;
}

div.barlist_item_valright {
    position:absolute;
    top:1px;
}

div.heatmap_title {
    display: flex;
    height: 20px;
}

div.heatmap_topleft {
    width:80px;
    flex-shrink:0;
}

div.heatmap_colhead {
    width:20px;
    text-align: center;
    border-right:1px solid #888888;
    font-size:0.8em;
}

div.heatmap_item {
    display: flex;
    height: 20px;
}

div.heatmap_rowtitle {
    width:80px;
    padding-right:10px;
    font-size:0.8em;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-shrink: 0;
}

div.heatmap_value {
    width:20px;
    height:20px;
}

/* attachment view */

div.attachment_view {
    display:grid;
    align-items:center;
    justify-items: center;
    cursor:pointer;
}

div.attachment_view img {
    max-width: 95%;
    max-height:95%;
}

/* completion bar */

div.completion_bar {
    border:1px solid #000000;
    width:200px;
    height:20px;
    overflow:hidden;
    position: relative;
}

div.completion_bar_item {
    height:20px;
    position:absolute;
}

/* hit view */

div.hit_view {
    display: grid;
}

/* calendar view */

div.calendarpreview {
    width:300px;
}

div.calendarpreview_cell {
    width:70px;
    height:50px;
    border:solid 1px #cccccc;
    background-color: #eeeeee;
    border-radius: 5px;
    text-align: center;
    cursor:pointer;
}

div.calendarpreview_selected {
    background-color: #ffff00;
}

div.calendarpreview_day {
    margin-top:5px;
    font-size:12px;
}

div.calendarpreview_date {
    font-size:14px;
    font-weight: bold;
    margin-top:5px;
}

div.calendarpreview_gap {
    width:25px;
    height:50px;
}

div.calendarpreview_arrow {
    width:25px;
    height:50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

div.calendarpreview_arrowleft {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 25px 0;
    border-color: transparent #cccccc transparent transparent;
}

div.calendarpreview_arrowright {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #cccccc;
}

div.calendarpreview_days {
    display:flex;
    align-items:center;
}

/* editor view */

div.editor_container {
    display:flex;
    align-items: center;
    justify-content: center;
}

div.editor_content {
    margin:10px 0;
}

div.editor_line_error {
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px;
    padding:10px;
    background-color: #ffffff;
    border-left:1px solid #ff4500;
}

/* puts an underline under field */
div.editor_line_error::before {
    content: '';
    position:absolute;
    width:0;
    height:0;
    bottom:100%;
    left:10px;
    border: .75rem solid transparent;
    border-top:none;
    border-bottom-color:#ffffff;
}

div.editor_dayselect_items {
    display:grid;
    grid-template-columns: repeat(4, 70px);
    grid-template-rows: repeat(2, 35px);
}

div.editor_dayselect_cell {
    background-color: #cccccc;
    width:60px;
    height:30px;
    align-items:center;
    display:flex;
    padding-left: 4px;
    cursor: pointer;
}

div.editor_dayselect_cell input {
    pointer-events: none;
}

div.editor_dateselect_content {
    display:grid;
    grid-template-columns: repeat(7, 45px);
    grid-template-rows: repeat(5, 35px);
}

div.editor_dateselect_cell_base {
    width:42px;
    height:32px;
    align-items:center;
    display:flex;
    padding-left: 6px;
    padding-right: 6px;
}

div.editor_dateselect_cell {
    background-color: #cccccc;
    cursor: pointer;
}

div.editor_dateselect_status {
    width:10px;
    height:22px;
    margin-right:5px;
    position: relative;
    display:flex;
    flex-direction: column-reverse;
    gap:3px;
    flex-wrap: wrap;
}

div.editor_dateselect_dateval {
    text-align: right;
    flex-grow: 1;
}

div.editor_dateselect_selected {
    background-color: #ffff00;
}

div.editor_dateselect_cell:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
}

div.editor_dateselect_status_item {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #999999;
}

div.editor_calendar {
    display:inline-block;
}

div.editor_calendar_monthselect {
    display:flex;
    align-items:center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.editor_calendar_monthbutton {
    display:flex;
    align-items:center;
    margin-left:10px;
    margin-bottom: 0px;
}

div.editor_calendar_month {
    width:6em;
    margin-right:10px;
}

img.editor_calendar_nav {
    display:block;
    width:32px;
    height:32px;
    padding:8px;
    cursor: pointer;
}

img.editor_calendar_nav:hover {
    background-color: #eeeeee;
}

div.editor_calendar_heading {
    display:grid;
    grid-template-columns: repeat(7, 45px);
    grid-template-rows: repeat(1, 20px);
}

div.editor_calendar_header_cell {
    text-align:right;
    width:42px;
    height:20px;
    padding-left: 6px;
    padding-right: 6px;
}

div.calendarmonth_content {
    display:flex;
    align-items:center;
    justify-content: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

div.calendarmonth_months {
    display:grid;
    grid-template-columns: repeat(2, 90px);
    grid-template-rows: repeat(6, 35px);
    margin-right:10px;
}

div.editor_calendarmonth_item {
    background-color: #cccccc;
    width:80px;
    height:30px;
    align-items:center;
    display:flex;
    padding-left: 4px;
    cursor:pointer;
}

div.editor_calendarmonth_item:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.3);
}

div.editor_calendarmonth_item_selected {
    background-color: #ffff00;
}

div.editor_calendarmonth_years {
    width:70px;
    max-height: 80%;
}

div.editor_calendarmonth_year {
    margin-bottom: 5px;
}

div.editor_calendarmonth_content {
    display:flex;
    flex-wrap: wrap;
}

/* listedit */

div.listedit_list {
    min-height: 300px;
}

/* listselect */

div.listselect_line {
    padding: 5px 0px;
    cursor: pointer;
}

div.listselect_multi_item img {
    width:20px;
    height:20px;
    margin-right:10px;
}

div.listselect_multi_item {
    display:flex;
    align-items:center;    
}

div.listselect_list {
    min-height: 300px;
}

div.listselect_add {
    font-style: italic;
}

div.listselect_line:hover {
    background-color: #eeeeee;
}

/* progress */

div.progressdialog_progress_bar {
    width:300px;
    height:20px;
    border:1px solid #000000;
    position:relative;
}

div.progressdialog_progress_fill {
    position:absolute;
    height:100%;
    background-color:#ff4500;
}

img.progressdialog_icon {
    width:20px;
    height:20px;
    margin-right:10px;
}

div.progressdialog_status {
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:30px;
}

/* layout */

div.layout_container {
    margin-top: 10px;
}

div.layout_line {
    margin-bottom:10px;
}

div.layout_line_header {
    font-style:italic;
    font-weight:bold;
    font-size:80%;
}

div.layout_line_description {
    font-style:italic;
    font-size:80%;
}

div.layout_line_value {
    background-color: #fefefe;
    width:280px;
    min-height: 1.25rem;
}

input.layout_line_value {
    background-color: #fefefe;
    border: 0;
    outline: 0;
    box-shadow: none;
    width: 280px;
    min-height: 1.25rem;
}

div.layout_line_password_content {
    display:flex;
    align-items: center;
    font-style: italic;
}

div.layout_line_password {
    display:flex;
    align-items: center;
}

img.layout_line_password_image {
    width:18px;
}

div.password_bSet {
    margin-left:20px;
}

div.layout_line_custom {
    display:flex;
    align-items: center;
}

/* textedit */

input.textedit_text {
    width:100%
}

/* notesedit */
div.notesedit_text {
    width:100%;
    min-height:400px;
}

/* reveal */

div.reveal_button {
    height:26px;
    padding:2px 5px;
    border-radius: 5px;
    border:1px solid black;
    display:inline-flex;
    align-content: center;
    cursor: pointer;
}

.reveal_button text {
    margin-right:25px;
}

.reveal_button img {
    width:20px;
    height:20px;
    margin-left:5px;
}

.reveal_button_open .reveal_icon_closed {
    display:none;
}

.reveal_button_closed .reveal_icon_open {
    display:none;
}

/* dialog */

div.dialog_container {
    position: absolute;
    top:0px;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.8);
}

div.dialog_view {
    background: #f0f0f0;
    min-width: 320px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content 1fr 40px;
    grid-template-areas: 
        "dialog_title"
        "dialog_list"
        "dialog_footer";
    padding: 20px;
    max-height: 90%;
}

div.dialog_view_extended {
    background: #f0f0f0;
    min-width: 320px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: min-content 1fr 40px;
    grid-template-areas: 
        "dialog_title"
        "dialog_list"
        "dialog_footer"
        "dialog_extended";
    padding: 20px;
    max-height: 90%;
}

div.dialog_title {
    grid-area: dialog_title;
    color: #000000;
    text-align: left;
    border-bottom: #eeeeee solid 1px;
    font-weight: bold;
}

div.dialog_content {
    grid-area: dialog_list;
    overflow-y: auto;
    overflow-x: hidden;
}

div.dialog_footer {
    grid-area: dialog_footer;
    color: #000000;
    display: flex;
    align-items: end;
    justify-content: end;
    border-top: #eeeeee solid 1px;
}

div.dialog_footer_spacer {
    flex-grow:1;
}

div.dialog_extended {
    grid-area: dialog_extended;
    color: #000000;
    border-top: #888888 solid 1px;
    padding-top: 10px;
    margin-top:10px;
}

/* popup */

div.popup_container {
    /* change to be centred horizontally, 5 px from top */
    position: absolute;
    top:5px;
    left:50%;
    transform: translateX(-50%);
    max-width:300px;
    padding:10px;
    background: #ddc80b;
    border-radius: 5px;
    display:grid;
    grid-template-columns: auto 30px;
}

div.popup_text {
    color: #000000;
    grid-column: 1;
}

img.popup_close {
    width:20px;
    height:20px;
    cursor:pointer;
    margin-left:10px;
    grid-column: 2;
}

/* richedit */

div.richedit_line {
    position: relative;
    white-space: pre;
    min-height: 1em;
}

div.richedit_line_measure {
    color:transparent;
    background: transparent;
    position:absolute;
    white-space: pre;
}

/* caret */

#caret {
    display: inline-block;
    position: absolute;
    width: 1px;
    background: #000;
}

/* hidden stuff - last */

.hidden {
    display: none;
}

div.hidden {
    display: none;
}

.show_narrow {
    display:none;
}

@media only screen and (max-width:1540px) {
    div.card_container {
        max-width: 1024px;
        grid-template-columns: 1fr 1fr;
    }
}

@media only screen and (max-width:920px) {
    div.card_container {
        grid-template-columns: auto;
    }
}

@media only screen and (max-width:768px) {
    div.app-container {
        grid-template-areas: "header header" "content content"
    }

    div.card_container {
        grid-template-columns: 1fr 1fr;
    }

    div.menu {
        position:absolute;
        top:30px;
        left:0;
        width:200px;
        padding-bottom:40px;
        border-bottom-right-radius:5px;
    }

    .hide_narrow {
        display:none;
    }

    .show_narrow {
        display:block;
    }

    div.login_area {
        width:400px;
    }

    div.login_entryarea {
        padding: 60px 80px;
    }

    div.run_detail_minutes {
        min-width:60px;
        width:60px;
        align-content:flex-start;
    }
    div.run_overlay_dayview_title_minutes {
        width:60px;
    }

}

@media only screen and (max-width:900px) {
    div.card_container {
        grid-template-columns: auto;
        padding-left:10px;
        padding-right:10px;
    }

    div.content_inset {
        position: relative;
        padding:10px;
    }
}

@media only screen and (min-width:1201px) {
    div.site_overlay_job {
        margin-right: 300px;
    }

    div.miniview {
        display:block;
    }
}

@media only screen and (min-width:1600px) {
    div.site_overlay_job {
        margin-right: 600px;
    }

    div.miniview {
        display:block;
    }

    div.minicontainer {
        width:600px;
    }

    div.site_overlay_minisettings {
        position:absolute;
        height:100%;
        left:0px;
        top:0px;
    }

    div.site_overlay_minihistory {
        position:absolute;
        height:100%;
        left:300px;
        top:0px;
    }
}

@media only screen and (max-width:1200px) {
    div.miniview {
        display:none;
    }

    div.site_overlay_job {
        margin-right: 0px;
    }
}


@media only screen and (max-width:400px) {
    div.login_area {
        width: 320px;
        font-size:75%;
    }

    div.login_entryarea {
        padding: 40px 60px;
    }

    div.text_page {
        min-width: 300px;
        padding-left: 10px;
        padding-right: 10px;
    }

    div.runs_timeline_page {
        padding-left: 10px;
        padding-right: 10px;
    }
}