ca-components 1.0.28 → 1.0.30

package/assets/scss/details_page_ske.scss

@@ -0,0 +1,1951 @@
+@import 'theme/variables.scss';
+
+// Constants
+$color-white-light: #f3f3f3;
+$color-white: $white-2;
+$color-white-dark: #f7f7f7;
+
+$color-gray-light: #b7b7b7;
+$color-gray: $grey;
+$color-gray-dark: $grey-2;
+
+$color-blue-light: #778fbb;
+$color-blue: #5673aa;
+$settings-blue-dark: $bc1;
+$settings-blue-hover: #3551b7;
+
+$font-size11: 11px;
+$font-size12: 12px;
+$font-size14: 14px;
+$font-size18: 18px;
+$font-size20: 20px;
+
+$font-regular: 400;
+$font-medium: 500;
+$font-semibold: 600;
+$font-bold: 700;
+$font-extrabold: 800;
+
+$border-radius: 3px;
+
+$transition: all 0.3s ease-in-out;
+
+p {
+    margin-bottom: 0 !important;
+}
+.desc {
+    &::-moz-selection {
+        color: $color-gray-dark;
+        background: rgb(108, 108, 108, 0.2);
+    }
+    &::selection {
+        color: $color-gray-dark;
+        background: rgb(108, 108, 108, 0.2);
+    }
+}
+
+.details-container-items {
+    display: grid;
+    grid-template-columns: 440px repeat(4, 335px);
+    -moz-column-gap: 12px;
+    column-gap: 12px;
+    row-gap: 12px;
+    padding-bottom: 12px;
+}
+// Common Class
+.details-component {
+    display: grid;
+    grid-auto-flow: column;
+    column-gap: 12px;
+    row-gap: 12px;
+
+    // BODY
+    .truck-wrapper {
+        background-color: $color-white;
+        border-radius: $border-radius;
+        margin-bottom: 8px;
+        width: 440px;
+        height: 226px;
+        p {
+            margin: 0px;
+        }
+
+        .truck-card-top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .truck-card-name {
+                color: $color-gray-dark;
+                font-size: $font-size18;
+                font-weight: $font-medium;
+                position: relative;
+                top: 1px;
+                &::-moz-selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+                &::selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+            }
+        }
+
+        //   // Note
+        .details-page-row-5 {
+            margin-top: 8px;
+        }
+
+        //   // PDF - big
+        .details-page-row-7 {
+            height: 236px;
+            width: 100%;
+            margin: 22px 0px;
+        }
+
+        .show-details {
+            font-size: $font-size12;
+            font-weight: $font-bold;
+            color: $color-blue-light;
+            text-decoration: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+
+            &:hover {
+                transition: $transition;
+                cursor: pointer;
+                text-decoration: underline;
+                color: $color-blue;
+            }
+        }
+    }
+
+    .details-cards {
+        border-radius: 3px;
+        overflow: hidden;
+        width: 440px;
+        background-color: $color-white;
+        padding: 1px 8px 0px 8px;
+
+        &.trailer-details-card {
+            padding: 0px 8px 0px 8px;
+        }
+    }
+}
+.assign-to {
+    position: relative;
+    left: -3px;
+    display: grid;
+    grid-template-columns: 204px 204px;
+    column-gap: 12px;
+    padding: 0 0px;
+    .assign-to-vehicle {
+        svg {
+            width: 55px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            &:hover {
+                path {
+                    fill: $grey-2 !important;
+                }
+            }
+            path {
+                fill: $grey-3;
+            }
+        }
+    }
+    .first {
+        .assign-to-vehicle {
+            svg {
+                display: flex;
+                align-items: center;
+            }
+        }
+        &:hover {
+            .open-modal-icon {
+                display: block;
+                position: relative;
+                bottom: 4px;
+                height: 18px;
+                width: 18px;
+                svg {
+                    cursor: pointer;
+                    &:hover {
+                        path {
+                            fill: $grey-2;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .second {
+        .icon-text-wrapper-cmp {
+            position: relative;
+            top: 1px;
+        }
+        .assign-to-vehicle {
+            svg {
+                display: flex;
+            }
+        }
+        &:hover {
+            .open-modal-icon2 {
+                display: block;
+                height: 18px;
+                width: 18px;
+                position: relative;
+                bottom: 4px;
+                svg {
+                    cursor: pointer;
+                    &:hover {
+                        path {
+                            fill: $grey-2;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .assign-to-item {
+        background-color: $ta-light-grey-5;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+
+        .icon-text-wrapper-cmp {
+            display: flex;
+            align-items: center;
+            padding-left: 6px;
+            margin: 7px 0px;
+        }
+        .semi-tooltip {
+            width: 40px;
+            height: 20px;
+
+            &.typeDetails {
+                width: auto;
+            }
+        }
+        svg {
+            fill: $grey-3;
+            object-fit: fill;
+            height: 20px;
+            width: 55px;
+        }
+        .open-modal-icon {
+            display: none;
+        }
+        .open-modal-icon2 {
+            display: none;
+        }
+        .assign-to-vehicle {
+            margin-right: 6px;
+            position: relative;
+            bottom: 0px;
+
+            &.backImage {
+                margin-right: 0px;
+            }
+        }
+
+        .assign-to-value {
+            font-size: $font-size14;
+            font-weight: $font-medium;
+            color: $ta-black;
+            line-height: 18px;
+            padding: 4px 6px;
+
+            &::-moz-selection {
+                color: $ta-black;
+                background: rgb(66, 66, 66, 0.2);
+            }
+            &::selection {
+                color: $ta-black;
+                background: rgb(66, 66, 66, 0.2);
+            }
+
+            &.inactive-assignTo-value {
+                color: $ta-light-grey-2;
+
+                user-select: none;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+            }
+        }
+        p {
+            margin: 0 !important;
+        }
+    }
+}
+
+.card-container {
+    .card-body-cdl {
+        display: grid;
+        padding: 0px 4px;
+
+        .card-item-name {
+            font-size: 11px;
+            color: $black-2;
+            font-weight: $font-bold;
+            height: 15px;
+            margin-bottom: 2px;
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+        }
+        .card-item-value {
+            font-size: $font-size14;
+            font-weight: 400;
+            color: $black-2;
+            white-space: nowrap;
+            height: 18px;
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+            &:hover {
+                color: $black-2;
+            }
+        }
+        .card-row-issued {
+            display: grid;
+            grid-template-columns: 32px 32px 32px;
+            column-gap: 49px;
+            margin-top: 12px;
+        }
+        .card-row-endor {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
+            gap: 6px;
+            margin-bottom: 4px;
+        }
+        .card-row-progress {
+            margin-top: 8px;
+        }
+
+        .endorsement {
+            margin-top: 12px;
+        }
+    }
+}
+.perfomance {
+    display: flex !important;
+    flex-direction: column;
+
+    .common-template-item-name {
+        font-size: $font-size14 !important;
+        font-weight: $font-semibold !important;
+    }
+    .common-template-item-value {
+        font-size: $font-size18 !important;
+        font-weight: $font-semibold !important;
+    }
+}
+.card-pdf {
+    padding: 0 5px;
+    margin-bottom: 12px;
+
+    &.extended {
+        margin-bottom: 30px;
+    }
+
+    &.disabled {
+        height: 0 !important;
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+}
+
+.status-container {
+    padding-top: 12px;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: -12px !important;
+    .status-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .status-item {
+            height: 18px;
+
+            .p-status {
+                font-size: $font-size14;
+                font-weight: 700;
+                color: $black-2;
+                &::-moz-selection {
+                    color: $black-2;
+                    background: rgb(145, 145, 145, 0.2);
+                }
+                &::selection {
+                    color: $black-2;
+                    background: rgb(145, 145, 145, 0.2);
+                }
+                .note-textarea {
+                    color: $grey-2 !important;
+                    font-weight: 500 !important;
+                    &::-moz-selection {
+                        color: $bw6-2;
+                        background: rgb(108, 108, 108, 0.2);
+                    }
+
+                    &::selection {
+                        color: $bw6-2;
+                        background: rgb(108, 108, 108, 0.2);
+                    }
+
+                    span,
+                    div,
+                    b {
+                        &::-moz-selection {
+                            color: $bw6-2;
+                            background: rgb(108, 108, 108, 0.2);
+                        }
+
+                        &::selection {
+                            color: $bw6-2;
+                            background: rgb(108, 108, 108, 0.2);
+                        }
+                    }
+
+                    font[color='#dadada'] {
+                        &::-moz-selection {
+                            color: rgb(218, 218, 218) !important;
+                            background: rgb(218, 218, 218, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(218, 218, 218) !important;
+                            background: rgb(218, 218, 218, 0.2) !important;
+                        }
+                    }
+
+                    font[color='   $ta-blue-13'] {
+                        &::-moz-selection {
+                            color: rgb(102, 146, 241) !important;
+                            background: rgb(102, 146, 241, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(102, 146, 241) !important;
+                            background: rgb(102, 146, 241, 0.2) !important;
+                        }
+                    }
+
+                    font[color='#56b4ac'] {
+                        &::-moz-selection {
+                            color: rgb(86, 180, 172) !important;
+                            background: rgb(86, 180, 172, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(86, 180, 172) !important;
+                            background: rgb(86, 180, 172, 0.2) !important;
+                        }
+                    }
+
+                    font[color='#e66767'] {
+                        &::-moz-selection {
+                            color: rgb(230, 103, 103) !important;
+                            background: rgb(230, 103, 103, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(230, 103, 103) !important;
+                            background: rgb(230, 103, 103, 0.2) !important;
+                        }
+                    }
+
+                    font[color='#fab15c'] {
+                        &::-moz-selection {
+                            color: rgb(250, 177, 92) !important;
+                            background: rgb(250, 177, 92, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(250, 177, 92) !important;
+                            background: rgb(250, 177, 92, 0.2) !important;
+                        }
+                    }
+
+                    font[color='#b370f0'] {
+                        &::-moz-selection {
+                            color: rgb(179, 112, 240) !important;
+                            background: rgb(179, 112, 240, 0.2) !important;
+                        }
+
+                        &::selection {
+                            color: rgb(179, 112, 240) !important;
+                            background: rgb(179, 112, 240, 0.2) !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .status-items {
+        .item-wrapper {
+            display: grid;
+            grid-template-columns: 119px 137px 78px;
+            grid-column-gap: 45px;
+            align-content: center;
+            justify-content: center;
+
+            .svg-text {
+                display: flex;
+                align-items: center;
+                .employment {
+                    margin-left: 6px;
+                    position: relative;
+                    bottom: -2px;
+                }
+            }
+            .duration {
+                text-align: right;
+            }
+            p {
+                font-size: 14px;
+                font-weight: 400;
+                color: $black-2;
+                white-space: nowrap;
+                &::-moz-selection {
+                    color: $color-gray-dark;
+                    background: rgb(108, 108, 108, 0.2);
+                }
+                &::selection {
+                    color: $color-gray-dark;
+                    background: rgb(108, 108, 108, 0.2);
+                }
+                span {
+                    &::-moz-selection {
+                        color: $color-gray-dark;
+                        background: rgb(108, 108, 108, 0.2);
+                    }
+                    &::selection {
+                        color: $color-gray-dark;
+                        background: rgb(108, 108, 108, 0.2);
+                    }
+                }
+            }
+        }
+    }
+}
+.charts-template {
+    display: grid;
+    grid-template-columns: 215px 1fr;
+    grid-row-gap: 12px;
+    row-gap: 12px;
+    margin-bottom: 12px;
+
+    .charts-template-item {
+        display: flex;
+        flex-direction: column;
+
+        .icon-name-item {
+            display: flex;
+            align-items: baseline;
+            height: 18px;
+            .charts-template-item-name {
+                margin-right: 4px;
+            }
+        }
+        .charts-template-item-name {
+            font-size: 11px;
+            color: $ta-black;
+            font-weight: $font-bold;
+            line-height: 14px;
+
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+        }
+
+        .charts-template-item-value {
+            font-size: $font-size18;
+            font-weight: $font-medium;
+            color: $ta-black;
+            width: 220px;
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+
+            p {
+                &::-moz-selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+                &::selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+            }
+
+            .hidden-svg-eye {
+                margin-left: 6px;
+                position: relative;
+                bottom: 1px;
+            }
+        }
+    }
+}
+.second-progress {
+    margin-bottom: 16px;
+}
+
+.truck-details-wrapper {
+    padding: 0px 12px;
+    .truck {
+        svg {
+            width: 132px;
+            height: 48px;
+        }
+    }
+    .details-header-avatar {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        margin-top: 14px;
+
+        .model-name {
+            flex-direction: column;
+            margin-left: 12px;
+            margin-top: 12px;
+
+            p {
+                font-size: 18px;
+                font-weight: 500;
+                color: $black-2;
+                &::-moz-selection {
+                    color: $color-gray-dark;
+                    background: rgb(108, 108, 108, 0.2);
+                }
+                &::selection {
+                    color: $color-gray-dark;
+                    background: rgb(108, 108, 108, 0.2);
+                }
+            }
+            .svg-wrapper {
+                height: 14px;
+                display: flex;
+                align-items: flex-end;
+                margin-bottom: 2px;
+            }
+            svg {
+                path {
+                    fill: $ta-black;
+                    object-fit: fill;
+                }
+                rect {
+                    fill: $grey-3;
+                }
+            }
+        }
+    }
+    .details-header-data {
+        margin-top: 14px;
+        .details-header-data-item {
+            display: flex;
+            height: 18px;
+            align-items: center;
+            p {
+                font-size: 18px;
+                color: $black-2;
+                font-weight: 400;
+            }
+            .header-text {
+                font-family: Montserrat;
+                font-size: 14px;
+                font-weight: 400;
+                line-height: 18px;
+                text-align: left;
+            }
+        }
+        .second {
+            margin-top: 14px;
+            margin-bottom: 14px;
+            p {
+                font-size: 14px !important;
+                color: $black-2;
+                font-weight: 400;
+                position: relative;
+                bottom: -1px;
+            }
+            // .light-green {
+            //   margin-right: 29px;
+            // }
+            .date {
+                margin-left: 8px !important;
+                position: relative;
+            }
+        }
+    }
+    .color-text {
+        font-family: Montserrat;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 18px;
+        text-align: left;
+    }
+    .vin-text {
+        margin-left: 6px !important;
+        margin-right: 37px;
+        position: relative;
+        bottom: -1px !important;
+    }
+}
+.common-template {
+    display: grid;
+    grid-template-columns: 202px 1fr;
+    row-gap: 12px;
+    //padding: 0 4px;
+    // margin-top: -7px;
+    .common-item-wrapper {
+        display: flex;
+        align-items: center;
+        height: 40px;
+    }
+    .common-template-item {
+        display: flex;
+        flex-direction: column;
+        &::-moz-selection {
+            color: $color-gray-dark;
+            background: rgb(108, 108, 108, 0.2);
+        }
+        &::selection {
+            color: $color-gray-dark;
+            background: rgb(108, 108, 108, 0.2);
+        }
+        .icon-name-item {
+            display: flex;
+            align-items: center;
+            height: 18px;
+            .common-template-item-name {
+                margin-left: 6px;
+            }
+        }
+        .common-template-item-name {
+            font-size: $font-size11;
+            font-weight: $font-semibold;
+            //color: $color-gray-dark;
+            color: $ta-black;
+
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+        }
+
+        .common-template-item-value {
+            font-size: $font-size14;
+            font-weight: 500;
+            //color: $color-gray-dark;
+            color: $ta-black;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(183, 183, 183, 0.2);
+            }
+
+            p {
+                &::-moz-selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+                &::selection {
+                    color: $color-gray-dark;
+                    background: rgb(183, 183, 183, 0.2);
+                }
+            }
+
+            .hidden-svg-eye {
+                margin-left: 6px;
+                position: relative;
+                bottom: 1px;
+            }
+        }
+    }
+}
+
+.divider {
+    margin: 0;
+    height: 2px;
+    width: 100%;
+    border-radius: 1px;
+    background-color: $grey-13;
+}
+
+.card_files_holder {
+    &.active {
+        min-height: 448px;
+    }
+}
+
+.note-cards {
+    .note-body {
+        padding-left: 0px !important;
+        padding-right: 2px !important;
+
+        .note-textarea {
+            color: $grey-2 !important;
+            font-weight: 400 !important;
+            padding-bottom: 12px !important;
+            &::-moz-selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+            &::selection {
+                color: $color-gray-dark;
+                background: rgb(108, 108, 108, 0.2);
+            }
+        }
+    }
+}
+.vin-text {
+    &::-moz-selection {
+        color: $color-gray-dark;
+        background: rgb(108, 108, 108, 0.2);
+    }
+    &::selection {
+        color: $color-gray-dark;
+        background: rgb(108, 108, 108, 0.2);
+    }
+}
+.no-data-driver-details {
+    font-size: 14px;
+    font-weight: 400;
+    color: $grey;
+    &::-moz-selection {
+        color: $grey;
+        background: rgb(183, 183, 183, 0.2);
+    }
+    &::selection {
+        color: $grey;
+        background: rgb(183, 183, 183, 0.2);
+    }
+}
+
+.owner-items {
+    display: flex;
+    align-items: center;
+    height: 18px;
+    .card-icon {
+        display: none;
+        cursor: pointer;
+        margin-left: 6px;
+    }
+    .information-value {
+        font-size: 14px;
+        font-weight: 400;
+        color: $color-gray-dark;
+        margin-left: 6px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        &::-moz-selection {
+            color: $color-gray-dark;
+            background: rgb(108, 108, 108, 0.2);
+        }
+        &::selection {
+            color: $color-gray-dark;
+            background: rgb(108, 108, 108, 0.2);
+        }
+    }
+    &:hover {
+        .card-icon {
+            display: flex;
+        }
+    }
+}
+.copied {
+    .vin-text {
+        animation-duration: 1500ms;
+        animation-name: change;
+    }
+    .information-value {
+        animation-duration: 1500ms;
+        animation-name: change;
+    }
+    .card-icon {
+        svg {
+            path {
+                animation-duration: 1500ms;
+                animation-name: changeSVG;
+                &:hover {
+                    animation-duration: 1500ms;
+                    animation-name: changeSVG;
+                }
+            }
+        }
+    }
+}
+.hide-show {
+    font-size: $font-size14;
+    color: $bc1;
+    font-weight: $font-semibold;
+    margin-left: 6px;
+    cursor: pointer;
+    &::-moz-selection {
+        color: $bc1;
+        background: rgb(83, 107, 194, 0.2);
+    }
+    &::selection {
+        color: $bc1;
+        background: rgb(83, 107, 194, 0.2);
+    }
+    &:hover {
+        color: $primary;
+    }
+}
+.bind-height {
+    max-height: fit-content !important;
+}
+.card-width {
+    width: 335px;
+}
+.icons-details {
+    margin-right: 6px;
+}
+.date-details-svg {
+    margin-left: 29px;
+}
+
+.note-details-holder {
+    padding-right: 6px;
+    padding-left: 3px;
+
+    .note-container {
+        .note-header {
+            &.active {
+                .note-label {
+                    color: $grey-2 !important;
+                }
+            }
+
+            .note_upper_hold {
+                svg {
+                    path {
+                        fill: $grey;
+                    }
+                }
+
+                .rotate {
+                    svg {
+                        path {
+                            fill: $grey-3;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.boldSanVin {
+    font-weight: 800;
+}
+
+/* responsive start */
+
+@media (max-width: 1910px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 440px repeat(4, 320px);
+    }
+
+    .card-width {
+        width: 320px;
+    }
+
+    .repair-details-container {
+        grid-template-columns: 440px 712px 320px 260px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 440px 712px 320px 260px !important;
+    }
+
+    .responsiveHolderRepair {
+        grid-template-columns: 125px 109px 95px 179px 145px !important;
+    }
+
+    .repair-container {
+        width: 712px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 320px !important;
+    }
+
+    .likes-count-container {
+        width: 260px;
+    }
+
+    .repaired-vehicle-container .repair-vehicle-header {
+        grid-template-columns: 37px 55px 50px 46px !important;
+    }
+
+    .repair-items-vehicle {
+        .items-vehicle {
+            grid-template-columns: 50px 79px 52px 66px !important;
+        }
+    }
+
+    app-repair-shop-details-item {
+        .finish-order-cont {
+            .repair-items {
+                .items-header {
+                    &.repair-item-column {
+                        &.responsiveHolderRepair {
+                            grid-template-columns: 85px 35px 110px 95px 325px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .counter-text {
+        padding: 0px 0px 0px 8px !important;
+    }
+
+    .reason-span {
+        display: none;
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .load {
+            width: 712px !important;
+        }
+
+        .contact {
+            width: 320px !important;
+
+            .contact-wrapper {
+                width: 320px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 260px !important;
+        }
+
+        .review-container {
+            width: 260px !important;
+        }
+    }
+}
+
+@media (max-width: 1870px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 440px repeat(4, 300px);
+    }
+
+    .card-width {
+        width: 300px;
+    }
+}
+
+@media (max-width: 1850px) {
+    .repair-details-container {
+        grid-template-columns: 430px 702px 310px 250px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 430px 702px 310px 250px !important;
+    }
+
+    .repair-general-holder {
+        width: 430px;
+    }
+
+    .repair-container {
+        width: 702px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 310px !important;
+    }
+
+    .likes-count-container {
+        width: 250px;
+    }
+
+    .repair-component {
+        height: max-content;
+        .repair-cards {
+            width: 430px !important;
+        }
+    }
+
+    app-repair-shop-details-item {
+        .finish-order-cont {
+            .repair-items {
+                .items-header {
+                    &.repair-item-column {
+                        &.responsiveHolderRepair {
+                            grid-template-columns: 85px 35px 110px 95px 315px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .responsiveHolderRepair {
+        grid-template-columns: 125px 109px 95px 179px 137px !important;
+    }
+
+    .repair-items-vehicle {
+        .items-vehicle {
+            grid-template-columns: 50px 88px 37px 66px !important;
+        }
+    }
+
+    .repaired-vehicle-container .repair-vehicle-header {
+        grid-template-columns: 37px 55px 40px 46px !important;
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .details-header-wrapper {
+            width: 430px !important;
+        }
+
+        .load {
+            width: 702px !important;
+        }
+
+        .contact {
+            width: 310px !important;
+
+            .contact-wrapper {
+                width: 310px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 250px !important;
+        }
+
+        .review-container {
+            width: 250px !important;
+        }
+
+        .credit-perctange {
+            width: 407px !important;
+        }
+    }
+}
+
+@media (max-width: 1820px) {
+    .repair-details-container {
+        grid-template-columns: 420px 692px 300px 240px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 420px 692px 300px 240px !important;
+    }
+
+    .repair-general-holder {
+        width: 420px;
+    }
+
+    .repair-container {
+        width: 692px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 300px !important;
+    }
+
+    .likes-count-container {
+        width: 240px;
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 420px !important;
+        }
+    }
+
+    app-repair-shop-details-item {
+        .finish-order-cont {
+            .repair-items {
+                .items-header {
+                    &.repair-item-column {
+                        &.responsiveHolderRepair {
+                            grid-template-columns: 85px 35px 100px 95px 315px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .responsiveHolderRepair {
+        grid-template-columns: 125px 99px 95px 179px 137px !important;
+    }
+
+    .repair-items-vehicle {
+        .items-vehicle {
+            grid-template-columns: 50px 88px 27px 66px !important;
+        }
+    }
+
+    .repaired-vehicle-container .repair-vehicle-header {
+        grid-template-columns: 37px 55px 29px 46px !important;
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .details-header-wrapper {
+            width: 420px !important;
+        }
+
+        .load {
+            width: 692px !important;
+        }
+
+        .contact {
+            width: 300px !important;
+
+            .contact-wrapper {
+                width: 300px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 240px !important;
+        }
+
+        .review-container {
+            width: 240px !important;
+        }
+
+        .credit-perctange {
+            width: 396px !important;
+        }
+    }
+}
+
+@media (max-width: 1780px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 440px repeat(4, 280px);
+    }
+
+    .card-width {
+        width: 280px;
+    }
+
+    .request-header-container {
+        width: 26px !important;
+        height: 26px !important;
+
+        p {
+            display: none;
+        }
+
+        svg-icon {
+            display: flex !important;
+
+            transition: background 0.2s ease-in;
+
+            &:hover {
+                background: $ta-blue-16 !important;
+
+                svg {
+                    path {
+                        fill: $ta-blue-15;
+                    }
+                }
+            }
+        }
+    }
+
+    .repair-details-container {
+        grid-template-columns: 475px 760px 410px 0px !important;
+    }
+
+    .repair-general-holder {
+        width: 475px;
+    }
+
+    .repair-container {
+        width: 760px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 410px !important;
+        max-width: 410px !important;
+    }
+
+    .likes-count-container {
+        width: 0px;
+    }
+
+    .details-header-wrapper-reapirShop {
+        max-width: 475px !important;
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 475px !important;
+        }
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 475px 760px 410px 0px !important;
+        .repair-component {
+            column-gap: 0px;
+            height: 40px;
+            &.vehicleHolder {
+                grid-row: 1 !important;
+                grid-column: 3 !important;
+                height: fit-content;
+            }
+
+            &.reviewShopHolder {
+                grid-row: 2 !important;
+                grid-column: 3 !important;
+                width: 410px !important;
+            }
+        }
+
+        .review-container {
+            width: 410px !important;
+            max-width: 410px !important;
+        }
+
+        .likes-count-container {
+            display: flex;
+            justify-content: center;
+            width: 410px !important;
+            max-width: 410px !important;
+        }
+    }
+
+    .purchase-template {
+        display: grid;
+        grid-template-columns: repeat(2, 50%) !important;
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .toolbar-general-cmp {
+            max-width: 475px !important;
+        }
+
+        .details-header-wrapper {
+            width: 475px !important;
+            max-width: 475px !important;
+        }
+
+        .load {
+            width: 760px !important;
+        }
+
+        .contact {
+            width: 410px !important;
+
+            .contact-wrapper {
+                width: 410px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 410px !important;
+        }
+
+        .review-container {
+            width: 410px !important;
+        }
+
+        .credit-perctange {
+            width: 450px !important;
+        }
+    }
+}
+
+@media (max-width: 1760px) {
+    .repair-details-container {
+        grid-template-columns: 455px 740px 390px 0px !important;
+    }
+
+    .repair-general-holder {
+        width: 455px;
+    }
+
+    .repair-container {
+        width: 740px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 390px !important;
+        max-width: 390px !important;
+    }
+
+    .likes-count-container {
+        width: 0px;
+    }
+
+    .details-header-wrapper-reapirShop {
+        max-width: 455px !important;
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 455px !important;
+        }
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 455px 740px 390px 0px !important;
+        .repair-component {
+            column-gap: 0px;
+            height: 40px;
+            &.vehicleHolder {
+                grid-row: 1 !important;
+                grid-column: 3 !important;
+                height: fit-content;
+            }
+
+            &.reviewShopHolder {
+                grid-row: 2 !important;
+                grid-column: 3 !important;
+                width: 410px !important;
+            }
+        }
+
+        .review-container {
+            width: 390px !important;
+            max-width: 390px !important;
+        }
+
+        .likes-count-container {
+            display: flex;
+            justify-content: center;
+            width: 390px !important;
+            max-width: 390px !important;
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .toolbar-general-cmp {
+            max-width: 455px !important;
+        }
+
+        .details-header-wrapper {
+            width: 455px !important;
+            max-width: 455px !important;
+        }
+
+        .load {
+            width: 740px !important;
+        }
+
+        .contact {
+            width: 390px !important;
+
+            .contact-wrapper {
+                width: 390px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 390px !important;
+        }
+
+        .review-container {
+            width: 390px !important;
+        }
+
+        .credit-perctange {
+            width: 430px !important;
+        }
+    }
+
+    app-repair-shop-details {
+    }
+}
+
+@media (max-width: 1700px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 420px repeat(4, 270px);
+    }
+
+    .card-width {
+        width: 270px;
+    }
+
+    .cards-item-wrapper-1 {
+        width: 420px;
+    }
+
+    .details-component .details-cards {
+        width: 420px;
+    }
+
+    .repair-details-container {
+        grid-template-columns: 400px 740px 390px 0px !important;
+    }
+
+    .repair-general-holder {
+        width: 400px;
+    }
+
+    .details-header-wrapper-reapirShop {
+        max-width: 400px !important;
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 400px !important;
+        }
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 400px 740px 390px 0px !important;
+    }
+
+    .longText {
+        display: none !important;
+    }
+
+    .shortText {
+        display: block !important;
+    }
+
+    .owner-history-container {
+        .status-container {
+            .item-wrapper {
+                grid-template-columns: 85px 105px 92px !important;
+            }
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .details-header-wrapper {
+            width: 400px !important;
+        }
+
+        .credit-perctange {
+            width: 377px !important;
+        }
+    }
+
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 400px repeat(4, 270px);
+    }
+
+    .details-component .details-cards {
+        width: 400px;
+    }
+
+    .cards-item-wrapper-1 {
+        width: 400px;
+    }
+
+    .assign-to {
+        grid-template-columns: 185px 185px;
+    }
+}
+
+@media (max-width: 1640px) {
+    .repair-details-container {
+        grid-template-columns: 400px 720px 370px 0px !important;
+    }
+
+    .repair-container {
+        width: 720px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 370px !important;
+        max-width: 370px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 400px 720px 370px 0px !important;
+        .repair-component {
+            &.reviewShopHolder {
+                grid-row: 2 !important;
+                grid-column: 3 !important;
+                width: 370px !important;
+            }
+        }
+
+        .review-container {
+            width: 370px !important;
+            max-width: 370px !important;
+        }
+
+        .likes-count-container {
+            width: 370px !important;
+            max-width: 370px !important;
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .load {
+            width: 720px !important;
+        }
+
+        .contact {
+            width: 370px !important;
+
+            .contact-wrapper {
+                width: 370px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 370px !important;
+        }
+
+        .review-container {
+            width: 370px !important;
+        }
+    }
+}
+
+@media (max-width: 1610px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 380px repeat(4, 270px);
+    }
+
+    .details-component .details-cards {
+        width: 380px;
+    }
+
+    .cards-item-wrapper-1 {
+        width: 380px;
+    }
+
+    .assign-to {
+        grid-template-columns: 175px 175px;
+    }
+
+    .repair-details-container {
+        grid-template-columns: 380px 710px 350px 0px !important;
+    }
+
+    .repair-container {
+        width: 710px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 350px !important;
+        max-width: 350px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 380px 710px 350px 0px !important;
+        .repair-component {
+            &.reviewShopHolder {
+                grid-row: 2 !important;
+                grid-column: 3 !important;
+                width: 350px !important;
+            }
+        }
+
+        .review-container {
+            width: 350px !important;
+            max-width: 350px !important;
+        }
+
+        .likes-count-container {
+            width: 350px !important;
+            max-width: 350px !important;
+        }
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 380px !important;
+        }
+    }
+
+    .owner-history-container {
+        .status-container {
+            .item-wrapper {
+                grid-template-columns: 85px 86px 92px !important;
+            }
+        }
+    }
+
+    app-shipper-details-card {
+        .hours-template {
+            grid-template-columns: 150px 150px !important;
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .toolbar-general-cmp {
+            max-width: 455px !important;
+        }
+
+        .details-header-wrapper {
+            width: 380px !important;
+        }
+
+        .load {
+            width: 710px !important;
+        }
+
+        .contact {
+            width: 350px !important;
+
+            .contact-wrapper {
+                width: 350px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 350px !important;
+        }
+
+        .review-container {
+            width: 350px !important;
+        }
+
+        .credit-perctange {
+            width: 356px !important;
+        }
+    }
+}
+
+@media (max-width: 1590px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 360px repeat(4, 260px);
+    }
+
+    .details-component .details-cards {
+        width: 360px;
+    }
+
+    .cards-item-wrapper-1 {
+        width: 360px;
+    }
+
+    .card-width {
+        width: 260px;
+    }
+
+    .reason-span {
+        display: none;
+    }
+
+    .assign-to {
+        grid-template-columns: 162px 162px;
+    }
+
+    .repair-details-container {
+        grid-template-columns: 360px 710px 350px 0px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 360px 710px 350px 0px !important;
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 360px !important;
+        }
+    }
+
+    .owner-history-container {
+        .status-container {
+            .item-wrapper {
+                grid-template-columns: 85px 91px 70px !important;
+            }
+        }
+    }
+
+    app-shipper-details-card {
+        .hours-template {
+            grid-template-columns: 140px 140px !important;
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .details-header-wrapper {
+            width: 360px !important;
+        }
+
+        .load {
+            width: 710px !important;
+        }
+
+        .contact {
+            width: 350px !important;
+
+            .contact-wrapper {
+                width: 350px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 350px !important;
+        }
+
+        .review-container {
+            width: 350px !important;
+        }
+
+        .credit-perctange {
+            width: 336px !important;
+        }
+    }
+
+    app-repair-shop-details {
+    }
+}
+
+@media (max-width: 1440px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 360px repeat(4, 250px);
+    }
+
+    .card-width {
+        width: 250px;
+    }
+
+    .repair-details-container {
+        grid-template-columns: 360px 700px 272px 0px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 360px 700px 272px 0px !important;
+    }
+
+    .repair-container {
+        width: 700px !important;
+    }
+
+    .repaired-vehicle-container {
+        width: 272 !important;
+        max-width: 272px !important;
+    }
+
+    .repair-details-cmp {
+        grid-template-columns: 360px 700px 272px 0px !important;
+        .repair-component {
+            &.reviewShopHolder {
+                width: 272px !important;
+            }
+        }
+
+        .review-container {
+            width: 272px !important;
+            max-width: 272px !important;
+        }
+
+        .likes-count-container {
+            width: 272px !important;
+            max-width: 272px !important;
+        }
+    }
+
+    .repair-component {
+        .repair-cards {
+            width: 360px !important;
+        }
+    }
+
+    .repaired-vehicle-container {
+        .repair-vehicle-header {
+            grid-template-columns: 35px 40px 25px 35px !important;
+        }
+    }
+
+    .repair-items-vehicle {
+        .items-vehicle {
+            grid-template-columns: 45px 68px 27px 66px !important;
+        }
+    }
+
+    app-shipper-details,
+    app-broker-details {
+        .details-header-wrapper {
+            width: 360px !important;
+        }
+
+        .load {
+            width: 700px !important;
+        }
+
+        .contact {
+            width: 272px !important;
+
+            .contact-wrapper {
+                width: 272px !important;
+            }
+        }
+
+        .likes-count-container {
+            width: 272px !important;
+        }
+
+        .review-container {
+            width: 272px !important;
+        }
+    }
+}
+
+@media (max-width: 1500px) {
+    .details-container-items {
+        display: grid;
+        grid-template-columns: 360px repeat(4, 237px);
+    }
+
+    .card-width {
+        width: 237px;
+    }
+}