/*
 * Django-listing showcase demo custom SCSS
 */

body {
    background-color: $gray-100;
}

.django-listing {
    background-color: $white;

    &.listing-employeethumbnailslisting,
    &.listing-toolbaremployeethumbnailslisting,
    &.listing-toolbaremployeebigthumbnailslisting {
        background-color: inherit;
    }

}

div.django-listing-container {
    td {
        vertical-align: top;
    }
    div.row-container {
        &.thumbnail {
            display: inline-block;
            width: 160px;
            height: 250px;
            vertical-align: top;
            padding: 0px 10px;
            &:hover {
                background-color: lighten($primary, 30);
            }
            a {
                text-decoration: none;
            }
        }
        &.upload-thumbnail {
            display: inline-block;
            width:160px;
            height:160px;
            vertical-align: top;
            padding: 5px 5px;
            &:hover {
                background-color: $primary;
            }
        }
        &.big-thumbnail {
            display: inline-block;
            width:360px;
            height:440px;
            vertical-align: top;
            padding: 0px 10px;
            a {
                text-decoration: none;
            }
        }
        &.selected div.selection-overlay div.checkbox {
            color: $white;
        }
    }
    div.thumbnail-container {
        padding: 0;
    }
}


div.django-listing-container div.django-listing.div-hover div.row-container:hover,
div.django-listing-container div.django-listing.div-striped div.row-container:nth-of-type(odd):hover,
div.django-listing-container tr:hover {
    background-color: lighten($primary, 30);
}

table.django-listing > tfoot {
    border-top: 2px solid $primary;
}

.django-listing td.col-column12, .django-listing td.col-interests {
    word-wrap: break-word;
    word-break: break-all;
}

.row-container.thumbnail img {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

.row-container.big-thumbnail img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

h1 img {
    padding: 20px 0;
    max-width: 60%;
}

.list-4-cols {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
    list-style: none;
}

h2 {
    font-size: 2rem;
    border-bottom: 2px solid $primary;
    font-weight: bold;
    margin-bottom: 20px;
}

h2 a:hover {
    text-decoration: none;
}

h3 {
    font-size: 1.5em;
    font-weight: bold;
}

h3::before {
    content: '\e848';
    color: $primary;
    font-family: "django_listing";
    margin-right: 6px;
}

h4 {
    font-size: 1.25em;
    text-decoration: underline;
}

code {
    color: darken($primary, 5);
}

a, .page-link {
    color: $primary;
}

a:hover, .page-link:hover {
    color: darken($primary, 5);
}

.page-item.active .page-link  {
    background-color: $primary;
    border-color: $primary;
}

form.listing-form {
    border: 2px solid $primary;
    border-radius: 6px;
    padding: 20px;
}

.django-listing-menu {
    a:hover {
        background-color: darken($primary, 5);
        color: $white;
    }

    td.col-age input {
        width: 52px;
    }

    td.col-address textarea {
        width: 200px;
    }

    td.col-salary input {
        width: 82px;
    }
}

.django-listing-editing td.col-marital_status select {
    width:110px;
    padding-left: 2px;
    padding-right: 0;
}


.listing-selection-menu {
    display: none;
    background-color: $primary;
    color: $white;
    font-size: 20px;
    padding: 4px 20px;
}

a.menu-dropdown {
    color: $white;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: $primary;
}

select option[selected], select option:hover {
    background-color: $primary;
    color: $white;
}

select {
    border-color: $primary;
}

form span.asteriskField {
  color: $primary;
  padding-left: 5px;
}

div.listing-spinner {
    color: $primary;
    font-size: 32px;
}

table.object-popup {
    width: 100%;
    td.section {
        padding-bottom: 5px;
        span {
            text-decoration: none;
            border-bottom: 2px solid $primary;
            display: block;
        }
    }
    th {
        width: 50px;
        white-space: nowrap;
    }
}

table.ref-guide {
    border: 1px solid $gray-600;
    border-collapse: unset;
    border-radius: 8px;
    background-color: $gray-600;

    &.name-desc {
        tr td:last-of-type {
            white-space: inherit;
            font-family: inherit;
            color: inherit;
            word-break: inherit;
        }
    }

    th {
        padding: 4px 10px;
        color: $white;
    }

    tbody {
        background-color: $white;
    }

    tr > td {
        padding: 4px 10px;

        &:first-of-type {
            white-space: pre-wrap;
            font-family: "Courier New", Courier, monospace;
            color: $primary;
            font-weight: bold;
        }

        &:last-of-type {
            white-space: pre-wrap;
            font-family: "Courier New", Courier, monospace;
            color: $primary;
            word-break: break-all;
        }
    }
}

.dropzone .dz-preview {
    .dz-details .dz-size {
        margin-bottom: 2em;
    }
    .dz-details .dz-filename {
        font-size: 9px;
    }
    &.dz-file-preview {
        .dz-image {
            border-radius: 8px;
            background: #999;
            background: linear-gradient(to bottom, $gray-200, $primary);
        }
        .dz-progress {
            &::after {
                content: 'Optimizing...';
                font-size: 14px;
            }
            .dz-progress {
                background: none;
                overflow: initial;
                padding-left: 4px;
            }
        }
    }
}

.form-check-input:checked {
    background-color: $primary;
    border-color: $primary;
}

td.col-gender > div.form-field {
    width: 90px;
}

.group-by-container {
    border: 2px solid $primary;
    background-color: lighten($primary, 35);

    .dual-listbox {
        .dual-listbox__search {
            border-color: $primary;
        }

        .dual-listbox__button {
            background-color: $primary;
        }

        .dual-listbox__title {
            border: none;
        }

        .dual-listbox__available, .dual-listbox__selected {
            border-color: $primary;
        }
    }
}