﻿.datepick {
    padding: 0.5em;
    border: solid 1px #ccc;
    color: #555;
    width: 100%;
    max-width: 450px;
    /* border-right: solid 30px #ccc; */
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDYuMzUgNi4zNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik0uMTY3LjYyMWg2LjAyNHY1LjU1NkguMTY3eiIgc3Ryb2tlLXdpZHRoPSIuMzM1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgc3Ryb2tlLW9wYWNpdHk9Ii45NjkiLz48cGF0aCBkPSJNLjEzNiAxLjc3OGg2LjA4MyIgc3Ryb2tlLXdpZHRoPSIuMzY1IiBzdHJva2Utb3BhY2l0eT0iLjk2OSIvPjxwYXRoIGQ9Ik0xLjM0MS4wM3YxLjE1OE01LjA4NS4wM3YxLjE1OCIgc3Ryb2tlLW9wYWNpdHk9Ii45NjkiIHN0cm9rZS13aWR0aD0iLjQ2NSIvPjxwYXRoIGQ9Ik0yLjU5MyAyLjQzOXYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzNtLTIuNDc1LjQzMnYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzNtLTIuNTE2LjQ1MnYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzMiIHN0cm9rZS1vcGFjaXR5PSIuOTY5IiBzdHJva2Utd2lkdGg9Ii42NjUiLz48L3N2Zz4=') no-repeat 99%;
    background-size: 19px;
    font-size: 12px !important;
}

.datepick_wrap {
    position: absolute;
    top: 45px;
}

.q2-date-picker.mar-0 input.datepick{
    margin-bottom: 0 !important;
}

@media(max-width:991px) {
    .datepick {
        font-size: 15px !important;
    }

    @media(max-width:550px) {
        .datepick_wrap {
            position: relative;
            top: -20px;
        }
    }
}


/*----------------------------------------Datepicker common styles-------------------------------------------------*/

.cust-datepicker {
    position: relative;
}

.cust-datepicker__input {
    position: relative;
}

    .cust-datepicker__input:focus {
        border: 0.0625rem solid #a5a6a8;
    }

.cust-datepicker__panel {
    font-size: 12px;
    font-size: 0.75rem;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 2px 2px 7px 1px rgba(149, 149, 149, 0.43);
    -moz-box-shadow: 2px 2px 7px 1px rgba(149, 149, 149, 0.43);
    box-shadow: 2px 2px 7px 1px rgba(149, 149, 149, 0.43);
    position: relative; /*absolute*/
    padding: 0.5em 0.5em;
    border-width: 0;
    text-align: center;
    background-color: #fff;
    cursor: default;
    z-index: 100;
    width: 100%;
    max-width: 450px;
    /* styles for mobile browsers */
}

.cust-datepicker__table {
    width: 100%;
    display: grid;
}

.cust-datepicker__panel.-is--hidden {
    display: none;
}

.cust-datepicker__panel.-position--above {
    margin-bottom: 5px;
}

.cust-datepicker__panel.-position--below {
    margin-top: 5px;
}

.cust-datepicker__table div {
    width: 13.285%;
    float: left;
    padding: 0.3em 1.25%;
    margin: 0.5%;
    border: 1px solid transparent;
}

.cust-datepicker__table .cust-datepicker_header__dayName {
    width: 100%;
    /* float: none; */
    clear: both;
    padding: 0px;
    margin: 3px 0px;
}

.cust-datepicker__table .cust-datepicker_header {
    width: 100%;
    /* float: none; */
    clear: both;
    padding: 0px;
    margin: 0px;
}

    .cust-datepicker__table .cust-datepicker_header .cust-datepicker__title {
        width: 71.4%;
        background-color: #969696;
        /* text-transform: uppercase; */
        color: #fff;
        padding: 0em 1.25%;
        margin: 0 0.5%;
    }

        .cust-datepicker__table .cust-datepicker_header .cust-datepicker__title.year_cell {
            background-color: #b1b1b1;
        }

.cust-datepicker__panel span {
    display: inline-block;
    width: 100%;
    line-height: 25px;
    color: #696969;
    text-align: center;
    font-size: 10px;
}

.cust-datepicker__panel .cust-datepicker__title span {
    font-size: 0.8rem;
    width: 100%;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
}

.cust-datepicker__panel .cust-datepicker__prev, .cust-datepicker__panel .cust-datepicker__next {
    text-align: center;
    border: solid 1px #ccc;
    padding: 0;
    font-size: 12px;
    width: 12.8%;
    margin: 0px 0.5%;
    cursor: pointer;
}

    .cust-datepicker__panel .cust-datepicker__prev span:hover, .cust-datepicker__panel .cust-datepicker__next span:hover {
        color: #ffffff;
        background-color: #63666a;
        -moz-border-radius: 15px;
    }

.cust-datepicker__panel .cust-datepicker__dayName span {
    font-weight: bold;
}

.cust-datepicker__panel .cust-datepicker__day {
    border: 1px solid #cccccc;
    cursor: pointer;
}

    .cust-datepicker__panel .cust-datepicker__day:not(.-is--disabled):not(.-is--selected):hover {
        background-color: #63666a;
    }

        .cust-datepicker__panel .cust-datepicker__day:not(.-is--disabled):not(.-is--selected):hover span {
            color: #fff;
        }

    .cust-datepicker__panel .cust-datepicker__day.-is--selected {
        background-color: #005eb8;
    }

    .cust-datepicker__panel .cust-datepicker__day.-current--day {
        background-color: #ffd47f;
    }

    .cust-datepicker__panel .cust-datepicker__day.-is--selected span {
        color: #fff;
    }

    .cust-datepicker__panel .cust-datepicker__day.-is--disabled span {
        color: #63666a;
    }

.cust-datepicker__panel.-device--mobile {
    padding: 5.33333vw 4vw;
    font-size: 3.2vw;
    margin: auto;
}

    .cust-datepicker__panel.-device--mobile .cust-datepicker__title span {
        font-size: 4.3vw;
    }

    .cust-datepicker__panel.-device--mobile .cust-datepicker__prev span, .cust-datepicker__panel.-device--mobile .cust-datepicker__next span, .cust-datepicker__panel.-device--mobile .cust-datepicker__day span, .cust-datepicker__panel.-device--mobile .cust-datepicker__dayName span {
        width: 8vw;
        line-height: 8vw;
    }

        .cust-datepicker__panel.-device--mobile .cust-datepicker__prev span:hover, .cust-datepicker__panel.-device--mobile .cust-datepicker__next span:hover, .cust-datepicker__panel.-device--mobile .cust-datepicker__day span:hover, .cust-datepicker__panel.-device--mobile .cust-datepicker__dayName span:hover {
            width: 8vw;
            height: 8vw;
            -webkit-border-radius: 4vw;
            -moz-border-radius: 4vw;
            border-radius: 4vw;
        }

