body {
    font-family: 'Open Sans', sans-serif;
}

html, body {
    height: 100%;
}

.headerContainer {
    background-color: #08a7f8;
    min-height: 72px;
    box-shadow: 0 0 7px 2px rgba(0,0,0,0.3);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

.leftMenuContainer, .rightContainer {
    padding-top: 40px;
}

.leftMenuContainer {
    width: 200px;
    position: fixed;
    left: 0;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 2px 3px 2px rgba(0,0,0,0.15);
}

.rightContainer {
    width: calc(100% - 200px);
    margin-left: 200px;
    padding: 15px 0;
    background-color: #f5f5f5;
    min-height: calc(100% - 40px);
}

.TableView {
    display: none;
}

.usercontainer {
    padding-left: 15px;
    padding-right: 15px;
}

.usericon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
}

.userdetails p {
    margin: 0;
}

.username {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.usergroup {
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    font-style: italic;
}

.userdetails {
    float: left;
    margin-top: 1px;
    margin-left: 10px;
}

.menucontainer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menuicon {
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    margin-left: 10px;
}

.flexitime {
    background-image: url(../images/flexitime.png);
}

.flexiscreen {
    background-image: url(../images/flexiscreen.png);
}

.flexiverify {
    background-image: url(../images/flexiverfiy.png);
}

.menucontainer ul li a {
    display: block;
    text-decoration: none;
    padding: 17px 15px;
}

.menucontainer ul li span {
    display: inline-block;
}

.menutext {
    font-size: 14px;
    font-weight: 600;
    color: #454545;
    margin-left: 15px;
}

.activemenu a {
    background-color: #f3f3f3;
}

.menucontainer ul li:hover a {
    background-color: #eeeeee;
}

.activemenu .flexitime {
    background-image: url(../images/flexitime_active.png);
}

.activemenu .flexiscreen {
    background-image: url(../images/flexiscreen_active.png);
}

.activemenu .flexiverify {
    background-image: url(../images/flexiverfiy-active.png);
}

.activemenu .menutext {
    color: #0ea1ee;
}

.welcometext {
    font-size: 15px;
    color: #505457;
    font-weight: 700;
    margin-top: 45px;
}

.contenttext {
    padding: 0 20px;
}

.searchdesign {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
    padding: 15px 25px;
    margin: 35px 0 40px;
}

.commonbt {
    background-color: #1cabf7;
    border-radius: 2px;
    min-width: 110px;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    border: none;
}

.expandall {
    min-width: 88px;
    border-radius: 2px;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    cursor: pointer;
    max-width: 88px;
    position: absolute;
    right: 100px;
    font-size: 13px;
    font-weight: 300;
}

.expandall-bg {
   background-color: #1cabf7;
}


.collapseall-bg {
    background-color: #376b86;
}


input[type="text"] {
    max-width: 120px;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 7px 5px;
    background-color: #f9f9f9;
}

.searchdesign label {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    margin-right: 8px;
    margin-left: 15px;
}

.searchbt {
    margin-left: 30px;
}

.flexiImageConatiner, .flexiTimeConatiner, .flexidetailContainer, .verifyScreenViewContainer {
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
    margin-top: 20px;
    padding: 15px;
}

.verifyScreenViewContainer {
    overflow: auto;
}

.flexidetailcontainer{width: 100%; position: relative;overflow: auto;}
.flexi-id, .flexidiplaytime {
    font-size: 15px;
    font-weight: 400;
    color: #989898;
    display: inline-block;
}
.flexi-id span{font-weight: 700;color: #333; padding-right:8px;}
.flexisprate {
    display: inline-block;
    margin: 0 11px;
    color: #e0e0e0;
    top: -2px;
    position: relative;
}

.flexicheckbox {
    display: inline-block;
    position: relative;
    top: 2px;
}
.flexiTimeConatiner .flexi-date{width: 95%;word-wrap: break-word;}
.flexiImageList {
    width: 175px;
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.15);
    margin-right: 17px;
    margin-bottom: 50px;
    display: inline-block;
}

.imageThumbnail {
    height: 150px;
    display: block;
    background-color: #f9f8f7;
    overflow: hidden;
}

    .imageThumbnail a {
        height: 150px;
        display: table;
        width: 100%;
    }

        .imageThumbnail a span {
            display: table-cell;
            vertical-align: middle;
        }

    .imageThumbnail img {
        width: 100%;
    }

.imageTime {
    background-color: #f6eee1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: bold;
    color: #646061;
}

.flexi-date {
    margin-bottom: 50px;
    margin-top: 5px;
}

footer p {
    color: #565656;
    font-size: 14px;
    font-weight: 400;
    margin: 19px 0;
    text-align: right;
}

.leftlogo {
    display: inline-block;
    margin: 15px;
    width: 170px;
}

    .leftlogo a {
        display: inline-block;
    }

.siteheading, .respmenu {
    display: inline-block;
}

.siteheading {
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
}

.respmenu {
    margin: 0 15px 0 0px;
}

.siteheading {
    position: relative;
    top: 2px;
    margin-left: 10px;
}

.imageThumbnail {
    position: relative;
}

.load {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 69, 103, 0.5);
    display: none;
}

    .load:after {
        position: absolute;
        background-image: url(../images/spinner.svg);
        width: 50px;
        height: 50px;
        top: 50%;
        left: 50%;
        margin-top: -25px;
        margin-left: -25px;
        content: '';
    }

