﻿
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans',sans-serif;
    padding: 0px !important;
    margin: 0px !important;
    box-sizing: border-box;
}


/*caraousel css*/
.carousel-item img {
    width: 100% !important;
    height: auto;
    object-fit: contain;
}
div.carousel-inner {
    width: 90%;
    height:100%;
    margin: auto;
}

.carousel-indicators li {
    background-color: lightgreen !important;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}

.carousel-indicators .active {
    background-color: darkgreen;
}

.carousel-indicators li, .carousel-indicators li.active {
    width: 1px !important;
    height: 1px !important;
    padding: 5px !important;
    margin: 1px !important;
}

carousel-indicators {
    margin-bottom: 10px !important;
}

.carousel-indicators li {
    background-color: transparent;
    border: 1px solid #333;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
/*carausel css end*/
/* dev 07 todo add style for table sorting pointer */

#headerSkyAd{
height:60px;
width:600px;
}

textarea.form-control {
    font-weight: 600 !important;
}

#spanSRV {
    font-size: 20px;
}

.close {
    opacity: 1;
}

.marginRight10x {
    margin-right: 10px;
}

.visibility {
    position: absolute;
    right: 5%;
    top: 11%;
    z-index: 11;
    cursor: pointer;
}

p.heading-top {
    color: #4d555ef7;
    font-size: 22px;
    letter-spacing: 0.3px;
}