.cust-datepicker__container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* place datepicker panel at the centre of viewport */
}

    .cust-datepicker__container.-is--hidden {
        display: none;
    }

    .cust-datepicker__container .cust-datepicker__panel {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.cust-datepicker__table .cust-datepicker__dayName {
    /* background-color: #eee; */
    padding: 0em 1.25%;
    border-bottom: solid 1px #d1d1d1;
    box-shadow: 0 -9px 10px -13px #ccc inset;
}

.newTblRowStr .q2-date-picker .cust-datepicker__panel {
    min-width: 250px;
}

/*------------------------date-picker styles end------------------------------------------*/

/*.scan_wrapper {
    position: absolute;
    background: #FFF;
    width: 105%;
    max-width: 300px;
    box-shadow: 0px 0px 5px 0px #666;
    z-index: 1000;
    right: 0px;
    padding: 1em;
}*/

.scan-input {
    border-radius: 0px;
    border: none !important;
    border-bottom: 1px solid #ccc !important;
    font-size: 1em !important;
    box-shadow: none !important;
    color: #333;
    padding: 6px 0px;
    margin: 0px;
    width: 100%;
    height: 32px;
    float: left;
    margin-bottom: 0px !important;
    padding-right: 35px
}

    .scan-input:focus {
        outline: none !important;
    }

.scan_icon {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDEwNjYuNjY2NiAxMDY2LjY2NjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiIGNsYXNzPSIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDEsMzUsNDApIj48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im01Ni41NzQyMTkgMTUwLjMyNDIxOWMwIDE2LjE3OTY4Ny0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1di0xMjMuMDQ2ODc1YzAtMTYuMTgzNTk0IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1LTI5LjI5Njg3NWgxMjMuMDM5MDYyYzE2LjE4MzU5NCAwIDI5LjI5Njg3NSAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NSAwIDE2LjE3OTY4Ny0xMy4xMTMyODEgMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzVoLTkzLjc0MjE4N3ptNDA0LjI5Njg3NSA2MjguOTA2MjVjLTE2LjE4MzU5NCAwLTI5LjI5Njg3NS0xMy4xMTcxODgtMjkuMjk2ODc1LTI5LjI5Njg3NSAwLTE2LjE4MzU5NCAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NS0yOS4yOTY4NzVoMjUuMzkwNjI1YzE2LjE3OTY4NyAwIDI5LjI5Njg3NSAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NSAwIDE2LjE3OTY4Ny0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzV6bTIxLjQ4NDM3NS0zOTAuNjI1YzAgMTYuMTc5Njg3LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1IDI5LjI5Njg3NS0xNi4xODM1OTQgMC0yOS4yOTY4NzUtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzV2LTI1LjM5MDYyNWMwLTE2LjE4MzU5NCAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NS0yOS4yOTY4NzUgMTYuMTc5Njg3IDAgMjkuMjk2ODc1IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1em0xNzkuNjg3NSAzMjguMTI1Yy0xNi4xODM1OTQgMC0yOS4yOTY4NzUtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzUgMC0xNi4xODM1OTQgMTMuMTEzMjgxLTI5LjI5Njg3NSAyOS4yOTY4NzUtMjkuMjk2ODc1aDI1LjM5MDYyNWMxNi4xNzk2ODcgMCAyOS4yOTY4NzUgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMCAxNi4xNzk2ODctMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzUgMjkuMjk2ODc1em0tNjA0LjQ5MjE4OC0xODkuNDUzMTI1aDEzNi4zMjgxMjVjLS4zOTA2MjUgMS44OTQ1MzEtLjU4NTkzNyAzLjg1MTU2Mi0uNTg1OTM3IDUuODU5Mzc1djg3Ljg5MDYyNWMwIDE2LjE3OTY4NyAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NSAyOS4yOTY4NzUgMTYuMTc5Njg3IDAgMjkuMjk2ODc1LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1di04Ny44OTA2MjVjMC0yLjAwNzgxMy0uMTk1MzEzLTMuOTY0ODQ0LS41ODU5MzgtNS44NTkzNzVoMjU4LjM5ODQzOHYzMy4yMDMxMjVoLTE1NC4yOTY4NzVjLTE2LjE4MzU5NCAwLTI5LjI5Njg3NSAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NSAwIDE2LjE3OTY4NyAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NSAyOS4yOTY4NzVoMTgzLjU5Mzc1YzE2LjE3OTY4NyAwIDI5LjI5Njg3NS0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NXYtNjIuNWgxMDkuMzc1djg1LjkzNzVjMCAxNi4xNzk2ODcgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMjkuMjk2ODc1IDE2LjE3OTY4NyAwIDI5LjI5Njg3NS0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NXYtODUuOTM3NWgyMDIuMTQ4NDM3YzE2LjE3OTY4OCAwIDI5LjI5Njg3NS0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAwLTE2LjE4MzU5NC0xMy4xMTcxODctMjkuMjk2ODc1LTI5LjI5Njg3NS0yOS4yOTY4NzVoLTEzMy43ODkwNjJ2LTU2LjY0MDYyNWgyOS4yOTY4NzVjMTYuMTc5Njg3IDAgMjkuMjk2ODc1LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1IDAtMTYuMTgzNTk0LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1LTI5LjI5Njg3NWgtMTQ2LjQ4NDM3NWMtMTYuMTgzNTk0IDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1IDAgMTYuMTc5Njg3IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1IDI5LjI5Njg3NWg1OC41OTM3NXY1Ni42NDA2MjVoLTE3Ny43MzQzNzV2LTc2LjE3MTg3NWMwLTE2LjE4MzU5NC0xMy4xMTcxODgtMjkuMjk2ODc1LTI5LjI5Njg3NS0yOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1djc2LjE3MTg3NWgtNDUyLjE0ODQzOGMtMTYuMTgzNTkzIDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1IDAgMTYuMTc5Njg3IDEzLjExMzI4MiAyOS4yOTY4NzUgMjkuMjk2ODc1IDI5LjI5Njg3NXptNTA2LjgzNTkzOC0zNTkuMzc1YzAtMTYuMTgzNTk0IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1LTI5LjI5Njg3NSAxNi4xNzk2ODcgMCAyOS4yOTY4NzUgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzV2MTU0LjI5Njg3NWMwIDE2LjE3OTY4Ny0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1em0tMTczLjgyODEyNSAxMS43MTg3NWg2Ni40MDYyNXYtMTEuNzE4NzVjMC0xNi4xODM1OTQgMTMuMTEzMjgxLTI5LjI5Njg3NSAyOS4yOTY4NzUtMjkuMjk2ODc1IDE2LjE3OTY4NyAwIDI5LjI5Njg3NSAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NXY5Ny42NTYyNWMwIDE2LjE3OTY4Ny0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1di0yNy4zNDM3NWgtNjYuNDA2MjV2MTMuNjcxODc1YzAgMTYuMTc5Njg3LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1IDI5LjI5Njg3NS0xNi4xODM1OTQgMC0yOS4yOTY4NzUtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzV2LTgzLjk4NDM3NWMwLTE2LjE4MzU5NCAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NS0yOS4yOTY4NzUgMTYuMTc5Njg3IDAgMjkuMjk2ODc1IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1em0tMjM0LjM4MjgxMyAyMzAuNDY4NzVjLTE2LjE3NTc4MSAwLTI5LjI5Njg3NS0xMy4xMTcxODgtMjkuMjk2ODc1LTI5LjI5Njg3NSAwLTE2LjE4MzU5NCAxMy4xMjEwOTQtMjkuMjk2ODc1IDI5LjI5Njg3NS0yOS4yOTY4NzVoMjE2LjgwNDY4OGMxNi4xNzk2ODcgMCAyOS4yOTY4NzUgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMCAxNi4xNzk2ODctMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzUgMjkuMjk2ODc1em02MzguNjc5Njg4IDM4OC42NzE4NzV2MjkuMjk2ODc1YzAgMTYuMTc5Njg3IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1IDI5LjI5Njg3NSAxNi4xNzk2ODcgMCAyOS4yOTY4NzUtMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzV2LTE3NS43ODEyNWMwLTE2LjE3MTg3NS0xMy4xMTcxODgtMjkuMjk2ODc1LTI5LjI5Njg3NS0yOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1IDEzLjEyNS0yOS4yOTY4NzUgMjkuMjk2ODc1djg3Ljg5MDYyNWgtOTcuNjU2MjVjLTE2LjE4MzU5NCAwLTI5LjI5Njg3NSAxMy4xMjUtMjkuMjk2ODc1IDI5LjI5Njg3NSAwIDE2LjE3OTY4NyAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NSAyOS4yOTY4NzV6bS0yOTguODI4MTI1IDU4LjU5Mzc1aDg3Ljg5MDYyNWMxNi4xNzk2ODcgMCAyOS4yOTY4NzUtMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzV2LTE1MC4zOTA2MjVjMC0xNi4xODM1OTQtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzUtMjkuMjk2ODc1LTE2LjE4MzU5NCAwLTI5LjI5Njg3NSAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NXYxMjEuMDkzNzVoLTU4LjU5Mzc1Yy0xNi4xODM1OTQgMC0yOS4yOTY4NzUgMTMuMTEzMjgxLTI5LjI5Njg3NSAyOS4yOTY4NzUgMCAxNi4xNzk2ODcgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMjkuMjk2ODc1em0tMTYyLjEwOTM3NS0xNzcuNzM0Mzc1YzAtMTYuMTgzNTk0IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1LTI5LjI5Njg3NSAxNi4xNzk2ODcgMCAyOS4yOTY4NzUgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzV2ODUuOTM3NWMwIDE2LjE3OTY4Ny0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NSAyOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1em0tMTc3LjczNDM3NS0zLjkwNjI1aDEyMy4wNDY4NzVjMTYuMTc5Njg3IDAgMjkuMjk2ODc1IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1djEyMy4wNDY4NzVjMCAxNi4xNzk2ODctMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzUgMjkuMjk2ODc1aC0xMjMuMDQ2ODc1Yy0xNi4xODM1OTQgMC0yOS4yOTY4NzUtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzV2LTEyMy4wNDY4NzVjMC0xNi4xODM1OTQgMTMuMTEzMjgxLTI5LjI5Njg3NSAyOS4yOTY4NzUtMjkuMjk2ODc1em05My43NSA1OC41OTM3NWgtNjQuNDUzMTI1djY0LjQ1MzEyNWg2NC40NTMxMjV6bTQ2Ni43OTY4NzUtNTk1LjcwMzEyNWgxMjMuMDQ2ODc1YzE2LjE3OTY4NyAwIDI5LjI5Njg3NSAxMy4xMTMyODEgMjkuMjk2ODc1IDI5LjI5Njg3NXYxMjMuMDQ2ODc1YzAgMTYuMTc5Njg3LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1IDI5LjI5Njg3NWgtMTIzLjA0Njg3NWMtMTYuMTgzNTk0IDAtMjkuMjk2ODc1LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1di0xMjMuMDQ2ODc1YzAtMTYuMTgzNTk0IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1LTI5LjI5Njg3NXptOTMuNzUgNTguNTkzNzVoLTY0LjQ1MzEyNXY2NC40NTMxMjVoNjQuNDUzMTI1em0tNjU0LjI5Njg3NS01OC41OTM3NWMtMTYuMTgzNTk0IDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1djEyMy4wNDY4NzVjMCAxNi4xNzk2ODcgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMjkuMjk2ODc1aDEyMy4wNDY4NzVjMTYuMTc5Njg3IDAgMjkuMjk2ODc1LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1di0xMjMuMDQ2ODc1YzAtMTYuMTgzNTk0LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1LTI5LjI5Njg3NXptOTMuNzUgNTguNTkzNzV2NjQuNDUzMTI1aC02NC40NTMxMjV2LTY0LjQ1MzEyNXptNjg5LjQ1MzEyNSA2NDguNDM3NWMwLTE2LjE4MzU5NCAxMy4xMTMyODEtMjkuMjk2ODc1IDI5LjI5Njg3NS0yOS4yOTY4NzUgMTYuMTc5Njg3IDAgMjkuMjk2ODc1IDEzLjExMzI4MSAyOS4yOTY4NzUgMjkuMjk2ODc1djEyMy4wNDY4NzVjMCAxNi4xNzk2ODctMTMuMTE3MTg4IDI5LjI5Njg3NS0yOS4yOTY4NzUgMjkuMjk2ODc1aC0xMjMuMDQyOTY5Yy0xNi4xNzU3ODEgMC0yOS4yOTY4NzUtMTMuMTE3MTg4LTI5LjI5Njg3NS0yOS4yOTY4NzUgMC0xNi4xODM1OTQgMTMuMTIxMDk0LTI5LjI5Njg3NSAyOS4yOTY4NzUtMjkuMjk2ODc1aDkzLjc0NjA5NHptLTk0MS40MDYyNSAwdjEyMy4wNDY4NzVjMCAxNi4xNzk2ODcgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMjkuMjk2ODc1aDEyMy4wMzkwNjJjMTYuMTgzNTk0IDAgMjkuMjk2ODc1LTEzLjExNzE4OCAyOS4yOTY4NzUtMjkuMjk2ODc1IDAtMTYuMTgzNTk0LTEzLjExMzI4MS0yOS4yOTY4NzUtMjkuMjk2ODc1LTI5LjI5Njg3NWgtOTMuNzQyMTg3di05My43NWMwLTE2LjE4MzU5NC0xMy4xMTcxODgtMjkuMjk2ODc1LTI5LjI5Njg3NS0yOS4yOTY4NzUtMTYuMTgzNTk0IDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1em0xMDAwLTY5NS4zMTI1di0xMjMuMDQ2ODc1YzAtMTYuMTgzNTk0LTEzLjExNzE4OC0yOS4yOTY4NzUtMjkuMjk2ODc1LTI5LjI5Njg3NWgtMTIzLjA0Mjk2OWMtMTYuMTc1NzgxIDAtMjkuMjk2ODc1IDEzLjExMzI4MS0yOS4yOTY4NzUgMjkuMjk2ODc1IDAgMTYuMTc5Njg3IDEzLjEyMTA5NCAyOS4yOTY4NzUgMjkuMjk2ODc1IDI5LjI5Njg3NWg5My43NDYwOTR2OTMuNzVjMCAxNi4xNzk2ODcgMTMuMTEzMjgxIDI5LjI5Njg3NSAyOS4yOTY4NzUgMjkuMjk2ODc1IDE2LjE3OTY4NyAwIDI5LjI5Njg3NS0xMy4xMTcxODggMjkuMjk2ODc1LTI5LjI5Njg3NXptMCAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM0ZTRlNGUiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD48L2c+PC9zdmc+);*/
    display: block;
    /*background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiPjwvZGVmcz48ZyBpZD0iU3ZnanNHMTAwOCIgdHJhbnNmb3JtPSJtYXRyaXgoMC45MTY3LDAsMCwwLjkxNjcsMTEuOTk1MjAwMDAwMDAwMDExLDExLjk5NTIwMDAwMDAwMDAxMSkiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjI4OCIgaGVpZ2h0PSIyODgiPjxwYXRoIGQ9Ik01Ni45IDExMy44Vjg1LjNjMC0xNS43IDEyLjgtMjguNCAyOC40LTI4LjRsNTYuOSAwYzE1LjcgMCAyOC40LTEyLjcgMjguNC0yOC40IDAtMTUuNy0xMi43LTI4LjQtMjguNC0yOC40SDg1LjNDMzguMiAwIDAgMzguMiAwIDg1LjN2MjguNGMwIDE1LjcgMTIuNyAyOC40IDI4LjQgMjguNFM1Ni45IDEyOS41IDU2LjkgMTEzLjh6TTAgMzk4LjJ2MjguNEMwIDQ3My44IDM4LjIgNTEyIDg1LjMgNTEybDU2LjkgMGMxNS43IDAgMjguNC0xMi43IDI4LjQtMjguNCAwLTE1LjctMTIuNy0yOC40LTI4LjQtMjguNEg4NS4zYy0xNS43IDAtMjguNC0xMi44LTI4LjQtMjguNGwwLTI4LjRjMC0xNS43LTEyLjctMjguNC0yOC40LTI4LjRTMCAzODIuNSAwIDM5OC4yek0zNjkuOCA1Ni45aDU2LjljMTUuNyAwIDI4LjQgMTIuNyAyOC40IDI4LjR2MjguNGMwIDE1LjcgMTIuNyAyOC40IDI4LjQgMjguNHMyOC40LTEyLjcgMjguNC0yOC40Vjg1LjNDNTEyIDM4LjIgNDczLjggMCA0MjYuNyAwaC01Ni45Yy0xNS43IDAtMjguNCAxMi43LTI4LjQgMjguNEMzNDEuMyA0NC4yIDM1NC4xIDU2LjkgMzY5LjggNTYuOXpNMzY5LjggNTEyaDU2LjljNDcuMSAwIDg1LjMtMzguMiA4NS4zLTg1LjNsMC0yOC40YzAtMTUuNy0xMi43LTI4LjQtMjguNC0yOC40cy0yOC40IDEyLjctMjguNCAyOC40djI4LjRjMCAxNS43LTEyLjggMjguNC0yOC40IDI4LjRoLTU2LjljLTE1LjcgMC0yOC40IDEyLjctMjguNCAyOC40QzM0MS4zIDQ5OS4zIDM1NC4xIDUxMiAzNjkuOCA1MTJ6TTU2LjkgMjg0LjRoMzk4LjJjMTUuNyAwIDI4LjQtMTIuNyAyOC40LTI4LjQgMC0xNS43LTEyLjctMjguNC0yOC40LTI4LjRINTYuOWMtMTUuNyAwLTI4LjQgMTIuNy0yOC40IDI4LjRDMjguNCAyNzEuNyA0MS4yIDI4NC40IDU2LjkgMjg0LjQiIGZpbGw9IiM1ZjVmNWYiIGNsYXNzPSJjb2xvcjAwMCBzdmdTaGFwZSI+PC9wYXRoPjwvc3ZnPjwvZz48L3N2Zz4=");*/
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIiBjbGFzcz0iIj48Zz48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im03Ljc1IDEyYy0uNDE0IDAtLjc1LS4zMzYtLjc1LS43NXYtMS41YzAtLjk2NS43ODUtMS43NSAxLjc1LTEuNzVoMS41Yy40MTQgMCAuNzUuMzM2Ljc1Ljc1cy0uMzM2Ljc1LS43NS43NWgtMS41Yy0uMTM4IDAtLjI1LjExMi0uMjUuMjV2MS41YzAgLjQxNC0uMzM2Ljc1LS43NS43NXoiIGZpbGw9IiM2YzZjNmMiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiPjwvcGF0aD48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0xNi4yNSAxMmMtLjQxNCAwLS43NS0uMzM2LS43NS0uNzV2LTEuNWMwLS4xMzgtLjExMi0uMjUtLjI1LS4yNWgtMS41Yy0uNDE0IDAtLjc1LS4zMzYtLjc1LS43NXMuMzM2LS43NS43NS0uNzVoMS41Yy45NjUgMCAxLjc1Ljc4NSAxLjc1IDEuNzV2MS41YzAgLjQxNC0uMzM2Ljc1LS43NS43NXoiIGZpbGw9IiM2YzZjNmMiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiPjwvcGF0aD48cGF0aCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGQ9Im0xMC4yNSAxOGgtMS41Yy0uOTY1IDAtMS43NS0uNzg1LTEuNzUtMS43NXYtMS41YzAtLjQxNC4zMzYtLjc1Ljc1LS43NXMuNzUuMzM2Ljc1Ljc1djEuNWMwIC4xMzguMTEyLjI1LjI1LjI1aDEuNWMuNDE0IDAgLjc1LjMzNi43NS43NXMtLjMzNi43NS0uNzUuNzV6IiBmaWxsPSIjNmM2YzZjIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkPSJtMTUuMjUgMThoLTEuNWMtLjQxNCAwLS43NS0uMzM2LS43NS0uNzVzLjMzNi0uNzUuNzUtLjc1aDEuNWMuMTM4IDAgLjI1LS4xMTIuMjUtLjI1di0xLjVjMC0uNDE0LjMzNi0uNzUuNzUtLjc1cy43NS4zMzYuNzUuNzV2MS41YzAgLjk2NS0uNzg1IDEuNzUtMS43NSAxLjc1eiIgZmlsbD0iIzZjNmM2YyIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiI+PC9wYXRoPjxwYXRoIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZD0ibTE0LjI1IDRoLTQuNWMtLjk2NSAwLTEuNzUtLjc4NS0xLjc1LTEuNzUgMC0uNDEzLS4zMzctLjc1LS43NS0uNzVoLS41Yy0uNDE0IDAtLjc1LS4zMzYtLjc1LS43NXMuMzM2LS43NS43NS0uNzVoLjVjMS4yNCAwIDIuMjUgMS4wMSAyLjI1IDIuMjUgMCAuMTM4LjExMi4yNS4yNS4yNWg0LjVjLjEzOCAwIC4yNS0uMTEyLjI1LS4yNSAwLTEuMjQgMS4wMS0yLjI1IDIuMjUtMi4yNWguNWMuNDE0IDAgLjc1LjMzNi43NS43NXMtLjMzNi43NS0uNzUuNzVoLS41Yy0uNDEzIDAtLjc1LjMzNy0uNzUuNzUgMCAuOTY1LS43ODUgMS43NS0xLjc1IDEuNzV6IiBmaWxsPSIjNmM2YzZjIiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBzdHlsZT0iIj48L3BhdGg+PHBhdGggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBkPSJtMTcuMjUgMjRoLTEwLjVjLTEuNTE3IDAtMi43NS0xLjIzMy0yLjc1LTIuNzV2LTE4LjVjMC0xLjUxNyAxLjIzMy0yLjc1IDIuNzUtMi43NWgxMC41YzEuNTE3IDAgMi43NSAxLjIzMyAyLjc1IDIuNzV2MTguNWMwIDEuNTE3LTEuMjMzIDIuNzUtMi43NSAyLjc1em0tMTAuNS0yMi41Yy0uNjg5IDAtMS4yNS41NjEtMS4yNSAxLjI1djE4LjVjMCAuNjg5LjU2MSAxLjI1IDEuMjUgMS4yNWgxMC41Yy42ODkgMCAxLjI1LS41NjEgMS4yNS0xLjI1di0xOC41YzAtLjY4OS0uNTYxLTEuMjUtMS4yNS0xLjI1eiIgZmlsbD0iIzZjNmM2YyIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgc3R5bGU9IiI+PC9wYXRoPjwvZz48L3N2Zz4=);*/
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiBmaWxsPSIjNmM2YzZjIiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik04NC40IDg0LjR2MTMyaDEzMnYtMTMyem0yNi40IDI2LjRIMTkwVjE5MGgtNzkuMTk5em0yNi40IDI2LjRoMjYuNHYyNi40aC0yNi40em0xNTguMzk5LTUyLjgwMXYxMzJoMTMydi0xMzJ6bTI2LjQgMjYuNGg3OS4xOTl2NzkuMTk5SDMyMnptMjYuNCAyNi40aDI2LjR2MjYuNGgtMjYuNHptLTUyLjggMTU4LjR2MTMyaDEzMnYtMTMyek0zMjIgMzIyaDc5LjE5OXY3OS4xOTlIMzIyem0yNi4zOTkgMjYuMzk5aDI2LjR2MjYuNGgtMjYuNHptLTI2NC01Mi4zNnYxMzJoMTMydi0xMzJ6bTI2LjQgMjYuNGg3OS4xOTl2NzkuMTk5SDExMC44em0yNi40IDI2LjRoMjYuNHYyNi40aC0yNi40ek0yNDIuOCA4NC40aDI2LjR2MzQzLjUxOGgtMjYuNHoiIHBhaW50LW9yZGVyPSJzdHJva2UgZmlsbCBtYXJrZXJzIi8+PHBhdGggZD0iTTQyMi44MzUgMjQyLjh2MjYuNEg4OS4wMnYtMjYuNHptMzIuMDQ1IDk3LjY4aDI2LjR2MTQwLjhoLTI2LjR6IiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIvPjxwYXRoIGQ9Ik0zNDAuNDggNDU0Ljg4aDE0MC44djI2LjRoLTE0MC44eiIgcGFpbnQtb3JkZXI9InN0cm9rZSBmaWxsIG1hcmtlcnMiLz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgMjU2IDI1NikiPjxwYXRoIGQ9Ik00NTQuODggMzQwLjQ4aDI2LjR2MTQwLjhoLTI2LjR6IiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIvPjxwYXRoIGQ9Ik0zNDAuNDggNDU0Ljg4aDE0MC44djI2LjRoLTE0MC44eiIgcGFpbnQtb3JkZXI9InN0cm9rZSBmaWxsIG1hcmtlcnMiLz48L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDI1NiAyNTYpIj48cGF0aCBkPSJNNDU0Ljg4IDM0MC40OGgyNi40djE0MC44aC0yNi40eiIgcGFpbnQtb3JkZXI9InN0cm9rZSBmaWxsIG1hcmtlcnMiLz48cGF0aCBkPSJNMzQwLjQ4IDQ1NC44OGgxNDAuOHYyNi40aC0xNDAuOHoiIHBhaW50LW9yZGVyPSJzdHJva2UgZmlsbCBtYXJrZXJzIi8+PC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDkwIDI1NiAyNTYpIj48cGF0aCBkPSJNNDU0Ljg4IDM0MC40OGgyNi40djE0MC44aC0yNi40eiIgcGFpbnQtb3JkZXI9InN0cm9rZSBmaWxsIG1hcmtlcnMiLz48cGF0aCBkPSJNMzQwLjQ4IDQ1NC44OGgxNDAuOHYyNi40aC0xNDAuOHoiIHBhaW50LW9yZGVyPSJzdHJva2UgZmlsbCBtYXJrZXJzIi8+PC9nPjwvc3ZnPg==");
}



