/* Base */
td, th {
    padding: 5px;
    font-size: 13px !important; /* revert increased font-size for smaller screens (due to responsiveness introduced in Django 2) */
}

#content h1 {
    margin: 0 0 5px;
}


/* copy-to-clipboard */
.copy-to-clipboard {
    cursor: pointer;
    position: relative;
}

.copy-to-clipboard.copied::after {
    content:  "copied!";
    color: red;
    background: white;
    position: absolute;
    left: 5px;
    top: 2px;
    right: 0;
    bottom:0;
}

/* Header */
#header {
    padding: 6px 10px;
    /*line-height: 30px;*/
    /*height: 31px;*/
}

#branding h1 {
    font-size: 20px;
    font-weight: bold;
}

div .breadcrumbs  {
    padding: 6px 10px;
    font-size: 13px;
}

ul.messagelist {
    margin-left: -30px;
}

ul.messagelist li.warning, ul.messagelist li.success, ul.messagelist li.error, ul.messagelist li.info {
    padding-top: 5px;
    padding-bottom: 5px;
    background-position-y : 8px;
    margin-bottom: 0px;
}

/* Dashboard*/
.dashboard #content h1 {
    display: none;
}

.dashboard #content-related h2 {
    padding: 10px;
    margin-bottom: 10px;
}

.dashboard #content-related h3 {
    margin-bottom: 0px;
}

.dashboard #content-related .actionlist li {
    margin-bottom: 5px;
}

.dashboard #content-related ul {
    margin-top: 8px;
    margin-bottom: 8px;
}

.dashboard #recent-actions-module {
    margin-bottom: 15px;
}

/* Changelist */
.change-list #content {
    padding-left: 10px;
    padding-right: 10px;
}


.change-list #content{
    padding-bottom: 0px;
    padding-top: 10px;
}

@media (min-width: 768px) {
    .change-list .object-tools {
        margin-top: -34px;
    }
}

#changelist #toolbar {
    margin-bottom: 0px !important;
}

#changelist .actions,
#changelist .paginator {
    box-sizing: border-box;
}
/*.change-list .filtered #toolbar,*/
@media (min-width: 768px) {
    .change-list .filtered .results, .change-list .filtered .paginator {
        margin-right: calc(20ch + 10px);
    }
    
    #changelist-filter {
        width: 20ch !important;
        max-width: 20ch;
        margin-left: 10px !important;
    }
}


#changelist-filter li {
    line-height: 14px;
}

.model-vehicle .results .field-vehcode,
.model-vehicle .results .field-imei_link,
.model-deviceinstallation .results .field-imei_link,
.model-vehicleabo .results .field-imei {
    font-variant-numeric: tabular-nums;
}

.model-deviceinstallation .results .field-vehicle_identification_number,
.model-deviceinstallation .results .field-registration_plate,
.model-deviceinstallation .results .field-customer_asset_id,
.model-rfidtag .results .field-id,
.model-rfidtag .results .field-mac_address,
.model-rfidtag .results .field-advertising_name,
.model-rfidtagabo .results .field-tag_tag_id,
.model-tachocompanycard .results .field-card_id
{
    font-family: var(--font-family-monospace) !important;
}

.model-deviceinstallation .results .field-imei_link {
    text-align: right;
}
.model-deviceinstallation .results .field-customer {
    white-space: nowrap;
}

.model-deviceinstallation #changelist-filter details[data-filter-title="user"] li {
    line-height: 1.25rem;
}

/* Change view*/
@media(min-width: 768px) {
    .change-form .form-row {
        padding-top: 7px;
        padding-bottom: 7px;
    }
}

.change-form .aligned label {
    padding-right: 0px;
}

.change-form div.form-row strong {
    margin-left: 5px;
}

@media(min-width: 768px) {
    .change-form div.form-row .flex-container {
        align-items: center;
    }

    .change-form div.form-row .flex-container label {
        align-self: start;
    }
}