.main-container-box {
    height: 100%;
    background: linear-gradient(99deg, #00a6ce, #009d03a1 65%), white;
    background-size: 100% 50%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reset-box {
    background-color: white;
    padding: 35px 45px;
    max-width: 39%;
    padding-bottom: 20px;
    box-shadow: 0 3px 45px 4px rgba(0, 0, 0, 0.15);
}

.btn:focus {
    color: #ffff;
}

.reset-box label {
    font-weight: normal;
}

input {
    border-radius: 2px !important;
}

div.setNewPasswordPage .input-group-append, div.resetPasswordPage .input-group-append {
    position: absolute;
    right: 4%;
    top: 15%;
    z-index: 10;
    cursor: pointer;
}

input, select, textarea.select2-search__field, span, textarea {
    max-width: none !important;
    cursor: pointer;
}

    span.required-field {
        color: red;
        margin-left: 3px;
        font-size: 18px;
    }

.btn-submit-rma {
    background: #00a6ce;
    color: #fff;
}

.sidebar-ul a {
    color: #fff;
}

table img {
    width: 12px;
    margin-left: 2px;
}

.sidebar-ul li:hover {
    background: #86d7eb;
    border-top: 1px solid #9be8ebd1;
    border-bottom: 1px solid #9be8ebd1;
}

.sidebar-ul a:hover {
    text-decoration: none;
}

.date-picker-range, .dropdown-icon {
    position: absolute;
    cursor: pointer;
    right: 5px;
    z-index: 4;
    top: 5px;
    background: #fff;
}

.header_container header {
    color: #000;
    font-size: large;
    /* todo 415364 */
}

.headerContent p {
    color: #000000a6;
    font-size: large;
    font-weight: 600;
}

.main_container_box > .row:first-child {
    margin: 0px !important;
}

.input-group-append {
    position: absolute;
    right: 4%;
    top: 9%;
    z-index: 10;
    cursor: pointer;
}
/*Bootstrap modal popup*/
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content {
    margin: auto;
    padding: 40px;
    text-align: center;
    border-radius: 13px;
}
/*Css For Advertisement*/
/*css for top advertisement*/
.advertisement {
    display: flex;
    align-items: center;
    background-color: #333;
    color: #fff;
    font-family: Arial, sans-serif;
    width: 60%;
}

    .advertisement .image-container {
        flex: 0 0 auto;
        height: 100%;
        background: #00a6ce;
        padding: 5px;
    }

.details {
    font-size: 13px;
}

.advertisement .image-container img {
    width: 50px;
    height: auto;
}

.advertisement .details {
    flex: 1 1 auto;
    padding-left: 10px;
}

    .advertisement .details .name {
        font-weight: bold;
    }

    .advertisement .details .features {
        margin-bottom: 5px;
        font-size: 12px;
    }

.advertisement .contact {
    flex: 0 0 auto;
    padding-left: 20px;
    padding-right: 5px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00a6ce;
    clip-path: polygon(15% 0, 101% 0, 101% 101%, 0% 101%, 0 101%);
    white-space: nowrap;
}
/*css for top advertisement*/
/*Css Table*/
.table-responsive {
    padding: 10px 20px;
}

.table th {
    background-color: #dbdfe3;
    color: #2d3d4b !important;
}

.table th, .table td {
    border: none;
}

.table td {
    color: #415364b3;
    background: #fff;
    font-weight: 600;
    vertical-align: middle;
}

.table {
    font-size: 13px;
    border: none !important;
}
/*Css Table End*/
/*Multiselect Dropdown Css*/
.select2-container .select2-search--inline .select2-search__field {
    margin-top: 8px;
}

.select2-selection__choice {
    background-color: #00a6ce !important;
    border-color: #007bff;
    color: white;
    padding: 0 10px;
    margin: 3px 0 0 5px;
    border-radius: 2px;
    cursor: pointer;
}

button.select2-selection__choice__remove span {
    color: #fff !important;
    font-size: 1.1em !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-radius: 10px;
    margin-right: 2px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    font-size: 1.1em !important;
    padding: 0px 4px;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: unset !important;
    }

textarea.select2-search__field {
    width: 100%;
    font-size: 12px !important;
    padding-top: 4px !important;
}

ul.select2-selection__rendered li {
    font-size: 12px;
}

.select2-results__option {
    display: flex;
    align-items: center;
}

li.select2-search {
    padding: 0px !important;
}

.select2-results__option input {
    margin-right: 10px;
}
/*Miltiselect Dropdown Css End*/

.form-control input[type="text"] {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

.tt-menu {
    width: 100%;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

label.onborder {
    font-size: 11px !important;
    top: -6px !important;
    left: 7px !important;
    color: #6c757dc4 !important;
    background-color: white !important;
    padding: 0 5px !important;
    position: absolute !important;
    z-index: 4 !important;
}

img.image-group {
    position: absolute;
    top: 5px;
    right: 8px;
    background: #fff;
}

div.tt-dataset {
    color: #333 !important;
}

input.tt-input {
    font-size: 12px;
    background-color: #fff !important;
}

.tt-suggestion {
    padding: 8px 5px;
}

    .tt-suggestion:hover {
        cursor: pointer;
        color: #fff;
        background-color: #0097cf;
    }

.form-group input[type="text"], span.select2-selection, .form-group select {
    /*border-color: #66afe9 !important;*/
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

span.select2 {
    width: 100% !important;
}

.vertical-separator {
    border-left: 2px solid #beb4b463;
    height: 25px;
}

.header-part {
    padding: 20px 20px;
}

.searchbar_div {
    padding: 15px;
    background: #fff;
}

.vertical-line {
    width: 1px;
    height: 24px;
    border: 1px solid #bcb8b84f;
}


.input-label {
    position: absolute;
    top: 0.60rem;
    left: 0.75rem;
    background-color: white;
    padding: 0 0.25rem;
    color: #1c1b1f6b;
    font-size: 12px;
    transition: all 0.2s ease-out;
    font-weight: 600;
}

.buttonloginoptions {
    /*background: #7cd1e5;*/
    background: #00a6ce;
    color: #fff;
}

input.form-control, .serialNumber {
    font-weight: 600;
}

.table > tbody > tr > td {
    padding: 10px;
}

.btn:hover:not(.clear-btn) {
    color: #fff !important;
    background: #188ca8;
/*    padding-left:12px !important;*/
}

.data-capture-portal {
    font-stretch: normal;
    font-style: normal;
    line-height: 1.31;
    letter-spacing: 0.69px;
    text-align: center;
    color: #00a6ce;
    font-weight: 600;
}

.welcome-to-new {
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.83;
    letter-spacing: 0.49px;
    text-align: center;
    color: darkgreen;
}

.common_bg {
    background: #edf5f7;
}

a.carousel-control-prev, a.carousel-control-next {
    position: static;
    width: 100%;
}

#landingPage, #loginPage .imageTitle_div {
    padding: 0px;
    color: #fff;
}

#bulletPoints li {
    font-size: 13px;
    text-align: start;
}

#bulletPoints {
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #fff;
}

#selectLocationPage #bulletPoints {
    color: #5c4f4f;
}

.bulletPoints_div {
    margin-bottom: 30px;
    margin-left: 30px;
    height: 150px;
}

.imageTitle {
    font-weight: bold;
    font-size: 16px;
}

.imageTitle_div {
    padding: 5px;
    width: 80%;
    text-align: center;
}

.sliderTitle_div {
    padding: 1rem 3rem 0.5rem 3rem !important;
}

.main_heading1 {
    /*width: 70%;*/
    margin: auto;
    margin-bottom: 10px;
}

.rightbox_div {
    padding: 0px;
    /*background-image: linear-gradient(35deg, #00a6ce, #80bc00 100%);*/
}


.carousel-item, .imageContainer {
/*    background: linear-gradient(35deg, #00a6ce, #80bc00 100%);*/
    padding: 3px; /* Space for the border */
    border-radius: 10px;
}
.landingPage .carousel-item, .landingPage .imageContainer {
    background: none !important;
}
.loginPage .carousel-item, .landingPage .imageContainer {
    background: none !important;
}
    .carousel-item img, .imageContainer img {
        background-color: white; /* The inner content background color */
        padding: 5px;
        border-radius: 2px;
    }

#selectLocationPage .rightbox_div {
    background-image: none;
}