.dv-scan-wrap .scan_btn {
    height: 45px;
    width: 45px !important;
    background-color: #e6e6e6;
    margin-top: 0em;
    position: absolute;
    right: 0px;
    /*top:-3px;*/
}


.scan_wrap_head {
    background: #647585;
    color: #fff;
    padding: 0.5em 1em;
    margin: -1em;
    margin-bottom: 1em;
    text-align: right;
}

.q2-scan-btn-wrap {
    width: 50%;
    padding: 0.5px;
    float: left;
    box-sizing: border-box;
}

    .q2-scan-btn-wrap > .btn, .scan_upload_wrapper > .btn {
        width: 100%;
        font-size: 1.1em !important;
        /*background:#2196f3;*/
        border-radius: 0px;
        color: #fff;
        outline: none !important;
        padding: 6px;
        height: 95px !important;
        margin-bottom: 0em !important;
    }

        .q2-scan-btn-wrap > .btn > img {
            width: 25%;
            display: block;
            margin: auto;
            margin-bottom: 5px;
        }

        .scan_upload_wrapper > .btn > img {
            width: 12.5%;
            display: block;
            margin: auto;
            margin-bottom: 5px;
        }

.scan_cam_wrapper, .scan_upload_wrapper {
    width: 100%;
    /*margin-top: 1em;*/
}

    .scan_cam_wrapper > * {
        width: 100% !important;
    }

    .scan_cam_wrapper[id*='barcode_']>video{
        min-width:241px;
        max-height:182px;
    }

    .scan_cam_wrapper > canvas.drawingBuffer{
        display:none;
    }