.change-form p.date,
.change-form p.datetime input.vDateField {
    margin-left: 7px;
}

.change-form p.datetime input.vDateField,
.change-form p.date input.vDateField,
.change-form p.datetime input.vTimeField {
    width: calc(100% - 17ch);
}

.change-form .module.wide p.datetime {
    margin-left: 0;
}

.change-form table .form-row p {
    margin-top: -2px;
}

.change-form .submit-row {
    flex-direction: row-reverse;
}

.change-form .submit-row .deletelink {
    margin-left: initial;
    margin-right: auto;
}

.change-form .submit-row .default {
    order: -1;
}


.change-form .module.wide .form-row p.file-upload {
    margin-left: 0;
}

.change-form .module.wide .form-row .file-upload input+label {
    display: inline;
}

@media(min-width: 768px) {
    .change-form .module.wide .form-row select + p.help,
    .change-form .module.aligned.wide .form-row select + div.help,
    .change-form .module.wide .form-row textarea + p.help,
    .change-form .module.wide .form-row textarea + div.help {
        margin-left: 200px;
    }

    .change-form form .aligned input.vTimeField,
    .change-form form .aligned input.vDateField {
          width: 9.8em;
    }
}

.change-form .module.wide .form-row p.help {
    padding-left: 0px;
}


.change-form .form-row .related-lookup {
    margin-top: 4px;
}

/* Responsive width form input fields */
.change-form input[type='text'], .change-form input[type='number'], select {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.change-form select+span.select2 {
    width: 100% !important;
}

@media (max-width: 767px) {
    .change-form .flex-container {
        padding-right: 1rem;
    }
}

@media (min-width: 768px) {
    .change-form input[type='text'], .change-form input[type='number'], .change-form select {
        width: 13em;
    }

    .change-form select+span.select2 {
        width: 13em !important;
        min-width: 13em;
    }

    .model-deviceinstallation .select2-dropdown {
        min-width: 32em;
    }
}
/* eind responsive width form input fields */

/* Others */
.actions select {
    width: 18em;
}

#outgoingmessage_form #id_message {
    width: 62em;
}

#outgoingmessage_form input[type='text'], #outgoingmessage_form input[type='number'], #outgoingmessage_form select {
    width: 20em;
}

#outgoingmessage_form label {
    font-weight: normal !important;
    color: #666 !important;
}

.form-row.errors ul.errorlist li {
    margin-left: -3px;
}

.wide.module .form-row.errors ul.errorlist li {
    margin-left: 40px;
}

#deviceinstallationguide_form textarea {
    width: 40em;
}

#change_operator_form label {
    width: 15em;
}

#change_operator_form .helptext {
    font-size: 11px;
    color: red;
    margin-left: .5em;
}

#deviceinstallation_form .form-row.field-description textarea + div.help {
    font-size: 12px;
    color: red;
}

#deviceinstallation_form .form-row .flex-container:first-of-type input  {
    margin-right: 1em;
}

#deviceinstallation_form .form-row .flex-container:first-of-type::after {
    content: attr(data-duplicate-check-message);
    display: block;
    color: orangered;
    font-size: 0.9em;
    font-weight: bold;
}

#deviceinstallation_form .submit-row.compression-in-progress {
    filter: grayscale(100%);
    opacity: 0.9;
    pointer-events: none;
}

.model-vehicle.change-list .field-name {
    max-width: 10rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.model-deviceinstallation.change-list .field-is_swap {
    white-space: nowrap;
}

.model-deviceinstallation.change-list .field-hw_ver {
    white-space: nowrap;
}

.model-vehicle .form-row.field-lifetime_warranty:has(input:checked) ~ div.form-row:has(input)
{
    pointer-events: none;
    opacity: 0.6;
}

#id_ignition_interruption_to_delay_until_vehicle_stop_helptext {
    color: red;
}

body.popup.model-group #changelist-filter {
    display: none;
}