.rightbox {
    width: 100%;
    text-align: center;
    padding: 10px 0px;
}

.box {
    width: 100%;
    height: 100%;
    /*border: 1px solid #80808042;*/
}

.mainbx {
    margin: 2% 10%;
}

.carousel-indicators {
    margin-bottom: 0;
    bottom: -10px;
}

carousel-indicators {
    margin-bottom: 10px !important;
}

.carousel-control-prev {
    justify-content: start !important;
    padding-left: 10%;
}
  

  

.bullet-points {
    color: #fff;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
}



.carouselRow {
    overflow: auto;
}



#selectLocationPage .carousel-item img {
    border-radius: 4px;
    padding: 5px 2px;
    border: 1px solid #80808033;
}

.sidebar {
    background-color: #2c97de;
    color: white;
    width: 250px;
    padding: 20px;
    box-sizing: border-box;
}

#sidebar li:hover {
    background: #70cce3;
}

#sidebar li img {
    margin-right: 10px;
}

.sidebar .logo img {
    width: 100%;
}

.sidebar nav ul {
    list-style-type: none;
    padding: 0;
}

    .sidebar nav ul li {
        margin: 20px 0;
    }


        .sidebar nav ul li a {
            color: white;
            text-decoration: none;
        }

.common-label-color {
    color: #21252bf7 !important;
}

.sidebar .logout {
    margin-top: auto;
}

button, .btn, .btn-primary:focus {
    /*background-color: #00a6ce !important;*/
    outline: none !important;
    box-shadow: none !important;
    border-color: none !important;
}

.common-blue-color {
    background: #00a6ce;
}

.headerContent {
    padding-left: 20px;
    padding-top: 20px;
    font-size: 17px;
}

.sales_representative_details {
    margin: 15px 0px;
    background: #fff;
    padding: 15px 10px 5px 10px;
}

#userNotFoundModal, #userInfoModal {
    top: 30%;
}

.sales-rep-details {
    display: flex;
    font-size: 13px;
    align-items: center;
    background: #fff;
    border-radius: 5px;
    padding-bottom: 10px;
}

    .sales-rep-details img {
        border-radius: 50%;
        width: 35px;
        height: 35px;
        margin-right: 15px;
        margin-left: 10px;
    }

div.sales-rep-details .spanLabelColor {
    padding: 0px !important;
}

.sales-rep-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .sales-rep-info div {
        margin-right: 8px;
    }

.rightside_bg {
    padding-top: 76px;
    padding-bottom: 20px;
    padding-right: 20px;
}

.marginTop76 {
    padding-top: 76px;
    width: 100vw;
    height: 100vh;
}

.labelValues {
    padding-left: 10px;
}

span.twitter-typeahead {
    width: 100%;
}
/*My Custome Sidebar*/
.container {
    margin: 0px;
    padding: 0px;
}

#sidebar {
    width: 240px;
    background: #00a6ce;
    position: fixed;
    height: 100%;
    color: #fff;
    top: 77px;
    left: -243px;
    transition: left 0.5s ease;
}

#the-basics span {
    width: 100%;
}

#addUserModal {
    top: 40%;
}

#sidebar.visible {
    left: 0px;
    transition: left 0.7s ease;
    z-index: 1030;
}

.active-link {
    background: #70cce3;
}

ul {
    margin: 0;
    padding: 0;
    margin-top: 1%;
}

li {
    padding: 10px 0 10px 10px;
}

    li a {
        text-decoration: none;
        color: white;
    }

#sidebar-btn {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 15px;
    cursor: pointer;
    margin: 20px;
    position: absolute;
    right: -60px;
    top: -55px;
    z-index: 10;
}

    #sidebar-btn span {
        background-color: white;
        height: 1px;
        display: block;
        margin-bottom: 5px;
    }

        #sidebar-btn span:nth-child(2) {
            width: 75%;
        }