.scan_upload_wrapper {
    min-height: 170px;
}

.qr-upload-err-msg {
    color: #f00;
    font-size: 12px;
}
/*@media(max-width:768px) {
    .scan-input {
        width:80%;        
    }
}*/

/*-------------------Scan Wrap new styles--------------------------------*/

/*.dv-scan-wrap .scan_btn {
    height: 31px;
    width: 35px !important
}*/

.trackIn_wrapper {
    padding: 0 0 25px 0;
    margin: 0;
    background: #fff;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.34);
}

    .trackIn_wrapper > div {
        padding: 25px;
    }

.scan_wrapper {
    width: 75vW;
    max-width: 250px;
    background-color: #fff;
    color: #fff;
    text-align: left;
    border-radius: 3px;
    position: absolute;
    font-size: 1em;
    box-shadow: 0px 0px 5px 0px #666;
    z-index: 1000;
    right: 0px;
    padding: 0.25em !important;
}

    .scan_wrapper.viewQRpanel {
        top: 162px;
        right: 315px;
    }



.scan_wrap_head {
    /*margin-top: 0 !important;
    padding: 0.25em;
    border-radius: 50%;
    background: #383838;
    color: #ffffff;
    font-weight: normal;
    margin-bottom: 0;
    font-size: 12px;
    position: absolute;
    right: 0.6em;
    top: -0.6em;
    width: 1.6em;
    height: 1.6em;*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: absolute;
    top: -10px;
    right: -10px;
    /* margin-left: 45%; */
    background-color: #000000;
    border-radius: 50%;
    color: #ffffff;
    width: 1.9em;
    height: 1.9em;
    font-size: 0.8em;
    padding: 0px;
    margin: 0px;
    border: solid 3px #fff;
    box-sizing: content-box;
    box-shadow: 0px 0px 7px 0px rgba(34, 34, 34, 0.35);
}