.imageload .load {
    display: block;
}

.spinner {
    margin: 100px auto;
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px;
    display: none;
}

    .spinner > div {
        background-color: #333;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    .spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    .spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    .spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    .spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

@-webkit-keyframes sk-stretchdelay {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4);
    }

    20% {
        -webkit-transform: scaleY(1.0);
    }
}

@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
    }
}
/*check box start*/
.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 14px;
}

    .control input {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

.control__indicator {
    position: absolute;
    top: 0px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #ccc;
}

.control input:checked ~ .control__indicator {
    background: #2aa1c0;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #0e647d;
}

.control input:disabled ~ .control__indicator {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 8px;
    top: 5px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}
/*check box end*/
.imagepopup .ui-dialog {
    padding: 0;
    border: 0px solid #c5c5c5 !important;
    box-shadow: 0 0 8px 0px rgba(0,0,0,0.8);
}

.imagepopup .ui-widget-overlay {
    background-color: rgba(0,0,0,0.75);
    opacity: 1;
}

.imagepopup .ui-widget-header {
    border: 0px solid #dddddd;
    background: #ffffff;
}

.imagepopup .ui-dialog-title {
    visibility: hidden;
}

.imagepopup .ui-dialog .ui-dialog-content {
    padding: 0px;
}

.popcontainer {
    display: flex;
    height: 100%;
}

.bigimage {
    padding: 0px;
    width: calc(100% - 300px);
    height: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .bigimage span {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font: 0/0 a;
    }

        .bigimage span:before {
            content: ' ';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

.dummy {
    padding-top: 100%;
}

.bigimage img {
    max-height: 100%;
    display: inline-block;
}

.popupright {
    width: 300px;
    background-color: #fafafa;
    border-left: 1px solid #e8e8e8;
}
.daterowspan{border-right:1px solid #f1f1f1;}
.popnext {
    width: 13px;
    height: 21px;
    background-image: url(../images/next-arrow.png);
    background-color: transparent;
    border: none;
    outline: none;
    background-repeat:no-repeat;
}

.popprev {
    width: 13px;
    height: 21px;
    background-image: url(../images/prev-arrow.png);
    background-color: transparent;
    border: none;
    outline: none;
    background-repeat:no-repeat;
}

.nextcontainer {
    text-align: center;
    margin: 15px 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nextcontainer span {
        top: 0px;
        font-size: 15px;
        font-weight: 700;
        padding: 0 15px;
        position: relative;
    }

.imagepopup .ui-dialog .ui-dialog-buttonpane {
    border: 0px solid #dddddd;
    margin-top: 0;
}

.ui-draggable .ui-dialog-titlebar {
    display: none;
}

.popupright {
    padding: 15px 0px;
    position: relative;
}

.contentcheckbox p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.notescontainer p {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(0,0,0,0.3);
}

.notescontainer textarea {
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    padding: 7px 5px;
    background-color: #fff;
    min-height: 120px;
    width: 100%;
}

.bottombutton { /*position: absolute;bottom: 35px;right: 0;*/
    width: 100%;
    text-align: right;
    margin-top: 20px;
    display: inline-block;
    padding-right: 15px;
}

.cancelbt.commonbt {
    background-color: #e61616;
}

.headeruser {
    float: right;
    margin: 22px 15px 0 0px;
    min-height: 56px;
    padding: 0 10px;
}

.headeruser {
    position: relative;
}

.contentcheckbox {
    padding: 25px 15px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

.notescontainer {
    padding: 15px 15px 10px;
}

.headeruser .usericon {
    width: 36px;
    height: 36px;
}

    .headeruser .usericon img {
        width: 100%;
    }

.headeruser {
    position: relative;
}

/*menu small start*/
.menuopen .leftMenuContainer {
    width: 75px;
    transition: 0.1s;
}

.menuopen .rightContainer {
    width: calc(100% - 75px);
    margin-left: 75px;
}

.menuopen .menucontainer ul li span.menutext {
    display: none;
}

.menuopen .leftlogo {
    width: 55px;
    overflow: hidden;
    float: left;
}

.menuopen .respmenu {
    margin-top: 30px;
}
/*menu small end*/
.flexiTimeConatiner .flexi-date {
    float: left;
}

.flexiTimeConatiner .flexidropdown {
    float: right;
}

.flexidropdown.normaltime {
    width: 13px;
    height: 9px;
    background-image: url(../images/normal.png);
    margin-top: 12px;
}

.flexihour {
    display: inline-block;
}

    .flexihour span {
        font-weight: 700;
        margin-right: 8px;
    }

.TableView {
    width: 100% !important;
    margin-top: 25px;
}

.TimeContainer .TableView tr th {
    border: none;
    background-color: #fafafa;
    padding: 12px 10px;
}

.TimeContainer .TableView tr td {
    border-bottom: 1px solid #f1f1f1;
    border-top: 0px solid #f1f1f1;
    background-color: #fff;
    padding: 17px 10px;
    min-width: 100px;
}

.TimeContainer .TableView tr:last-child td {
    border-bottom: 0px solid #f1f1f1;
}

.flexiTimeConatiner .flexi-date {
    margin-bottom: 8px;
}

.flexiTimeConatiner .clicktime {
    cursor: pointer;
}

.allid, .allTotals {
    font-size: 15px;
    color: #666666;
    display: inline-block;
}

.alltotal span {
    font-weight: 700;
    margin-right: 10px;
}

.alltotal {
    margin: 45px 0;
}

.screnimg {
    margin: 0 8px;
}

table.commontableview {
    width: 100% !important;
    margin-top: 15px;
}

    table.commontableview tr th {
        border: none;
        background-color: #fafafa;
        padding: 12px 10px;
        color: #666666;
    }

    table.commontableview tr td {
        border-bottom: 1px solid #f1f1f1;
        border-top: 0px solid #f1f1f1;
        background-color: #fff;
        color: #797979;
        padding: 17px 10px;
        min-width: 100px;
    }

.diplayresult {
    border: 1px solid #d7d7d7;
    border-radius: 8px;
    padding: 15px 25px;
    margin: 25px 0;
}

    .diplayresult p {
        font-size: 15px;
        color: #666666;
        font-weight: 500;
        display: inline-block;
        margin: 0;
    }

    .diplayresult span {
    font-weight: 700;
    margin-right: 8px;
    min-width:70px;
    display: inline-block;
    }

.verifyScreenViewContainer input[type="checkbox"] {
    margin: 0;
    position: relative;
    top: 2px;
}

.verifyScreenViewContainer table.commontableview tr:last-child td {
    border-bottom: 0px solid #f1f1f1;
    font-weight: 700;
}

.searchdesign .verifybt {
    margin-left: 30px;
    background-color: transparent;
    border: 1px solid #1cabf7;
    color: #1cabf7;
}

/*New check box start*/
.tablecheckbox {
    padding-right: 22px;
    display: inline-block;
    position: relative;
}

    .tablecheckbox .control1 {
        display: inline-block;
        padding-left: 0px;
        margin-bottom: 0px;
        cursor: pointer;
        font-size: 14px;
    }

        .tablecheckbox .control1 input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

    .tablecheckbox .control__indicator1 {
        position: absolute;
        top: 3px;
        left: 0;
        height: 14px;
        width: 14px;
        background-image: url(../images/checkbox.png);
    }


    .tablecheckbox .control1 input:checked ~ .control__indicator1 {
        background-image: url(../images/checked.png);
    }

    .tablecheckbox .control1 input[type="checkbox"]:disabled ~ .control__indicator1 {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .tablecheckbox .control__indicator1:after {
        content: '';
        position: absolute;
        display: none;
    }

    .tablecheckbox .control1 input:checked ~ .control__indicator1:after {
        display: block;
    }

    .tablecheckbox .control--checkbox1 .control__indicator1:after {
        left: 0px;
        top: 0px;
        width: 17px;
        height: 14px;
        background-image: url(../images/checked.png);
    }

.selectall {
    padding-left: 26px;
}
/*New check box end*/
.calcander {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

    .calcander:after {
        content: '';
        background-image: url(../images/calcander.png);
        width: 13px;
        height: 13px;
        position: absolute;
        top: 11px;
        right: 10px;
        pointer-events: none;
    }

.popupclosebt {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    background-color: #189ae2;
    border: 2px solid #fff;
    z-index: 100;
    font-size: 18px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    line-height: 27px;
}

.TimeContainer .TableView tr td.flexiid {
    word-break: break-all;
    min-width: 270px;
}

.TimeContainer .TableView tr td:last-child {
    white-space: nowrap;
}

.commontableview.clienttable tr td.flexiid {
    word-break: break-all;
    min-width: 500px;
}

.commontableview.clienttable tr td:last-child {
    white-space: nowrap;
}

.TableView {
    overflow: auto;
}
/*client view*/
.searchleft {
    float: left;
}

.searchright {
    float: right;
}

.searchdropdown {
    width: 190px;
    overflow: hidden;
    background-color: #fdfdfd;
    padding: 3px 0;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    position: relative;
    float: left;
    margin-right: 20px;
}

    .searchdropdown .ui-multiselect {
        text-align: left;
        background-color: #fff;
        border: none;
        outline: none;
    }

        .searchdropdown .ui-multiselect span.ui-icon {
            position: absolute;
            width: 20px;
            margin-left: 0;
            height: 18px;
            margin-top: 3px;
            border: none;
            right: 4px;
            transform: rotate(180deg);
            top: 1px;
            background-color: transparent;
        }

.commonbt.clientsearch {
    min-width: 88px;
    padding: 6px 0;
    font-size: 13px;
}

.ui-multiselect-menu .ui-multiselect-checkboxes label {
    display: inline-block;
    padding: 0 3px;
    font-size: 100%;
}

    .ui-multiselect-menu .ui-multiselect-checkboxes label input {
        margin: 0;
    }

.ui-multiselect-menu .check-box {
    display: inline-block;
}

.ui-multiselect-menu {
    width: 220px !important;
}

.dateView {
    width: 100% !important;
}

.twoslide {
    margin: 0 0px 0px 0px;
    padding: 5px 0px 10px 0px;
    border-bottom: 1px solid #f7f7f7;
}

.clienttable.commontableview tr:last-child td {
    border-bottom: 0px solid #f1f1f1;
}

.flexiTimeConatiner .twoslide .flexi-date {
    margin-bottom: 0;
}

.twoslide .flexihour, .twoslide .flexi-id {
    font-size: 13px;
}

.maintime + .dateView {
    margin-top: 10px;
}

.verify-icon {
    float: right;
    margin-top: 5px;
    margin-right: 15px;
}

.flexiTimeConatiner .twoslide .clicktime {
    padding: 0 10px;
}

.verfiyhead.tablecheckbox {
    margin-left: 25px;
}

.searchdesign .verfiyhead label {
    margin-left: 0;
}

.verfiyhead .selectall {
    padding-left: 20px;
    cursor: pointer;
}

.ui-widget {
    font-family: 'Open Sans', sans-serif;
}
/*Loader*/

.modalloading {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.5);
}

.modalloading-inner {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #d1cbcb;
}

body.loading {
    overflow: auto;
}

    body.loading .modalloading {
        display: block;
    }

.loader {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    left: 50%;
    margin-left: 10px;
    top: 50%;
    margin-top: -50px;
    overflow: hidden;
    position: absolute;
    background-image: url(../images/loading.png);
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(0,0,0,.1);
}


canvas {
    position: absolute;
    z-index: -1;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background-color: #08A7F8;
}

.counter {
    width: 100%;
    line-height: 100px;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.wait-txt {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 30px;
    color: #08A7F8;
    font-size: 16px;
    font-weight: bold;
}

.verfiyhead .selectall {
    padding-left: 20px;
    cursor: pointer;
}

.calcander input[type="text"] {
    cursor: pointer;
}

.alertmgs1 {
    width: 300px;
    height: 70px;
    background: #ffb7b7;
    border: 1px solid #e07373;
    border-radius: 4px;
    display: inline-block;
    animation: fade 2s forwards;
    -webkit-animation: fade 2s forwards;
    -moz-animation: fade 2s forwards;
    -o-animation: fade 2s forwards;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    position: absolute;
    bottom: 50px;
    right: 50px;
}

@-webkit-keyframes slidingPrice {
    0% {
        opacity: 0;
    }
    /* 0ms initial values */
    2.38% {
        opacity: 1;
    }
    /* 150ms half of animation */
    34.13% {
        opacity: 1;
    }
    /* 2150ms still at half of animation */
    36.51% {
        opacity: 0;
    }
    /* 2300ms back to initial */
    100% {
        opacity: 0;
    }
    /* 6300ms still at initial */
}

.alertmgs {
    -webkit-animation-name: slidingPrice;
    -webkit-animation-duration: 3000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 2s;
    position: fixed;
    bottom: 40px;
    right: 30px;
    width: 400px;
    height: 38px;
    background: #ffb7b7;
    border: 1px solid #e07373;
    border-radius: 4px;
    display: inline-block;
    padding: 2px 10px;
    line-height: 32px;
}

.alertmgs img {
    margin-right:10px;
}
    .alertmgs span {
        color: #000;
        font-weight: 600;
    }

.modal-dialog.infopopup {
    margin-top: -90px;
    top: 50%;
}

.infopopup .modal-header {
    background-color: #f8c208;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

    .infopopup .modal-header span {
        color: #5f5f5f;
        font-weight: 600;
        margin-left: 8px;
        top: 2px;
        position: relative;
    }

.infopopup .modal-body p {
    font-size: 15px;
    text-align: center;
    font-weight: 700;
    padding: 20px 0;
}

.infopopup .modal-footer {
    text-align: center;
}

.infopopup .commonbt {
    background-color: #5a5a5a;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

 .searchright {
        margin-top: 3px;
    }


@media screen and (max-width:1040px) {
    .searchleft, .searchright {
        float: unset;
    }

    .searchright {
        margin-top: 10px;
    }

    .searchdesign label:first-child {
        margin-left: 0;
    }
}

@media screen and (max-width:991px) and (min-width: 320px) {
    .diplayresult span { min-width:160px;}
    .leftlogo {
        width: 55px;
        overflow: hidden;
        float: left;
    }

    .leftMenuContainer {
        width: 0px;
        overflow: hidden;
    }

    .respmenu {
        margin-top: 30px;
    }

    .menuopen .leftMenuContainer {
        width: 200px;
        z-index: 9999;
    }

    .rightContainer, .menuopen .rightContainer {
        width: 100%;
        margin-left: 0px;
    }

    .menuopen .menucontainer ul li span.menutext {
        display: inline-block;
    }
    .standardTime {
        display:inline-block !important;
    }
    .userdetails {
        display: none;
    }

    .clsVerified, .imagelist {
        text-align: center;
    }

    .flexipopup .popcontainer {
        position: relative;
        display: block;
        width: 99%;
    }

    .flexipopup .bigimage {
        top: 40px;
        width: 100%;
        height: 60%;
    }

    .dummy {
        padding-top: 74%;
    }

    .popupright {
        position: unset;
        margin-top: 40px;
        width: 100%;
        padding-top: 0;
    }

    .nextcontainer {
        position: absolute;
        width: 100%;
        margin: 10px 0 15px;
        top: 0;
    }

    .contentcheckbox {
        width: 100%;
    }

    .notescontainer textarea {
        max-width: none;
    }

    .bigimage span {
        margin: 15px 0;
    }
}
@media screen and (max-width:893px) and (min-width: 857px) {
    .diplayresult span {min-width: 148px;}
}

@media screen and (max-width:768px) and (min-width: 320px) {
    .welcometext{margin-top: 30px;}
    .searchdesign{ margin: 20px 0 25px;}
    .alltotal {margin: 20px 0;}
    .searchdesign label {
        min-width: 80px;
    }

    .searchdesign .firstbr, .searchdesign .secoundbr {
        margin-bottom: 10px;
        display: inline-block;
    }

    .verfiyhead.tablecheckbox {
        margin-left: 10px;
    }

    #frmHoursVerification .searchbt, #frmHoursVerification .searchdesign .verifybt {
        margin-left: 10px;
    }
    .diplayresult span{min-width:160px;display:inline-block}
}
@media screen and (max-width:739px) and (min-width: 544px) {
    .diplayresult span {min-width: 118px;}
}
@media screen and (max-width:543px){
    .diplayresult .flexisprate{display:none}
}
@media screen and (max-width:680px) {
    .searchdesign label {
        margin-left: 0;
    }

    .searchdesign label {
        margin-right: 0px;
    }

    .searchdesign {
        padding: 15px 15px;
    }

    .searchbt {
        margin-left: 10px;
    }
    
}

@media screen and (max-width:640px) {
    .verfiyhead.tablecheckbox {
        margin-left: 0px;
        margin-top: 10px;
        display: inline-block;
    }
}

@media screen and (max-width:610px) {
    .searchdesign label {
        margin-left: 0;
    }

    .searchdesign label {
        margin-right: 0px;
    }

    .searchdesign {
        padding: 15px 15px;
    }

    .searchbt {
        margin-left: 0px;
    }

    .searchdesign .secoundbr {
        display: block;
    }

    #frmHoursVerification .searchbt {
        margin-left: 15px;
    }

    .searchdesign input[type="text"] {
        max-width: 115px;
    }

    .searchdropdown + .commonbt.clientsearch {
        margin-top: 0px;
        margin-right: 40px;
    }

    .searchdropdown {
        margin-right: 15px;
    }
}

@media screen and (max-width:530px) {
    #frmHoursVerification .searchdesign .verifybt {
        margin-left: 0;
        margin-right: 15px;
        margin-top: 10px;
    }

    .verfiyhead.tablecheckbox {
        margin-left: 0px;
        margin-top: 10px;
        display: inline-block;
    }
}

@media screen and (max-width:480px) and (min-width: 320px) {
    .searchdropdown + .commonbt.clientsearch {
        margin-top: 10px;
    }
    #frmHoursVerification .searchbt {
        margin-top: 10px;
        margin-right: 0px;
    }

    .leftlogo {
        margin: 15px 5px;
    }

    .respmenu {
        float: right;
        margin-right: 10px;
    }

    .siteheading {
        clear: both;
        margin-top: 30px;
    }

    .headeruser {
        display: none;
    }

    .searchdesign {
        padding: 15px 10px;
    }

    .searchleft .calcander, .searchdropdown {
        margin-bottom: 10px;
    }

    .flexi-date {
        margin-bottom: 25px;
    }

    .flexiImageList {
        margin-bottom: 25px;
    }

    .flexiImageConatiner {
        text-align: center;
    }

    .flexi-name div {
        display: block;
    }

    .flexi-date div {
        display: block;
    }

    .flexi-name div.flexisprate {
        display: none;
    }

    .flexi-date div.flexisprate {
        display: none;
    }

    .searchright {
        float: unset;
    }

    .searchleft {
        float: unset;
    }

    .searchdropdown {
        width: 100%;
    }

    .searchdesign .firstbr, .searchdesign .secoundbr {
        display: block;
        margin-bottom: 10px;
    }

    .searchdesign label {
        margin-left: 0;
    }
    .siteheading{    font-size: 14px;}
}
@media screen and (max-width:480px) {
    siteheading{    font-size: 14px;}
}
@media screen and (max-width:440px) {
    .alertmgs{ 
            right: 50%;
    height: auto;
    width: 96%;
    display: flex;
    line-height: 16px;
    margin-right: -48%;
    }
}
@media screen and (max-width:340px) {
   .siteheading{    font-size: 12px;}
}
@media screen and (max-width:390px) {
    #frmHoursVerification .searchbt {
        margin-left: 0px;
        margin-right: 20px;
        margin-top: 10px;
    }
    .siteheading{    font-size: 12px;}
}

/*Added by Prabakaran*/
table.commontableview tr th:last-child, table.commontableview tr td:last-child {
    width: 40%;
}


.flexi-image-list-inner .flexiImageList {
    margin-right: 12px;
}

.flexiProperty {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    margin-top: 1.5%;
    text-transform: capitalize;
}
.flexiProperty div{
    display:inline-block;
}
.flexiProperty .space{
    margin:0 5px;
}

.standardTime{
    position: absolute;
    bottom: 65px;
    margin-left: 5px;
    font-size: 13px;
    padding-left: 17px;
    display:inline-block;
}
.menuopen .standardTime{
    display:none;
}

.clsPreDefinedComments input[type=button]
{
     background-color: #1cabf7;
    border-radius: 7px;
    min-width: 132px;
    padding: 8px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    border: none;
    box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73;
    margin-bottom:5px;
}


.clsPreDefinedComments input#comment3
{
  min-width: 268px;
}


.clsPreDefinedComments input[type=button]:hover
{
    box-shadow: inset 0px 0px 0px #3e9cbf, 0px 0px 0px 0px #205c73;
}

span#loadBigImage.load {
    background-color: white;
}
input:focus, button:focus, .notescontainer textarea:focus {
 outline: #000 solid 2px !important;
 border-radius: 0px !important;
}
.clsPreDefinedComments input:focus{border-radius: 0px !important;}


.imagepopup{overflow:hidden}
 
/*27-11-20 popup fix*/
/*.imagepopup{overflow:hidden}
 .imagepopup .ui-dialog {
  margin-top: 110px !important;  
 }
.imagepopup .ui-dialog:before{
 content: '';
 background-color: #fff;
 width: 100%;
 height: 35px;
 top: 0;
 position: absolute;
 left: 0;
 z-index: 1;
}
.popupclosebt {
 position: fixed;
 top: 110px;
 right: 10.4%;
}
.nextcontainer {
 position: fixed;
 width: calc(100% - 300px);
 top: 106px;
 left: 0;
 z-index: 10;
}
.menuopen .popupclosebt,.menuopen .nextcontainer{    opacity: 0;}*/
@media screen and (max-width: 1440px) {
 /*.popupclosebt{right: 10%;}*/
 .imagepopup .ui-dialog {
  margin-top: 110px !important;
 }
}
@media screen and (max-width: 991px) and (min-width: 320px){
 .nextcontainer { 
  width: 100%; 
 } 
}
@media screen and (max-width: 823px) {
 .leftlogo{margin: 15px 9px;}
 .respmenu {margin-right:10px;}
 .siteheading{margin-left: 0;}
 .headeruser{margin: 22px 0px 0 0px;}
 .clsPreDefinedComments input#comment3 {min-width: 222px;}
 .imagepopup .headerContainer{display:none}
 .imagepopup .ui-dialog {
  margin-top: 0px !important;
  width: calc(100% - 10px) !important;
  left: 5px !important;
  height: calc(100% - 10px) !important;
 }
 .imagepopup .ui-dialog .ui-dialog-content{height: 100% !important;}
 .clsYetToVerify{    text-align: center;}
 .imagepopup .ui-dialog:before {
  content: '';
  background-color: #fff;
  width: 100%;
  height: 35px;
  top: 0;
  position: absolute;
  left: 0;
  z-index: 1;
 }

 .popupclosebt {
  position: fixed;
  top: 0.7%;
  right: 6px;
 }

 .nextcontainer {
  position: fixed;
  width: 100%;
  top: 0%;
  left: 0;
  z-index: 10;
 }
 .flexipopup .bigimage{height: auto;overflow: visible;}
 .dummy {padding-top: 50%;}
 .contentcheckbox{padding: 15px 5px;}
 .clsPreDefinedComments input[type=button]{font-size:11px; font-weight:bold;    min-width: 95px;border-radius: 4px;}
 .notescontainer{padding-left:5px;padding-right:5px;}
 .clsPreDefinedComments input#comment3 {
    min-width: 152px;
    border-radius: 4px;
}
 .bottombutton {margin-top: 0px; padding-right: 5px; }
 .flexiProperty { line-height: 5px; margin-top: 0; }
 table.commontableview tr td{padding: 10px 10px;white-space:nowrap}
 .flexiImageConatiner, .flexiTimeConatiner, .flexidetailContainer, .verifyScreenViewContainer{padding: 5px 10px;}
 .contenttext {padding: 0 10px;}
 table.commontableview{margin-bottom:0}
 table.commontableview tr td{}
 .searchdesign{margin-bottom:0px;}
 #BindHours .welcometext, .verifyScreenView .welcometext{
  margin-top: 15px;
 }
 .flexisprate{margin: 0 2px;}
}
@media screen and (max-height: 414px) {
 .popupclosebt {top: 1.5%;}
} 
@media screen and (max-height: 320px) {
 .popupclosebt {top: 2%;}
}
@media screen and (max-width: 320px) {
 .popupclosebt {position: fixed;top: 1%;right: 6px;}
 .flexiTimeConatiner .flexi-date{    width: 94%;}
}