.MainContainer {
    width: 100vw;
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

.header_container {
    font-size: 16px;
    padding: 10px 15px;
    background: #cdedf4;
}

.spanLabelColor {
    color: #5c5e5f;
}

.sidebar-ul {
    margin-top: 40px;
}

.content_box {
    width: 97%;
    margin: auto;
    padding: 0px;
    background: #fff;
    border-radius: 3px;
}

.view-all-btn, .clear-btn {
    width: 100%;
    font-size: 14px;
    color: #fff;
}

.clear-btn {
    background: #415364b8;
}

div.sliderTitle_div {
    margin-top: 30px !important;
}

div.bulletPoints_div {
    margin-bottom: 10px !important;
    padding-left: 10% !important;
}

.h-100vh {
    height: 100vh;
}

.w-10 {
    width: 10%;
}
/*common Label*/
label {
    font-weight: 600;
    font-size: 14px;
}

.secondary_header {
    font-size: 17px;
    font-weight: 500;
    padding-left: 20px;
    color: #fff;
}

.sub-header-label {
    background: #00a6ce !important;
    height: 70px;
    color: #fff !important;
}

/*Css For Error Model*/
body {
    font-family: 'Varela Round', sans-serif;
}

.modal-confirm {
    color: #636363;
    width: 325px;
}

    .modal-confirm .modal-content {
        padding: 20px;
        border-radius: 5px;
        border: none;
    }

    .modal-confirm .modal-header {
        border-bottom: none;
        position: relative;
    }

    .modal-confirm h4 {
        text-align: center;
        font-size: 26px;
        margin: 30px 0 -15px;
    }

    .modal-confirm .form-control, .modal-confirm .btn {
        min-height: 40px;
        border-radius: 3px;
    }

    .modal-confirm .close {
        position: absolute;
        top: -5px;
        right: -5px;
    }

    .modal-confirm .modal-footer {
        border: none;
        text-align: center;
        border-radius: 5px;
        font-size: 13px;
    }

    .modal-confirm .icon-box {
        color: #fff;
        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: -70px;
        width: 95px;
        height: 95px;
        border-radius: 50%;
        z-index: 9;
        background: #ef513a;
        padding: 15px;
        text-align: center;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    }

        .modal-confirm .icon-box i {
            font-size: 56px;
            position: relative;
            top: 4px;
        }

    .modal-confirm.modal-dialog {
        margin-top: 80px;
    }

    .modal-confirm .btn {
        color: #fff;
        border-radius: 4px;
        background: #ef513a;
        text-decoration: none;
        transition: all 0.4s;
        line-height: normal;
        border: none;
    }

        .modal-confirm .btn:hover, .modal-confirm .btn:focus {
            background: #da2c12;
            outline: none;
        }

.trigger-btn {
    display: inline-block;
    margin: 100px auto;
}


    @media (max-width: 768px) {
        #sidebar {
            top: 79px;
        }

        p .heading-top {
            font-size: 20px;
        }

        .reset-box {
            padding: 20px;
        }

        .navbar-brand {
            padding-top: 15px;
        }

        .marginRight10x {
            margin-right: 0px;
        }

        /*.box {
        flex-direction: column-reverse;
    }*/

        .pagination-row {
            padding: 0px 10px;
        }

        .vertical-separator {
            display: none;
        }

        .mainbx {
            margin: 20px;
        }

        .welcome-to-new {
            font-size: 14px;
        }

        sliderTitle_div {
            padding: 0.5rem !important;
        }

        .bullet-points {
            padding: 0px;
        }

        .imageTitle {
            font-size: 16px;
        }

        .data-capture-portal {
            font-size: 1.2rem;
        }

        #selectLocationPage h4.data-capture-portal {
            font-size: 1.6rem !important;
        }

        .carousel-item img {
            width: 130px;
            height: 130px;
        }

        .headerContent {
            padding-top: 20px;
            padding-left: 0px !important;
            text-align: center;
        }

        .sales-rep-details {
            flex-direction: column;
            align-items: flex-start;
        }

        .sales-rep-info {
            flex-direction: column;
            align-items: start;
        }

            .sales-rep-info div {
                margin-right: 0;
                margin-bottom: 5px;
            }

        .visible #sidebar-btn {
            right: 0px;
        }

            .visible #sidebar-btn span {
                border: 1px solid white;
            }

        #sidebar-btn span {
            border: 1px solid gray;
        }

        #sidebar {
            z-index: 11;
            height: 100vh;
        }

        .profileOptions {
            right: 15px;
            bottom: -10px;
        }
    }

    @media (max-width: 1025px) {
        div.sales-rep-info div {
            margin-right: 8px !important;
        }

        .sales_representative_details {
            padding-bottom: 5px;
        }

        #orderLookupSalesRp {
            padding-bottom: 5px !important;
        }

        .mainbx {
            margin: 20px;
        }

        p.heading-top {
            margin-bottom: 20px !important;
        }

        .reset-box {
            max-width: none;
            padding: 30px;
        }

        .btnsubmitform {
            margin-bottom: 20px !important
        }

        .data-capture-portal {
            font-size: 1.3rem;
        }

        #selectLocationPage h4.data-capture-portal {
            font-size: 1.6rem !important;
        }

        .sliderTitle_div {
            padding: 1rem !important;
        }

        .headerContent {
            padding-top: 20px;
        }

        #sidebar {
            z-index: 11;
            height: 100vh;
        }

        .visible #sidebar-btn {
            right: 0px;
            top: -8px;
        }

            .visible #sidebar-btn span {
                border: 1px solid white;
            }

        #sidebar-btn span {
            border: 1px solid gray;
        }

        #sidebar-btn {
            right: -65px;
        }

        .rightside_bg {
            padding-right: 0px;
        }

        .table_bg {
            padding-right: 15px;
        }

        .pageSerialHistorySearch .table_bg {
            padding-right: 0px;
        }

        .MainContainer {
            overflow-x: hidden;
        }
    }

    @media (min-width: 990px) {

        #sidebar-btn {
            display: none;
        }

        .rightside_bg {
            padding-left: 250px;
        }

        .equipmentForRepair .rightside_bg {
            padding-left: 240px;
        }

        div.paddingLeftwithoutsidebar .rightside_bg {
            padding-left: 15px;
        }

        #sidebar {
            left: 0px;
        }

        .MainContainer {
            overflow-x: hidden;
        }
    }

    @media screen and (max-width: 767px) {
        .table-responsive {
            border: none;
        }

        .centered-div {
            padding: 12px !important;
        }

        .advertisement {
            display: none;
        }
    }

    @media screen and (min-width: 1299px) {
        #loginPage .selectLoginOption_div {
            min-height: 600px !important;
        }

        #landingPage .selectLoginOption_div {
            min-height: 600px !important;
        }

        span.welcome-to-new {
            font-size: 19px !important;
        }

        .dcs-logo {
            top: 2%;
        }

        .data-capture-portal {
            font-size: 1.3rem;
        }
    }

    @media (min-width: 1301px) and (max-width: 1900px) {
        .dcs-logo {
            width: 14rem !important;
            top: 2%;
        }

        .rightbox {
            padding-bottom: 40px;
        }

        .mainbx {
            margin: 2% 13%;
        }

        .fa-chevron-left {
            left: 39%;
        }

        .fa-chevron-right {
            right: 39%;
        }

        .data-capture-portal {
            font-size: 1.3rem;
        }

        #loginPage .selectLoginOption_div {
            min-height: 700px !important;
        }

        #landingPage .selectLoginOption_div {
            min-height: 700px !important;
        }
    }

    @media (min-width: 1901px) and (max-width: 2200px) {
        .dcs-logo {
            width: 15rem !important;
            top: 2%;
        }

        .mainbx {
            margin: 2% 15%;
        }

        .selectLoginOption_div {
            min-height: 700px !important;
        }

        .fa-chevron-left {
            left: 40%;
        }

        .fa-chevron-right {
            right: 40%;
        }

        .rightbox {
            padding-bottom: 40px;
        }

        .data-capture-portal {
            font-size: 1.3rem;
        }

        #loginPage .selectLoginOption_div {
            min-height: 600px !important;
        }

        #landingPage .selectLoginOption_div {
            min-height: 600px !important;
        }
    }

    @media (min-width: 2201px) and (max-width: 2600px) {
        .dcs-logo {
            width: 17rem !important;
            top: 2%;
        }

        .mainbx {
            margin: 2% 18%;
        }

        .rightbox {
            padding-bottom: 40px;
        }

        .selectLoginOption_div {
            min-height: 800px !important;
        }

        .fa-chevron-left {
            left: 42%;
        }

        .fa-chevron-right {
            right: 42%;
        }

        .data-capture-portal {
            font-size: 1.3rem;
        }

        #loginPage .selectLoginOption_div {
            min-height: 800px !important;
        }

        #landingPage .selectLoginOption_div {
            min-height: 800px !important;
        }
    }