.q2-scan-btn-wrap > .btn, .scan_upload_wrapper > .btn {
    background-color: #fff !important;
    border-radius: 7px !important;
    border: none !important;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 39%);
    font-size: 15px !important;
    color: #383838;
    outline: none !important;
    padding: 1px;
    height: 102px !important;
    max-width: 102px !important;
    margin-bottom: 0.5em !important;
}

.q2-scan-btn-wrap, .scan_upload_wrapper {
    font-size: 12px;
    color: #383838;
    width: 50%;
    padding: 0px 0.5em !important;
    margin: 0.75em 0px;
    float: left;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scan_upload_wrapper {
    width: 100% !important;
}

.scan_overlay {    
    position: fixed;
    width: 100vW;
    height: 100vH;
    top: 0px;
    left: 0px;
    z-index: 999;
    background: rgba(255,255,255,0.7);
}


@media(max-width: 768px) {
    /*.dv-scan-wrap .scan_btn {
        top: 14px;
    }*/
    .scan_wrapper {
        width: 95% !important /*250px*/;
        max-width: 100% !important;
    }
        .scan_wrapper.viewQRpanel {
            top: 304px;
            right: 10px;
        }
    .q2-scan-btn-wrap,.q2-scan-btn-wrap > .btn, .scan_upload_wrapper > .btn,.scan_upload_wrapper {
        font-size: 13px !important;
    }
    .scan_cam_wrapper[id*='barcode_'] > video, .scan_cam_wrapper[id*='reader_'] > video {
        min-width: 100% !important;
        max-height: 100%;
    }
    #qr-shaded-region {
        border: none !important;
        inset: unset !important;
    } 
}

/*------------------------------------------------Option picker styles-------------------------------------------*/

.dv-sc-select {
    margin-top: 0px;
    margin-bottom: 0px;
}

    .dv-sc-select.dv-option-pick-focus {
        /* padding: 2%; */
        padding-top: 0px;
        box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.17);
        /*position: absolute;*/
        width: 100%;
        margin-bottom: 0px;
        margin-top: 0px;
        padding: 0px;
    }

.dv-input-select {
    height: 45px;
    margin-top: 0px;
    margin-bottom: 10px;
    font-weight: normal;
    padding: 0px;
    padding-right:2em !important;
    font-size: 13px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDEyLjcgMTIuNyIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy4wNzQgNS43bDMuMjkxIDMuMjkxTDkuNjcyIDUuNzVsLS44MzUtLjg2OS0yLjQzOSAyLjQ4OS0yLjQwNS0yLjQ4OXoiIGZpbGw9IiMzOWI3OTciLz48L3N2Zz4=);
    background-repeat: no-repeat, repeat;
    background-position: right .20em top 50%, 0 0;
    background-size: 1.65em auto, 100%;
    border-radius: 2px;
    background-color: #ffffff;
    border: none;
    /*border-bottom: 2px solid #4cbea1;*/
    transition: border linear 0.2s, box-shadow linear 0.2s;
    box-sizing: border-box;
    width: 100%;
    min-height: 30px;
    outline: none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.dv-sc-select.dv-option-pick-focus .dv-input-select {
    margin: 0%;
    width: 100%;
    /*margin-top: 5px !important;
    margin-bottom: 25px !important;*/
    padding:0px 2% !important;
}

    .dv-input-select:focus {
        outline: none;
    }

.optionpicker_wrap {
    max-height: 29vh;
    width: calc(100% - 10px);
    padding: 3px 5px !important;
    /* padding-left: 2%; */
    margin-top: 0px;
    overflow-x: auto;
    position: absolute;
    box-sizing: content-box;
    z-index: 100;
    background: #fff;
    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.17);
    display:none;
}

.dv-sc-select.dv-option-pick-focus .optionpicker_wrap{
    display:block;
}

.opt-list-item {
    color: #989898;
    font-size: 12px;
    padding: 5px !important;
    min-height: 1.7em;
    border-radius: 2px;
    margin: 3px 0px;
    margin-left: 0px;
    border:solid 1px #ddd;
    /*border-left: 4px solid #888888;*/
    background-color: #ffffff;
    /*box-shadow: 0 0px 5px 0 rgb(0 0 0 / 17%);*/
    overflow-wrap: break-word;
    cursor: pointer;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    line-height: 1.15em;
    word-break:break-word;
}

.opt-list-item-hg {
    color: var(--color);
    display: flex;
    align-items: center;
    margin: 1em 0px;
    padding: 7px !important;
    box-shadow: none;
    border: dashed 1px var(--background2);
    border-left-width: 4px;
    border-left-style: solid;
}
.opt-list-item-hg:before{
    content:"*";
    margin-right:0.5em;
}

.inactive_sep {
    display: none;
    margin: 6px -5px 6px -5px;
    padding: 0.75em 10px !important;
    border-bottom: dashed 1px #888;
    /* background: #888; */
    /* color: #fff; */
    text-align: center;
    font-weight:700;
}

    .inactive_sep:before, .inactive_sep:after {
        content: "---";
        display:inline;
        font-weight:normal;
    }

    /*.inactive_sep span {
        font-weight: 700;
    }*/

    .optionpicker_wrap:has(.opt-list-item-inactive) .inactive_sep {
        display: block;
    }

.opt-list-item-inactive {
    background-color: #dfdfdf;
    color: #6a6a6a;
}

.opt_picker_overlay {
    width: 100%;
    height: 150vh;
    background: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
}

.control-form.cost-code-select {
    margin-bottom: 15px;
}

/*.cost-code-select .dv-sc-select.dv-option-pick-focus{
    margin-top:10px;
    padding:0px;
}

    .cost-code-select .dv-sc-select.dv-option-pick-focus .dv-input-select {
        margin-top: 5px !important;
        margin-bottom: 25px !important;
    }*/
@media(min-width:991px) {
    #MobFilterWrapper .dv-sc-select.dv-option-pick-focus {
        margin-bottom:0px;
    }
}

.filter-control:has(.q2-option-picker) {
    margin-bottom: 15px !important;
}

div.mob-filter_div.WOFiter_wrapper .filter-control:has(.q2-option-picker) {
    margin-bottom: 5px !important;
}

/*-----------------------time-picker styles-------------------------*/
.timepick {
    padding: 0.5em;
    border: solid 1px #ccc;
    color: #555;
    width: 99%;
    max-width: 450px;
    /* border-right: solid 30px #ccc; */
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDYuMzUgNi4zNSIgZmlsbD0iIzVjNWM1YyIgZmlsbC1vcGFjaXR5PSIuOTM3IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik01LjUxMyAxLjYyM0MzLjg0Mi0uNDMxIDEuODIxLjk4OCAxLjgyMS45ODggMS40NTMgMS4zMDYuMzM0IDIuMDkxLjg2OSA0LjA0NXMyLjkwNyAxLjczNyAyLjkwNyAxLjczN3YuNDkzUy44ODUgNi43MzUuMTg0IDQuMjYzYzAgMC0uNzE4LTEuOTIxLjY4NS0zLjE5MSAwIDAgLjk3Ni0xLjUwNCAzLjY5My0uOTQ4IDAgMCAxLjA1MS40ODQgMS4yOTkgMS4wOThWLjQxOWguNTkxVjIuMzhINC42MDl2LS42MDJ6Ii8+PHBhdGggZD0iTTMuMDkgMS4wMjJWMi45NkwxLjk4IDQuMDYybC40MDEuNDAxTDMuNiAzLjMwMlYuOTg4eiIvPjxwYXRoIGQ9Ik00LjM3NyA1LjYwN2guNTE4di4zNjdoLS41MTh6bTEuMDM1LS44NjhoLjU1MXYuNDc2aC0uNTUxem0uNTI2LTEuMTdoLjQ4NHYuNTc2aC0uNDg0eiIgcGFpbnQtb3JkZXI9InN0cm9rZSBmaWxsIG1hcmtlcnMiLz48L3N2Zz4=') no-repeat 99%;
    background-size: 19px;
    outline: none;
}

#pickTime {
    position: absolute;
    z-index: 2;
    border-radius: 5px;
    margin-top: -10px;
    width: 100%;
    max-width: 320px;
    box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35);
    min-width:260px;
    /* border: solid 2px #4058af; */
}

    #pickTime:before {
        position: absolute;
        content: "";
        top: -7px;
        left: 20px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 7px 7px 7px;
        border-color: transparent transparent #4058af transparent;
        z-index: 999;
    }
.duration_flx_wrap {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-items: center;
}

.timepicker_wrap {
    padding: 0.75em;
    border: solid 1px #9aa8d9;
    border-right: none;
    border-radius: 5px 0px 0px 5px;
    background: rgb(240, 240, 240);
    background: linear-gradient(0deg, rgb(252, 252, 252) 0%, rgb(247, 247, 247) 100%);
}
    

    .timepicker_wrap .time, .timepicker_wrap .mins {
        /*float: left;*/
        width: 100%;
        margin: 10px 0%;
        clear: both;
        display: flex;
        align-items: center;
    }
        .timepicker_wrap .mins{
            margin-top:0px;
        }

        .timepicker_wrap .time .labelH, .timepicker_wrap .mins .labelM {
            width: 35%;
            float: left;
            text-align: left;
        }

            .timepicker_wrap .time .labelH + div, .timepicker_wrap .mins .labelM + div {
                width: 65%;
                float: left;
                display:flex;
            }

        .timepicker_wrap .time .ti_tx, .timepicker_wrap .mins .ti_tx {
            width: calc(100% - 80px);
            height:2em;
            float:right;
            margin-left: 0;
            z-index: 10;
            text-align: center;
            font-size: 1.3em;
            color: #999;
            border: solid 1px #ddd;
            border-left:none; border-right:none;
            background: transparent;
            margin: 0px;
        }

    .timepicker_wrap .prev, .timepicker_wrap .next {
        margin: 0px;
        padding: 0px;
        /*height: 30px;*/
        width: 40px;
        border: solid 1px #dcdcdc;
        /*background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(240, 240, 240) 100%);*/
        cursor: pointer;
        align-self:stretch;
    }

    .timepicker_wrap .prev {
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDYuMzUgNi4zNSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy4wNzQgMS41ODhMMCA0LjY0NGg2LjIzMXoiIGZpbGw9IiM3ZDdjN2MiLz48L3N2Zz4=') no-repeat center, linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(240, 240, 240) 100%);
        background-size: 17px;
    }

    .timepicker_wrap .next {
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDYuMzUgNi4zNSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy4xNTcgNC42NDRsMy4wNzQtMy4wNTdIMHoiIGZpbGw9IiM3ZDdjN2MiLz48L3N2Zz4=') no-repeat center, linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(240, 240, 240) 100%);
        background-size: 17px;
    }
.timepicker_applyBtn {
    padding: 0px;
    border-radius: 0px 5px 5px 0px;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIxNyIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMSA4LjgxM2w2LjI1IDYuNTFMMjEgMSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-size: auto 13px;
    background-position: center;
    background-color: #4058af;
    box-shadow: 5px 0px 12px -7px rgba(0,0,0,0.32) inset;
    cursor: pointer;
}
.timepicker_applyBtn:hover {
    background-color: #2544b5;
}

/*----------------------------------------DATE-TIME PICKER styles------------------------------------*/
.q2DateTimePicker {
    margin-top: 5px;
    margin-bottom: 25px;
}
.DTTmpickWrap {
    display: flex;
    align-items:stretch;
}
.DTTmpickWrap input{
    margin-bottom:0px !important;
}

    .DTTmpickWrap button {
        padding: 0px;
        flex: 0 0 40px;
        background-size: 19px;
        background-position: center;
        background-repeat: no-repeat;
        border-bottom: 2px solid var(--background1) !important;
    }

        .DTTmpickWrap button.active {
            background-color: var(--background1);
        }

        .DTTmpickWrap button.datepickBtn {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDYuMzUgNi4zNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODY4Njg2IiB4bWxuczp2PSJodHRwczovL3ZlY3RhLmlvL25hbm8iPjxwYXRoIGQ9Ik0uMTY3LjYyMWg2LjAyNHY1LjU1NkguMTY3eiIgc3Ryb2tlLXdpZHRoPSIuMzM1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIgc3Ryb2tlLW9wYWNpdHk9Ii45NjkiLz48cGF0aCBkPSJNLjEzNiAxLjc3OGg2LjA4MyIgc3Ryb2tlLXdpZHRoPSIuMzY1IiBzdHJva2Utb3BhY2l0eT0iLjk2OSIvPjxwYXRoIGQ9Ik0xLjM0MS4wM3YxLjE1OE01LjA4NS4wM3YxLjE1OCIgc3Ryb2tlLW9wYWNpdHk9Ii45NjkiIHN0cm9rZS13aWR0aD0iLjQ2NSIvPjxwYXRoIGQ9Ik0yLjU5MyAyLjQzOXYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzNtLTIuNDc1LjQzMnYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzNtLTIuNTE2LjQ1MnYuNjczbS0xLjI0LS42Njd2LjY3M20yLjU0LS42NzR2LjY3M20xLjIxNi0uNjg0di42NzMiIHN0cm9rZS1vcGFjaXR5PSIuOTY5IiBzdHJva2Utd2lkdGg9Ii42NjUiLz48L3N2Zz4=');
        }
        .DTTmpickWrap button.timepickBtn {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiM5OTkiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNOS45ODEgMEM0LjQ2Ni4wMTEgMCA0LjQ4NSAwIDEwYzAgNS41MjMgNC40NzcgMTAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTAgMHptLjAzNSAxLjE0M2MyLjMzMyAwIDQuNTcuOTI2IDYuMjE5IDIuNTc2czIuNTc2IDMuODg2IDIuNTc2IDYuMjE5LS45MjYgNC41Ny0yLjU3NiA2LjIxOS0zLjg4NiAyLjU3Ni02LjIxOSAyLjU3Ni00LjU3LS45MjYtNi4yMTktMi41NzYtMi41NzYtMy44ODYtMi41NzYtNi4yMTkuOTI2LTQuNTcgMi41NzYtNi4yMTkgMy44ODYtMi41NzYgNi4yMTktMi41NzZ6IiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIvPjxwYXRoIGQ9Ik0xMC42NzggOS42OTNsMy41OTcgMy41OTZzLjM3Mi40MjMtLjAxNS44NDctLjg3Ny4wMzgtLjg3Ny4wMzhsLTMuNzkyLTMuODExcy0uMTctLjE3NS0uMTctLjQ2MmwuMDA1LTUuODk2cy4wMDUtLjU0NS42MjctLjYxOWMwIDAgLjU0Mi0uMDA4LjYzMi42eiIvPjwvc3ZnPg==");
        }

            .DTTmpickWrap button.timepickBtn.active {
                background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNOS45ODEgMEM0LjQ2Ni4wMTEgMCA0LjQ4NSAwIDEwYzAgNS41MjMgNC40NzcgMTAgMTAgMTBhMTAgMTAgMCAwIDAgMTAtMTBBMTAgMTAgMCAwIDAgMTAgMHptLjAzNSAxLjE0M2MyLjMzMyAwIDQuNTcuOTI2IDYuMjE5IDIuNTc2czIuNTc2IDMuODg2IDIuNTc2IDYuMjE5LS45MjYgNC41Ny0yLjU3NiA2LjIxOS0zLjg4NiAyLjU3Ni02LjIxOSAyLjU3Ni00LjU3LS45MjYtNi4yMTktMi41NzYtMi41NzYtMy44ODYtMi41NzYtNi4yMTkuOTI2LTQuNTcgMi41NzYtNi4yMTkgMy44ODYtMi41NzYgNi4yMTktMi41NzZ6IiBwYWludC1vcmRlcj0ic3Ryb2tlIGZpbGwgbWFya2VycyIvPjxwYXRoIGQ9Ik0xMC42NzggOS42OTNsMy41OTcgMy41OTZzLjM3Mi40MjMtLjAxNS44NDctLjg3Ny4wMzgtLjg3Ny4wMzhsLTMuNzkyLTMuODExcy0uMTctLjE3NS0uMTctLjQ2MmwuMDA1LTUuODk2cy4wMDUtLjU0NS42MjctLjYxOWMwIDAgLjU0Mi0uMDA4LjYzMi42eiIvPjwvc3ZnPg==");
            }

        .DTTmpickWrap button.timepickBtn:before{
            content: '';
            position: relative;
            display: block;
            height: 65%;
            border-left: dashed 1px var(--background1);
        }

        
        .DTTmpickWrap button.active + *:before,
        .DTTmpickWrap button.active:before {
            display: none;
        }

@media(min-width:991px) {
    .q2DateTimePicker .datepick_wrap {
        top: auto !important;
    }
}
@media(max-width:991px) {
    .q2DateTimePicker .datepick_wrap {
        top: 0px !important;
    }
}
.q2DateTimePicker #pickTime {
    margin-top: 5px;
}

/*-----------------------------------------IMAGE GALLERY STYLES-------------------------------------------------------*/

.slider_container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider_bg_wrapper {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    background-color: rgba(22,22,22,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}

.slider_outer_wrapper {
    padding: 20px;
    width: 75%;
    max-width: 550px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.17);
}

.slider_bg_wrapper .k-remove-button {
    /*position: relative;
    width: calc(100% + 40px);
    border-radius: 0px;
    margin-bottom: 20px;
    margin-left: -20px;
    margin-top: -20px;
    top: 0px;
    left: 0px;
    border: none;
    justify-content: flex-end;
    padding-right: 10px;*/
    position: relative;
    width: 75%;
    height: 1.8em;
    font-size: 1em;
    border-radius: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    border: none;
    justify-content: flex-end;
    /*padding-right: 10px;*/
    max-width: 550px;
    background-color: var(--background1);
}

    .slider_bg_wrapper .k-remove-button:hover{
        color:#000;
    }

    .slider {
        display: flex;
        flex-wrap: wrap;
    }


/* Hide the images by default */
    .slider .mySlides {
        max-height: 50vh;
        overflow: auto;
        margin: auto;
        flex: 0 0 100%;
    }

.mySlides img {
    display: block;
    margin: auto;
    max-width: 100%;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: relative;
    top: 40%;
    width: auto;
    padding: 16px 5px;
    /* margin-top: -50px; */
    color: black;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */

.slider .prev, .slider .next {
    color: white;
    flex: 0 0 40px;
    padding: 0px;
    height: 50px;
    align-self: center;
    justify-content: center;
}

    .slider .prev:hover,
    .slider .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

/* Number text (1/3 etc) */
.numbertext {
    /*color: #919191;*/
    font-size: 12px;
    padding: 8px 0px 0px 0px;
    position: relative;
    text-align: center; /*right;*/
    top: 0;
    flex: 0 0 100%;
}

/* Container for image text */
.caption-container {
    text-align: center;
    background-color: #222;
    padding: 2px 16px;
    color: white;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Six columns side by side */
.thumb_panel {
    position: relative;
    bottom: 0px;
    display: flex;
    justify-content:space-evenly;
    width: 100%;
}

.column {
    width: 28.00%;
    padding: 1%;
    margin: 0.33%;
    box-shadow: 0 2px 8px 0px rgba(0,0,0,0.17);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    position:relative;
}

    .column .k-remove-button {
        position: absolute;
        top: -1em;
        right: -1em;
        width: 1.75em;
        height: 1.75em;
        font-size: 1em;
        margin-left: auto;
        align-self: stretch;
    }

    .column img {
        /* top: -32px; */
        position: relative;
        width: 100%;
        height: auto;
        align-self: stretch;
        margin-bottom: auto;
    }
        /* Add a transparency effect for thumnbail images */
.demo {
    opacity: 0.6;
}

    .active,
    .demo:hover {
        opacity: 1;
    }

    @media(min-width:991px){
        .column .img_div{
            max-height:250px;
            overflow:hidden;
        }
    }

@media(max-width:991px) {
    .column .img_div {
        max-height: 20vh;
        overflow: hidden;        
    }
    .column button.k-remove-button:not(.ng-hide) + .img_div {
        position: relative;
        /*top: -25px;*/
    }
}